Skip to content

D
dsk-operate-sys-cscec
Commit 8efdbf13 authored by tyn's avatar tyn
Browse files
Options

企业详情菜单样式统一

parent 95404e5a
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 31 deletions
dsk-operate-ui/src/views/detail/party-a/component/Sidebar.vue
View file @ 8efdbf13
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<template v-for="(item, index) in sideRoute"> <template v-for="(item, index) in sideRoute">
<!-- 一级菜单 --> <!-- 一级菜单 -->
<el-submenu :index="item.index" :key="item.index" v-if="item.children" <el-submenu :index="item.index" :key="item.index" v-if="item.children" class="top-level-menu"
:disabled="!isCompanyId(item.title) || (item.title=='项目商机'&&statisticObj.business.landInfo<1&&statisticObj.business.busProposedProjectV1<1&&statisticObj.performance.specialDebt<1&&statisticObj.performance.bidPlan<1&&statisticObj.business.biddingAnnouncement<1&&statisticObj.business.proBiddingAnnouncement<1&&statisticObj.business.adminLicensing<1)"> :disabled="!isCompanyId(item.title) || (item.title=='项目商机'&&statisticObj.business.landInfo<1&&statisticObj.business.busProposedProjectV1<1&&statisticObj.performance.specialDebt<1&&statisticObj.performance.bidPlan<1&&statisticObj.business.biddingAnnouncement<1&&statisticObj.business.proBiddingAnnouncement<1&&statisticObj.business.adminLicensing<1)">
<template slot="title"> <template slot="title">
<span>{{item.title}}</span> <span>{{item.title}}</span>
...@@ -18,30 +18,31 @@ ...@@ -18,30 +18,31 @@
<template v-for="(subItem,subIndex) of item.children"> <template v-for="(subItem,subIndex) of item.children">
<!-- 二级菜单 --> <!-- 二级菜单 -->
<template v-if="subItem.children && subItem.children.length"> <template v-if="subItem.children && subItem.children.length">
<el-submenu :index="subItem.index" :key="subItem.index"> <el-submenu :index="subItem.index" :key="subItem.index" class="second-level-menu-has-children">
<template slot="title"> <template slot="title">
<span>{{subItem.title}}</span> <span>{{subItem.title}}</span>
</template> </template>
<!-- 三级菜单 --> <!-- 三级菜单 -->
<template v-for="(threeLevelMenu,threeLevelIndex) of subItem.children"> <template v-for="(threeLevelMenu,threeLevelIndex) of subItem.children">
<el-menu-item :index="threeLevelMenu.index" :key="threeLevelMenu.index" @click="handleItem(threeLevelMenu)" <el-menu-item :index="threeLevelMenu.index" :key="threeLevelMenu.index" @click="handleItem(threeLevelMenu)"
:disabled="!isCompanyId(threeLevelMenu.title) || threeLevelMenu.disabled" :disabled="!isCompanyId(threeLevelMenu.title) || threeLevelMenu.disabled" v-if="isCustomerId(threeLevelMenu.pathName)">
v-if="isCustomerId(threeLevelMenu.pathName)">{{threeLevelMenu.title}}</el-menu-item> <span>{{threeLevelMenu.title}}</span>
</el-menu-item>
</template> </template>
</el-submenu> </el-submenu>
</template> </template>
<template v-else> <template v-else>
<el-menu-item :index="subItem.index" @click="handleItem(subItem)" :disabled="!isCompanyId(subItem.title) || subItem.disabled" <el-menu-item class="second-level-menu-no-children" :index="subItem.index" @click="handleItem(subItem)"
v-if="isCustomerId(subItem.pathName)">{{subItem.title}}</el-menu-item> :disabled="!isCompanyId(subItem.title) || subItem.disabled" v-if="isCustomerId(subItem.pathName)">{{subItem.title}}</el-menu-item>
</template> </template>
</template> </template>
</el-submenu> </el-submenu>
<template v-else> <template v-else>
<el-menu-item :index="item.index" @click="handleItem(item)" :disabled="!isCompanyId(item.title) || item.disabled" <el-menu-item class="top-level-menu-no-children" :index="item.index" @click="handleItem(item)"
v-if="isCustomerId(item.pathName)">{{item.title}}</el-menu-item> :disabled="!isCompanyId(item.title) || item.disabled" v-if="isCustomerId(item.pathName)">{{item.title}}</el-menu-item>
</template> </template>
</template> </template>
</el-menu> </el-menu>
...@@ -252,14 +253,16 @@ export default { ...@@ -252,14 +253,16 @@ export default {
this.searchIndex = this.findNodeIndex(this.defaultRoute, "overview").index; this.searchIndex = this.findNodeIndex(this.defaultRoute, "overview").index;
}, },
// 查找菜单中的元素 // 查找菜单中的元素
findNodeIndex(tree, key, findKey = "pathName") { findNodeIndex(tree, key, findKey = "pathName", findParent = false, parenNode = null) {
let len = tree.length; let len = tree.length;
for (let index = 0; index < len; index++) { for (let index = 0; index < len; index++) {
if (tree[index][findKey] === key) { if (tree[index][findKey] === key) {
return tree[index]; console.log(tree[index][findKey], key, "匹配成功");
return findParent ? parenNode : tree[index];
}; };
if (tree[index]?.children?.length) { if (tree[index]?.children?.length) {
return this.findNodeIndex(tree[index]?.children, key, findKey); const result = this.findNodeIndex(tree[index]?.children, key, findKey, findParent, tree[index]);
if (result) return result;
} }
} }
}, },
...@@ -368,26 +371,45 @@ export default { ...@@ -368,26 +371,45 @@ export default {
} }
this.$emit("currentPath", obj); this.$emit("currentPath", obj);
}, },
handleSearch(flag) { async handleSearch(flag) {
// 手动输入时 flag 为true try {
if ((this.searchText && !flag) || (!this.searchText && flag)) { // 手动输入时 flag 为true
// 找到唯一标识 if ((this.searchText && !flag) || (!this.searchText && flag)) {
console.log(this.searchText); // 找到唯一标识
let side = this.findNodeIndex(this.defaultRoute, this.searchText, "title"); let side = this.findNodeIndex(this.defaultRoute, this.searchText, "title");
console.log(side); // 需要打开菜单的唯一标识
// if (idx) { let openIndex = null;
// if (idx.includes('-')) { // 右侧打开的菜单对应对象
// let openIdx = idx.slice(0, 1); let openSide = null;
// this.sideRoute = [this.defaultRoute[openIdx]]; // 菜单高亮命中
// this.$refs.sideMenu.open(openIdx); let hightLightSide = null;
// } else { if (side) {
// this.sideRoute = [this.defaultRoute[idx]]; // 判断是否是子级菜单 有children 直接使用当前层级 没有找父级
// } if (side?.children?.length) {
// this.searchIndex = '-1'; openIndex = side.index;
// } else { openSide = side?.children[0];
// this.sideRoute = this.defaultRoute; // 打开的菜单有children 表示目录 不高亮显示
// this.searchIndex = ''; hightLightSide = openSide?.children?.length ? null : side?.children[0]?.index;
// } this.sideRoute = [JSON.parse(JSON.stringify(side))];
} else {
// 找父节点
const parent = this.findNodeIndex(this.defaultRoute, side.pathName, "pathName", true);
openIndex = parent.index;
hightLightSide = side.index;
openSide = side;
this.sideRoute = [JSON.parse(JSON.stringify(parent))];
}
await this.$nextTick();
this.$refs.sideMenu.open(openIndex);
// 打开查找到的菜单 禁用则不打开
openSide?.disabled ? null : (hightLightSide ? (this.searchIndex = hightLightSide) : null) && this.handleItem(openSide);
} else {
this.sideRoute = JSON.parse(JSON.stringify(this.defaultRoute));
this.searchText = "";
}
}
} catch (err) {
console.log(err);
} }
}, },
isCustomerId(name) { isCustomerId(name) {
...@@ -490,6 +512,70 @@ export default { ...@@ -490,6 +512,70 @@ export default {
border-radius: 50%; border-radius: 50%;
} }
} }
::v-deep .top-level-menu {
// 重置展开图标位置
.el-submenu__icon-arrow {
position: static;
margin-top: 0px;
}
// 顶级菜单标题
& > .el-submenu__title {
font-weight: bold;
color: #232323;
font-size: 14px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 8px !important;
box-sizing: border-box;
}
// 二级菜单
& > .el-menu {
.second-level-menu-no-children,
.second-level-menu-has-children .el-submenu__title {
font-size: 14px;
height: 38px;
color: #232323;
font-weight: 400;
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 8px 9px 32px !important;
box-sizing: border-box;
&::before {
display: none;
}
}
.second-level-menu-has-children {
// 三级菜单
& > .el-menu {
& > .el-menu-item {
font-size: 12px;
height: 32px;
color: rgba(35, 35, 35, 0.8);
font-weight: 400;
display: flex;
align-items: center;
padding: 9px 8px 9px 32px !important;
box-sizing: border-box;
& > span {
margin-left: 8px;
}
&::before {
position: static;
}
}
}
}
}
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment