设备成套

src/api/pms/device/index.ts

@@ -155,5 +155,17 @@ export const IotDeviceApi = {
   },
   getIotDeviceTdPage: async (params: any) => {
     return await request.get({ url: `/rq/iot-device/td/page`, params })
+  },
+
+  // 设备成套接口
+
+  // 获取成套设备列表
+  getIotDeviceSets: async (params: any) => {
+    return await request.get({ url: `/rq/iot-device-group-detail/page`, params })
+  },
+
+  // 获取成套列表
+  getIotDeviceSetList: async (params: any) => {
+    return await request.get({ url: `/rq/iot-device-group/page`, params })
   }
 }

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

@@ -0,0 +1,386 @@
+<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="deviceCode" style="margin-left: 20px">
+            <el-input
+              v-model="queryParams.deviceCode"
+              placeholder="请输入成套编码"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-200px"
+            />
+          </el-form-item>
+          <el-form-item label="成套名称" prop="deviceName">
+            <el-input
+              v-model="queryParams.deviceName"
+              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" />
+          <el-table-column label="主设备" align="center" prop="mainDeviceName" />
+          <el-table-column label="设备详情" align="center" prop="deviceDetails" />
+          <el-table-column :label="t('devicePerson.operation')" align="center" min-width="120px">
+            <template #default="scope">
+              <el-button link type="primary" @click="handleEdit(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="600px" @close="cancel">
+    <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="成套编码" prop="code">
+        <el-input v-model="formData.code" placeholder="请输入成套编码" />
+      </el-form-item>
+
+      <el-form-item label="所属部门" prop="deptId">
+        <ContentWrap class="dept-tree-container" height="400px">
+          <DeptTree2
+            ref="deptTreeRef"
+            v-model="selectedDeptId"
+            height="100%"
+            @update:modelValue="handleDeptChange"
+          />
+        </ContentWrap>
+      </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">
+        <el-select
+          v-model="selectedDeviceIds"
+          multiple
+          filterable
+          placeholder="请输入设备名称搜索"
+          class="w-full"
+          @change="handleDeviceChange"
+        >
+          <el-option
+            v-for="item in deviceOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+
+        <!-- 已选择的设备列表 -->
+        <div v-if="selectedDevices.length > 0" class="mt-2">
+          <div
+            v-for="device in selectedDevices"
+            :key="device.id"
+            class="flex items-center justify-between p-2 bg-gray-50 rounded mb-1"
+          >
+            <span>{{ device.name }} ({{ device.code }})</span>
+            <el-radio v-model="mainDeviceId" :label="device.id" @change="setMainDevice">
+              设为主设备
+            </el-radio>
+          </div>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="submit">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { IotDeviceApi } from '@/api/pms/device'
+import DeptTree from '@/views/system/user/DeptTree.vue'
+import DeptTree2 from '@/views/pms/device/DeptTree2.vue'
+
+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() // 搜索的表单
+
+const contentSpan = ref(20)
+const treeShow = ref(true)
+
+// 对话框相关
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const isEdit = ref(false)
+
+// 表单相关
+const formRef = ref()
+const formData = ref({
+  name: '',
+  code: '',
+  deptId: '',
+  remark: '',
+  devices: []
+})
+
+// 表单验证规则
+const formRules = {
+  name: [{ required: true, message: '成套名称不能为空', trigger: 'blur' }],
+  code: [{ required: true, message: '成套编码不能为空', trigger: 'blur' }]
+}
+
+// 部门树数据
+const selectedDeptId = ref<number | string>('')
+const handleDeptChange = (deptId) => {
+  formData.value.deptId = deptId
+  if (!deptId) {
+    selectedDeptId.value = ''
+    return
+  }
+  // 校验部门选择
+  // if (!validateDeptSelection(deptId)) {
+  //   // 重置部门选择
+  //   selectedDeptId.value = ''
+  //   deptTreeRef.value?.treeRef?.setCurrentKey(undefined) // 清除树的选择状态
+  //   deptTreeRef.value?.treeRef?.setCurrentNode(undefined)
+  //   return
+  // }
+  // selectedDeptId.value = deptId
+  // updateTempRelations()
+}
+
+// 设备选择相关
+const deviceOptions = ref([
+  {
+    id: 1,
+    name: '设备1',
+    code: 'E1'
+  },
+  {
+    id: 2,
+    name: '设备2',
+    code: 'E2'
+  },
+  {
+    id: 3,
+    name: '设备3',
+    code: 'E3'
+  }
+])
+const selectedDeviceIds = ref([])
+const selectedDevices = ref([])
+const mainDeviceId = ref('')
+
+/** 查询列表 */
+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 handleDeviceChange = (val) => {
+  // 更新已选择的设备列表
+  updateSelectedDevices()
+}
+
+// 更新已选择的设备列表
+const updateSelectedDevices = () => {
+  // 根据selectedDeviceIds筛选出设备详细信息
+  // selectedDevices.value = deviceOptions.value.filter(item =>
+  //   selectedDeviceIds.value.includes(item.id)
+  // )
+
+  // 如果主设备不在当前选择中，则清空主设备
+  if (mainDeviceId.value && !selectedDeviceIds.value.includes(mainDeviceId.value)) {
+    mainDeviceId.value = ''
+  }
+}
+
+// 设置主设备
+const setMainDevice = (val) => {
+  mainDeviceId.value = val
+}
+
+// 显示新增对话框
+const handleAdd = () => {
+  isEdit.value = false
+  dialogTitle.value = '新增成套设备'
+  resetForm()
+  dialogVisible.value = true
+}
+
+// 显示编辑对话框
+const handleEdit = (id) => {
+  isEdit.value = true
+  dialogTitle.value = '编辑成套设备'
+  resetForm()
+  dialogVisible.value = true
+
+  // 获取详情数据并填充表单
+  getDetail(id)
+}
+
+// 获取详情
+const getDetail = async (id) => {
+  // const res = await IotDeviceApi.getIotDeviceSet(id)
+  // formData.value = res
+  // selectedDeviceIds.value = res.devices.map(device => device.id)
+  // mainDeviceId.value = res.mainDeviceId
+  // updateSelectedDevices()
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.value = {
+    name: '',
+    code: '',
+    deptId: '',
+    remark: '',
+    devices: []
+  }
+  selectedDeviceIds.value = []
+  selectedDevices.value = []
+  mainDeviceId.value = ''
+  deviceOptions.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,
+        deviceIds: selectedDeviceIds.value,
+        mainDeviceId: mainDeviceId.value
+      }
+
+      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(() => {
+  getList()
+})
+</script>
+<style scoped></style>