import { IModal, ViewMode } from '@ibiz-template/runtime'; import { useRouteKey, useTreeExpViewController } from '@ibiz-template/vue-util'; import { defineComponent, getCurrentInstance, h, PropType, ref, Ref, toRef, VNode, watch, } from 'vue'; export const TreeExpView = defineComponent({ props: { context: Object as PropType<IContext>, srfnav: String, params: { type: Object as PropType<IParams> }, modelPath: { type: String, required: true }, modal: { type: Object as PropType<IModal> }, }, setup(props) { const { proxy } = getCurrentInstance()!; // const route = useRoute(proxy); const c = useTreeExpViewController(proxy, props.modelPath); const routeViewKey: Ref<string> = ref(''); // 绘制界面需要的响应变量 const defaultSelectKeys: Ref<string[]> = ref([]); if (c.context.isRouter) { // created生命周期后处理默认的路由回显 c.nerve.self.evt.on('created', () => { // 路由模式下导航视图的key c.currentNavKey = props.srfnav || ''; // 第一次打开的默认选中树节点 if (c.currentNavKey) { defaultSelectKeys.value.push(c.currentNavKey); } // 监听并变更routeViewKey useRouteKey(toRef(c, 'currentNavKey'), proxy, routeViewKey); }); } const keyHistory = ref<string[]>([]); watch(routeViewKey, (newVal, oldVal) => { if (newVal && newVal !== oldVal && !keyHistory.value.includes(newVal)) { keyHistory.value.push(newVal); } }); return { c, defaultSelectKeys, routeViewKey, keyHistory }; }, render() { const { currentNavKey, navViewParams } = this.c; let treeComponent: VNode | null = null; let expBarModel = null; if (this.c.complete) { const { tree } = this.c.model; expBarModel = this.c.model.treeExpBar; if (this.c.providers[tree.name]) { treeComponent = h(this.c.providers[tree.name].component, { props: { modelData: tree, context: this.c.context, params: this.c.params, defaultSelectKeys: this.defaultSelectKeys, isSelectFirstDefault: true, }, on: { neuronInit: this.c.nerve.onNeuronInit('tree'), }, }); } } return ( <exp-view-base controller={this.c} expBarModel={expBarModel} scopedSlots={{ default: () => treeComponent, expView: () => { if (!currentNavKey) { return; } if (!this.c.context.isRouter) { // 非路由模式下绘制嵌入视图 return h('ViewShell', { attrs: { context: navViewParams[currentNavKey].context, params: navViewParams[currentNavKey].params, modal: { mode: ViewMode.EMBED }, modelPath: navViewParams[currentNavKey].modelPath, }, key: currentNavKey, }); } // 路由模式下绘制 if (this.routeViewKey) { return <router-view key={this.routeViewKey}></router-view>; } return null; }, }} ></exp-view-base> ); }, });