暂存

.env.local

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

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

@@ -18,7 +18,7 @@
         >
           <el-form-item label="成套编码" prop="deviceCode" style="margin-left: 20px">
             <el-input
-              v-model="queryParams.deviceCode"
+              v-model="queryParams.code"
               placeholder="请输入成套编码"
               clearable
               @keyup.enter="handleQuery"
@@ -27,7 +27,7 @@
           </el-form-item>
           <el-form-item label="成套名称" prop="deviceName">
             <el-input
-              v-model="queryParams.deviceName"
+              v-model="queryParams.name"
               placeholder="请输入成套名称"
               clearable
               @keyup.enter="handleQuery"
@@ -81,7 +81,7 @@
   </el-row>
 
   <!-- 新增/编辑成套设备对话框 -->
-  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px" @close="cancel">
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="800px" @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="请输入成套名称" />
@@ -92,11 +92,11 @@
       </el-form-item>
 
       <el-form-item label="所属部门" prop="deptId">
-        <ContentWrap class="dept-tree-container" height="400px">
+        <ContentWrap class="dept-tree-container" height="200px">
           <DeptTree2
             ref="deptTreeRef"
             v-model="selectedDeptId"
-            height="100%"
+            height="50%"
             @update:modelValue="handleDeptChange"
           />
         </ContentWrap>
@@ -107,31 +107,41 @@
       </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 class="transfer-container">
+          <el-transfer
+            v-model="selectedDeviceIds"
+            :data="deviceOptions"
+            :titles="['设备列表', '已选择设备']"
+            :button-texts="['移除', '添加']"
+            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>
+        </div>
 
         <!-- 已选择的设备列表 -->
-        <div v-if="selectedDevices.length > 0" class="mt-2">
+        <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.name }} ({{ device.code }})</span>
-            <el-radio v-model="mainDeviceId" :label="device.id" @change="setMainDevice">
+            <span>{{ device.label }}</span>
+            <el-radio v-model="mainDeviceId" :label="device.key" @change="setMainDevice">
               设为主设备
             </el-radio>
           </div>
@@ -194,46 +204,32 @@ const formRules = {
 
 // 部门树数据
 const selectedDeptId = ref<number | string>('')
+const deptTreeRef = ref()
+
 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 deviceOptions = ref<any[]>([])
 const selectedDeviceIds = ref([])
 const selectedDevices = ref([])
 const mainDeviceId = ref('')
 
+// 设备分页参数
+const deviceQueryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  keyword: '',
+  total: 0
+})
+
+const deviceTotal = ref(0)
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -264,18 +260,65 @@ 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 = () => {
-  // 根据selectedDeviceIds筛选出设备详细信息
-  // selectedDevices.value = deviceOptions.value.filter(item =>
-  //   selectedDeviceIds.value.includes(item.id)
-  // )
+  selectedDevices.value = deviceOptions.value.filter((item) =>
+    selectedDeviceIds.value.includes(item.key)
+  )
 
   // 如果主设备不在当前选择中，则清空主设备
   if (mainDeviceId.value && !selectedDeviceIds.value.includes(mainDeviceId.value)) {
@@ -294,26 +337,15 @@ const handleAdd = () => {
   dialogTitle.value = '新增成套设备'
   resetForm()
   dialogVisible.value = true
+  getDeviceList()
 }
 
 // 显示编辑对话框
-const handleEdit = (id) => {
+const handleEdit = () => {
   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()
 }
 
 // 重置表单
@@ -328,7 +360,8 @@ const resetForm = () => {
   selectedDeviceIds.value = []
   selectedDevices.value = []
   mainDeviceId.value = ''
-  deviceOptions.value = []
+  deviceQueryParams.pageNo = 1
+  deviceQueryParams.keyword = ''
 }
 
 // 取消操作
@@ -379,8 +412,27 @@ const submit = async () => {
   })
 }
 
-onMounted(() => {
+onMounted(async () => {
   getList()
 })
 </script>
-<style scoped></style>
+
+<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>