公用菜单

sub-operation-service/src/components/common/leftMenu.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="smartFarm-left-menu-warp">
+    <div class="left-menu">
+      <div
+        v-for="(n, index) in menus"
+        :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="currentIndex === index ? 'active' : ''" class="item-title">{{ n.title }}</span>
+          <img v-if="n.children.length > 0 && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
+          <img
+            v-if="n.children.length > 0 && !n.isOpen"
+            alt=""
+            :src="getAssetsFile('images/smartFarm/down_1@2x.png')"
+            class="isOpen fz"
+            @click.stop="openList(index)"
+          />
+        </div>
+        <div v-if="n.children.length > 0 && 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 props = defineProps({
+  menus: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+
+watch(
+  () => props.menus,
+  (newMenus) => {
+    leftMenu.value = [...newMenus];
+  },
+  { deep: true }
+);
+
+const leftMenu = ref([...props.menus]);
+
+let currentIndex = ref(0);
+let currentCIndex = ref('');
+
+const toLink = (index) => {
+  currentIndex.value = index;
+  console.log(leftMenu);
+  if (leftMenu.value[index].children.length > 0) {
+    window.sessionStorage.setItem('currentOpen', index);
+  }
+  if (index === 0) {
+    window.sessionStorage.setItem('currentChild', 'main');
+  }
+  currentCIndex.value = '';
+  let path = index !== undefined ? leftMenu.value[index].path : null;
+  if (path) {
+    router.push(path);
+    window.sessionStorage.setItem('currentParent', index);
+  }
+};
+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.value[index].children) {
+    if (leftMenu.value[index].children[i].name === name) {
+      path = leftMenu.value[index].children[i].path;
+    }
+  }
+  if (path) {
+    console.info('path', path);
+    router.push(path);
+  }
+};
+const openList = (index) => {
+  currentIndex.value = index;
+  leftMenu.value[index].isOpen = !leftMenu.value[index].isOpen;
+};
+
+onMounted(() => {
+  currentIndex.value = window.sessionStorage.getItem('currentParent') ? Number(window.sessionStorage.getItem('currentParent')) : 0;
+  const currentMenu = window.sessionStorage.getItem('currentOpen');
+  if (currentMenu) {
+    for (let i in leftMenu.value) {
+      leftMenu.value[i].isOpen = i === currentMenu;
+    }
+  }
+  const currentChild = window.sessionStorage.getItem('currentChild');
+  if (currentChild && currentChild === 'main') {
+    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>

sub-operation-service/src/views/warehouseLogistics/components/common.vue

@@ -16,7 +16,7 @@
 </template>
 <script setup>
 import { ref, reactive, onMounted, watch } from 'vue';
-import leftMenu from './leftMenu.vue';
+import leftMenu from '@/components/common/leftMenu.vue';
 
 const props = defineProps({
   currentName: { type: String, default: 'agricultural' },
@@ -24,67 +24,20 @@ const props = defineProps({
 
 const menus = reactive([
   {
-    name: 'supplier',
+    name: 'inspection',
-    title: '农业环境监测',
+    title: '仓储',
     icon: 'menu1.png',
-    path: '/sub-operation-service/smartFarm/main',
+    path: '/sub-operation-service/warehouse',
-    isOpen: true,
-    children: [
-      {
-        name: 'supplier',
-        title: '田间监测',
-        path: '/sub-operation-service/smartFarm/inspection',
-      },
-      {
-        name: 'supplier',
-        title: '水质监测',
-        path: '/sub-operation-service/ecommerce-supplier',
-      },
-      {
-        name: 'supplier',
-        title: '病虫害监测',
-        path: '/sub-operation-service/ecommerce-supplier',
-      },
-    ],
-  },
-  {
-    name: 'control',
-    title: '生产管理控制',
-    icon: 'menu3.png',
-    path: '',
     isOpen: false,
-    children: [
+    children: [],
-      {
-        name: 'control',
-        title: '一体育苗',
-        icon: 'menu3.png',
-        path: '/sub-operation-service/smartFarm/manageControl/growSeedlings',
   },
   {
     name: 'control',
-        title: '病虫害预防',
+    title: '物流',
     icon: 'menu3.png',
-        path: '/sub-operation-service/smartFarm/manageControl/pestPrevention',
+    path: '/sub-operation-service/logistics',
-      },
+    isOpen: false,
-      {
+    children: [],
-        name: 'control',
-        title: '喷灌滴灌',
-        icon: 'menu3.png',
-        path: '/sub-operation-service/smartFarm/manageControl/irrigationSystem',
-      },
-      {
-        name: 'control',
-        title: '排集水控制',
-        icon: 'menu3.png',
-        path: '/sub-operation-service/smartFarm/manageControl/drainageControl',
-      },
-      {
-        name: 'control',
-        title: '开窗卷帘',
-        icon: 'menu3.png',
-        path: '/sub-operation-service/smartFarm/manageControl/openCurtain',
-      },
-    ],
   },
 ]);
 </script>