update
1.更新跳转外部链接
This commit is contained in:
@@ -13,148 +13,187 @@
|
||||
:subMenuOpenDelay="0.2"
|
||||
v-bind="getInlineCollapseOptions"
|
||||
>
|
||||
<template v-for="item in items" :key="item.path">
|
||||
<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 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';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasicMenu',
|
||||
components: {
|
||||
Menu,
|
||||
BasicSubMenuItem,
|
||||
},
|
||||
props: basicProps,
|
||||
emits: ['menuClick'],
|
||||
setup(props, { emit }) {
|
||||
const isClickGo = ref(false);
|
||||
const currentActiveMenu = ref('');
|
||||
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 menuState = reactive<MenuState>({
|
||||
defaultSelectedKeys: [],
|
||||
openKeys: [],
|
||||
selectedKeys: [],
|
||||
collapsedOpenKeys: [],
|
||||
});
|
||||
|
||||
const { prefixCls } = useDesign('basic-menu');
|
||||
const { items, mode, accordion } = toRefs(props);
|
||||
const { prefixCls } = useDesign('basic-menu');
|
||||
const { items, mode, accordion } = toRefs(props);
|
||||
|
||||
const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
|
||||
const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, mode as any, accordion);
|
||||
const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, mode as any, accordion);
|
||||
|
||||
const getIsTopMenu = computed(() => {
|
||||
const { type, mode } = props;
|
||||
const getIsTopMenu = computed(() => {
|
||||
const { type, mode } = props;
|
||||
|
||||
return (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) || (props.isHorizontal && unref(getSplit));
|
||||
});
|
||||
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 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 getInlineCollapseOptions = computed(() => {
|
||||
const isInline = props.mode === MenuModeEnum.INLINE;
|
||||
|
||||
const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
|
||||
if (isInline) {
|
||||
inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
|
||||
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();
|
||||
const url = getEnvInfo().VITE_GLOB_API_URL;
|
||||
await defHttp
|
||||
.get({
|
||||
url: '/health-system/api/sys/encryptInfo',
|
||||
params: {
|
||||
str: {
|
||||
scheme: url.split('://')[0],
|
||||
host: url.split('://')[1],
|
||||
tokenF: getToken(),
|
||||
},
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
window.open(`${getEnvInfo().VITE_OUT_URL}${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];
|
||||
}
|
||||
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));
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
!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[] }) {
|
||||
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),
|
||||
};
|
||||
},
|
||||
});
|
||||
return {
|
||||
handleMenuClick,
|
||||
getInlineCollapseOptions,
|
||||
getMenuClass,
|
||||
handleOpenChange,
|
||||
getOpenKeys,
|
||||
...toRefs(menuState),
|
||||
hasPermission,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import './index.less';
|
||||
@import './index.less';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user