Skip to content

Commit 141c0c5

Browse files
coderlwcoderlw
committed
用户角色设置完成
1 parent 3d42d2e commit 141c0c5

File tree

5 files changed

+350
-4
lines changed

5 files changed

+350
-4
lines changed

‎src/assets/css/global.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ html,body,#app {
33
height: 100%;
44
margin: 0;
55
padding: 0;
6+
min-width: 1366px;
67
}
78

89
.el-breadcrumb {

‎src/components/rights/Rights.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div>
3+
<!-- 面包屑区域 -->
4+
<el-breadcrumb separator-class="el-icon-arrow-right">
5+
<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
6+
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
7+
<el-breadcrumb-item>角色列表</el-breadcrumb-item>
8+
</el-breadcrumb>
9+
<el-card>
10+
<el-table :data="rightsList" border stripe>
11+
<el-table-column type="index"></el-table-column>
12+
<el-table-column prop="authName" label="权限名称"></el-table-column>
13+
<el-table-column prop="path" label="路径"></el-table-column>
14+
<el-table-column prop="level" label="权限管理">
15+
<template slot-scope="scope">
16+
<el-tag v-if="scope.row.level === '0'">一级</el-tag>
17+
<el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
18+
<el-tag type="warning" v-else>三级</el-tag>
19+
</template>
20+
</el-table-column>
21+
22+
</el-table>
23+
</el-card>
24+
</div>
25+
</template>
26+
27+
<script>
28+
export default {
29+
name: 'Rights',
30+
data() {
31+
return {
32+
rightsList: [],
33+
}
34+
},
35+
methods: {
36+
async getRightsList() {
37+
const { data: res } = await this.$axios.get('rights/list');
38+
if (res.meta.status !== 200) return this.$message.error('获取权限列表失败');
39+
this.rightsList = res.data;
40+
}
41+
},
42+
created() {
43+
this.getRightsList();
44+
}
45+
};
46+
</script>
47+
48+
<style scoped>
49+
</style>

‎src/components/rights/Roles.vue

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
<template>
2+
<div>
3+
<!-- 面包屑区域 -->
4+
<el-breadcrumb separator-class="el-icon-arrow-right">
5+
<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
6+
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
7+
<el-breadcrumb-item>权限列表</el-breadcrumb-item>
8+
</el-breadcrumb>
9+
<el-card>
10+
<el-row>
11+
<el-col>
12+
<el-button type='primary' @click="addDialogVisible = true">添加角色</el-button>
13+
</el-col>
14+
</el-row>
15+
<el-table :data="rolesList" border stripe>
16+
<el-table-column type="expand">
17+
<template slot-scope="scpoe">
18+
<el-row :class="['vcenter','btBorder' , index1 === 0 ? 'topBorder' :'']" v-for="(item1, index1) in scpoe.row.children" :key="item1.id">
19+
<el-col :span="5">
20+
<el-tag closable @close="removeRole(scpoe.row,item1.id)">{{item1.authName}}</el-tag>
21+
<i class="el-icon-caret-right"></i>
22+
</el-col>
23+
<el-col :span="19">
24+
<el-row :class="['vcenter','leftborder', index2 === 0 ? '' :'topBorder']" v-for="(item2, index2) in item1.children" :key="item2.id">
25+
<el-col :span="6">
26+
<el-tag closable @close="removeRole(scpoe.row,item2.id)" type="success">{{item2.authName}}</el-tag>
27+
<i class="el-icon-caret-right"></i>
28+
</el-col>
29+
<el-col :span="18">
30+
<el-tag closable @close="removeRole(scpoe.row,item3.id)" v-for="(item3) in item2.children" :key="item3.id" type="warning">{{item3.authName}}</el-tag>
31+
</el-col>
32+
</el-row>
33+
</el-col>
34+
</el-row>
35+
</template>
36+
</el-table-column>
37+
<el-table-column type="index"></el-table-column>
38+
<el-table-column prop="roleName" label="角色名称"></el-table-column>
39+
<el-table-column prop="roleDesc" label="角色描述"></el-table-column>
40+
<el-table-column label="操作" width="300px">
41+
<template slot-scope="scope">
42+
<el-button type='primary' icon="el-icon-edit" size="mini" @click="selectRole(scope.row.id)">编辑</el-button>
43+
<el-button type='danger' icon="el-icon-delete" size="mini" @click="removeUser(scope.row.id)">删除</el-button>
44+
<el-button type='warning' icon="el-icon-setting" size="mini" @click="setRightDialog(scope.row)">分配权限</el-button>
45+
</template>
46+
</el-table-column>
47+
</el-table>
48+
<!-- 添加弹窗 -->
49+
<el-dialog title="添加用户角色" :visible.sync="addDialogVisible" @close="resetForm" width="50%">
50+
<el-form :model="addForm" :rules="addRules" ref="addRef" label-width="100px">
51+
<el-form-item label="角色名称" prop="roleName">
52+
<el-input v-model="addForm.roleName"></el-input>
53+
</el-form-item>
54+
<el-form-item label="角色描述" prop="roleDesc">
55+
<el-input v-model="addForm.roleDesc"></el-input>
56+
</el-form-item>
57+
</el-form>
58+
<div slot="footer" class="dialog-footer">
59+
<el-button @click="addDialogVisible = false">取 消</el-button>
60+
<el-button type="primary" @click="addUserRoles">确 定</el-button>
61+
</div>
62+
</el-dialog>
63+
<!-- 编辑弹窗 -->
64+
<el-dialog title="编辑用角色" :visible.sync="editDialogVisible" width="50%">
65+
<el-form :model="editForm" :rules="addRules" ref="editRef" label-width="100px">
66+
<el-form-item label="角色名称" prop="roleName">
67+
<el-input v-model="editForm.roleName"></el-input>
68+
</el-form-item>
69+
<el-form-item label="角色描述" prop="roleDesc">
70+
<el-input v-model="editForm.roleDesc"></el-input>
71+
</el-form-item>
72+
</el-form>
73+
<div slot="footer" class="dialog-footer">
74+
<el-button @click="editDialogVisible = false">取 消</el-button>
75+
<el-button type="primary" @click="editUserRole">确 定</el-button>
76+
</div>
77+
</el-dialog>
78+
<el-dialog title="分配权限" :visible.sync="setRightVisible" width="50%" @close="resetTree">
79+
<el-tree :data="rightsList" :props="treeProps" ref="treeRef" node-key="id" show-checkbox default-expand-all :default-checked-keys="checkedKeys"></el-tree>
80+
<span slot="footer" class="dialog-footer">
81+
<el-button @click="setRightVisible = false">取 消</el-button>
82+
<el-button type="primary" @click="allotRights">确 定</el-button>
83+
</span>
84+
</el-dialog>
85+
</el-card>
86+
</div>
87+
</template>
88+
89+
<script>
90+
export default {
91+
name: '',
92+
data() {
93+
return {
94+
rolesList: [],
95+
addDialogVisible: false,
96+
addForm: {
97+
roleName: '',
98+
roleDesc: ''
99+
},
100+
addRules: {
101+
roleName: [
102+
{ required: true, message: '请输入角色名称', trigger: 'blur' }
103+
],
104+
roleDesc: [
105+
{ required: true, message: '请输入角色描述', trigger: 'blur' }
106+
]
107+
},
108+
editForm: {
109+
roleId: 0,
110+
roleName: '',
111+
roleDesc: ''
112+
},
113+
editDialogVisible: false,
114+
setRightVisible: false,
115+
rightsList: [],
116+
treeProps: {
117+
label: 'authName',
118+
children: 'children'
119+
},
120+
checkedKeys: [],
121+
roleId: 0
122+
}
123+
},
124+
methods: {
125+
async getRolesList() {
126+
const { data: res } = await this.$axios.get('/roles');
127+
if (res.meta.status !== 200) return this.$message.error('获取用户角色失败');
128+
this.rolesList = res.data;
129+
},
130+
resetForm() {
131+
this.$refs.addRef.resetFields();
132+
},
133+
addUserRoles(valid) {
134+
console.log(valid);
135+
this.$refs.addRef.validate(async valid => {
136+
if (!valid) return;
137+
const { data: res } = await this.$axios.post('/roles', this.addForm);
138+
if (res.meta.status !== 201) return this.$message.error('添加用户角色失败');
139+
this.addForm = res.data;
140+
this.getRolesList();
141+
this.$message.success('添加用户角色成功');
142+
this.addDialogVisible = false;
143+
})
144+
},
145+
async selectRole(roleId) {
146+
const { data: res } = await this.$axios.get('roles/' + roleId);
147+
if (res.meta.status !== 200) return this.$message.error('查询用户信息失败');
148+
this.editForm = res.data;
149+
this.editDialogVisible = true;
150+
},
151+
editUserRole() {
152+
this.$refs.editRef.validate(async valid => {
153+
if (!valid) return;
154+
const { data: res } = await this.$axios.put('roles/' + this.editForm.roleId, this.editForm);
155+
console.log(res);
156+
if (res.meta.status !== 200) return this.$message.error('编辑用户信息失败');
157+
this.getRolesList();
158+
this.$message.success('编辑用户信息成功');
159+
this.editDialogVisible = false;
160+
})
161+
},
162+
async removeUser(id) {
163+
const resComfirm = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
164+
confirmButtonText: '确定',
165+
cancelButtonText: '取消',
166+
type: 'warning'
167+
}).catch(err => err)
168+
// 成功打印 confirm、失败打印 cancel
169+
if (resComfirm === 'cancel') return this.$message.info('已取消删除');
170+
const { data: res } = await this.$axios.delete('roles/' + id);
171+
if (res.meta.status !== 200) return this.$message.error('删除失败');
172+
this.getRolesList();
173+
this.$message.success('删除成功');
174+
},
175+
async removeRole(row, roleId) {
176+
const rusult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
177+
confirmButtonText: '确定',
178+
cancelButtonText: '取消',
179+
type: 'warning'
180+
}).catch(err => err);
181+
if (rusult !== 'confirm') return this.$message.info('已取消删除')
182+
const { data: res } = await this.$axios.delete(`roles/${row.id}/rights/${roleId}`);
183+
if (res.meta.status !== 200) return this.message.error('删除角色权限失败')
184+
// this.getRolesList();
185+
row.children = res.data;
186+
this.$message.success('删除角色权限成功')
187+
},
188+
async setRightDialog(role) {
189+
this.roleId = role.id;
190+
const { data: res } = await this.$axios.get('/rights/tree');
191+
if (res.meta.status !== 200) return this.$message.error('获取用户权限失败');
192+
this.rightsList = res.data;
193+
console.log(this.rightsList);
194+
this.getLeafKeys(role, this.checkedKeys)
195+
this.setRightVisible = true;
196+
},
197+
// 递归选择已有权限
198+
getLeafKeys(node, arr) {
199+
if (!node.children) {
200+
return arr.push(node.id)
201+
}
202+
node.children.forEach(item => {
203+
this.getLeafKeys(item, arr);
204+
})
205+
},
206+
// 重置权限
207+
resetTree() {
208+
this.checkedKeys = [];
209+
},
210+
async allotRights() {
211+
const keys = [
212+
...this.$refs.treeRef.getCheckedKeys(),
213+
...this.$refs.treeRef.getHalfCheckedKeys()
214+
];
215+
const keysStr = keys.join(',');
216+
const { data: res } = await this.$axios.post('roles/' + this.roleId + '/rights', { rids: keysStr });
217+
if (res.meta.status !== 200) return this.$message.error('修改用户权限失败');
218+
this.getRolesList();
219+
this.$message.success('修改用户权限成功');
220+
this.setRightVisible = false;
221+
}
222+
223+
},
224+
created() {
225+
this.getRolesList();
226+
}
227+
};
228+
</script>
229+
230+
<style scoped>
231+
.el-tag {
232+
margin: 10px;
233+
}
234+
.vcenter {
235+
display: flex;
236+
align-items: center;
237+
}
238+
.topBorder {
239+
border-top: 1px solid #eee;
240+
}
241+
.btBorder {
242+
border-bottom: 1px solid #eee;
243+
}
244+
.leftborder {
245+
border-left: 1px solid #eee;
246+
}
247+
</style>

0 commit comments

Comments
 (0)