初始化版本，引入智慧食堂模块，第三方模块
This commit is contained in:
zjf committed
commit
d22f88efd3
677 files changed
+69341
No files matched your search
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="layout-padding layout-padding-unset layout-iframe">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<div class="w100" v-for="v in setIframeList" :key="v.path" v-loading="v.meta.loading" element-loading-background="white">
|
||||
<transition-group :name="name">
|
||||
<iframe
|
||||
:src="v.meta.isLink"
|
||||
:key="v.path"
|
||||
frameborder="0"
|
||||
height="100%"
|
||||
width="100%"
|
||||
style="position: absolute"
|
||||
:data-url="v.path"
|
||||
v-show="getRoutePath === v.path"
|
||||
ref="iframeRef"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="layoutIframeView">
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
// 刷新 iframe
|
||||
refreshKey: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
// 过渡动画 name
|
||||
name: {
|
||||
type: String,
|
||||
default: () => 'slide-right',
|
||||
},
|
||||
// iframe 列表
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
// 定义变量内容
|
||||
const iframeRef = ref();
|
||||
const route = useRoute();
|
||||
|
||||
// 处理 list 列表，当打开时，才进行加载
|
||||
const setIframeList = computed(() => {
|
||||
return (<RouteItems>props.list).filter((v: RouteItem) => v.meta?.isIframeOpen);
|
||||
});
|
||||
// 获取 iframe 当前路由 path
|
||||
const getRoutePath = computed(() => {
|
||||
return route.path;
|
||||
});
|
||||
// 关闭 iframe loading
|
||||
const closeIframeLoading = (val: string, item: RouteItem) => {
|
||||
nextTick(() => {
|
||||
if (!iframeRef.value) return false;
|
||||
iframeRef.value.forEach((v: HTMLElement) => {
|
||||
if (v.dataset.url === val) {
|
||||
v.onload = () => {
|
||||
if (item.meta?.isIframeOpen && item.meta.loading) item.meta.loading = false;
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
// 监听路由变化，初始化 iframe 数据，防止多个 iframe 时，切换不生效
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
(val) => {
|
||||
const item: any = props.list.find((v: any) => v.path === val);
|
||||
if (!item) return false;
|
||||
if (!item.meta.isIframeOpen) item.meta.isIframeOpen = true;
|
||||
closeIframeLoading(val, item);
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
// 监听 iframe refreshKey 变化，用于 tagsview 右键菜单刷新
|
||||
watch(
|
||||
() => props.refreshKey,
|
||||
() => {
|
||||
const item: any = props.list.find((v: any) => v.path === route.path);
|
||||
if (!item) return false;
|
||||
if (item.meta.isIframeOpen) item.meta.isIframeOpen = false;
|
||||
setTimeout(() => {
|
||||
item.meta.isIframeOpen = true;
|
||||
item.meta.loading = true;
|
||||
closeIframeLoading(route.fullPath, item);
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="layout-padding layout-link-container">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<div class="layout-link-warp">
|
||||
<i class="layout-link-icon iconfont icon-xingqiu"></i>
|
||||
<div class="layout-link-msg">页面 "{{ $t(state.title) }}" 已在新窗口中打开</div>
|
||||
<el-button class="mt30" round @click="onGotoFullPage">
|
||||
<i class="iconfont icon-lianjie"></i>
|
||||
<span>立即前往体验</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="layoutLinkView">
|
||||
import { verifyUrl } from '/@/utils/toolsValidate';
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute();
|
||||
const state = reactive<LinkViewState>({
|
||||
title: '',
|
||||
isLink: '',
|
||||
});
|
||||
|
||||
// 立即前往
|
||||
const onGotoFullPage = () => {
|
||||
if (verifyUrl(<string>state.isLink)) window.open(state.isLink);
|
||||
else window.open(`${state.isLink}`);
|
||||
};
|
||||
// 监听路由的变化，设置内容
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
state.title = <string>route.name;
|
||||
state.isLink = <string>route.meta.isLink;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-link-container {
|
||||
.layout-link-warp {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i.layout-link-icon {
|
||||
position: relative;
|
||||
font-size: 100px;
|
||||
color: var(--el-color-primary);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 0;
|
||||
width: 15px;
|
||||
height: 100px;
|
||||
background: linear-gradient(
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(235, 255, 255, 0.5),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.01)
|
||||
);
|
||||
transform: rotate(-15deg);
|
||||
animation: toRight 5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-link-msg {
|
||||
font-size: 12px;
|
||||
color: var(--next-bg-topBarColor);
|
||||
opacity: 0.7;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="layout-parent">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition :name="setTransitionName" mode="out-in">
|
||||
<keep-alive>
|
||||
<component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" v-if="route.meta.isKeepAlive" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<transition :name="setTransitionName" mode="out-in">
|
||||
<component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" v-if="!route.meta.isKeepAlive" />
|
||||
</transition>
|
||||
</router-view>
|
||||
<transition :name="setTransitionName" mode="out-in">
|
||||
<Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName" :list="state.iframeList" />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="layoutParentView">
|
||||
import { useKeepALiveNames } from '/@/stores/keepAliveNames';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { Session } from '/@/utils/storage';
|
||||
import mittBus from '/@/utils/mitt';
|
||||
|
||||
// 引入组件
|
||||
const Iframes = defineAsyncComponent(() => import('/@/layout/routerView/iframes.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const storesKeepAliveNames = useKeepALiveNames();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { keepAliveNames, cachedViews } = storeToRefs(storesKeepAliveNames);
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive<ParentViewState>({
|
||||
refreshRouterViewKey: '', // 非 iframe tagsview 右键菜单刷新时
|
||||
iframeRefreshKey: '', // iframe tagsview 右键菜单刷新时
|
||||
keepAliveNameList: [],
|
||||
iframeList: [],
|
||||
});
|
||||
|
||||
// 设置主界面切换动画
|
||||
const setTransitionName = computed(() => {
|
||||
return themeConfig.value.animation;
|
||||
});
|
||||
|
||||
// 设置 iframe 显示/隐藏
|
||||
const isIframePage = computed(() => {
|
||||
return route.meta.isIframe;
|
||||
});
|
||||
// 获取 iframe 组件列表(未进行渲染)
|
||||
const getIframeListRoutes = async () => {
|
||||
router.getRoutes().forEach((v) => {
|
||||
if (v.meta.isIframe) {
|
||||
v.meta.isIframeOpen = false;
|
||||
v.meta.loading = true;
|
||||
state.iframeList.push({ ...v });
|
||||
}
|
||||
});
|
||||
};
|
||||
// 页面加载前，处理缓存，页面刷新时路由缓存处理
|
||||
onBeforeMount(() => {
|
||||
state.keepAliveNameList = keepAliveNames.value;
|
||||
mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
|
||||
state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
|
||||
state.refreshRouterViewKey = '';
|
||||
state.iframeRefreshKey = '';
|
||||
nextTick(() => {
|
||||
state.refreshRouterViewKey = fullPath;
|
||||
state.iframeRefreshKey = fullPath;
|
||||
state.keepAliveNameList = keepAliveNames.value;
|
||||
});
|
||||
});
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getIframeListRoutes();
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if (themeConfig.value.isCacheTagsView) {
|
||||
let tagsViewArr: RouteItem[] = Session.get('tagsViewList') || [];
|
||||
cachedViews.value = tagsViewArr.filter((item) => item.meta?.isKeepAlive).map((item) => item.name as string);
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
mittBus.off('onTagsViewRefreshRouterView', () => {});
|
||||
});
|
||||
// 监听路由变化，防止 tagsView 多标签时，切换动画消失
|
||||
// https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/38/files
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
state.refreshRouterViewKey = decodeURI(route.fullPath);
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
Reference in new issue
Block a user