设备地区

src/api/hardware/province.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export function list() {
+    return request({
+        url: '/system/province/list',
+        method: 'get',
+    })
+}
+
+export function getProvinceByParent(id) {
+    return request({
+        url: '/system/province/getProvinceByParent?parent=' + id,
+        method: 'get',
+    })
+}

src/components/Region/index.vue

@@ -1,6 +1,6 @@
 <template>
   <section>
-    <el-tree @node-click="handleNodeClick" :props="defaultProps" :load="loadNode" node-key="code" accordion lazy
+    <el-tree :current-node-key="currentNodeKey" @node-click="handleNodeClick" :props="defaultProps" :load="loadNode" node-key="code" accordion lazy highlight-current
       :expand-on-click-node="false" ref="tree" />
   </section>
 </template>
@@ -10,6 +10,22 @@
 import { areaSelect, getProvinceByArea, getProvinceByParent } from "@/api/hardware/area";
 export default {
   name: 'Region',
+  props: {
+    'currentNodeKey': {
+      type: String,
+      default: ''
+    },
+  },
+  watch: {
+    currentNodeKey(id) {
+    // Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。可以用 $refs 获取 Tree 实例
+      if (id.toString()) {
+        this.$refs["tree"].setCurrentKey(id);
+      } else {
+        this.$refs["tree"].setCurrentKey(null);
+      }
+    }
+  },
   data () {
     return {
       defaultProps: {
@@ -17,36 +33,7 @@ export default {
         label: 'name',
         isLeaf: 'leaf'
       },
-      list: [
-        {
-          "id": 4, "areaName": "中原地区", "areaCode": "17", "ordinal": null, "provinceIds": null, children: [
-            { "id": 1, "areaName": "安徽省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-            { "id": 1, "areaName": "河南省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-          ]
-        },
-        { "id": 1, "areaName": "华北地区", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-        {
-          "id": 2, "areaName": "华南地区", "areaCode": "002", "ordinal": 2, "provinceIds": null, children: [
-            { "id": 1, "areaName": "江苏省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-            { "id": 1, "areaName": "浙江省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-            { "id": 1, "areaName": "湖南省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-          ]
-        }
-      ]
-
-      //   list: [
-      //     {
-      //       label: '一级 1',
-      //       children: [{
-      //         label: '二级 1-1',
-      //         children: [{
-      //           label: '三级 1-1-1'
-      //         }]
-      //       }]
-      //     }
-      //   ]
     }
-
   },
   created () {
   },

src/views/hardware/deviceList/index.vue

@@ -2,7 +2,7 @@
   <section class="app-container">
     <el-row>
       <el-col :span="4">
-        <region @selectdRegionCode="selectdRegionCode"></region>
+        <region @selectdRegionCode="selectdRegionCode" :currentNodeKey.sync="queryParams.provinceCode"></region>
       </el-col>
       <el-col :span="20">
         <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
@@ -47,11 +47,11 @@
           </el-table-column>
           <el-table-column prop="deviceModel" align="center" label="装置模型">
           </el-table-column>
-          <el-table-column prop="provinceCode" align="center" label="省份">
+          <el-table-column prop="proName" align="center" label="省份">
           </el-table-column>
-          <el-table-column prop="cityCode" align="center" label="市">
+          <el-table-column prop="cityName" align="center" label="市">
           </el-table-column>
-          <el-table-column prop="areaCode" align="center" label="区">
+          <el-table-column prop="disName" align="center" label="区">
           </el-table-column>
           <el-table-column prop="status" align="center" label="在线状态">
           </el-table-column>
@@ -70,7 +70,7 @@
     </el-row>
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="设备ID" prop="deviceId">
           <el-input v-model="form.deviceId" placeholder="请输入设备ID" />
         </el-form-item>
@@ -104,14 +104,23 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="国家行政区 省" prop="provinceCode">
+        <el-form-item label="国家行政区 省" prop="proCode">
-          <el-input v-model="form.provinceCode" />
+          <el-select v-model="form.proCode" clearable placeholder="请选择" @change="provinceCodeChange">
+            <el-option v-for="item in provinceSelectList" :key="item.code" :label="item.cityName" :value="item.code">
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="国家行政区 市" prop="cityCode">
-          <el-input v-model="form.cityCode" />
+          <el-select v-model="form.cityCode" clearable placeholder="请选择" @change="cityCodeChange">
+            <el-option v-for="item in citySelectList" :key="item.code" :label="item.cityName" :value="item.code">
+            </el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="国家行政区 区" prop="areaCode">
+        <el-form-item label="国家行政区 区" prop="disCode">
-          <el-input v-model="form.areaCode" />
+          <el-select v-model="form.disCode" clearable placeholder="请选择">
+            <el-option v-for="item in districtSelectList" :key="item.code" :label="item.cityName" :value="item.code">
+            </el-option>
+          </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -134,17 +143,29 @@ import {
 import { select as productSelect } from "@/api/hardware/product";
 import { select as projectSelect } from "@/api/hardware/project";
 import { userSelect } from "@/api/system/user";
+import { list as provinceList, getProvinceByParent } from "@/api/hardware/province";
 export default {
   name: "DeviceList",
   components: {
     Region,
   },
+  // watch: {
+  //   'form.proCode': function(code) {
+  //     this.provinceCodeChange(code)
+  //   },
+  //   'form.cityCode': function(code) {
+  //     this.cityCodeChange(code)
+  //   },
+  // },
   data () {
     return {
       // 产品下拉列表
       productSelectList: [],
       userSelectList: [],
       projectSelectList: [],
+      provinceSelectList: [],
+      citySelectList: [],
+      districtSelectList: [],
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -187,6 +208,15 @@ export default {
         projectId: [
           { required: true, message: "项目不能为空", trigger: "blur" },
         ],
+        proCode: [
+          { required: true, message: "省不能为空", trigger: "blur" },
+        ],
+        cityCode: [
+          { required: true, message: "市不能为空", trigger: "blur" },
+        ],
+        disCode: [
+          { required: true, message: "区不能为空", trigger: "blur" },
+        ],
       },
     };
   },
@@ -206,10 +236,17 @@ export default {
         this.$message.error(msg);
       }
     })
+    provinceList().then(({ code, msg, rows }) => {
+      if (code == 200) {
+        this.provinceSelectList = rows;
+      } else {
+        this.$message.error(msg);
+      }
+    })
     this.getList();
   },
   methods: {
-    selectdRegionCode({ code }) {
+    selectdRegionCode ({ code }) {
       this.queryParams.provinceCode = code;
       this.handleQuery();
     },
@@ -225,6 +262,29 @@ export default {
         }
       })
     },
+    getProvinceByParent(id) {
+      return new Promise((resolve, reject) => {
+        getProvinceByParent(id).then(({ code, msg, data }) => {
+          if (code == 200) {
+            resolve(data);
+          } else {
+            this.$message.error(msg);
+            reject({msg, code})
+          }
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    async provinceCodeChange (id) {
+      delete this.form.cityCode;
+      delete this.form.disCode;
+      this.citySelectList = await this.getProvinceByParent(id);
+    },
+    async cityCodeChange (id) {
+      delete this.form.disCode;
+      this.districtSelectList = await this.getProvinceByParent(id);
+    },
     /** 搜索按钮操作 */
     handleQuery () {
       this.queryParams.pageNum = 1;
@@ -278,17 +338,17 @@ export default {
     /** 修改按钮操作 */
     handleUpdate (row) {
       this.reset();
-      info(row.id).then(({ code, info, msg }) => {
+      info(row.id).then( ({ code, info, msg }) => {
-        if ( 200 == code ) {
+        if (200 == code) {
+          this.provinceCodeChange(info.proCode);
+          this.cityCodeChange(info.cityCode);
           this.form = info;
+          this.open = true;
+          this.title = "修改设备";
         } else {
           this.msgError(msg);
         }
       })
-      return
-      this.form = row;
-      this.open = true;
-      this.title = "修改设备";
     },
     /** 提交按钮 */
     submitForm: function () {