|
@@ -7,10 +7,7 @@
|
|
|
@toggleClick="toggleSideBar"
|
|
|
/>
|
|
|
|
|
|
- <breadcrumb
|
|
|
- id="breadcrumb-container"
|
|
|
- class="breadcrumb-container"
|
|
|
- />
|
|
|
+ <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
|
|
|
|
|
<div class="right-menu">
|
|
|
<template v-if="device !== 'mobile'">
|
|
@@ -26,90 +23,64 @@
|
|
|
|
|
|
</template>
|
|
|
|
|
|
- <el-dropdown
|
|
|
- class="avatar-container right-menu-item hover-effect"
|
|
|
- trigger="click"
|
|
|
- >
|
|
|
+ <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
|
<div class="menu-userinfo">
|
|
|
- <el-avatar
|
|
|
- shape="square"
|
|
|
- size="small"
|
|
|
- :src="avatar"
|
|
|
- @error="errorHandler"
|
|
|
- >
|
|
|
+ <el-avatar shape="square" size="small" :src="avatar" @error="errorHandler">
|
|
|
<img :src="avatarDefault">
|
|
|
</el-avatar>
|
|
|
<span>{{ name }}</span>
|
|
|
</div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item @click.native="updatePwd">修改密码</el-dropdown-item>
|
|
|
- <el-dropdown-item
|
|
|
- divided
|
|
|
- @click.native="logout"
|
|
|
- >
|
|
|
+ <el-dropdown-item divided @click.native="logout">
|
|
|
<span style="display:block;">退出登录</span>
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
|
|
|
- <el-dialog
|
|
|
- title="修改密码"
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- width="500px"
|
|
|
- :close-on-click-modal="false"
|
|
|
- >
|
|
|
- <el-form
|
|
|
- ref="psdForm"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- label-width="80px"
|
|
|
- >
|
|
|
- <el-form-item
|
|
|
- label="旧密码"
|
|
|
- prop="password"
|
|
|
- >
|
|
|
+ <el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
|
|
|
+ <el-form ref="psdForm" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="旧密码" prop="password">
|
|
|
<el-input
|
|
|
- v-model="form.password"
|
|
|
+ ref="passwordType1"
|
|
|
+ v-model.trim="form.password"
|
|
|
+ placeholder="请输入旧密码"
|
|
|
+ :type="passwordType1"
|
|
|
style="width:300px"
|
|
|
- type="password"
|
|
|
- show-password
|
|
|
- clearable
|
|
|
+ auto-complete="new-password"
|
|
|
/>
|
|
|
+ <span class="show-pwd" @click="showPwd(1)">
|
|
|
+ <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ </span>
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="新密码"
|
|
|
- prop="newPassword"
|
|
|
- >
|
|
|
+ <el-form-item label="新密码" prop="newPassword">
|
|
|
<el-input
|
|
|
- v-model="form.newPassword"
|
|
|
+ ref="passwordType2"
|
|
|
+ v-model.trim="form.newPassword"
|
|
|
+ placeholder="请输入新密码"
|
|
|
+ :type="passwordType2"
|
|
|
style="width:300px"
|
|
|
- type="password"
|
|
|
- show-password
|
|
|
- clearable
|
|
|
/>
|
|
|
+ <span class="show-pwd" @click="showPwd(2)">
|
|
|
+ <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ </span>
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="确认密码"
|
|
|
- prop="confimPassword"
|
|
|
- >
|
|
|
+ <el-form-item label="确认密码" prop="confimPassword">
|
|
|
<el-input
|
|
|
- v-model="form.confimPassword"
|
|
|
+ ref="passwordType3"
|
|
|
+ v-model.trim="form.confimPassword"
|
|
|
+ placeholder="请再次输入新密码"
|
|
|
+ :type="passwordType3"
|
|
|
style="width:300px"
|
|
|
- type="password"
|
|
|
- show-password
|
|
|
- clearable
|
|
|
/>
|
|
|
+ <span class="show-pwd" @click="showPwd(3)">
|
|
|
+ <svg-icon :icon-class="passwordType3 === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ </span>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
- <span
|
|
|
- slot="footer"
|
|
|
- class="dialog-footer"
|
|
|
- >
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="submit"
|
|
|
- >确 定</el-button>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submit">确 定</el-button>
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
@@ -147,7 +118,9 @@ export default {
|
|
|
}
|
|
|
// 确认密码验证
|
|
|
var confimPassword = (rule, value, callback) => {
|
|
|
- if (value === '') {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error('确认密码不能为空'))
|
|
|
+ } else if (value === '') {
|
|
|
callback(new Error('请再次输入密码'))
|
|
|
} else if (value !== this.form.newPassword) {
|
|
|
callback(new Error('两次输入密码不一致!'))
|
|
@@ -167,17 +140,20 @@ export default {
|
|
|
// 表单验证
|
|
|
rules: {
|
|
|
password: [
|
|
|
- { required: true, message: '请输入旧密码', trigger: 'blur' },
|
|
|
+ { required: true, message: '旧密码不能为空', trigger: 'blur' },
|
|
|
{ min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
|
|
|
],
|
|
|
newPassword: [
|
|
|
- { required: true, message: '请输入新密码', trigger: 'blur' },
|
|
|
+ { required: true, message: '新密码不能为空', trigger: 'blur' },
|
|
|
{ validator: validatePass, trigger: 'blur' }
|
|
|
],
|
|
|
confimPassword: [
|
|
|
{ required: true, validator: confimPassword, trigger: 'blur' }
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ passwordType1: 'password',
|
|
|
+ passwordType2: 'password',
|
|
|
+ passwordType3: 'password'
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -234,6 +210,30 @@ export default {
|
|
|
if (this.$refs.psdForm) {
|
|
|
this.$refs.psdForm.resetFields()
|
|
|
}
|
|
|
+ },
|
|
|
+ /** 显示密码 */
|
|
|
+ showPwd(type) {
|
|
|
+ switch (type) {
|
|
|
+ case 1:
|
|
|
+ this.psdType('passwordType1')
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ this.psdType('passwordType2')
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ this.psdType('passwordType3')
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ psdType(btn) {
|
|
|
+ if (this[btn] === 'password') {
|
|
|
+ this[btn] = ''
|
|
|
+ } else {
|
|
|
+ this[btn] = 'password'
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs[btn].focus()
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -340,4 +340,19 @@ export default {
|
|
|
.el-avatar {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
+
|
|
|
+.show-pwd {
|
|
|
+ position: absolute;
|
|
|
+ right: 89px;
|
|
|
+ top: 1px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #889aa4;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
</style>
|