pms-iot-vue/src/views/pms/device/completeSet/DeviceCompleteSet.vue

<template>
  <el-row :gutter="20">
    <!-- 左侧部门树 -->
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1" v-if="treeShow">
        <DeptTree @node-click="handleDeptNodeClick" />
      </ContentWrap>
    </el-col>
    <el-col :span="contentSpan" :xs="24">
      <ContentWrap>
        <!-- 搜索工作栏 -->
        <el-form
          class="-mb-15px"
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="成套编码" prop="code" style="margin-left: 20px">
            <el-input
              v-model="queryParams.code"
              placeholder="请输入成套编码"
              clearable
              @keyup.enter="handleQuery"
              class="!w-200px"
            />
          </el-form-item>
          <el-form-item label="成套名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入成套名称"
              clearable
              @keyup.enter="handleQuery"
              class="!w-200px"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleAdd" type="primary"
              ><Icon icon="ep:plus" class="mr-5px" />新增成套</el-button
            >
            <el-button @click="handleQuery"
              ><Icon icon="ep:search" class="mr-5px" /> {{ t('devicePerson.search') }}</el-button
            >
            <el-button @click="resetQuery"
              ><Icon icon="ep:refresh" class="mr-5px" /> {{ t('devicePerson.reset') }}</el-button
            >
          </el-form-item>
        </el-form>
      </ContentWrap>

      <!-- 列表 -->
      <ContentWrap>
        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
          <el-table-column :label="t('monitor.serial')" width="70" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="成套编码" align="center" prop="code" />
          <el-table-column label="成套名称" align="center" prop="name" />

          <el-table-column label="描述" align="center" prop="remark" />
          <el-table-column label="设备数量" align="center" prop="deviceCount">
            <template #default="scope">
              {{ (scope.row.details && scope.row.details.length) || 0 }}
            </template>
          </el-table-column>
          <el-table-column label="主设备" align="center" prop="mainDeviceName">
            <template #default="scope">
              {{ scope.row.details.filter((item) => item.ifMaster)[0]?.deviceName || '无' }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="设备详情" align="center" prop="deviceDetails">
            <template #default="scope">
              <el-button link type="primary" @click="handleDeviceDetail(scope.row)">
                查看
              </el-button>
            </template>
          </el-table-column> -->
          <el-table-column :label="t('devicePerson.operation')" align="center" min-width="120px">
            <template #default="scope">
              <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
              <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </ContentWrap>
    </el-col>
  </el-row>

  <!-- 新增/编辑成套设备对话框 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="800px" @close="cancel">
    <template #header>
      <div class="my-header" style="padding-bottom: 20px">
        <span>{{ dialogTitle }}</span>
      </div>
    </template>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
      <el-form-item label="成套名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入成套名称" />
      </el-form-item>

      <el-form-item :label="t('iotDevice.dept')" prop="deptId">
        <el-tree-select
          v-model="formData.deptId"
          :data="deptList"
          :props="defaultProps"
          check-strictly
          node-key="id"
          filterable
          placeholder="请选择所在部门"
          @change="handleDeptChange"
        />
      </el-form-item>

      <el-form-item label="描述" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入描述" :rows="2" />
      </el-form-item>

      <el-form-item label="选择设备" prop="devices">
        <div class="transfer-container">
          <el-transfer
            v-model="selectedDeviceIds"
            :data="deviceOptions"
            :titles="['设备列表', '已选择设备']"
            :button-texts="['移除', '添加']"
            filterable
            :filter-method="filterDeviceMethod"
            filter-placeholder="请输入设备名称"
            @change="rightDeviceChange"
          >
            <template #left-empty>
              <el-empty :image-size="60" :description="isEdit ? '加载中...' : '请选择设备'" />
            </template>
            <template #right-empty>
              <el-empty :image-size="60" :description="isEdit ? '加载中...' : '请选择设备'" />
            </template>
          </el-transfer>
        </div>
      </el-form-item>

      <div v-if="selectedDevices.length > 0" class="mt-4">
        <el-form-item label="设置主设备" prop="mainDevice">
          <el-select
            v-model="mainDeviceId"
            placeholder="请选择主设备"
            clearable
            filterable
            style="width: 200px"
            @change="setMainDevice"
          >
            <el-option
              v-for="device in selectedDevices"
              :key="device.id"
              :label="device.label"
              :value="isEdit ? device.deviceId : device.id"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>

    <template #footer>
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </template>
  </el-dialog>

  <!-- 设备详情对话框 -->
  <el-dialog v-model="dialogDetailVisible" title="设备详情" width="800">
    <el-table :data="deviceList">
      <el-table-column property="name" label="设备名称" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { IotDeviceApi } from '@/api/pms/device'
import DeptTree from '@/views/system/user/DeptTree.vue'
import { defaultProps, handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept'
import { ElMessageBox } from 'element-plus'
const deptList = ref<Tree[]>([]) // 树形结构

defineOptions({ name: 'IotDeviceComplete' })

const loading = ref(true) // 列表的加载中

const { t } = useI18n()

const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: undefined,
  name: undefined,
  deptId: undefined
})
const queryFormRef = ref(null) // 搜索的表单

const contentSpan = ref(20)
const treeShow = ref(true)

// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const isEdit = ref(false)

let dialogDetailVisible = ref(false)
const deviceList = ref([])

// 表单相关
const formRef = ref()
const formData = ref({
  name: '',
  details: [],
  deptId: '',
  remark: ''
})

// 表单验证规则
const formRules = {
  name: [{ required: true, message: '成套名称不能为空', trigger: 'blur' }],
  code: [{ required: true, message: '成套编码不能为空', trigger: 'blur' }],
  deptId: [{ required: true, message: '请选择部门', trigger: 'change' }]
}

// 部门树数据
const selectedDeptId = ref<number | string>('')

// 新增时部门改变时获取设备列表
const handleDeptChange = async (deptId) => {
  if (deptId) {
    selectedDeptId.value = deptId
    getDeviceList(deptId)
  }

  // 清空主设备she 设备列表
  selectedDevices.value = []
  mainDeviceId.value = ''
  selectedDeviceIds.value = []
}
// 获取设备列表
const getDeviceList = async (deptId) => {
  try {
    const res = await IotDeviceApi.getIotDeviceSetOptions({
      deptId,
      pageNo: 1,
      pageSize: 100
    })
    deviceOptions.value = res.list.map((item) => ({
      key: item.id,
      label: `${item.deviceName} (${item.deviceCode})`,
      ...item
    }))
  } catch (err) {
    console.error(err)
  }
}

// 设备选择相关
const deviceOptions = ref<any[]>([])
const selectedDeviceIds = ref([])
const selectedDevices = ref([])
const mainDeviceId = ref('')

const rightDeviceChange = (val) => {
  selectedDeviceIds.value = val
  updateSelectedDevices()
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await IotDeviceApi.getIotDeviceSetList(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 首页处理部门被点击 */
const handleDeptNodeClick = async (row) => {
  queryParams.deptId = row.id
  await getList()
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 设备过滤方法
const filterDeviceMethod = (query, item) => {
  return item.label.toLowerCase().includes(query.toLowerCase())
}

// 更新已选择的设备列表
const updateSelectedDevices = () => {
  selectedDevices.value = deviceOptions.value.filter((item) =>
    selectedDeviceIds.value.includes(item.id)
  )

  console.log('selectedDevices>>>>>>>>>>>>>>>>', selectedDevices.value)

  if (isEdit.value) {
    formData.value.details = selectedDevices.value.map((item) => ({
      deviceId: item.deviceId,
      deviceName: item.deviceName,
      deviceCode: item.deviceCode,
      deptId: item.deptId,
      ifMaster: item.id === mainDeviceId.value ? true : false
    }))
  } else {
    formData.value.details = selectedDevices.value.map((item) => ({
      deviceId: item.id,
      deviceName: item.deviceName,
      deviceCode: item.deviceCode,
      deptId: item.deptId,
      ifMaster: item.id === mainDeviceId.value ? true : false
    }))
  }

  // 如果主设备不在当前选择中，则清空主设备
  if (mainDeviceId.value && !selectedDeviceIds.value.includes(mainDeviceId.value)) {
    mainDeviceId.value = ''
  }
}

// 设置主设备
const setMainDevice = (val) => {
  mainDeviceId.value = val
  // 更新 details 中的 ifMaster 字段
  console.log('selectedDevices.value>>>>>>>>>>>>>>>>', selectedDevices.value)

  if (isEdit.value) {
    formData.value.details = selectedDevices.value.map((item) => ({
      deviceId: item.deviceId,
      deviceName: item.deviceName,
      deviceCode: item.deviceCode,
      deptId: item.deptId,
      ifMaster: item.deviceId === mainDeviceId.value ? true : false
    }))
  } else {
    formData.value.details = selectedDevices.value.map((item) => ({
      deviceId: item.id,
      deviceName: item.deviceName,
      deviceCode: item.deviceCode,
      deptId: item.deptId,
      ifMaster: item.id === mainDeviceId.value ? true : false
    }))
  }

  console.log('formData.value.details>>>>>>>>>>>>>>>>', formData.value.details)
}

// 显示新增对话框
const handleAdd = () => {
  isEdit.value = false
  dialogTitle.value = '新增成套设备'
  resetForm()
  dialogVisible.value = true
}

// 显示编辑对话框
const handleEdit = (row) => {
  isEdit.value = true

  dialogTitle.value = '编辑成套设备'

  formData.value = {
    ...row
  }

  getDeviceList(row.deptId)

  selectedDeviceIds.value = row.details.map((item) => item.deviceId)
  mainDeviceId.value = row.details.find((item) => item.ifMaster)?.deviceId || ''
  selectedDevices.value = row.details.map((item) => ({
    id: item.deviceId,
    deviceId: item.deviceId,
    deviceName: item.deviceName,
    deviceCode: item.deviceCode,
    deptId: item.deptId,
    ifMaster: item.ifMaster,
    label: item.deviceName + ' (' + item.deviceCode + ')',
    ...item
  }))

  dialogVisible.value = true
}
//删除成套
const handleDelete = async (id: number) => {
  ElMessageBox.confirm('确定要删除该成套设备吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        await IotDeviceApi.deleteIotDeviceSet(id)
        ElMessage.success('删除成功')
        getList()
      } catch (error) {
        console.error(error)
      }
    })
    .catch(() => {
      // 取消操作
    })
}

// 重置表单
const resetForm = () => {
  formData.value = {
    name: '',
    details: [],
    deptId: '',
    remark: ''
  }
  selectedDeviceIds.value = []
  selectedDevices.value = []
  deviceOptions.value = []
  mainDeviceId.value = ''
}

// 取消操作
const cancel = () => {
  dialogVisible.value = false
  resetForm()
}

// 提交表单
const submit = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (!valid) return

    // 检查是否选择了设备
    if (selectedDeviceIds.value.length === 0) {
      ElMessage.warning('请至少选择一个设备')
      return
    }

    // 检查是否设置了主设备
    if (!mainDeviceId.value) {
      ElMessage.warning('请选择主设备')
      return
    }

    try {
      const data = {
        ...formData.value
      }

      console.log('提交数据:', data)

      if (isEdit.value) {
        await IotDeviceApi.updateIotDeviceSet(data)
        ElMessage.success('编辑成功')
      } else {
        await IotDeviceApi.createIotDeviceSet(data)
        ElMessage.success('新增成功')
      }

      dialogVisible.value = false
      getList()
    } catch (error) {
      console.error(error)
    }
  })
}

onMounted(async () => {
  getList()

  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
})
</script>

<style scoped>
.transfer-container {
  display: flex;
  flex-direction: column;
}

.transfer-footer {
  margin-top: 8px;
  text-align: right;
}

::deep(.el-transfer-panel) {
  width: 300px;
}

::deep(.el-tree--highlight-current) {
  height: 200px !important;
}
</style>