riku
2023-05-09 0959c095ad9715633d6ccdf10eb3b3d52f0bede1
src/components/core/SiderMenu.vue
@@ -17,95 +17,11 @@
      </el-space>
    </el-row>
    <el-scrollbar :height="menuHeight" v-if="!collapse">
      <template v-for="(item, i) in routes" :key="`${i}`">
        <el-sub-menu v-if="item.children" :index="`${i}`">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <template v-for="(child, i2) in item.children" :key="`${i}-${i2}`">
            <el-menu-item-group v-if="child.group" :title="child.name">
              <el-menu-item
                v-for="(child2, i3) in child.children"
                :key="`${i}-${i2}-${i3}`"
                :index="child2.path"
                @click="navPage(item, child, child2)"
              >
                <el-icon v-if="child2.icon">
                  <component :is="child2.icon"></component>
                </el-icon>
                <template #title>{{ child2.name }}</template>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item
              v-else
              :index="child.path"
              @click="navPage(item, child)"
            >
              <el-icon v-if="child.icon">
                <component :is="child.icon"></component>
              </el-icon>
              <template #title>{{ child.name }}</template>
            </el-menu-item>
          </template>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path" @click="navPage(item)">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <template #title>{{ item.name }}</template>
        </el-menu-item>
      </template>
      <MenuItems :routes="routes" @navPage="navPage"> </MenuItems>
    </el-scrollbar>
    <template v-else>
      <template v-for="(item, i) in routes" :key="`${i}`">
        <el-sub-menu v-if="item.children" :index="`${i}`">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <template v-for="(child, i2) in item.children" :key="`${i}-${i2}`">
            <el-menu-item-group v-if="child.group" :title="child.name">
              <el-menu-item
                v-for="(child2, i3) in child.children"
                :key="`${i}-${i2}-${i3}`"
                :index="child2.path"
                @click="navPage(item, child, child2)"
              >
                <el-icon v-if="child2.icon">
                  <component :is="child2.icon"></component>
                </el-icon>
                <template #title>{{ child2.name }}</template>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item
              v-else
              :index="child.path"
              @click="navPage(item, child)"
            >
              <el-icon v-if="child.icon">
                <component :is="child.icon"></component>
              </el-icon>
              <template #title>{{ child.name }}</template>
            </el-menu-item>
          </template>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path" @click="navPage(item)">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <template #title>{{ item.name }}</template>
        </el-menu-item>
      </template>
      <MenuItems :routes="routes" @navPage="navPage"> </MenuItems>
    </template>
    <el-row ref="subTitleRef" class="sub-title" justify="center">
@@ -126,7 +42,6 @@
  emits: ['navPage'],
  data() {
    return {
      isCollapsed: this.collapse,
      menuHeight: '600px',
      title: '生态环境线上监管',
      subTitle: '©上海飞羽环保科技有限公司',
@@ -244,10 +159,14 @@
          icon: 'Search',
          name: '排污抽运',
        },
        {
          path: '/common/userMatch',
          icon: 'Connection',
          name: '账户匹配',
        },
      ],
    };
  },
  watch: {},
  computed: {
    homePage() {
      return this.routes[0].children
@@ -258,10 +177,6 @@
  methods: {
    handleOpen() {},
    handleClose() {},
    collapsedSider() {
      this.isCollapsed = !this.isCollapsed;
      this.$emit('collapsedSider', this.isCollapsed);
    },
    navPage(...item) {
      const titles = item.map((value) => {
        return value.name;