根据后端新接口重构设备管理界面

src/components/DeviceForm.vue

@@ -14,32 +14,32 @@
       @submit.prevent
     >
       <!-- 基础信息 -->
-      <el-form-item label="设备名" prop="name">
+      <el-form-item label="名称" prop="name">
         <el-input v-model="formData.name" />
       </el-form-item>
       
-      <el-form-item label="设备类型" prop="type">
-        <el-select v-model="formData.type" @change="handleTypeChange">
+      <el-form-item label="类型" prop="type">
+        <el-select v-model="formData.type" @change="handleTypeChange" :disabled="isEdit">
           <el-option label="区域主控" value="area_controller" />
           <el-option label="普通设备" value="device" />
         </el-select>
       </el-form-item>
       
-      <el-form-item label="设备位置描述" prop="location">
+      <el-form-item label="位置描述" prop="location">
         <el-input v-model="formData.location" type="textarea" />
       </el-form-item>
       
       <!-- 区域主控类型额外字段 -->
       <div v-if="formData.type === 'area_controller'">
-        <el-form-item label="LoRa地址" prop="loraAddress">
-          <el-input v-model="formData.loraAddress" />
+        <el-form-item label="网络ID" prop="network_id">
+          <el-input v-model="formData.network_id" />
         </el-form-item>
       </div>
       
       <!-- 普通设备类型额外字段 -->
       <div v-if="formData.type === 'device'">
-        <el-form-item label="区域主控" prop="parentControllerId">
-          <el-select v-model="formData.parentControllerId" placeholder="请选择区域主控">
+        <el-form-item label="所属区域主控" prop="area_controller_id">
+          <el-select v-model="formData.area_controller_id" placeholder="请选择区域主控">
             <el-option
               v-for="controller in areaControllers"
               :key="controller.id"
@@ -49,38 +49,39 @@
           </el-select>
         </el-form-item>
         
-        <el-form-item label="设备种类" prop="subType">
-          <el-select v-model="formData.subType" placeholder="请选择设备种类">
-            <el-option label="风扇" value="fan" />
-            <el-option label="温度传感器" value="temperature" />
-            <el-option label="湿度传感器" value="humidity" />
-            <el-option label="氨气传感器" value="ammonia" />
-            <el-option label="饲料阀门" value="feed_valve" />
-            <el-option label="水帘" value="water_curtain" />
+        <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-select>
         </el-form-item>
         
-        <el-form-item label="485总线号" prop="busNumber">
+        <el-form-item label="485总线号" prop="properties.bus_number">
           <el-input-number 
-            v-model="formData.busNumber" 
+            v-model="formData.properties.bus_number" 
             :min="0"
             controls-position="right"
             style="width: 100%"
           />
         </el-form-item>
         
-        <el-form-item label="485总线地址" prop="busAddress">
+        <el-form-item label="485总线地址" prop="properties.bus_address">
           <el-input-number 
-            v-model="formData.busAddress" 
+            v-model="formData.properties.bus_address" 
             :min="0"
             controls-position="right"
             style="width: 100%"
           />
         </el-form-item>
         
-        <el-form-item label="继电器通道号" prop="relayChannel">
+        <el-form-item label="继电器通道号" prop="properties.relay_channel">
           <el-input-number 
-            v-model="formData.relayChannel" 
+            v-model="formData.properties.relay_channel" 
             :min="0"
             controls-position="right"
             style="width: 100%"
@@ -99,9 +100,9 @@
 </template>
 
 <script>
-import { ref, reactive, onMounted, watch, computed } from 'vue';
+import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
 import { ElMessage } from 'element-plus';
-import { DeviceApi } from '../api/device.js';
+import { AreaControllerApi, DeviceApi } from '../api/device.js';
 
 export default {
   name: 'DeviceForm',
@@ -121,121 +122,146 @@ export default {
   },
   emits: ['update:visible', 'success', 'cancel'],
   setup(props, { emit }) {
-    // 表单引用
     const formRef = ref(null);
-    
-    // 加载状态
     const loading = ref(false);
-    
-    // 区域主控列表
     const areaControllers = ref([]);
     
-    // 表单数据
-    const formData = reactive({
+    const initialFormData = () => ({
       id: '',
       name: '',
-      type: '',
+      type: 'device', // 默认创建普通设备
       location: '',
-      // 区域主控字段
-      loraAddress: '',
-      // 普通设备字段
-      parentControllerId: '',
-      subType: '',
-      busNumber: 0,
-      busAddress: 0,
-      relayChannel: 0
+      network_id: '', // 区域主控字段
+      area_controller_id: '', // 普通设备字段
+      device_template_id: '', // 普通设备字段
+      properties: { // 嵌套的properties对象
+        bus_number: 0,
+        bus_address: 0,
+        relay_channel: 0,
+      }
     });
+
+    const formData = reactive(initialFormData());
     
-    // 表单验证规则
-    const rules = {
+    const rules = computed(() => ({
       name: [
-        { required: true, message: '请输入设备名', trigger: 'blur' }
+        { required: true, message: '请输入名称', trigger: 'blur' }
       ],
       type: [
-        { required: true, message: '请选择设备类型', trigger: 'change' }
+        { required: true, message: '请选择类型', trigger: 'change' }
       ],
       location: [
-        { required: true, message: '请输入设备位置描述', trigger: 'blur' }
+        { required: true, message: '请输入位置描述', trigger: 'blur' }
       ],
-      loraAddress: [
-        { required: true, message: '请输入LoRa地址', trigger: 'blur' }
+      network_id: [
+        { required: formData.type === 'area_controller', message: '请输入网络ID', trigger: 'blur' }
       ],
-      parentControllerId: [
-        { required: true, message: '请选择区域主控', trigger: 'change' }
+      area_controller_id: [
+        { required: formData.type === 'device', message: '请选择所属区域主控', trigger: 'change' }
       ],
-      subType: [
-        { required: true, message: '请选择设备种类', trigger: 'change' }
+      device_template_id: [
+        { required: formData.type === 'device', message: '请选择设备模板', trigger: 'change' }
       ],
-      busNumber: [
-        { required: true, message: '请输入485总线号', trigger: 'blur' }
+      'properties.bus_number': [
+        { required: formData.type === 'device', message: '请输入485总线号', trigger: 'blur' }
       ],
-      busAddress: [
-        { required: true, message: '请输入485总线地址', trigger: 'blur' }
+      'properties.bus_address': [
+        { required: formData.type === 'device', message: '请输入485总线地址', trigger: 'blur' }
       ],
-      relayChannel: [
-        { required: true, message: '请输入继电器通道号', trigger: 'blur' }
+      'properties.relay_channel': [
+        { required: formData.type === 'device', message: '请输入继电器通道号', trigger: 'blur' }
       ]
-    };
+    }));
     
-    // 标题计算
     const title = computed(() => {
       return props.isEdit ? '编辑设备' : '添加设备';
     });
     
-    // 处理类型切换
     const handleTypeChange = (value) => {
-      // 清除之前的数据
+      // 清除不同类型特有的字段
       if (value === 'area_controller') {
-        // 清除普通设备字段
-        formData.parentControllerId = '';
-        formData.subType = '';
-        formData.busNumber = 0;
-        formData.busAddress = 0;
-        formData.relayChannel = 0;
+        formData.area_controller_id = '';
+        formData.device_template_id = '';
+        formData.properties = { bus_number: 0, bus_address: 0, relay_channel: 0 };
       } else {
-        // 清除区域主控字段
-        formData.loraAddress = '';
+        formData.network_id = '';
       }
+      // 触发验证规则更新
+      nextTick(() => {
+        formRef.value.clearValidate();
+      });
     };
     
-    // 获取区域主控列表
     const loadAreaControllers = async () => {
       try {
-        const response = await DeviceApi.list();
-        // 筛选出类型为区域主控的设备
-        areaControllers.value = response.data.filter(device => device.type === 'area_controller');
+        const response = await AreaControllerApi.list();
+        areaControllers.value = response.data || [];
       } catch (error) {
         console.error('获取区域主控列表失败:', error);
         areaControllers.value = [];
       }
     };
     
-    // 关闭对话框
     const handleClose = () => {
       emit('update:visible', false);
       emit('cancel');
+      // 重置表单
+      Object.assign(formData, initialFormData());
+      formRef.value.resetFields();
+    };
+    
+    const getSubmitData = () => {
+      const data = {
+        name: formData.name,
+        location: formData.location,
+        properties: formData.properties // properties直接作为对象传递
+      };
+
+      if (formData.type === 'area_controller') {
+        data.network_id = formData.network_id;
+      } else {
+        data.area_controller_id = formData.area_controller_id;
+        data.device_template_id = formData.device_template_id;
+      }
+      return data;
     };
     
-    // 提交表单
     const handleSubmit = async () => {
       await formRef.value.validate(async (valid) => {
         if (valid) {
           loading.value = true;
           try {
             let result;
+            const submitData = getSubmitData();
+
             if (props.isEdit) {
-              // 编辑设备
-              result = await DeviceApi.update(formData.id, getSubmitData());
+              if (formData.type === 'area_controller') {
+                result = await AreaControllerApi.update(formData.id, submitData);
+              } else {
+                result = await DeviceApi.update(formData.id, submitData);
+              }
             } else {
-              // 创建设备
-              result = await DeviceApi.create(getSubmitData());
+              if (formData.type === 'area_controller') {
+                result = await AreaControllerApi.create(submitData);
+              } else {
+                result = await DeviceApi.create(submitData);
+              }
             }
             
-            emit('success', result);
+            // 适配DeviceList的树形结构，添加type和parent_id
+            const processedResult = {
+              ...result.data,
+              type: formData.type
+            };
+            if (formData.type === 'device') {
+              processedResult.parent_id = processedResult.area_controller_id;
+            }
+
+            emit('success', processedResult);
             handleClose();
           } catch (error) {
             console.error('保存设备失败:', error);
-            ElMessage.error(props.isEdit ? '编辑设备失败' : '创建设备失败');
+            ElMessage.error(props.isEdit ? '编辑设备失败: ' + (error.message || '未知错误') : '创建设备失败: ' + (error.message || '未知错误'));
           } finally {
             loading.value = false;
           }
@@ -243,83 +269,54 @@ export default {
       });
     };
     
-    // 获取提交数据
-    const getSubmitData = () => {
-      const data = {
-        name: formData.name,
-        type: formData.type,
-        location: formData.location
-      };
-      
-      // 添加properties字段，作为JSON对象传递
-      const properties = {};
-      
-      if (formData.type === 'area_controller') {
-        properties.lora_address = formData.loraAddress;
-      } else if (formData.type === 'device') {
-        properties.bus_number = formData.busNumber;
-        properties.bus_address = formData.busAddress;
-        properties.relay_channel = formData.relayChannel;
-        data.parent_id = formData.parentControllerId;
-        data.sub_type = formData.subType;
-      }
-      
-      // 直接使用properties对象，不进行序列化
-      data.properties = properties;
-      
-      return data;
-    };
-    
-    // 监听设备数据变化
     watch(() => props.deviceData, (newVal) => {
       if (newVal && Object.keys(newVal).length > 0) {
-        // 填充表单数据
-        Object.keys(formData).forEach(key => {
-          // 处理字段名映射
-          let dataKey = key;
-          if (key === 'parentControllerId') {
-            dataKey = 'parent_id';
-          } else if (key === 'subType') {
-            dataKey = 'sub_type';
-          }
-          
-          if (newVal[dataKey] !== undefined) {
-            formData[key] = newVal[dataKey];
-          }
+        // 重置表单以清除旧数据和验证状态
+        Object.assign(formData, initialFormData());
+        nextTick(() => {
+          formRef.value.clearValidate();
         });
-        
+
+        formData.id = newVal.id;
+        formData.name = newVal.name;
+        formData.type = newVal.type;
+        formData.location = newVal.location;
+
+        if (newVal.type === 'area_controller') {
+          formData.network_id = newVal.network_id || '';
+        } else if (newVal.type === 'device') {
+          formData.area_controller_id = newVal.area_controller_id || newVal.parent_id || '';
+          formData.device_template_id = newVal.device_template_id || '';
+        }
+
         // 处理properties对象的数据填充
         if (newVal.properties) {
-          const props = typeof newVal.properties === 'string' ? JSON.parse(newVal.properties) : newVal.properties;
-          if (formData.type === 'area_controller') {
-            formData.loraAddress = props.lora_address || '';
-          } else if (formData.type === 'device') {
-            formData.busNumber = props.bus_number || 0;
-            formData.busAddress = props.bus_address || 0;
-            formData.relayChannel = props.relay_channel || 0;
-          }
+          // 确保properties是一个对象，如果API返回的是字符串则尝试解析
+          const propsData = typeof newVal.properties === 'string' ? JSON.parse(newVal.properties) : newVal.properties;
+          Object.assign(formData.properties, propsData);
         }
       } else {
-        // 重置表单数据
-        Object.keys(formData).forEach(key => {
-          if (key === 'busNumber' || key === 'busAddress' || key === 'relayChannel') {
-            formData[key] = 0;
-          } else {
-            formData[key] = '';
-          }
+        // 如果没有传入deviceData，则重置为初始状态
+        Object.assign(formData, initialFormData());
+        nextTick(() => {
+          formRef.value.clearValidate();
         });
       }
     }, { immediate: true });
     
-    // 监听visible属性变化，当对话框打开时重新加载区域主控列表
     watch(() => props.visible, (newVal) => {
       if (newVal) {
-        // 对话框打开时重新加载区域主控列表
         loadAreaControllers();
+        // 如果是新增，确保type是默认值，且清空所有字段
+        if (!props.isEdit) {
+          Object.assign(formData, initialFormData());
+          nextTick(() => {
+            formRef.value.clearValidate();
+          });
+        }
       }
     }, { immediate: true });
     
-    // 组件挂载时加载区域主控列表
     onMounted(() => {
       loadAreaControllers();
     });

src/components/DeviceList.vue

@@ -46,19 +46,19 @@
         :scrollbar-always-on="true"
         @sort-change="handleSortChange">
         <el-table-column width="40"></el-table-column>
-        <el-table-column prop="id" label="设备ID" min-width="100" sortable="custom" />
-        <el-table-column prop="name" label="设备名称" min-width="120" sortable="custom" />
-        <el-table-column prop="type" label="设备类型" min-width="100">
+        <el-table-column prop="id" label="ID" min-width="100" sortable="custom" />
+        <el-table-column prop="name" label="名称" min-width="120" sortable="custom" />
+        <el-table-column prop="type" label="类型" min-width="100">
           <template #default="scope">
             {{ formatDeviceType(scope.row.type) }}
           </template>
         </el-table-column>
-        <el-table-column prop="sub_type" label="设备子类型" min-width="100">
+        <el-table-column prop="device_template_name" label="设备模板" min-width="120">
           <template #default="scope">
-            {{ formatDeviceSubType(scope.row.sub_type) }}
+            {{ scope.row.type === 'device' ? scope.row.device_template_name || '-' : '-' }}
           </template>
         </el-table-column>
-        <el-table-column prop="location" label="设备地址描述" min-width="150" />
+        <el-table-column prop="location" label="地址描述" min-width="150" />
         <el-table-column label="操作" min-width="120" align="center">
           <template #default="scope">
             <el-button size="small" @click="editDevice(scope.row)">编辑</el-button>
@@ -177,22 +177,9 @@ export default {
       return typeMap[type] || type || '-';
     },
     
-    // 格式化设备子类型显示
-    formatDeviceSubType(subType) {
-      const subTypeMap = {
-        '': '-',
-        'temperature': '温度传感器',
-        'humidity': '湿度传感器',
-        'ammonia': '氨气传感器',
-        'feed_valve': '饲料阀门',
-        'fan': '风扇',
-        'water_curtain': '水帘'
-      };
-      return subTypeMap[subType] || subType || '-';
-    },
-    
     addDevice() {
-      this.currentDevice = {};
+      // 默认添加普通设备，如果需要添加区域主控，可以在DeviceForm中选择或通过其他入口触发
+      this.currentDevice = { type: 'device' }; 
       this.isEdit = false;
       this.dialogVisible = true;
     },
@@ -222,7 +209,7 @@ export default {
           type: 'warning'
         });
         
-        await deviceService.deleteDevice(device.id);
+        await deviceService.deleteDevice(device);
         this.$message.success('删除成功');
         await this.loadDevices();
       } catch (err) {