修改菜单BUG

This commit is contained in:
姚俊旭 2025-05-21 17:13:19 +08:00
parent 78255cea06
commit 24f4a42ca4

View File

@ -1,19 +1,22 @@
<template>
<div class="smartFarm-left-menu-warp">
<div class="left-menu">
<div v-for="(n, index) in leftMenu" :key="index" class="left-menu-item" style="position: relative">
<div style="display: flex; justify-content: flex-start; align-items: center" @click.stop="toLink(index)">
<div
v-for="(n, index) in leftMenu"
:key="index"
class="left-menu-item"
style="position: relative"
@click.stop="
toLink(index);
openList(index);
"
>
<div style="display: flex; justify-content: flex-start; align-items: center">
<div class="item-img">
<img :src="getAssetsFile('images/smartFarm/' + n.icon)?.href ?? ''" alt="" />
</div>
<span :class="n.isOpen ? 'active' : ''" class="item-title">{{ n.title }}</span>
<img
v-if="n.children && n.isOpen"
alt=""
:src="getAssetsFile('images/smartFarm/closing.png')"
class="isOpen"
@click.stop="openList(index)"
/>
<img v-if="n.children && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
<img
v-if="n.children && !n.isOpen"
alt=""
@ -25,7 +28,7 @@
<div v-if="n.children && n.isOpen" class="item-children">
<div v-for="(item, indexC) in n.children" :key="indexC">
<ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important">
<li :class="indexC === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, indexC)">
<li :class="item.name === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, item.name)">
<div class="dot"></div>
{{ item.title }}
</li>
@ -43,17 +46,13 @@ import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
// const props = defineProps({
// currentName: { type: String, default: 'dashboard' },
// });
const leftMenu = reactive([
{
name: 'supplier',
name: 'inspection',
title: '农业环境监测',
icon: 'menu1.png',
path: '/sub-operation-service/smartFarm/main',
isOpen: true,
isOpen: false,
children: [
{
name: 'fieldInspection',
@ -107,31 +106,31 @@ const leftMenu = reactive([
isOpen: false,
children: [
{
name: 'control',
name: 'growSeedlings',
title: '一体育苗',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/growSeedlings',
},
{
name: 'control',
name: 'pestPrevention',
title: '病虫害预防',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/pestPrevention',
},
{
name: 'control',
name: 'irrigationSystem',
title: '喷灌滴灌',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/irrigationSystem',
},
{
name: 'control',
name: 'drainageControl',
title: '排集水控制',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/drainageControl',
},
{
name: 'control',
name: 'openCurtain',
title: '开窗卷帘',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/openCurtain',
@ -141,32 +140,31 @@ const leftMenu = reactive([
]);
let currentIndex = ref(0);
let currentCIndex = ref(-1);
// watch(
// () => props.currentName,
// () => {
// console.info('currentName', props.currentName);
// currentIndex.value = leftMenu.findIndex((m) => {
// return m.name === props.currentName;
// });
// },
// { deep: true, immediate: true }
// );
let currentCIndex = ref('');
const toLink = (index) => {
currentIndex.value = index;
currentCIndex.value = -1;
window.sessionStorage.setItem('currentOpen', index);
if (index === 0) {
window.sessionStorage.setItem('currentChild', 'main');
}
currentCIndex.value = '';
let path = index !== undefined ? leftMenu[index].path : null;
if (path) {
router.push(path);
}
};
const toLinkSub = (index, c) => {
const toLinkSub = (index, name) => {
console.info('index', index);
console.info('c', c);
currentCIndex.value = c;
let path = leftMenu[index].children[c].path;
console.info('currentChild', name);
currentCIndex.value = name;
window.sessionStorage.setItem('currentChild', name);
let path;
for (let i in leftMenu[index].children) {
if (leftMenu[index].children[i].name === name) {
path = leftMenu[index].children[i].path;
}
}
if (path) {
console.info('path', path);
router.push(path);
@ -176,6 +174,22 @@ const openList = (index) => {
currentIndex.value = index;
leftMenu[index].isOpen = !leftMenu[index].isOpen;
};
onMounted(() => {
const currentMenu = window.sessionStorage.getItem('currentOpen');
if (currentMenu) {
for (let i in leftMenu) {
leftMenu[i].isOpen = i === currentMenu;
}
}
const currentChild = window.sessionStorage.getItem('currentChild');
if (currentChild && currentChild === 'main') {
currentIndex.value = 0;
currentCIndex.value = '';
} else if (currentChild) {
currentCIndex.value = currentChild;
}
});
</script>
<style lang="scss" scoped>
.fz {