130 lines
3.4 KiB
Vue
130 lines
3.4 KiB
Vue
<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 :key="route.path" noMargin />
|
|
</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>
|