查看 | 历史 | 提交 | 提交对比
long
2021-10-11 5eac3437002b58f9d1f387c3ca8f599a548f681d
提交 | 用户 | age
2a61f6 1 <template>
L 2   <div class="app-container">
a12059 3     <el-page-header class="mb20" @back="jumpBack" />
36b711 4     <el-form ref="roleAddForm" label-position="left" :model="mData" label-width="150px" :rules="rules" size="small">
2a61f6 5       <el-form-item label="角色名称：" prop="name">
36b711 6         <el-input v-model="mData.name" placeholder="请输入名称" maxlength="50" class="com-edit-input" />
2a61f6 7       </el-form-item>
L 8       <el-form-item label="是否启用：">
9         <el-switch v-model="mData.isUse" :active-value="1" :inactive-value="0" />
10       </el-form-item>
11       <el-form-item label="权限选择：">
12         <div v-for="(item, index) in authorityGroups" :key="index" class="flex">
13           <div style="min-width: 140px">
14             <el-checkbox v-model="item.checked" @change="chooseAll(index)">{{ item.name }}：</el-checkbox>
15           </div>
16           <div class="flex flex-ver flex-wrap role-list">
17             <div v-for="(auth, a_idx) in item.authoritys" :key="a_idx" class="item flex" :class="{active: auth.active}" @click="chooseAuth(index, a_idx)">
18               <div class="name">{{ auth.name }}</div>
19               <i class="el-icon-check" />
20             </div>
21           </div>
22         </div>
23       </el-form-item>
24     </el-form>
25
26     <div class="com-edit-bottom-btns flex flex-align-center">
27       <el-button size="mini" @click="jumpBack">取消</el-button>
28       <el-button type="primary" size="mini" @click="submit">提交</el-button>
29     </div>
30
31   </div>
32 </template>
33
34 <script>
35
36 export default {
37   name: 'RoleAdd',
38   data() {
39     return {
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.getAuthData()
73     },
74
75     jumpBack() {
76       this.$router.go(-1)
77     },
78
79     // 获取权限数组
80     getAuthData() {
81       this.postFN({
82         url: 'admin/role/add/page',
83         mockData: {
84           code: 100, msg: '',
85           data: {
86             'authorityGroups': [
87               {
88                 'name': '分类1',
89                 'authoritys': [
90                   {
91                     'name': '权限1',
92                     'id': '1'
93                   }
94                 ]
95               }, {
96                 'name': '分类2',
97                 'authoritys': [
98                   {
99                     'name': '权限21',
100                     'id': '21'
101                   }, {
102                     'name': '权限22',
103                     'id': '22'
104                   }
105                 ]
106               }
107             ]
108           }
109         }
110       }, (inf) => {
111         this.authorityGroups = inf.authorityGroups
112       })
113     },
114
115     // 选中权限
116     // @param idx1 一级
117     // @param idx2 二级
118     chooseAuth(idx1, idx2) {
119       const value = this.authorityGroups[idx1].authoritys[idx2].active
120       this.$set(this.authorityGroups[idx1].authoritys[idx2], 'active', !value)
121       // 处理全选
122       this.$set(this.authorityGroups[idx1], 'checked', this.checkAllChecked(this.authorityGroups[idx1].authoritys))
123     },
124
125     // 检查数组是否全部已选
126     checkAllChecked(arr) {
127       let flag = true
128       arr.find(item => {
129         if (!item.active) {
130           flag = false
131           return true
132         }
133       })
134       return flag
135     },
136
137     // 点击全选
138     chooseAll(index) {
139       var value = this.authorityGroups[index].checked
140       this.authorityGroups[index].authoritys.forEach((item, idx2) => {
141         this.$set(this.authorityGroups[index].authoritys[idx2], 'active', value)
142       })
143     },
144
145     submit() {
146       this.$refs['roleAddForm'].validate(valid => {
147         if (valid) {
148           var { mData, authIds } = this
149           var params = {
150             name: mData.name,
151             isUse: mData.isUse,
152             authIds: JSON.stringify(authIds)
153           }
154
155           this.postFN({
156             url: 'admin/role/add',
157             params: params,
158             mockData: {
159               code: 100,
160               msg: '',
161               data: {}
162             }
163           }, () => {
164             this.$messageSuc('保存成功')
165             this.jumpBack()
166           })
167         }
168       })
169     }
170   }
171 }
172 </script>
173
174 <style lang="scss" scoped>
175 .role-list{
176   .item{
177     cursor: pointer;
178     margin: 6px 15px 6px 0;
179     .name{
180       color: #fff;
181       background: #ccc;
182       text-align: center;
183       height: 26px;
184       line-height: 26px;
185       padding: 0 12px;
186       font-size: 14px;
187     }
188     .el-icon-check{
189       color: #fff;
190       font-size: 20px;
191       border: 1px solid #ccc;
192       text-align: center;
193       display: block;
194       line-height: 24px;
195       height: 24px;
196       width: 24px;
197       box-sizing: content-box;
198     }
199
482658 200     // &:hover{
L 201     //   .name {
202     //     background: #999;
203     //   }
204     //   .el-icon-check{
205     //     color: #999;
206     //   }
207     // }
2a61f6 208   }
L 209   .active, .active:hover{
210     .name{
482658 211       background: #409EFF;
L 212       // background: #999;
2a61f6 213     }
L 214     .el-icon-check{
482658 215       background: #409EFF;
L 216       // background: #999;
2a61f6 217     }
L 218   }
219 }
220 </style>