查看 | 历史 | 提交 | 提交对比
liweilong
2020-12-16 7661a83ac24a39e84641438bac89cc24efe1561e
提交 | 用户 | 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: 'RoleAdd',
37   data() {
38     return {
39       mData: {
40         isUse: 1, // 是否启用
41         name: '' // 角色名称
42       },
43       authorityGroups: [], // 权限选项
44       // 表单校验
45       rules: {
46         name: [
47           { required: true, message: '角色名称不能为空', trigger: 'change' }
48         ]
49       }
50     }
51   },
52   computed: {
53     // 已选中的权限id
54     authIds() {
55       const arr = []
56       this.authorityGroups.forEach(item => {
57         item.authoritys.forEach(auth => {
58           if (auth.active) {
59             arr.push(auth.id)
60           }
61         })
62       })
63       return arr
64     }
65   },
66   mounted() {
67     this.init()
68   },
69   methods: {
70     init() {
71       this.getAuthData()
72     },
73
74     jumpBack() {
75       this.$router.go(-1)
76     },
77
78     // 获取权限数组
79     getAuthData() {
80       this.postFN({
81         url: 'admin/role/add/page',
82         mockData: {
83           code: 100, msg: '',
84           data: {
85             'authorityGroups': [
86               {
87                 'name': '分类1',
88                 'authoritys': [
89                   {
90                     'name': '权限1',
91                     'id': '1'
92                   }
93                 ]
94               }, {
95                 'name': '分类2',
96                 'authoritys': [
97                   {
98                     'name': '权限21',
99                     'id': '21'
100                   }, {
101                     'name': '权限22',
102                     'id': '22'
103                   }
104                 ]
105               }
106             ]
107           }
108         }
109       }, (inf) => {
110         this.authorityGroups = inf.authorityGroups
111       })
112     },
113
114     // 选中权限
115     // @param idx1 一级
116     // @param idx2 二级
117     chooseAuth(idx1, idx2) {
118       const value = this.authorityGroups[idx1].authoritys[idx2].active
119       this.$set(this.authorityGroups[idx1].authoritys[idx2], 'active', !value)
120       // 处理全选
121       this.$set(this.authorityGroups[idx1], 'checked', this.checkAllChecked(this.authorityGroups[idx1].authoritys))
122     },
123
124     // 检查数组是否全部已选
125     checkAllChecked(arr) {
126       let flag = true
127       arr.find(item => {
128         if (!item.active) {
129           flag = false
130           return true
131         }
132       })
133       return flag
134     },
135
136     // 点击全选
137     chooseAll(index) {
138       var value = this.authorityGroups[index].checked
139       this.authorityGroups[index].authoritys.forEach((item, idx2) => {
140         this.$set(this.authorityGroups[index].authoritys[idx2], 'active', value)
141       })
142     },
143
144     submit() {
145       this.$refs['roleAddForm'].validate(valid => {
146         if (valid) {
147           var { mData, authIds } = this
148           var params = {
149             name: mData.name,
150             isUse: mData.isUse,
151             authIds: JSON.stringify(authIds)
152           }
153
154           this.postFN({
155             url: 'admin/role/add',
156             params: params,
157             mockData: {
158               code: 100,
159               msg: '',
160               data: {}
161             }
162           }, () => {
163             this.$messageSuc('保存成功')
164             this.jumpBack()
165           })
166         }
167       })
168     }
169   }
170 }
171 </script>
172
173 <style lang="scss" scoped>
174 .role-list{
175   .item{
176     cursor: pointer;
177     margin: 6px 15px 6px 0;
178     .name{
179       color: #fff;
180       background: #ccc;
181       text-align: center;
182       height: 26px;
183       line-height: 26px;
184       padding: 0 12px;
185       font-size: 14px;
186     }
187     .el-icon-check{
188       color: #fff;
189       font-size: 20px;
190       border: 1px solid #ccc;
191       text-align: center;
192       display: block;
193       line-height: 24px;
194       height: 24px;
195       width: 24px;
196       box-sizing: content-box;
197     }
198
199     &:hover{
200       .name {
201         background: #999;
202       }
203       .el-icon-check{
204         color: #999;
205       }
206     }
207   }
208   .active, .active:hover{
209     .name{
210       // background: $blue;
211       background: #999;
212     }
213     .el-icon-check{
214       // color: $blue;
215       color: #999;
216     }
217   }
218 }
219 </style>