添加总览功能

klp-ui/src/views/ems/alarmDevice/index.vue

@@ -114,7 +114,7 @@
       <el-table-column label="安装位置" align="center" prop="locationName"></el-table-column>
       <el-table-column label="设备状态" align="center" prop="status">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.alarm_devide_status" :value="scope.row.status"/>
+          <dict-tag :options="dict.type.alarm_device_status" :value="scope.row.status"/>
         </template>
       </el-table-column>
       <el-table-column label="设备IP地址" align="center" prop="ipAddress" />
@@ -165,14 +165,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="安装位置" prop="locationId">
-          <el-select v-model="form.locationId" placeholder="请选择安装位置">
-            <el-option
-              v-for="item in locationList"
-              :key="item.locationId"
-              :label="item.name"
-              :value="item.locationId"
-            ></el-option> 
-          </el-select>
+          <treeselect :disable-branch-nodes="true" v-model="form.locationId" :options="locationOptions" :normalizer="normalizer" placeholder="请选择安装位置" />
         </el-form-item>
         <el-form-item label="设备状态" prop="status">
           <el-select v-model="form.status" placeholder="请选择设备状态">
@@ -205,10 +198,15 @@
 <script>
 import { listAlarmDevice, getAlarmDevice, delAlarmDevice, addAlarmDevice, updateAlarmDevice } from "@/api/ems/alarmDevice";
 import { listLocation } from "@/api/ems/location";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "AlarmDevice",
   dicts: ['alarm_device_type', 'alarm_device_status'],
+  components: {
+    Treeselect
+  },
   data() {
     return {
       // 按钮loading
@@ -250,17 +248,33 @@ export default {
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
       },
-      locationList: []
+      locationList: [],
+      locationOptions: []
     };
   },
   created() {
     this.getList();
-    this.getLocationList();
+    this.getTreeselect();
   },
   methods: {
-    getLocationList() {
+    /** 转换位置数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.locationId,
+        label: node.name,
+        children: node.children
+      };
+    },
+	/** 查询位置下拉树结构 */
+    getTreeselect() {
       listLocation().then(response => {
-        this.locationList = response.data;
+        this.locationOptions = [];
+        const data = { locationId: undefined, name: '顶级节点', children: [] };
+        data.children = this.handleTree(response.data, "locationId", "parentId");
+        this.locationOptions.push(data);
       });
     },
     /** 查询安全警报设备列表 */