|
|
<template>
|
|
|
<div class="layout-wrapper">
|
|
|
|
|
|
<el-container>
|
|
|
<!--头部 -->
|
|
|
<el-header class="header-two">
|
|
|
<div class="elheader">
|
|
|
<div class="headerLeft">
|
|
|
<div class="collapse" @click="handleChangeCollapse">
|
|
|
<i :class="[isShow==true?'el-icon-s-unfold':'el-icon-s-fold']"></i>
|
|
|
</div>
|
|
|
<div @click='ruotes' style='cursor: pointer'>
|
|
|
<span class="headertitle">门店业务</span>
|
|
|
<!-- <span class="headertitle">代收业务</span> -->
|
|
|
<span class="text-white ">
|
|
|
{{storeNum}}
|
|
|
</span>
|
|
|
<el-tooltip effect="dark" :content="storeName" placement="bottom">
|
|
|
<i class="el-icon-s-platform icon-plat-form"></i>
|
|
|
</el-tooltip>
|
|
|
<span class="text-white ">
|
|
|
{{storeName}}({{isStoreName}})
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="head_text">
|
|
|
<span v-if="grt=(ho<9?'早上好！ ':
|
|
|
ho<12?'上午好 ！ ':
|
|
|
ho<15?'中午好 ！ ':
|
|
|
ho<19?'下午好 ！ ':
|
|
|
'晚上好 ！ '
|
|
|
)">{{grt}}</span>
|
|
|
<el-tooltip effect="dark" :content="roleName" placement="bottom">
|
|
|
<span>{{staffName}}</span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
<div>
|
|
|
<el-button size="mini" type="primary" class="butlog" plain>关注公众号</el-button>
|
|
|
<el-tooltip effect="dark" content="点击刷新页面" placement="bottom">
|
|
|
<i class="el-icon-refresh icon-store" @click="refresh"></i>
|
|
|
</el-tooltip>
|
|
|
<el-tooltip effect="dark" content="修改密码" placement="bottom">
|
|
|
<i class="el-icon-key icon-setpassword" @click="editpasswordDialogFormVisible=true"></i>
|
|
|
</el-tooltip>
|
|
|
<el-button size="mini" type="primary" class="butlog" @click="Exit()" plain>退出</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-header>
|
|
|
<el-container>
|
|
|
<!-- 左边 -->
|
|
|
<el-aside width="200px" :style="contentStyleObj">
|
|
|
<asider></asider>
|
|
|
</el-aside>
|
|
|
<el-container>
|
|
|
<el-main class="max-height-90" :style="mainStyleObj">
|
|
|
<emain></emain>
|
|
|
</el-main>
|
|
|
<el-footer class="elfooter"></el-footer>
|
|
|
</el-container>
|
|
|
</el-container>
|
|
|
|
|
|
</el-container>
|
|
|
<!-- 修改密码弹窗 -->
|
|
|
<div class="editpassword">
|
|
|
<el-dialog :close-on-click-modal="false" title="修改密码" :visible.sync="editpasswordDialogFormVisible" :before-close="handleClose">
|
|
|
<el-form :model="editpassword" :rules="rules" ref="editpassword" label-width="100px">
|
|
|
<el-form-item label=" 原 密 码:" prop="password">
|
|
|
<el-input type="password" v-model="editpassword.password"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label=" 新 密 码:" prop="newPassword">
|
|
|
<el-input type="password" v-model="editpassword.newPassword"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="确认密码:" prop="checkPass">
|
|
|
<el-input type="password" v-model="editpassword.checkPass"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button size="mini" type="success" @click="getPassword" :loading='butLoading'>{{ butLoading?'加载中':'短信密码' }}</el-button>
|
|
|
<el-button size="mini" type="primary" @click="handleClose">取 消</el-button>
|
|
|
<el-button size="mini" type="primary" @click="confirm()">确 定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { getPsw } from '../api/api'
|
|
|
import { changePassword, logout } from "../api/logout.js";
|
|
|
import asider from "./components/asider";
|
|
|
import emain from "./components/Emain";
|
|
|
import { mapState } from "vuex";
|
|
|
import { delCookie, getCookie } from "../utils/utils.js";
|
|
|
export default {
|
|
|
inject: ["reload"],
|
|
|
name: "layout",
|
|
|
data() {
|
|
|
var validatePass = (rule, value, callback) => {
|
|
|
if (value === "") {
|
|
|
callback(new Error("请输入密码"));
|
|
|
} else {
|
|
|
if (this.editpassword.checkPass != "") {
|
|
|
this.$refs.editpassword.validateField("checkPass");
|
|
|
}
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
var validatePass2 = (rule, value, callback) => {
|
|
|
if (value === "") {
|
|
|
callback(new Error("请再次输入密码"));
|
|
|
} else if (value !== this.editpassword.newPassword) {
|
|
|
callback(new Error("两次输入密码不一致!"));
|
|
|
} else {
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
return {
|
|
|
butLoading:false,
|
|
|
grt: "hello", //欢迎提示语
|
|
|
ho: new Date().getHours(), //获取当前时刻
|
|
|
storeNum: "", //门店编码
|
|
|
storeName: "", //门店名称
|
|
|
staffName: "", //员工名称
|
|
|
roleName: "", //角色名称
|
|
|
headOffice: "", //是否总店
|
|
|
isShow: false, //菜单收放
|
|
|
editpasswordDialogFormVisible: false, //修改密码弹窗开关
|
|
|
contentStyleObj: {
|
|
|
//左边菜单样式属性
|
|
|
height: "",
|
|
|
width: "",
|
|
|
left: "",
|
|
|
},
|
|
|
editpassword: {}, //修改密码表单
|
|
|
mainStyleObj: {
|
|
|
//动态获取高度
|
|
|
height: "",
|
|
|
},
|
|
|
rules: {
|
|
|
password: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "请输入原密码",
|
|
|
trigger: "blur",
|
|
|
},
|
|
|
],
|
|
|
newPassword: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "请输入新密码",
|
|
|
trigger: "blur",
|
|
|
},
|
|
|
{
|
|
|
validator: validatePass,
|
|
|
trigger: "blur",
|
|
|
},
|
|
|
],
|
|
|
checkPass: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: "请输入确认密码",
|
|
|
trigger: "blur",
|
|
|
},
|
|
|
{
|
|
|
validator: validatePass2,
|
|
|
trigger: "blur",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(["collapse"]),
|
|
|
isStoreName(){
|
|
|
return sessionStorage.getItem("headOffice") == 1 ? "总店" : "分店"
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
asider,
|
|
|
emain,
|
|
|
},
|
|
|
methods: {
|
|
|
getPassword(){
|
|
|
this.butLoading = true
|
|
|
getPsw().then(res=>{
|
|
|
this.butLoading = false
|
|
|
if( res.code == "000000" ){
|
|
|
this.$message.success({ message: "短信发送成功，注意查收" });
|
|
|
}else{
|
|
|
this.$alert(res.message, "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
confirmButtonClass: "confirmbtnFalses",
|
|
|
type: "warning",
|
|
|
center: true,
|
|
|
callback: (action) => {},
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//关闭弹窗前的回调方法
|
|
|
handleClose() {
|
|
|
this.editpassword = {};
|
|
|
this.editpasswordDialogFormVisible = false;
|
|
|
this.$refs.editpassword.clearValidate();
|
|
|
},
|
|
|
//刷新方法
|
|
|
refresh() {
|
|
|
this.reload();
|
|
|
},
|
|
|
//点击门店标签 跳转首页
|
|
|
ruotes() {
|
|
|
this.$router.push("/home");
|
|
|
},
|
|
|
//菜单收放事件
|
|
|
handleChangeCollapse(show) {
|
|
|
this.$store.dispatch("actionChange", !this.collapse);
|
|
|
this.isShow = !this.isShow;
|
|
|
},
|
|
|
//获取当前页面高度
|
|
|
getHeight() {
|
|
|
this.contentStyleObj.height = window.innerHeight + "px";
|
|
|
// this.mainStyleObj.height = window.innerHeight + "px";
|
|
|
},
|
|
|
//退出登录
|
|
|
Exit() {
|
|
|
var mobilePhone = sessionStorage.getItem("mobilePhone");
|
|
|
logout({
|
|
|
mobilePhone: mobilePhone,
|
|
|
}).then((res) => {
|
|
|
if (res.code == "000000") {
|
|
|
this.$router.push("/");
|
|
|
delCookie("token");
|
|
|
this.$message.success({
|
|
|
message: "已退出登录！",
|
|
|
});
|
|
|
sessionStorage.clear();
|
|
|
localStorage.clear();
|
|
|
} else {
|
|
|
this.$alert(res.message, "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
confirmButtonClass: "confirmbtnFalses",
|
|
|
type: "warning",
|
|
|
center: true,
|
|
|
callback: (action) => { },
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//确定返回方法
|
|
|
confirm() {
|
|
|
this.$refs["editpassword"].validate(async (valid) => {
|
|
|
if (valid) {
|
|
|
console.log(this.editpassword.checkPass);
|
|
|
console.log(this.editpassword.newPassword);
|
|
|
if (this.editpassword.checkPass == this.editpassword.newPassword) {
|
|
|
delete this.editpassword.checkPass;
|
|
|
changePassword(this.editpassword).then((res) => {
|
|
|
if (res.code == "000000") {
|
|
|
this.$message.success({
|
|
|
message: "密码修改成功 , 跳转到登录页面 ! ",
|
|
|
});
|
|
|
setTimeout(() => {
|
|
|
this.$router.push("/");
|
|
|
delCookie("token");
|
|
|
}, 1000);
|
|
|
this.editpasswordDialogFormVisible = false;
|
|
|
} else {
|
|
|
this.$alert(res.message, "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
confirmButtonClass: "confirmbtnFalses",
|
|
|
type: "warning",
|
|
|
center: true,
|
|
|
callback: (action) => { },
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
setTimeout(() => {
|
|
|
this.editpassword.checkPass = this.editpassword.newPassword;
|
|
|
}, 500);
|
|
|
} else {
|
|
|
this.$message.error({
|
|
|
message: "两次输入密码不一致",
|
|
|
});
|
|
|
this.editpasswordDialogFormVisible = true;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
window.addEventListener("resize", this.getHeight);
|
|
|
this.getHeight();
|
|
|
const loading = this.$loading({
|
|
|
lock: true,
|
|
|
text: "拼命加载中...",
|
|
|
spinner: "el-icon-loading",
|
|
|
});
|
|
|
var that = this;
|
|
|
setTimeout(() => {
|
|
|
loading.close();
|
|
|
that.roleName = sessionStorage.getItem("roleName");
|
|
|
that.staffName = sessionStorage.getItem("staffName");
|
|
|
that.storeName = sessionStorage.getItem("storeName");
|
|
|
that.storeNum = JSON.parse(sessionStorage.getItem("storeInfo")).storeNum;
|
|
|
that.headOffice =
|
|
|
sessionStorage.getItem("headOffice") == 1 ? "总店" : "分店";
|
|
|
console.log('that.headOffice--->',that.headOffice)
|
|
|
if (!that.roleName) {
|
|
|
that.roleName = sessionStorage.getItem("roleName");
|
|
|
}
|
|
|
}, 800);
|
|
|
},
|
|
|
mounted() {
|
|
|
window.service = 'true'
|
|
|
},
|
|
|
destroyed() {
|
|
|
window.removeEventListener("resize", this.getHeight);
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.el-main {
|
|
|
height: calc(100vh - 70px);
|
|
|
}
|
|
|
body {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.layout-wrapper .el-aside {
|
|
|
width: auto !important;
|
|
|
height: 100% !important;
|
|
|
}
|
|
|
|
|
|
.el-aside::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.icon-store {
|
|
|
color: white;
|
|
|
font-size: 24px;
|
|
|
position: relative;
|
|
|
top: 6px;
|
|
|
margin-right: 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.editpassword .el-input {
|
|
|
width: 200px;
|
|
|
}
|
|
|
|
|
|
.elheader {
|
|
|
width: 100%;
|
|
|
height: 58px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
/* background: green !important;
|
|
|
z-index: 9999; */
|
|
|
}
|
|
|
|
|
|
.el-header {
|
|
|
overflow: hidden;
|
|
|
height: 58px !important;
|
|
|
}
|
|
|
|
|
|
.headerLeft {
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
.headertitle {
|
|
|
font-size: 24px;
|
|
|
margin: 10px;
|
|
|
line-height: 50px;
|
|
|
color: white;
|
|
|
/* color: #006400; */
|
|
|
}
|
|
|
|
|
|
.icon-plat-form {
|
|
|
font-size: 32px;
|
|
|
color: white;
|
|
|
position: relative;
|
|
|
top: 5px;
|
|
|
}
|
|
|
|
|
|
.icon-setpassword {
|
|
|
font-size: 24px;
|
|
|
position: relative;
|
|
|
top: 6px;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.butlog {
|
|
|
margin-top: 10px;
|
|
|
margin-right: 20px;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
.collapse {
|
|
|
font-size: 28px;
|
|
|
line-height: 58px;
|
|
|
text-align: center;
|
|
|
width: 64px;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.head_text {
|
|
|
width: 150px;
|
|
|
height: 58px;
|
|
|
line-height: 58px;
|
|
|
color: white;
|
|
|
font-weight: 700;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.header-two {
|
|
|
/* （内边距为0） */
|
|
|
padding: 0;
|
|
|
/* （宽度自动占满） */
|
|
|
width: 100%;
|
|
|
/* （内容居中显示） */
|
|
|
text-align: center;
|
|
|
/* （设置固定高度） */
|
|
|
height: 58px !important;
|
|
|
}
|
|
|
.elfooter {
|
|
|
padding: 0;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
height: 20px !important;
|
|
|
/* border: 1px solid black; */
|
|
|
}
|
|
|
</style>
|