Skip to content

Commit 26d2b3c

Browse files
uncleLianuncleLian
committed
v2.3.0
1、修改user-select组件（完成） 2、优化element-ui体积（完成） 3、tagView已存在tag进行替换、并修改logout方法（完成） 4、登录页增加loading样式（完成） 5、增加个人信息、修改密码（完成） 6、修复拖拽示例路由bug
1 parent 6b9e990 commit 26d2b3c

File tree

14 files changed

+236
-12565
lines changed

14 files changed

+236
-12565
lines changed

‎babel.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,14 @@ module.exports = {
22
presets: [
33
'@vue/app',
44
'@vue/babel-preset-jsx'
5+
],
6+
plugins: [
7+
[
8+
'component',
9+
{
10+
'libraryName': 'element-ui',
11+
'styleLibraryName': 'theme-chalk'
12+
}
13+
]
514
]
615
}

‎package-lock.json

-12,536
This file was deleted.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-blog",
3-
"version": "2.2.0",
3+
"version": "2.3.0",
44
"private": true,
55
"scripts": {
66
"dev": "vue-cli-service serve",
@@ -42,6 +42,7 @@
4242
"@vue/cli-service": "^3.5.0",
4343
"@vue/eslint-config-standard": "^4.0.0",
4444
"babel-eslint": "^10.0.1",
45+
"babel-plugin-component": "^1.1.1",
4546
"eslint": "^5.8.0",
4647
"eslint-plugin-vue": "^5.0.0",
4748
"script-loader": "^0.7.2",

‎src/components/UserSelect/index.vue

+33-11
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,32 @@
11
<template>
2-
<el-dropdown class="userSelect" placement="bottom" trigger="click" @command="onSelected">
2+
<el-dropdown class="userSelect" placement="bottom" trigger="click">
33
<div class="userSelect-container">
44
<img src="~@/assets/img/logo.png">
55
<span>{{user.nickname}}</span>
66
</div>
77
<el-dropdown-menu slot="dropdown">
88
<el-dropdown-item :disabled="true">{{version}}</el-dropdown-item>
9-
<el-dropdown-item>
10-
<a style="color:inherit;" href="https://github.com/uncleLian/vue-blog" target="_blank">{{$t('header.github')}}</a>
11-
</el-dropdown-item>
12-
<el-dropdown-item divided command="exit">{{$t('header.logout')}}</el-dropdown-item>
9+
<el-dropdown-item divided @click.native="infoVisible = true">{{$t('header.userInfo')}}</el-dropdown-item>
10+
<el-dropdown-item @click.native="passwordVisible = true">{{$t('header.password')}}</el-dropdown-item>
11+
<el-dropdown-item @click.native="handleLogout">{{$t('header.logout')}}</el-dropdown-item>
1312
</el-dropdown-menu>
13+
<!-- dialog -->
14+
<info-dialog :title="$t('header.userInfo')" v-if="infoVisible" :visible.sync="infoVisible" @onSubmit="handleChangeUserInfo" disabled :json="user" />
15+
<password-dialog :title="$t('header.password')" v-if="passwordVisible" :visible.sync="passwordVisible" @onSubmit="handleChangeUserPassword" />
1416
</el-dropdown>
1517
</template>
1618
<script>
1719
import { mapState } from 'vuex'
20+
import infoDialog from './infoDialog'
21+
import passwordDialog from './passwordDialog'
1822
export default {
23+
components: { infoDialog, passwordDialog },
24+
data() {
25+
return {
26+
infoVisible: false,
27+
passwordVisible: false
28+
}
29+
},
1930
computed: {
2031
...mapState('login', {
2132
user: state => state.user
@@ -25,12 +36,20 @@ export default {
2536
}
2637
},
2738
methods: {
28-
onSelected(val) {
29-
if (val === 'exit') {
30-
this.$store.dispatch('login/logout').then(() => {
31-
this.$router.push('/login')
32-
})
33-
}
39+
handleLogout(val) {
40+
this.$store.dispatch('login/logout')
41+
},
42+
handleChangeUserInfo(form) {
43+
// 假修改
44+
const user = { ...this.user, ...form }
45+
this.$store.commit('login/SET_USER', user)
46+
this.infoVisible = false
47+
this.$message.success('success')
48+
},
49+
handleChangeUserPassword(form) {
50+
// 假修改
51+
this.passwordVisible = false
52+
this.$message.success('success')
3453
}
3554
}
3655
}
@@ -40,6 +59,9 @@ $avatarSize = 30px;
4059
.userSelect {
4160
font-size: 14px !important;
4261
user-select: none;
62+
a {
63+
color: inherit;
64+
}
4365
.userSelect-container {
4466
flex-center();
4567
height: 100%;

‎src/components/UserSelect/infoDialog.vue

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<el-dialog v-bind="$attrs" v-on="$listeners" width="40%" append-to-body>
3+
<el-form v-loading="loading" :model="form" :rules="rules" ref="ruleForm" label-position="top">
4+
<el-form-item prop="nickname" :label="$t('updateUserInfo.nickName')">
5+
<el-input v-model="form.nickname" clearable auto-complete="off" />
6+
</el-form-item>
7+
<el-form-item :label="$t('updateUserInfo.roleName')">
8+
<el-tag type="primary">{{form.roles}}</el-tag>
9+
</el-form-item>
10+
</el-form>
11+
<span slot="footer" class="dialog-footer">
12+
<el-button type="primary" icon="el-icon-circle-check" @click="onSubmit">{{$t('dialog.update')}}</el-button>
13+
<el-button icon="el-icon-circle-close" @click="$emit('update:visible', false)">{{$t('dialog.cancle')}}</el-button>
14+
</span>
15+
</el-dialog>
16+
</template>
17+
<script>
18+
export default {
19+
props: {
20+
json: {
21+
type: Object
22+
},
23+
disabled: {
24+
type: Boolean,
25+
default: false
26+
}
27+
},
28+
data() {
29+
const emptyErrorMsg = this.$t('updateUserInfo.emptyErrorMsg')
30+
return {
31+
form: {
32+
nickname: ''
33+
},
34+
rules: {
35+
nickname: [
36+
{ required: true, message: emptyErrorMsg, trigger: 'blur' }
37+
]
38+
},
39+
loading: false
40+
}
41+
},
42+
created() {
43+
if (this.json) {
44+
this.form = { ...this.json }
45+
}
46+
},
47+
methods: {
48+
onSubmit() {
49+
this.$refs['ruleForm'].validate((valid) => {
50+
if (valid) {
51+
this.$emit('onSubmit', this.form)
52+
}
53+
})
54+
}
55+
}
56+
}
57+
</script>

‎src/components/UserSelect/passwordDialog.vue

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<el-dialog v-bind="$attrs" v-on="$listeners" width="40%" append-to-body>
3+
<el-form v-loading="loading" :model="form" :rules="rules" ref="ruleForm" label-position="top">
4+
<el-form-item prop="originalPwd" :label="$t('updateUserPassword.orginPassword')">
5+
<el-input v-model="form.originalPwd" auto-complete="off" type="password" show-password clearable :disabled="disabled" />
6+
</el-form-item>
7+
<el-form-item prop="newPwd" :label="$t('updateUserPassword.newPassword')">
8+
<el-input v-model="form.newPwd" auto-complete="off" type="password" show-password clearable />
9+
</el-form-item>
10+
<el-form-item prop="againNewPwd" :label="$t('updateUserPassword.againNewPassword')">
11+
<el-input v-model="form.againNewPwd" auto-complete="off" type="password" show-password clearable />
12+
</el-form-item>
13+
</el-form>
14+
<span slot="footer" class="dialog-footer">
15+
<el-button type="primary" icon="el-icon-circle-check" @click="onSubmit">{{$t('dialog.update')}}</el-button>
16+
<el-button icon="el-icon-circle-close" @click="$emit('update:visible', false)">{{$t('dialog.cancle')}}</el-button>
17+
</span>
18+
</el-dialog>
19+
</template>
20+
<script>
21+
export default {
22+
props: {
23+
json: {
24+
type: Object
25+
},
26+
disabled: {
27+
type: Boolean,
28+
default: false
29+
}
30+
},
31+
data() {
32+
const emptyErrorMsg = this.$t('updateUserPassword.emptyErrorMsg')
33+
return {
34+
form: {
35+
originalPwd: '',
36+
newPwd: '',
37+
againNewPwd: ''
38+
},
39+
rules: {
40+
originalPwd: [
41+
{ required: true, message: emptyErrorMsg, trigger: 'blur' }
42+
],
43+
newPwd: [
44+
{ required: true, message: emptyErrorMsg, trigger: 'blur' }
45+
],
46+
againNewPwd: [
47+
{ required: true, message: emptyErrorMsg, trigger: 'blur' }
48+
]
49+
},
50+
loading: false
51+
}
52+
},
53+
methods: {
54+
onSubmit() {
55+
this.$refs['ruleForm'].validate((valid) => {
56+
if (valid) {
57+
if (this.form.newPwd === this.form.againNewPwd) {
58+
this.$emit('onSubmit', this.form)
59+
} else {
60+
let errorMsg = this.$t('updateUserPassword.sameErrorMsg')
61+
this.$message.error(errorMsg)
62+
}
63+
}
64+
})
65+
}
66+
}
67+
}
68+
</script>

‎src/language/en.js

+19-2
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ export default {
3232
i18n: 'I18n'
3333
},
3434
header: {
35-
github: 'Github',
36-
logout: 'Log Out'
35+
logout: 'Log Out',
36+
userInfo: 'Change Info',
37+
password: 'Change Pwd'
3738
},
3839
guide: {
3940
description: 'This feature allows user to focus on one thing, and it will be great to guide new user. Based on',
@@ -144,5 +145,21 @@ export default {
144145
close: 'Close',
145146
closeOthers: 'Close Others',
146147
closeAll: 'Close All'
148+
},
149+
updateUserInfo: {
150+
nickName: 'NickName',
151+
roleName: 'Role',
152+
emptyErrorMsg: 'Not Empty'
153+
},
154+
updateUserPassword: {
155+
orginPassword: 'Orgin Password',
156+
newPassword: 'New Password',
157+
againNewPassword: 'Again New Password',
158+
emptyErrorMsg: 'Not Empty',
159+
sameErrorMsg: 'Two new passwords are different'
160+
},
161+
dialog: {
162+
update: 'Change',
163+
cancle: 'Cancle'
147164
}
148165
}

‎src/language/zh.js

+21-2
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ export default {
3232
i18n: '国际化'
3333
},
3434
header: {
35-
github: '项目地址',
36-
logout: '退出'
35+
logout: '退出',
36+
userInfo: '个人信息',
37+
password: '修改密码'
3738
},
3839
guide: {
3940
description: '该功能可以让用户聚焦于一点，用来引导新用户将会非常棒。基于',
@@ -144,5 +145,23 @@ export default {
144145
close: '关闭',
145146
closeOthers: '关闭其它',
146147
closeAll: '关闭所有'
148+
},
149+
updateUserInfo: {
150+
updateUserInfo: '修改个人信息',
151+
nickName: '名称',
152+
roleName: '角色',
153+
emptyErrorMsg: '不能为空'
154+
},
155+
updateUserPassword: {
156+
updatePawwrod: '修改密码',
157+
orginPassword: '原密码',
158+
newPassword: '新密码',
159+
againNewPassword: '再次输入新密码',
160+
emptyErrorMsg: '不能为空',
161+
sameErrorMsg: '两个新密码不相同'
162+
},
163+
dialog: {
164+
update: '修 改',
165+
cancle: '取 消'
147166
}
148167
}

‎src/layout/Sidebar/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="sideBar" :style="{'min-width': minWidth}">
33
<el-aside id="side" :width="minWidth" :style="{'background': $style.menuBg}">
4-
<el-scrollbar wrap-class="scrollbar-wrapper">
4+
<el-scrollbar style="height:100%;" wrap-class="scrollbar-wrapper">
55
<el-menu :default-active="$route.name" :collapse="isCollapse" :default-openeds="defaultOpeneds" :background-color="$style.menuBg" :text-color="$style.menuText" mode="vertical">
66
<side-item :json="filterRoutes"></side-item>
77
</el-menu>

‎src/pages/login/login.vue

+8-7
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
<img src="~@/assets/img/logo.png">
77
</div>
88
<div class="login-box">
9-
<el-form class="login-form" :model="form" @submit.native.prevent="verify" label-position="top">
9+
<el-form class="login-form" :model="form" @submit.native.prevent="verify" label-position="top" v-loading="loading" element-loading-text="Login" element-loading-background="rgba(255, 255, 255, 0.7)">
1010
<el-form-item class="tip">{{$t('login.step')}}</el-form-item>
1111
<el-form-item :label="$t('login.username')">
12-
<el-input v-model="form.username" auto-complete='off' />
12+
<el-input v-model.trim="form.username" auto-complete='off' />
1313
</el-form-item>
1414
<el-form-item :label="$t('login.password')">
1515
<el-input v-model="form.password" auto-complete='off' type="password" show-password />
@@ -36,7 +36,8 @@ export default {
3636
form: {
3737
username: 'admin',
3838
password: '123456'
39-
}
39+
},
40+
loading: false
4041
}
4142
},
4243
methods: {
@@ -52,16 +53,16 @@ export default {
5253
}
5354
},
5455
login() {
56+
this.loading = true
5557
let successMsg = this.$t('login.successMsg')
5658
let errorMsg = this.$t('login.errorMsg')
5759
this.$store.dispatch('login/getLoginToken', this.form).then((res) => {
58-
this.$message.success({
59-
message: successMsg,
60-
duration: 2000
61-
})
6260
this.$route.query.redirect ? this.$router.push(this.$route.query.redirect) : this.$router.push('/index')
61+
this.$message.success(successMsg)
62+
this.loading = false
6363
}).catch(() => {
6464
this.$message.error(errorMsg)
65+
this.loading = false
6566
})
6667
}
6768
}

‎src/router/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const asyncRoutes = [
8181
},
8282
{
8383
name: 'dragDemo',
84-
path: 'drag',
84+
path: 'dragDemo',
8585
component: PageView,
8686
meta: {
8787
icon: 'move'

‎src/store/modules/login.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { getLogin, getUser } from '@/api/login'
2-
import { resetRouter } from '@/router'
2+
import router, { resetRouter } from '@/router'
33
import cache from '@/utils/cache'
44

55
export default {
@@ -52,9 +52,14 @@ export default {
5252
},
5353
logout({ commit }) {
5454
return new Promise((resolve, reject) => {
55+
// 删除本地token
5556
cache.removeToken()
57+
// 重置路由
5658
resetRouter()
59+
// 删除用户信息
5760
commit('SET_USER', '')
61+
// 跳转到登录页
62+
router.push('/login')
5863
resolve()
5964
})
6065
}

‎src/store/modules/routes.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,9 @@ function setRedirect(routes, redirect = '') {
6464
let redirectName = defaultRedirectRoute.name
6565
route.redirect = `${redirect}/${route.name}/${redirectName}`
6666
}
67-
let index = route.redirect && route.redirect.lastIndexOf('/')
68-
let fatherDir = route.redirect && route.redirect.substring(0, index)
67+
// let index = route.redirect && route.redirect.lastIndexOf('/')
68+
// let fatherDir = route.redirect && route.redirect.substring(0, index)
69+
let fatherDir = route.redirect && `${redirect}/${route.name}`
6970
route.children = setRedirect(route.children, fatherDir)
7071
}
7172
})

0 commit comments

Comments
 (0)