<template id="SideMenu"> <c-row> <div class="eContainer-menu-search"> <el-button icon="el-icon-s-fold" v-if="menuOpen" @click="closeMenu" ></el-button> <el-button icon="el-icon-s-unfold" v-else @click="openMenu"></el-button> <c-search-input v-show="menuOpen"></c-search-input> </div> <c-content :height="menusHeight"> <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" v-bind:router="true" @open="handleOpen" @close="handleClose" :collapse="!menuOpen" > <SubMenu :subMenuList="menus" :openFlgArr="openFlgArr"></SubMenu> </el-menu> </c-content> </c-row> </template> <script> import Button from "../../components/Button.vue"; import SubMenu from "~/components/SubMenu.vue"; import { getDzSysMenu } from "./dz/menus.js"; export default { components: { Button, SubMenu }, data: function () { return { openFlgArr: [], menuOpen: true, menuList: [ // { inifrm: "0", ininam: "公共夹", pntmiu: "" }, // { inifrm: "sptsel", ininam: "待办任务", pntmiu: "0" }, // { inifrm: "trnrel", ininam: "复核任务", pntmiu: "0" }, // { inifrm: "diasel", ininam: "备忘录选择交易", pntmiu: "0" }, { inifrm: "1", ininam: "汇款业务", pntmiu: "" }, { inifrm: "infcpd", ininam: "汇款查询", pntmiu: "1" }, // { inifrm: "cptopn", ininam: "汇出汇款", pntmiu: "1" }, // { inifrm: "cptadv", ininam: "汇入汇款", pntmiu: "1" }, // { inifrm: "cptato", ininam: "境内外币汇出汇款", pntmiu: "1" }, // { inifrm: "cptati", ininam: "境内外币汇入汇款", pntmiu: "1" }, { inifrm: "cnysel", ininam: "跨境人民币查询", pntmiu: "1" }, // { inifrm: "cptrel", ininam: "汇款复核与查询", pntmiu: "1" }, // { inifrm: "cptcan", ininam: "汇款注销", pntmiu: "1" }, // { inifrm: "cptrep", ininam: "汇入汇款挂帐解付", pntmiu: "1" }, { inifrm: "4", ininam: "进口信用证", pntmiu: "" }, { inifrm: "inflid", ininam: "进口信用证交易查询", pntmiu: "4" }, { inifrm: "infbrd", ininam: "进口信用证单据查询", pntmiu: "4" }, // { inifrm: "litopn", ininam: "进口信用证开立", pntmiu: "4" }, // { inifrm: "litdav", ininam: "进口信用证通知到单", pntmiu: "4" }, // { inifrm: "litdck", ininam: "进口信用证到单", pntmiu: "4" }, // { inifrm: "brtlat", ininam: "进口信用证单据偿还垫款", pntmiu: "4" }, { inifrm: "3", ininam: "出口信用证", pntmiu: "" }, { inifrm: "infled", ininam: "出口信用证交易查询", pntmiu: "3" }, { inifrm: "infbed", ininam: "出口信用证单据查询", pntmiu: "3" }, // { inifrm: "letsel", ininam: "出口信用证查询", pntmiu: "3" }, // { inifrm: "letopn", ininam: "出口信用证通知", pntmiu: "3" }, // { inifrm: "letnot", ininam: "出口信用证预通知", pntmiu: "3" }, // { inifrm: "letame", ininam: "出口信用证修改", pntmiu: "3" }, // { inifrm: "letrsv", ininam: "出口信用证补通知", pntmiu: "3" }, // { inifrm: "bptcan", ininam: "出口融资注销", pntmiu: "3" }, // { inifrm: "letcan", ininam: "出口信用证注销", pntmiu: "3" }, // { inifrm: "betacc", ininam: "出口信用证单据承兑", pntmiu: "3" }, // { inifrm: "betrcl", ininam: "出口信用证单据索汇", pntmiu: "3" }, // { inifrm: "betdcr", ininam: "出口信用证不符点/拒付", pntmiu: "3" }, // { inifrm: "betdrv", ininam: "出口信用证单据修改", pntmiu: "3" }, // { inifrm: "infbpd", ininam: "出口押汇查询", pntmiu: "3" }, // { inifrm: "litcan", ininam: "进口信用证注销", pntmiu: "4" }, // { inifrm: "inftrd", ininam: "进口押汇查询", pntmiu: "4" }, // { inifrm: "trtame", ininam: "进口融资修改", pntmiu: "4" }, // { inifrm: "inftxm", ininam: "条式语句查询", pntmiu: "4" }, //{ inifrm: "7", ininam: "转让信用证", pntmiu: "" }, { inifrm: "infltd", ininam: "转让信用证查询", pntmiu: "3" }, { inifrm: "infbtd", ininam: "转让信用证单据查询", pntmiu: "3" }, { inifrm: "2", ininam: "买方信用证", pntmiu: "" }, // { inifrm: "ditopn", ininam: "信用证开立", pntmiu: "2" }, // { inifrm: "ditame", ininam: "信用证修改", pntmiu: "2" }, // { inifrm: "ditcan", ininam: "信用证注销", pntmiu: "2" }, { inifrm: "infdid", ininam: "买方信用证交易查询", pntmiu: "2" }, { inifrm: "infbdd", ininam: "买方信用证单据查询", pntmiu: "2" }, //{ inifrm: "bdtset", ininam: "买方信用证收款", pntmiu: "2" }, { inifrm: "22", ininam: "卖方信用证", pntmiu: "" }, { inifrm: "infdet", ininam: "卖方信用证交易查询", pntmiu: "22" }, { inifrm: "infbfd", ininam: "卖方信用证单据查询", pntmiu: "22" }, //{ inifrm: "bftsnd", ininam: "卖方信用证寄单", pntmiu: "2" }, //{ inifrm: "bftset", ininam: "卖方信用证收款", pntmiu: "2" }, // { inifrm: "bdtudp", ininam: "信用证承兑", pntmiu: "2" }, // { inifrm: "bdtdcr", ininam: "信用证不符点/拒付", pntmiu: "2" }, // { inifrm: "ditdck", ininam: "信用证到单", pntmiu: "2" }, // { inifrm: "bdtset", ininam: "信用证付款", pntmiu: "2" }, { inifrm: "17",ininam: "融资业务", pntmiu: "" }, { inifrm: "inftrd", ininam: "进口融资查询", pntmiu: "17" }, //{ inifrm: "16",ininam: "出口融资", pntmiu: "" }, { inifrm: "infbpd", ininam: "出口融资查询", pntmiu: "17" }, { inifrm: "13", ininam: "保函业务", pntmiu: "" }, { inifrm: "infgid", ininam: "保函入口交易", pntmiu: "13" }, { inifrm: "infgcd", ininam: "保函赔付查询", pntmiu: "13" }, // { inifrm: "gitsel", ininam: "进口保函查询", pntmiu: "13" }, { inifrm: "6", ininam: "托收业务", pntmiu: "" }, { inifrm: "infbod", ininam: "出口托收查询", pntmiu: "6" }, // { inifrm: "botdav", ininam: "出口托收寄单", pntmiu: "6" }, // { inifrm: "botame", ininam: "出口托收修改", pntmiu: "6" }, // { inifrm: "botdcr", ininam: "出口托收拒付/不符点", pntmiu: "6" }, // { inifrm: "botset", ininam: "出口托收收汇", pntmiu: "6" }, // { inifrm: "botcan", ininam: "出口托收闭卷", pntmiu: "6" }, //{ inifrm: "8", ininam: "打包托收", pntmiu: "" }, { inifrm: "infcld", ininam: "打包托收查询", pntmiu: "6" }, // { inifrm: "cltdav", ininam: "打包托收开立", pntmiu: "8" }, // { inifrm: "clttra", ininam: "打包托收催收", pntmiu: "8" }, // { inifrm: "cltset", ininam: "打包托收解包", pntmiu: "8" }, //{ inifrm: "9", ininam: "光票托收", pntmiu: "" }, { inifrm: "infccd", ininam: "光票托收查询", pntmiu: "6" }, // { inifrm: "ccttra", ininam: "光票托收催收", pntmiu: "9" }, // { inifrm: "cctdcr", ininam: "光票托收退票", pntmiu: "9" }, // { inifrm: "cctset", ininam: "光票托收收汇", pntmiu: "9" }, //{ inifrm: "cltdav", ininam: "光票托收开立", pntmiu: "10" }, //{ inifrm: "clttra", ininam: "光票托收", pntmiu: "10" }, { inifrm: "5", ininam: "其他业务", pntmiu: "" }, //{ inifrm: "5", ininam: "进口代收", pntmiu: "" }, // { inifrm: "bctdav", ininam: "进口代收到单通知", pntmiu: "5" }, // { inifrm: "bctame", ininam: "进口代收修改", pntmiu: "5" }, // { inifrm: "bctacc", ininam: "进口代收承兑", pntmiu: "5" }, // { inifrm: "bctrad", ininam: "进口代收二次收单", pntmiu: "5" }, // { inifrm: "bctdor", ininam: "进口代收拒付", pntmiu: "5" }, // { inifrm: "bctset", ininam: "进口代收付款", pntmiu: "5" }, // { inifrm: "bctcan", ininam: "进口代收注销", pntmiu: "5" }, { inifrm: "infbcd", ininam: "进口代收查询", pntmiu: "5" }, //{ inifrm: "15",ininam: "福费廷管理", pntmiu: "" }, { inifrm: "assetInfo", ininam: "资产信息管理", pntmiu: "5" }, { inifrm: "assetPub", ininam: "资产发布信息管理", pntmiu: "5" }, { inifrm: "fund", ininam: "资金信息管理", pntmiu: "5" }, { inifrm: "10", ininam: "参数管理", pntmiu: "" }, //{ inifrm: "dbiusr", ininam: "用户信息详情", pntmiu: "10" }, //{ inifrm: "dbibch", ininam: "机构信息详情", pntmiu: "10" }, // { inifrm: "infusr", ininam: "用户信息查询", pntmiu: "10" }, //{ inifrm: "11", ininam: "卖方信用证", pntmiu: "" }, //{ inifrm: "detopn", ininam: "卖方信用证开立", pntmiu: "11" }, //{ inifrm: "detame", ininam: "卖方信用证修改", pntmiu: "11" }, //{ inifrm: "detsel", ininam: "卖方信用证查询", pntmiu: "11" }, //{ inifrm: "18",ininam: "客户查询", pntmiu: "" }, // { inifrm: "infpty", ininam: "客户信息查询", pntmiu: "10" }, // { inifrm: "infpta", ininam: "客户地址查询", pntmiu: "10" }, { inifrm: "infact", ininam: "账号信息查询", pntmiu: "10" }, { inifrm: "infapf", ininam: "报文格式信息查询", pntmiu: "10" }, { inifrm: "infatp", ininam: "交易模式配置查询", pntmiu: "10" }, { inifrm: "infatx", ininam: "保函文本查询ATX", pntmiu: "10" }, { inifrm: "infbch", ininam: "机构信息查询", pntmiu: "10" }, { inifrm: 'infoit', ininam: '消息信息查询OIT', pntmiu: '10' }, { inifrm: 'infsmh', ininam: 'Message索引信息查询', pntmiu: '10' }, { inifrm: 'infptm', ininam: '银行密押查询', pntmiu: '10' }, // { inifrm: 'infpts', ininam: '客户管户机构管理查询', pntmiu: '10' }, { inifrm: "infcty", ininam: "国别信息查询", pntmiu: "10" }, { inifrm: "infcur", ininam: "币种信息查询", pntmiu: "10" }, { inifrm: "inffec", ininam: "费率信息查询", pntmiu: "10" }, { inifrm: "infgtx", ininam: "保函文本查询", pntmiu: "10" }, { inifrm: "infpty", ininam: "客户信息查询", pntmiu: "10" }, { inifrm: "inftrl", ininam: "交易权限查询", pntmiu: "10" }, { inifrm: "infusr", ininam: "柜员信息查询", pntmiu: "10" }, // { inifrm: "gitset", ininam: "进口保函赔付", pntmiu: "13" }, // { inifrm: "gitcrq", ininam: "进口保函索赔登记", pntmiu: "13" }, { inifrm: "14", ininam: "服务管理", pntmiu: "" }, { inifrm: "switsk", ininam: "收报服务", pntmiu: "14" }, { inifrm: "mgrtsk", ininam: "发报服务", pntmiu: "14" }, { inifrm: "sptrel", ininam: "订单复核", pntmiu: "14" }, { inifrm: "sptneg", ininam: "订单分配服务", pntmiu: "14" }, { inifrm: "ordrel", ininam: "订单服务", pntmiu: "14" }, { inifrm: "cptbat", ininam: "批量汇款服务", pntmiu: "14" }, { inifrm: "12", ininam: "智能审单", pntmiu: "" }, { inifrm: "examRule", ininam: "智能审单规则配置", pntmiu: "12" }, { inifrm: "28", ininam: "资本项目申报", pntmiu: "" }, { inifrm: "cfasel", ininam: "申报查询入口", pntmiu: "28" }, { inifrm: "eadadd", ininam: "增--外债海外代付", pntmiu: "28" }, { inifrm: "eadinf", ininam: "查--外债海外代付", pntmiu: "28" }, { inifrm: "eadame", ininam: "改--外债海外代付", pntmiu: "28" }, { inifrm: "eaddel", ininam: "删--外债海外代付", pntmiu: "28" }, { inifrm: "eafadd", ininam: "增 -- 外债远期信用证(含即期单证相符)", pntmiu: "28" }, { inifrm: "eafinf", ininam: "查 -- 外债远期信用证(含即期单证相符)", pntmiu: "28" }, { inifrm: "eafame", ininam: "改 -- 外债远期信用证(含即期单证相符)", pntmiu: "28" }, { inifrm: "eafdel", ininam: "删 -- 外债远期信用证(含即期单证相符)", pntmiu: "28" }, // { inifrm: "3", ininam: "出口信用证", pntmiu: "" }, // { inifrm: "infled", ininam: "出口信用证交易查询", pntmiu: "3" }, // { inifrm: "infbed", ininam: "出口信用证单据查询", pntmiu: "3" }, ], menus: [], menusHeight: 0, }; }, computed: { activeMenu() { return this.$route.path; }, }, watch: { $route: function () { this.$nextTick(() => { const arr = []; this.getOpenMenusIndex(this.menus, arr); this.openFlgArr = [...new Set([...this.openFlgArr, ...arr])]; }); }, }, created() { this.menusHeight = 60 + 46 + 8; }, mounted() { const arr = []; this.generateMenuTree(arr); const dzsysMenus = getDzSysMenu() this.menus = dzsysMenus ? arr.concat(dzsysMenus) : arr; this.$store.commit("UserContext/setMenu", arr); this.initOpenFlgIndex(); }, methods: { generateMenuTree(list, item) { const cc = [], c = []; let n = 0; for (let i = 0; i < this.menuList.length; i++) { const menuItem = this.menuList[i]; if (!item) { if (menuItem.pntmiu === undefined || menuItem.pntmiu === "") { const children = []; // 此处为了兼容新的保函模块 // if (['4', '13','3','6','5','17'].includes(menuItem.inifrm)) { menuItem.path = "/business-new"; // } else { // menuItem.path = "/business"; // } this.generateMenuTree(children, menuItem); const child = { name: menuItem.ininam, path: menuItem.path, children, }; if (children.length > 0) { child["index"] = child.path + "_" + n++; cc.push(child); } else { c.push(child); } } } else { if (menuItem.pntmiu === item.inifrm) { const children = []; menuItem.path = item.path + "/" + menuItem.inifrm; this.generateMenuTree(children, menuItem); const child = { name: menuItem.ininam, path: menuItem.path, icon: "el-icon-document", children, }; if (children.length > 0) { child["index"] = child.path + "_" + n++; cc.push(child); } else { c.push(child); } } } } list.push(...cc, ...c); }, handleOpen(index, indexPath) { console.log('11111======', index, indexPath); const arr = Object.assign([], this.openFlgArr); arr.push(index); this.openFlgArr = arr; }, handleClose(index, indexPath) { // console.log(index, indexPath); const arr = Object.assign([], this.openFlgArr); this.openFlgArr = arr.filter((idx) => idx !== index); }, openMenu() { this.menuOpen = true; const aside = document.querySelector("aside"); aside.className = aside.className.split(" ")[0]; this.initOpenFlgIndex(); }, initOpenFlgIndex() { const r = []; this.getOpenMenusIndex(this.menus, r); this.openFlgArr = r; }, getOpenMenusIndex(menus, arr) { for (let i = 0; i < menus.length; i++) { const menu = menus[i]; if (menu.path === this.activeMenu) { return true; } if (menu.children.length > 0) { if (this.getOpenMenusIndex(menu.children, arr)) { arr.push(menu.index); return true; } } } return false; }, closeMenu() { this.menuOpen = false; const aside = document.querySelector("aside"); aside.className = aside.className + " fold"; this.openFlgArr = []; }, }, }; </script> <style scoped> .eContainer-menu-search { display: flex; align-items: center; justify-content: space-around; height: 40px; } .eContainer-menu-search .el-button { border: none; font-size: 20px; } .eContainer-menu-search >>> .search-wrapper{ margin-right: 20px; } .eContainer-menu-search >>> .search-wrapper .el-input .el-input__inner { height: 28px; } .eContainer-menu-search >>> .search-wrapper .el-input--small .el-input__icon { line-height: 28px; } .eContainer-scroller .el-scrollbar__wrap { overflow: auto; margin-right: 0px !important; } .eContainer-scroller { height: calc(100% - 44px); } .eContainer-scroller .el-scrollbar__bar { display: none; } .el-icon-s-fold { float: left; font-size: 20px; } .el-icon-s-unfold { float: left; font-size: 20px; } .el-menu { border-right: none; } .eContainer-refresh { width: auto; overflow: auto; height: calc(100% - 44px); } .el-button-refresh { width: 100%; height: 40px; } </style> <style> .el-menu-vertical-demo.el-menu--collapse { width: 60px; } .el-submenu__title, .el-menu-item { font-size: 14px; height: 40px; line-height: 40px; } .el-submenu__title.active{ font-weight: bold; } .el-submenu .el-menu-item { height: 40px; line-height: 40px; font-size: 12px; } .el-menu-vertical-demo [class^="el-icon-caret-"] { color: #606266; } /* 去除右侧箭头 */ .el-scrollbar__view .el-icon-arrow-down:before { content: ""; } /* 修改箭头颜色 */ .el-scrollbar__view .el-submenu__title i{ color: var(--themecolor); } </style>