|
|
@@ -71,7 +71,7 @@
|
|
|
:unique-opened="true"
|
|
|
:router="true"
|
|
|
:default-active="activeMenu"
|
|
|
- style="border-right: 1px solid #545c64;"
|
|
|
+ style="border-right: 1px solid #545c64"
|
|
|
class="el-menu-vertical-demo"
|
|
|
>
|
|
|
<sys-menu v-for="item in menus" :menu="item" :key="item.id"> </sys-menu>
|
|
|
@@ -82,7 +82,7 @@
|
|
|
<el-header class="header">
|
|
|
<div class="header-btn" @click="collapse = !collapse">
|
|
|
<div :style="{ transform: collapse ? 'rotate(90deg)' : '' }">
|
|
|
- <i class="fas fa-bars" style="font-size: 20px;"></i>
|
|
|
+ <i class="fas fa-bars" style="font-size: 20px"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="header-title"></div>
|
|
|
@@ -93,13 +93,14 @@
|
|
|
:open-delay="1000"
|
|
|
>
|
|
|
<div class="header-btn" @click="toggleFullScreen" ref="fullscreen">
|
|
|
- <i class="fas fa-expand" style="font-size: 20px;"></i>
|
|
|
+ <i class="fas fa-expand" style="font-size: 20px"></i>
|
|
|
</div>
|
|
|
</el-tooltip>
|
|
|
|
|
|
- <el-dropdown @command="onCommand" style="margin-left: 20px;">
|
|
|
+ <el-dropdown @command="onCommand" style="margin-left: 20px">
|
|
|
<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>
|
|
|
@@ -145,13 +146,38 @@
|
|
|
<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>
|
|
|
|
|
|
<script>
|
|
|
import SysMenu from '../components/SysMenu';
|
|
|
import { mapState } from 'vuex';
|
|
|
-
|
|
|
+import { isBefore, parse, format, addDays } from 'date-fns';
|
|
|
export default {
|
|
|
name: 'admin',
|
|
|
created() {
|
|
|
@@ -198,6 +224,13 @@ export default {
|
|
|
}
|
|
|
this.currentTab = this.$route.name;
|
|
|
this.getMenus();
|
|
|
+
|
|
|
+ let pwdUpdateAt = this.userInfo.pwdUpdateAt;
|
|
|
+ if (!pwdUpdateAt || isBefore(parse(pwdUpdateAt, 'yyyy-MM-dd HH:mm:ss', new Date()), addDays(new Date(), -30))) {
|
|
|
+ this.$alert('您已30天未修改密码,请尽快修改密码', '提示').then(() => {
|
|
|
+ this.onShowPwdDialog();
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -217,7 +250,62 @@ export default {
|
|
|
],
|
|
|
currentTab: 'roomStatus',
|
|
|
lastX: 0,
|
|
|
- leftMouseDown: false
|
|
|
+ leftMouseDown: false,
|
|
|
+ showPwdDialog: false,
|
|
|
+ pwdForm: {
|
|
|
+ password: '',
|
|
|
+ repeat: '',
|
|
|
+ code: '',
|
|
|
+ key: ''
|
|
|
+ },
|
|
|
+ captcha: '',
|
|
|
+ pwdRules: {
|
|
|
+ password: [
|
|
|
+ { required: true, message: '请输入新密码', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ pattern: /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,30}/,
|
|
|
+ message: '密码必须包含大小写字母和数字,且长度为8-30',
|
|
|
+ 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: {
|
|
|
@@ -279,8 +367,55 @@ 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/changePassword', {
|
|
|
+ ...this.pwdForm
|
|
|
+ })
|
|
|
+ .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;
|
|
|
+ });
|
|
|
+ },
|
|
|
removeTab(removeIndex) {
|
|
|
let currentIndex = this.tabs.findIndex(i => i.name === this.$route.name);
|
|
|
if (this.tabs.length > 1 && removeIndex > 0) {
|
|
|
@@ -478,4 +613,15 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+/deep/ .change-pwd-dialog {
|
|
|
+ .captcha-image {
|
|
|
+ height: 32px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|