大区树

src/api/hardware/area.js

@@ -7,4 +7,22 @@ export function list() {
         method: 'get',
     })
 }
+export function areaSelect() {
+    return request({
+        url: '/system/area/select',
+        method: 'get',
+    })
+}
 
+export function getProvinceByArea(id) {
+    return request({
+        url: '/system/province/getProvinceByArea?areaId=' + id,
+        method: 'get',
+    })
+}
+export function getProvinceByParent(id) {
+    return request({
+        url: '/system/province/getProvinceByParent?parent=' + id,
+        method: 'get',
+    })
+}

src/components/Region/index.vue

@@ -1,20 +1,21 @@
 <template>
   <section>
-    <el-tree :data="list" :props="defaultProps" :expand-on-click-node="false" ref="tree"
+    <el-tree @node-click="handleNodeClick" :props="defaultProps" :load="loadNode" node-key="code" accordion lazy
-      default-expand-all />
+      :expand-on-click-node="false" ref="tree" />
   </section>
 </template>
 
 <script>
 // todo 大区组件
-import { list } from "@/api/hardware/area";
+import { areaSelect, getProvinceByArea, getProvinceByParent } from "@/api/hardware/area";
 export default {
   name: 'Region',
   data () {
     return {
       defaultProps: {
         children: 'children',
-        label: 'areaName'
+        label: 'name',
+        isLeaf: 'leaf'
       },
       list: [
         {
@@ -48,7 +49,57 @@ export default {
 
   },
   created () {
-    list()
+  },
+  methods: {
+    handleNodeClick (node) {
+      if (!node.isArea) {
+        this.$emit('selectdRegionCode',node)
+      }
+    },
+    async loadNode (node, resolve) {
+      if (node.level === 0) {
+        let { code, msg, select } = await areaSelect();
+        if (200 == code) {
+          select.map(v => {
+            v.name = v.areaName;
+            v.code = v.id;
+            v.isArea = true;
+            return v;
+          })
+          return resolve(select)
+        } else {
+          return resolve([])
+        }
+      }
+
+      if (node.level == 1) {
+        let { code, data, msg } = await getProvinceByArea(node.key);
+        if (200 == code) {
+          data.map(v => {
+            v.name = v.cityName;
+            v.leaf = false;
+            return v;
+          })
+          return resolve(data)
+        } else {
+          return resolve([])
+        }
+      }
+      if (node.level > 1) {
+        let { code, data, msg } = await getProvinceByParent(node.key);
+        console.log(node.level > 1, node.level)
+        if (200 == code) {
+          data.map(v => {
+            v.name = v.cityName;
+            v.leaf = node.level > 1;
+            return v;
+          })
+          return resolve(data)
+        } else {
+          return resolve([])
+        }
+      };
+    }
   }
 }
 </script>

src/views/hardware/deviceList/index.vue

@@ -2,7 +2,7 @@
   <section class="app-container">
     <el-row>
       <el-col :span="4">
-        <region></region>
+        <region @selectdRegionCode="selectdRegionCode"></region>
       </el-col>
       <el-col :span="20">
         <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
@@ -92,6 +92,18 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="客户" prop="userId">
+          <el-select v-model="form.userId" clearable placeholder="请选择" @change="userIdChange">
+            <el-option v-for="item in userSelectList" :key="item.id" :label="item.nickName" :value="item.userId">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目" prop="projectId">
+          <el-select v-model="form.projectId" clearable placeholder="请选择">
+            <el-option v-for="item in projectSelectList" :key="item.id" :label="item.projectName" :value="item.projectId">
+            </el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="国家行政区 省" prop="provinceCode">
           <el-input v-model="form.provinceCode" />
         </el-form-item>
@@ -120,6 +132,8 @@ import {
   del,
 } from "@/api/hardware/device";
 import { select as productSelect } from "@/api/hardware/product";
+import { select as projectSelect } from "@/api/hardware/project";
+import { userSelect } from "@/api/system/user";
 export default {
   name: "DeviceList",
   components: {
@@ -129,6 +143,8 @@ export default {
     return {
       // 产品下拉列表
       productSelectList: [],
+      userSelectList: [],
+      projectSelectList: [],
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -165,6 +181,12 @@ export default {
         productId: [
           { required: true, message: "产品不能为空", trigger: "blur" },
         ],
+        userId: [
+          { required: true, message: "客户不能为空", trigger: "blur" },
+        ],
+        projectId: [
+          { required: true, message: "项目不能为空", trigger: "blur" },
+        ],
       },
     };
   },
@@ -176,9 +198,33 @@ export default {
         this.$message.error(msg);
       }
     })
+    userSelect().then(({ code, msg, select }) => {
+      if (code == 200) {
+        this.queryUserSelectList = select;
+        this.userSelectList = select;
+      } else {
+        this.$message.error(msg);
+      }
+    })
     this.getList();
   },
   methods: {
+    selectdRegionCode({ code }) {
+      this.queryParams.provinceCode = code;
+      this.handleQuery();
+    },
+    userIdChange (userId) {
+      delete this.form.projectId;
+      this.projectSelectList = [];
+      if (!userId) return;
+      projectSelect({ userId }).then(({ code, msg, select }) => {
+        if (code == 200) {
+          this.projectSelectList = select;
+        } else {
+          this.$message.error(msg);
+        }
+      })
+    },
     /** 搜索按钮操作 */
     handleQuery () {
       this.queryParams.pageNum = 1;
@@ -186,7 +232,7 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery () {
-      this.dateRange = [];
+      this.queryParams = {};
       this.resetForm("queryForm");
       this.handleQuery();
     },
@@ -232,6 +278,14 @@ export default {
     /** 修改按钮操作 */
     handleUpdate (row) {
       this.reset();
+      info(row.id).then(({ code, info, msg }) => {
+        if ( 200 == code ) {
+          this.form = info;
+        } else {
+          this.msgError(msg);
+        }
+      })
+      return
       this.form = row;
       this.open = true;
       this.title = "修改设备";