admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flx：修改企业后台 menu太多会掉入第二行

Browse Source
This commit is contained in:
X_Rian 2024-07-04 15:50:56 +08:00
parent 2ba35dcc92
commit e6f970a027
1 changed files with 158 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
src/views/companyAdmin/layout.vue
View File

@ -4,24 +4,47 @@
<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>
<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'">{{
$t("message.companyDiagram.pageTitle")
}}</span>
<!-- 南昌地铁头部样式 -->
<span v-if="company == 'nanchang'" style="cursor: pointer" @click="back">{{$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="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"
>
<div class="title_r flex">
<account></account>
</div>
</div>
@ -34,31 +57,31 @@
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
<div class="wrapper" ref="wrapper">
<div class="cont" ref="cont">
<div
v-for="(item, index) in menuList"
:key="index"
class="menuInnerBox"
>
</el-submenu>
<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>
</div>
</div>
<!-- <el-menu-item :index="item.modulePath" v-for="(item,index) in menuList" :key="index">{{item.moduleName}}</el-menu-item> -->
</el-menu>
@ -74,60 +97,62 @@
import account from "@/components/account.vue";
import userChange from "@/components/userChange.vue";
import centerChange from "@/components/centerChange.vue";
import {
getNewUserAllModulePageApi,
} from "@/assets/js/api/jxjadmin.js";
import BScroll from "better-scroll";
import { getNewUserAllModulePageApi } from "@/assets/js/api/jxjadmin.js";
export default {
data() {
return {
LOGO_white:LOGO_white,
currentUrl:'',
menuList:[
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
],
systemInfo: {
loginBackgroundImage: "",
loginLogo: "",
platformLogo: "",
platformName: "智慧工地云平台",
},
workSpaceShow: false,
};
},
components:{
components: {
account,
userChange,
centerChange
centerChange,
},
created() {
this.company = COMPANY;
console.log(COMPANY)
if(this.$store.state.projectSn){
console.log(COMPANY);
if (this.$store.state.projectSn) {
this.getModuleList();
}
},
mounted(){
this.getAllModule()
if(localStorage.getItem('systemInfo')){
this.systemInfo=JSON.parse(localStorage.getItem('systemInfo'))
mounted() {
this.getAllModule();
if (localStorage.getItem("systemInfo")) {
this.systemInfo = JSON.parse(localStorage.getItem("systemInfo"));
}
document.title='企业后台'
console.log('mounted',this.$route.path)
document.title = "企业后台";
console.log("mounted", this.$route.path);
this.$nextTick(() => {
let timer = setTimeout(() => {
if (timer) {
clearTimeout(timer);
this.verScroll();
}
}, 0);
});
},
methods: {
// 查询全部模块(拿到工作流的模块菜单)
@ -161,44 +186,77 @@ export default {
// 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
// }
// })
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")
}
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;
// padding: 0 162px 4px;
margin: 0 40px;
border-bottom: none;
overflow:hidden;
}
.el-menu--horizontal {
.el-menu-item,
@ -219,13 +277,15 @@ export default {
}
}
}
/deep/.el-submenu__title{
padding-right: 20px!important;
.el-submenu__icon-arrow{
/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 {
.el-menu--horizontal .firstLevelMenu.is-active,
/deep/.is-active .el-submenu__title {
border-bottom: 3px solid #409eff;
}
.menuInnerBox {
@ -260,7 +320,7 @@ export default {
// .menuInnerBox {
// display: inline-block;
// }
.menuBox{
.menuBox {
position: relative;
}
.title {
@ -272,7 +332,7 @@ export default {
height: 61px;
display: flex;
align-items: center;
justify-content: flex-end
justify-content: flex-end;
}
.title_l {
font-family: PingFangSC-Semibold;
@ -284,14 +344,14 @@ export default {
margin-right: 14px;
}
}
.title_near{
.title_near {
margin-right: 50px;
}
.title_near-tow{
.divider-line{
.title_near-tow {
.divider-line {
width: 1px;
height: 16px;
background: #FFFFFF;
background: #ffffff;
margin-right: 50px;
}
}
@ -306,4 +366,4 @@ export default {
align-items: center;
justify-content: space-between;
}
</style>
</style>