<script setup lang="ts"> import { ViewNeuron } from '@ibiz-template/controller'; import { useIndexViewController } from '@ibiz-template/vue-util'; import { computed, ComputedRef, getCurrentInstance, onMounted, Ref, ref, } from 'vue'; import { createUUID } from 'qx-util'; import { useIndexRouteManage } from './index-view-default'; import { useIndexExpRouteManage } from './index-view-exp'; interface IndexViewProps { context: IContext; params?: IParams; modelPath: string; } const props = withDefaults(defineProps<IndexViewProps>(), { params: () => ({}), }); const { proxy } = getCurrentInstance()!; const c = useIndexViewController(proxy, props.modelPath); const isShowTabPageExp = ibiz.config.isShowTabPageExp; // to define let onCreated: ((_neuron: ViewNeuron) => void) | null = null; let onViewFound: ((_opts: IData) => void) | null = null; let onMenuRouteChange: () => void = () => {}; let deleteRouteCache: ((_keys: string[]) => void) | null = null; let handleTabClick: ((_index: number) => void) | null = null; let handleTabDelete: ((_name: number) => void) | null = null; let handleCloseAll: (() => void) | null = null; let handleCloseOther: (() => void) | null = null; let currentPath: ComputedRef<string> | undefined; let currentKey: Ref<string>; let keyHistory: Ref<string[]>; let routeMsgs: Ref< { key: string; fullPath: string; modelPath?: string | undefined; caption?: string | undefined; }[] >; const appKeepAliveKey = ref(createUUID()); if (isShowTabPageExp) { const { currentKey: _currentKey, keyHistory: _keyHistory, routeMsgs: _routeMsgs, updateRouteMsg, closeView, deleteRouteCache: _deleteRouteCache, handleTabClick: _handleTabClick, handleTabDelete: _handleTabDelete, handleCloseAll: _handleCloseAll, handleCloseOther: _handleCloseOther, } = useIndexExpRouteManage(proxy, c); currentKey = _currentKey; keyHistory = _keyHistory; routeMsgs = _routeMsgs; deleteRouteCache = _deleteRouteCache; handleTabClick = _handleTabClick; handleTabDelete = _handleTabDelete; handleCloseAll = _handleCloseAll; handleCloseOther = _handleCloseOther; // 视图初始化,监听事件 onCreated = (neuron: ViewNeuron) => { const key = currentKey.value; neuron.evt.on('closeView', () => { closeView(key); }); neuron.evt.on('setTitle', (title: string) => { updateRouteMsg(key, { caption: title }); }); }; onViewFound = (opts: IData) => { updateRouteMsg(currentKey.value, opts); }; // 后退按钮触发事件,删除上一个路由的缓存 window.onpopstate = () => { deleteRouteCache!([keyHistory.value[1]]); }; currentPath = computed(() => { const routeMsg = routeMsgs.value.find( (item: { key: string }) => item.key === currentKey.value, ); return routeMsg?.modelPath || ''; }); } else { const { currentKey: _currentKey, keyHistory: _keyHistory, routeMsgs: _routeMsgs, updateRouteMsg, closeView, deleteRouteCache: _deleteRouteCache, } = useIndexRouteManage(proxy, c); currentKey = _currentKey; keyHistory = _keyHistory; routeMsgs = _routeMsgs; deleteRouteCache = _deleteRouteCache; // 视图初始化,监听事件 onCreated = (neuron: ViewNeuron) => { const key = currentKey.value; neuron.evt.on('closeView', () => { closeView(key); }); neuron.evt.on('setTitle', (title: string) => { updateRouteMsg(key, { caption: title }); }); }; onViewFound = (opts: IData) => { updateRouteMsg(currentKey.value, opts); }; onMenuRouteChange = () => { deleteRouteCache!(keyHistory.value.slice(1)); appKeepAliveKey.value = createUUID(); }; // 后退按钮触发事件,删除上一个路由的缓存 window.onpopstate = () => { deleteRouteCache!([keyHistory.value[1]]); }; currentPath = computed(() => { const routeMsg = routeMsgs.value.find( (item: { key: string }) => item.key === currentKey.value, ); return routeMsg?.modelPath || ''; }); } onMounted(() => { setTimeout(() => { const el = document.querySelector('.app-loading-x') as HTMLDivElement; if (el) { el.style.display = 'none'; } }, 300); }); // 菜单收缩变化 const collapseChange = (collapse: boolean) => { c.collapseChange = collapse; }; </script> <template> <AppLayout :is-complete="c.complete" :model="c.model" :class="c.model?.source?.mainMenuAlign?.toLowerCase()" :is-show-tab-page-exp="isShowTabPageExp" @onCollapseChange="collapseChange" > <template v-if="c.complete"> <app-menu v-if="c.complete" slot="menu" :current-path="currentPath" :model-data="c.model.appMenu" :context="c.context" :collapse-change="c.collapseChange" :menu-model="c.model?.source" @menuRouteChange="onMenuRouteChange" ></app-menu> <tab-page-exp v-if="isShowTabPageExp" slot="tabPageExp" :route-msgs="routeMsgs" :current-key="currentKey" @tab-click="handleTabClick" @tab-delete="handleTabDelete" @close-all="handleCloseAll" @close-other="handleCloseOther" ></tab-page-exp> <AppKeepAlive v-if="!isShowTabPageExp" :key="appKeepAliveKey" :key-list="keyHistory" > <router-view :key="currentKey" @neuronInit="onCreated" @viewFound="onViewFound" /> </AppKeepAlive> <AppKeepAlive v-else :key-list="keyHistory"> <router-view :key="currentKey" @neuronInit="onCreated" @viewFound="onViewFound" /> </AppKeepAlive> </template> </AppLayout> </template>