MTP2.0_WEB/src/layout/components/menu.vue

<template>
  <a-menu theme="dark"
          mode="inline"
          class="left-menu"
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          @click="menuClick">
    <a-sub-menu v-for="item in menuList"
                :key="item.code">
      <template #title>
        <span>
          <svg class="icon svg-icon"
               aria-hidden="true">
            <use :xlink:href="fontIcon(item.code)"></use>
          </svg>
          <span class="menu-item_title"
                v-show="!collapsed">{{ item.title }}</span>
        </span>
      </template>
      <a-menu-item :key="subItem.code"
                   v-for="subItem in item.children">
        <span>{{ subItem.title }}</span>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>

<script lang="ts">
import { defineComponent, ref, SetupContext, unref, watchEffect } from 'vue';
import APP from '@/services';
import { initData } from '@/common/methods';
import { OperationTabMenu } from '@/services/go/commonService/interface';

function handleMenu(context: SetupContext) {
    const selectedKeys = ref<string[]>(['1-1']);
    const openKeys = ref<string[]>(['1']);
    const preOpenKeys = ref<string[]>(['1']);
    const menuList = APP.getRef('menus');
    function menuClick(value: any) {
        const arr = value.keyPath.reverse();
        const first = menuList.value.find((e: OperationTabMenu) => e.code === arr[0]);
        if (first) {
            const seconde = first.children.find((e: OperationTabMenu) => e.code === arr[1]);
            seconde && context.emit('chooseMenu', seconde);
        }
    }
    // 一级菜单图标
    function fontIcon(code: string): string {
        let result = 'icon-jinrongfenxi';
        switch (code) {
            case 'market':
                result = 'icon-jinrongfenxi';
                break;
            case 'info':
                result = 'icon-zhangdan';
                break;
            case 'business':
                result = 'icon-renwu';
                break;
            case 'manage':
                result = 'icon-quanxian';
                break;
            case 'search':
                result = 'icon-chazhaojilu';
                break;
            case 'report':
                result = 'icon-bingtu';
                break;
        }
        return '#' + result;
    }
    return { selectedKeys, menuList, openKeys, preOpenKeys, menuClick, fontIcon };
}

export default defineComponent({
    props: {
        collapsed: {
            default: true,
            type: Boolean,
        },
    },
    setup(props, context) {
        const { selectedKeys, openKeys, menuList, menuClick, preOpenKeys, fontIcon } = handleMenu(context);
        watchEffect(() => {
            if (props.collapsed) {
                preOpenKeys.value = openKeys.value;
                openKeys.value = [];
            } else {
                openKeys.value = preOpenKeys.value;
            }
        });
        initData(() => {
            // 处理路由跳转到菜单栏里第一个对应的页面
            const list = unref(menuList);
            if (list.length && list[0].children && list[0].children.length) {
                // 处理修改具体某个菜单栏，主要处理页面刷新
                let firstIndex = 0,
                    secondeIndex = 0;
                for (let i = 0; i < list.length; i++) {
                    for (let j = 0; j < list[i].children.length; j++) {
                        if (window.location.hash.includes(list[i].children[j].code)) {
                            firstIndex = i;
                            secondeIndex = j;
                            break;
                        }
                    }
                }
                const temp = list[firstIndex].children[secondeIndex];
                const code = temp.code;
                selectedKeys.value = [code];
                openKeys.value = [list[firstIndex].code];
                context.emit('chooseMenu', temp);
            }
        });
        return { selectedKeys, openKeys, menuList, menuClick, fontIcon };
    },
});
</script>