云设备录入

src/views/govern/manage/factory.vue

@@ -141,17 +141,17 @@
                 <el-form-item label="设备类型:" prop="devType" class="top">
                     <el-select v-model.trim="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
                         <el-option
-                            v-for="item in devTypeOptions"
+                            v-for="item in formDevTypeOptions"
                             :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
+                            :label="item.label || item.name"
+                            :value="item.value || item.id"
                         ></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="设备型号:" prop="devModel" class="top">
                     <el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
                         <el-option
-                            v-for="item in formDevModelOptionsFilter"
+                            v-for="item in formDevModelOptionsFilter "
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"
@@ -159,7 +159,7 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
-                    <el-select v-model.trim="form.devAccessMethod" placeholder="请选择" clearable>
+                    <el-select v-model.trim="form.devAccessMethod" placeholder="请选择" clearable disabled>
                         <el-option label="MQTT" value="MQTT"></el-option>
                         <el-option label="CLD" value="CLD"></el-option>
                     </el-select>
@@ -219,6 +219,8 @@ defineOptions({
 })
 const showQrCode = ref(false)
 const devTypeOptions: any = ref([])
+const devTypeOptions2: any = ref([])
+const devModelOptions2: any = ref([])
 const deivce: any = ref({})
 const ruleFormRef = ref()
 const form = reactive({
@@ -246,37 +248,54 @@ const dialogTitle = ref('新增设备')
 const loading = ref<boolean>(false)
 const devModelOptions: any = ref([])
 const queryTheDictionary = () => {
-    queryByCode('Device_Type').then(async res => {
-        const id = res.data.id
-        await queryCsDictTree(id).then(res => {
-            devTypeOptions.value = res.data.map((item: any) => {
-                return {
-                    value: item.id,
-                    label: item.name,
-                    ...item
-                }
+        queryByCode('DEV_CLD').then(res => {
+            devTypeOptions2.value = res.data
+            return queryCsDictTree(res.data.id).then(res => {
+                devModelOptions2.value = res.data.map((item: any) => {
+                        return {
+                            value: item.id,
+                            label: item.name,
+                            ...item
+                        }
+                    })
             })
-            // let index = devTypeOptions.value.findIndex((item: any) => {
-            //     return item.name == '网关'
-            // })
-            // devTypeOptions.value.splice(index, 1)
+        }).then(() => {
+             queryByCode('Device_Type').then(async res => {
+                const id = res.data.id
+                await queryCsDictTree(id).then(res => {
+                    devTypeOptions.value = res.data.map((item: any) => {
+                        return {
+                            value: item.id,
+                            label: item.name,
+                            ...item
+                        }
+                    })
+                    
+                    // let index = devTypeOptions.value.findIndex((item: any) => {
+                    //     return item.name == '网关'
+                    // })
+                    // devTypeOptions.value.splice(index, 1)
+                })
+                await queryByid(id).then(res => {
+                    res.data.map((item: any, index: any) => {
+                        if (item.pid == id) {
+                            res.data.splice(index, 1)
+                        }
+                    })
+                    devModelOptions.value = res.data.map((item: any, index: any) => {
+                        return {
+                            value: item.id,
+                            label: item.name,
+                            ...item
+                        }
+                    })
+                })
+                await tableStore.index()
+            })
+        }).catch(error => {
+            console.error('查询过程中出现错误:', error)
         })
-        await queryByid(id).then(res => {
-            res.data.map((item: any, index: any) => {
-                if (item.pid == id) {
-                    res.data.splice(index, 1)
-                }
-            })
-            devModelOptions.value = res.data.map((item: any, index: any) => {
-                return {
-                    value: item.id,
-                    label: item.name,
-                    ...item
-                }
-            })
-        })
-        await tableStore.index()
-    })
+   
 }
 const devModelOptionsFilter = computed(() => {
     return devModelOptions.value.filter((item: any) => {
@@ -287,15 +306,39 @@ const devModelOptionsFilter = computed(() => {
         }
     })
 })
+
 const formDevModelOptionsFilter = computed(() => {
-    return devModelOptions.value.filter((item: any) => {
-        if (form.devType) {
-            return item.pid == form.devType
-        } else {
-            return true
-        }
-    })
+    if(form.devAccessMethod === 'CLD'){
+        return devModelOptions2.value.filter((item: any) => {
+            if (form.devType) {
+                return item.pid == form.devType
+            } else {
+                return true
+            }
+        })
+    }else{
+        return devModelOptions.value.filter((item: any) => {
+                if (form.devType) {
+                    return item.pid == form.devType
+                } else {
+                    return true
+                }
+            })
+    }
 })
+
+
+const formDevTypeOptions = computed(() => {
+    // 如果协议是CLD，使用devTypeOptions2，否则使用devTypeOptions
+    if (form.devAccessMethod === 'CLD') {
+        // 对于devTypeOptions2，使用id和name字段
+        return [devTypeOptions2.value]
+    } else {
+        // 对于devTypeOptions，使用value和label字段
+        return devTypeOptions.value
+    }
+})
+
 const tableStore = new TableStore({
     url: '/cs-device-boot/EquipmentDelivery/list',
     method: 'POST',
@@ -314,21 +357,29 @@ const tableStore = new TableStore({
         },
         { title: '设备名称', field: 'name', minWidth: 120 },
         { title: '网络设备ID', field: 'ndid', minWidth: 120 },
-
         {
             title: '设备类型',
             field: 'devType',
             formatter: row => {
-                return devTypeOptions.value.find((item: any) => item.value == row.cellValue).label
+                if (row.row.devAccessMethod === 'CLD') {
+                    // 遍历devTypeOptions2查找匹配                   
+                    return devTypeOptions2.value.name
+                } 
+                // 如果是MQTT协议，使用devTypeOptions查找
+                else if (row.row.devAccessMethod === 'MQTT') {
+                    const item = devTypeOptions.value.find((item: any) => item.value == row.cellValue);
+                    return item ? item.label : '/';
+                }
             },
             minWidth: 120
         },
-
         {
             title: '设备型号',
             field: 'devModel',
             formatter: row => {
-                return devModelOptions.value.find((item: any) => item.value == row.cellValue).label
+                const options = row.row.devAccessMethod === 'MQTT' ? devModelOptions.value : devModelOptions2.value
+                const item = options.find((item: any) => item.value == row.cellValue);
+                    return item ? item.label : '/';
             },
             minWidth: 120
         },
@@ -690,6 +741,7 @@ const tableStore = new TableStore({
                     : ''
             }
         })
+        console.log('🚀 ~ loadCallback ~ tableStore.table:', tableStore.table)
         tableKey.value += 1
     }
 })