You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

827 lines
23 KiB

<template>
<div style="background: #F4F8FF">
<div style="position: absolute; top:15px;right:5px; z-index: 1000;">
<i class="el-icon-close" @click="windowClose" style="padding-right: 5px;font-size: 22px;cursor:pointer;"></i>
</div>
<div>
<el-container>
<el-header style="height:50px; line-height: 40px" class="principalheader">
<div class="navs">
<img src="@/assets/images/logo2.png" alt="" style="width: 24px; height: 24px" />
<div class="maintitle">神豚体检管理系统</div>
<!--动态生成菜单 add by pengj 'text-align: center;width:' + (window.pageWidth - 280) + 'px;display:flex;'
<div :style="'display:flex;justify-content:center;width:' + (window.pageWidth - 300) + 'px;'">
<div v-for="menu in menuPriv" :key="menu.id"
:class="className == menu.displayName ? `actived ${menu.displayName}` : menu.displayName">
<el-dropdown @command="handleCommand" class="">
<span class="el-dropdown-link" style="margin:0 5px;">{{ menu.displayName }}</span>
<el-dropdown-menu slot="dropdown" class="project-dropdown">
<el-dropdown-item v-for="page in menu.treeChildren" :key="page.id"
:command="beforeHandleCommand(menu.displayName, page.routeUrl)" class="dropdownmain">
{{ page.displayName }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
-->
<!--动态生成菜单支持多级 add by pengj -->
<div
:style="
'display:flex;justify-content:center;width:' +
(window.pageWidth - 200) +
'px;'
"
>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
style="display: flex"
>
<!--1级菜单-->
<template v-for="menu1 in menuPriv">
<el-menu-item
:key="menu1.id"
v-if="menu1.menuType == '1'"
:index="menu1.id"
>
{{ menu1.displayName }}
</el-menu-item>
</template>
<template v-for="menu1 in menuPriv">
<el-submenu
:popper-append-to-body="false"
:key="menu1.id"
v-if="menu1.menuType == '0'"
:index="menu1.id"
>
<template slot="title">{{ menu1.displayName }}</template>
<!--2级菜单-->
<template v-for="menu2 in menu1.treeChildren">
<el-menu-item
:key="menu2.id"
v-if="menu2.menuType == '1'"
:index="menu2.id"
>{{ menu2.displayName }}</el-menu-item
>
</template>
<template v-for="menu2 in menu1.treeChildren">
<el-submenu
:popper-append-to-body="false"
:key="menu2.id"
v-if="menu2.menuType == '0'"
:index="menu2.id"
class="submenutitle"
>
<template slot="title"><div style="padding:0 10px;margin-right: 8px;">{{ menu2.displayName }}</div></template>
<!--3级菜单-->
<template v-for="menu3 in menu2.treeChildren">
<el-menu-item
:key="menu3.id"
v-if="menu3.menuType == '1'"
:index="menu3.id"
>{{ menu3.displayName }}</el-menu-item
>
</template>
<template v-for="menu3 in menu2.treeChildren">
<el-submenu
:popper-append-to-body="false"
:key="menu3.id"
v-if="menu3.menuType == '0'"
:index="menu3.id"
>
<template slot="title"><div style="padding:0 10px;margin-right: 8px;">{{menu3.displayName}}</div></template>
<!--4级菜单-->
<template v-for="menu4 in menu3.treeChildren">
<el-menu-item
:key="menu4.id"
v-if="menu4.menuType == '1'"
:index="menu4.id"
>{{ menu4.displayName }}</el-menu-item
>
</template>
<template v-for="menu4 in menu3.treeChildren">
<el-submenu
:popper-append-to-body="false"
:key="menu4.id"
v-if="menu4.menuType == '0'"
:index="menu4.id"
>
<template slot="title"><div style="padding:0 10px;margin-right: 8px;">{{menu4.displayName}}</div></template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-menu>
</div>
<!-- -->
<div class="btn">
<img src="@/assets/images/me.png" alt="" class="currentuser" />
<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
<el-dropdown>
<span
class="el-dropdown-link"
style="color: #222531; font-weight: 700"
>
<!-- <img
src="@/assets/images/frame.png"
alt=""
style="width: 20px; height: 20px"
class="operateimg"
/> -->
{{ user }} <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="logout"
>退出登录</el-dropdown-item
>
<el-dropdown-item @click.native="editpassword"
>修改密码</el-dropdown-item
>
<el-dropdown-item @click.native="localSet">本地设置</el-dropdown-item>
<el-dropdown-item v-if="LocalConfig.normal.isDevTool" @click.native="toggleDevTools"
>调试工具</el-dropdown-item
>
<el-dropdown-item @click.native="clientConfigShow">客户端参数</el-dropdown-item>
<el-dropdown-item @click.native="windowMin"
>最小化</el-dropdown-item
>
<!--
<el-dropdown-item @click.native="windowMax"
>最大化</el-dropdown-item
>
<el-dropdown-item @click.native="windowClose"
>关闭</el-dropdown-item
>
-->
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-header>
<!-- 修改密码弹框 -->
<el-dialog
title="修改密码"
:visible.sync="dialogVisible"
width="30%"
:close-on-click-modal="false"
>
<el-form
:model="form"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-form-item label="旧密码" prop="oldPassWord">
<el-input
v-model="form.oldPassWord"
autocomplete="new-password"
show-password
></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassWord">
<el-input
v-model="form.newPassWord"
autocomplete="new-password"
show-password
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="newPassWord">
<el-input
v-model="confirmpassword"
type="password"
autocomplete="new-password"
show-password
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="determine">确 定</el-button>
</span>
</el-dialog>
<el-container>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
<div>
<!--通用本地参数设置-->
<el-dialog title="本地参数设置" :visible.sync="dialogWin.LocalConfig" :close-on-click-modal="false" :append-to-body="true"
width="800px" height="600px">
<LocalConfig />
</el-dialog>
</div>
</div>
</template>
<script>
///api/app/item/in-filter
import router from "@/router";
import { getapi, postapi } from "@/api/api";
import { mapState } from "vuex";
import { getTreeNode, madeTree } from "../utlis/tree";
import { deepCopy } from "@/utlis/proFunc";
import LocalConfig from "../components/common/LocalConfig.vue";;
export default {
components: {
LocalConfig,
},
data() {
return {
activeIndex: "0",
menuPriv: [], // 菜单权限
className: "",
index: 1,
isCollapse: false,
user: "",
dialogVisible: false,
password: "",
form: {
oldPassWord: "",
newPassWord: "",
},
confirmpassword: "",
rules: {
oldPassWord: [
{ required: true, message: "请输入旧密码", trigger: "blur" },
],
newPassWord: [
{ required: true, message: "请输入新密码", trigger: "blur" },
],
},
LocalConfig: {
normal: { // 常规参数
isDevTool: false, // 壳端是否显示打开调试工具的按钮
}
},
LocalConfigInit:{},
};
},
computed: {
...mapState(["window", "dialogWin"]),
},
created() {
let expires_in = parseInt(window.sessionStorage.getItem("expires_in"));
//console.log("dqtime / expires_in",dqtime,expires_in)
if (!expires_in) {
router.push({ path: "/Login" });
return;
}
this.password = this.changepassword;
// console.log(this.password);
// console.log(this.$store.state.changepassword, "ssssssssssss");
this.user = window.sessionStorage.getItem("user");
//获取当前用户的菜单权限
this.getUserAllPriv();
// this.getUserMenuPriv();
this.LocalConfigInit = deepCopy(this.LocalConfig)
let LocalConfig = window.localStorage.getItem("LocalConfig") || null
try {
this.LocalConfig = Object.assign({}, this.LocalConfig, JSON.parse(LocalConfig) || {})
} catch (error) {
console.log('window.localStorage.getItem("LocalConfig")', error)
}
},
methods: {
// 菜单操作
handleSelect(key, keyPath) {
// console.log(key, keyPath);
// tree: any, childNodeName: any, idName: any, idVal: any
let node = getTreeNode(this.menuPriv, "treeChildren", "id", key);
if (node&&this.$route.path!=='/'+node.routeUrl) this.$router.push({ path: node.routeUrl });
},
//获取用户所有权限
getUserAllPriv() {
getapi("/api/app/menuinfo/getmymenuinfolist").then((res) => {
if (res.code > -1) {
window.sessionStorage.setItem("userPriv", JSON.stringify(res.data));
let menuPriv = res.data.filter(e => { return e.menuType == '0' || e.menuType == '1' })
this.menuPriv = madeTree(menuPriv, 'treeChildren', 'parentId', 'id', null)
this.menuPriv = this.menuFilter(this.menuPriv)
}
});
},
//获取用户菜单树
getUserMenuPriv() {
getapi("/api/app/menuinfo/getmymenuinfotreelist").then((res) => {
if (res.code > -1) {
this.menuPriv = res.data;
this.menuPriv = this.menuFilter(this.menuPriv);
console.log("this.menuPriv", this.menuPriv);
}
});
},
// 过滤菜单
menuFilter(menu) {
return menu.filter((e) => {
if (e.menuType == "0" || e.menuType == "1") {
if (e.treeChildren && e.treeChildren.length > 0) {
let temp = e.treeChildren.filter((e1) => {
return e1.menuType == "0" || e1.menuType == "1";
});
if (temp.length > 0) {
e.menuType = "0";
e.treeChildren = this.menuFilter(e.treeChildren);
} else {
e.menuType = "1";
}
} else {
e.menuType = "1";
}
return e;
}
});
},
handleCommand(val) {
this.className = val.flag;
if (this.router.path != val.command) {
this.router.path = val.command;
this.$router.push({ path: val.command }).catch(() => {});
}
// let menuId = arguments[1].$parent.$el.id
// let menuList = document.getElementById(menuId)
// console.log(menuList)
},
beforeHandleCommand(flag, command) {
return {
flag: flag,
command: command,
};
},
//确定修改密码按钮
determine() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
if (this.form.oldPassWord != this.password) {
this.$message.warning("旧密码输入错误");
} else if (this.confirmpassword != this.form.newPassWord) {
this.$message.warning("二次输入的密码不一致");
} else {
postapi("/api/identity/users/updatepassword", this.form).then(
(res) => {
console.log("修改成功");
this.dialogVisible = false;
}
);
}
}
});
},
//修改密码
editpassword() {
this.dialogVisible = true;
console.log(this.password);
},
//退出登录
logout() {
// window.sessionStorage.removeItem("tokentype");
// window.sessionStorage.removeItem("token");
// window.sessionStorage.removeItem(['expires_in','tokentype','refresh_token','user','token'])
window.sessionStorage.clear();
this.$router.push({ path: "/login" });
},
// 本地设置
localSet() {
// this.dialogWin.LocalConfig = true
this.$router.push({ path: "/LocalConfig" });
},
//打开客户端调试工具
toggleDevTools() {
if (!this.$peisAPI) {
this.$message.info("此功能,需要在壳客户端才可运行!");
return;
}
this.$peisAPI.clientConfigShow();
},
// 打开客户端设置
clientConfigShow() {
if (!this.$peisAPI) {
this.$message.info("此功能,需要在壳客户端才可运行!")
return
}
this.$peisAPI.clientConfigShow();
},
// 最小化
windowMin() {
if (!this.$peisAPI) {
this.$message.info("此功能,需要在壳客户端才可运行!");
return;
}
this.$peisAPI.windowMin();
},
// 最大化
windowMax() {
if (!this.$peisAPI) {
this.$message.info("此功能,需要在壳客户端才可运行!");
return;
}
this.$peisAPI.windowMax();
},
windowClose() {
if (!this.$peisAPI) {
this.$message.info("此功能,需要在壳客户端才可运行!");
return;
}
this.$peisAPI.windowClose();
},
},
components: { router },
};
</script>
<style scoped>
@import "../assets/css/global_card.css";
:deep .el-dropdown-menu__item {
color: #52555f;
font-size: 14px;
font-weight: 400;
font-family: "NotoSansSC-Regular";
}
.dropdownmain:hover,
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: rgba(20, 96, 243, 0.1);
color: #396ffa;
/* color: #2BCA84; */
font-weight: 700;
font-size: 14px;
font-family: "NotoSansSC-Bold";
}
.titleimg :hover {
width: 30px;
background-color: rgb(34, 149, 98);
z-index: 99;
}
.el-dropdown-link:hover {
/* background-color: rgb(202, 249, 203); */
color: #396ffa;
font-weight: 700;
/* background-color: ; */
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
font-family: "NotoSansSC-Bold";
}
.dropdowncolor {
font-size: 12px;
}
.el-dropdown {
color: rgb(140, 135, 134);
font-size: 12px;
}
.currentuser {
width: 32px;
height: 32px;
position: relative;
right: 2%;
top: 10px;
color: #000;
font-size: 18px;
z-index: 99;
}
.registrationimgimges {
width: 20px;
height: 20px;
position: absolute;
left: -15px;
top: 15px;
}
.commonsettingimg {
width: 20px;
height: 20px;
position: absolute;
left: -15px;
top: 15px;
}
.chargeimg {
position: absolute;
left: -15px;
top: 15px;
}
.basicimg {
position: absolute;
left: -17px;
top: 15px;
}
.iconimg {
position: absolute;
left: 0px;
top: 10px;
}
.el-dropdown-link {
font-size: 14px;
margin: 0;
font-weight: 400;
color: #52555f;
font-family: "NotoSansSC-Regular";
}
.principalheader {
background-color: #fff;
opacity: 1;
/* opacity: 0.8;
opacity: 0.8; */
color: #ccc;
border: 1px solid #ccc;
}
.el-dropdown-item {
text-align: center;
}
/*
.el-dropdown-menu {
text-align: center;
overflow: scroll;
max-height: 500px;
width: 150px;
overflow-x: hidden;
margin-left: 5%;
}
*/
.el-header {
position: fixed;
padding: 0 10px;
/* top:0;
left: 0; */
width: 100%;
overflow: hidden;
overflow: auto;
z-index: 999;
}
.el-container {
/* position: fixed; */
width: 100%;
}
.el-menu {
border-right: none;
}
.navs {
display: flex;
align-items: center;
/* justify-content: space-between; */
flex-flow: 1;
}
::v-deep .el-card__body {
/* height: 90vh; */
height: 100%;
overflow-y: auto;
}
.maintitle {
width: 180px;
font-size: 20px;
font-weight: 600;
color: #232748;
margin-left: 10px;
font-family: "NotoSansSC-Bold";
}
::v-deep .el-dropdown-menu item:not(.is-disabled) {
color: #fff;
}
.el-header {
height: 40px;
}
::v-deep .el-select-dropdown {
background: #ccc;
}
.operateimg {
position: relative;
left: 0;
top: 5px;
}
.el-aside {
/* height: calc(100vh, -70px); */
height: calc(100vh - 0px);
/* height: 100%; */
height: 91.5vh;
/* height: 100%; */
/* height: calc(100vh, -0px); */
}
.el-main {
margin-top: 50px;
height: calc(100vh, -70px);
}
.el-menu-vertical-demo .el-menu {
/* min-height: 100vh; */
height: calc(100vh, -70px);
}
.btn {
width: 120px;
color: #000;
font-weight: 700;
/* margin-left: 60%; */
/* position: relative;
right: -70%; */
margin-left: auto;
}
.collapseandunfoled {
text-align: center;
line-height: 40px;
display: block;
font-size: 18px;
font-weight: 700;
color: #fff;
}
/* .actived {
color: #396FFA!important;
border-bottom: 4px solid #396FFA;
font-weight: 700;
} */
.actived .el-dropdown-link {
color: #396ffa !important;
font-weight: 700;
font-family: "NotoSansSC-Bold";
}
.actived .el-dropdown-link:after {
content: "";
width: 100%;
height: 3px;
background-color: #396ffa;
position: absolute;
bottom: 4px;
left: 0;
}
::v-deep .el-submenu__title {
color: #FF0000;
}
::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
font-size: 14px;
height: 47px;
line-height: 47px;
font-weight: 700;
font-family: "NotoSansSC-Bold";
color: #52555f;
border-bottom: 3px solid #396ffa;
}
/* ::v-deep .submenutitle.is-active .el-submenu__title{
border-bottom:none
} */
::v-deep .submenutitle .el-submenu__title {
height: 36px !important;
line-height: 36px !important;
}
::v-deep .el-menu--horizontal > .el-menu-item {
height: 40px;
line-height: 40px;
}
::v-deep .el-submenu__title {
padding: 0 5px 0 5px !important;
}
::v-deep .el-menu--popup {
min-width: auto !important;
/* padding: 5px 10px !important; */
}
::v-deep .el-submenu .el-menu-item {
min-width: auto !important;
}
::v-deep .el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
font-size: 14px;
font-weight: 400;
font-family: "NotoSansSC-Regular";
color: #52555f;
}
:v-deep .el-menu-item .is-active {
background-color: #247bb4 !important;
}
::v-deep .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
background-color: rgba(20, 96, 243, 0.1);
font-size: 14px;
font-weight: 700;
font-family: "NotoSansSC-Bold";
color: #396ffa;
}
/* ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
display: none;
} */
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{
vertical-align: middle;
margin-left: 8px;
margin-top: -3px;
position: absolute;
top: 14px;
right: 4px;
}
::v-deep .submenutitle .el-submenu__title {
font-size: 14px !important;
font-weight: 400 !important;
font-family: "NotoSansSC-Regular" !important;
color: #52555f !important;
}
::v-deep .submenutitle .el-submenu__title:hover {
background-color: rgba(20, 96, 243, 0.1) !important;
font-size: 14px !important;
font-weight: 700 !important;
font-family: "NotoSansSC-Bold" !important;
color: #396ffa !important;
}
::v-deep .submenutitle .el-submenu__title {
height: 36px !important;
line-height: 36px !important;
}
::v-deep .submenutitle .el-submenu__title .el-submenu__icon-arrow {
font-size:14px !important;
}
::v-deep .el-menu--horizontal .el-menu .el-menu-item.is-active{
background-color: rgba(20, 96, 243, 0.1) !important;
font-size: 14px !important;
font-weight: 700 !important;
font-family: "NotoSansSC-Bold" !important;
color: #396ffa !important;
}
/* ::v-deep .el-menu--horizontal .el-menu .el-submenu.is-active .el-submenu__title{
background-color: rgba(20, 96, 243, 0.1) !important;
font-size: 14px !important;
font-weight: 700 !important;
font-family: "NotoSansSC-Bold" !important;
color: #396ffa !important;
} */
::v-deep .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
padding: 0 15px !important;
}
::v-deep .el-menu.el-menu--horizontal{
border-bottom:none;
}
/* ::v-deep .el-menu--popup-right-start{
margin-left: 15px !important;
} */
::v-deep .el-dropdown-menu__item,
.el-menu-item {
font-size: 14px;
padding: 0 5px;
}
::v-deep .el-icon-arrow-down:before {
content: "";
}
/* .project-dropdown{
max-height:300px;
overflow: auto;
}
.project-dropdown::-webkit-scrollbar
{
width: 5px;
height: 5px;
background-color: #F5F5F5;
}
.project-dropdown::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
} */
</style>