Skip to content

Commit a3153c5

Browse files
jesHrzjesHrz
authored
refactor: email field's biz in user module (#44)
* refactor: set email field as unnecessary * feat: add banThirdParty and banEmailUpdate * feat: search user by any key * fix: add select transfer * fix: record searchKey in url * update gitignore * fix: get searchKey from variable, not router query params
1 parent 1294ebb commit a3153c5

File tree

4 files changed

+131
-79
lines changed

4 files changed

+131
-79
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.DS_Store
22
node_modules
33
/dist
4+
dist.zip
45

56
# local env files
67
.env.local

‎public/excel/user.xlsx‎

14 Bytes
Binary file not shown.

‎src/components/mixins/excel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default {
2121
if (isLt1M) {
2222
return true;
2323
}
24-
this.$Message.warn('Please do not upload files larger than 1m in size.');
24+
this.$Message.warn('Please do not upload files larger than 1MB.');
2525
return false;
2626
},
2727
handleSuccess: function({ results, header }) {

‎src/views/user/UserView.vue‎

Lines changed: 129 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<template>
22
<div>
33
<Card dis-hover title="User">
4+
<Input slot="extra"
5+
search
6+
enter-button
7+
style="width: 280px"
8+
@on-search="searchUser"/>
49
<Table
510
:columns="userTableColumns"
611
:data="userTableData"
@@ -49,37 +54,47 @@
4954
:loading="loading"
5055
@on-ok="commitUserInfo">
5156
<Form :model="userInfo" :rules="userInfoRule" ref="userInfoModal">
52-
<FormItem label="Nickname" prop="nickname">
53-
<Input v-model="userInfo.nickname" :placeholder="userInfo.nickname" />
54-
</FormItem>
57+
<Tabs v-model="tabName" :animated="false">
58+
<TabPane :label="tabLabels.profile" name="profile">
59+
<FormItem label="Nickname" prop="nickname">
60+
<Input v-model="userInfo.nickname" :placeholder="userInfo.nickname" />
61+
</FormItem>
5562

56-
<FormItem label="Sex" prop="gender">
57-
<RadioGroup v-model="userInfo.gender">
58-
<Radio :label='1'><Icon type="md-male"/></Radio>
59-
<Radio :label='0'><Icon type="md-female"/></Radio>
60-
<Radio :label='2'><Icon type="md-help"/></Radio>
61-
</RadioGroup>
62-
</FormItem>
63+
<FormItem label="Sex" prop="gender">
64+
<RadioGroup v-model="userInfo.gender">
65+
<Radio :label='1'><Icon type="md-male"/></Radio>
66+
<Radio :label='0'><Icon type="md-female"/></Radio>
67+
<Radio :label='2'><Icon type="md-help"/></Radio>
68+
</RadioGroup>
69+
</FormItem>
6370

64-
<FormItem label="Student ID" prop="studentId">
65-
<Input v-model="userInfo.studentId" :placeholder="userInfo.studentId" />
66-
</FormItem>
71+
<FormItem label="Student ID" prop="studentId">
72+
<Input v-model="userInfo.studentId" />
73+
</FormItem>
6774

68-
<FormItem label="Phone" prop="phone">
69-
<Input v-model="userInfo.phone" :placeholder="userInfo.phone" />
70-
</FormItem>
75+
<FormItem label="Phone" prop="phone">
76+
<Input v-model="userInfo.phone" />
77+
</FormItem>
7178

72-
<FormItem label="Email" prop="email">
73-
<Input v-model="userInfo.email" :placeholder="userInfo.email" />
74-
</FormItem>
79+
<FormItem label="Email" prop="email">
80+
<Input v-model="userInfo.email" />
81+
</FormItem>
7582

76-
<FormItem label="Role">
77-
<Select v-model="userInfo.roles" multiple>
78-
<Option value="user">user</Option>
79-
<Option value="admin">admin</Option>
80-
<Option value="superadmin">superadmin</Option>
81-
</Select>
82-
</FormItem>
83+
<FormItem label="Role">
84+
<Select v-model="userInfo.roles" multiple transfer>
85+
<Option value="superadmin">superadmin</Option>
86+
<Option value="admin">admin</Option>
87+
<Option value="user">user</Option>
88+
</Select>
89+
</FormItem>
90+
</TabPane>
91+
<TabPane :label="tabLabels.features" name="features">
92+
<FormItem>
93+
<Checkbox v-model="userInfo.features.banThirdParty" :true-value="1" :false-value="0">Disable Third Party Login</Checkbox>
94+
<Checkbox v-model="userInfo.features.banEmailUpdate" :true-value="1" :false-value="0">Disable Email Update</Checkbox>
95+
</FormItem>
96+
</TabPane>
97+
</Tabs>
8398
</Form>
8499
</Modal>
85100
<!-- 用户信息修改框 -->
@@ -90,7 +105,7 @@
90105
title="Password"
91106
:loading="loading"
92107
@on-ok="commitUserPassword">
93-
<Form ref="passwdForm" :model="userInfo" :rules="userInfoRule" :label-width="80">
108+
<Form ref="passwdForm" :model="userInfo" :rules="userInfoRule">
94109
<FormItem label="Username">
95110
<span>{{ userInfo.username }}</span>
96111
</FormItem>
@@ -113,52 +128,59 @@
113128
:loading="loading"
114129
@on-ok="commitAddUser">
115130
<Form ref="addUserModal" :model="userInfo" :rules="userInfoRule">
116-
<FormItem label="Username" prop="username">
117-
<Input v-model="userInfo.username" />
118-
</FormItem>
131+
<Tabs v-model="tabName" :animated="false">
132+
<TabPane :label="tabLabels.profile" name="profile">
133+
<FormItem label="Username" prop="username">
134+
<Input v-model="userInfo.username" />
135+
</FormItem>
119136

120-
<FormItem label="Nickname" prop="nickname">
121-
<Input v-model="userInfo.nickname" />
122-
</FormItem>
137+
<FormItem label="Nickname" prop="nickname">
138+
<Input v-model="userInfo.nickname" />
139+
</FormItem>
123140

124-
<FormItem label="Sex" prop="gender">
125-
<RadioGroup v-model="userInfo.gender">
126-
<Radio :label="1"><Icon type="md-male"/></Radio>
127-
<Radio :label="0"><Icon type="md-female"/></Radio>
128-
<Radio :label="2"><Icon type="md-help"/></Radio>
129-
</RadioGroup>
130-
</FormItem>
141+
<FormItem label="Sex" prop="gender">
142+
<RadioGroup v-model="userInfo.gender">
143+
<Radio :label="1"><Icon type="md-male"/></Radio>
144+
<Radio :label="0"><Icon type="md-female"/></Radio>
145+
<Radio :label="2"><Icon type="md-help"/></Radio>
146+
</RadioGroup>
147+
</FormItem>
131148

132-
<FormItem label="Student ID" prop="studentId">
133-
<Input v-model="userInfo.studentId" />
134-
</FormItem>
149+
<FormItem label="Student ID" prop="studentId">
150+
<Input v-model="userInfo.studentId" />
151+
</FormItem>
135152

136-
<FormItem label="Phone" prop="phone">
137-
<Input v-model="userInfo.phone" />
138-
</FormItem>
153+
<FormItem label="Phone" prop="phone">
154+
<Input v-model="userInfo.phone" />
155+
</FormItem>
139156

140-
<FormItem label="Email" prop="email">
141-
<Input v-model="userInfo.email" />
142-
</FormItem>
143-
<FormItem label="Email Verify" prop="email">
144-
<i-switch v-model="userInfo.emailVerified" :true-value="1" :false-value="0" />
145-
</FormItem>
157+
<FormItem label="Email" prop="email">
158+
<Input v-model="userInfo.email" />
159+
</FormItem>
146160

147-
<FormItem label="Role">
148-
<Select v-model="userInfo.roles" multiple>
149-
<Option value="user">user</Option>
150-
<Option value="admin">admin</Option>
151-
<Option value="superadmin">superadmin</Option>
152-
</Select>
153-
</FormItem>
161+
<FormItem label="Role">
162+
<Select v-model="userInfo.roles" multiple transfer>
163+
<Option value="superadmin">superadmin</Option>
164+
<Option value="admin">admin</Option>
165+
<Option value="user">user</Option>
166+
</Select>
167+
</FormItem>
154168

155-
<FormItem label="Password" prop="password">
156-
<Input type="password" v-model="userInfo.password" />
157-
</FormItem>
169+
<FormItem label="Password" prop="password">
170+
<Input type="password" v-model="userInfo.password" />
171+
</FormItem>
158172

159-
<FormItem label="Confirm Password" prop="passwordCheck">
160-
<Input type="password" v-model="userInfo.passwordCheck" />
161-
</FormItem>
173+
<FormItem label="Confirm Password" prop="passwordCheck">
174+
<Input type="password" v-model="userInfo.passwordCheck" />
175+
</FormItem>
176+
</TabPane>
177+
<TabPane :label="tabLabels.features" name="features">
178+
<FormItem>
179+
<Checkbox v-model="userInfo.features.banThirdParty" :true-value="1" :false-value="0">Disable Third Party Login</Checkbox>
180+
<Checkbox v-model="userInfo.features.banEmailUpdate" :true-value="1" :false-value="0">Disable Email Update</Checkbox>
181+
</FormItem>
182+
</TabPane>
183+
</Tabs>
162184
</Form>
163185
</Modal>
164186
<!-- 添加用户模态框 -->
@@ -207,11 +229,12 @@ export default {
207229
return {
208230
userTableColumns: [
209231
{ type: 'selection', width: 60, align: 'center' },
210-
{ key: 'userId' },
232+
{ key: 'userId', maxWidth: 80 },
211233
{ title: 'Username', key: 'username' },
212234
{ title: 'Nickname', key: 'nickname' },
213235
{ title: 'Sex', slot: 'gender', width: 80 },
214236
{ title: 'Student ID', key: 'studentId', sortable: 'true' },
237+
{ title: 'SDU ID', key: 'sduId', sortable: 'true' },
215238
{ title: 'Email', key: 'email' },
216239
{ title: 'Roles', slot: 'role' },
217240
{ title: '\b', slot: 'action' }
@@ -231,7 +254,6 @@ export default {
231254
{ type: 'string', pattern: /[0-9]*/, min: 11, max: 16 }
232255
],
233256
email: [
234-
{ required: true, massage: 'Email can not be empty', trigger: 'blur' },
235257
{ type: 'email', message: 'Invalid email address' }
236258
],
237259
password: [
@@ -248,14 +270,22 @@ export default {
248270
userPasswordModal: false,
249271
addUserModal: false,
250272
batchUserModal: false,
251-
userInfo: {},
273+
userInfo: {
274+
features: {}
275+
},
252276
loading: true,
253-
tableLoading: false
277+
tableLoading: false,
278+
tabLabels: {
279+
profile: 'Profile',
280+
features: 'Features'
281+
},
282+
tabName: 'profile'
254283
}
255284
},
256285
methods: {
257286
onEditUser: function(row) {
258287
this.userInfo = { ...row };
288+
this.tabName = 'profile';
259289
this.userInfoModal = true;
260290
},
261291
onChangePassword: function(row) {
@@ -275,8 +305,8 @@ export default {
275305
this.$refs.userInfoModal.validate(valid => {
276306
if (valid) {
277307
const data = { ...this.userInfo };
278-
delete this.userInfo.password;
279-
delete this.userInfo.passwordCheck;
308+
delete data.password;
309+
delete data.passwordCheck;
280310
api.updateUserInfo(data).then(_ => {
281311
this.$Message.success('Success');
282312
this.getUserList();
@@ -332,11 +362,15 @@ export default {
332362
studentId: '',
333363
phone: '',
334364
email: '',
335-
emailVerified: 1,
336365
roles: [],
366+
features: {
367+
banThirdParty: 0,
368+
banEmailUpdate: 0
369+
},
337370
password: '',
338371
passwordCheck: ''
339-
}
372+
};
373+
this.tabName = 'profile';
340374
this.addUserModal = true;
341375
},
342376
// 添加用户的确认按钮
@@ -374,9 +408,15 @@ export default {
374408
this.$Message.error('No data');
375409
} else {
376410
this.excelData.forEach(o => {
377-
o.emailVerified = parseInt(o.emailVerified) || 1;
411+
o.features = {
412+
banThirdParty: o.banThirdParty,
413+
banEmailUpdate: o.banEmailUpdate
414+
};
415+
delete o.banThirdParty;
416+
delete o.banEmailUpdate;
378417
o.gender = parseInt(o.gender) || 2;
379418
});
419+
380420
api.addUsers(this.excelData).then(_ => {
381421
this.$Message.success('Success');
382422
this.getUserList();
@@ -420,7 +460,7 @@ export default {
420460
this.$Message.error('No selected users');
421461
} else {
422462
import('_u/excel').then(excel => {
423-
const header = ['userId', 'username', 'nickname', 'email', 'phone', 'studentId', 'gender', 'emailVerified', 'roles'];
463+
const header = ['userId', 'username', 'nickname', 'email', 'phone', 'studentId', 'gender', 'roles'];
424464
const data = this.selectedUsers.map(o => {
425465
return [
426466
o.userId,
@@ -430,7 +470,6 @@ export default {
430470
o.phone.toString(),
431471
o.studentId.toString(),
432472
o.gender,
433-
o.emailVerified,
434473
(o.roles || []).join(',')
435474
];
436475
})
@@ -443,11 +482,15 @@ export default {
443482
});
444483
}
445484
},
485+
searchUser: function(searchKey) {
486+
this.searchKey = searchKey;
487+
},
446488
getUserList() {
447489
this.tableLoading = true;
448490
api.getUserList({
449491
pageNow: this.pageNow,
450-
pageSize: this.pageSize
492+
pageSize: this.pageSize,
493+
searchKey: this.searchKey
451494
}).then(ret => {
452495
this.total = parseInt(ret.totalPage) * this.pageSize;
453496
this.userTableData = ret.rows;
@@ -459,7 +502,15 @@ export default {
459502
}
460503
},
461504
computed: {
462-
USER_ROLE: () => USER_ROLE
505+
USER_ROLE: () => USER_ROLE,
506+
searchKey: {
507+
get: function() {
508+
return this.$route.query.searchKey || '';
509+
},
510+
set: function(searchKey) {
511+
this.$router.push({ query: { ...this.$route.query, searchKey } });
512+
}
513+
}
463514
},
464515
mounted: function () {
465516
this.getUserList();

0 commit comments

Comments
 (0)