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         <a-form-item
13           label="授权范围"
14           :labelCol="labelCol"
15           :wrapperCol="wrapperCol"
16           has-feedback
17         >
18           <a-select style="width: 100%" placeholder="请选择授权范围" v-decorator="['dataScopeType', {rules: [{ required: true, message: '请选择授权范围!' }]}]" >
19             <a-select-option v-for="(item,index) in dataScopeTypeData" :key="index" :value="item.code" @click="handleChange(item.code)">{{ item.value }}</a-select-option>
20           </a-select>
21         </a-form-item>
22         <div v-show="orgTreeShow">
23           <a-form-item
24             label="选择机构"
25             :labelCol="labelCol"
26             :wrapperCol="wrapperCol"
27           >
28             <a-tree
29               v-model="checkedKeys"
30               checkable
31               checkStrictly
32               :auto-expand-parent="autoExpandParent"
33               :expanded-keys="expandedKeys"
34               :tree-data="orgTreeData"
35               :selected-keys="selectedKeys"
36               :replaceFields="replaceFields"
37               @expand="onExpand"
38               @select="onSelect"
39             />
40           </a-form-item>
41         </div>
42       </a-form>
43     </a-spin>
44   </a-modal>
45 </template>
46
47 <script>
48   import { getOrgTree } from '@/api/modular/system/orgManage'
49   import { sysRoleOwnData, sysRoleGrantData } from '@/api/modular/system/roleManage'
50   import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
51
52   export default {
53     data () {
54       return {
55         labelCol: {
56           style: { 'padding-right': '20px' },
57           xs: { span: 24 },
58           sm: { span: 5 }
59         },
60         wrapperCol: {
61           xs: { span: 24 },
62           sm: { span: 15 }
63         },
64         orgTreeData: [],
65         expandedKeys: [],
66         checkedKeys: [],
67         visible: false,
68         confirmLoading: false,
69         formLoading: true,
70         autoExpandParent: true,
71         selectedKeys: [],
72         subValues: [],
73         roleEntity: [],
74         dataScopeTypeData: [],
75         orgTreeShow: false,
76         replaceFields: {
77           key: 'id'
78         },
79         form: this.$form.createForm(this)
80       }
81     },
82
83     methods: {
84       // 初始化方法
85       roleOrg (record) {
86         this.roleEntity = record
87         this.visible = true
88         this.formLoading = true
89         this.sysDictTypeDropDown()
90         this.form.getFieldDecorator('dataScopeType', { initialValue: record.dataScopeType.toString() })
91         this.handleChange(record.dataScopeType)
92       },
93
94       /**
95        * 获取字典数据
96        */
97       sysDictTypeDropDown () {
98         // 数据范围
99         sysDictTypeDropDown({ code: 'data_scope_type' }).then((res) => {
100           this.dataScopeTypeData = res.data
101           this.formLoading = false
102         })
103       },
104
105       // 范围下拉框事件
106       handleChange (value) {
107         // eslint-disable-next-line eqeqeq
108         if (value == '5') {
109           this.formLoading = true
110           this.orgTreeShow = true
111           // 获取机构树
112           this.getOrgTree()
113           // 已关联数据
114           this.sysRoleOwnData(this.roleEntity)
115         } else {
116           this.orgTreeShow = false
117           // 清理已选中机构
118           this.checkedKeys = []
119         }
120       },
121
122       /**
123        * 获取机构树
124        */
125       getOrgTree () {
126         getOrgTree().then((res) => {
127           if (res.success) {
128             this.orgTreeData = res.data
129             // 默认展开
130             this.orgTreeData.forEach(item => {
131               this.expandedKeys.push(item.id)
132             })
133           }
134         })
135       },
136
137       /**
138        * 此角色已有数据列表
139        */
140       sysRoleOwnData (record) {
141         sysRoleOwnData({ id: record.id }).then((res) => {
142           if (res.success) {
143             this.checkedKeys = res.data
144           }
145           this.formLoading = false
146         })
147       },
148
149       onExpand (expandedKeys) {
150         this.expandedKeys = expandedKeys
151         this.autoExpandParent = false
152       },
153       onCheck (checkedKeys) {
154         this.checkedKeys = checkedKeys
155       },
156       onSelect (selectedKeys, info) {
157         this.selectedKeys = selectedKeys
158       },
159
160       handleSubmit () {
161         const { form: { validateFields } } = this
162         this.confirmLoading = true
163         validateFields((errors, values) => {
164           if (!errors) {
165             const checkedKeys = this.checkedKeys.checked === undefined ? this.checkedKeys : this.checkedKeys.checked
166             sysRoleGrantData({ id: this.roleEntity.id, grantOrgIdList: checkedKeys, dataScopeType: values.dataScopeType }).then((res) => {
167               this.confirmLoading = false
168               if (res.success) {
169                 this.$message.success('授权成功')
170                 this.$emit('ok', values)
171                 this.handleCancel()
172               } else {
173                 this.$message.error('授权失败:' + res.message)
174               }
175             }).finally((res) => {
176               this.confirmLoading = false
177             })
178           } else {
179             this.confirmLoading = false
180           }
181         })
182       },
183       handleCancel () {
184         this.form.resetFields()
185         // 清空已选择的
186         this.checkedKeys = []
187         // 清空已展开的
188         this.expandedKeys = []
189         this.visible = false
190         // 隐藏机构树
191         this.orgTreeShow = false
192       }
193     }
194   }
195 </script>