378 lines
10 KiB
Vue
378 lines
10 KiB
Vue
<template>
|
|
<div class="fullHeight pages">
|
|
<div class="title">
|
|
<div class="title_l flex">
|
|
<!-- <img v-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="icon" />
|
|
<span>{{$t('message.companyDiagram.pageTitle')}}</span> -->
|
|
<img
|
|
v-if="systemInfo.platformLogo"
|
|
:src="systemInfo.platformLogo"
|
|
class="logo"
|
|
height="25"
|
|
/>
|
|
<img
|
|
v-else-if="LOGO_white"
|
|
:src="'./img/logo/' + LOGO_white + '.png'"
|
|
class="logo"
|
|
height="25"
|
|
/>
|
|
<span v-if="company != 'nanchang'" style="cursor: pointer" @click="back"
|
|
>{{ systemInfo.platformName }}
|
|
</span>
|
|
<span v-if="company != 'nanchang'"> - </span>
|
|
<span v-if="company != 'nanchang'">{{
|
|
$t("message.companyDiagram.pageTitle")
|
|
}}</span>
|
|
<!-- 南昌地铁头部样式 -->
|
|
<span
|
|
v-if="company == 'nanchang'"
|
|
style="cursor: pointer"
|
|
@click="back"
|
|
>{{ $t("message.companyDiagram.pageTitle") }}</span
|
|
>
|
|
</div>
|
|
<!-- <div class="title_near flex" v-if="![1,2].includes($store.state.userInfo.accountType)">
|
|
<userChange></userChange>
|
|
</div> -->
|
|
<div
|
|
class="title_near-tow flex"
|
|
v-if="
|
|
![11, 1, 2].includes($store.state.userInfo.accountType) &&
|
|
workSpaceShow
|
|
"
|
|
>
|
|
<div class="divider-line"></div>
|
|
<centerChange></centerChange>
|
|
</div>
|
|
<div class="title_r flex">
|
|
<account></account>
|
|
</div>
|
|
</div>
|
|
<div class="menuBox">
|
|
<el-menu
|
|
:default-active="$route.path"
|
|
class="el-menu-demo"
|
|
mode="horizontal"
|
|
@select="handleSelect"
|
|
active-text-color="#5181F6"
|
|
>
|
|
<!-- router -->
|
|
<div class="wrapper" ref="wrapper">
|
|
<div class="cont" ref="cont">
|
|
<div
|
|
v-for="(item, index) in menuList"
|
|
:key="index"
|
|
class="menuInnerBox"
|
|
>
|
|
<el-menu-item
|
|
class="firstLevelMenu"
|
|
v-if="!hasSubMenu(item.menuList)"
|
|
:index="item.modulePath ? item.modulePath : item.embedUrl"
|
|
|
|
>
|
|
{{ item.moduleName }}
|
|
</el-menu-item>
|
|
<el-submenu :index="item.modulePath" v-else>
|
|
<template slot="title">{{ item.moduleName }}</template>
|
|
<el-menu-item
|
|
:index="data.path"
|
|
v-for="(data, i) in item.menuList"
|
|
:key="i"
|
|
>{{ data.menuName }}</el-menu-item
|
|
>
|
|
</el-submenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <el-menu-item :index="item.modulePath" v-for="(item,index) in menuList" :key="index">{{item.moduleName}}</el-menu-item> -->
|
|
</el-menu>
|
|
</div>
|
|
<div class="pageContainer">
|
|
<div class="pageDataContainer">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import account from "@/components/account.vue";
|
|
import userChange from "@/components/userChange.vue";
|
|
import centerChange from "@/components/centerChange.vue";
|
|
import BScroll from "better-scroll";
|
|
import { getNewUserAllModulePageApi } from "@/assets/js/api/jxjadmin.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
LOGO_white: LOGO_white,
|
|
currentUrl: "",
|
|
menuList: [
|
|
// { name: this.$t('message.companyDiagram.menuName1'), url: "/companyAdmin/companyDiagram" },
|
|
// { name: '系统设置', url: "/companyAdmin/systemSetup/enterpriseInfo" },
|
|
// { name: '文档管理', url: "/companyAdmin/docManage" },
|
|
// { name: '质量检查模板设置', url: "/companyAdmin/basicSetup/checkItem" },
|
|
// { name: '权限管理', url: "/companyAdmin/companyDiagram" },
|
|
// { name: '基础设置', url: "/companyAdmin/basicSetup/checkItem" },
|
|
// { name: '企业发文', url: "/companyAdmin/firmNotice/notice" },
|
|
// { name: '系统设置', url: "/companyAdmin/systemSetup/index" },
|
|
// { name: '质量及安全管理', url: "/companyAdmin/qualityAndSafety/evaluate" },
|
|
// { name: '工程进度', url: "/companyAdmin/progressOfWorks/index" },
|
|
// { name: '学习管理', url: "/companyAdmin/studyManage/courseList" },
|
|
],
|
|
systemInfo: {
|
|
loginBackgroundImage: "",
|
|
loginLogo: "",
|
|
platformLogo: "",
|
|
platformName: "智慧工地云平台",
|
|
},
|
|
workSpaceShow: false,
|
|
};
|
|
},
|
|
components: {
|
|
account,
|
|
userChange,
|
|
centerChange,
|
|
},
|
|
created() {
|
|
this.company = COMPANY;
|
|
console.log(COMPANY);
|
|
if (this.$store.state.projectSn) {
|
|
this.getModuleList();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getAllModule();
|
|
if (localStorage.getItem("systemInfo")) {
|
|
this.systemInfo = JSON.parse(localStorage.getItem("systemInfo"));
|
|
}
|
|
// document.title = "企业后台";
|
|
console.log("mounted", this.$route.path);
|
|
this.$nextTick(() => {
|
|
let timer = setTimeout(() => {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
this.verScroll();
|
|
}
|
|
}, 0);
|
|
});
|
|
},
|
|
methods: {
|
|
// 查询全部模块(拿到工作流的模块菜单)
|
|
getModuleList() {
|
|
getNewUserAllModulePageApi({
|
|
projectSn: this.$store.state.projectSn,
|
|
moduleType: 7,
|
|
userId: this.$store.state.userInfo.userId,
|
|
}).then((res) => {
|
|
let all = res.result.moduleList;
|
|
if (all.length == 0) {
|
|
this.workSpaceShow = false;
|
|
return;
|
|
} else {
|
|
this.workSpaceShow = true;
|
|
}
|
|
});
|
|
},
|
|
hasSubMenu(list) {
|
|
//用于判断有没有下级菜单
|
|
let onoff = false;
|
|
// console.log("list", list);
|
|
if (list && list.length > 0) {
|
|
list.forEach((element) => {
|
|
if (element.menuName) {
|
|
onoff = true;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
// console.log("onoff", onoff);
|
|
return onoff;
|
|
},
|
|
getAllModule() {
|
|
var half = this.$store.state.userInfo.menuAuthority.moduleList;
|
|
half.forEach((element) => {
|
|
if (element.moduleType == 3) {
|
|
this.menuList.push(element);
|
|
}
|
|
});
|
|
// getAllModuleApi({moduleType:4}).then(res => {
|
|
// if (res.success) {
|
|
// var all = res.result
|
|
// all.forEach((element,index) => {
|
|
// all[index].operation=false
|
|
// half.forEach(element2 => {
|
|
// if(element2.moduleId==element.moduleId){
|
|
// all[index].operation=true
|
|
// all[index].menuList=element2.menuList
|
|
// }
|
|
// });
|
|
// });
|
|
// this.menuList=all
|
|
// }
|
|
// })
|
|
},
|
|
handleSelect(url) {
|
|
// this.$store.commit('setCurrentUrl',url)
|
|
// this.$store.dispatch('currentUrl',url)
|
|
console.log(1111, url, this.menuList);
|
|
if(url.includes("http://")) {
|
|
window.open(url);
|
|
return;
|
|
} else {
|
|
this.$router.push(url);
|
|
}
|
|
},
|
|
back() {
|
|
this.$router.push("/firm/projectManage");
|
|
},
|
|
verScroll() {
|
|
// console.log(this.$route.path)
|
|
if (
|
|
this.$route.path.indexOf("/firm/") != -1 ||
|
|
this.$route.path.indexOf("/page") != -1
|
|
) {
|
|
this.$refs.cont.style.width = "100%";
|
|
return;
|
|
} else {
|
|
// let width = this.$store.state.menuList.length * 150// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
|
|
// this.$refs.cont.style.width = width + 'px'
|
|
this.$refs.cont.style.width = "max-content";
|
|
this.$nextTick(() => {
|
|
if (!this.scroll) {
|
|
this.scroll = new BScroll(this.$refs.wrapper, {
|
|
startX: 0,
|
|
click: true,
|
|
mouseWheel: true,
|
|
scrollX: true,
|
|
scrollY: false,
|
|
eventPassthrough: "vertical",
|
|
});
|
|
} else {
|
|
console.log(this.scroll.refresh());
|
|
this.scroll.refresh(); //如果dom结构发生改变调用该方法
|
|
}
|
|
console.log(this.scroll);
|
|
});
|
|
}
|
|
this.reload;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.el-menu.el-menu--horizontal {
|
|
box-sizing: border-box;
|
|
// padding: 0 162px 4px;
|
|
margin: 0 40px;
|
|
border-bottom: none;
|
|
overflow:hidden;
|
|
}
|
|
.el-menu--horizontal {
|
|
.el-menu-item,
|
|
/deep/.el-submenu__title {
|
|
font-family: PingFangSC-Medium;
|
|
font-size: 14px;
|
|
letter-spacing: 0;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
padding: 0;
|
|
margin-right: 80px;
|
|
&:hover,
|
|
&:focus {
|
|
background-color: transparent;
|
|
}
|
|
&:hover {
|
|
color: #5181f6;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.el-submenu__title {
|
|
padding-right: 20px !important;
|
|
.el-submenu__icon-arrow {
|
|
right: 0px;
|
|
}
|
|
}
|
|
.el-menu--horizontal .firstLevelMenu.is-active,
|
|
/deep/.is-active .el-submenu__title {
|
|
border-bottom: 3px solid #409eff;
|
|
}
|
|
.menuInnerBox {
|
|
display: inline-block;
|
|
}
|
|
// .el-menu.el-menu--horizontal {
|
|
// box-sizing: border-box;
|
|
// padding: 0 162px 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: 70px;
|
|
// }
|
|
// .el-menu--horizontal > .el-menu-item.is-active {
|
|
// border-bottom: 3px solid #409eff;
|
|
// }
|
|
// /deep/.el-submenu__title{
|
|
// padding-right: 20px!important;
|
|
// .el-submenu__icon-arrow{
|
|
// right: 0px;
|
|
// }
|
|
// }
|
|
// .el-menu--horizontal .firstLevelMenu.is-active,/deep/.is-active .el-submenu__title {
|
|
// border-bottom: 3px solid #409eff;
|
|
// }
|
|
// .menuInnerBox {
|
|
// display: inline-block;
|
|
// }
|
|
.menuBox {
|
|
position: relative;
|
|
}
|
|
.title {
|
|
width: 100%;
|
|
color: #fff;
|
|
background-image: linear-gradient(#262d47, #343d5f);
|
|
box-sizing: border-box;
|
|
padding: 0 23px;
|
|
height: 61px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
.title_l {
|
|
font-family: PingFangSC-Semibold;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
letter-spacing: 0;
|
|
margin-right: 50px;
|
|
img {
|
|
margin-right: 14px;
|
|
}
|
|
}
|
|
.title_near {
|
|
margin-right: 50px;
|
|
}
|
|
.title_near-tow {
|
|
.divider-line {
|
|
width: 1px;
|
|
height: 16px;
|
|
background: #ffffff;
|
|
margin-right: 50px;
|
|
}
|
|
}
|
|
.title_r {
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|