daimp-front/sub-operation-service/src/views/farmingService/components/leftMenu.vue

<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"
        @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" />
          <img
            v-if="n.children && !n.isOpen"
            alt=""
            :src="getAssetsFile('images/smartFarm/down_1@2x.png')"
            class="isOpen fz"
            @click.stop="openList(index)"
          />
        </div>
        <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="item.name === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, item.name)">
                <div class="dot"></div>
                {{ item.title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const leftMenu = reactive([
  {
    name: 'inspection',
    title: '农事资讯',
    icon: 'menu1.png',
    path: '',
    isOpen: false,
    children: [
      {
        name: 'farmPolicy',
        title: '农业政策资讯',
        icon: 'menu1.png',
        path: '/sub-operation-service/farmService/consult/policy',
      },
      // {
      //   name: 'farmTechnology',
      //   title: '农事技术',
      //   icon: 'menu1.png',
      //   path: '/sub-operation-service/farmService/consult/technology',
      // },
      // {
      //   name: 'farmSituation',
      //   title: '市场行情',
      //   icon: 'menu1.png',
      //   path: '/sub-operation-service/farmService/consult/situation',
      // },
    ],
  },
  // {
  //   name: 'control',
  //   title: '生产管理控制',
  //   icon: 'menu3.png',
  //   path: '',
  //   isOpen: false,
  //   children: [
  //     {
  //       name: 'growSeedlings',
  //       title: '一体育苗',
  //       icon: 'menu3.png',
  //       path: '/sub-operation-service/smartFarm/growSeedlings',
  //     },
  //     {
  //       name: 'pestPrevention',
  //       title: '病虫害预防',
  //       icon: 'menu3.png',
  //       path: '/sub-operation-service/smartFarm/pestPrevention',
  //     },
  //     {
  //       name: 'irrigationSystem',
  //       title: '喷灌滴灌',
  //       icon: 'menu3.png',
  //       path: '/sub-operation-service/smartFarm/irrigationSystem',
  //     },
  //     {
  //       name: 'drainageControl',
  //       title: '排集水控制',
  //       icon: 'menu3.png',
  //       path: '/sub-operation-service/smartFarm/drainageControl',
  //     },
  //     {
  //       name: 'openCurtain',
  //       title: '开窗卷帘',
  //       icon: 'menu3.png',
  //       path: '/sub-operation-service/smartFarm/openCurtain',
  //     },
  //   ],
  // },
]);

let currentIndex = ref(0);
let currentCIndex = ref('');

const toLink = (index) => {
  currentIndex.value = index;
  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, name) => {
  console.info('index', index);
  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);
  }
};
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 {
  transform: rotate(180deg);
}
.isOpen {
  position: absolute;
  right: -24px;
  width: 20px;
  height: 20px;
}
.active {
  color: $color-main;
}
.smartFarm-left-menu-warp {
  padding: 0 30px 0 10px;
  width: 100%;
  height: 100%;
  .left-menu {
    .left-menu-item {
      padding: 16px 0;
      width: 100%;
      cursor: pointer;
      &.active {
        color: $color-main;
      }
      .item-img,
      .item-title {
        vertical-align: middle;
      }
      .item-img {
        display: inline-block;
        width: 32px;
        height: 32px;
      }
      .item-title {
        padding-left: 8px;
        font-size: 18px;
        font-weight: 400;
      }
      .item-children {
        margin-top: 8px;
        font-size: 16px;
        text-align: center;
        transition: transform 0.3s ease;
        .dot {
          display: inline-block;
          margin-right: 15px;
          width: 4px;
          height: 4px;
          border-radius: 90px;
          background-color: black;
          vertical-align: middle;
        }
        li {
          margin: 5px auto;
          height: 35px;
          line-height: 35px;
        }
      }
    }
  }
}
</style>