update 组织机构新增区域选择

Web/src/pages/system/org/addForm.vue

@@ -55,7 +55,7 @@ export default {
         if (valid) {
           this.confirmLoading = true;
           this.$api
-            .sysOrgAdd(this.$refs['form-body'].form)
+            .sysOrgAdd(this.$refs['form-body'].onGetData())
             .then(({ success }) => {
               if (success) {
                 this.$message.success('新增成功');

Web/src/pages/system/org/editForm.vue

@@ -47,7 +47,7 @@ export default {
         if (valid) {
           this.confirmLoading = true;
           this.$api
-            .sysOrgEdit(this.$refs['form-body'].form)
+            .sysOrgEdit(this.$refs['form-body'].onGetData())
             .then(({ success }) => {
               if (success) {
                 this.$message.success('编辑成功');

Web/src/pages/system/org/form.vue

@@ -18,6 +18,15 @@
             v-model="form.pid"
           />
         </a-form-model-item>
+        <a-form-model-item label="所属区域" prop="areaCode">
+          <a-cascader
+            :field-names="{ label: 'name', value: 'code', children: 'children' }"
+            :options="areaData"
+            change-on-select
+            placeholder="请选择所属区域"
+            v-model="form.areaCode"
+          />
+        </a-form-model-item>
         <a-form-model-item label="排序" prop="sort">
           <a-input-number
             :max="1000"
@@ -48,11 +57,13 @@ export default {
         name: [{ required: true, message: '请输入机构名称' }],
         code: [{ required: true, message: '请输入唯一编码' }],
         pid: [{ required: true, message: '请选择上级机构' }],
+        areaCode: [{ required: true, message: '请选择所属区域' }],
       },
 
       loading: false,
 
       orgData: [],
+      areaData: [],
     };
   },
   methods: {
@@ -64,10 +75,46 @@ export default {
       if (orgId) {
         this.form.pid = orgId;
       } else if (record) {
-        this.form = this.$_.cloneDeep(record);
+        // 从字符串areaCode查找到整个层级
+        const areaCode = [];
+        const findCode = (data, level) => {
+          level = level || 0;
+          for (let i = 0; i < data.length; i++) {
+            const item = data[i];
+
+            areaCode[level] = item.code;
+
+            if (item.code === record.areaCode) {
+              areaCode.length = level + 1;
+              return true;
+            }
+
+            if (item.children && item.children.length) {
+              const found = findCode(item.children, level + 1);
+              if (found) {
+                return true;
+              }
+            }
+          }
+        };
+
+        if (record.areaCode) {
+          findCode(this.areaData);
+        }
+
+        this.form = this.$_.cloneDeep({
+          ...record,
+          areaCode,
+        });
       }
     },
 
+    onGetData() {
+      const submitForm = this.$_.cloneDeep(this.form);
+      submitForm.areaCode = submitForm.areaCode[submitForm.areaCode.length - 1];
+      return submitForm;
+    },
+
     /**
      * 必要的方法
      * 在外部窗口进行保存时调用表单验证
@@ -89,6 +136,7 @@ export default {
     async onInit() {
       this.loading = true;
       await this.onLoadOrgData();
+      await this.onLoadAreaData();
       this.loading = false;
     },
 
@@ -106,6 +154,23 @@ export default {
         ];
       });
     },
+
+    onLoadAreaData() {
+      return this.$api.getAreaTree().then(({ data }) => {
+        // 为了防止出现空的层级选择,删除所有空children节点
+        const clearChiildren = (data) => {
+          data.forEach((item) => {
+            if (item.children && item.children.length) {
+              clearChiildren(item.children);
+            } else {
+              delete item.children;
+            }
+          });
+        };
+        clearChiildren(data);
+        this.areaData = data;
+      });
+    },
   },
 };
 </script>