修改菜单BUG
This commit is contained in:
parent
78255cea06
commit
24f4a42ca4
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user