feat: 分页导航支持drtab模式

app_Web/src/components/views/tab-exp-view/tab-exp-view.tsx

@@ -15,6 +15,7 @@ import {
   ref,
 } from 'vue';
 import './tab-exp-view.scss';
+import { DRTabModel, TabExpPanelModel } from '@ibiz-template/model';
 
 export const TabExpView = defineComponent({
   props: {
@@ -46,12 +47,13 @@ export const TabExpView = defineComponent({
       tabExpPagesHistory[activeTab.value] = fullPath;
 
       // 找到对应分页模型并初始化分页视图模型
-      const page = c.model.tabExpPanel.tabExpPages.find(
-        item => item.name === name,
-      );
+      const embedView = c.getEmbedViewByName(name);
+      if (!embedView) {
+        return;
+      }
       // 分页面板视图延迟初始化
-      if (page?.embedView.initialized === false) {
-        await page.embedView.init();
+      if (embedView.initialized === false) {
+        await embedView.init();
       }
 
       if (c.context.isRouter) {
@@ -65,7 +67,7 @@ export const TabExpView = defineComponent({
           const tempContext = Object.assign(c.context.clone(), {
             toRouteLevel: c.modal.level! + 1,
           });
-          ibiz.openView.root(page!.embedView.source, tempContext, c.params);
+          ibiz.openView.root(embedView.source, tempContext, c.params);
         }
         setTimeout(() => {
           deactivateAll.value = false;
@@ -80,13 +82,13 @@ export const TabExpView = defineComponent({
     // 处理默认展示分页，预置是第一个分页
     c.nerve.self.evt.on('created', () => {
       const route = useRoute(proxy);
-      const { tabExpPages } = c.model.tabExpPanel;
+      const { pages } = c.model;
       // 路由呈现下，处理默认打开的标签页
       if (c.context.isRouter) {
         const tabLevel = props.modal!.level! + 1;
         const tabViewName = route.params[`view${tabLevel}`];
         if (tabViewName) {
-          const page = tabExpPages.find(item => {
+          const page = pages.find(item => {
             return getViewName(item.embedView.source) === tabViewName;
           });
           if (page) {
@@ -96,8 +98,8 @@ export const TabExpView = defineComponent({
       }
 
       // 路由没有打开的分页时，默认打开第一个分页
-      if (tabExpPages.length && !activeTab.value) {
-        const defaultTab = tabExpPages[0].name;
+      if (pages.length && !activeTab.value) {
+        const defaultTab = pages[0].name;
         onTabClick(defaultTab);
       }
     });
@@ -108,6 +110,74 @@ export const TabExpView = defineComponent({
 
     const embedViewModal = { mode: ViewMode.EMBED };
 
+    const renderTabExpPage = () => {
+      if (c.model.tabExpPanel.controlType === 'TABEXPPANEL') {
+        const { tabExpPages = [] } = c.model.tabExpPanel as TabExpPanelModel;
+        return tabExpPages.map(page => {
+          const tabExpPage = c.tabExpPages[page.name];
+          if (!tabExpPage) {
+            return;
+          }
+          return (
+            <i-tab-pane
+              class={ns.e('tab-item')}
+              tab={c.model.codeName}
+              label={page.source.caption}
+              name={page.name}
+            >
+              {lazyList.value.includes(page.name) &&
+                h('ViewShell', {
+                  attrs: {
+                    context: c.context,
+                    params: c.params,
+                    modal: embedViewModal,
+                    modelPath: page.embedView.source.modelPath,
+                  },
+                  on: {
+                    neuronInit: c.nerve.onNeuronInit(page.name),
+                  },
+                  key: tabExpPage.key,
+                })}
+            </i-tab-pane>
+          );
+        });
+      }
+    };
+
+    const renderDrTab = () => {
+      if (c.model.tabExpPanel.controlType === 'DRTAB') {
+        const { pages = [] } = c.model.tabExpPanel as DRTabModel;
+        return pages.map(page => {
+          const tabExpPage = c.tabExpPages[page.name];
+          if (!tabExpPage) {
+            return;
+          }
+          return (
+            <i-tab-pane
+              class={ns.e('tab-item')}
+              tab={c.model.codeName}
+              label={page.source.caption}
+              name={page.name}
+            >
+              {lazyList.value.includes(page.name) &&
+                h('ViewShell', {
+                  attrs: {
+                    context: c.context,
+                    params: c.params,
+                    modal: embedViewModal,
+                    modelPath: page.embedView.source.modelPath,
+                  },
+                  on: {
+                    neuronInit: c.nerve.onNeuronInit(page.name),
+                  },
+                  key: tabExpPage.key,
+                })}
+            </i-tab-pane>
+          );
+        });
+      }
+    };
+
     return {
       c,
       ns,
@@ -117,6 +187,8 @@ export const TabExpView = defineComponent({
       activeTab,
       keyHistory,
       embedViewModal,
+      renderDrTab,
+      renderTabExpPage,
     };
   },
   render() {
@@ -133,34 +205,8 @@ export const TabExpView = defineComponent({
             model-value={this.activeTab}
             on-on-click={this.onTabClick}
           >
-            {this.c.model.tabExpPanel.tabExpPages.map(page => {
-              const tabExpPage = this.c.tabExpPages[page.name];
-              if (!tabExpPage) {
-                return;
-              }
-              return (
-                <i-tab-pane
-                  class={this.ns.e('tab-item')}
-                  tab={this.c.model.codeName}
-                  label={page.source.caption}
-                  name={page.name}
-                >
-                  {this.lazyList.includes(page.name) &&
-                    h('ViewShell', {
-                      attrs: {
-                        context: this.c.context,
-                        params: this.c.params,
-                        modal: this.embedViewModal,
-                        modelPath: page.embedView.source.modelPath,
-                      },
-                      on: {
-                        neuronInit: this.c.nerve.onNeuronInit(page.name),
-                      },
-                      key: tabExpPage.key,
-                    })}
-                </i-tab-pane>
-              );
-            })}
+            {this.renderDrTab()}
+            {this.renderTabExpPage()}
           </i-tabs>,
           isRouter && this.activeTab && (
             <div class={this.ns.e('route-content')}>