调整设备管理界面

src/components/DeviceForm.vue

@@ -51,13 +51,12 @@
         
         <el-form-item label="设备模板" prop="device_template_id">
           <el-select v-model="formData.device_template_id" placeholder="请选择设备模板">
-            <!-- 假设设备模板列表从API获取或硬编码 -->
-            <el-option label="温度传感器" :value="1" />
-            <el-option label="湿度传感器" :value="2" />
-            <el-option label="氨气传感器" :value="3" />
-            <el-option label="饲料阀门" :value="4" />
-            <el-option label="风扇" :value="5" />
-            <el-option label="水帘" :value="6" />
+            <el-option
+              v-for="template in deviceTemplates"
+              :key="template.id"
+              :label="template.name"
+              :value="template.id"
+            />
           </el-select>
         </el-form-item>
         
@@ -78,15 +77,6 @@
             style="width: 100%"
           />
         </el-form-item>
-        
-        <el-form-item label="继电器通道号" prop="properties.relay_channel">
-          <el-input-number 
-            v-model="formData.properties.relay_channel" 
-            :min="0"
-            controls-position="right"
-            style="width: 100%"
-          />
-        </el-form-item>
       </div>
     </el-form>
     
@@ -103,6 +93,7 @@
 import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
 import { ElMessage } from 'element-plus';
 import { AreaControllerApi, DeviceApi } from '../api/device.js';
+import deviceTemplateService from '../services/deviceTemplateService.js'; // 导入设备模板服务
 
 export default {
   name: 'DeviceForm',
@@ -125,6 +116,7 @@ export default {
     const formRef = ref(null);
     const loading = ref(false);
     const areaControllers = ref([]);
+    const deviceTemplates = ref([]); // 新增设备模板列表状态
     
     const initialFormData = () => ({
       id: '',
@@ -137,7 +129,6 @@ export default {
       properties: { // 嵌套的properties对象
         bus_number: 0,
         bus_address: 0,
-        relay_channel: 0,
       }
     });
 
@@ -168,9 +159,6 @@ export default {
       'properties.bus_address': [
         { required: formData.type === 'device', message: '请输入485总线地址', trigger: 'blur' }
       ],
-      'properties.relay_channel': [
-        { required: formData.type === 'device', message: '请输入继电器通道号', trigger: 'blur' }
-      ]
     }));
     
     const title = computed(() => {
@@ -182,13 +170,13 @@ export default {
       if (value === 'area_controller') {
         formData.area_controller_id = '';
         formData.device_template_id = '';
-        formData.properties = { bus_number: 0, bus_address: 0, relay_channel: 0 };
+        formData.properties = { bus_number: 0, bus_address: 0 };
       } else {
         formData.network_id = '';
       }
       // 触发验证规则更新
       nextTick(() => {
-        if (formRef.value) { // 添加null检查
+        if (formRef.value) {
           formRef.value.clearValidate();
         }
       });
@@ -203,15 +191,28 @@ export default {
         areaControllers.value = [];
       }
     };
+
+    // 新增：加载设备模板列表
+    const loadDeviceTemplates = async () => {
+      try {
+        const response = await deviceTemplateService.getDeviceTemplates();
+        deviceTemplates.value = response.data || [];
+      } catch (error) {
+        console.error('获取设备模板列表失败:', error);
+        deviceTemplates.value = [];
+      }
+    };
     
     const handleClose = () => {
       emit('update:visible', false);
       emit('cancel');
       // 重置表单
       Object.assign(formData, initialFormData());
-      if (formRef.value) {
-        formRef.value.resetFields();
-      }
+      nextTick(() => {
+        if (formRef.value) {
+          formRef.value.resetFields();
+        }
+      });
     };
     
     const getSubmitData = () => {
@@ -231,6 +232,7 @@ export default {
     };
     
     const handleSubmit = async () => {
+      if (!formRef.value) return;
       await formRef.value.validate(async (valid) => {
         if (valid) {
           loading.value = true;
@@ -278,7 +280,7 @@ export default {
         // 重置表单以清除旧数据和验证状态
         Object.assign(formData, initialFormData());
         nextTick(() => {
-          if (formRef.value) { // 添加null检查
+          if (formRef.value) {
             formRef.value.clearValidate();
           }
         });
@@ -305,7 +307,7 @@ export default {
         // 如果没有传入deviceData，则重置为初始状态
         Object.assign(formData, initialFormData());
         nextTick(() => {
-          if (formRef.value) { // 添加null检查
+          if (formRef.value) {
             formRef.value.clearValidate();
           }
         });
@@ -315,11 +317,12 @@ export default {
     watch(() => props.visible, (newVal) => {
       if (newVal) {
         loadAreaControllers();
+        loadDeviceTemplates(); // 新增：对话框打开时加载设备模板
         // 如果是新增，确保type是默认值，且清空所有字段
         if (!props.isEdit) {
           Object.assign(formData, initialFormData());
           nextTick(() => {
-            if (formRef.value) { // 添加null检查
+            if (formRef.value) {
               formRef.value.clearValidate();
             }
           });
@@ -329,12 +332,14 @@ export default {
     
     onMounted(() => {
       loadAreaControllers();
+      loadDeviceTemplates(); // 新增：组件挂载时加载设备模板
     });
     
     return {
       formRef,
       loading,
       areaControllers,
+      deviceTemplates, // 暴露设备模板列表
       formData,
       rules,
       title,