feat: device update

src/components/device-edit.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog v-model="show" title="编辑设备信息" fullscreen="true" @close="$emit('toggle-mdoal')">
-    <DeviceEdit :edit="true" />
+    <DeviceEdit v-if="show" :edit="true" @cancel="$emit('toggle-mdoal')" />
   </el-dialog>
 </template>
 

src/routers/index.js

@@ -27,6 +27,12 @@ export const routes = [
     meta: { title: '设备管理' },
     component: () => import('@/views/device-list.vue'),
   },
+  {
+    path: '/data-history',
+    name: 'data-history',
+    meta: { title: '历史数据查看' },
+    component: () => import('@/views/data-history.vue'),
+  },
   {
     path: '/test',
     name: 'test',

src/views/data-history.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

src/views/device-edit.vue

@@ -1,9 +1,9 @@
 <template>
-  <el-form label-position="top" :model="data" ref="deviceCreate">
+  <el-form label-position="top" :model="data" ref="deviceEdit">
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设备ID号" prop="deviceId">
-          <el-input v-model="data.deviceId"></el-input>
+          <el-input v-model="data.deviceId" disabled></el-input>
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -128,18 +128,17 @@
     <el-row :gutter="20" class="mt-5 pl-2">
       <el-form-item>
         <el-button type="primary" @click="onSubmit">提交</el-button>
-        <el-button @click="onReset">重置</el-button>
+        <el-button @click="$emit('cancel')">取消</el-button>
       </el-form-item>
     </el-row>
   </el-form>
-  {{ device }}
 </template>
 
 <script setup>
-import { reactive, ref, computed } from 'vue';
+import { reactive, ref, computed, watch } from 'vue';
 import { useStore } from 'vuex';
 
-const data = reactive({
+let data = reactive({
   deviceId: '', // 设备id
   deviceFullId: '', // 设备完整id
   deviceDirection: '', // 设备朝向
@@ -161,19 +160,22 @@ const data = reactive({
   remark: '', // 备注
 });
 
-const deviceCreate = ref(null); // form
+const deviceEdit = ref(null); // form
 const store = useStore();
 const device = computed(() => store.getters['device/current']);
 
+watch(
+  () => device,
+  newValue => {
+    data = newValue.value;
+  },
+  { immediate: true, deep: true },
+);
+
 // 提交表单
 const onSubmit = () => {
-  deviceCreate.value.validate(valid => {
+  deviceEdit.value.validate(valid => {
     console.log(valid, { ...data });
   });
 };
-
-// 重置表单
-const onReset = () => {
-  deviceCreate.value.resetFields();
-};
 </script>