yoe-shop-web/src/layout/components/workbench.vue

<template>
  <div class="workbench-bos" :class="isOpen ? 'workbench-bos1' : 'workbench-bos2'">
    <div class="workbench-box1" v-if="isOpen">
      <div class="workbench-expand1 flex-row-start" @click="onOpen">
        <img src="@/assets/images/layout/workbench.png" alt="" />
        <div>收起菜单</div>
      </div>
      <div v-for="(item1, index1) in menuList" :key="index1" class="menu-list1" @click="toggleMenu(item1.path)">
        <div class="menu-head1 flex-row-between">
          <div class="menu-title1 flex-row-start">
            <img :src="item1.icon" alt="" />
            <div>{{ item1.title }}</div>
          </div>
          <el-icon v-if="openedMenus.includes(item1.path)" size="14"><ArrowDown /></el-icon>
          <el-icon v-else size="14"><ArrowRight /></el-icon>
        </div>
        <div class="menu-item" v-show="openedMenus.includes(item1.path)">
          <div
            @click="onPath(item2.path)"
            v-for="(item2, index2) in item1.children"
            :key="index2"
            class="menu-box"
            :class="{ 'menu-hig': activeMenu == item2.path }"
          >
            {{ item2.title }}
          </div>
        </div>
      </div>
    </div>
    <div v-else class="workbench-box2">
      <div class="workbench-expand2 flex-row-center" @click="onOpen">
        <div class="menu-icon flex-row-center">
          <img src="@/assets/images/layout/workbench.png" alt="" />
        </div>
      </div>

      <div v-for="(item1, index1) in menuList" :key="index1" class="workbench-expand2 flex-row-center">
        <el-popover placement="right">
          <template #reference>
            <div class="menu-icon flex-row-center" :class="{ 'hig': openedMenus.includes(item1.path) }">
              <img :src="item1.icon" alt="" />
            </div>
          </template>
          <div class="popover-bos">
            <div class="popover-title">{{ item1.title }}</div>
            <div
              class="popover-list"
              :class="{ 'popover-hig': activeMenu == item2.path }"
              v-for="(item2, index2) in item1.children"
              :key="index2"
              @click="onPath(item2.path)"
            >
              {{ item2.title }}
            </div>
          </div>
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import workbench1 from '@/assets/images/layout/workbench1.png';
import workbench2 from '@/assets/images/layout/workbench2.png';
import workbench3 from '@/assets/images/layout/workbench3.png';
import workbench4 from '@/assets/images/layout/workbench4.png';
import workbench5 from '@/assets/images/layout/workbench5.png';
import workbench6 from '@/assets/images/layout/workbench6.png';
import workbench7 from '@/assets/images/layout/workbench7.png';
import { onPath } from '@/utils/siteConfig';
const isOpen = ref(false);
const openedMenus = ref<string[]>([]);
const route = useRoute();
const menuIndex = ref<any>(0);
const menuList = [
  {
    path: '/enterprise',
    title: '企业账户',
    icon: workbench1,
    children: [
      { path: '/enterprise/companyInfo', title: '企业信息' },
      { path: '/enterprise/messageNotice', title: '消息通知' },
      { path: '/easybuv', title: '地址管理' },
      { path: '/enterprise/invoiceManage', title: '发票抬头管理' },
      { path: '/enterprise/purchasePlan', title: '专属采购方案' },
      { path: '/enterprise/agreementSupply', title: '协议供货' },
      { path: '/enterprise/myCollection', title: '我的收藏' },
      { path: '/enterprise/purchaseHistory', title: '历史购买' },
      { path: '/enterprise/myFootprint', title: '我的足迹' }
    ]
  },
  {
    path: '/order',
    title: '交易管理',
    icon: workbench2,
    children: [
      { path: '/order/orderManage', title: '订单管理' },
      { path: '/order/orderAudit', title: '审核订单' },
      { path: '/order/afterSale', title: '售后服务' },
      { path: '/order/batchOrder', title: '批量下单' },
      { path: '/order/orderEvaluation', title: '订单评价' }
    ]
  },
  {
    path: '/organization',
    title: '组织管理',
    icon: workbench3,
    children: [
      { path: '/i', title: '个人信息' },
      { path: '/organization/deptManage', title: '部门管理' },
      { path: '/organization/staffManage', title: '人员管理' },
      { path: '/organization/roleManage', title: '角色管理' },
      { path: '/organization/approvalFlow', title: '审批流程' },
      { path: '/organization/groupEnterprise', title: '集团关联企业' }
    ]
  },
  {
    path: '/cost',
    title: '成本管理',
    icon: workbench4,
    children: [
      { path: '/cost/itemExpense', title: '分项费用' },
      { path: '/cost/quotaControl', title: '额度控制' }
    ]
  },
  {
    path: '/reconciliation',
    title: '对账管理',
    icon: workbench5,
    children: [
      { path: '/reconciliation/billManage', title: '对账单管理' },
      { path: '/reconciliation/invoiceManage', title: '开票管理' }
    ]
  },
  {
    path: '/valueAdded',
    title: '增值服务',
    icon: workbench6,
    children: [
      { path: '/valueAdded/maintenance', title: '维保服务' },
      { path: '/valueAdded/complaint', title: '投诉与建议' }
    ]
  },
  {
    path: '/analysis',
    title: '采购分析',
    icon: workbench7,
    children: [
      { path: '/analysis/orderAnalysis', title: '订单交易分析' },
      { path: '/analysis/purchaseDetail', title: '商品采购明细' },
      { path: '/analysis/orderStatus', title: '订单执行状态' },
      { path: '/analysis/settlementStatus', title: '对账结算状况' },
      { path: '/analysis/deptPurchase', title: '部门采购金额' }
    ]
  }
];

const activeMenu = computed(() => route.path);
const onOpen = () => {
  isOpen.value = !isOpen.value;
};

onMounted(() => {
  initOpenedMenus();

  if (window.innerWidth > 1420) {
    isOpen.value = true;
  } else {
    isOpen.value = false;
  }
  window.addEventListener('resize', handleResize);
});

const handleResize = () => {
  if (window.innerWidth > 1420) {
    isOpen.value = true;
  } else {
    isOpen.value = false;
  }
};

// 根据当前路由自动展开对应的父级菜单
const initOpenedMenus = () => {
  const currentPath = route.path;
  for (const menu of menuList) {
    const hasActiveChild = menu.children?.some((child) => currentPath === child.path || currentPath.startsWith(child.path + '/'));
    if (hasActiveChild) {
      // 只展开当前路由对应的菜单
      openedMenus.value = [menu.path];
      return;
    }
  }
};

const toggleMenu = (path: string) => {
  const index = openedMenus.value.indexOf(path);
  if (index > -1) {
    // 如果已展开，则收起
    // openedMenus.value.splice(index, 1);
  } else {
    // 手风琴效果：先收起所有，再展开当前
    openedMenus.value = [path];
  }
};

watch(
  () => route.path,
  () => {
    initOpenedMenus();
  }
);
</script>

<style lang="scss" scoped>
.workbench-bos {
  // position: absolute;
  // top: 0;

  //展开的
  .workbench-box1 {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 8px;
    width: 180px;
    .workbench-expand1 {
      height: 42px;
      width: 100%;
      font-size: 14px;
      color: #1d2129;
      padding-left: 12px;
      cursor: pointer;
      &:hover {
        color: #e60012;
      }
      img {
        height: 16px;
        width: 16px;
        margin-right: 8px;
      }
    }
    .menu-list1 {
      width: calc(100% - 24px);
      border-bottom: 1px #e5e6eb solid;
      margin: 0 12px;
      &:nth-last-child(1) {
        border-bottom: none;
      }
      .menu-head1 {
        height: 54px;
        width: 100%;
        color: #1d2129;
        cursor: pointer;
        &:hover {
          color: #e60012;
        }
        .menu-title1 {
          font-size: 14px;

          img {
            height: 16px;
            width: 16px;
            margin-right: 8px;
          }
        }
      }
      .menu-item {
        padding-bottom: 5px;
        .menu-box {
          width: 100%;
          height: 36px;
          border-radius: 3px;
          font-size: 13px;
          color: #4e5969;
          padding-left: 12px;
          line-height: 36px;
          cursor: pointer;
          &.menu-hig {
            background: #f7f8fa;
            color: #e60012;
          }
          &:hover {
            color: #e60012;
          }
        }
      }
    }
  }

  //收起的
  .workbench-box2 {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 8px;
    width: 50px;
    .workbench-expand2 {
      width: 34px;
      height: 36px;
      cursor: pointer;
      position: relative;
      .menu-icon {
        width: 24px;
        height: 24px;
        &.hig {
          background-color: #ffe8e8;
        }
        img {
          height: 16px;
          width: 16px;
        }
      }

      .menu-open {
        position: absolute;
        right: -168px;
        top: 0;
        width: 148px;
        background-color: #ffffff;
        z-index: 99;
        padding: 10px 18px;
        border-radius: 10px;
      }
    }
    // .workbench-expand2 {
    //   width: 24px;
    //   height: 24px;
    //   cursor: pointer;
    //   margin: 16px auto;
    //   position: relative;
    //   &:hover {
    //     background-color: #ffe8e8;
    //   }
    //   &::after {
    //     content: '';
    //     width: 10px;
    //     height: 1px;
    //     background-color: #e5e6eb;
    //     position: absolute;
    //     left: 7px;
    //     bottom: -10px;
    //   }
    //   img {
    //     height: 16px;
    //     width: 16px;
    //   }
    // }
  }
  &.workbench-bos1 {
    left: -200px;
  }
  &.workbench-bos2 {
    left: -70px;
  }
}

.popover-bos {
  .popover-title {
    font-size: 12px;
    color: #9095a0;
    margin-bottom: 7px;
    padding-left: 4px;
  }
  .popover-list {
    width: 120px;
    height: 32px;
    font-size: 14px;
    color: #1c2c49;
    line-height: 32px;
    padding-left: 4px;
    cursor: pointer;
    &:hover {
      color: #e60012;
    }
    &.popover-hig {
      background: #ffe8e8;
    }
  }
}
</style>