diff --git a/src/panel-component/nav-pos/nav-pos.controller.ts b/src/panel-component/nav-pos/nav-pos.controller.ts index d2863a2f4c52e161011414cb6146e6b4904632cd..15a06ac1c54d71b35ba9babb8305c5cf17ee6b1d 100644 --- a/src/panel-component/nav-pos/nav-pos.controller.ts +++ b/src/panel-component/nav-pos/nav-pos.controller.ts @@ -1,5 +1,7 @@ import { EventBase, IModal, Modal, ViewMode } from '@ibiz-template/runtime'; import { IPanelRawItem } from '@ibiz/model-core'; +import { RouteLocationNormalizedLoaded, Router } from 'vue-router'; +import { route2routePath } from '@ibiz-template/vue3-util'; import { PanelItemController } from '../../control'; import { NavViewMsg } from '../nav-pos-index/nav-pos-index.state'; import { NavPosState } from './nav-pos.state'; @@ -36,6 +38,24 @@ export class NavPosController extends PanelItemController { */ curNavViewMsg!: NavViewMsg; + /** + * Router 对象 + * + * @type {Router} + * @memberof NavPosController + */ + router!: Router; + + /** + * 设置 Router 对象 + * + * @param {Router} router + * @memberof NavPosController + */ + setRouter(router: Router) { + this.router = router; + } + /** * 创建导航占位状态对象 * @@ -63,8 +83,17 @@ export class NavPosController extends PanelItemController { * * @memberof NavPosController */ - onRouteChange() { - this.setNavViewMsg(this.curNavViewMsg); + onRouteChange(route: RouteLocationNormalizedLoaded) { + if (this.curNavViewMsg) { + this.state.currentKey = this.curNavViewMsg.key; + // 判断当前导航占位是否处于激活状态(处于激活状态的导航占位更新路由信息) + const routePath = route2routePath(route); + const curRouteNode = routePath.pathNodes[this.routeDepth!]; + if (curRouteNode) { + this.state.navViewMsgs[this.curNavViewMsg.key].fullPath = + route.fullPath; + } + } } /** @@ -90,42 +119,63 @@ export class NavPosController extends PanelItemController { /** * 打开视图 * - * @param {NavViewMsg} navViewMsg + * @param {NavViewMsg} openViewMsg + * @memberof NavPosController + */ + openView(openViewMsg: NavViewMsg) { + this.curNavViewMsg = openViewMsg; + if (!this.state.navViewMsgs[openViewMsg.key]) { + this.state.navViewMsgs[openViewMsg.key] = openViewMsg; + } + if (this.routeDepth) { + this.openViewByPath(openViewMsg); + } else { + this.openViewByModel(openViewMsg); + } + } + + /** + * 通过路由打开视图 + * + * @param {NavViewMsg} openViewMsg * @memberof NavPosController */ - openView(navViewMsg: NavViewMsg) { - if (this.state.cacheKeys.includes(navViewMsg.key)) { - this.state.currentKey = navViewMsg.key; - } else if (this.routeDepth) { - this.curNavViewMsg = navViewMsg; - this.viewModals[navViewMsg.key] = new Modal({ + openViewByPath(openViewMsg: NavViewMsg) { + if (!this.viewModals[openViewMsg.key]) { + this.viewModals[openViewMsg.key] = new Modal({ mode: this.routeDepth ? ViewMode.ROUTE : ViewMode.EMBED, routeDepth: this.routeDepth ? this.routeDepth + 1 : undefined, dismiss: () => { // 执行对应key的dismiss方法 - this.dismiss(navViewMsg.key); + this.dismiss(openViewMsg.key); }, }); - const tempContext = Object.assign(navViewMsg.context!.clone(), { - toRouteDepth: this.routeDepth + 1, + } + if (this.state.cache && this.state.cacheKeys.includes(openViewMsg.key)) { + this.router.push(this.state.navViewMsgs[openViewMsg.key].fullPath!); + } else { + const tempContext = Object.assign(openViewMsg.context!.clone(), { + toRouteDepth: this.routeDepth! + 1, }); - ibiz.openView.root(navViewMsg.viewModel!, tempContext, navViewMsg.params); - return; + this.state.cacheKeys.push(openViewMsg.key); + ibiz.openView.root( + openViewMsg.viewModel!, + tempContext, + openViewMsg.params, + ); } - this.setNavViewMsg(navViewMsg); } /** - * 设置导航视图信息 + * 通过模型绘制视图 * - * @param {NavViewMsg} navViewMsg + * @param {NavViewMsg} openViewMsg * @memberof NavPosController */ - setNavViewMsg(navViewMsg: NavViewMsg) { - if (!this.state.cacheKeys.includes(navViewMsg.key)) { - this.state.cacheKeys.push(navViewMsg.key); - this.state.navViewMsgs[navViewMsg.key] = navViewMsg; - this.state.currentKey = navViewMsg.key; + openViewByModel(openViewMsg: NavViewMsg) { + if (!this.state.cacheKeys.includes(openViewMsg.key)) { + this.state.cacheKeys.push(openViewMsg.key); } + this.state.currentKey = openViewMsg.key; } } diff --git a/src/panel-component/nav-pos/nav-pos.tsx b/src/panel-component/nav-pos/nav-pos.tsx index 74f48e5f69a5f021bb775a23d85b52e095db05d4..92538056ac1ab54d951a5d217482d9d8c69ef976 100644 --- a/src/panel-component/nav-pos/nav-pos.tsx +++ b/src/panel-component/nav-pos/nav-pos.tsx @@ -3,7 +3,7 @@ import { useNamespace } from '@ibiz-template/vue3-util'; import { IPanelRawItem } from '@ibiz/model-core'; import { NavPosController } from './nav-pos.controller'; import { EventBase } from '@ibiz-template/runtime'; -import { useRoute } from 'vue-router'; +import { useRoute, useRouter } from 'vue-router'; import './nav-pos.scss'; export const NavPos = defineComponent({ @@ -25,16 +25,21 @@ export const NavPos = defineComponent({ c.onViewCreated(event); }; + const router = useRouter(); + const route = useRoute(); + + c.setRouter(router); + if (c.routeDepth) { - const route = useRoute(); watch( - () => route?.path, + () => route.fullPath, () => { - c.onRouteChange(); + c.onRouteChange(route); }, { immediate: true }, ); } + return { ns, c, onViewCreated }; }, render() { @@ -42,7 +47,7 @@ export const NavPos = defineComponent({ const { currentKey, cacheKeys, navViewMsgs, cache } = state; return (
- {this.c.routeDepth ? ( + {this.c.routeDepth && viewModals[currentKey] ? (