实现设备模板管理界面

src/api/deviceTemplate.js

@@ -0,0 +1,53 @@
+import http from '../utils/http.js';
+
+/**
+ * 设备模板管理API
+ */
+export class DeviceTemplateApi {
+  /**
+   * 获取设备模板列表
+   * @returns {Promise} 设备模板列表
+   */
+  static list() {
+    return http.get('/api/v1/device-templates');
+  }
+
+  /**
+   * 创建新设备模板
+   * @param {Object} deviceTemplateData 设备模板数据
+   * @returns {Promise} 创建结果
+   */
+  static create(deviceTemplateData) {
+    return http.post('/api/v1/device-templates', deviceTemplateData);
+  }
+
+  /**
+   * 获取设备模板详情
+   * @param {string|number} id 设备模板ID
+   * @returns {Promise} 设备模板详情
+   */
+  static get(id) {
+    return http.get(`/api/v1/device-templates/${id}`);
+  }
+
+  /**
+   * 更新设备模板信息
+   * @param {string|number} id 设备模板ID
+   * @param {Object} deviceTemplateData 设备模板数据
+   * @returns {Promise} 更新结果
+   */
+  static update(id, deviceTemplateData) {
+    return http.put(`/api/v1/device-templates/${id}`, deviceTemplateData);
+  }
+
+  /**
+   * 删除设备模板
+   * @param {string|number} id 设备模板ID
+   * @returns {Promise} 删除结果
+   */
+  static delete(id) {
+    return http.delete(`/api/v1/device-templates/${id}`);
+  }
+}
+
+export default DeviceTemplateApi;

src/api/index.js

@@ -1,6 +1,7 @@
 import { AreaControllerApi, DeviceApi } from './device.js';
 import PlanApi from './plan.js';
 import UserApi from './user.js';
+import DeviceTemplateApi from './deviceTemplate.js'; // 导入设备模板API
 
 /**
  * API客户端
@@ -11,6 +12,7 @@ export class ApiClient {
     this.devices = DeviceApi;
     this.plans = PlanApi;
     this.users = UserApi;
+    this.deviceTemplates = DeviceTemplateApi; // 添加设备模板API
   }
 }
 

src/components/DeviceTemplateForm.vue

@@ -0,0 +1,282 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="title"
+    @close="handleClose"
+    :close-on-click-modal="false"
+    width="600px"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+      @submit.prevent
+    >
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="formData.name" />
+      </el-form-item>
+
+      <el-form-item label="制造商" prop="manufacturer">
+        <el-input v-model="formData.manufacturer" />
+      </el-form-item>
+
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="formData.description" type="textarea" />
+      </el-form-item>
+
+      <el-form-item label="类别" prop="category">
+        <el-select v-model="formData.category" placeholder="请选择类别" @change="handleCategoryChange">
+          <el-option label="执行器" value="actuator" />
+          <el-option label="传感器" value="sensor" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="指令 (JSON)" prop="commands">
+        <el-input
+          v-model="formData.commands"
+          type="textarea"
+          :rows="5"
+          placeholder="请输入JSON格式的指令参数"
+        />
+      </el-form-item>
+
+      <el-form-item
+        v-if="formData.category === 'sensor'"
+        label="值描述 (JSON)"
+        prop="values"
+      >
+        <el-input
+          v-model="formData.values"
+          type="textarea"
+          :rows="5"
+          placeholder="请输入JSON格式的值描述数组"
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { ref, reactive, computed, watch, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import deviceTemplateService from '../services/deviceTemplateService.js';
+
+// 默认的JSON模板
+const DEFAULT_ACTUATOR_COMMANDS = JSON.stringify({
+  modbus_start_address: 0,
+  modbus_quantity: 1
+}, null, 2);
+
+const DEFAULT_SENSOR_COMMANDS = JSON.stringify({
+  modbus_function_code: 3,
+  modbus_start_address: 0,
+  modbus_quantity: 1
+}, null, 2);
+
+const DEFAULT_SENSOR_VALUES = JSON.stringify([
+  {
+    type: "temperature",
+    multiplier: 0.1,
+    offset: 0
+  }
+], null, 2);
+
+export default {
+  name: 'DeviceTemplateForm',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    templateData: {
+      type: Object,
+      default: () => ({}),
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:visible', 'success', 'cancel'],
+  setup(props, { emit }) {
+    const formRef = ref(null);
+    const loading = ref(false);
+
+    const initialFormData = () => ({
+      id: '',
+      name: '',
+      manufacturer: '',
+      description: '',
+      category: 'actuator', // 默认执行器
+      commands: DEFAULT_ACTUATOR_COMMANDS, // 预填充执行器指令
+      values: '',
+    });
+
+    const formData = reactive(initialFormData());
+
+    // JSON 验证器
+    const validateJson = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error(rule.message));
+      }
+      try {
+        JSON.parse(value);
+        callback();
+      } catch (e) {
+        callback(new Error('请输入有效的 JSON 格式'));
+      }
+    };
+
+    const rules = computed(() => ({
+      name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
+      category: [{ required: true, message: '请选择模板类别', trigger: 'change' }],
+      commands: [
+        { required: true, message: '请输入指令参数', trigger: 'blur' },
+        { validator: validateJson, message: '指令参数必须是有效的 JSON 格式', trigger: 'blur' },
+      ],
+      values: [
+        { required: formData.category === 'sensor', message: '请输入值描述', trigger: 'blur' },
+        { validator: validateJson, message: '值描述必须是有效的 JSON 格式', trigger: 'blur' },
+      ],
+    }));
+
+    const title = computed(() => {
+      return props.isEdit ? '编辑设备模板' : '新增设备模板';
+    });
+
+    const handleCategoryChange = (newCategory) => {
+      if (newCategory === 'actuator') {
+        formData.commands = DEFAULT_ACTUATOR_COMMANDS;
+        formData.values = ''; // 执行器没有values
+      } else if (newCategory === 'sensor') {
+        formData.commands = DEFAULT_SENSOR_COMMANDS;
+        formData.values = DEFAULT_SENSOR_VALUES; // 传感器预填充values
+      }
+      nextTick(() => {
+        if (formRef.value) {
+          formRef.value.clearValidate();
+        }
+      });
+    };
+
+    const handleClose = () => {
+      emit('update:visible', false);
+      emit('cancel');
+      // 重置表单
+      Object.assign(formData, initialFormData());
+      nextTick(() => {
+        if (formRef.value) {
+          formRef.value.resetFields();
+        }
+      });
+    };
+
+    const handleSubmit = async () => {
+      if (!formRef.value) return;
+      await formRef.value.validate(async (valid) => {
+        if (valid) {
+          loading.value = true;
+          try {
+            const submitData = {
+              name: formData.name,
+              manufacturer: formData.manufacturer,
+              description: formData.description,
+              category: formData.category,
+              commands: JSON.parse(formData.commands),
+            };
+
+            if (formData.category === 'sensor' && formData.values) {
+              submitData.values = JSON.parse(formData.values);
+            }
+
+            if (props.isEdit) {
+              await deviceTemplateService.updateDeviceTemplate(formData.id, submitData);
+            } else {
+              await deviceTemplateService.createDeviceTemplate(submitData);
+            }
+
+            emit('success');
+            handleClose();
+          } catch (error) {
+            console.error('保存设备模板失败:', error);
+            ElMessage.error(
+              props.isEdit ? '编辑设备模板失败: ' + (error.message || '未知错误') : '创建设备模板失败: ' + (error.message || '未知错误')
+            );
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+
+    watch(
+      () => props.templateData,
+      (newVal) => {
+        if (newVal && Object.keys(newVal).length > 0) {
+          // 填充表单数据
+          formData.id = newVal.id;
+          formData.name = newVal.name;
+          formData.manufacturer = newVal.manufacturer;
+          formData.description = newVal.description;
+          formData.category = newVal.category;
+          // 格式化JSON显示
+          formData.commands = newVal.commands ? JSON.stringify(newVal.commands, null, 2) : '';
+          formData.values = newVal.values ? JSON.stringify(newVal.values, null, 2) : '';
+        } else {
+          // 重置表单数据到初始状态 (新增模式)
+          Object.assign(formData, initialFormData());
+        }
+        nextTick(() => {
+          if (formRef.value) {
+            formRef.value.clearValidate();
+          }
+        });
+      },
+      { immediate: true }
+    );
+
+    watch(
+      () => props.visible,
+      (newVal) => {
+        if (newVal && !props.isEdit) {
+          // 如果是新增模式且对话框打开，重置表单
+          Object.assign(formData, initialFormData());
+          nextTick(() => {
+            if (formRef.value) {
+              formRef.value.clearValidate();
+            }
+          });
+        }
+      },
+      { immediate: true }
+    );
+
+    return {
+      formRef,
+      loading,
+      formData,
+      rules,
+      title,
+      handleCategoryChange,
+      handleClose,
+      handleSubmit,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>

src/components/DeviceTemplateList.vue

@@ -3,17 +3,160 @@
     <el-card>
       <template #header>
         <div class="card-header">
+          <div class="title-container">
             <h2 class="page-title">设备模板管理</h2>
+            <el-button type="text" @click="loadDeviceTemplates" class="refresh-btn" title="刷新设备模板列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
+          <el-button type="primary" @click="addTemplate">新增模板</el-button>
         </div>
       </template>
-      <el-empty description="设备模板管理功能待开发" />
+      
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading">
+        <el-skeleton animated />
+      </div>
+      
+      <!-- 错误状态 -->
+      <div v-else-if="error" class="error">
+        <el-alert
+          title="获取设备模板数据失败"
+          :description="error"
+          type="error"
+          show-icon
+          closable
+          @close="error = null"
+        />
+        <el-button type="primary" @click="loadDeviceTemplates" class="retry-btn">重新加载</el-button>
+      </div>
+      
+      <!-- 设备模板列表 -->
+      <el-table 
+        v-else 
+        :data="tableData" 
+        style="width: 100%"
+        :fit="true"
+        table-layout="auto"
+        row-key="id"
+        :highlight-current-row="false"
+        :scrollbar-always-on="true"
+      >
+        <el-table-column prop="id" label="ID" min-width="80" />
+        <el-table-column prop="name" label="名称" min-width="150" />
+        <el-table-column prop="manufacturer" label="制造商" min-width="120" />
+        <el-table-column prop="description" label="描述" min-width="200" />
+        <el-table-column prop="category" label="类别" min-width="100">
+          <template #default="scope">
+            {{ formatCategory(scope.row.category) }}
+          </template>
+        </el-table-column>
+        <!-- 移除创建时间和更新时间列 -->
+        <!-- <el-table-column prop="created_at" label="创建时间" min-width="160" /> -->
+        <!-- <el-table-column prop="updated_at" label="更新时间" min-width="160" /> -->
+        <el-table-column label="操作" min-width="150" align="center">
+          <template #default="scope">
+            <el-button size="small" @click="editTemplate(scope.row)">编辑</el-button>
+            <el-button size="small" type="danger" @click="deleteTemplate(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </el-card>
+
+    <!-- 设备模板表单对话框 -->
+    <DeviceTemplateForm 
+      v-model:visible="dialogVisible" 
+      :template-data="currentTemplate" 
+      :is-edit="isEdit"
+      @success="onTemplateSuccess"
+      @cancel="dialogVisible = false"
+    />
   </div>
 </template>
 
 <script>
+import { Refresh } from '@element-plus/icons-vue';
+import deviceTemplateService from '../services/deviceTemplateService.js';
+import DeviceTemplateForm from './DeviceTemplateForm.vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
 export default {
   name: 'DeviceTemplateList',
+  components: {
+    DeviceTemplateForm,
+    Refresh
+  },
+  data() {
+    return {
+      tableData: [],
+      loading: false,
+      error: null,
+      dialogVisible: false,
+      currentTemplate: {},
+      isEdit: false
+    };
+  },
+  async mounted() {
+    await this.loadDeviceTemplates();
+  },
+  methods: {
+    async loadDeviceTemplates() {
+      this.loading = true;
+      this.error = null;
+      try {
+        const data = await deviceTemplateService.getDeviceTemplates();
+        this.tableData = data;
+      } catch (err) {
+        this.error = err.message || '未知错误';
+        console.error('加载设备模板列表失败:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    formatCategory(category) {
+      const categoryMap = {
+        'actuator': '执行器',
+        'sensor': '传感器'
+      };
+      return categoryMap[category] || category || '-';
+    },
+    addTemplate() {
+      this.currentTemplate = {};
+      this.isEdit = false;
+      this.dialogVisible = true;
+    },
+    editTemplate(template) {
+      // 深度拷贝，避免直接修改表格数据
+      this.currentTemplate = JSON.parse(JSON.stringify(template));
+      this.isEdit = true;
+      this.dialogVisible = true;
+    },
+    async deleteTemplate(template) {
+      try {
+        await ElMessageBox.confirm(
+          `确认删除设备模板 "${template.name}" 吗？`,
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+        );
+        await deviceTemplateService.deleteDeviceTemplate(template.id);
+        ElMessage.success('删除成功');
+        await this.loadDeviceTemplates();
+      } catch (err) {
+        if (err !== 'cancel') {
+          ElMessage.error('删除失败: ' + (err.message || '未知错误'));
+        }
+      }
+    },
+    onTemplateSuccess() {
+      ElMessage.success(this.isEdit ? '设备模板更新成功' : '设备模板添加成功');
+      this.dialogVisible = false;
+      this.loadDeviceTemplates();
+    }
+  }
 };
 </script>
 
@@ -31,10 +174,41 @@ export default {
   padding: 15px 0;
 }
 
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
 .page-title {
   margin: 0;
   font-size: 1.5rem;
   font-weight: bold;
   line-height: 1;
 }
+
+.refresh-btn {
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.loading {
+  padding: 20px 0;
+}
+
+.error {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.retry-btn {
+  margin-top: 15px;
+}
 </style>

src/services/deviceTemplateService.js

@@ -0,0 +1,79 @@
+import apiClient from '../api/index.js';
+
+class DeviceTemplateService {
+  /**
+   * 获取设备模板列表
+   * @returns {Promise<Array>} 设备模板列表
+   */
+  async getDeviceTemplates() {
+    try {
+      const response = await apiClient.deviceTemplates.list();
+      return response.data || [];
+    } catch (error) {
+      console.error('获取设备模板列表失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 创建新设备模板
+   * @param {Object} deviceTemplateData 设备模板数据
+   * @returns {Promise<Object>} 创建的设备模板信息
+   */
+  async createDeviceTemplate(deviceTemplateData) {
+    try {
+      const response = await apiClient.deviceTemplates.create(deviceTemplateData);
+      return response.data;
+    } catch (error) {
+      console.error('创建设备模板失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 获取设备模板详情
+   * @param {number} id 设备模板ID
+   * @returns {Promise<Object>} 设备模板详情
+   */
+  async getDeviceTemplate(id) {
+    try {
+      const response = await apiClient.deviceTemplates.get(id);
+      return response.data;
+    } catch (error) {
+      console.error('获取设备模板详情失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 更新设备模板信息
+   * @param {number} id 设备模板ID
+   * @param {Object} deviceTemplateData 更新的设备模板信息
+   * @returns {Promise<Object>} 更新后的设备模板信息
+   */
+  async updateDeviceTemplate(id, deviceTemplateData) {
+    try {
+      const response = await apiClient.deviceTemplates.update(id, deviceTemplateData);
+      return response.data;
+    } catch (error) {
+      console.error('更新设备模板失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 删除设备模板
+   * @param {number} id 设备模板ID
+   * @returns {Promise<void>}
+   */
+  async deleteDeviceTemplate(id) {
+    try {
+      await apiClient.deviceTemplates.delete(id);
+    } catch (error) {
+      console.error('删除设备模板失败:', error);
+      throw error;
+    }
+  }
+}
+
+export default new DeviceTemplateService();