<template>
<div>
<Layout>
<Sider hide-trigger
ref="side1"
:style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto',background: '#fff',top:'60px'}">
<Menu theme="light" width="auto" ref="user"
:active-name="user" :class="menuitemClasses" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<i class="iconfont icon-home"></i>
利冲
</template>
<MenuItem name="lichong-guanli" to="/lichong/lichong-guanli"><div @click="goon">利冲管理</div></MenuItem>
<MenuItem name="lichong-chuanjian" to="/lichong/lichong-chuanjian"><div @click="goon">利冲创建</div></MenuItem>
<MenuItem name="lichong-qianpi" to="/lichong/lichong-qianpi"><div @click="goon">利冲签批</div></MenuItem>
<MenuItem name="lichong-daifankui" to="/lichong/lichong-daifankui"><div @click="goon">利冲待反馈</div></MenuItem>
</Submenu>
</Menu>
</Sider>
<Layout
:style="{margin: '88px 20px 0',marginLeft: '200px',marginTop:'0px',marginRight:0,width:'100%',border:0,overflowY:'hidden'}">
<Breadcrumb :style="{background:'#fff',marginBottom:'20px',paddingLeft:'20px',
height:'49px',borderBottom:'1px solid rgba(233, 233, 233, 1)',lineHeight:'49px',
position: 'fixed',width: '100%',zIndex:100,
}" separator="/">
<BreadcrumbItem to="/lichong/lichong">利冲</BreadcrumbItem>
<BreadcrumbItem :to="breadcrumb">{{flag}}</BreadcrumbItem>
</Breadcrumb>
<Content
:style="{ minHeight: '980px', background: 'rgb(245, 247, 249)',margin:'0 15px',position:'relative',top:'60px'}">
<router-view></router-view>
<div style="height: 100px;"></div>
</Content>
</Layout>
</Layout>
</div>
</template>
<script>
let flags = {
"lichong-guanli": "利冲管理",
'lichong-chuanjian': '利冲创建',
'lichong-chuanjian1': '利冲创建',
'lichong-qianpi': '利冲签批',
'lichong-daifankui': '利冲待反馈',
'lichong-detail': '利冲详情',
'lichong-shenhe': '利冲审核',
'lichong-anjian': '案件详情'
}
export default {
name: "lichong",
data() {
return {
flag: "利冲管理",
breadcrumb: '/lichong-guanli',
isCollapsed: false,
user: "lichong-guanli"
}
},
methods: {
collapsedSider() {
this.$refs.side1.toggleCollapse()
},
goon(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
},
menuHandle () {
let pathObj = {
'lichong-guanli':['lichong-guanli','lichong-detail','lichong-anjian'],
'lichong-chuanjian':['lichong-chuanjian','lichong-chuanjian1'],
'lichong-qianpi':['lichong-qianpi','lichong-shenhe'],
'lichong-daifankui':['lichong-daifankui']
}
let menuactive = this.$route.path.split('/')[2]
for (let item in pathObj) {
if (pathObj[item].indexOf(menuactive) != -1) {
this.user = item
}
}
},
routerChange () {
this.$nextTick(() => {
this.breadcrumb = this.$route.path.split('/')[2]
this.flag = flags[this.$route.path.split('/')[2]]
this.menuHandle()
this.$refs.user.updateActiveName()
})
},
},
computed: {
rotateIcon() {
return [
'menu-icon',
this.isCollapsed ? 'rotate-icon' : ''
];
},
menuitemClasses() {
return [
'menu-item',
this.isCollapsed ? 'collapsed-menu' : ''
]
}
},
watch: {
$route() {
this.routerChange()
}
},
mounted() {
this.$nextTick(() => {
this.routerChange()
})
}
}
</script>
<style scoped>
.layout {
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-logo {
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-nav {
width: 420px;
margin: 0 auto;
margin-right: 20px;
}
</style>
iview opend-name
猜你喜欢
转载自blog.csdn.net/qq_41994549/article/details/87937052
今日推荐
周排行