From 0bd8b4947527f0d1a3fe445d84fb776ce021507e Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 21 十一月 2024 10:59:56 +0800
Subject: [PATCH] 1. 修改问题整改界面中左侧列表的状态图标
---
src/components/core/SiderMenu.vue | 270 +++++++++++++++++-------------------------------------
1 files changed, 85 insertions(+), 185 deletions(-)
diff --git a/src/components/core/SiderMenu.vue b/src/components/core/SiderMenu.vue
index 995fc80..162fc70 100644
--- a/src/components/core/SiderMenu.vue
+++ b/src/components/core/SiderMenu.vue
@@ -10,219 +10,107 @@
@close="handleClose"
router
>
+ <!-- 鏍囬 -->
<el-row ref="headerRef" class="header">
<el-space>
<el-avatar size="default" icon="UserFilled" />
<div>{{ collapse ? '' : title }}</div>
</el-space>
</el-row>
+ <!-- 绯荤粺鍒囨崲鎸夐挳 -->
+ <el-popover
+ ref="header2Ref"
+ placement="right"
+ trigger="click"
+ effect="dark"
+ :visible="popVisible"
+ >
+ <template #reference>
+ <div class="fy-button-div" @click="popVisible = !popVisible">
+ <div
+ v-show="!collapse"
+ style="font-size: 12px; color: gray; margin-left: 24px; margin-bottom: 4px;"
+ >
+ 褰撳墠绯荤粺
+ </div>
+ <el-row justify="space-between" align="middle" style="flex-wrap: nowrap;">
+ <el-space>
+ <el-icon :size="16"><Open /></el-icon>
+ <span v-show="!collapse">{{ sysName }}</span>
+ </el-space>
+ <el-icon v-show="!collapse"><ArrowRight /></el-icon>
+ </el-row>
+ </div>
+ </template>
+ <div class="fy-button-div" v-for="(n, i) in sysNames" :key="i" @click="choseSys(i)">
+ {{ n.name }}
+ </div>
+ </el-popover>
+ <!-- 鑿滃崟 -->
<el-scrollbar :height="menuHeight" v-if="!collapse">
- <MenuItems :routes="routes" @navPage="navPage"> </MenuItems>
+ <MenuItems :routes="menus" @navPage="navPage"> </MenuItems>
</el-scrollbar>
<template v-else>
- <MenuItems :routes="routes" @navPage="navPage"> </MenuItems>
+ <MenuItems :routes="menus" @navPage="navPage"> </MenuItems>
</template>
- <el-row ref="subTitleRef" class="sub-title" justify="center">
+ <!-- 鍟嗘爣 -->
+ <!-- <el-row ref="subTitleRef" class="sub-title" justify="center">
<el-space>{{ collapse ? '' : subTitle }}</el-space>
- </el-row>
+ </el-row> -->
</el-menu>
</template>
<script>
+import { MENU_FYSP, MENU_FYTZ, MENU_FYPW } from '@/constants/index';
+
export default {
name: 'CoreSiderMenu',
props: {
collapse: {
type: Boolean,
- default: false,
- },
+ default: false
+ }
},
emits: ['navPage'],
data() {
return {
- menuHeight: '600px',
+ popVisible: false,
+ menuHeight: '80vh',
title: '鐢熸�佺幆澧冪嚎涓婄洃绠�',
subTitle: '漏涓婃捣椋炵窘鐜繚绉戞妧鏈夐檺鍏徃',
- routes: [
- {
- icon: 'Search',
- name: '宸℃煡瀹℃牳',
- children: [
- {
- path: '/procheck',
- icon: 'Search',
- name: '闂瀹℃牳',
- },
- // {
- // path: '/changecheck',
- // icon: 'Search',
- // name: '鏁存敼瀹℃牳',
- // },
- ],
- },
- // {
- // path: '/ledger',
- // icon: 'Search',
- // name: '鍙拌处瀹℃牳',
- // },
- // {
- // icon: 'Search',
- // name: '涓氬姟鍒嗘瀽',
- // children: [
- // {
- // path: '/analysis/profollow',
- // icon: 'Search',
- // name: '闂鍔ㄦ�佽窡韪�',
- // },
- // {
- // path: '/analysis/proanalysis',
- // icon: 'Search',
- // name: '闂鏁存敼鍒嗘瀽',
- // },
- // {
- // path: '/analysis/standardjudge',
- // icon: 'Search',
- // name: '瑙勮寖鎬ц瘎浼�',
- // },
- // ],
- // },
- // {
- // path: '/dailyreport',
- // icon: 'Search',
- // name: '鏃ユ姤绠＄悊',
- // },
- // {
- // icon: 'Search',
- // name: '鍦烘櫙鎶ュ憡',
- // children: [
- // {
- // path: '/scenereport/construction',
- // icon: 'Search',
- // name: '宸ュ湴',
- // },
- // {
- // path: '/scenereport/wharf',
- // icon: 'Search',
- // name: '鐮佸ご',
- // },
- // {
- // path: '/scenereport/mixing',
- // icon: 'Search',
- // name: '鎼呮媽绔�',
- // },
- // {
- // path: '/scenereport/storage',
- // icon: 'Search',
- // name: '鍫嗗満',
- // },
- // ],
- // },
- {
- path: '/notice',
- icon: 'Search',
- name: '閫氱煡绠＄悊',
- },
- {
- icon: 'Search',
- name: '鐢ㄦ埛绠＄悊',
- children: [
- {
- group: true,
- name: '椋炵窘鐩戠',
- children: [
- // {
- // path: '/fysp/userInfo',
- // name: '璐︽埛淇℃伅',
- // },
- {
- path: '/fysp/sceneInfo',
- name: '鍦烘櫙淇℃伅',
- },
- ],
- },
- {
- group: true,
- name: '椋炵窘鐜',
- children: [
- {
- path: '/fytz/userInfo',
- name: '璐︽埛淇℃伅',
- },
- ],
- },
- ],
- },
- {
- icon: 'Search',
- name: '涓氬姟鍒嗘瀽',
- children: [
- {
- group: true,
- name: '椋炵窘鐩戠',
- children: [
- {
- path: '/fysp/userInfo',
- name: '璐︽埛淇℃伅',
- },
- {
- path: '/fysp/sceneInfo',
- name: '鍦烘櫙淇℃伅',
- },
- ],
- },
- {
- group: true,
- name: '椋炵窘鐜',
- children: [
- // {
- // path: '/fytz/userInfo',
- // name: '璐︽埛淇℃伅',
- // },
- ],
- },
- ],
- },
- // {
- // path: '/scenereport/storage',
- // icon: 'Search',
- // name: '鎺掓薄鎶借繍',
- // },
- // {
- // path: '/common/userMatch',
- // icon: 'Connection',
- // name: '璐︽埛鍖归厤',
- // },
- {
- icon: 'Search',
- name: '璧勬簮绠＄悊',
- children: [
- {
- path: '/fytz/enforceCase',
- icon: 'Search',
- name: '鐫ｅ療妗堜緥',
- },
- // {
- // path: '/changecheck',
- // icon: 'Search',
- // name: '鏁存敼瀹℃牳',
- // },
- ],
- },
- ],
+ sysIndex: 0,
+ sysNames: [
+ { name: '椋炵窘鐩戠', des: '' },
+ { name: '椋炵窘鐜', des: '' },
+ { name: '鎺掓薄鎶借繍', des: '' }
+ ]
};
},
computed: {
homePage() {
- return this.routes[0].children
- ? this.routes[0].children[0].path
- : this.routes[0].path;
+ const paths = this.menuPath(this.menus[0]);
+ return paths[paths.length - 1].path;
},
+ sysName() {
+ return this.sysNames[this.sysIndex].name;
+ },
+ menus() {
+ return [MENU_FYSP, MENU_FYTZ, MENU_FYPW][this.sysIndex];
+ }
},
methods: {
handleOpen() {},
handleClose() {},
+ choseSys(i) {
+ this.sysIndex = i;
+ const paths = this.menuPath(this.menus[0]);
+ this.navPage(...paths);
+ const p = paths[paths.length - 1].path;
+ this.$router.push(p);
+ this.popVisible = false;
+ },
navPage(...item) {
const titles = item.map((value) => {
return value.name;
@@ -231,20 +119,28 @@
},
calMenuHeight() {
const h1 = this.$refs.headerRef.$el.offsetHeight;
- const h2 = this.$refs.subTitleRef.$el.offsetHeight;
- return `calc(100vh - ${h1}px - ${h2}px)`;
+ const h2 = this.$refs.header2Ref.$el.offsetHeight;
+ // const h3 = this.$refs.subTitleRef.$el.offsetHeight;
+ const h3 = 0;
+ return `calc(100vh - ${h1}px - ${h2}px - ${h3}px)`;
},
+ menuPath(m) {
+ if (m.children) {
+ const arr = this.menuPath(m.children);
+ arr.shift(m);
+ return arr;
+ } else {
+ return [m];
+ }
+ }
},
created() {
this.$router.push(this.homePage);
- const child = this.routes[0].children
- ? this.routes[0].children[0]
- : undefined;
- this.navPage(this.routes[0], child);
+ this.navPage(...this.menuPath(this.menus[0]));
},
mounted() {
this.menuHeight = this.calMenuHeight();
- },
+ }
};
</script>
@@ -253,7 +149,7 @@
color: white;
background-color: #454f5a;
padding: 10px;
- margin-bottom: 10px;
+ /* margin-bottom: 10px; */
box-shadow: 0 0.4rem 0.7rem 0 #5d656e;
white-space: nowrap;
overflow: hidden;
@@ -283,10 +179,14 @@
.el-menu-vertical-demo:not(.el-menu--collapse) {
/* width: 200px; */
min-height: 100vh;
- max-height: 100vh;
+ /* max-height: 100vh; */
}
.el-menu--collapse {
min-height: 100vh;
}
+
+.fy-button-div {
+ white-space: nowrap;
+}
</style>
--
Gitblit v1.9.3