设备成套快完了

.env.local

@@ -3,7 +3,7 @@ NODE_ENV=development
 
 VITE_DEV=true
 
-# 请求路径  http://192.168.188.149:48080
+# 请求路径  http://192.168.188.149:48080  https://iot.deepoil.cc
 VITE_BASE_URL='https://iot.deepoil.cc'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务

src/api/pms/device/index.ts

@@ -159,13 +159,26 @@ export const IotDeviceApi = {
 
   // 设备成套接口
 
-  // 获取成套设备列表
+  // 查看详情时获取成套设备列表
   getIotDeviceSets: async (params: any) => {
     return await request.get({ url: `/rq/iot-device-group-detail/page`, params })
   },
 
+  // 新增时根据部门id获取设备列表
+  getIotDeviceSetOptions: async (params: any) => {
+    return await request.get({ url: `/rq/iot-device/page`, params })
+  },
+
   // 获取成套列表
   getIotDeviceSetList: async (params: any) => {
     return await request.get({ url: `/rq/iot-device-group/page`, params })
+  },
+  // 添加成套
+  createIotDeviceSet: async (data: any) => {
+    return await request.post({ url: `/rq/iot-device-group/create`, data })
+  },
+  // 编辑成套
+  updateIotDeviceSet: async (data: any) => {
+    return await request.put({ url: `/rq/iot-device-group/update`, data })
   }
 }

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

@@ -16,7 +16,7 @@
           :inline="true"
           label-width="68px"
         >
-          <el-form-item label="成套编码" prop="deviceCode" style="margin-left: 20px">
+          <el-form-item label="成套编码" prop="code" style="margin-left: 20px">
             <el-input
               v-model="queryParams.code"
               placeholder="请输入成套编码"
@@ -25,7 +25,7 @@
               class="!w-200px"
             />
           </el-form-item>
-          <el-form-item label="成套名称" prop="deviceName">
+          <el-form-item label="成套名称" prop="name">
             <el-input
               v-model="queryParams.name"
               placeholder="请输入成套名称"
@@ -65,7 +65,7 @@
           <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>
+              <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -87,19 +87,17 @@
         <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="200px">
-          <DeptTree2
-            ref="deptTreeRef"
-            v-model="selectedDeptId"
-            height="50%"
-            @update:modelValue="handleDeptChange"
-          />
-        </ContentWrap>
+      <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">
@@ -116,31 +114,21 @@
             filterable
             :filter-method="filterDeviceMethod"
             filter-placeholder="请输入设备名称"
-          >
-            <template #left-footer>
-              <div class="transfer-footer">
-                <el-pagination
-                  small
-                  layout="prev, pager, next"
-                  :total="deviceTotal"
-                  :page-size="deviceQueryParams.pageSize"
-                  :current-page="deviceQueryParams.pageNo"
-                  @current-change="handleDevicePageChange"
-                />
-              </div>
-            </template>
-          </el-transfer>
+            @change="rightDeviceChange"
+          />
         </div>
 
         <!-- 已选择的设备列表 -->
         <div v-if="selectedDevices.length > 0" class="mt-4">
           <div class="mb-2 font-medium">设置主设备：</div>
+
           <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.label }}</span>
+            <span class="pr-2">{{ device.label }}</span>
+
             <el-radio v-model="mainDeviceId" :label="device.key" @change="setMainDevice">
               设为主设备
             </el-radio>
@@ -159,7 +147,9 @@
 <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'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+const deptList = ref<Tree[]>([]) // 树形结构
 
 defineOptions({ name: 'IotDeviceComplete' })
 
@@ -176,7 +166,7 @@ const queryParams = reactive({
   name: undefined,
   deptId: undefined
 })
-const queryFormRef = ref() // 搜索的表单
+const queryFormRef = ref(null) // 搜索的表单
 
 const contentSpan = ref(20)
 const treeShow = ref(true)
@@ -190,27 +180,48 @@ const isEdit = ref(false)
 const formRef = ref()
 const formData = ref({
   name: '',
-  code: '',
+  details: [],
   deptId: '',
-  remark: '',
-  devices: []
+  remark: ''
 })
 
 // 表单验证规则
 const formRules = {
   name: [{ required: true, message: '成套名称不能为空', trigger: 'blur' }],
-  code: [{ required: true, message: '成套编码不能为空', trigger: 'blur' }]
+  code: [{ required: true, message: '成套编码不能为空', trigger: 'blur' }],
+  deptId: [{ required: true, message: '请选择部门', trigger: 'change' }]
 }
 
 // 部门树数据
 const selectedDeptId = ref<number | string>('')
-const deptTreeRef = ref()
 
-const handleDeptChange = (deptId) => {
-  formData.value.deptId = deptId
-  if (!deptId) {
-    selectedDeptId.value = ''
-    return
+// 新增时部门改变时获取设备列表
+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)
   }
 }
 
@@ -220,16 +231,10 @@ const selectedDeviceIds = ref([])
 const selectedDevices = ref([])
 const mainDeviceId = ref('')
 
-// 设备分页参数
-const deviceQueryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  keyword: '',
-  total: 0
-})
-
-const deviceTotal = ref(0)
-
+const rightDeviceChange = (val) => {
+  selectedDeviceIds.value = val
+  updateSelectedDevices()
+}
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -242,7 +247,7 @@ const getList = async () => {
   }
 }
 
-/** 处理部门被点击 */
+/** 首页处理部门被点击 */
 const handleDeptNodeClick = async (row) => {
   queryParams.deptId = row.id
   await getList()
@@ -260,66 +265,25 @@ const resetQuery = () => {
   handleQuery()
 }
 
-// 获取设备列表
-const getDeviceList = async () => {
-  try {
-    // 模拟API调用
-    // const res = await IotDeviceApi.getDeviceList(deviceQueryParams)
-    // deviceOptions.value = res.list.map(item => ({
-    //   key: item.id,
-    //   label: `${item.name} (${item.code})`,
-    //   ...item
-    // }))
-    // deviceTotal.value = res.total
-
-    // 模拟数据
-    const mockDevices = [
-      { id: 1, name: '设备1', code: 'E1' },
-      { id: 2, name: '设备2', code: 'E2' },
-      { id: 3, name: '设备3', code: 'E3' },
-      { id: 4, name: '设备4', code: 'E4' },
-      { id: 5, name: '设备5', code: 'E5' },
-      { id: 6, name: '设备6', code: 'E6' },
-      { id: 7, name: '设备7', code: 'E7' },
-      { id: 8, name: '设备8', code: 'E8' },
-      { id: 9, name: '设备9', code: 'E9' },
-      { id: 10, name: '设备10', code: 'E10' }
-    ]
-
-    deviceOptions.value = mockDevices.map((item) => ({
-      key: item.id,
-      label: `${item.name} (${item.code})`,
-      ...item
-    }))
-
-    deviceTotal.value = mockDevices.length
-  } catch (err) {
-    console.error(err)
-  }
-}
-
-// 设备分页切换
-const handleDevicePageChange = (page) => {
-  deviceQueryParams.pageNo = page
-  getDeviceList()
-}
-
 // 设备过滤方法
 const filterDeviceMethod = (query, item) => {
   return item.label.toLowerCase().includes(query.toLowerCase())
 }
 
-// 处理设备选择变化
-const handleDeviceChange = (val) => {
-  updateSelectedDevices()
-}
-
 // 更新已选择的设备列表
 const updateSelectedDevices = () => {
   selectedDevices.value = deviceOptions.value.filter((item) =>
-    selectedDeviceIds.value.includes(item.key)
+    selectedDeviceIds.value.includes(item.id)
   )
 
+  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 = ''
@@ -329,6 +293,14 @@ const updateSelectedDevices = () => {
 // 设置主设备
 const setMainDevice = (val) => {
   mainDeviceId.value = val
+  // 更新 details 中的 ifMaster 字段
+  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
+  }))
 }
 
 // 显示新增对话框
@@ -337,14 +309,28 @@ const handleAdd = () => {
   dialogTitle.value = '新增成套设备'
   resetForm()
   dialogVisible.value = true
-  getDeviceList()
 }
 
 // 显示编辑对话框
-const handleEdit = () => {
+const handleEdit = (row) => {
   isEdit.value = true
   dialogTitle.value = '编辑成套设备'
-  resetForm()
+
+  console.log('row>>>>>>>>>>>>>>>>', row)
+
+  formData.value = {
+    ...row
+  }
+
+  deviceOptions.value = row.details.map((item) => ({
+    key: item.deviceId,
+    label: `${item.deviceName} (${item.deviceCode})`,
+    ...item
+  }))
+
+  selectedDeviceIds.value = row.details.map((item) => item.deviceId)
+  mainDeviceId.value = row.details.find((item) => item.ifMaster)?.deviceId || ''
+  // updateSelectedDevices()
   dialogVisible.value = true
 }
 
@@ -352,16 +338,14 @@ const handleEdit = () => {
 const resetForm = () => {
   formData.value = {
     name: '',
-    code: '',
+    details: [],
     deptId: '',
-    remark: '',
-    devices: []
+    remark: ''
   }
   selectedDeviceIds.value = []
   selectedDevices.value = []
+  deviceOptions.value = []
   mainDeviceId.value = ''
-  deviceQueryParams.pageNo = 1
-  deviceQueryParams.keyword = ''
 }
 
 // 取消操作
@@ -391,16 +375,16 @@ const submit = async () => {
 
     try {
       const data = {
-        ...formData.value,
-        deviceIds: selectedDeviceIds.value,
-        mainDeviceId: mainDeviceId.value
+        ...formData.value
       }
 
+      console.log('提交数据:', data)
+
       if (isEdit.value) {
-        // await IotDeviceApi.updateIotDeviceSet(data)
+        await IotDeviceApi.updateIotDeviceSet(data)
         ElMessage.success('编辑成功')
       } else {
-        // await IotDeviceApi.createIotDeviceSet(data)
+        await IotDeviceApi.createIotDeviceSet(data)
         ElMessage.success('新增成功')
       }
 
@@ -414,6 +398,8 @@ const submit = async () => {
 
 onMounted(async () => {
   getList()
+
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
 })
 </script>