|
|
@@ -45,9 +45,10 @@
|
|
|
</div>
|
|
|
</el-tooltip>
|
|
|
|
|
|
- <el-dropdown @command="onCommand" style="margin-left: 20px;">
|
|
|
+ <el-dropdown @command="onCommand" style="margin-left: 20px;" trigger="click">
|
|
|
<img :src="userInfo ? userInfo.avatar || '' : ''" class="avatar" />
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item command="pwd" style="word-break:keep-all">修改密码 </el-dropdown-item>
|
|
|
<el-dropdown-item command="logout">退出登录 </el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
@@ -56,6 +57,31 @@
|
|
|
<router-view></router-view>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showPwdDialog"
|
|
|
+ title="修改密码"
|
|
|
+ width="500px"
|
|
|
+ top="30vh"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ custom-class="change-pwd-dialog"
|
|
|
+ >
|
|
|
+ <el-form :model="pwdForm" label-width="100px" label-position="right" ref="pwdForm" :rules="pwdRules">
|
|
|
+ <el-form-item label="输入新密码" prop="password">
|
|
|
+ <el-input v-model="pwdForm.password" type="password" placeholder="输入新密码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="确认新密码" prop="repeat">
|
|
|
+ <el-input v-model="pwdForm.repeat" type="password" placeholder="确认新密码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="验证码" prop="code">
|
|
|
+ <el-input v-model="pwdForm.code" placeholder="请输入验证码" style="width:150px"></el-input>
|
|
|
+ <img :src="captcha" class="captcha-image" @click="refreshCaptcha" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer">
|
|
|
+ <el-button @click="showPwdDialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="savePwd" :loading="pwdLoading">确认修改</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
@@ -82,7 +108,55 @@ export default {
|
|
|
activeMenu: '',
|
|
|
menuPath: [],
|
|
|
collapse: localStorage.getItem('menu-collapse') == 'true',
|
|
|
- isFullscreen: false
|
|
|
+ isFullscreen: false,
|
|
|
+ showPwdDialog: false,
|
|
|
+ pwdForm: {
|
|
|
+ password: '',
|
|
|
+ repeat: '',
|
|
|
+ code: '',
|
|
|
+ key: ''
|
|
|
+ },
|
|
|
+ captcha: '',
|
|
|
+ pwdRules: {
|
|
|
+ password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
|
|
|
+ repeat: [
|
|
|
+ { required: true, message: '请确认新密码', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (value && value == this.pwdForm.password) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error('两次密码输入不一致'));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ code: [
|
|
|
+ { required: true, message: '请输入验证码', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ this.$http
|
|
|
+ .get('/captcha/verify', {
|
|
|
+ key: this.pwdForm.key,
|
|
|
+ code: value
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res === true) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error('验证码错误'));
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ callback(new Error('验证码错误'));
|
|
|
+ });
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ pwdLoading: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -140,7 +214,54 @@ export default {
|
|
|
localStorage.removeItem('token');
|
|
|
this.$store.commit('updateUserInfo', null);
|
|
|
this.$router.replace('/login');
|
|
|
+ } else if (command === 'pwd') {
|
|
|
+ this.onShowPwdDialog();
|
|
|
}
|
|
|
+ },
|
|
|
+ onShowPwdDialog() {
|
|
|
+ this.$refs.pwdForm && this.$refs.pwdForm.resetFields();
|
|
|
+ this.$http.get('/captcha/get').then(res => {
|
|
|
+ this.captcha = res.image;
|
|
|
+ this.pwdForm = {
|
|
|
+ password: '',
|
|
|
+ repeat: '',
|
|
|
+ code: '',
|
|
|
+ key: res.key
|
|
|
+ };
|
|
|
+ this.showPwdDialog = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ savePwd() {
|
|
|
+ this.pwdLoading = true;
|
|
|
+ this.$refs.pwdForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.$http
|
|
|
+ .post('/user/setPassword', {
|
|
|
+ password: this.pwdForm.password
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.pwdLoading = false;
|
|
|
+ this.showPwdDialog = false;
|
|
|
+ localStorage.removeItem('token');
|
|
|
+ this.$store.commit('updateUserInfo', null);
|
|
|
+ this.$router.replace('/login');
|
|
|
+ this.$message.success('修改成功,请重新登录');
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.pwdLoading = false;
|
|
|
+ this.$message.error(e.error || '修改失败');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.pwdLoading = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ refreshCaptcha() {
|
|
|
+ this.$http.get('/captcha/get').then(res => {
|
|
|
+ this.captcha = res.image;
|
|
|
+ this.pwdForm.key = res.key;
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -173,6 +294,17 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.change-pwd-dialog {
|
|
|
+ .captcha-image {
|
|
|
+ height: 32px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
#app {
|