fix: 添加低码路由处理

This commit is contained in:
XieYongHong 2023-09-08 18:58:44 +08:00
parent 99533a38be
commit f1a40db005
4 changed files with 151 additions and 8 deletions

View File

@ -0,0 +1,129 @@
<template>
<j-pro-layout
v-model:collapsed="basicLayout.collapsed"
v-model:openKeys="basicLayout.openKeys"
:breadcrumb="{ routes: breadcrumbs }"
:headerHeight='layout.headerHeight'
:pure="basicLayout.pure"
:selectedKeys="basicLayout.selectedKeys"
v-bind="layoutConf"
@backClick='routerBack'
>
<template #breadcrumbRender="slotProps">
<a
v-if="slotProps.route.index !== 0 && !slotProps.route.isLast"
@click='jump(slotProps.route)'
>
{{ slotProps.route.breadcrumbName }}
</a>
<span v-else style='cursor: default' >{{ slotProps.route.breadcrumbName }}</span>
</template>
<template #rightContentRender>
<div class="right-content">
<AIcon type="QuestionCircleOutlined" @click="toDoc" />
<Notice style="margin: 0 24px" />
<UserInfo />
</div>
</template>
<Iframe />
</j-pro-layout>
</template>
<script lang="ts" name="SinglePage" setup>
import UserInfo from './components/UserInfo.vue';
import Notice from './components/Notice.vue';
import DefaultSetting from '../../../config/config';
import { useMenuStore } from '@/store/menu';
import { clearMenuItem } from 'jetlinks-ui-components/es/ProLayout/util';
import { AccountMenu } from '@/router/menu'
import { useSystem } from '@/store/system';
import { storeToRefs } from 'pinia';
import Iframe from '@/views/iframe/index.vue'
type StateType = {
collapsed: boolean;
openKeys: string[];
selectedKeys: string[];
pure: boolean;
};
const router = useRouter();
const route = useRoute();
const menu = useMenuStore();
const system = useSystem();
const {configInfo,layout, basicLayout} = storeToRefs(system);
const layoutConf = reactive({
theme: DefaultSetting.layout.theme,
siderWidth: layout.value.siderWidth,
logo: DefaultSetting.layout.logo,
title: DefaultSetting.layout.title,
menuData: menu.siderMenus,
// menuData: menu.siderMenus,
splitMenus: true,
});
watchEffect(() => {
layoutConf.theme = configInfo.value.front?.headerTheme || DefaultSetting.layout.theme;
layoutConf.title = configInfo.value.front?.title || DefaultSetting.layout.title;
layoutConf.logo = configInfo.value.front?.logo || DefaultSetting.layout.logo;
})
const components = computed(() => {
const componentName = route.matched[route.matched.length - 1]?.components?.default?.name
if (componentName !== 'BasicLayoutPage') {
return route.matched[route.matched.length - 1]?.components?.default
}
return undefined
})
/**
* 面包屑
*/
const breadcrumbs = computed(() =>
{
const paths = router.currentRoute.value.matched
return paths.map((item, index) => {
return {
index,
isLast: index === (paths.length -1),
path: item.path,
breadcrumbName: (item.meta as any).title || '',
}
})
}
);
const routerBack = () => {
router.go(-1)
}
const jump = (item: any) => {
router.push(item.path)
}
watchEffect(() => {
if (router.currentRoute) {
const paths = router.currentRoute.value.matched
basicLayout.value.selectedKeys = paths.map(item => item.path)
basicLayout.value.openKeys = paths.map(item => item.path)
console.log(paths) //
}
})
const toDoc = () => window.open('http://doc.v2.jetlinks.cn/');
</script>
<style scoped>
.right-content {
margin-right: 24px;
display: flex;
align-items: center;
}
</style>

View File

@ -1,3 +1,4 @@
export { default as BasicLayoutPage } from './BasicLayoutPage.vue'
export { default as BlankLayoutPage } from './BlankLayoutPage.vue'
export { default as FullPage } from './FullPage.vue'
export { default as SinglePage } from './SinglePage.vue'

View File

@ -1,6 +1,7 @@
import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
import { BlankLayoutPage, BasicLayoutPage, SinglePage } from 'components/Layout'
import { isNoCommunity } from '@/utils/utils'
import Iframe from '../views/iframe/index.vue'
import { h } from 'vue'
const pagesComponent = import.meta.glob('../views/**/*.vue');
@ -343,10 +344,12 @@ import { shallowRef } from 'vue'
type Buttons = Array<{ id: string }>
const hasAppID = (item: { appId?: string, url?: string }): { isApp: boolean, appUrl: string } => {
const hasAppID = (item: any): { isApp: boolean, appUrl: string } => {
const isApp = !!item.appId
const isLowCode = !!item.options?.LowCode
return {
isApp: !!item.appId,
appUrl: `/${item.appId}${item.url}`
isApp: isApp || isLowCode,
appUrl: isApp ? `/${item.appId}${item.url}` : item.url
}
}
@ -453,6 +456,10 @@ export const handleMenus = (menuData: any[], components: any, level: number = 1)
route.children = route.children ? [...route.children, ...extraRoute] : extraRoute
}
if (item.options?.LowCode && level === 1) {
route.component = () => SinglePage
}
if (detail_components.length) {
route.children = route.children ? route.children.concat(detail_components) : detail_components
}

View File

@ -10,7 +10,7 @@
<script setup lang="ts">
import { TOKEN_KEY } from '@/utils/variable';
import { LocalStore } from '@/utils/comm';
import { LocalStore, getToken } from '@/utils/comm';
import { getAppInfo_api } from '@/api/system/apply';
const iframeUrl = ref<string>('');
@ -43,9 +43,15 @@ watchEffect(() => {
const matchedItem: any = route.matched?.[0]
if (matchedItem?.meta?.isApp) {
const params = route.path.split('/')?.[1];
console.log(route.path)
if (params === 'preview') {
console.log(route.path)
iframeUrl.value = 'http://192.168.33.46:9900' + '/#' + route.path + '?&token=' + getToken()
} else {
const url = route.path.split('/').slice(2).join('/');
handle(params, url);
}
}
});
</script>