xj-admin/src/components/Menu/src/BasicMenu.vue

<template>
    <Menu
        style="height: 100%"
        :selectedKeys="selectedKeys"
        :defaultSelectedKeys="defaultSelectedKeys"
        :mode="mode"
        :openKeys="getOpenKeys"
        :inlineIndent="inlineIndent"
        :theme="theme"
        @openChange="handleOpenChange"
        :class="getMenuClass"
        @click="handleMenuClick"
        :subMenuOpenDelay="0.2"
        v-bind="getInlineCollapseOptions"
    >
        <template
            v-for="item in items.concat(
                hasPermission('health:health-bank') ? [{ name: '健康银行', icon: 'ant-design:bank-outlined', title: '健康银行' }] : []
            )"
            :key="item.path"
        >
            <BasicSubMenuItem :item="item" :theme="theme" :isHorizontal="isHorizontal" />
        </template>
    </Menu>
</template>
<script lang="ts">
    import type { MenuState } from './types';
    import { computed, defineComponent, reactive, ref, toRefs, unref, watch } from 'vue';
    import { Menu } from 'ant-design-vue';
    import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
    import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
    import { useOpenKeys } from './useOpenKeys';
    import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
    import { isFunction } from '/@/utils/is';
    import { basicProps } from './props';
    import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
    import { REDIRECT_NAME } from '/@/router/constant';
    import { useDesign } from '/@/hooks/web/useDesign';
    import { getCurrentParentPath } from '/@/router/menus';
    import { listenerRouteChange } from '/@/logics/mitt/routeChange';
    import { getAllParentPath } from '/@/router/helper/menuHelper';
    import { usePermission } from '/@/hooks/web/usePermission';
    import { defHttp } from '/@/utils/http/axios';
    // import { getEnvInfo } from '/@/utils/getEnv';
    import { getToken } from '/@/utils/auth';
    import { useLoading } from '/@/components/Loading';
    import { useGlobSetting } from '/@/hooks/setting';
    const { viteOutUrl, apiUrl } = useGlobSetting();

    export default defineComponent({
        name: 'BasicMenu',
        components: {
            Menu,
            BasicSubMenuItem,
        },
        props: basicProps,
        emits: ['menuClick'],
        setup(props, { emit }) {
            const isClickGo = ref(false);
            const currentActiveMenu = ref('');
            const { hasPermission } = usePermission();
            const [open, close] = useLoading({
                target: '', // 遮罩挂载的目标元素，默认body
            });

            const menuState = reactive<MenuState>({
                defaultSelectedKeys: [],
                openKeys: [],
                selectedKeys: [],
                collapsedOpenKeys: [],
            });

            const { prefixCls } = useDesign('basic-menu');
            const { items, mode, accordion } = toRefs(props);

            const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();

            const { currentRoute } = useRouter();

            const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, mode as any, accordion);

            const getIsTopMenu = computed(() => {
                const { type, mode } = props;

                return (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) || (props.isHorizontal && unref(getSplit));
            });

            const getMenuClass = computed(() => {
                const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
                return [
                    prefixCls,
                    `justify-${align}`,
                    {
                        [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
                        [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
                    },
                ];
            });

            const getInlineCollapseOptions = computed(() => {
                const isInline = props.mode === MenuModeEnum.INLINE;

                const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
                if (isInline) {
                    inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
                }
                return inlineCollapseOptions;
            });

            listenerRouteChange((route) => {
                if (route.name === REDIRECT_NAME) return;
                handleMenuChange(route);
                currentActiveMenu.value = route.meta?.currentActiveMenu as string;

                if (unref(currentActiveMenu)) {
                    menuState.selectedKeys = [unref(currentActiveMenu)];
                    setOpenKeys(unref(currentActiveMenu));
                }
            });

            !props.mixSider &&
                watch(
                    () => props.items,
                    () => {
                        handleMenuChange();
                    }
                );

            //update-begin-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称
            async function handleMenuClick({ item, key }: { item: any; key: string; keyPath: string[] }) {
                if (item.title === '健康银行') {
                    open();
                    await defHttp
                        .get({
                            url: '/health-system/api/sys/encryptInfo',
                            params: {
                                str: {
                                    scheme: apiUrl.split('://')[0],
                                    host:
                                        apiUrl.split('://')[1].indexOf(':') !== -1
                                            ? apiUrl.split('://')[1].substring(0, apiUrl.split('://')[1].indexOf(':'))
                                            : apiUrl.split('://')[1],
                                    tokenF: getToken(),
                                },
                            },
                        })
                        .then((res) => {
                            console.log(res);
                            window.open(`${viteOutUrl}${res.encryptData}`, '_blank');
                            close();
                        })
                        .catch(() => {
                            close();
                        });
                    return;
                }
                const { beforeClickFn } = props;
                if (beforeClickFn && isFunction(beforeClickFn)) {
                    const flag = await beforeClickFn(key);
                    if (!flag) return;
                }
                emit('menuClick', key, item);
                //update-end-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称

                isClickGo.value = true;
                // const parentPath = await getCurrentParentPath(key);

                // menuState.openKeys = [parentPath];
                menuState.selectedKeys = [key];
            }

            async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
                if (unref(isClickGo)) {
                    isClickGo.value = false;
                    return;
                }
                const path = (route || unref(currentRoute)).meta?.currentActiveMenu || (route || unref(currentRoute)).path;
                setOpenKeys(path);
                if (unref(currentActiveMenu)) return;
                if (props.isHorizontal && unref(getSplit)) {
                    const parentPath = await getCurrentParentPath(path);
                    menuState.selectedKeys = [parentPath];
                } else {
                    const parentPaths = await getAllParentPath(props.items, path);
                    menuState.selectedKeys = parentPaths;
                }
            }

            return {
                handleMenuClick,
                getInlineCollapseOptions,
                getMenuClass,
                handleOpenChange,
                getOpenKeys,
                ...toRefs(menuState),
                hasPermission,
            };
        },
    });
</script>
<style lang="less">
    @import './index.less';
</style>