|
|
@@ -11,7 +11,12 @@
|
|
|
<div @click.stop="openMenuBox" class="menu-modal">
|
|
|
<i class="iconfont icon-icomx_gongndh" style="margin: 0 5px 0 0"></i>
|
|
|
{{ $t("header.functionGuide") }}
|
|
|
- <i class="iconfont icon-iconm_xialan1" style="margin: 0 0 0 3px"></i>
|
|
|
+ <!-- <i class="iconfont icon-iconm_xialan1" style="margin: 0 0 0 3px"></i> -->
|
|
|
+ <span style="position:relative;top:2px">
|
|
|
+ <el-icon :size="16">
|
|
|
+ <CaretRight />
|
|
|
+ </el-icon>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</li>
|
|
|
<div class="auto-list">
|
|
|
@@ -29,7 +34,7 @@
|
|
|
</ul>
|
|
|
</li>
|
|
|
</div>
|
|
|
- <div class="header-bar-warp" v-if="isChildMenu" @click.stop="isChildMenu = false">
|
|
|
+ <div class="header-bar-warp" v-if="false" @click.stop="isChildMenu = false">
|
|
|
<div class="header-bar-hover" @click.stop>
|
|
|
<div class="header-bar-hover-content">
|
|
|
<!-- 左边 -->
|
|
|
@@ -97,10 +102,11 @@
|
|
|
</div>
|
|
|
</ul>
|
|
|
<div class="fr">
|
|
|
- <!-- <div style="float:right;height: 50px;line-height: 50px;padding-right:20px;color:#fff;font-size:14px;cursor: pointer;" @click="plugDowload">
|
|
|
+ <!-- <div style="float:right;height: 50px;line-height: 50px;margin-right:20px;color:#fff;font-size:14px;cursor: pointer;"
|
|
|
+ @click="plugsDialog=true ">
|
|
|
插件下载
|
|
|
</div> -->
|
|
|
- <div style="float:right;height: 50px;padding-right:20px">
|
|
|
+ <div style="float:right;height: 50px;margin-right:20px">
|
|
|
<el-badge :value="jobData.sumCount" :max="99" style="cursor: pointer;margin-top:15px;" v-if="jobData.sumCount" @click="handleOpenDrawer">
|
|
|
<el-icon :size="20" color="#fff">
|
|
|
<Opportunity />
|
|
|
@@ -138,10 +144,11 @@
|
|
|
$t("header.personalCenter")
|
|
|
}}</el-dropdown-item>
|
|
|
</router-link>
|
|
|
+
|
|
|
<el-dropdown-item command="setLayout">
|
|
|
<span>{{ $t("header.layoutSettings") }}</span>
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item divided command="logout">
|
|
|
+ <el-dropdown-item command="logout" divided>
|
|
|
<span>{{ $t("header.logout") }}</span>
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
@@ -149,6 +156,73 @@
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
</header>
|
|
|
+ <el-drawer v-model="isChildMenu" direction="ltr" :show-close="false" close-on-click-modal custom-class="menuDrawerClass" modal-class="modelClass">
|
|
|
+ <template #default>
|
|
|
+ <div class="menu-bar">
|
|
|
+ <div class="menu-warp" @click.stop>
|
|
|
+ <div style="margin:20px 0">
|
|
|
+ <el-input v-model="menuKeyword" placeholder="输入菜单名称进行搜索" class="menu-box" clearable @input="handleSearchMenu" />
|
|
|
+ </div>
|
|
|
+ <div v-if="!menuKeyword">
|
|
|
+ <div v-for="(item, index) in sidebarRoutersCopy" :key="item.name" v-show="item.type == 1 && item.status == '0'"
|
|
|
+ style="border-bottom:2px dashed #edeaea;padding-bottom:20px;margin-bottom:20px;">
|
|
|
+ <div class="first-order-title">
|
|
|
+ <TitleInfo :content="item.menuName" :size="16"></TitleInfo>
|
|
|
+ </div>
|
|
|
+ <div class="layout-box">
|
|
|
+ <ul class="son-box" v-for="i in item.children" :key="i.menuId">
|
|
|
+ <li class="menu-title">
|
|
|
+ <div style="width:8px;height:8px;background:#1b374c;margin-right:10px;margin-left:-4px"></div>
|
|
|
+ <div>{{ i.menuName }}</div>
|
|
|
+ </li>
|
|
|
+ <div style="border-left:1px dashed #1b374c;padding-left:10px">
|
|
|
+ <div v-for="(j, index) in i.children" :key="index">
|
|
|
+ <li v-if="i.isNone" class="menu-ul" style="cursor: auto"></li>
|
|
|
+ <li class="menu-ul">
|
|
|
+ <i style="cursor: pointer;position:relative;top:0px" @click.stop="editMenu(j)">
|
|
|
+ <svg-icon :icon-class="isHaveCollect(j) ? 'shoucang1' :'shoucang'" />
|
|
|
+ </i>
|
|
|
+ <span style="margin-left:6px;cursor: pointer" @click="commonsBannerToRouter(j)">{{ j.menuName }}</span>
|
|
|
+ <!-- :class="{'search-class':showSearchStyle(j.menuName)}" -->
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="menuKeyword">
|
|
|
+ <div v-for="(j, index) in keywordRouters" :key="index">
|
|
|
+ <li class="menu-ul">
|
|
|
+ <i style="cursor: pointer;position:relative;top:0px" @click.stop="editMenu(j)">
|
|
|
+ <svg-icon :icon-class="isHaveCollect(j) ? 'shoucang1' :'shoucang'" />
|
|
|
+ </i>
|
|
|
+ <span style="margin-left:6px;cursor: pointer" @click="commonsBannerToRouter(j)">{{ j.menuName }}</span>
|
|
|
+ <!-- :class="{'search-class':showSearchStyle(j.menuName)}" -->
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="right-banner">
|
|
|
+ <div class="first-order-title">
|
|
|
+ <TitleInfo :content="'常用功能'" :size="16"></TitleInfo>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="collect" id="collect">
|
|
|
+ <div v-for="(menu, index) in commonsRouterList" :key="menu.menuId" class="item">
|
|
|
+ <span class="menu-name" @click="commonsBannerToRouter(menu)">{{menu.menuName}}</span>
|
|
|
+ <span style="cursor:pointer;position:relative;top:2px;" @click="editMenu(menu)">
|
|
|
+ <el-icon color="#46A6FF" :size="16">
|
|
|
+ <CircleClose />
|
|
|
+ </el-icon>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
|
|
|
<el-drawer v-model="openDrawer" direction="rtl" :show-close="false" custom-class="drawerClass" modal-class="modelClass">
|
|
|
<!-- <template #header>
|
|
|
@@ -315,6 +389,41 @@ const noticeTableModal = ref(false);
|
|
|
const userData = ref(Cookies.get("nickName") || "");
|
|
|
const commonsRouterList = ref([]);
|
|
|
const activeLeftData = ref({});
|
|
|
+const menuKeyword = ref("");
|
|
|
+const keywordRouters = ref([]);
|
|
|
+const handleSearchMenu = (val) => {
|
|
|
+ if (val) {
|
|
|
+ // let els = document.querySelectorAll(".search-class");
|
|
|
+ // if (els && els.length > 0) {
|
|
|
+ // console.log(els, "ss");
|
|
|
+ // els[0].scrollIntoView();
|
|
|
+ // els[0].scrollIntoView({
|
|
|
+ // behavior: "smooth", // 平滑过渡
|
|
|
+ // block: "nearest", // 上边框与视窗顶部平齐。默认值
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+
|
|
|
+ let arr = [];
|
|
|
+ sidebarRoutersCopy.value.map((item) => {
|
|
|
+ if (item.children) {
|
|
|
+ item.children.map((j) => {
|
|
|
+ if (j.children) {
|
|
|
+ j.children.map((n) => {
|
|
|
+ if (n.menuName.includes(val) || n.menuName.indexOf(val) != -1) {
|
|
|
+ if (n.status == 0 && n.visible == 0 && n.type == 1) {
|
|
|
+ arr.push(n);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ keywordRouters.value = arr;
|
|
|
+ } else {
|
|
|
+ keywordRouters.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
const openLeftBaner = (i, index) => {
|
|
|
// leftBanerType.value = 1;
|
|
|
activeLeftData.value = i;
|
|
|
@@ -336,9 +445,12 @@ getLogo();
|
|
|
|
|
|
const openMenuBox = () => {
|
|
|
isChildMenu.value = !isChildMenu.value;
|
|
|
- nextTick(() => {
|
|
|
- initSort();
|
|
|
- });
|
|
|
+ if (isChildMenu.value) {
|
|
|
+ menuKeyword.value = "";
|
|
|
+ nextTick(() => {
|
|
|
+ initSort();
|
|
|
+ });
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
const getCollectData = () => {
|
|
|
@@ -511,7 +623,14 @@ const commonsBannerToRouter = (i) => {
|
|
|
if (j.children) {
|
|
|
j.children.map((n) => {
|
|
|
if (n.menuId === i.menuId) {
|
|
|
- router.push("/" + item.path + "/" + j.path + "/" + n.path);
|
|
|
+ if (n.query) {
|
|
|
+ let query = tansParams(JSON.parse(n.query));
|
|
|
+ router.push(
|
|
|
+ "/" + item.path + "/" + j.path + "/" + n.path + "?" + query
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ router.push("/" + item.path + "/" + j.path + "/" + n.path);
|
|
|
+ }
|
|
|
isChildMenu.value = false;
|
|
|
}
|
|
|
});
|
|
|
@@ -519,6 +638,9 @@ const commonsBannerToRouter = (i) => {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+ if (menuKeyword.value) {
|
|
|
+ menuKeyword.value = "";
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
//获取浏览器宽度
|
|
|
@@ -531,6 +653,10 @@ function calcAutoListChidren() {
|
|
|
autoListChidrenNum.value = Math.floor((getBrowserWidth() - 616) / 120);
|
|
|
}
|
|
|
|
|
|
+const getUserData = () => {
|
|
|
+ return userData.value + `（${proxy.useUserStore().currentCompanyName}）`;
|
|
|
+};
|
|
|
+
|
|
|
//一维数组转tree
|
|
|
const jobData = ref({});
|
|
|
onMounted(() => {
|
|
|
@@ -546,25 +672,18 @@ onMounted(() => {
|
|
|
isCommonsBanner: false,
|
|
|
};
|
|
|
});
|
|
|
- sidebarRoutersCopy.value = proxy.handleTree(res.data, "menuId");
|
|
|
- if (sidebarRoutersCopy.value && sidebarRoutersCopy.value.length > 0) {
|
|
|
- openLeftBaner(sidebarRoutersCopy.value[0], 0);
|
|
|
- }
|
|
|
|
|
|
- //循环删除 i.status != 0 || i.visible != 0 的元素
|
|
|
- sidebarRoutersCopy.value.map((item) => {
|
|
|
- if (item.children) {
|
|
|
- item.children.map((j) => {
|
|
|
- if (j.children) {
|
|
|
- j.children.map((n) => {
|
|
|
- if (n.status != 0 || n.visible != 0 || n.type != 1) {
|
|
|
- j.children.splice(j.children.indexOf(n), 1);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
+ let newArr = [];
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ const menu = res.data[i];
|
|
|
+ if (menu.status == "0" && menu.visible == "0" && menu.type == 1) {
|
|
|
+ newArr.push(menu);
|
|
|
}
|
|
|
- });
|
|
|
+ }
|
|
|
+ sidebarRoutersCopy.value = proxy.handleTree(newArr, "menuId");
|
|
|
+ // if (sidebarRoutersCopy.value && sidebarRoutersCopy.value.length > 0) {
|
|
|
+ // openLeftBaner(sidebarRoutersCopy.value[0], 0);
|
|
|
+ // }
|
|
|
});
|
|
|
getCollectData();
|
|
|
proxy.get("/statistics/workStatistics").then((res) => {
|
|
|
@@ -660,9 +779,34 @@ const plugDowload = () => {
|
|
|
link.click();
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
+const showSearchStyle = (name) => {
|
|
|
+ if (menuKeyword.value) {
|
|
|
+ return name.includes(menuKeyword.value);
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scope>
|
|
|
+.menuDrawerClass {
|
|
|
+ // width: calc(100vw - 500px) !important;
|
|
|
+ width: 70% !important;
|
|
|
+ min-width: 980px !important;
|
|
|
+ background: #fff;
|
|
|
+ // position: relative !important;
|
|
|
+ top: 50px !important;
|
|
|
+ height: calc(100vh - 50px) !important;
|
|
|
+ transition: none !important;
|
|
|
+ .el-drawer__header {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ .el-drawer__body {
|
|
|
+ padding: 0px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.open {
|
|
|
+ transition: all 0.3s !important;
|
|
|
+}
|
|
|
.drawerClass {
|
|
|
width: 360px !important;
|
|
|
background: rgba(62, 62, 62, 0.99);
|
|
|
@@ -681,7 +825,7 @@ const plugDowload = () => {
|
|
|
// height: 270px;
|
|
|
margin-bottom: 20px;
|
|
|
min-height: 135px;
|
|
|
- max-height: 250px;
|
|
|
+ max-height: 300px;
|
|
|
overflow: auto;
|
|
|
.job-list {
|
|
|
display: flex;
|
|
|
@@ -698,9 +842,11 @@ const plugDowload = () => {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
+ border: 0.5px solid #515151;
|
|
|
&:hover {
|
|
|
background: #616161;
|
|
|
// border: 1px solid #fff;
|
|
|
+ border-color: #fff;
|
|
|
}
|
|
|
}
|
|
|
.active-item {
|
|
|
@@ -718,14 +864,17 @@ const plugDowload = () => {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+
|
|
|
&:hover {
|
|
|
background: #616161;
|
|
|
- // border: 1px solid #fff;
|
|
|
}
|
|
|
.icon {
|
|
|
- // font-size: 20px;
|
|
|
- width: 40px;
|
|
|
- height: 20px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ .icon1 {
|
|
|
+ width: 42px;
|
|
|
+ height: 50px;
|
|
|
}
|
|
|
.text {
|
|
|
margin-left: 10px;
|
|
|
@@ -737,4 +886,131 @@ const plugDowload = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.menu-bar {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ .first-order-title {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .menu-warp {
|
|
|
+ width: calc(100% - 300px);
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 15px;
|
|
|
+ overflow: auto;
|
|
|
+ box-shadow: 2px 0px 0px #eee;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 5px !important;
|
|
|
+ height: 5px !important;
|
|
|
+ }
|
|
|
+ .layout-box {
|
|
|
+ // 瀑布流布局 分四列
|
|
|
+ -moz-column-count: 4;
|
|
|
+ /* Firefox */
|
|
|
+ -webkit-column-count: 4;
|
|
|
+ /* Safari 和 Chrome */
|
|
|
+ column-count: 4;
|
|
|
+ -moz-column-gap: 50px;
|
|
|
+ -webkit-column-gap: 50px;
|
|
|
+ column-gap: 50px;
|
|
|
+ padding: 0 20px;
|
|
|
+ .son-box {
|
|
|
+ // 子元素不跨列
|
|
|
+ -moz-page-break-inside: avoid;
|
|
|
+ -webkit-column-break-inside: avoid;
|
|
|
+ break-inside: avoid;
|
|
|
+ list-style: none; /*将默认的样式去掉*/
|
|
|
+ padding: 0; /*去掉默认的内边距*/
|
|
|
+ margin: 0; /*去掉默认的外边距*/
|
|
|
+ .menu-title {
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1b374c;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ // border-bottom: 1px solid #efebeb;
|
|
|
+ font-size: 14px;
|
|
|
+ width: 140px;
|
|
|
+ margin: 0 5vw 0 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ i {
|
|
|
+ position: relative;
|
|
|
+ top: 3px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menu-ul {
|
|
|
+ // padding-left: 10px;
|
|
|
+ height: 33px;
|
|
|
+ line-height: 33px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-ul span:hover {
|
|
|
+ color: #0084ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menu-ul {
|
|
|
+ // padding-left: 10px;
|
|
|
+ height: 33px;
|
|
|
+ line-height: 33px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-ul span:hover {
|
|
|
+ color: #0084ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-banner {
|
|
|
+ width: 300px;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0 15px;
|
|
|
+ // background: #f1f1f1;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 2px !important;
|
|
|
+ height: 2px !important;
|
|
|
+ }
|
|
|
+ .collect {
|
|
|
+ // margin-top: 5px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ // margin-bottom: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ // padding: 2px 5px;
|
|
|
+ // border: 1px solid #eee;
|
|
|
+ .menu-name {
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #0084ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.search-class {
|
|
|
+ color: red !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.el-input.menu-box .el-input__wrapper {
|
|
|
+ border: none !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ border-bottom: 1px solid #c0c4cc !important;
|
|
|
+}
|
|
|
</style>
|
cz
