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