🎈 perf(运营平台顶部菜单开发状态管理,刷新保持菜单高亮):
This commit is contained in:
		
							parent
							
								
									eed85dfc09
								
							
						
					
					
						commit
						ec47e147dc
					
				| @ -12,7 +12,7 @@ | ||||
| </template> | ||||
| 
 | ||||
| <script setup name="app"> | ||||
| import { computed } from 'vue'; | ||||
| import { computed, onMounted, ref } from 'vue'; | ||||
| import { useSettingStore } from '@/store/modules/setting'; | ||||
| // 配置element中文 | ||||
| import zhCn from 'element-plus/es/locale/lang/zh-cn'; | ||||
| @ -20,6 +20,58 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'; | ||||
| const SettingStore = useSettingStore(); | ||||
| // 配置全局组件大小 | ||||
| const size = computed(() => SettingStore.themeConfig.globalComSize); | ||||
| 
 | ||||
| const meuns = ref([ | ||||
|   { | ||||
|     label: '智慧种植', | ||||
|     path: '/sub-operation-service/smartFarm', | ||||
|   }, | ||||
|   { | ||||
|     label: '电商交易', | ||||
|     path: '/sub-operation-service/ecommerce', | ||||
|   }, | ||||
|   { | ||||
|     label: '农事服务', | ||||
|     path: '/sub-operation-service/farmService', | ||||
|   }, | ||||
|   { | ||||
|     label: '分拣包装', | ||||
|     path: '/sub-operation-service/packaging', | ||||
|   }, | ||||
|   { | ||||
|     label: '仓储物流', | ||||
|     path: '/sub-operation-service/warehouseLogistics', | ||||
|   }, | ||||
|   { | ||||
|     label: '涉农金融', | ||||
|     path: '/sub-operation-service/finance', | ||||
|   }, | ||||
|   { | ||||
|     label: '公共品牌', | ||||
|     path: '/sub-operation-service/brand', | ||||
|   }, | ||||
|   { | ||||
|     label: '综合看板', | ||||
|     path: '/sub-operation-service/dashboard', | ||||
|   }, | ||||
| ]); | ||||
| import { useRoute } from 'vue-router'; | ||||
| import { useMenuStore } from '@/store/modules/menuStore'; | ||||
| const route = useRoute(); | ||||
| const menuStore = useMenuStore(); | ||||
| onMounted(() => { | ||||
|   let item = meuns.value.find((item) => route.path.indexOf(item.path) > -1); | ||||
|   console.log('item', item); | ||||
|   if (item) { | ||||
|     menuStore.setMenuLabel(item.label); | ||||
|     menuStore.setMenuPath(item.path); | ||||
|   } else { | ||||
|     menuStore.setMenuLabel('智慧种植'); | ||||
|     menuStore.setMenuPath('/sub-operation-service/smartFarm'); | ||||
|   } | ||||
|   console.log(menuStore.activeMenuLabel); | ||||
|   console.log(menuStore.activeMenuPath); | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
|  | ||||
| @ -60,8 +60,8 @@ | ||||
|       </div> | ||||
|       <div class="layout-header-menu"> | ||||
|         <el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal"> | ||||
|           <app-link v-for="(item, index) in meuns" :key="index" :to="item.path"> | ||||
|             <el-menu-item active-text-color="#25BF82">{{ item.label }}</el-menu-item> | ||||
|           <app-link v-for="(item, index) in meuns" :key="index" :to="item.path" @click="clickMenu(item)"> | ||||
|             <el-menu-item :style="{ color: activeLabel == item.label ? '#25BF82' : '' }">{{ item.label }}</el-menu-item> | ||||
|           </app-link> | ||||
|         </el-menu> | ||||
|       </div> | ||||
| @ -70,13 +70,14 @@ | ||||
| </template> | ||||
| 
 | ||||
| <script setup name="layout-header"> | ||||
| import { ref, onMounted, onBeforeUnmount } from 'vue'; | ||||
| import { ref, onMounted, onBeforeUnmount, watch } from 'vue'; | ||||
| import { qrImg } from './base64img'; | ||||
| import AppLink from '../Menu/Link.vue'; | ||||
| import { useRouter } from 'vue-router'; | ||||
| import { getAssetsFile } from '@/utils'; | ||||
| import { getGoodNum } from '@/apis/agricultural.js'; | ||||
| import { useMethodsStore } from '@/store/modules/methods'; | ||||
| import { useMenuStore } from '@/store/modules/menuStore'; | ||||
| 
 | ||||
| const router = useRouter(); | ||||
| 
 | ||||
| @ -117,6 +118,21 @@ const meuns = ref([ | ||||
|   }, | ||||
| ]); | ||||
| 
 | ||||
| const menuStore = useMenuStore(); | ||||
| const activeLabel = ref(menuStore.activeMenuLabel); | ||||
| const clickMenu = (item) => { | ||||
|   menuStore.setMenuLabel(item.label); | ||||
|   menuStore.setMenuPath(item.path); | ||||
|   activeLabel.value = item.label; | ||||
| }; | ||||
| watch( | ||||
|   () => menuStore.getMenuLabel(), | ||||
|   (newValue) => { | ||||
|     console.log('menuStore.getMenuLabel()', newValue); | ||||
|     activeLabel.value = newValue; | ||||
|   } | ||||
| ); | ||||
| 
 | ||||
| const goodNum = ref(0); | ||||
| 
 | ||||
| const methodsStore = useMethodsStore(); | ||||
|  | ||||
							
								
								
									
										26
									
								
								sub-operation-service/src/store/modules/menuStore.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										26
									
								
								sub-operation-service/src/store/modules/menuStore.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,26 @@ | ||||
| import { defineStore } from 'pinia'; | ||||
| 
 | ||||
| export const useMenuStore = defineStore({ | ||||
|   id: 'menuStore', | ||||
|   state: () => ({ | ||||
|     activeMenuLabel: localStorage.getItem('activeMenuLabel') || '智慧种植', | ||||
|     activeMenuPath: localStorage.getItem('activeMenuPath') || '/sub-operation-service/smartFarm', | ||||
|   }), | ||||
|   getters: {}, | ||||
|   actions: { | ||||
|     setMenuLabel(val) { | ||||
|       this.activeMenuLabel = val; | ||||
|       localStorage.setItem('activeMenuLabel', val); | ||||
|     }, | ||||
|     getMenuLabel() { | ||||
|       return this.activeMenuLabel; | ||||
|     }, | ||||
|     setMenuPath(val) { | ||||
|       this.activeMenuPath = val; | ||||
|       localStorage.setItem('activeMenuPath', val); | ||||
|     }, | ||||
|     getMenuPath() { | ||||
|       return this.activeMenuPath; | ||||
|     }, | ||||
|   }, | ||||
| }); | ||||
| @ -116,40 +116,70 @@ const select = reactive(maxLevelAndNodes.value.LevelVal); | ||||
| 
 | ||||
| const handlelist = (key) => { | ||||
|   if (!key || !maxLevelAndNodes.value.levelMap[key]) return []; | ||||
|   let LevelKey = maxLevelAndNodes.value.LevelKey || []; | ||||
|   const originalList = maxLevelAndNodes.value.levelMap[key]; | ||||
|   const parentKey = String(Number(key) - 1); // 上一层级的 key | ||||
|   const parentVal = select[parentKey]; // 上一层级的选中状态 | ||||
| 
 | ||||
|   // 如果是第一层级,直接返回所有数据 | ||||
|   if (LevelKey[0] === key || !parentVal || parentVal.id === '') { | ||||
|     // 对数据进行排序,按照 id 字母顺序排序 | ||||
|     // console.log('originalList', originalList); | ||||
| 
 | ||||
|   if (key === '1') { | ||||
|     return originalList; | ||||
|   } | ||||
| 
 | ||||
|   // 如果上一层级有选中的 pId,筛选当前层级的数据 | ||||
|   if (parentVal && parentVal.id) { | ||||
|     //.sort((a, b) => a.id.localeCompare(b.id)) | ||||
| 
 | ||||
|   // 如果是第二层级,判断父级(第一层级)的选中状态 | ||||
|   if (key === '2') { | ||||
|     // 如果父级选择了"全部"(id为空)或者没有选中任何项,显示所有二级数据 | ||||
|     if (!parentVal || parentVal.id === '') { | ||||
|       return originalList; | ||||
|     } | ||||
|     // 如果父级选择了具体项,只显示对应的二级数据 | ||||
|     return originalList.filter((m) => m.parentId === parentVal.id); | ||||
|   } | ||||
| 
 | ||||
|   // 其他层级的情况(如果有更多层级) | ||||
|   if (parentVal && parentVal.id) { | ||||
|     return originalList.filter((m) => m.parentId === parentVal.id); | ||||
|   } | ||||
| 
 | ||||
|   // 如果上一层级没有选中任何项,返回空数组 | ||||
|   return []; | ||||
| }; | ||||
| 
 | ||||
| const selectItem = (index, key, item) => { | ||||
|   console.log('selectItem', key); | ||||
|   console.log('selectItem', item); | ||||
|   if (key && item.id) { | ||||
|     currentLevel.value = index || 0; | ||||
|     select[key] = { id: item.id, parentId: item.parentId ? item.parentId : null }; | ||||
|     emit('select', { id: item.id }); | ||||
| 
 | ||||
|     // 重置当前层级以下所有层级的选中状态为"全部" | ||||
|     const currentLevelNum = Number(key); | ||||
|     const LevelKey = maxLevelAndNodes.value.LevelKey || []; | ||||
| 
 | ||||
|     LevelKey.forEach((level) => { | ||||
|       const levelNum = Number(level); | ||||
|       if (levelNum > currentLevelNum) { | ||||
|         select[level] = { id: '', parentId: '' }; | ||||
|       } | ||||
|     }); | ||||
| 
 | ||||
|     emit('select', select); | ||||
|   } | ||||
| }; | ||||
| 
 | ||||
| const selectAll = (key) => { | ||||
|   select[key].id = ''; | ||||
|   console.log('selectAll', key); | ||||
|   console.log('selectAll', select); | ||||
|   // 重置当前层级及以下所有层级的选中状态 | ||||
|   const levelNum = Number(key); | ||||
|   const LevelKey = maxLevelAndNodes.value.LevelKey || []; | ||||
| 
 | ||||
|   // 遍历当前层级及以下所有层级,重置选中状态 | ||||
|   LevelKey.forEach((level) => { | ||||
|     const levelInt = Number(level); | ||||
|     if (levelInt >= levelNum) { | ||||
|       select[level] = { id: '', parentId: '' }; | ||||
|     } | ||||
|   }); | ||||
| 
 | ||||
|   emit('select', select); | ||||
| }; | ||||
| 
 | ||||
|  | ||||
| @ -92,7 +92,7 @@ const queryList = () => { | ||||
|         if (tableData.value[i].content.length > 80) { | ||||
|           tableData.value[i].content += '......'; | ||||
|         } | ||||
|         console.log(tableData.value[i].content, tableData.value[i].content.length); | ||||
|         // console.log(tableData.value[i].content, tableData.value[i].content.length); | ||||
|       } | ||||
|     } | ||||
|   }); | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user