🎈 perf(运营平台顶部菜单开发状态管理,刷新保持菜单高亮):

This commit is contained in:
郭永超 2025-08-28 10:39:34 +08:00
parent eed85dfc09
commit ec47e147dc
5 changed files with 141 additions and 17 deletions

View File

@ -12,7 +12,7 @@
</template> </template>
<script setup name="app"> <script setup name="app">
import { computed } from 'vue'; import { computed, onMounted, ref } from 'vue';
import { useSettingStore } from '@/store/modules/setting'; import { useSettingStore } from '@/store/modules/setting';
// element // element
import zhCn from 'element-plus/es/locale/lang/zh-cn'; 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 SettingStore = useSettingStore();
// //
const size = computed(() => SettingStore.themeConfig.globalComSize); 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> </script>
<style lang="scss"> <style lang="scss">

View File

@ -60,8 +60,8 @@
</div> </div>
<div class="layout-header-menu"> <div class="layout-header-menu">
<el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal"> <el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal">
<app-link v-for="(item, index) in meuns" :key="index" :to="item.path"> <app-link v-for="(item, index) in meuns" :key="index" :to="item.path" @click="clickMenu(item)">
<el-menu-item active-text-color="#25BF82">{{ item.label }}</el-menu-item> <el-menu-item :style="{ color: activeLabel == item.label ? '#25BF82' : '' }">{{ item.label }}</el-menu-item>
</app-link> </app-link>
</el-menu> </el-menu>
</div> </div>
@ -70,13 +70,14 @@
</template> </template>
<script setup name="layout-header"> <script setup name="layout-header">
import { ref, onMounted, onBeforeUnmount } from 'vue'; import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { qrImg } from './base64img'; import { qrImg } from './base64img';
import AppLink from '../Menu/Link.vue'; import AppLink from '../Menu/Link.vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { getAssetsFile } from '@/utils'; import { getAssetsFile } from '@/utils';
import { getGoodNum } from '@/apis/agricultural.js'; import { getGoodNum } from '@/apis/agricultural.js';
import { useMethodsStore } from '@/store/modules/methods'; import { useMethodsStore } from '@/store/modules/methods';
import { useMenuStore } from '@/store/modules/menuStore';
const router = useRouter(); 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 goodNum = ref(0);
const methodsStore = useMethodsStore(); const methodsStore = useMethodsStore();

View 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;
},
},
});

View File

@ -116,40 +116,70 @@ const select = reactive(maxLevelAndNodes.value.LevelVal);
const handlelist = (key) => { const handlelist = (key) => {
if (!key || !maxLevelAndNodes.value.levelMap[key]) return []; if (!key || !maxLevelAndNodes.value.levelMap[key]) return [];
let LevelKey = maxLevelAndNodes.value.LevelKey || [];
const originalList = maxLevelAndNodes.value.levelMap[key]; const originalList = maxLevelAndNodes.value.levelMap[key];
const parentKey = String(Number(key) - 1); // key const parentKey = String(Number(key) - 1); // key
const parentVal = select[parentKey]; // const parentVal = select[parentKey]; //
// //
if (LevelKey[0] === key || !parentVal || parentVal.id === '') { if (key === '1') {
// id
// console.log('originalList', originalList);
return originalList; return originalList;
} }
// pId //
if (parentVal && parentVal.id) { if (key === '2') {
//.sort((a, b) => a.id.localeCompare(b.id)) // ""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 originalList.filter((m) => m.parentId === parentVal.id);
} }
//
return []; return [];
}; };
const selectItem = (index, key, item) => { const selectItem = (index, key, item) => {
console.log('selectItem', key);
console.log('selectItem', item);
if (key && item.id) { if (key && item.id) {
currentLevel.value = index || 0; currentLevel.value = index || 0;
select[key] = { id: item.id, parentId: item.parentId ? item.parentId : null }; 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) => { 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); emit('select', select);
}; };

View File

@ -92,7 +92,7 @@ const queryList = () => {
if (tableData.value[i].content.length > 80) { if (tableData.value[i].content.length > 80) {
tableData.value[i].content += '......'; 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);
} }
} }
}); });