地区回显

dsk-srm-server/src/main.js

@@ -10,6 +10,46 @@ Vue.use(ElementUI);
 
 Vue.config.productionTip = false;
 
+Vue.prototype.flattenedToTree = (data, parentId = 0, pidName = "parentId", idName = "deptId", childrenName = "children") => {
+  if (!data) return [];
+  // 遍历结果
+  const result = [];
+  // 存储id 唯一值
+  const map = {};
+
+  for (const iterator of data) {
+    const id = iterator[idName];
+    const pid = iterator[pidName];
+
+    // 如果map对象不存在此id
+    if (!map[id]) {
+      map[id] = {
+        [childrenName]: []
+      };
+    }
+
+    map[id] = { ...iterator, [childrenName]: map[id][childrenName] };
+
+    const treeItem = map[id];
+
+    // 当前的pid 等于传进来的pid 处于顶级节点  
+    if (pid === parentId) {
+      result.push(treeItem);
+    } else {
+      // 是否存在pid为键名的对象 否创建对象 
+      if (!map[pid]) {
+        map[pid] = {
+          [childrenName]: []
+        };
+      }
+      // 处于子级 找到相应pid 对象下的children
+      map[pid][childrenName].push(treeItem);
+    }
+  }
+
+  return result;
+};
+
 new Vue({
   router,
   store,

dsk-srm-server/src/views/certificationManagement.vue

@@ -71,7 +71,7 @@
             </el-form-item>
 
             <el-form-item label="企业注册地：" prop="registeredAddress">
-              <el-input v-model="form.registeredAddress"></el-input>
+              <el-cascader v-model="form.registeredAddress" :options="areaOptions" disabled placeholder="" :props="areaProps"></el-cascader>
             </el-form-item>
 
             <el-form-item label="办公地址：" prop="addressDetail" style="width:100%">
@@ -116,6 +116,7 @@
 <script>
 import { getAuthenticationDetailApi, getSupplierTypeApi } from "@/api/authentication";
 import { mapState } from "vuex";
+import areaData from "@/utils/jsk.json";
 export default {
   name: "certificationManagement",
   data() {
@@ -158,11 +159,18 @@ export default {
         label: "name"
       },
       viewSrc: "",
-      viewDialogStatus: false
+      viewDialogStatus: false,
+      areaOptions: [],
+      areaProps: {
+        value: "id",
+        label: "regionName",
+        checkStrictly: true
+      }
     };
   },
   //可访问data属性
   created() {
+    this.createAreaTree();
     this.getDetail();
   },
   //计算集
@@ -182,11 +190,16 @@ export default {
         let res = await getAuthenticationDetailApi();
         if (res) {
           this.form = { ...this.form, ...this.userInfo, ...res.data };
+          this.form.registeredAddress ? this.form.registeredAddress = parseInt(this.form.registeredAddress) : "";
         }
       } catch (error) {
         console.log(error);
       }
     },
+    createAreaTree() {
+      // this.areaOptions = this.flattenedToTree(areaData, 100000, "parentId", "id");
+      this.areaOptions = areaData;
+    },
     viewImg(src) {
       this.viewSrc = src;
       this.viewDialogStatus = true;
@@ -324,7 +337,7 @@ export default {
     margin: 0 !important;
     left: 50%;
     top: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     max-height: 80%;
     overflow: hidden;
 
@@ -335,11 +348,10 @@ export default {
       align-items: center;
       overflow: auto;
 
-      &>img {
+      & > img {
         width: 100%;
       }
     }
   }
-
 }
 </style>