Skip to content

Commit 9c44012

Browse files
sendyasendya
committed
added: permission table
1 parent 8c66abd commit 9c44012

File tree

2 files changed

+291
-0
lines changed

2 files changed

+291
-0
lines changed

‎src/router/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,12 @@ export const asyncRouterMap = [
127127
component: () => import('@/views/list/RoleList'),
128128
meta: { title: '角色列表' }
129129
},
130+
{
131+
path: '/list/permission-list',
132+
name: 'PermissionList',
133+
component: () => import('@/views/list/PermissionList'),
134+
meta: { title: '权限列表' }
135+
},
130136
{
131137
path: '/list/basic-list',
132138
name: 'BasicList',

‎src/views/list/PermissionList.vue

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
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="名称"
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+
45+
<span slot="actions" slot-scope="text, record">
46+
<a-tag v-for="(action, index) in record.actionList" :key="index">{{ action.describe }}</a-tag>
47+
</span>
48+
49+
<span slot="status" slot-scope="text">
50+
{{ text | statusFilter }}
51+
</span>
52+
53+
<span slot="action" slot-scope="text, record">
54+
<a @click="handleEdit(record)">编辑</a>
55+
<a-divider type="vertical" />
56+
<a-dropdown>
57+
<a class="ant-dropdown-link">
58+
更多 <a-icon type="down" />
59+
</a>
60+
<a-menu slot="overlay">
61+
<a-menu-item>
62+
<a href="javascript:;">详情</a>
63+
</a-menu-item>
64+
<a-menu-item>
65+
<a href="javascript:;">禁用</a>
66+
</a-menu-item>
67+
<a-menu-item>
68+
<a href="javascript:;">删除</a>
69+
</a-menu-item>
70+
</a-menu>
71+
</a-dropdown>
72+
</span>
73+
</s-table>
74+
75+
<a-modal
76+
title="操作"
77+
:width="800"
78+
v-model="visible"
79+
@ok="handleOk"
80+
>
81+
<a-form :autoFormCreate="(form)=>{this.form = form}">
82+
83+
<a-form-item
84+
:labelCol="labelCol"
85+
:wrapperCol="wrapperCol"
86+
label='唯一识别码'
87+
hasFeedback
88+
validateStatus='success'
89+
>
90+
<a-input placeholder='唯一识别码' v-model="mdl.id" id='no' disabled="disabled" />
91+
</a-form-item>
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.name" id='permission_name' />
101+
</a-form-item>
102+
103+
<a-form-item
104+
:labelCol="labelCol"
105+
:wrapperCol="wrapperCol"
106+
label='状态'
107+
hasFeedback
108+
validateStatus='warning'
109+
>
110+
<a-select v-model="mdl.status">
111+
<a-select-option value='1'>正常</a-select-option>
112+
<a-select-option value='2'>禁用</a-select-option>
113+
</a-select>
114+
</a-form-item>
115+
116+
<a-form-item
117+
:labelCol="labelCol"
118+
:wrapperCol="wrapperCol"
119+
label='描述'
120+
hasFeedback
121+
>
122+
<a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id='describe'/>
123+
</a-form-item>
124+
125+
<a-divider />
126+
127+
<a-form-item
128+
:labelCol="labelCol"
129+
:wrapperCol="wrapperCol"
130+
label='赋予权限'
131+
hasFeedback
132+
>
133+
<a-select
134+
style="width: 100%"
135+
mode="multiple"
136+
v-model="mdl.actions"
137+
:allowClear="true"
138+
>
139+
<a-select-option v-for="(action, index) in permissionList" :key="index" :value="action.value">{{ action.label }}</a-select-option>
140+
</a-select>
141+
</a-form-item>
142+
143+
</a-form>
144+
</a-modal>
145+
146+
</a-card>
147+
</template>
148+
149+
<script>
150+
import STable from '@/components/table/'
151+
152+
export default {
153+
name: "TableList",
154+
components: {
155+
STable
156+
},
157+
data () {
158+
return {
159+
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
160+
161+
visible: false,
162+
labelCol: {
163+
xs: { span: 24 },
164+
sm: { span: 5 },
165+
},
166+
wrapperCol: {
167+
xs: { span: 24 },
168+
sm: { span: 16 },
169+
},
170+
form: null,
171+
mdl: {},
172+
173+
// 高级搜索 展开/关闭
174+
advanced: false,
175+
// 查询参数
176+
queryParam: {},
177+
// 表头
178+
columns: [
179+
{
180+
title: '唯一识别码',
181+
dataIndex: 'id'
182+
},
183+
{
184+
title: '权限名称',
185+
dataIndex: 'name',
186+
},
187+
{
188+
title: '可操作权限',
189+
dataIndex: 'actions',
190+
scopedSlots: { customRender: 'actions' },
191+
},
192+
{
193+
title: '状态',
194+
dataIndex: 'status',
195+
scopedSlots: { customRender: 'status' },
196+
},
197+
{
198+
title: '操作',
199+
width: '150px',
200+
dataIndex: 'action',
201+
scopedSlots: { customRender: 'action' },
202+
}
203+
],
204+
// 向后端拉取可以用的操作列表
205+
permissionList: null,
206+
// 加载数据方法 必须为 Promise 对象
207+
loadData: parameter => {
208+
return this.$http.get('/permission', {
209+
params: Object.assign(parameter, this.queryParam)
210+
}).then(res => {
211+
let result = res.result
212+
result.data.map(permission => {
213+
permission.actionList = JSON.parse(permission.actionData)
214+
return permission
215+
})
216+
return result
217+
})
218+
},
219+
220+
selectedRowKeys: [],
221+
selectedRows: []
222+
}
223+
},
224+
filters: {
225+
statusFilter(status) {
226+
const statusMap = {
227+
1: '正常',
228+
2: '禁用'
229+
}
230+
return statusMap[status]
231+
}
232+
},
233+
created () {
234+
this.loadPermissionList()
235+
},
236+
methods: {
237+
loadPermissionList () {
238+
// permissionList
239+
new Promise((resolve => {
240+
const data = [
241+
{ label: '新增', value: 'add', defaultChecked: false },
242+
{ label: '查询', value: 'get', defaultChecked: false },
243+
{ label: '修改', value: 'update', defaultChecked: false },
244+
{ label: '列表', value: 'query', defaultChecked: false },
245+
{ label: '删除', value: 'delete', defaultChecked: false },
246+
{ label: '导入', value: 'import', defaultChecked: false },
247+
{ label: '导出', value: 'export', defaultChecked: false }
248+
]
249+
setTimeout(resolve(data), 1500)
250+
})).then(res => {
251+
this.permissionList = res
252+
})
253+
},
254+
handleEdit (record) {
255+
this.mdl = Object.assign({}, record)
256+
console.log(this.mdl)
257+
this.visible = true
258+
},
259+
handleOk () {
260+
261+
},
262+
onChange (selectedRowKeys, selectedRows) {
263+
this.selectedRowKeys = selectedRowKeys
264+
this.selectedRows = selectedRows
265+
},
266+
toggleAdvanced () {
267+
this.advanced = !this.advanced
268+
},
269+
},
270+
watch: {
271+
/*
272+
'selectedRows': function (selectedRows) {
273+
this.needTotalList = this.needTotalList.map(item => {
274+
return {
275+
...item,
276+
total: selectedRows.reduce( (sum, val) => {
277+
return sum + val[item.dataIndex]
278+
}, 0)
279+
}
280+
})
281+
}
282+
*/
283+
}
284+
}
285+
</script>

0 commit comments

Comments
 (0)