调整设备管理界面

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
-            <el-option label="温度传感器" :value="1" />
+              v-for="template in deviceTemplates"
-            <el-option label="湿度传感器" :value="2" />
+              :key="template.id"
-            <el-option label="氨气传感器" :value="3" />
+              :label="template.name"
-            <el-option label="饲料阀门" :value="4" />
+              :value="template.id"
-            <el-option label="风扇" :value="5" />
+            />
-            <el-option label="水帘" :value="6" />
           </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();
         }
       });
@@ -204,14 +192,27 @@ export default {
       }
     };
 
+    // 新增：加载设备模板列表
+    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) {
+      nextTick(() => {
-        formRef.value.resetFields();
+        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,

src/layouts/MainLayout.vue

@@ -15,6 +15,7 @@
         :collapse="isCollapse"
         :collapse-transition="false"
         router
+        :default-openeds="['/device-management']"
       >
         <el-menu-item index="/">
           <el-icon><House /></el-icon>
@@ -87,7 +88,7 @@
 <script>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets } from '@element-plus/icons-vue'; // 导入Setting和Tickets图标
+import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets } from '@element-plus/icons-vue';
 
 export default {
   name: 'MainLayout',
@@ -99,8 +100,8 @@ export default {
     Menu,
     Fold,
     Expand,
-    Setting, // 注册Setting图标
+    Setting,
-    Tickets // 注册Tickets图标
+    Tickets
   },
   setup() {
     const route = useRoute();
@@ -126,9 +127,8 @@ export default {
     };
     
     const activeMenu = computed(() => {
-      // 对于二级菜单，需要判断当前路由是否在其子菜单中
       if (route.path === '/devices' || route.path === '/device-templates') {
-        return route.path; // 激活子菜单项
+        return route.path;
       }
       return route.path;
     });
@@ -145,8 +145,8 @@ export default {
 
     const logout = () => {
       localStorage.removeItem('jwt_token');
-      localStorage.removeItem('username');
+      localStorage.removeItem('username'); // 清除用户名
-      username.value = '管理员';
+      username.value = '管理员'; // 重置显示
       router.push('/login');
     };
 

src/services/deviceTemplateService.js

@@ -8,7 +8,7 @@ class DeviceTemplateService {
   async getDeviceTemplates() {
     try {
       const response = await apiClient.deviceTemplates.list();
-      return response.data || [];
+      return response || [];
     } catch (error) {
       console.error('获取设备模板列表失败:', error);
       throw error;