update 组织机构新增区域选择

Web/src/assets/style/app.less

@@ -21,6 +21,7 @@
 @import './lib/form.less';
 @import './lib/description.less';
 @import './lib/select.less';
+@import './lib/cascader.less';
 @import './lib/dropdown.less';
 @import './lib/modal.less';
 @import './lib/tree-layout.less';

Web/src/assets/style/lib/cascader.less

@@ -0,0 +1,4 @@
+@import (reference) '~@/assets/style/extend.less';
+.ant-cascader-picker-arrow {
+  transform: scaleY(.75);
+}

Web/src/assets/style/lib/form.less

@@ -51,14 +51,16 @@
     .ant-input-number,
     .ant-mentions,
     .ant-select-selection,
-    .ant-input-group-addon {
+    .ant-input-group-addon,
+    .ant-cascader-picker,
+    .ant-cascader-input.ant-input {
       z-index: 1;
 
       text-align: left;
 
       color: lighten(@black, 10%);
       border: 0;
-      background-color: lighten(@black, 95%);
+      background-color: lighten(@black, 95%) !important;
     }
     .ant-mentions {
       textarea {
@@ -86,6 +88,11 @@
         .focus();
       }
     }
+    .ant-cascader-picker:focus {
+      .ant-cascader-input {
+        .focus();
+      }
+    }
     .ant-input-group {
       .ant-row-flex {
         .ant-select {

Web/src/common/api/requests/sys/appManage.js

@@ -2,7 +2,7 @@ export default {
     /**
      * 系统应用列表
      */
-    getAppPage: ['/sysApp/page', 'get'],
+    getAppPage: ['/sysApp/page', 'post'],
     /**
      * 系统应用列表
      */

Web/src/common/api/requests/sys/smsManage.js

@@ -1,26 +1,17 @@
 export default {
-/**
- * 发送记录查询
- *
- * @author yubaoshan
- * @date 2020/7/3 22:11
- */
-smsPage:['/sms/page','get'],
+    /**
+     * 发送记录查询
+     */
+    smsPage: ['/sms/page', 'get'],
 
-/**
- * 验证短信验证码
- *
- * @author yubaoshan
- * @date 2020/7/3 22:12
- */
-sysSendLoginMessage:['/sms/sendLoginMessage','post'],
+    /**
+     * 验证短信验证码
+     */
+    sysSendLoginMessage: ['/sms/sendLoginMessage', 'post'],
 
-/**
- * 验证短信验证码
- *
- * @author yubaoshan
- * @date 2020/7/3 22:12
- */
-sysValidateMessage:['/sms/validateMessage','post'],
+    /**
+     * 验证短信验证码
+     */
+    sysValidateMessage: ['/sms/validateMessage', 'post'],
 
 }

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>