438 lines
12 KiB
Vue
438 lines
12 KiB
Vue
<template>
|
|
<div class="fullHeight pages">
|
|
<div class="title" v-if="contentShow">
|
|
<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'">供应商管理首页</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)">
|
|
<div class="divider-line"></div>
|
|
<centerChange></centerChange>
|
|
</div>
|
|
<div
|
|
class="title_r flex"
|
|
>
|
|
<account></account>
|
|
</div>
|
|
</div>
|
|
<div class="menuBox" v-if="contentShow">
|
|
<el-menu
|
|
:default-active="$route.path"
|
|
class="el-menu-demo"
|
|
mode="horizontal"
|
|
@select="handleSelect"
|
|
active-text-color="#5181F6"
|
|
router
|
|
>
|
|
<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.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>
|
|
<!-- <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" v-if="contentShow">
|
|
<div class="pageDataContainer">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
<!-- 选择组织 -->
|
|
<el-dialog
|
|
title="选择组织"
|
|
:modal-append-to-body="false"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:show-close="false"
|
|
:visible.sync="selectGroupDialog"
|
|
>
|
|
<div class="content-list" :style="{height: groupListData.length > 4?'300px':'auto'}">
|
|
<vue-scroll style="height: 100%;">
|
|
<div
|
|
class="content-list-item"
|
|
v-for="(item, index) in groupListData"
|
|
:key="index"
|
|
@click="selectedGroupData(item)"
|
|
>
|
|
<!-- <i class="el-icon-trophy-1"></i> -->
|
|
<img src="@/assets/images/headerImg/icon3.png" />
|
|
<span>{{ item.companyName }}</span>
|
|
<i class="el-icon-arrow-right"></i>
|
|
</div>
|
|
</vue-scroll>
|
|
<!-- <div class="content-list-item" @click="selectedGroupData()">
|
|
<img src="@/assets/images/headerImg/icon4.png" />
|
|
<span>{{ $store.state.userInfo.account }}</span>
|
|
<div>个人租户</div>
|
|
<i class="el-icon-arrow-right"></i>
|
|
</div> -->
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import account from "@/components/account.vue";
|
|
import userChange from "@/components/userChange.vue";
|
|
import centerChange from "@/components/centerChange.vue";
|
|
import { getGroupListByCompanyApi, jumpLargeUserInfoApi } from "@/assets/js/api/loginSign.js";
|
|
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
groupListData: [],
|
|
selectGroupDialog: false,
|
|
contentShow: false,
|
|
LOGO_white:LOGO_white,
|
|
currentUrl:'',
|
|
menuList:[
|
|
{ moduleName: '首页', modulePath: "/supplierIndex" }
|
|
],
|
|
systemInfo:{
|
|
"loginBackgroundImage": "",
|
|
"loginLogo": "",
|
|
"platformLogo": "",
|
|
"platformName": "智慧工地云平台"
|
|
},
|
|
projectSn: ""
|
|
};
|
|
},
|
|
components:{
|
|
account,
|
|
userChange,
|
|
centerChange
|
|
},
|
|
created() {
|
|
if (this.$store.state.selectedGroupSn && this.$store.state.projectSn) {
|
|
this.selectGroupDialog = false;
|
|
this.contentShow = true;
|
|
}
|
|
this.getGroupTreeData();
|
|
this.company = COMPANY;
|
|
console.log(COMPANY)
|
|
},
|
|
mounted(){
|
|
// this.getAllModule()
|
|
if(localStorage.getItem('systemInfo')){
|
|
this.systemInfo=JSON.parse(localStorage.getItem('systemInfo'))
|
|
}
|
|
document.title='企业后台'
|
|
console.log('mounted',this.$route.path)
|
|
|
|
},
|
|
methods: {
|
|
//获取详情
|
|
getDataDateils() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
getProjectDetail(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$store.commit("setProDetail", res.result);
|
|
}
|
|
});
|
|
},
|
|
// 默认选中已选中组织的第一个项目
|
|
selectedDefaultProject(obj) {
|
|
if (obj.list && obj.list.length > 0) {
|
|
obj.list.map((item) => {
|
|
this.selectedDefaultProject(item);
|
|
});
|
|
} else {
|
|
this.projectSn = this.$store.state.projectSn || "";
|
|
if (!this.projectSn) {
|
|
// 加判断是为了在循环中只选中第一个
|
|
this.projectSn = obj.sn;
|
|
console.log(obj,'我的2356789')
|
|
// 修改全局projectSn
|
|
this.$store.commit("setProjectSn", obj.sn);
|
|
this.contentShow = true;
|
|
this.getDataDateils();
|
|
}
|
|
}
|
|
},
|
|
// 点击选中组织
|
|
selectedGroupData(item) {
|
|
console.log(item,666777888)
|
|
let data = {
|
|
token: this.$store.state.userInfo.token,
|
|
headquartersSn: item.companySn
|
|
};
|
|
jumpLargeUserInfoApi(data).then((res) => {
|
|
console.log(res,'重新获取信息');
|
|
if(res.result){
|
|
this.$store.commit("setUserInfo", res.result);
|
|
if (item) {
|
|
this.selectedDataSn = item.companySn;
|
|
this.$store.commit("setSelectedGroupSn", item.companySn); // 存储选中的组织Sn
|
|
this.selectedDefaultProject(item);
|
|
} else {
|
|
let storeVal = this.$store.state.userInfo;
|
|
this.selectedDataSn = storeVal.headquartersSn;
|
|
this.$store.commit("setSelectedGroupSn", storeVal.headquartersSn); // 存储选中的组织Sn
|
|
// this.selectedDefaultProject(storeVal.userInfo);
|
|
}
|
|
this.selectGroupDialog = false;
|
|
}
|
|
});
|
|
},
|
|
getGroupTreeData() {
|
|
let data = {
|
|
userId: this.$store.state.userInfo.userId,
|
|
// headquartersSn: this.$store.state.userInfo.headquartersSn
|
|
};
|
|
getGroupListByCompanyApi(data).then((res) => {
|
|
// console.log(res);
|
|
if (res.code == 200 && res.result) {
|
|
if(res.result.length > 0){
|
|
this.groupListData = res.result;
|
|
this.$store.commit("setGroupTreeList", res.result); // 存储组织树数据
|
|
if(!this.$store.state.projectSn){
|
|
this.selectGroupDialog = true;
|
|
}
|
|
} else {
|
|
this.$store.commit("setGroupTreeList", []); // 存储组织树数据
|
|
this.selectGroupDialog = false;
|
|
this.contentShow = 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)
|
|
},
|
|
back() {
|
|
this.$router.push("/firm/projectManage")
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.el-menu.el-menu--horizontal {
|
|
box-sizing: border-box;
|
|
padding: 0 30px 4px;
|
|
border-bottom: none;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
// 弹框选择内容
|
|
.content-list {
|
|
&-item {
|
|
.flex();
|
|
padding: 10px 15px;
|
|
border: 1px solid #dadbdb;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
// >div{
|
|
// border: 1px solid #7299F8;
|
|
// border-radius: 5px;
|
|
// background-color: #E3F6FF;
|
|
// padding: 5px 15px;
|
|
// color: #5A88F7;
|
|
// }
|
|
> span:nth-child(2) {
|
|
margin: 0px 15px 0px 10px;
|
|
}
|
|
> div {
|
|
padding: 3px 10px;
|
|
color: #79acfa;
|
|
background-color: #e4f5ff;
|
|
border: 1px solid #99c3fb;
|
|
border-radius: 5px;
|
|
margin-top: 2px;
|
|
font-size: 10px;
|
|
}
|
|
/deep/.el-icon-arrow-right {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
&-item:not(:last-child) {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
/deep/.el-dialog {
|
|
width: 25%;
|
|
.el-dialog__body {
|
|
padding-top: 10px;
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
</style> |