Skip to content

Commit 8c66abd

Browse files
sendyasendya
committed
added: role table
1 parent 8a85f1e commit 8c66abd

File tree

2 files changed

+276
-3
lines changed

2 files changed

+276
-3
lines changed

‎src/router/index.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export const asyncRouterMap = [
112112
{
113113
path: '/list/query-list',
114114
name: 'QueryList',
115-
component: () => import('../views/list/TableList'),
115+
component: () => import('@/views/list/TableList'),
116116
meta: { title: '查询表格' }
117117
},
118118
{
@@ -121,16 +121,22 @@ export const asyncRouterMap = [
121121
component: () => import('@/views/list/TableInnerEditList'),
122122
meta: { title: '内联编辑表格' }
123123
},
124+
{
125+
path: '/list/role-list',
126+
name: 'RoleList',
127+
component: () => import('@/views/list/RoleList'),
128+
meta: { title: '角色列表' }
129+
},
124130
{
125131
path: '/list/basic-list',
126132
name: 'BasicList',
127-
component: () => import('../views/list/StandardList'),
133+
component: () => import('@/views/list/StandardList'),
128134
meta: { title: '标准列表' }
129135
},
130136
{
131137
path: '/list/card',
132138
name: 'CardList',
133-
component: () => import('../views/list/CardList'),
139+
component: () => import('@/views/list/CardList'),
134140
meta: { title: '卡片列表' }
135141
},
136142
{

‎src/views/list/RoleList.vue

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<template>
2+
<a-card :bordered="false">
3+
<div>
4+
<a-form layout="horizontal">
5+
<div :class="advanced ? null : 'fold'">
6+
<a-row :gutter="48">
7+
<a-col :md="8" :sm="24">
8+
<a-form-item
9+
label="角色ID"
10+
:labelCol="{span: 5}"
11+
:wrapperCol="{span: 18, offset: 1}"
12+
>
13+
<a-input placeholder="请输入"/>
14+
</a-form-item>
15+
</a-col>
16+
<a-col :md="8" :sm="24">
17+
<a-form-item
18+
label="状态"
19+
:labelCol="{span: 5}"
20+
:wrapperCol="{span: 18, offset: 1}"
21+
>
22+
<a-select placeholder="请选择">
23+
<a-select-option value="1">正常</a-select-option>
24+
<a-select-option value="2">禁用</a-select-option>
25+
</a-select>
26+
</a-form-item>
27+
</a-col>
28+
29+
<span style="margin-top: 3px;">
30+
<a-button type="primary">查询</a-button>
31+
<a-button style="margin-left: 8px">重置</a-button>
32+
</span>
33+
</a-row>
34+
35+
</div>
36+
</a-form>
37+
</div>
38+
39+
<s-table
40+
size="default"
41+
:columns="columns"
42+
:data="loadData"
43+
>
44+
<div
45+
slot="expandedRowRender"
46+
slot-scope="record"
47+
style="margin: 0">
48+
<a-row
49+
:gutter="24"
50+
:style="{ marginBottom: '12px' }">
51+
<a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
52+
<a-col :span="4">
53+
<span>{{ role.permissionName }}：</span>
54+
</a-col>
55+
<a-col :span="20" v-if="role.actionEntitySet.length > 0">
56+
<a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
57+
</a-col>
58+
<a-col :span="20" v-else>-</a-col>
59+
</a-col>
60+
</a-row>
61+
</div>
62+
<span slot="action" slot-scope="text, record">
63+
<a @click="handleEdit(record)">编辑</a>
64+
<a-divider type="vertical" />
65+
<a-dropdown>
66+
<a class="ant-dropdown-link">
67+
更多 <a-icon type="down" />
68+
</a>
69+
<a-menu slot="overlay">
70+
<a-menu-item>
71+
<a href="javascript:;">详情</a>
72+
</a-menu-item>
73+
<a-menu-item>
74+
<a href="javascript:;">禁用</a>
75+
</a-menu-item>
76+
<a-menu-item>
77+
<a href="javascript:;">删除</a>
78+
</a-menu-item>
79+
</a-menu>
80+
</a-dropdown>
81+
</span>
82+
</s-table>
83+
84+
<a-modal
85+
title="操作"
86+
style="top: 20px;"
87+
:width="800"
88+
v-model="visible"
89+
@ok="handleOk"
90+
>
91+
<a-form :autoFormCreate="(form)=>{this.form = form}">
92+
93+
<a-form-item
94+
:labelCol="labelCol"
95+
:wrapperCol="wrapperCol"
96+
label='唯一识别码'
97+
hasFeedback
98+
validateStatus='success'
99+
>
100+
<a-input placeholder='唯一识别码' v-model="mdl.id" id='no' disabled="disabled" />
101+
</a-form-item>
102+
103+
<a-form-item
104+
:labelCol="labelCol"
105+
:wrapperCol="wrapperCol"
106+
label='角色名称'
107+
hasFeedback
108+
validateStatus='success'
109+
>
110+
<a-input placeholder='起一个名字' v-model="mdl.name" id='role_name' />
111+
</a-form-item>
112+
113+
<a-form-item
114+
:labelCol="labelCol"
115+
:wrapperCol="wrapperCol"
116+
label='状态'
117+
hasFeedback
118+
validateStatus='warning'
119+
>
120+
<a-select v-model="mdl.status">
121+
<a-select-option value='1'>正常</a-select-option>
122+
<a-select-option value='2'>禁用</a-select-option>
123+
</a-select>
124+
</a-form-item>
125+
126+
<a-form-item
127+
:labelCol="labelCol"
128+
:wrapperCol="wrapperCol"
129+
label='描述'
130+
hasFeedback
131+
>
132+
<a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id='describe'/>
133+
</a-form-item>
134+
135+
<a-divider />
136+
137+
<a-form-item
138+
:labelCol="labelCol"
139+
:wrapperCol="wrapperCol"
140+
label='拥有权限'
141+
hasFeedback
142+
>
143+
<a-row :gutter="16">
144+
<template v-for="(permission, index) in mdl.permissions">
145+
<a-col :span="4">
146+
{{ permission.permissionName }}：
147+
</a-col>
148+
<a-col :span="20">
149+
<a-checkbox-group :options="permission.actionsOptions"/>
150+
</a-col>
151+
</template>
152+
</a-row>
153+
154+
</a-form-item>
155+
156+
</a-form>
157+
</a-modal>
158+
159+
</a-card>
160+
</template>
161+
162+
<script>
163+
import STable from '@/components/table/'
164+
165+
export default {
166+
name: "TableList",
167+
components: {
168+
STable
169+
},
170+
data () {
171+
return {
172+
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
173+
174+
visible: false,
175+
labelCol: {
176+
xs: { span: 24 },
177+
sm: { span: 5 },
178+
},
179+
wrapperCol: {
180+
xs: { span: 24 },
181+
sm: { span: 16 },
182+
},
183+
form: null,
184+
mdl: {},
185+
186+
// 高级搜索 展开/关闭
187+
advanced: false,
188+
// 查询参数
189+
queryParam: {},
190+
// 表头
191+
columns: [
192+
{
193+
title: '唯一识别码',
194+
dataIndex: 'id'
195+
},
196+
{
197+
title: '角色名称',
198+
dataIndex: 'name',
199+
},
200+
{
201+
title: '状态',
202+
dataIndex: 'status'
203+
},
204+
{
205+
title: '创建时间',
206+
dataIndex: 'createTime',
207+
sorter: true
208+
}, {
209+
title: '操作',
210+
width: '150px',
211+
dataIndex: 'action',
212+
scopedSlots: { customRender: 'action' },
213+
}
214+
],
215+
// 加载数据方法 必须为 Promise 对象
216+
loadData: parameter => {
217+
return this.$http.get('/role', {
218+
params: Object.assign(parameter, this.queryParam)
219+
}).then(res => {
220+
return res.result
221+
})
222+
},
223+
224+
selectedRowKeys: [],
225+
selectedRows: []
226+
}
227+
},
228+
methods: {
229+
handleEdit (record) {
230+
this.mdl = Object.assign({}, record)
231+
232+
this.mdl.permissions.forEach(permission => {
233+
permission.actionsOptions = permission.actionEntitySet.map(action => {
234+
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
235+
})
236+
})
237+
238+
console.log(this.mdl)
239+
this.visible = true
240+
},
241+
handleOk () {
242+
243+
},
244+
onChange (selectedRowKeys, selectedRows) {
245+
this.selectedRowKeys = selectedRowKeys
246+
this.selectedRows = selectedRows
247+
},
248+
toggleAdvanced () {
249+
this.advanced = !this.advanced
250+
},
251+
},
252+
watch: {
253+
/*
254+
'selectedRows': function (selectedRows) {
255+
this.needTotalList = this.needTotalList.map(item => {
256+
return {
257+
...item,
258+
total: selectedRows.reduce( (sum, val) => {
259+
return sum + val[item.dataIndex]
260+
}, 0)
261+
}
262+
})
263+
}
264+
*/
265+
}
266+
}
267+
</script>

0 commit comments

Comments
 (0)