feat: 编辑设备界面

package.json

@@ -8,7 +8,7 @@
     "cz": "git add . && git cz",
     "format": "prettier --write ./src",
     "lint": "eslint ./src --ext .vue,.js,.ts",
-    "lint-fix": "eslint --fix ./src --ext .vue,.js,.ts",
+    "fix": "eslint --fix ./src --ext .vue,.js,.ts",
     "prepare": "husky install"
   },
   "dependencies": {

src/components/device-edit.vue

@@ -1,19 +1,13 @@
 <template>
-  <el-dialog v-model="show" title="编辑设备信息" width="80%" :before-close="handleClose">
+  <el-dialog v-model="show" title="编辑设备信息" fullscreen="true" @close="$emit('toggle-mdoal')">
-    <span>This is a message</span>
+    <DeviceEdit :edit="true" />
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="$emit('toggle-mdoal')">Cancel</el-button>
-        <el-button type="primary" @click="$emit('toggle-mdoal')">Confirm</el-button>
-      </span>
-    </template>
   </el-dialog>
 </template>
 
 <script setup>
 import { defineProps, defineEmits } from 'vue';
+import DeviceEdit from 'views/device-edit.vue';
 
 defineProps({ show: Boolean });
-
 defineEmits(['toggle-mdoal']);
 </script>

src/store/device.js

@@ -4,11 +4,21 @@ const user = {
   namespaced: true,
 
   state: {
-    devices: [],
+    devices: [], // 站点列表 设备列表简版
-    devicesAll: null,
+    devicesAll: null, // 设备列表完整版
+    currentDeviceId: '', // 当前正在编辑的设备deviceId
   },
 
-  getters: {},
+  getters: {
+    // 当前正在编辑的设备的完整信息
+    current({ devicesAll, currentDeviceId }) {
+      try {
+        return devicesAll.data.find(device => device.deviceId === currentDeviceId);
+      } catch (error) {
+        return null;
+      }
+    },
+  },
 
   mutations: {
     /**
@@ -23,11 +33,20 @@ const user = {
     /**
      * 设置devicesAll的数据
      * @param {*} state
-     * @param {*} devices
+     * @param {array} devices
      */
     setDevicesAll(state, devices) {
       state.devicesAll = devices;
     },
+
+    /**
+     * 设置正则编辑的设备deviceId
+     * @param {*} state
+     * @param {string} deviceId
+     */
+    setCurrentDeviceId(state, deviceId) {
+      state.currentDeviceId = deviceId;
+    },
   },
 
   actions: {

src/views/device-edit.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-form label-position="top" :model="data" ref="deviceCreate">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设备ID号" prop="deviceId">
+          <el-input v-model="data.deviceId"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设备完整ID" prop="deviceFullId">
+          <el-input v-model="data.deviceFullId"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="地区" prop="area">
+          <el-input v-model="data.area"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="安装地点名称" prop="address">
+          <el-input v-model="data.address"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="联系人" prop="contact">
+          <el-input v-model="data.contact"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="data.phone"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="经度" prop="lon">
+          <el-input v-model="data.lon"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="纬度" prop="lat">
+          <el-input v-model="data.lat"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="负责人" prop="head">
+          <el-input v-model="data.head"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="安装位置" prop="installLocation">
+          <el-input v-model="data.installLocation"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="安装时间" prop="installTime">
+          <el-input v-model="data.installTime"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="正式运行时间" prop="runTime">
+          <el-input v-model="data.runTime"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="链路地址" prop="linkAddress">
+          <el-input v-model="data.linkAddress"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="探头编号" prop="probNo">
+          <el-input v-model="data.probNo"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="试样" prop="simple">
+          <el-input v-model="data.simple"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="sim卡1" prop="sim1">
+          <el-input v-model="data.sim1"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设备朝向" prop="deviceDirection">
+          <el-input v-model="data.deviceDirection"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="与主站后台联调情况" prop="joint">
+          <el-input v-model="data.joint"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="data.remark" type="textarea"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <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-form-item>
+    </el-row>
+  </el-form>
+  {{ device }}
+</template>
+
+<script setup>
+import { reactive, ref, computed } from 'vue';
+import { useStore } from 'vuex';
+
+const data = reactive({
+  deviceId: '', // 设备id
+  deviceFullId: '', // 设备完整id
+  deviceDirection: '', // 设备朝向
+  area: '', // 地区
+  address: '', // 安装地点名称
+  contact: '', // 联系人
+  phone: '', // 联系人电话
+  lon: '', // 经度
+  lat: '', // 纬度
+  head: '', // 负责人
+  installLocation: '', // 安装位置
+  installTime: '', // 安装时间
+  runTime: '', // 正式运行时间
+  linkAddress: '', // 链路地址
+  probNo: '', // 探头编号
+  simple: '', // 试样
+  sim1: '', // sim卡1
+  joint: '', // 主站后台联调情况
+  remark: '', // 备注
+});
+
+const deviceCreate = ref(null); // form
+const store = useStore();
+const device = computed(() => store.getters['device/current']);
+
+// 提交表单
+const onSubmit = () => {
+  deviceCreate.value.validate(valid => {
+    console.log(valid, { ...data });
+  });
+};
+
+// 重置表单
+const onReset = () => {
+  deviceCreate.value.resetFields();
+};
+</script>

src/views/device-list.vue

@@ -26,14 +26,14 @@
       <el-table-column label="安装时间" prop="installTime" width="200" />
       <el-table-column label="正式运行时间" prop="runTime" width="200" />
       <el-table-column fixed="right" label="操作" width="148">
-        <template #default>
+        <template #default="props">
           <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
             <template #reference>
               <el-button type="danger" plain size="mini">删除</el-button>
             </template>
           </el-popconfirm>
 
-          <el-button type="primary" plain size="mini" @click="editting = true">编辑</el-button>
+          <el-button type="primary" plain size="mini" @click="handleEdit(props.row)">编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -114,4 +114,10 @@ const onPrev = e => {
 const handleDelete = () => {
   console.log('delete');
 };
+
+// 编辑设备信息
+const handleEdit = item => {
+  store.commit('device/setCurrentDeviceId', item.deviceId);
+  editting.value = true;
+};
 </script>