<template>
|
<div class="Right">
|
<div class="top">
|
<div class="isCollapse" @click="toggleIsCollapse">
|
<i v-if="!isCollapse" class="el-icon-s-fold"></i>
|
<i v-if="isCollapse" class="el-icon-s-unfold"></i>
|
</div>
|
<div class="sysName">信息化智能化生产管理平台</div>
|
<div class="userMenu">
|
<span class="hello">您好，{{ name }}！</span>
|
<el-button type="text" icon="el-icon-setting" @click="handlePassword"
|
>修改密码</el-button
|
>
|
<el-button type="text" icon="el-icon-switch-button" @click="handleLogin"
|
>退出登录</el-button
|
>
|
</div>
|
</div>
|
<div class="rightMiddleTags">
|
<div class="tagsBox">
|
<!-- 首页 -->
|
<el-tag
|
class="tagsClass"
|
sizeType="medium"
|
type="info"
|
@click="goto('home')"
|
:type="$route.name === 'home' ? '' : 'info'"
|
>首页</el-tag
|
>
|
<!-- 非首页 -->
|
<el-tag
|
class="tagsClass"
|
sizeType="medium"
|
type="info"
|
v-for="(item, index) in tags"
|
:key="index"
|
@click="goto(item.name)"
|
:type="$route.name === item.name ? '' : 'info'"
|
closable
|
@close="handleTagClose(item.name, index)"
|
>{{ item.meta.title }}</el-tag
|
>
|
</div>
|
<div class="tagControl">
|
<div class="tagControlItem" @click="handleTagCloseOthers">
|
<i class="iconfont icon-guanbiqita"></i><span>关闭其他</span>
|
</div>
|
<div class="tagControlItem" @click="handleTagCloseAll">
|
<i class="iconfont icon-quanbuguanbi"></i><span>全部关闭</span>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
title="修改密码"
|
:visible.sync="showPass"
|
width="600px"
|
:before-close="handlePassClose"
|
>
|
<el-form
|
:model="formData"
|
:rules="formRules"
|
ref="passForm"
|
label-width="80px"
|
>
|
<el-form-item label="用户名" prop="id">
|
<el-input style="width:360px" :value="name" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="用户ID" prop="id" style="display: none;">
|
<el-input
|
style="width:360px"
|
v-model="formData.id"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="原密码" prop="oldPassword">
|
<el-input
|
style="width:360px"
|
v-model="formData.oldPassword"
|
clearable
|
show-password
|
></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" prop="newPassword">
|
<el-input
|
style="width:360px"
|
v-model="formData.newPassword"
|
clearable
|
show-password
|
></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="newPassword2">
|
<el-input
|
style="width:360px"
|
v-model="formData.newPassword2"
|
clearable
|
show-password
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="intro">
|
密码修改成功后将退出当前登录，请使用新密码重新登录系统
|
</div>
|
<div class="intro">
|
密码长度必须为6位，可包含字母、数字
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handlePassClose">取 消</el-button>
|
<el-button type="primary" @click="handlePassSubmit">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import util from "../util";
|
import { mapMutations, mapActions } from "vuex";
|
import { mapState } from "vuex";
|
|
export default {
|
components: {},
|
name: "Right",
|
props: {
|
params: String,
|
},
|
data() {
|
return {
|
isCollapse: false,
|
showPass: false,
|
name: localStorage.getItem("name"),
|
formData: {
|
id: localStorage.getItem("id"),
|
oldPassword: "",
|
newPassword: "",
|
newPassword2: "",
|
},
|
formRules: {
|
oldPassword: [{ required: true, message: "必填项", trigger: "blur" }],
|
newPassword: [{ required: true, message: "必填项", trigger: "blur" }],
|
newPassword2: [{ required: true, message: "必填项", trigger: "blur" }],
|
},
|
};
|
},
|
computed: {
|
...mapState("cache", ["caches"]),
|
tags: function() {
|
var that = this;
|
var arr = [];
|
that.caches.forEach((item) => {
|
that.$router.options.routes.forEach((routerItem) => {
|
if (item == routerItem.name) {
|
arr.push(routerItem);
|
}
|
});
|
});
|
return arr;
|
},
|
},
|
mounted() {},
|
watch: {
|
cache: {
|
immediate: true,
|
handler() {
|
// console.log("cache ->", this.cache);
|
},
|
},
|
},
|
methods: {
|
...mapActions("cache", ["addCache", "removeCache", "removeCacheEntry"]),
|
...mapMutations(["setIsRenderTab"]),
|
// 跳转路由
|
goto: function(path) {
|
if (path != this.$route.name) {
|
this.$router.push({
|
name: path,
|
});
|
}
|
},
|
// 切换菜单展示模式： 展开或收起
|
toggleIsCollapse() {
|
this.isCollapse = !this.isCollapse;
|
util.$emit("toggleIsCollapse", this.isCollapse);
|
},
|
// 退出登录状态
|
handleLogin() {
|
this.$confirm("此操作将退出登陆, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
localStorage.clear();
|
this.$router.push({
|
name: "login",
|
});
|
this.$message({
|
type: "success",
|
message: "已退出",
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
// 修改密码
|
handlePassword: function() {
|
this.showPass = true;
|
},
|
// 关闭修改密码
|
handlePassClose: function() {
|
this.formData.oldPassword = "";
|
this.formData.newPassword = "";
|
this.formData.newPassword2 = "";
|
this.showPass = false;
|
this.$refs["passForm"].resetFields();
|
},
|
// 提交修改密码
|
handlePassSubmit: function() {
|
this.$refs["passForm"].validate((valid) => {
|
if (valid) {
|
this.$confirm("此操作将修改密码并退出登录, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then((res) => {
|
this.onPassSubmit();
|
})
|
.catch((err) => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
}
|
});
|
},
|
// 执行修改密码
|
onPassSubmit: function() {
|
if (this.formData.oldPassword == this.formData.newPassword) {
|
this.$message({
|
type: "info",
|
message: "新密码与原密码重复",
|
});
|
return;
|
}
|
if (this.formData.newPassword != this.formData.newPassword2) {
|
this.$message({
|
type: "info",
|
message: "新密码与确认密码不一致",
|
});
|
return;
|
}
|
var pwdRegex = new RegExp("^[a-zA-Z0-9]{6,}$");
|
if (!pwdRegex.test(this.formData.newPassword)) {
|
this.$message({
|
type: "info",
|
message: "密码长度必须为6位，可包含字母、数字",
|
});
|
return;
|
}
|
var that = this;
|
var data = this.formData;
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "base/user/changePassword",
|
params: data,
|
})
|
.then((res) => {
|
if (res.success) {
|
localStorage.clear();
|
that.$router.push({
|
name: "Login",
|
});
|
that.$message({
|
type: "success",
|
message: "请重新登录",
|
});
|
} else {
|
that.$message(res.content);
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 关闭窗口
|
handleTagClose: function(item, index) {
|
if (item != this.$route.name) {
|
// console.log("关闭窗口", item);
|
this.removeCache(item || "");
|
return;
|
}
|
if (this.caches.length == 1) {
|
this.goto("home");
|
// console.log("关闭唯一窗口，回首页", item);
|
this.removeCache(item || "");
|
return;
|
}
|
if (index == this.caches.length - 1) {
|
// console.log("关闭末位窗口，去前页", item);
|
this.goto(this.caches[index - 1]);
|
this.removeCache(item || "");
|
return;
|
}
|
if (item == this.$route.name) {
|
this.goto(this.caches[index + 1]);
|
// console.log("关闭当前窗口，去后页", item);
|
this.removeCache(item || "");
|
}
|
},
|
// 关闭其他
|
handleTagCloseOthers: function() {
|
var arr = JSON.parse(JSON.stringify(this.caches));
|
arr.forEach((item) => {
|
if (item != this.$route.name) {
|
// console.log(item, '已关闭');
|
this.removeCache(item || "");
|
}
|
});
|
},
|
// 关闭所有
|
handleTagCloseAll: function() {
|
this.goto("home");
|
var arr = JSON.parse(JSON.stringify(this.caches));
|
arr.forEach((item) => {
|
// console.log(item, '已关闭');
|
this.removeCache(item || "");
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.Right {
|
background-color: #fff;
|
padding-right: 1px;
|
.top {
|
height: 56px;
|
line-height: 56px;
|
border-bottom: 1px solid #ddd;
|
display: flex;
|
align-items: center;
|
.isCollapse {
|
width: 56px;
|
height: 56px;
|
font-size: 18px;
|
text-align: center;
|
margin-top: 2px;
|
}
|
.isCollapse:hover {
|
background-color: #eee;
|
}
|
.sysName {
|
font-size: 24px;
|
font-weight: 700;
|
}
|
.userMenu {
|
flex-grow: 1;
|
padding-right: 20px;
|
text-align: right;
|
}
|
}
|
.rightMiddleTags {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
box-shadow: 0px 5px 5px -3px rgba(134, 134, 134, 0.1);
|
.tagsBox {
|
height: 43px;
|
flex-grow: 1;
|
background-color: #fff;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
overflow: auto;
|
padding-left: 5px;
|
.tagsClass {
|
margin-right: 5px;
|
}
|
}
|
.tagControl {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
.tagControlItem {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
width: 81px;
|
height: 43px;
|
line-height: 43px;
|
padding: 0 10px;
|
background-color: #f4f4f5;
|
border-left: 1px solid #e9e9eb;
|
border-bottom: 1px solid #e9e9eb;
|
color: #909399;
|
i {
|
margin-right: 5px;
|
font-size: 20px;
|
}
|
}
|
.tagControlItem:hover {
|
background-color: #e9e9ec;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
