Skip to content

Commit 27da739

Browse files
sendyasendya
committed
add import func test view
1 parent 811b3e0 commit 27da739

File tree

3 files changed

+339
-3
lines changed

3 files changed

+339
-3
lines changed

‎src/config/router.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,12 @@ export const asyncRouterMap = [
8787
component: () => import('@/views/list/TableInnerEditList'),
8888
meta: { title: '内联编辑表格', permission: [ 'table' ] }
8989
},
90+
{
91+
path: '/list/user-list',
92+
name: 'UserList',
93+
component: () => import('@/views/list/UserList'),
94+
meta: { title: '用户列表', permission: [ 'table' ] }
95+
},
9096
{
9197
path: '/list/role-list',
9298
name: 'RoleList',

‎src/views/list/UserList.vue

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

‎src/views/user/Register.vue

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,19 @@
1111

1212
<a-form-item
1313
fieldDecoratorId="password"
14-
:fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写' }], validateTrigger: 'blur'}">
15-
16-
<a-input size="large" type="password" placeholder="至少6位密码，区分大小写"></a-input>
14+
:fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordLevel }], validateTrigger: 'change'}">
15+
<a-popover placement="right">
16+
<template slot="content">
17+
<div :style="{ width: '240px' }">
18+
<div :class="['user-register', getPasswordLevelClass()]">强度：<span>低</span></div>
19+
<a-progress :percent="30" :showInfo="false" strokeColor="#FF0000" />
20+
<div style="margin-top: 10px;">
21+
<span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
22+
</div>
23+
</div>
24+
</template>
25+
<a-input size="large" type="password" placeholder="至少6位密码，区分大小写"></a-input>
26+
</a-popover>
1727
</a-form-item>
1828

1929
<a-form-item
@@ -87,12 +97,36 @@
8797
state: {
8898
time: 60,
8999
smsSendBtn: false,
100+
passwordLevel: 0
90101
},
91102
registerBtn: false
92103
}
93104
},
94105
methods: {
95106
107+
handlePasswordLevel (rule, value, callback) {
108+
let level = 0
109+
110+
// 判断这个字符串中有没有数字
111+
if (/[0-9]/.test(value)) {
112+
level++
113+
}
114+
// 判断字符串中有没有字母
115+
if (/[a-zA-Z]/.test(value)) {
116+
level++
117+
}
118+
// 判断字符串中有没有特殊符号
119+
if (/[^0-9a-zA-Z_]/.test(value)) {
120+
level++
121+
}
122+
this.state.passwordLevel = level
123+
if (level >= 2) {
124+
callback()
125+
} else {
126+
callback(new Error('密码强度不够'))
127+
}
128+
},
129+
96130
handlePasswordCheck (rule, value, callback) {
97131
let password = this.form.getFieldValue('password')
98132
if (value && password && value.trim() !== password.trim()) {
@@ -109,6 +143,16 @@
109143
})
110144
},
111145
146+
getPasswordLevelClass () {
147+
const c = {
148+
0: 'error',
149+
1: 'error',
150+
2: 'warning',
151+
3: 'success'
152+
}
153+
return c[this.state.passwordLevel]
154+
},
155+
112156
getCaptcha(e) {
113157
e.preventDefault()
114158
let that = this
@@ -154,10 +198,30 @@
154198
});
155199
this.registerBtn = false;
156200
},
201+
},
202+
watch: {
203+
'state.passwordLevel' (val) {
204+
205+
}
157206
}
158207
}
159208
</script>
209+
<style lang="scss">
210+
.user-register {
160211
212+
&.error {
213+
color: #ff0000;
214+
}
215+
216+
&.warning {
217+
color: #ff7e05;
218+
}
219+
220+
&.success {
221+
color: #52c41a;
222+
}
223+
}
224+
</style>
161225
<style lang="scss" scoped>
162226
.user-layout-register {
163227
@@ -166,6 +230,8 @@
166230
margin-bottom: 20px;
167231
}
168232
233+
234+
169235
.getCaptcha {
170236
display: block;
171237
width: 100%;

0 commit comments

Comments
 (0)