inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <a-modal
3     title="授权菜单"
4     :width="600"
5     :visible="visible"
6     :confirmLoading="confirmLoading"
7     @ok="handleSubmit"
8     @cancel="handleCancel"
9   >
10     <a-spin :spinning="formLoading">
11       <a-form :form="form">
12
13         <a-form-item
14           label="菜单权限"
15           :labelCol="labelCol"
16           :wrapperCol="wrapperCol">
17
18           <a-tree
19             v-model="checkedKeys"
20             multiple
21             checkable
22             :auto-expand-parent="autoExpandParent"
23             :expanded-keys="expandedKeys"
24             :tree-data="menuTreeData"
25             :selected-keys="selectedKeys"
26             :replaceFields="replaceFields"
27             @expand="onExpand"
28             @check="onCheck"
29           />
30         </a-form-item>
31
32       </a-form>
33
34     </a-spin>
35   </a-modal>
36 </template>
37
38 <script>
39   import { SysMenuTreeForGrant } from '@/api/modular/system/menuManage'
40   import { sysRoleOwnMenu, sysRoleGrantMenu } from '@/api/modular/system/roleManage'
41
42   export default {
43     data() {
44       return {
45         labelCol: {
46           style: { 'padding-right': '20px' },
47           xs: { span: 24 },
48           sm: { span: 5 }
49         },
50         wrapperCol: {
51           xs: { span: 24 },
52           sm: { span: 15 }
53         },
54         menuTreeData: [],
55         expandedKeys: [],
56         checkedKeys: [],
57         visible: false,
58         confirmLoading: false,
59         formLoading: true,
60         autoExpandParent: true,
61         selectedKeys: [],
62         subValues: [],
63         roleEntity: [],
64         replaceFields: {
65           key: 'id'
66         },
67         form: this.$form.createForm(this),
68         commitKeys: [],
69         leastChilds: []
70       }
71     },
72     methods: {
73       // 初始化方法
74       roleMenu(record) {
75         this.formLoading = true
76         this.roleEntity = record
77         this.visible = true
78         this.getMenuTree()
79       },
80
81       /**
82        * 获取菜单列表
83        */
84       getMenuTree() {
85         const _this = this
86         SysMenuTreeForGrant().then((res) => {
87           if (res.success) {
88             _this.menuTreeData = res.data
89             _this.getLeastChilds(res.data)
90             // 默认展开目录级
91             _this.menuTreeData.forEach(item => {
92               _this.expandedKeys.push(item.id)
93             })
94
95             _this.expandedMenuKeys(_this.roleEntity)
96           }
97         })
98       },
99
100       getLeastChilds(data) {
101         for (let i = 0; i < data.length; i++) {
102           this.pushLeastChilds(data[i])
103         }
104       },
105
106       pushLeastChilds(e) {
107         if (e.children.length > 0) {
108           this.getLeastChilds(e.children)
109           return
110         }
111         this.leastChilds.push(e.id)
112       },
113
114       /**
115        * 此角色已有菜单权限
116        */
117       expandedMenuKeys(record) {
118         const _this = this
119         sysRoleOwnMenu({ id: record.id }).then((res) => {
120           if (res.success) {
121             _this.pickCheckedKeys(res.data)
122             _this.commitKeys = res.data
123           }
124           _this.formLoading = false
125         })
126       },
127
128       pickCheckedKeys(data) {
129         for (let i = 0; i < data.length; i++) {
130           if (this.leastChilds.includes(data[i])) {
131             this.checkedKeys.push(data[i])
132           }
133         }
134       },
135
136       onExpand(expandedKeys) {
137         this.expandedKeys = expandedKeys
138         this.autoExpandParent = false
139       },
140
141       onCheck(checkedKeys, info) {
142         this.checkedKeys = checkedKeys
143         this.commitKeys = checkedKeys.concat(info.halfCheckedKeys)
144       },
145
146       onSelect(selectedKeys, info) {
147         console.log(selectedKeys)
148         console.log(info)
149         this.selectedKeys = selectedKeys
150       },
151
152       handleSubmit() {
153         const _this = this
154         const { form: { validateFields } } = this
155         this.confirmLoading = true
156         validateFields((errors, values) => {
157           if (!errors) {
158             sysRoleGrantMenu({ id: _this.roleEntity.id, grantMenuIdList: _this.commitKeys }).then((res) => {
159               if (res.success) {
160                 _this.$message.success('授权成功')
161                 _this.confirmLoading = false
162                 _this.$emit('ok', values)
163                 _this.handleCancel()
164               } else {
165                 _this.$message.error('授权失败:' + res.message)
166               }
167             }).finally((res) => {
168               _this.confirmLoading = false
169             })
170           } else {
171             _this.confirmLoading = false
172           }
173         })
174       },
175       handleCancel() {
176         // 清空已选择的
177         this.checkedKeys = []
178         // 清空已展开的
179         this.expandedKeys = []
180         this.visible = false
181       }
182     }
183   }
184 </script>