From f830480d7d73c6f4330e26a5ee7ae444056bba3c Mon Sep 17 00:00:00 2001
From: yuanbp <yuanbp0912@163.com>
Date: Mon, 12 Apr 2021 13:11:05 +0800
Subject: [PATCH] update _web/src/views/system/role/roleMenuForm.vue.

---
 _web/src/views/system/role/roleMenuForm.vue | 248 +++++++++++---------
 1 file changed, 139 insertions(+), 109 deletions(-)

diff --git a/_web/src/views/system/role/roleMenuForm.vue b/_web/src/views/system/role/roleMenuForm.vue
index bdcacd66..0c66d85a 100644
--- a/_web/src/views/system/role/roleMenuForm.vue
+++ b/_web/src/views/system/role/roleMenuForm.vue
@@ -19,15 +19,13 @@
             v-model="checkedKeys"
             multiple
             checkable
-            checkStrictly
             :auto-expand-parent="autoExpandParent"
             :expanded-keys="expandedKeys"
             :tree-data="menuTreeData"
             :selected-keys="selectedKeys"
             :replaceFields="replaceFields"
             @expand="onExpand"
-            @select="onSelect"
-            @check="treeCheck"
+            @check="onCheck"
           />
         </a-form-item>
 
@@ -38,117 +36,149 @@
 </template>
 
 <script>
-  import { SysMenuTreeForGrant } from '@/api/modular/system/menuManage'
-  import { sysRoleOwnMenu, sysRoleGrantMenu } from '@/api/modular/system/roleManage'
+import {SysMenuTreeForGrant} from '@/api/modular/system/menuManage'
+import {sysRoleOwnMenu, sysRoleGrantMenu} from '@/api/modular/system/roleManage'
 
-  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: [],
-        visible: false,
-        confirmLoading: false,
-        formLoading: true,
-        autoExpandParent: true,
-        selectedKeys: [],
-        subValues: [],
-        roleEntity: [],
-        replaceFields: {
-          key: 'id'
-        },
-        form: this.$form.createForm(this)
+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: [],
+      visible: false,
+      confirmLoading: false,
+      formLoading: true,
+      autoExpandParent: true,
+      selectedKeys: [],
+      subValues: [],
+      roleEntity: [],
+      replaceFields: {
+        key: 'id'
+      },
+      form: this.$form.createForm(this),
+      commitKeys: [],
+      leastChilds: []
+    }
+  },
+  methods: {
+    // 初始化方法
+    roleMenu(record) {
+      this.formLoading = true
+      this.roleEntity = record
+      this.visible = true
+      this.getMenuTree()
+    },
+
+    /**
+     * 获取菜单列表
+     */
+    getMenuTree() {
+      const _this = this
+      SysMenuTreeForGrant().then((res) => {
+        if (res.success) {
+          _this.menuTreeData = res.data
+          _this.getLeastChilds(res.data)
+          // 默认展开目录级
+          _this.menuTreeData.forEach(item => {
+            _this.expandedKeys.push(item.id)
+          })
+
+          _this.expandedMenuKeys(_this.roleEntity)
+        }
+      })
+    },
+
+    getLeastChilds(data){
+      for (let i = 0; i < data.length; i++) {
+        this.pushLeastChilds(data[i])
       }
     },
 
-    methods: {
-      // 初始化方法
-      roleMenu (record) {
-        this.formLoading = true
-        this.roleEntity = record
-        this.visible = true
-        this.getMenuTree()
-        this.expandedMenuKeys(record)
-      },
-
-      /**
-       * 获取菜单列表
-       */
-      getMenuTree () {
-        SysMenuTreeForGrant().then((res) => {
-           if (res.success) {
-             this.menuTreeData = res.data
-             // 默认展开目录级
-             this.menuTreeData.forEach(item => {
-               this.expandedKeys.push(item.id)
-             })
-           }
-        })
-      },
-
-      /**
-       * 此角色已有菜单权限
-       */
-      expandedMenuKeys (record) {
-        sysRoleOwnMenu({ id: record.id }).then((res) => {
-          if (res.success) {
-            this.checkedKeys = res.data
-          }
-          this.formLoading = false
-        })
-      },
-
-      treeCheck (checkKeys) {
-      },
-      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) {
-            sysRoleGrantMenu({ id: this.roleEntity.id, grantMenuIdList: this.checkedKeys.checked }).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
-          }
-        })
-      },
-      handleCancel () {
-        // 清空已选择的
-        this.checkedKeys = []
-        // 清空已展开的
-        this.expandedKeys = []
-        this.visible = false
+    pushLeastChilds(e) {
+      if (e.children.length > 0) {
+        this.getLeastChilds(e.children)
+        return
       }
+      this.leastChilds.push(e.id)
+    },
+
+    /**
+     * 此角色已有菜单权限
+     */
+    expandedMenuKeys(record) {
+      const _this = this
+      sysRoleOwnMenu({id: record.id}).then((res) => {
+        if (res.success) {
+          _this.pickCheckedKeys(res.data)
+          _this.commitKeys = res.data
+        }
+        _this.formLoading = false
+      })
+    },
+
+    pickCheckedKeys(data){
+      for (let i = 0; i < data.length; i++) {
+        if (this.leastChilds.includes(data[i])) {
+          this.checkedKeys.push(data[i])
+        }
+      }
+    },
+
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+
+    onCheck(checkedKeys, info) {
+      this.checkedKeys = checkedKeys
+      this.commitKeys = checkedKeys.concat(info.halfCheckedKeys);
+    },
+
+    onSelect(selectedKeys, info) {
+      console.log(selectedKeys)
+      console.log(info)
+      this.selectedKeys = selectedKeys
+    },
+
+    handleSubmit() {
+      const _this = this;
+      const {form: {validateFields}} = this
+      this.confirmLoading = true
+      validateFields((errors, values) => {
+        if (!errors) {
+          sysRoleGrantMenu({id: _this.roleEntity.id, grantMenuIdList: _this.commitKeys}).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
+        }
+      })
+    },
+    handleCancel() {
+      // 清空已选择的
+      this.checkedKeys = []
+      // 清空已展开的
+      this.expandedKeys = []
+      this.visible = false
     }
   }
+}
 </script>