Skip to content

V
vue-gjjs
Commit f138393c by wangguangchao
Options

光大合并后添加菜单

parent b2e06c41
Showing with 241 additions and 218 deletions
src/views/Layout/SideMenu.vue
<template id="SideMenu"> <template id="SideMenu">
<c-row> <c-row>
<div class="eContainer-menu-search"> <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-fold"
v-if="menuOpen"
@click="closeMenu"
></c-button>
<c-button icon="el-icon-s-unfold" v-else @click="openMenu"></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" <!-- <c-input prefix-icon="el-icon-search" v-if="menuOpen" v-model="searchContent"
@keyup.enter.native="searchMenuEvent" placeholder="全局搜索"></c-input> --> @keyup.enter.native="searchMenuEvent" placeholder="全局搜索"></c-input> -->
<c-search-input v-show="menuOpen"></c-search-input> <c-search-input v-show="menuOpen"></c-search-input>
</div> </div>
<c-content :height="250"> <c-content :height="250">
<img src="../../assets/menu_bottom.png" style="position: fixed; width: 200px; bottom: 0" /> <img
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" v-bind:router="true" @open="handleOpen" src="../../assets/menu_bottom.png"
@close="handleClose" :collapse="!menuOpen"> style="position: fixed; width: 200px; bottom: 0"
/>
<el-menu
:default-active="activeMenu"
class="el-menu-vertical-demo"
v-bind:router="true"
@open="handleOpen"
@close="handleClose"
:collapse="!menuOpen"
>
<!-- <el-menu-item index="/business/office"> <!-- <el-menu-item index="/business/office">
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span slot="title">主页</span> <span slot="title">主页</span>
...@@ -21,247 +34,256 @@ ...@@ -21,247 +34,256 @@
</c-row> </c-row>
</template> </template>
<script> <script>
import Button from "../../components/Button.vue"; import Button from "../../components/Button.vue";
import SubMenu from "~/components/SubMenu.vue"; import SubMenu from "~/components/SubMenu.vue";
export default { export default {
components: { Button, SubMenu }, components: { Button, SubMenu },
data: function () { data: function () {
return { return {
menuOpen: true, menuOpen: true,
searchContent: "", searchContent: "",
menuList: [ menuList: [
// { inifrm: "0", ininam: "公共夹", pntmiu: "" }, // { inifrm: "0", ininam: "公共夹", pntmiu: "" },
// { inifrm: "sptsel", ininam: "待办任务", pntmiu: "0" }, // { inifrm: "sptsel", ininam: "待办任务", pntmiu: "0" },
// { inifrm: "trnrel", ininam: "复核任务", pntmiu: "0" }, // { inifrm: "trnrel", ininam: "复核任务", pntmiu: "0" },
// { inifrm: "diasel", ininam: "备忘录选择交易", pntmiu: "0" }, // { inifrm: "diasel", ininam: "备忘录选择交易", pntmiu: "0" },
{ inifrm: "1", ininam: "汇款", pntmiu: "" }, { inifrm: "1", ininam: "汇款", pntmiu: "" },
{ inifrm: "infcpd", ininam: "汇款查询", pntmiu: "1" }, { inifrm: "infcpd", ininam: "汇款查询", pntmiu: "1" },
{ inifrm: "cptopn", ininam: "汇出汇款", pntmiu: "1" }, { inifrm: "cptopn", ininam: "汇出汇款", pntmiu: "1" },
{ inifrm: "cptadv", ininam: "汇入汇款", pntmiu: "1" }, { inifrm: "cptadv", ininam: "汇入汇款", pntmiu: "1" },
{ inifrm: "2", ininam: "国内证", pntmiu: "" }, { inifrm: "2", ininam: "国内证", pntmiu: "" },
{ inifrm: "ditopn", ininam: "买方信用证开立", pntmiu: "2" }, { inifrm: "ditopn", ininam: "买方信用证开立", pntmiu: "2" },
{ inifrm: "ditame", ininam: "信用证修改", pntmiu: "2" }, { inifrm: "ditame", ininam: "信用证修改", pntmiu: "2" },
{ inifrm: "ditsel", ininam: "信用证查询", pntmiu: "2" }, { inifrm: "ditsel", ininam: "信用证查询", pntmiu: "2" },
{ inifrm: "infbdd", ininam: "买方信用证单据查询", pntmiu: "2" }, { inifrm: "infbdd", ininam: "买方信用证单据查询", pntmiu: "2" },
{ inifrm: "bdtudp", ininam: "国内证承兑", pntmiu: "2" }, { inifrm: "bdtudp", ininam: "国内证承兑", pntmiu: "2" },
{ inifrm: "3", ininam: "出口信用证", pntmiu: "" }, { inifrm: "3", ininam: "出口信用证", pntmiu: "" },
{ inifrm: "letopn", ininam: "出口信用证通知", pntmiu: "3" }, { inifrm: "letopn", ininam: "出口信用证通知", pntmiu: "3" },
{ inifrm: "letame", ininam: "出口信用证修改", pntmiu: "3" }, { inifrm: "letame", ininam: "出口信用证修改", pntmiu: "3" },
{ inifrm: "letrsv", ininam: "出口信用证补通知", pntmiu: "3" }, { inifrm: "letrsv", ininam: "出口信用证补通知", pntmiu: "3" },
{ inifrm: "4", ininam: "进口代收", pntmiu: "" }, { inifrm: "4", ininam: "进口信用证", pntmiu: "" },
{ inifrm: "bctacc", ininam: "进口代收承兑", pntmiu: "4" }, { inifrm: "inflid", ininam: "进口信用证查询", pntmiu: "4" },
{ inifrm: "5", ininam: "静态参数管理", pntmiu: "" }, { inifrm: "litopn", ininam: "进口信用证开立", pntmiu: "4" },
{ inifrm: "infusr", ininam: "用户信息", pntmiu: "5" }, { inifrm: "litdav", ininam: "进口信用证通知到单", pntmiu: "4" },
], { inifrm: "litdck", ininam: "进口信用证到单", pntmiu: "4" },
menusOrigin: [], { inifrm: "brtlat", ininam: "进口信用证单据偿还垫款", pntmiu: "4" },
menus: [], { inifrm: "litcan", ininam: "进口信用证注销", pntmiu: "4" },
}; { inifrm: "inftrd", ininam: "进口押汇查询", pntmiu: "4" },
{ inifrm: "trtame", ininam: "进口融资修改", pntmiu: "4" },
{ inifrm: "5", ininam: "进口代收", pntmiu: "" },
{ inifrm: "bctacc", ininam: "进口代收承兑", pntmiu: "4" },
{ inifrm: "6", ininam: "静态参数管理", pntmiu: "" },
{ inifrm: "infusr", ininam: "用户信息", pntmiu: "5" },
],
menusOrigin: [],
menus: [],
};
},
computed: {
activeMenu() {
return this.$route.path;
}, },
computed: { },
activeMenu() { mounted() {
return this.$route.path; 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;
}, },
mounted() { 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 = []; const arr = [];
this.generateMenuTree(arr); for (let i = 0; i < item.children.length; i++) {
this.menusOrigin = arr; const child = item.children[i];
this.menus = this.menusOrigin; const r = this.eachItem(child);
}, if (r !== null) {
methods: { arr.push(r);
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 { if (arr.length > 0) {
name: item.name, return {
path: item.path, name: item.name,
icon: item.icon, path: item.path,
children: arr, 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;
} }
return null; }
}, },
hasAvailableChild(children) { generateMenuTree(list, item) {
for (let i = 0; i < children.length; i++) { for (let i = 0; i < this.menuList.length; i++) {
const child = children.length[i]; const menuItem = this.menuList[i];
if (child.children.length > 0) { if (!item) {
return this.hasAvailableChild(child.children); if (menuItem.pntmiu === undefined || menuItem.pntmiu === "") {
} else { const children = [];
// TODO 判断此处是否为叶子节点 menuItem.path = "/business";
return true; this.generateMenuTree(children, menuItem);
list.push({
name: menuItem.ininam,
path: menuItem.path,
icon: "el-icon-menu",
children,
});
} }
} } else {
}, if (menuItem.pntmiu === item.inifrm) {
generateMenuTree(list, item) { const children = [];
for (let i = 0; i < this.menuList.length; i++) { menuItem.path = item.path + "/" + menuItem.inifrm;
const menuItem = this.menuList[i]; this.generateMenuTree(children, menuItem);
if (!item) { list.push({
if (menuItem.pntmiu === undefined || menuItem.pntmiu === "") { name: menuItem.ininam,
const children = []; path: menuItem.path,
menuItem.path = "/business"; icon: "el-icon-document",
this.generateMenuTree(children, menuItem); children,
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); handleOpen(key, keyPath) {
}, console.log(key, keyPath);
handleClose(key, keyPath) { },
console.log(key, keyPath); handleClose(key, keyPath) {
}, console.log(key, keyPath);
openMenu() { },
this.menuOpen = true; openMenu() {
const aside = document.querySelector("aside"); this.menuOpen = true;
aside.className = aside.className.split(" ")[0]; const aside = document.querySelector("aside");
}, aside.className = aside.className.split(" ")[0];
closeMenu() { },
this.menuOpen = false; closeMenu() {
const aside = document.querySelector("aside"); this.menuOpen = false;
aside.className = aside.className + " fold"; const aside = document.querySelector("aside");
}, aside.className = aside.className + " fold";
}, },
}; },
};
</script> </script>
<style scoped> <style scoped>
.eContainer-menu-search .el-button { .eContainer-menu-search .el-button {
border: none; border: none;
font-size: 20px; font-size: 20px;
padding: 12px 20px; padding: 12px 20px;
} }
.eContainer-menu-search .el-input { .eContainer-menu-search .el-input {
width: auto; width: auto;
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 10px; top: 10px;
left: 60px; left: 60px;
} }
.eContainer-scroller .el-scrollbar__wrap { .eContainer-scroller .el-scrollbar__wrap {
overflow: auto; overflow: auto;
margin-right: 0px !important; margin-right: 0px !important;
} }
.eContainer-menu-search { .eContainer-menu-search {
width: 100%; width: 100%;
position: relative; position: relative;
} }
.eContainer-menu-search .el-input, .eContainer-menu-search .el-input,
.eContainer-menu-search .search-wrapper { .eContainer-menu-search .search-wrapper {
width: auto; width: auto;
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 10px; top: 10px;
left: 60px; left: 60px;
} }
.eContainer-menu-search .el-input .el-input__inner { .eContainer-menu-search .el-input .el-input__inner {
height: 30px; height: 30px;
} }
.eContainer-menu-search .el-icon-search { .eContainer-menu-search .el-icon-search {
line-height: 30px; line-height: 30px;
} }
.eContainer-scroller { .eContainer-scroller {
height: calc(100% - 44px); height: calc(100% - 44px);
} }
.eContainer-scroller .el-scrollbar__bar { .eContainer-scroller .el-scrollbar__bar {
display: none; display: none;
} }
.el-icon-s-fold { .el-icon-s-fold {
float: left; float: left;
font-size: 20px; font-size: 20px;
} }
.el-icon-s-unfold { .el-icon-s-unfold {
float: left; float: left;
font-size: 20px; font-size: 20px;
} }
.el-menu { .el-menu {
border-right: none; border-right: none;
} }
.eContainer-refresh { .eContainer-refresh {
width: auto; width: auto;
overflow: auto; overflow: auto;
height: calc(100% - 44px); height: calc(100% - 44px);
} }
.el-button-refresh { .el-button-refresh {
width: 100%; width: 100%;
height: 40px; height: 40px;
} }
</style> </style>
<style> <style>
.el-menu-vertical-demo.el-menu--collapse { .el-menu-vertical-demo.el-menu--collapse {
width: 60px; width: 60px;
} }
.el-submenu__title, .el-submenu__title,
.el-menu-item, .el-menu-item,
.el-submenu .el-menu-item { .el-submenu .el-menu-item {
font-size: 12px; font-size: 12px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
} }
</style> </style>
\ No newline at end of file
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