<!-- 动态路由公共组件 -->
|
<template>
|
<el-container class="layout">
|
<el-header class="layout_header">
|
<img src="../../assets/logo.png">
|
<!-- <div class="logo_titles">面向现代制造的混凝土管片智慧工厂</div> -->
|
<div class="header_close">
|
<el-dropdown @command="quitSystem">
|
<span class="el-dropdown-link">
|
<i class="el-icon-user"></i>
|
{{realName}}
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="password">
|
<i class="el-icon-key"></i>
|
修改密码
|
</el-dropdown-item>
|
<el-dropdown-item command="logout">
|
<i class="el-icon-switch-button"></i>
|
退出登录
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</el-header>
|
<el-container style="overflow: hidden;">
|
<el-aside class="layout_sider" width="230px">
|
<layout-aside></layout-aside>
|
</el-aside>
|
<el-main class="layout_content">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<!-- <template v-for="item in routerList">
|
<el-breadcrumb-item :key="item.meta.menuId">{{item.meta.title}}</el-breadcrumb-item>
|
</template> -->
|
</el-breadcrumb>
|
<transition>
|
<router-view />
|
</transition>
|
</el-main>
|
</el-container>
|
<!-- 修改密码 -->
|
<el-dialog
|
class="prop_dialog"
|
:close-on-click-modal="false"
|
title="修改密码"
|
:visible.sync="asyncPassword"
|
width="35%">
|
<el-form ref="form" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form">
|
<el-form-item label="旧密码：" prop="oldPassword">
|
<el-input v-model="ruleForm.oldPassword" type="password" clearable placeholder="请输入新密码"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码：" prop="password">
|
<el-input v-model="ruleForm.password" type="password" clearable placeholder="请输入新密码"></el-input>
|
</el-form-item>
|
<el-form-item label="确认新密码：" prop="tpassword">
|
<el-input v-model="ruleForm.tpassword" type="password" clearable placeholder="请再次输入新密码"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncPassword = false">取 消</el-button>
|
<el-button class="submit_btn" @click="updatePawssword"> 提 交</el-button>
|
</div>
|
</el-dialog>
|
</el-container>
|
</template>
|
|
<script>
|
import { changeSize } from "../../plugins/public";
|
import LayoutAside from './components/LayoutAside.vue'; // 导航菜单组件
|
export default {
|
components: {
|
LayoutAside
|
},
|
data() {
|
const validatePass = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入密码'));
|
} else {
|
// if (this.ruleForm.oldPassword !== '') {
|
// this.$refs.form.validateField('oldPassword');
|
// }
|
callback();
|
}
|
};
|
const validatePass2 = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入新密码'));
|
} else {
|
callback();
|
}
|
};
|
const validatePass3 = (rule, value, callback) => {
|
if (value !==this.ruleForm.password) {
|
callback(new Error('两次输入的密码不一致！！！'));
|
}else {
|
callback();
|
}
|
};
|
return {
|
size: changeSize(),
|
realName:sessionStorage.getItem('realName'),
|
asyncPassword: false, // 修改密码
|
ruleForm: {}, // 修改密码表单
|
rules: {
|
oldPassword: [{
|
required: true,
|
validator: validatePass,
|
trigger: 'blur'
|
}],
|
password: [{
|
required: true,
|
validator: validatePass2,
|
trigger: 'blur'
|
}],
|
tpassword: [{
|
required: true,
|
validator: validatePass3,
|
trigger: 'blur'
|
}],
|
}, // 表单验证
|
routerList: [], // 路由信息
|
};
|
},
|
mounted() {
|
this.routerList = this.$route.matched.map(item => {
|
return {
|
path: item.path,
|
meta: item.meta
|
}
|
})
|
},
|
methods: {
|
// 退出登录
|
quitSystem(val) {
|
if(val === 'logout'){
|
this.$confirm("您要退出本系统，是否继续？","提示", {
|
confirmButtonText: "确定",
|
cancelButtonTexy: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$api.System.logingOut({}).then(res => {
|
if(res.statusMsg === 'ok') {
|
sessionStorage.clear();
|
this.$router.replace('/login');
|
this.$message.success('退出成功！');
|
}
|
})
|
})
|
.catch(() => {
|
this.$message.info('您已取消！');
|
})
|
}else{
|
this.asyncPassword = true
|
}
|
},
|
// 提交修改密码
|
updatePawssword() {
|
this.$refs.form.validate(valid => {
|
if(valid) {
|
let params = {
|
oldPassword:this.ruleForm.oldPassword,
|
password:this.ruleForm.password
|
}
|
this.$api.System.updatePasswordInfo(params).then((res) => {
|
if (res?.statusMsg === 'ok') {
|
this.asyncPassword = false;
|
this.$message.success('修改成功！')
|
this.$router.replace('/login');
|
} else {
|
this.$message.warning(res?.statusMsg);
|
}
|
})
|
}
|
})
|
}
|
},
|
watch: {
|
$route() {
|
this.routerList = this.$route.matched.map(item => {
|
return {
|
path: item.path,
|
meta: item.meta
|
}
|
})
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../style/layout-main.scss';
|
.layout {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
background: linear-gradient(
|
150deg,
|
rgba(17, 55, 97, 1) 8%,
|
rgba(10, 33, 66, 1) 92%);
|
|
.layout_header {
|
position: relative;
|
display: flex;
|
align-items: center;
|
color: #fff;
|
background: transparent;
|
.logo_titles{
|
color: #39B5FE;
|
font-size: 24px;
|
font-weight: 900;
|
font-family:"Microsoft YaHei";
|
-webkit-text-stroke: 0.2px #ffffff;
|
}
|
img{
|
margin-right: 10px;
|
}
|
|
.header_close {
|
position: absolute;
|
top: 50%;
|
right: 2%;
|
transform: translateY(-50%);
|
}
|
}
|
|
.layout_content {
|
position: relative;
|
padding: 20px 20px 0;
|
background: url('../../assets/main_bg.jpg')no-repeat;
|
background-size: 100% 100%;
|
overflow: hidden;
|
|
&::before {
|
position: absolute;
|
content: '';
|
width: calc(100% - 30px);
|
height: calc(100% - 15px);
|
background: rgba($color: #040D1A, $alpha: .7);
|
}
|
|
/deep/ .el-breadcrumb__inner {
|
color: #14C6CD;
|
|
&:last-of-type {
|
color: #18F5DB;
|
}
|
}
|
}
|
|
.layout_sider {
|
margin: 0;
|
height: 100%;
|
border-right: none;
|
background: transparent;
|
overflow: hidden;
|
}
|
}
|
/deep/.el-dropdown{
|
color: #fff;
|
cursor: pointer;
|
&:hover{
|
color: #39B5FE;
|
}
|
}
|
::v-deep .el-input--small .el-input__inner{
|
border:1px solid #39B5FE;
|
background-color: transparent;
|
color: #fff;
|
}
|
</style>
|
