300 lines
8.2 KiB
Vue
300 lines
8.2 KiB
Vue
<template>
|
|
<div class="fullHeight pages">
|
|
<div class="parentAreaNamesBox whiteBlock">
|
|
{{ $store.state.userInfo?$store.state.userInfo.parentAreaNames:'' }}
|
|
</div>
|
|
<div class="menuBox">
|
|
<ul class="el-menu el-menu--horizontal">
|
|
<li
|
|
class="el-menu-item"
|
|
:class="{ 'is-active': $store.state.menuIndex == index }"
|
|
v-show="item.target != '_blank'"
|
|
v-for="(item, index) in dataList"
|
|
:key="index"
|
|
@mouseover="changeStatus2(item,2)"
|
|
@mouseout="changeStatus2(item,1)"
|
|
>
|
|
<span @click="handleSelect(index)">{{ item.name }}</span>
|
|
<div v-if="item.menuList.length>1">
|
|
<i v-show="item.isDown" class="el-icon-arrow-up icon"></i>
|
|
<i v-show="!item.isDown" class="el-icon-arrow-down icon" ></i>
|
|
<div class="subMenu" v-show="item.isDown" @mouseout="changeStatus2(item,1)">
|
|
<div class="sub-item" :style="{'color':$store.state.subMenuIndex == index+idex2.toString()?'#409eff':'#000'}" v-for="(item2,idex2) in item.menuList" :key="idex2">
|
|
<span @click="subMenuClick(item2, idex2,item,index)">{{item2.name}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
<!-- <el-button v-show="$store.state.isShowBackIndex" class="backtoIndex"
|
|
type="primary" plain
|
|
@click="backtoIndex()"
|
|
size="mini"
|
|
>返回主菜单</el-button> -->
|
|
</div>
|
|
|
|
<div class="pageContainer">
|
|
<div class="leftMenuBox whiteBlock fullHeight" v-show="subMenuList.length > 0">
|
|
<!-- <ul v-show="isExpand">
|
|
<li
|
|
:class="{ active: $store.state.subMenuIndex == index }"
|
|
v-for="(item, index) in subMenuList"
|
|
:key="index"
|
|
@click="subMenuClick(item, index)"
|
|
>
|
|
{{ item.name }}
|
|
</li>
|
|
</ul> -->
|
|
<!-- <div class="expandBox" @click="changeStatus">
|
|
<i v-show="isExpand" class="el-icon-arrow-left"></i>
|
|
<i v-show="!isExpand" class="el-icon-arrow-right"></i>
|
|
</div> -->
|
|
</div>
|
|
<div class="pageDataContainer" :class="{ big: subMenuList.length == 0||!isExpand }">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
hidePluginWindow,showPluginWindow,unInitObjPlugin
|
|
} from "@/components/videoModule/isc_plugin/video_isc_plugin.js";
|
|
export default {
|
|
computed:{
|
|
menuList(){
|
|
this.subMenuList = this.$store.state.menuList[
|
|
this.$store.state.menuIndex
|
|
].menuList;
|
|
return this.$store.state.menuList
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
currentUrl: "",
|
|
subMenuList: [],
|
|
isExpand: false,
|
|
dataList:[],
|
|
activeSub: "",
|
|
activeIndex: 0
|
|
};
|
|
},
|
|
created() {
|
|
this.dataList = this.$store.state.menuList
|
|
// if(this.$store.state.userInfo.accountType!=1){
|
|
// this.menuList=[{ name: "组织架构管理", url: "/companyAdmin/companyDiagram" },
|
|
// // { name: "项目管理", url: "/companyAdmin/projectManager" },
|
|
// { name: "文档资料上传", url: "/companyAdmin/docManage" }]
|
|
// // if(this.$store.state.currentUrl==""){
|
|
// // // this.$store.commit('setCurrentUrl',this.menuList[0].url)
|
|
// // this.$store.dispatch('currentUrl',this.menuList[0].url)
|
|
// // }
|
|
// }
|
|
},
|
|
mounted() {
|
|
// console.log('mounted',this.$route.path)
|
|
if(this.$store.state.menuList.length>0){
|
|
this.subMenuList = this.$store.state.menuList[
|
|
this.$store.state.menuIndex
|
|
].menuList;
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
changeStatus(){
|
|
this.isExpand=!this.isExpand
|
|
this.$store.commit("setIsExpand", this.isExpand);
|
|
},
|
|
changeStatus2(val,type){
|
|
console.log(val)
|
|
this.dataList.forEach(item=>{
|
|
if(val.name != item.name){
|
|
item.isDown = false
|
|
}
|
|
})
|
|
if(type == 2){
|
|
val.isDown = true
|
|
} else {
|
|
val.isDown = false
|
|
}
|
|
// val.isDown=!val.isDown
|
|
this.$forceUpdate()
|
|
if(this.$store.state.menuIndex == 0 && val.menuList.length>1){
|
|
if(val.isDown){
|
|
hidePluginWindow()
|
|
}else{
|
|
showPluginWindow()
|
|
}
|
|
|
|
}
|
|
// this.$store.commit("setIsExpand", this.isDown);
|
|
},
|
|
subMenuClick(item, index,item2,index2) {
|
|
console.log(item)
|
|
this.activeSub = index
|
|
this.dataList.forEach(item=>{
|
|
item.isDown = false
|
|
})
|
|
console.log("index2", index);
|
|
// var item2 = this.$store.state.menuList[this.$store.state.menuIndex];
|
|
console.log(item2)
|
|
if (item.name.indexOf('总览')!=-1&&item.name.indexOf('人员总览')==-1&&item.name.indexOf('信息总览')==-1) {
|
|
let routeUrl = this.$router.resolve({
|
|
name: item.name,
|
|
});
|
|
window.open(routeUrl.href, "_blank");
|
|
} else {
|
|
this.$router.push({name:item2.name+'_'+item.name});
|
|
this.$store.commit("setMenuIndex", index2);
|
|
this.$store.commit("setSubMenuIndex", index2 + index.toString());
|
|
}
|
|
},
|
|
handleSelect(index) {
|
|
this.activeSub = ""
|
|
this.dataList.forEach(item=>{
|
|
item.isDown = false
|
|
})
|
|
console.log("index", index);
|
|
var item = this.$store.state.menuList[index];
|
|
|
|
if (item.menuList.length > 0) {
|
|
if (item.menuList[0].name.indexOf('总览')!=-1&&item.menuList[0].name.indexOf('人员总览')==-1&&item.menuList[0].name.indexOf('信息总览')==-1) {
|
|
let routeUrl = this.$router.resolve({
|
|
name: item.menuList[0].name,
|
|
});
|
|
window.open(routeUrl.href, "_blank");
|
|
} else {
|
|
this.subMenuList = item.menuList;
|
|
this.$store.commit("setMenuIndex", index);
|
|
this.$store.commit("setSubMenuIndex", 0);
|
|
this.$router.push({name:item.name+'_'+this.subMenuList[0].name});
|
|
}
|
|
} else {
|
|
this.$router.push({name:item.name});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.pageContainer{
|
|
height: calc(100% - 48px - 36px);
|
|
}
|
|
.pageDataContainer {
|
|
float: left;
|
|
width: calc(100% - 135px - 40px);
|
|
&.big{
|
|
width: calc(100% - 40px);
|
|
}
|
|
}
|
|
.el-menu.el-menu--horizontal {
|
|
box-sizing: border-box;
|
|
padding: 0 40px 4px;
|
|
border-bottom: none;
|
|
}
|
|
.el-menu--horizontal > .el-menu-item {
|
|
font-family: PingFangSC-Medium;
|
|
font-size: 14px;
|
|
letter-spacing: 0;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
padding: 0;
|
|
margin-right: 60px;
|
|
}
|
|
.icon{
|
|
position: absolute;
|
|
right: -35px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 16px;
|
|
}
|
|
.subMenu{
|
|
background: #fff;
|
|
display: block;
|
|
position: absolute;
|
|
right: -32px;
|
|
text-align: center;
|
|
top: 100%;
|
|
z-index: 10;
|
|
padding: 0 32px;
|
|
}
|
|
.sub-item:hover{
|
|
color: #409eff;
|
|
}
|
|
.el-menu--horizontal > .el-menu-item.is-active {
|
|
border-bottom: 3px solid #409eff;
|
|
}
|
|
.menuBox {
|
|
position: relative;
|
|
box-shadow: 0px 4px 6px 0px rgba(38, 45, 71, 0.77);
|
|
&.big {
|
|
.el-menu.el-menu--horizontal {
|
|
padding: 0;
|
|
display: flex;
|
|
.el-menu-item {
|
|
flex: 1;
|
|
margin-right: 0;
|
|
text-align: center;
|
|
border-bottom: none;
|
|
&.is-active {
|
|
background-color: @--color-primary;
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.backtoIndex {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 12px;
|
|
font-size: 14px;
|
|
padding: 4px 5px;
|
|
}
|
|
.toOverview {
|
|
right: 120px;
|
|
}
|
|
.leftMenuBox {
|
|
float: left;
|
|
|
|
position: relative;
|
|
ul {
|
|
padding: 20px 0;
|
|
width: 135px;
|
|
li {
|
|
font-size: 14px;
|
|
padding: 8px 8px 8px 20px;
|
|
line-height: 20px;
|
|
border-left: 7px solid transparent;
|
|
cursor: pointer;
|
|
&.active,
|
|
&:hover {
|
|
border-left-color: @--color-primary;
|
|
background-color: rgba(90, 177, 239, 0.11);
|
|
color: @--color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.parentAreaNamesBox {
|
|
font-size: 16px;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
}
|
|
.expandBox{
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 0;
|
|
width: 20px;
|
|
height: 40px;
|
|
background-color: rgba(82, 129, 246, 0.52);
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
</style> |