添加设备组件

src/components/DeviceList.vue

@@ -48,41 +48,26 @@
       </el-table>
     </el-card>
 
-    <!-- 添加/编辑设备对话框 -->
-    <el-dialog v-model="dialogVisible" :title="dialogTitle">
-      <el-form :model="currentDevice" label-width="120px">
-        <el-form-item label="设备名称">
-          <el-input v-model="currentDevice.name" />
-        </el-form-item>
-        <el-form-item label="设备类型">
-          <el-select v-model="currentDevice.type" placeholder="请选择设备类型">
-            <el-option label="传感器" value="sensor" />
-            <el-option label="控制器" value="controller" />
-            <el-option label="摄像头" value="camera" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="设备状态">
-          <el-select v-model="currentDevice.status" placeholder="请选择设备状态">
-            <el-option label="在线" value="online" />
-            <el-option label="离线" value="offline" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="saveDevice" :loading="saving">保存</el-button>
-        </span>
-      </template>
-    </el-dialog>
+    <!-- 设备表单对话框 -->
+    <DeviceForm 
+      v-model:visible="dialogVisible" 
+      :device-data="currentDevice" 
+      :is-edit="isEdit"
+      @success="onDeviceSuccess"
+      @cancel="dialogVisible = false"
+    />
   </div>
 </template>
 
 <script>
 import deviceService from '../services/deviceService.js';
+import DeviceForm from './DeviceForm.vue';
 
 export default {
   name: 'DeviceList',
+  components: {
+    DeviceForm
+  },
   data() {
     return {
       devices: [],
@@ -90,13 +75,7 @@ export default {
       error: null,
       saving: false,
       dialogVisible: false,
-      dialogTitle: '',
-      currentDevice: {
-        id: '',
-        name: '',
-        type: '',
-        status: 'online'
-      },
+      currentDevice: {},
       isEdit: false
     };
   },
@@ -136,19 +115,12 @@ export default {
     },
     
     addDevice() {
-      this.dialogTitle = '添加设备';
-      this.currentDevice = {
-        id: '',
-        name: '',
-        type: '',
-        status: 'online'
-      };
+      this.currentDevice = {};
       this.isEdit = false;
       this.dialogVisible = true;
     },
     
     editDevice(device) {
-      this.dialogTitle = '编辑设备';
       // 注意：这里需要将显示值转换回API值
       const typeMap = {
         '传感器': 'sensor',
@@ -183,28 +155,12 @@ export default {
       }
     },
     
-    async saveDevice() {
-      this.saving = true;
-      
-      try {
-        if (this.isEdit) {
-          // 编辑设备
-          await deviceService.updateDevice(this.currentDevice.id, this.currentDevice);
-          this.$message.success('设备更新成功');
-        } else {
-          // 添加新设备
-          await deviceService.createDevice(this.currentDevice);
-          this.$message.success('设备添加成功');
-        }
-        
-        this.dialogVisible = false;
-        // 重新加载设备列表
-        await this.loadDevices();
-      } catch (err) {
-        this.$message.error('保存失败: ' + (err.message || '未知错误'));
-      } finally {
-        this.saving = false;
-      }
+    // 设备操作成功回调
+    async onDeviceSuccess() {
+      this.$message.success(this.isEdit ? '设备更新成功' : '设备添加成功');
+      this.dialogVisible = false;
+      // 重新加载设备列表
+      await this.loadDevices();
     }
   }
 };