大区树

src/components/Region/index.vue

@@ -1,20 +1,21 @@
 <template>
   <section>
-    <el-tree :data="list" :props="defaultProps" :expand-on-click-node="false" ref="tree"
-      default-expand-all />
+    <el-tree @node-click="handleNodeClick" :props="defaultProps" :load="loadNode" node-key="code" accordion lazy
+      :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>