fix: 添加低码路由处理
This commit is contained in:
parent
99533a38be
commit
f1a40db005
|
@ -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>
|
|
@ -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 FullPage } from './FullPage.vue'
|
||||
export { default as SinglePage } from './SinglePage.vue'
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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,8 +43,14 @@ watchEffect(() => {
|
|||
const matchedItem: any = route.matched?.[0]
|
||||
if (matchedItem?.meta?.isApp) {
|
||||
const params = route.path.split('/')?.[1];
|
||||
const url = route.path.split('/').slice(2).join('/');
|
||||
handle(params, url);
|
||||
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>
|
||||
|
|
Loading…
Reference in New Issue