From a0d79c278f476679c2c7e8e37a11521d1d53b93c Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Wed, 27 Oct 2021 14:11:48 +0800
Subject: [PATCH] feat: device update

---
 src/components/device-edit.vue |  2 +-
 src/routers/index.js           |  6 ++++++
 src/views/data-history.vue     |  3 +++
 src/views/device-edit.vue      | 28 +++++++++++++++-------------
 4 files changed, 25 insertions(+), 14 deletions(-)
 create mode 100644 src/views/data-history.vue

diff --git a/src/components/device-edit.vue b/src/components/device-edit.vue
index cf2ad62..38a1566 100644
--- a/src/components/device-edit.vue
+++ b/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>
 
diff --git a/src/routers/index.js b/src/routers/index.js
index 3d25c40..6ffda4f 100644
--- a/src/routers/index.js
+++ b/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',
diff --git a/src/views/data-history.vue b/src/views/data-history.vue
new file mode 100644
index 0000000..7b8b46c
--- /dev/null
+++ b/src/views/data-history.vue
@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>
diff --git a/src/views/device-edit.vue b/src/views/device-edit.vue
index 0ae2293..66a1309 100644
--- a/src/views/device-edit.vue
+++ b/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>