From 0d78cec16bff27edba259574f2c6c3f1c4e8b4e4 Mon Sep 17 00:00:00 2001
From: ky_sunl <ky_sunl@53845ad7-526c-8849-8dfa-ada380865a28>
Date: Wed, 21 Apr 2021 06:19:11 +0000
Subject: [PATCH]

---
 .../src/assets/style/app.less                 |   1 +
 .../src/assets/style/lib/authority-view.less  |  24 ++
 .../src/common/api/index.js                   |  27 +-
 .../src/components/yoAuthorityView/index.js   | 202 +++++++++++
 .../src/components/yoTreeLayout/index.js      |   2 -
 .../src/pages/system/role/addForm.vue         |   2 +-
 .../src/pages/system/role/editForm.vue        |   2 +-
 .../src/pages/system/role/index.vue           |  43 +--
 .../src/pages/system/role/menuForm.vue        | 237 +++++--------
 .../src/pages/system/role/orgForm.vue         | 323 ++++++++----------
 10 files changed, 506 insertions(+), 357 deletions(-)
 create mode 100644 Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/lib/authority-view.less
 create mode 100644 Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoAuthorityView/index.js

diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/app.less b/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/app.less
index 7988aaa..022da7f 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/app.less
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/app.less
@@ -21,5 +21,6 @@
 @import './lib/select.less';
 @import './lib/dropdown.less';
 @import './lib/tree-layout.less';
+@import './lib/authority-view.less';
 @import './theme/primary.less';
 // @import './lib/font-weight.less';
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/lib/authority-view.less b/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/lib/authority-view.less
new file mode 100644
index 0000000..d48f0d4
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/lib/authority-view.less
@@ -0,0 +1,24 @@
+@import (reference) '~@/assets/style/extend.less';
+.yo-authority-view {
+  .ant-descriptions-item-label {
+    width: 150px;
+  }
+  .ant-descriptions {
+    margin-bottom: @padding-sm;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .ant-descriptions-item-content {
+    padding: @padding-sm @padding-md;
+    >.yo-authority-view--checkbox {
+      display: inline-block;
+
+      width: 150px;
+      margin: @padding-xxs 0;
+      .ant-checkbox-wrapper {
+        margin: 0;
+      }
+    }
+  }
+}
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/common/api/index.js b/Api/Ewide.Core/Ewide.Core.Web.Src/src/common/api/index.js
index eac6bda..de3f458 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/common/api/index.js
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/common/api/index.js
@@ -28,10 +28,7 @@ const initInstance = () => {
 
     instance.interceptors.response.use((res) => {
         if (res.data.status === status.Unauthorized) {
-            token.value = ''
-            app.$router.replace({
-                path: '/login'
-            }).catch(() => { })
+            handlerUnauthorized()
         }
         return res
     }, (err) => {
@@ -40,6 +37,8 @@ const initInstance = () => {
     return instance
 }
 
+const errerCodes = [status.BadRequest, status.InternalServerError]
+
 const errorNotification = ({ code, message }) => {
     switch (message.constructor) {
         case Array:
@@ -61,6 +60,13 @@ const errorNotification = ({ code, message }) => {
     }
 }
 
+const handlerUnauthorized = () => {
+    token.value = ''
+    app.$router.replace({
+        path: '/login'
+    }).catch(() => { })
+}
+
 const api = {}
 
 for (let key in urls) {
@@ -96,21 +102,26 @@ for (let key in urls) {
         return new Promise((reslove, reject) => {
             api[`${key}Wait`](params)
                 .then(({ data }) => {
-                    if ([status.BadRequest].indexOf(data.code) >= 0) {
+                    if (errerCodes.indexOf(data.code) >= 0) {
                         errorNotification(data)
                         reject(data)
+                    } else if (data.code === status.Unauthorized) {
+                        handlerUnauthorized()
                     } else {
                         reslove(data)
                     }
                 })
                 .catch(({ response: { data } }) => {
                     if (process.env.VUE_APP_NODE_ENV === 'development') {
+                        errorNotification(data)
+                        reject(data)
+                        if (data.code === status.Unauthorized) {
+                            handlerUnauthorized()
+                        }
+                    } else {
                         errorNotification({
                             message: '发生错误，请联系管理员'
                         })
-                    } else {
-                        errorNotification(data)
-                        reject(data)
                     }
                 })
         })
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoAuthorityView/index.js b/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoAuthorityView/index.js
new file mode 100644
index 0000000..3c8f394
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoAuthorityView/index.js
@@ -0,0 +1,202 @@
+export default {
+    props: {
+        loadData: {
+            type: Function,
+            require: true,
+        },
+
+        autoLoad: {
+            type: Boolean,
+            default: true
+        },
+
+        defaultSelectedKeys: {
+            type: Array,
+            default: []
+        }
+    },
+
+    data() {
+        return {
+            loading: false,
+
+            data: [],
+            list: []
+        }
+    },
+
+    created() {
+        if (this.autoLoad) {
+            this.onLoadData()
+        }
+    },
+
+    methods: {
+
+        renderDescriptions(data) {
+            return data.map(p => {
+                return p.children && p.children.length ? this.renderItem(p) : this.renderCheckbox(p)
+            })
+        },
+
+        renderItem(data) {
+            return (
+                <a-descriptions bordered column={1}>
+                    <a-descriptions-item>
+                        <a-checkbox
+                            slot="label"
+                            value={data.id}
+                            checked={data.checked}
+                            indeterminate={data.indeterminate}
+                            onChange={(e) => this.onChange(e, data)}
+                        >{data.title}</a-checkbox>
+                        {this.renderDescriptions(data.children)}
+                    </a-descriptions-item>
+                </a-descriptions>
+            )
+        },
+
+        renderCheckbox(data) {
+            return (
+                <div class="yo-authority-view--checkbox">
+                    <a-checkbox
+                        value={data.id}
+                        checked={data.checked}
+                        onChange={(e) => this.onChange(e, data)}
+                    >{data.title}</a-checkbox>
+                </div>
+            )
+        },
+
+        onLoadData() {
+            this.loading = true
+
+            this.loadData().then((res) => {
+                this.data = this.generateCheck(res)
+
+                this.list = []
+                this.generateList(this.data)
+
+                if (this.defaultSelectedKeys.length) {
+                    this.list.map(p => {
+                        if (this.defaultSelectedKeys.indexOf(p.id) > -1 && (!p.children || !p.children.length)) {
+                            this.onSelect(true, p)
+                        }
+                    })
+                }
+
+                this.loading = false
+            })
+        },
+
+        onReloadData() {
+
+            this.data = []
+            this.onLoadData()
+
+        },
+
+        onChange(e, item) {
+
+            this.onSelect(e.target.checked, item)
+
+            this.$emit('select', this.list.filter(p => p.checked).map(p => p.id), this.list.filter(p => p.checked || p.indeterminate).map(p => p.id))
+        },
+
+        onSelect(check, item) {
+            item.checked = check
+            item.indeterminate = false
+            if (item.children && item.children.length) {
+                this.onChangeChildren(item.checked, item.children)
+            }
+            if (item.parentId) {
+                this.onChangeParent(item.checked, item.parentId)
+            }
+        },
+
+        onChangeParent(checked, parentId) {
+            const parent = this.list.find(p => p.id === parentId)
+            if (parent) {
+                const checkedCount = parent.children.filter(p => p.checked).length
+                const indeterminateCount = parent.children.filter(p => p.indeterminate).length
+                if (checkedCount === parent.children.length) {
+                    // 全选
+                    parent.checked = true
+                    parent.indeterminate = false
+                } else if (!checkedCount && !indeterminateCount) {
+                    // 全不选
+                    parent.checked = false
+                    parent.indeterminate = false
+                } else {
+                    // 半选
+                    parent.checked = false
+                    parent.indeterminate = true
+                }
+                this.onChangeParent(checked, parent.parentId)
+            }
+        },
+
+        onChangeChildren(checked, children) {
+            children.forEach(p => {
+                p.checked = checked
+                p.indeterminate = false
+                if (p.children && p.children.length) {
+                    this.onChangeChildren(checked, p.children)
+                }
+            })
+        },
+
+        generateCheck(data) {
+            data.forEach(p => {
+                if (p.children && p.children.length) {
+                    p.children = this.generateCheck(p.children)
+                }
+                p.checked = false
+                p.indeterminate = false
+            })
+
+            return data
+        },
+
+        generateList(data) {
+            data.forEach(p => {
+                if (p.children && p.children.length) {
+                    this.generateList(p.children)
+                }
+                this.list.push(p)
+            })
+        },
+
+    },
+
+    render() {
+        return (
+            <div class="yo-authority-view">
+                <a-spin style={{ width: '100%' }} spinning={this.loading}>
+                    <a-icon slot="indicator" type="loading" spin />
+                    {
+                        !this.loading &&
+                        <a-descriptions bordered column={1}>
+                            {
+                                this.data.map(p => {
+                                    return (
+                                        <a-descriptions-item>
+                                            <a-checkbox
+                                                slot="label"
+                                                value={p.id}
+                                                checked={p.checked}
+                                                indeterminate={p.indeterminate}
+                                                onChange={(e) => this.onChange(e, p)}
+                                            >{p.title}</a-checkbox>
+                                            {this.renderDescriptions(p.children)}
+                                        </a-descriptions-item>
+                                    )
+                                })
+                            }
+                        </a-descriptions>
+                    }
+                </a-spin>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTreeLayout/index.js b/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTreeLayout/index.js
index f3b7c31..c6e336c 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTreeLayout/index.js
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTreeLayout/index.js
@@ -1,5 +1,3 @@
-import { template } from "lodash"
-
 export default {
   props: {
     loadData: {
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/addForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/addForm.vue
index b30cf3c..712b517 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/addForm.vue
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/addForm.vue
@@ -5,7 +5,7 @@
     @cancel="onCancel"
     @ok="onOk"
     class="yo-modal-form"
-    title="新增应用"
+    title="新增角色"
   >
     <FormBody ref="form-body" />
   </a-modal>
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/editForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/editForm.vue
index ee99935..1998175 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/editForm.vue
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/editForm.vue
@@ -5,7 +5,7 @@
     @cancel="onCancel"
     @ok="onOk"
     class="yo-modal-form"
-    title="角色编辑"
+    title="编辑角色"
   >
     <FormBody ref="form-body" />
   </a-modal>
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/index.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/index.vue
index 9a31edb..25ca60c 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/index.vue
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/index.vue
@@ -37,7 +37,7 @@
               </a-popconfirm>
             </Auth>
             <Auth :auth="{ sysRole: [['grantMenu'], ['grantData']] }">
-              <a-dropdown>
+              <a-dropdown placement="bottomRight">
                 <a class="ant-dropdown-link">
                   授权
                   <a-icon type="down" />
@@ -45,12 +45,12 @@
                 <a-menu slot="overlay">
                   <Auth auth="sysRole:grantMenu">
                     <a-menu-item>
-                      <a @click="$refs.roleMenuForm.roleMenu(record)">授权菜单</a>
+                      <a @click="onOpen('menu-form', record)">授权菜单</a>
                     </a-menu-item>
                   </Auth>
                   <Auth auth="sysRole:grantData">
                     <a-menu-item>
-                      <a @click="$refs.roleOrgForm.roleOrg(record)">授权数据</a>
+                      <a @click="onOpen('org-form', record)">授权数据</a>
                     </a-menu-item>
                   </Auth>
                 </a-menu>
@@ -63,21 +63,21 @@
     <br />
     <add-form @ok="onReloadData" ref="add-form" />
     <edit-form @ok="onReloadData" ref="edit-form" />
-    <role-menu-form @ok="onReloadData" ref="roleMenuForm" />
-    <role-org-form @ok="onReloadData" ref="roleOrgForm" />
+    <menu-form @ok="onReloadData" ref="menu-form" />
+    <org-form @ok="onReloadData" ref="org-form" />
   </container>
 </template>
 <script>
 import AddForm from './addForm';
 import editForm from './editForm';
-import roleMenuForm from './roleMenuForm';
-import roleOrgForm from './roleOrgForm';
+import menuForm from './menuForm';
+import orgForm from './orgForm';
 export default {
   components: {
     AddForm,
     editForm,
-    roleMenuForm,
-    roleOrgForm,
+    menuForm,
+    orgForm,
   },
   data() {
     return {
@@ -95,18 +95,23 @@ export default {
           title: '排序',
           dataIndex: 'sort',
         },
-        {
-          title: '操作',
-          width: '200px',
-          dataIndex: 'action',
-          scopedSlots: {
-            customRender: 'action',
-          },
-        },
       ],
     };
   },
-  created() {},
+  created() {
+    const flag = this.$auth({
+      sysRole: [['edit'], ['delete'], ['grantMenu'], ['grantData']],
+    });
+
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '200px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
   methods: {
     /**
      * 必要的方法
@@ -157,7 +162,7 @@ export default {
 
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api.sysRoleDel(record).then(({ success, message }) => {
+      this.$api.sysRoleDel(record).then(({ success }) => {
         this.onResult(success, '删除成功');
       });
     },
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/menuForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/menuForm.vue
index 95155b0..a9114df 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/menuForm.vue
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/menuForm.vue
@@ -1,168 +1,101 @@
 <template>
   <a-modal
-    title="授权菜单"
-    :width="600"
-    :visible="visible"
     :confirmLoading="confirmLoading"
-    @ok="handleSubmit"
-    @cancel="handleCancel"
+    :visible="visible"
+    :width="1200"
+    @cancel="onCancel"
+    @ok="onOk"
+    title="授权菜单"
   >
-    <a-spin :spinning="formLoading">
-      <a-form :form="form">
-
-        <a-form-item
-          label="菜单权限"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol">
-
-          <a-tree
-            v-model="checkedKeys"
-            multiple
-            checkable
-            :auto-expand-parent="autoExpandParent"
-            :expanded-keys="expandedKeys"
-            :tree-data="menuTreeData"
-            :selected-keys="selectedKeys"
-            :replaceFields="replaceFields"
-            @expand="onExpand"
-            @select="onSelect"
-            @check="treeCheck"
-          />
-          </a-tree></a-form-item>
-
-      </a-form>
-
-    </a-spin>
+    <yo-authority-view
+      :auto-load="false"
+      :default-selected-keys="selectedKeys"
+      :load-data="loadData"
+      @select="onSelect"
+      ref="authority-view"
+    />
   </a-modal>
 </template>
 
 <script>
-//   import { sysRoleOwnMenu, sysRoleGrantMenu } from '@/api/modular/system/roleManage'
+import YoAuthorityView from '@/components/yoAuthorityView';
 
-  export default {
-    data () {
-      return {
-        labelCol: {
-          style: { 'padding-right': '20px' },
-          xs: { span: 24 },
-          sm: { span: 5 }
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 15 }
-        },
-        menuTreeData: [],
-        expandedKeys: [],
-        checkedKeys: [],
-        halfCheckedKeys: [],
-        visible: false,
-        confirmLoading: false,
-        formLoading: true,
-        autoExpandParent: true,
-        selectedKeys: [],
-        subValues: [],
-        roleEntity: [],
-        replaceFields: {
-          key: 'id'
-        },
-        form: this.$form.createForm(this)
-      }
+export default {
+  components: {
+    YoAuthorityView,
+  },
+
+  data() {
+    return {
+      visible: false,
+
+      record: {},
+      selectedKeys: [],
+
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.record = record;
+
+      this.$nextTick(async () => {
+        const view = this.$refs['authority-view'];
+        view.loading = true;
+        view.data = [];
+        this.selectedKeys = await this.onLoadRoleOwnMenu();
+        view.onReloadData();
+      });
     },
 
-    methods: {
-      // 初始化方法
-      onOpen (record) {
-        this.formLoading = true
-        this.roleEntity = record
-        this.visible = true
-        this.getMenuTree()
-        this.expandedMenuKeys(record)
-      },
+    loadData() {
+      return this.$api.SysMenuTreeForGrant().then((res) => {
+        return res.data;
+      });
+    },
 
-      /**
-       * 获取菜单列表
-       */
-      getMenuTree () {
-        this.$api.SysMenuTreeForGrant().then((res) => {
-           if (res.success) {
-             this.menuTreeData = res.data
-             // 默认展开目录级
-             this.menuTreeData.forEach(item => {
-               this.expandedKeys.push(item.id)
-             })
-           }
+    /**
+     * 此角色已有菜单权限
+     */
+    onLoadRoleOwnMenu() {
+      return this.$api.sysRoleOwnMenu({ id: this.record.id }).then(({ data }) => {
+        return data;
+      });
+    },
+
+    onSelect(a1, a2) {
+      this.selectedKeys = a2;
+    },
+
+    onOk() {
+      this.confirmLoading = true;
+
+      this.$api
+        .sysRoleGrantMenu({
+          id: this.record.id,
+          grantMenuIdList: this.selectedKeys,
         })
-      },
-
-      /**
-       * 此角色已有菜单权限
-       */
-      expandedMenuKeys (record) {
-        this.$api.sysRoleOwnMenu({ id: record.id }).then((res) => {
-          if (res.success) {
-            this.checkedKeys = res.data
-            this.findAllChildren(this.menuTreeData)
-          }
-          this.formLoading = false
-        })
-      },
-
-      treeCheck (checkKeys, event) {
-        this.halfCheckedKeys = event.halfCheckedKeys
-      },
-      onExpand (expandedKeys) {
-        this.expandedKeys = expandedKeys
-        this.autoExpandParent = false
-      },
-      onCheck (checkedKeys) {
-        this.checkedKeys = checkedKeys
-      },
-      onSelect (selectedKeys, info) {
-        this.selectedKeys = selectedKeys
-      },
-
-      handleSubmit () {
-        const { form: { validateFields } } = this
-        this.confirmLoading = true
-        validateFields((errors, values) => {
-          if (!errors) {
-             this.$api.sysRoleGrantMenu({ id: this.roleEntity.id, grantMenuIdList: this.checkedKeys.concat(this.halfCheckedKeys) }).then((res) => {
-              if (res.success) {
-                this.$message.success('授权成功')
-                this.confirmLoading = false
-                this.$emit('ok', values)
-                this.handleCancel()
-              } else {
-                this.$message.error('授权失败：' + res.message)
-              }
-            }).finally((res) => {
-              this.confirmLoading = false
-            })
-          } else {
-            this.confirmLoading = false
+        .then(({ success }) => {
+          if (success) {
+            this.$message.success('授权成功');
+            this.$emit('ok');
+            this.onCancel();
           }
         })
-      },
-      handleCancel () {
-        // 清空已选择的
-        this.checkedKeys = []
-        // 清空已展开的
-        this.expandedKeys = []
-        this.visible = false
-      },
-      // 遍历树形然后获取到对父节点进行移除，使用子节点，而且将父节点加入到mainMenuList
-      findAllChildren(data) {
-        data.forEach((item, index) => {
-          if (item.children.length !== 0) {
-            for (let i = 0; i < this.checkedKeys.length; i++) {
-              if (item.id === this.checkedKeys[i]) {
-                this.checkedKeys.splice(i, 1)
-              }
-            }
-            this.findAllChildren(item.children)
-          }
-        })
-      }
-    }
-  }
+        .finally((res) => {
+          this.confirmLoading = false;
+        });
+    },
+
+    onCancel() {
+      this.visible = false;
+    },
+  },
+};
 </script>
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/orgForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/orgForm.vue
index 1c30806..0a847c8 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/orgForm.vue
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/orgForm.vue
@@ -1,195 +1,170 @@
 <template>
   <a-modal
-    title="授权数据"
-    :width="600"
-    :visible="visible"
     :confirmLoading="confirmLoading"
-    @ok="handleSubmit"
-    @cancel="handleCancel"
+    :visible="visible"
+    :width="600"
+    @cancel="onCancel"
+    @ok="onOk"
+    title="授权数据"
   >
-    <a-spin :spinning="formLoading">
-      <a-form :form="form">
-        <a-form-item
-          label="授权范围"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          has-feedback
-        >
-          <a-select style="width: 100%" placeholder="请选择授权范围" v-decorator="['dataScopeType', {rules: [{ required: true, message: '请选择授权范围！' }]}]" >
-            <a-select-option v-for="(item,index) in dataScopeTypeData" :key="index" :value="item.code" @click="handleChange(item.code)">{{ item.value }}</a-select-option>
-          </a-select>
-        </a-form-item>
-        <div v-show="orgTreeShow">
-          <a-form-item
-            label="选择机构"
-            :labelCol="labelCol"
-            :wrapperCol="wrapperCol"
-          >
-            <a-tree
-              v-model="checkedKeys"
-              checkable
-              checkStrictly
-              :auto-expand-parent="autoExpandParent"
-              :expanded-keys="expandedKeys"
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+        <div class="yo-form-group">
+          <a-form-model-item has-feedback label="授权范围" prop="dataScopeType">
+            <a-select placeholder="请选择授权范围" v-model="form.dataScopeType">
+              <a-select-option
+                :key="item.code"
+                :value="item.code"
+                @click="onChange(item.code)"
+                v-for="item in dataScopeTypeData"
+              >{{ item.value }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item label="选择机构" v-show="orgTreeShow">
+            <a-tree-select
+              :show-checked-strategy="SHOW_PARENT"
               :tree-data="orgTreeData"
-              :selected-keys="selectedKeys"
-              :replaceFields="replaceFields"
-              @expand="onExpand"
-              @select="onSelect"
+              placeholder="请选择机构"
+              tree-checkable
+              v-model="checkedKeys"
             />
-          </a-form-item>
+          </a-form-model-item>
         </div>
-      </a-form>
+      </a-form-model>
     </a-spin>
   </a-modal>
 </template>
 
 <script>
+import { TreeSelect } from 'ant-design-vue';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 
+export default {
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+      loading: true,
 
-  export default {
-    data () {
-      return {
-        labelCol: {
-          style: { 'padding-right': '20px' },
-          xs: { span: 24 },
-          sm: { span: 5 }
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 15 }
-        },
-        orgTreeData: [],
-        expandedKeys: [],
-        checkedKeys: [],
-        visible: false,
-        confirmLoading: false,
-        formLoading: true,
-        autoExpandParent: true,
-        selectedKeys: [],
-        subValues: [],
-        roleEntity: [],
-        dataScopeTypeData: [],
-        orgTreeShow: false,
-        replaceFields: {
-          key: 'id'
-        },
-        form: this.$form.createForm(this)
+      record: {},
+
+      form: {
+        dataScopeType: '',
+      },
+      rules: {
+        dataScopeType: [{ required: true, message: '请选择授权范围' }],
+      },
+
+      SHOW_PARENT,
+      orgTreeData: [],
+
+      checkedKeys: [],
+      dataScopeTypeData: [],
+      orgTreeShow: false,
+      replaceFields: {
+        key: 'id',
+      },
+    };
+  },
+
+  methods: {
+    async onOpen(record) {
+      this.visible = true;
+      this.record = record;
+
+      this.loading = true;
+
+      await this.onLoadCodes();
+      this.form.dataScopeType = record.dataScopeType.toString();
+
+      await this.onChange(record.dataScopeType);
+
+      this.loading = false;
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      return this.$api
+        .$queue([this.$api.sysDictTypeDropDownWait({ code: 'data_scope_type' })])
+        .then(([dataScopeType]) => {
+          this.dataScopeTypeData = dataScopeType.data;
+        });
+    },
+
+    async onChange(value) {
+      if (value == '5') {
+        this.loading = true;
+        this.orgTreeShow = true;
+        // 获取机构树
+        this.orgTreeData = await this.onLoadTreeData();
+        // 已关联数据
+        this.checkedKeys = await this.onLoadRoleOwn();
+
+        this.loading = false;
+      } else {
+        this.orgTreeShow = false;
+        // 清理已选中机构
+        this.checkedKeys = [];
       }
     },
 
-    methods: {
-      // 初始化方法
-      onOpen (record) {
-        this.roleEntity = record
-        this.visible = true
-        this.formLoading = true
-        this.sysDictTypeDropDown()
-        this.form.getFieldDecorator('dataScopeType', { initialValue: record.dataScopeType.toString() })
-        this.handleChange(record.dataScopeType)
-      },
+    /**
+     * 获取机构树
+     */
+    onLoadTreeData() {
+      return this.$api.getOrgTree().then(({ data }) => {
+        return data;
+      });
+    },
 
-      /**
-       * 获取字典数据
-       */
-      sysDictTypeDropDown () {
-        // 数据范围
-        this.$api.sysDictTypeDropDown({ code: 'data_scope_type' }).then((res) => {
-          this.dataScopeTypeData = res.data
-          this.formLoading = false
-        })
-      },
+    /**
+     * 此角色已有数据列表
+     */
+    onLoadRoleOwn() {
+      return this.$api.sysRoleOwnData({ id: this.record.id }).then(({ data }) => {
+        return data;
+      });
+    },
 
-      // 范围下拉框事件
-      handleChange (value) {
-        // eslint-disable-next-line eqeqeq
-        if (value == '5') {
-          this.formLoading = true
-          this.orgTreeShow = true
-          // 获取机构树
-          this.getOrgTree()
-          // 已关联数据
-          this.sysRoleOwnData(this.roleEntity)
-        } else {
-          this.orgTreeShow = false
-          // 清理已选中机构
-          this.checkedKeys = []
-        }
-      },
-
-      /**
-       * 获取机构树
-       */
-      getOrgTree () {
-        this.$api.getOrgTree().then((res) => {
-           if (res.success) {
-             this.orgTreeData = res.data
-             // 默认展开
-             this.orgTreeData.forEach(item => {
-               this.expandedKeys.push(item.id)
-             })
-           }
-        })
-      },
-
-      /**
-       * 此角色已有数据列表
-       */
-      sysRoleOwnData (record) {
-        this.$api.sysRoleOwnData({ id: record.id }).then((res) => {
-          if (res.success) {
-            //console.log(JSON.stringify(res.data))
-            this.checkedKeys = res.data
-          }
-          this.formLoading = false
-        })
-      },
-
-      onExpand (expandedKeys) {
-        this.expandedKeys = expandedKeys
-        this.autoExpandParent = false
-      },
-      onCheck (checkedKeys) {
-        //console.log(JSON.stringify(checkedKeys))
-        this.checkedKeys = checkedKeys
-      },
-      onSelect (selectedKeys, info) {
-        this.selectedKeys = selectedKeys
-      },
-
-      handleSubmit () {
-        const { form: { validateFields } } = this
-        this.confirmLoading = true
-        validateFields((errors, values) => {
-          if (!errors) {
-            const checkedKeys = this.checkedKeys.checked === undefined ? this.checkedKeys : this.checkedKeys.checked
-            this.$api.sysRoleGrantData({ id: this.roleEntity.id, grantOrgIdList: checkedKeys, dataScopeType: values.dataScopeType }).then((res) => {
-              this.confirmLoading = false
-              if (res.success) {
-                this.$message.success('授权成功')
-                this.$emit('ok', values)
-                this.handleCancel()
-              } else {
-                this.$message.error('授权失败：' + res.message)
-              }
-            }).finally((res) => {
-              this.confirmLoading = false
+    onOk() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysRoleGrantData({
+              id: this.record.id,
+              grantOrgIdList: this.checkedKeys,
+              dataScopeType: this.form.dataScopeType,
             })
-          } else {
-            this.confirmLoading = false
-          }
-        })
-      },
-      handleCancel () {
-        this.form.resetFields()
-        // 清空已选择的
-        this.checkedKeys = []
-        // 清空已展开的
-        this.expandedKeys = []
-        this.visible = false
-        // 隐藏机构树
-        this.orgTreeShow = false
-      }
-    }
-  }
+            .then(({ success }) => {
+              if (success) {
+                this.$message.success('授权成功');
+                this.$emit('ok');
+                this.onCancel();
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+    onCancel() {
+      this.visible = false;
+
+      setTimeout(() => {
+        this.record = {};
+        this.checkedKeys = [];
+        this.dataScopeTypeData = [];
+        this.orgTreeShow = false;
+        this.form = {};
+
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
 </script>