liweilong
2020-12-23 48265831b23a469c375bb97099deaf584444a0a2
提交 | 用户 | age
2a61f6 1 <template>
L 2   <div class="app-container">
3     <el-form ref="roleAddForm" label-position="left" :model="mData" label-width="150px" :rules="rules">
4       <el-form-item label="角色名称:" prop="name">
5         <el-input v-model="mData.name" placeholder="请输入名称" class="com-edit-input" />
6       </el-form-item>
7       <el-form-item label="是否启用:">
8         <el-switch v-model="mData.isUse" :active-value="1" :inactive-value="0" />
9       </el-form-item>
10       <el-form-item label="权限选择:">
11         <div v-for="(item, index) in authorityGroups" :key="index" class="flex">
12           <div style="min-width: 140px">
13             <el-checkbox v-model="item.checked" @change="chooseAll(index)">{{ item.name }}:</el-checkbox>
14           </div>
15           <div class="flex flex-ver flex-wrap role-list">
16             <div v-for="(auth, a_idx) in item.authoritys" :key="a_idx" class="item flex" :class="{active: auth.active}" @click="chooseAuth(index, a_idx)">
17               <div class="name">{{ auth.name }}</div>
18               <i class="el-icon-check" />
19             </div>
20           </div>
21         </div>
22       </el-form-item>
23     </el-form>
24
25     <div class="com-edit-bottom-btns flex flex-align-center">
26       <el-button size="mini" @click="jumpBack">取消</el-button>
27       <el-button type="primary" size="mini" @click="submit">提交</el-button>
28     </div>
29
30   </div>
31 </template>
32
33 <script>
34
35 export default {
36   name: 'RoleEdit',
37   data() {
38     return {
39       id: '',
40       mData: {
41         isUse: 1, // 是否启用
42         name: '' // 角色名称
43       },
44       authorityGroups: [], // 权限选项
45       // 表单校验
46       rules: {
47         name: [
48           { required: true, message: '角色名称不能为空', trigger: 'change' }
49         ]
50       }
51     }
52   },
53   computed: {
54     // 已选中的权限id
55     authIds() {
56       const arr = []
57       this.authorityGroups.forEach(item => {
58         item.authoritys.forEach(auth => {
59           if (auth.active) {
60             arr.push(auth.id)
61           }
62         })
63       })
64       return arr
65     }
66   },
67   mounted() {
68     this.init()
69   },
70   methods: {
71     init() {
72       this.id = this.$route.query.id || ''
73       this.getRoleData()
74     },
75
76     jumpBack() {
77       this.$router.go(-1)
78     },
79
80     // 获取角色数据
81     getRoleData() {
82       this.postFN({
83         url: 'admin/role/see',
84         params: {
85           id: this.id
86         },
87         mockData: {
88           code: 100, msg: '',
89           data: {
90             role: {
91               id: '2d23c696e84f11eab06bb8599f4cafbe',
92               isDel: 0,
93               isUse: 1,
94               name: '超级管理员'
95             },
96             'authorityGroups': [
97               {
98                 'name': '分类1',
99                 'authoritys': [
100                   {
101                     'name': '权限1',
102                     'id': '1'
103                   }
104                 ]
105               }, {
106                 'name': '分类2',
107                 'authoritys': [
108                   {
109                     'name': '权限21',
110                     'id': '21'
111                   }, {
112                     'name': '权限22',
113                     'id': '22'
114                   }
115                 ]
116               }
117             ],
118             roleAuthoritys: [{
119               sysAdAuId: '1'
120             }, {
121               sysAdAuId: '21'
122             }, {
123               sysAdAuId: '22'
124             }]
125           }
126         }
127       }, (inf) => {
128         console.log(inf)
129         // 处理权限数组
130         const arr = inf.roleAuthoritys.map((_roleAuth) => _roleAuth.sysAdAuId)
131         inf.authorityGroups.forEach(item => {
132           let flag = true
133           item.authoritys.forEach(auth => {
134             auth.active = arr.indexOf(auth.id) > -1
135             if (!auth.active) {
136               flag = false
137             }
138           })
139           item.checked = flag // 全选
140         })
141         this.authorityGroups = inf.authorityGroups
142         this.mData = inf.role
143       })
144     },
145
146     // 获取权限数组
147     getAuthData() {
148       this.postFN({
149         url: 'admin/role/add/page',
150         mockData: {
151           code: 100, msg: '',
152           data: {
153             'authorityGroups': [
154               {
155                 'name': '分类1',
156                 'authoritys': [
157                   {
158                     'name': '权限1',
159                     'id': '1'
160                   }
161                 ]
162               }, {
163                 'name': '分类2',
164                 'authoritys': [
165                   {
166                     'name': '权限21',
167                     'id': '21'
168                   }, {
169                     'name': '权限22',
170                     'id': '22'
171                   }
172                 ]
173               }
174             ]
175           }
176         }
177       }, (inf) => {
178         this.authorityGroups = inf.authorityGroups
179       })
180     },
181
182     // 选中权限
183     // @param idx1 一级
184     // @param idx2 二级
185     chooseAuth(idx1, idx2) {
186       const value = this.authorityGroups[idx1].authoritys[idx2].active
187       this.$set(this.authorityGroups[idx1].authoritys[idx2], 'active', !value)
188       // 处理全选
189       this.$set(this.authorityGroups[idx1], 'checked', this.checkAllChecked(this.authorityGroups[idx1].authoritys))
190     },
191
192     // 检查数组是否全部已选
193     checkAllChecked(arr) {
194       let flag = true
195       arr.find(item => {
196         if (!item.active) {
197           flag = false
198           return true
199         }
200       })
201       return flag
202     },
203
204     // 点击全选
205     chooseAll(index) {
206       var value = this.authorityGroups[index].checked
207       this.authorityGroups[index].authoritys.forEach((item, idx2) => {
208         this.$set(this.authorityGroups[index].authoritys[idx2], 'active', value)
209       })
210     },
211
212     submit() {
213       this.$refs['roleAddForm'].validate(valid => {
214         if (valid) {
215           var { mData, authIds } = this
216           var params = {
217             id: this.id,
218             name: mData.name,
219             isUse: mData.isUse,
220             authIds: JSON.stringify(authIds)
221           }
222
223           this.postFN({
224             url: 'admin/role/update',
225             params: params,
226             mockData: {
227               code: 100,
228               msg: '',
229               data: {}
230             }
231           }, () => {
232             this.$messageSuc('保存成功')
233             this.jumpBack()
234           })
235         }
236       })
237     }
238   }
239 }
240 </script>
241
242 <style lang="scss" scoped>
243 .role-list{
244   .item{
245     cursor: pointer;
246     margin: 6px 15px 6px 0;
247     .name{
248       color: #fff;
249       background: #ccc;
250       text-align: center;
251       height: 26px;
252       line-height: 26px;
253       padding: 0 12px;
254       font-size: 14px;
255     }
256     .el-icon-check{
257       color: #fff;
258       font-size: 20px;
259       border: 1px solid #ccc;
260       text-align: center;
261       display: block;
262       line-height: 24px;
263       height: 24px;
264       width: 24px;
265       box-sizing: content-box;
266     }
267
482658 268     // &:hover{
L 269     //   .name {
270     //     background: #999;
271     //   }
272     //   .el-icon-check{
273     //     color: #999;
274     //   }
275     // }
2a61f6 276   }
L 277   .active, .active:hover{
278     .name{
482658 279       background: #409EFF;
L 280       // background: #999;
2a61f6 281     }
L 282     .el-icon-check{
482658 283       background: #409EFF;
L 284       // background: #999;
2a61f6 285     }
L 286   }
287 }
288 </style>