web/src/layout/children-menu.vue

<template>
  <template v-for="menu in modelValue" :key="menu.name">
    <template v-if="menu.meta?.bind"> </template>
    <template v-else>
      <t-menu-item
        v-if="!menu.children || menu.children.length === 0"
        :value="menu.name"
        :disabled="menu.disabled"
        @click="routerPush(menu)"
      >
        <template v-if="menu.meta.icon" #icon>
          <svg-icon :name="menu.meta.icon"></svg-icon>
        </template>
        <span>
          {{ menu.meta.title }}
        </span>
        <span
          v-if="menu.meta?.alias && counts[menu.meta.alias]"
          class="t-menu__count"
        >
          {{ counts[menu.meta?.alias] }}
        </span>
      </t-menu-item>
      <!-- 下面这个目前是用不上了 -->
      <t-submenu v-else :value="menu.name">
        <template v-if="menu.meta.icon" #icon>
          <svg-icon :name="menu.meta.icon"></svg-icon>
        </template>
        <template #title>
          {{ menu.meta.title }}
        </template>
        <template v-if="menu.children">
          <children-menu v-model="menu.children" />
        </template>
      </t-submenu>
    </template>
  </template>
</template>

<script setup name="ChildrenMenu">
import { useRouter } from 'vue-router';
import { useWorkStore } from '@/store';
import { computed } from 'vue';

defineProps({ modelValue: Array });

const router = useRouter();
const workStore = useWorkStore();

const counts = computed(() => workStore.counts);

const routerPush = (menu) => {
  if (menu.meta && menu.meta.type === 'L') {
    window.open(menu.path);
  } else {
    router.push(menu.path);
  }
};
</script>