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.
253 lines
9.2 KiB
253 lines
9.2 KiB
<template> |
|
<!-- 商业银行系统菜单文件 --> |
|
<el-menu class="sidebar-el-menu" :default-active="onRoutes" router background-color="#313540" text-color="#fff" active-text-color="#ffd04b" unique-opened> |
|
<template v-for="(item,index) in menus"> |
|
<template v-if="item.children"> |
|
<el-submenu :index="item.index" :key="item.index"> |
|
<template slot="title"> |
|
<i :class="item.icon"></i> |
|
<span slot="title">{{ item.title }}</span> |
|
</template> |
|
<template v-for="(subItem,index) in item.children"> |
|
<el-submenu |
|
v-if="subItem.children" |
|
:index="subItem.index" |
|
:key="subItem.index" |
|
> |
|
<template slot="title">{{ subItem.title }}</template> |
|
<el-menu-item |
|
v-for="(threeItem,i) in subItem.children" |
|
:key="i" |
|
:index="threeItem.index" |
|
>{{ threeItem.title }}</el-menu-item> |
|
</el-submenu> |
|
<el-menu-item |
|
v-else |
|
:index="subItem.index" |
|
:key="subItem.index" |
|
>{{ subItem.title }}</el-menu-item> |
|
</template> |
|
</el-submenu> |
|
</template> |
|
<template v-else> |
|
<el-menu-item :index="item.index" :key="item.index"> |
|
<i :class="item.icon"></i> |
|
<span slot="title">{{ item.title }}</span> |
|
</el-menu-item> |
|
</template> |
|
</template> |
|
</el-menu> |
|
</template> |
|
|
|
<script> |
|
import { mapState } from 'vuex' |
|
// import bus from '@/libs/bus'; |
|
import Setting from '@/setting'; |
|
export default { |
|
data() { |
|
return { |
|
onRoutes:'/counter/list/manage/consumerClient', |
|
menus: [ |
|
{ |
|
icon: 'menu-icon icon-index', |
|
index: '/index/list', |
|
title: '客户信息', |
|
children: [ |
|
{ |
|
index: '/counter/list/manage/consumerClient', |
|
title: '个人客户信息建立', |
|
},{ |
|
index: '/counter/list/manage/corporateClient', |
|
title: '公司客户信息建立', |
|
}, |
|
] |
|
}, |
|
{ |
|
icon: 'menu-icon icon-index', |
|
index: '/index/list1', |
|
title: '个人业务', |
|
children:[ |
|
{ |
|
index: '/counter/list/manage/currentAccount', |
|
title: '活期业务', |
|
}, |
|
{ |
|
index: '/counter/list/manage/timeDeposit', |
|
title: '整存整取', |
|
}, |
|
{ |
|
index: '/counter/list/manage/usefulPhrases', |
|
title: '零存整取', |
|
}, |
|
{ |
|
index: '/counter/list/manage/callDeposits', |
|
title: '通知存款', |
|
}, |
|
{ |
|
index: '/counter/list/manage/accountService', |
|
title: '账户服务', |
|
}, |
|
] |
|
}, |
|
{ |
|
icon: 'menu-icon icon-index', |
|
index: '/index/list2', |
|
title: '公司业务', |
|
children:[ |
|
{ |
|
index:"/counter/list/manage/business-openAccount", |
|
title:'开户' |
|
}, |
|
{ |
|
index:"/counter/list/manage/business-deposit", |
|
title:'存款' |
|
}, |
|
{ |
|
index:"/counter/list/manage/business-withdrawal", |
|
title:'取款' |
|
}, |
|
{ |
|
index:"/counter/list/manage/business-transfer", |
|
title:'转账' |
|
}, |
|
] |
|
}, |
|
{ |
|
icon: 'menu-icon icon-index', |
|
index: '/index/list3', |
|
title: '账户服务', |
|
}, |
|
{ |
|
icon: 'menu-icon icon-index', |
|
index: '/index/list4', |
|
title: '同城交互', |
|
}, |
|
{ |
|
icon: 'menu-icon icon-index', |
|
index: '/index/list5', |
|
title: '银行承兑汇票', |
|
}, |
|
{ |
|
icon: 'menu-icon icon-index', |
|
index: '/index/list6', |
|
title: '重空现金', |
|
children:[ |
|
{ |
|
index:"/counter/list/manage/dayEnd-tellerCash", |
|
title:'柜员现金扎帐' |
|
}, |
|
{ |
|
index:"/counter/list/manage/dayEnd-tellerCertificate", |
|
title:'柜员凭证扎帐' |
|
}, |
|
{ |
|
index:"/counter/list/manage/dayEnd-branchDayEnd", |
|
title:'网点日终扎帐' |
|
} |
|
] |
|
}, |
|
{ |
|
icon: 'menu-icon icon-index', |
|
index: '/index/list7', |
|
title: '日终管理', |
|
children:[ |
|
{ |
|
index:"/counter/list/manage/dayEnd-tellerCash", |
|
title:'柜员现金扎帐' |
|
}, |
|
{ |
|
index:"/counter/list/manage/dayEnd-tellerCertificate", |
|
title:'柜员凭证扎帐' |
|
}, |
|
{ |
|
index:"/counter/list/manage/dayEnd-branchDayEnd", |
|
title:'网点日终扎帐' |
|
} |
|
] |
|
}, |
|
], |
|
} |
|
}, |
|
watch: { |
|
'$route.path':function (val) { |
|
this.onRoutes = val |
|
} |
|
}, |
|
created() { |
|
this.onRoutes = this.$route.path |
|
|
|
}, |
|
methods: { |
|
|
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
// .nav{ |
|
// background-color: #141414; |
|
// overflow: auto; |
|
// .logo{ |
|
// padding: 20px 0; |
|
// text-align: center; |
|
// } |
|
// /deep/.el-menu{ |
|
// border-right: 0 !important; |
|
// .el-menu-item{ |
|
// display: flex; |
|
// align-items: center; |
|
// &.is-active{ |
|
// background-color: #CC221C !important; |
|
// } |
|
// // .menu-icon{ |
|
// // width: 24px; |
|
// // height: 24px; |
|
// // margin-right: 12px; |
|
// // background: url(../../assets/img/home.png) no-repeat; |
|
// // &.icon-ques{ |
|
// // background-image: url(../../assets/img/ques.png); |
|
// // } |
|
// // &.icon-testpaper{ |
|
// // background-image: url(../../assets/img/paper.png); |
|
// // } |
|
// // &.icon-practise{ |
|
// // background-image: url(../../assets/img/practise.png); |
|
// // } |
|
// // &.icon-exam{ |
|
// // background-image: url(../../assets/img/exam.png); |
|
// // } |
|
// // &.icon-ache{ |
|
// // background-image: url(../../assets/img/ache.png); |
|
// // } |
|
// // &.icon-msg{ |
|
// // background-image: url(../../assets/img/msg.png); |
|
// // } |
|
// // &.icon-student{ |
|
// // background-image: url(../../assets/img/student.png); |
|
// // } |
|
// // &.icon-system{ |
|
// // background-image: url(../../assets/img/system.png); |
|
// // } |
|
// // } |
|
// // span{ |
|
// // font-size: 15px; |
|
// // } |
|
// } |
|
// } |
|
// } |
|
|
|
.sidebar::-webkit-scrollbar { |
|
width: 0; |
|
} |
|
.sidebar-el-menu:not(.el-menu--collapse) { |
|
width: 100%; |
|
border: 0; |
|
border-bottom-left-radius: 20px; |
|
} |
|
.sidebar > ul { |
|
height: 100%; |
|
} |
|
/deep/.el-menu{ |
|
border: 0; |
|
} |
|
</style> |