🎈 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