Skip to content

V
vue-gjjs
Commit 2b654086 by 潘际乾
Options

左侧菜单栏与header修改

parent d4a887dd
Showing with 486 additions and 108 deletions
src/assets/css/common.css
......@@ -61,6 +61,9 @@
.m-app {
background-color: var(--darkbgcolor);
}
.fold {
width: 60px !important;
}
/* sidemenu */
.el-menu {
background: var(--sidecolor);
......
src/components/SubMenu.vue 0 → 100644
<template>
<div>
<template v-for="(item, index) in subMenuList">
<el-submenu
v-if="item.children && item.children.length > 0"
:key="item.path + '_' + index"
:index="item.path + '_' + index"
>
<template slot="title">
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</template>
<SubMenu :subMenuList="item.children" />
</el-submenu>
<el-menu-item v-else :key="item.path" :index="item.path">
<template slot="title">
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</template>
</el-menu-item>
</template>
</div>
</template>
<script>
import SubMenu from "./SubMenu.vue";
export default {
name: "SubMenu",
components: { SubMenu },
props: ['subMenuList'],
};
</script>
<style>
.el-menu--collapse>div>.el-menu-item span,
.el-menu--collapse>div>.el-submenu>.el-submenu__title span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
</style>
src/components/Toolbars.vue
......@@ -44,7 +44,6 @@ export default {};
position: fixed;
top: 200px;
right: 0;
z-index: 10000;
}
.toolbars-popover {
padding: 0!important;
......
src/components/c-page.vue
<template>
<div class="c-page-container">
<div class="title">
<icon class="el-icon-location" style="color: #409eff;"></icon>
<i class="el-icon-location" style="color: #409eff;"></i>
<span>{{ title }}</span>
</div>
<div style="flex: 1; padding: 10px 20px; position: relative">
......
src/views/Layout/Header.vue
<template>
<div class="self-header">
<h2 class="self_header_label">新一代银行国际结算系统</h2>
<div class="user-operate">
<span @click="logout">退出登录</span>
<div class="self_header_label">
<h2>新一代银行国际结算系统</h2>
</div>
<div class="header-tool">
<div class="header-subInstName">
<!-- <marquee
v-if="subInstName.length > 12"
behavior="scroll"
direction="left"
scrollamount="3"
>{{ this.subInstName }}</marquee
> -->
<span v-if="subInstName.length <= 12">{{ this.subInstName }}</span>
</div>
<el-popover
class="header-tool-popover"
placement="bottom"
width="200"
trigger="hover"
>
<div class="header-tool-userdetail">
<div>{{ user.userName }}</div>
<div class="long-text" :title="user.userId">
<i class="el-icon-user" style="padding:0px 5px;"></i>
<span style="letter-spacing:1px;">{{ user.userId }}</span>
</div>
<div class="long-text" :title="user.instName">
<i class="el-icon-office-building" style="padding:0px 5px;"></i>
{{ user.instName }}
</div>
<div class="long-text" :title="user.roleName">
<i class="el-icon-collection-tag" style="padding:0px 5px;"></i>
{{ user.roleName }}
</div>
<el-row class="header-tool-userdetail-action">
<el-button @click="showChgPwdDialog" size="small" style="width:100%"
>修改密码</el-button
>
<el-button
@click="showLogoutDialog(false)"
size="small"
style="width:100%;margin-left:0px;margin-top:5px"
>用户签退</el-button
>
<el-button
@click="showLogoutDialog(true)"
size="small"
style="width:100%;margin-left:0px;margin-top:5px"
>强制签退</el-button
>
</el-row>
</div>
<div class="header-tool-item" slot="reference">
<div>
<i class="el-icon-user"></i>
<span class="header-tool-item-text">{{ user.userName }}</span>
<i class="el-icon-arrow-down" style="font-size: 12px;"></i>
</div>
</div>
</el-popover>
<el-popover
class="header-tool-popover"
placement="bottom"
width="80"
trigger="hover"
>
<ul class="header-tool-item-list">
<li @click="handleLangCn">中文</li>
<li @click="handleLangEn">English</li>
</ul>
<div class="header-tool-item header-tool-item-text" slot="reference">
<i class="el-icon-setting" style="font-size:14px;"></i>
{{ lang == "cn" ? "中文" : "En" }}
<i class="el-icon-arrow-down" style="font-size:12px;"></i>
</div>
</el-popover>
<el-popover placement="bottom" width="450" trigger="hover">
<div>
<el-col :span="24">
<el-col :span="24">
<c-page title="公告">
<c-table :data="noticeboardData">
<el-table-column label="公告内容" prop="noticeContent"></el-table-column>
<el-table-column label="发布人" prop="publisher"></el-table-column>
<el-table-column label="发布日期" prop="publishDate"></el-table-column>
</c-table>
</c-page>
</el-col>
</el-col>
</div>
<div class="header-tool-item" slot="reference">
<i class="el-icon-bell"></i>
<span class="header-tool-item-text" style="padding-left:7px;">通知</span>
</div>
</el-popover>
<span class="header-tool-item-text">会计日期: {{ accDate }}</span>
</div>
</div>
</template>
<script>
import cPage from '../../components/c-page.vue';
export default {
components: { cPage },
data() {
return {
lang: this.$store.state.I18n.lang,
txName: "",
user: {
userName: this.$store.state.UserContext.userName || "Admin",
roleName: window.sessionStorage.roleName || "超级管理员",
instName: window.sessionStorage.instName || "北京分行",
userId: this.$store.state.UserContext.userId || "2124221421214",
},
rules: {
username: [{ type: "string", required: true, message: "请填写用户名" }],
password: [{ type: "string", required: true, message: "请填写密码" }],
},
dialogOpen: false,
loading: false,
count: "",
accDate: window.sessionStorage.accDate || "",
noticeboardData: []
};
},
computed: {
subInstName() {
// let subStrList = window.sessionStorage.instName.split("股份有限公司");
// let length = subStrList.length;
// return subStrList[length - 1];
return "北京分行";
},
},
methods: {
logout() {
this.$store.commit("UserContext/setLogout");
this.$router.push("/login");
}
}
}
},
handleLangCn() {
this.$store.commit("I18n/setLang", "cn");
this.lang = "cn";
},
handleLangEn() {
this.$store.commit("I18n/setLang", "en");
this.lang = "en";
},
showLogoutDialog(flg) {
this.$refs.logoutform.show(flg);
},
showChgPwdDialog() {
this.$refs["chgPwdForm"].dialogOpen = true;
},
},
};
</script>
<style>
.self-header{
.self-header {
height: 100%;
/* background-color: #eeeeee; */
/* margin-bottom: 5px; */
background-image: url("../../assets/head_bg.png");
}
.self-header h2{
}
.self-header h2 {
margin: 0;
padding: 0;
}
.self_header_label{
color: antiquewhite;
}
.self_header_label {
/* color: antiquewhite; */
color: #fff;
/* margin-top: 10px !important; */
position: relative;
top:15px;
left:2em;
}
.user-operate{
top: 22px;
/* left: 10px; */
padding: 0px 15px;
display: inline-table;
vertical-align: top;
font-family: "KaiTi";
/* border-left: 1px solid antiquewhite; */
border-left: 1px solid #fff;
}
.header-subInstName {
display: inline-block;
margin-right: 12px;
text-align: right;
color: #fff;
font-size: 12px;
padding: 0px 15px 0px 0px;
border-right: 1px solid antiquewhite;
}
.self-header {
height: 100%;
/* background-color: #eeeeee; */
/* margin-bottom: 5px; */
background-image: url("../../assets/head_bg.png");
position: relative;
padding: 0px 0px 0px 12px;
background-size: cover;
}
.self-header h2 {
margin: 0;
padding: 0;
font-size: 22px;
display: inline;
}
.self_header_label {
/* color: antiquewhite; */
color: #fff;
/* margin-top: 10px !important; */
position: relative;
top: 22px;
/* left: 10px; */
padding: 0px 15px;
display: inline-table;
vertical-align: top;
font-family: "KaiTi";
/* border-left: 1px solid antiquewhite; */
border-left: 1px solid #fff;
}
.self_header_label p {
font-family: "Times New Roman", Times, serif;
text-align: center;
font-style: italic;
margin: 0;
padding: 0;
font-size: 12px;
display: inline;
}
.header-tool {
position: absolute;
right: 20px;
color: #FFF;
}
.user-operate span{
text-align: right;
right: 35px;
top: 22px;
color: #fff;
font-size: 14px;
}
.header-tool-item {
display: inline-block;
margin-right: 12px;
cursor: pointer;
}
.user-operate span:hover{
color: #e6a23c;
}
}
.header-tool-userdetail {
text-align: center;
}
.header-tool-item-text {
font-size: 12px;
}
.header-tool-item-list {
padding: 0;
margin: 0;
}
.header-tool-userdetail-action {
margin-top: 10px;
}
.header-tool-item-list li {
list-style: none;
padding: 5px;
text-align: center;
color: #606266;
cursor: pointer;
}
.header-tool-item-list li:hover {
background: rgba(144, 146, 152, 0.3);
}
.logoutdialog .el-dialog .el-dialog__header {
padding: 10px 20px 0px;
}
.logoutdialog .el-dialog .el-dialog__body {
padding: 20px 30px 0px 20px;
}
.logoutdialog .el-dialog .el-dialog__footer {
padding: 0px 20px 15px;
}
/* .header-tool-item-badge {
margin-top: 10px;
margin-right: 40px;
} */
.header-tool-item-badge .el-badge__content {
background-color: #f56c6c;
border-radius: 7px;
/* color: #FFF; */
display: inline-block;
font-size: 12px;
height: 14px;
line-height: 14px;
padding: 0 6px;
text-align: center;
white-space: nowrap;
border: 0px;
}
.long-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: left;
font-size: 12px;
}
.long-text:hover {
background-color: #e8f0fe;
}
</style>
src/views/Layout/SideMenu.vue
<template id='SideMenu'>
<template id="SideMenu">
<c-row>
<c-col :span="24">
<div class="eContainer-menu-search">
<c-button
icon="el-icon-s-fold"
v-if="menuOpen"
@click="closeMenu"
></c-button>
<c-button icon="el-icon-s-unfold" v-else @click="openMenu"></c-button>
<c-input
prefix-icon="el-icon-search"
v-if="menuOpen"
v-model="searchContent"
@keyup.enter.native="searchMenuEvent"
></c-input>
</div>
<c-content :height="250">
<img
src="../../assets/menu_bottom.png"
style="position: fixed; width: 200px; bottom: 0"
......@@ -12,83 +26,28 @@
:unique-opened="true"
@open="handleOpen"
@close="handleClose"
:collapse="!menuOpen"
>
<el-menu-item index="/business/office">
<i class="el-icon-menu"></i>
<span slot="title">主页</span>
</el-menu-item>
<el-submenu
v-for="item in selPntMinu"
:key="item.inifrm"
:index="item.inifrm"
>
<template slot="title">
<span>{{ item.ininam }}</span>
</template>
<el-menu-item
v-for="it in selMinu(item.inifrm)"
:key="it.inifrm"
:index="'/business/' + it.inifrm"
>
<i class="el-icon-document"></i>
<span slot="title">{{ it.ininam }}</span>
</el-menu-item>
</el-submenu>
<!-- <el-submenu index="0">
<template slot="title">
<span>公共夹</span>
</template>
<el-menu-item index="/business/sptsel">
<i class="el-icon-document"></i>
<span slot="title">待办任务</span>
</el-menu-item>
<el-menu-item index="/business/trnrel">
<i class="el-icon-document"></i>
<span slot="title">复核任务</span>
</el-menu-item>
</el-submenu>
<el-submenu index="1">
<template slot="title">
<span>汇款</span>
</template>
<el-menu-item index="/business/cptopn">
<i class="el-icon-document"></i>
<span slot="title">汇出汇款</span>
</el-menu-item>
<el-menu-item index="/business/cptadv">
<i class="el-icon-document"></i>
<span slot="title">汇入汇款</span>
</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<span>国内证</span>
</template>
<el-menu-item index="/business/ditopn">
<i class="el-icon-document"></i>
<span slot="title">买方信用证开立</span>
</el-menu-item>
<el-menu-item index="/business/ditame">
<i class="el-icon-document"></i>
<span slot="title">信用证修改</span>
</el-menu-item>
<el-menu-item index="/business/ditsel">
<i class="el-icon-document"></i>
<span slot="title">信用证查询</span>
</el-menu-item>
</el-submenu> -->
<SubMenu :subMenuList="menus"></SubMenu>
</el-menu>
</c-col>
</c-content>
</c-row>
</template>
<script>
import Button from "../../components/Button.vue";
import SubMenu from "~/components/SubMenu.vue";
export default {
data: function () {
components: { Button, SubMenu },
data: function() {
return {
minu: [
menuOpen: true,
searchContent: "",
menuList: [
{ inifrm: "0", ininam: "公共夹", pntmiu: "" },
{ inifrm: "sptsel", ininam: "待办任务", pntmiu: "0" },
{ inifrm: "trnrel", ininam: "复核任务", pntmiu: "0" },
......@@ -104,33 +63,136 @@ export default {
{ inifrm: "3", ininam: "出口信用证", pntmiu: "" },
{ inifrm: "letopn", ininam: "出口信用证通知", pntmiu: "3" },
],
menusOrigin: [],
menus: [],
};
},
mounted() {
const arr = [];
this.generateMenuTree(arr);
this.menusOrigin = arr;
this.menus = this.menusOrigin;
},
methods: {
searchMenuEvent() {
if (this.searchContent.trim() === "") {
this.menus = this.menusOrigin;
return;
}
const res = [];
for (let i = 0; i < this.menusOrigin.length; i++) {
const menu = this.menusOrigin[i];
const r = this.eachItem(menu);
if (r !== null) {
res.push(r);
}
}
this.menus = res;
},
eachItem(item) {
if (item.name.indexOf(this.searchContent) > -1) {
// if (item.children.length > 0) {
// if (this.hasAvailableChild(item.children)) {
// return item;
// }
// return null;
// } else {
// // TODO 判断此处是否为叶子节点
// return item;
// }
return item;
}
const arr = [];
for (let i = 0; i < item.children.length; i++) {
const child = item.children[i];
const r = this.eachItem(child);
if (r !== null) {
arr.push(r);
}
}
if (arr.length > 0) {
return {
name: item.name,
path: item.path,
icon: item.icon,
children: arr,
};
}
return null;
},
hasAvailableChild(children) {
for (let i = 0; i < children.length; i++) {
const child = children.length[i];
if (child.children.length > 0) {
return this.hasAvailableChild(child.children);
} else {
// TODO 判断此处是否为叶子节点
return true;
}
}
},
generateMenuTree(list, item) {
for (let i = 0; i < this.menuList.length; i++) {
const menuItem = this.menuList[i];
if (!item) {
if (menuItem.pntmiu === undefined || menuItem.pntmiu === "") {
const children = [];
menuItem.path = "/business";
this.generateMenuTree(children, menuItem);
list.push({
name: menuItem.ininam,
path: menuItem.path,
icon: "el-icon-menu",
children,
});
}
} else {
if (menuItem.pntmiu === item.inifrm) {
const children = [];
menuItem.path = item.path + "/" + menuItem.inifrm;
this.generateMenuTree(children, menuItem);
list.push({
name: menuItem.ininam,
path: menuItem.path,
icon: "el-icon-document",
children,
});
}
}
}
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
openMenu() {
this.menuOpen = true;
const aside = document.querySelector("aside");
aside.className = aside.className.split(" ")[0];
},
computed: {
selMinu() {
return function (key) {
return this.minu.filter((it) => {
return it.pntmiu === key;
});
};
},
selPntMinu() {
return this.minu.filter((it) => {
return it.pntmiu === "" || it.pntmiu === undefined;
});
closeMenu() {
this.menuOpen = false;
const aside = document.querySelector("aside");
aside.className = aside.className + " fold";
},
},
};
</script>
<style scoped>
.eContainer-menu-search .el-button {
border: none;
font-size: 20px;
padding: 12px 20px;
}
.eContainer-menu-search .el-input {
width: auto;
position: absolute;
right: 20px;
top: 10px;
left: 60px;
}
.eContainer-scroller .el-scrollbar__wrap {
overflow: auto;
margin-right: 0px !important;
......@@ -178,6 +240,15 @@ export default {
width: 100%;
height: 40px;
}
</style>
<style>
.eContainer-menu-search .el-input .el-input__inner {
height: 30px;
}
.el-menu-vertical-demo.el-menu--collapse {
width: 60px;
}
.el-submenu__title,
.el-menu-item,
.el-submenu .el-menu-item {
......
src/views/Layout/index.vue
......@@ -26,7 +26,7 @@ import business from "../Business";
import toolbars from "~/components/Toolbars"
export default {
components: { headerCom, sideMenu, business, toolbars },
components: { headerCom, sideMenu, business, toolbars }
};
</script>
......@@ -39,4 +39,11 @@ export default {
box-sizing: border-box;
margin-right: 10px;
}
.el-aside {
height: 100%;
transition: width 300ms;
overflow: hidden;
padding-bottom: 68px;
box-sizing: border-box;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment