Skip to content

Commit c602be3

Browse files
sendyasendya
committed
feat: add Role page
1 parent aac0b94 commit c602be3

File tree

2 files changed

+208
-0
lines changed

2 files changed

+208
-0
lines changed

‎src/config/router.config.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,21 @@ export const asyncRouterMap = [
169169
}
170170
]
171171
},
172+
{
173+
path: '/system',
174+
name: 'system',
175+
component: RouteView,
176+
redirect: '/system/role',
177+
meta: { title: '系统管理', icon: 'setting', permission: [ 'table' ] },
178+
children: [
179+
{
180+
path: '/system/role',
181+
name: 'SystemRole',
182+
component: () => import('@/views/role/RoleList'),
183+
meta: { title: '角色列表', permission: [ 'table' ]}
184+
}
185+
]
186+
},
172187

173188
// result
174189
{

‎src/views/role/RoleList.vue‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<template>
2+
<page-layout title="角色管理">
3+
<a-card :bordered="false" :style="{ height: '100%' }">
4+
<!--<a-tabs defaultActiveKey="1" tabPosition="left" size="large" :style="{ height: '400px'}" :tabBarStyle="{ textAlign: 'left' }" @prevClick="callback" @nextClick="callback">
5+
<a-tab-pane tab="管理员" key="1">Content of tab 1</a-tab-pane>
6+
<a-tab-pane tab="销售组长" key="2">Content of tab 2</a-tab-pane>
7+
<a-tab-pane tab="销售总负责人" key="3">Content of tab 3</a-tab-pane>
8+
<a-tab-pane tab="总经理" key="4">Content of tab 4</a-tab-pane>
9+
<a-tab-pane tab="普通销售" key="5">Content of tab 5</a-tab-pane>
10+
<a-tab-pane tab="客服" key="6">Content of tab 6</a-tab-pane>
11+
<a-tab-pane tab="会员" key="7">Content of tab 7</a-tab-pane>
12+
<a-tab-pane tab="增加角色" key="-1">Content of tab 7</a-tab-pane>
13+
</a-tabs>-->
14+
15+
<a-row :gutter="24">
16+
<a-col :md="4">
17+
<a-list itemLayout="vertical" :dataSource="roles">
18+
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
19+
<a-list-item-meta :style="{ marginBottom: '0' }">
20+
<span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
21+
<a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
22+
</a-list-item-meta>
23+
</a-list-item>
24+
</a-list>
25+
</a-col>
26+
<a-col :md="20">
27+
<a-row v-if="mdl.id">
28+
<a-col :span="5"><h3 style="text-align: right">角色：</h3></a-col>
29+
<a-col :span="19"><h3>{{ mdl.name }}</h3></a-col>
30+
</a-row>
31+
<a-form :form="form">
32+
<a-form-item
33+
label="唯一键"
34+
:labelCol="{ span: 5 }"
35+
:wrapperCol="{ span: 18 }"
36+
>
37+
<a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
38+
</a-form-item>
39+
40+
<a-form-item
41+
label="角色名称"
42+
:labelCol="{ span: 5 }"
43+
:wrapperCol="{ span: 18 }"
44+
>
45+
<a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
46+
</a-form-item>
47+
48+
<a-form-item
49+
label="状态"
50+
:labelCol="{ span: 5 }"
51+
:wrapperCol="{ span: 18 }"
52+
>
53+
<a-select v-decorator="[ 'status', {rules: []} ]">
54+
<a-select-option :value="1">正常</a-select-option>
55+
<a-select-option :value="2">禁用</a-select-option>
56+
</a-select>
57+
</a-form-item>
58+
59+
<a-form-item
60+
label="备注说明"
61+
:labelCol="{ span: 5 }"
62+
:wrapperCol="{ span: 18 }"
63+
>
64+
<a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
65+
</a-form-item>
66+
67+
<a-form-item
68+
label="拥有权限"
69+
:labelCol="{ span: 5 }"
70+
:wrapperCol="{ span: 18 }"
71+
>
72+
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
73+
<a-col :span="4">
74+
{{ permission.name }}：
75+
</a-col>
76+
<a-col :span="20">
77+
<a-checkbox
78+
v-if="permission.actionsOptions.length > 0"
79+
:indeterminate="permission.indeterminate"
80+
:checked="permission.checkedAll"
81+
@change="onChangeCheckAll($event, permission)">
82+
全选
83+
</a-checkbox>
84+
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
85+
</a-col>
86+
</a-row>
87+
</a-form-item>
88+
89+
</a-form>
90+
</a-col>
91+
</a-row>
92+
</a-card>
93+
</page-layout>
94+
</template>
95+
96+
<script>
97+
import PageLayout from '@/components/page/PageLayout'
98+
import { getRoleList, getPermissions } from "@/api/manage"
99+
import { actionToObject } from '@/utils/permissions'
100+
import pick from 'lodash.pick'
101+
102+
export default {
103+
name: "RoleList",
104+
components: {
105+
PageLayout
106+
},
107+
data () {
108+
return {
109+
form: this.$form.createForm(this),
110+
mdl: {},
111+
112+
roles: [],
113+
permissions: []
114+
}
115+
},
116+
created () {
117+
getRoleList().then((res) => {
118+
this.roles = res.result.data
119+
this.roles.push({
120+
id: '-1',
121+
name: '新增角色',
122+
describe: '新增一个角色'
123+
})
124+
console.log('this.roles', this.roles)
125+
})
126+
this.loadPermissions()
127+
},
128+
methods: {
129+
callback (val) {
130+
console.log(val)
131+
},
132+
133+
add () {
134+
this.edit({ id: 0 })
135+
},
136+
137+
edit (record) {
138+
this.mdl = Object.assign({}, record)
139+
// 有权限表，处理勾选
140+
if (this.mdl.permissions && this.permissions) {
141+
// 先处理要勾选的权限结构
142+
const permissionsAction = {}
143+
this.mdl.permissions.forEach(permission => {
144+
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
145+
})
146+
// 把权限表遍历一遍，设定要勾选的权限 action
147+
this.permissions.forEach(permission => {
148+
permission.selected = permissionsAction[permission.id]
149+
})
150+
}
151+
152+
this.$nextTick(() => {
153+
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
154+
})
155+
console.log('this.mdl', this.mdl)
156+
},
157+
158+
onChangeCheck (permission) {
159+
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
160+
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
161+
},
162+
onChangeCheckAll (e, permission) {
163+
Object.assign(permission, {
164+
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
165+
indeterminate: false,
166+
checkedAll: e.target.checked
167+
})
168+
},
169+
loadPermissions () {
170+
getPermissions().then(res => {
171+
let result = res.result
172+
this.permissions = result.map(permission => {
173+
const options = actionToObject(permission.actionData)
174+
permission.checkedAll = false
175+
permission.selected = []
176+
permission.indeterminate = false
177+
permission.actionsOptions = options.map(option => {
178+
return {
179+
label: option.describe,
180+
value: option.action
181+
}
182+
})
183+
return permission
184+
})
185+
})
186+
}
187+
},
188+
}
189+
</script>
190+
191+
<style scoped>
192+
193+
</style>

0 commit comments

Comments
 (0)