tab-exp-view.tsx

import { IModal, ViewMode } from '@ibiz-template/runtime';
import {
  getViewName,
  useNamespace,
  useRoute,
  useRouter,
  useTabExpViewController,
} from '@ibiz-template/vue-util';
import {
  computed,
  defineComponent,
  getCurrentInstance,
  PropType,
  h,
  ref,
} from 'vue';
import './tab-exp-view.scss';

export const TabExpView = defineComponent({
  props: {
    context: Object as PropType<IContext>,
    params: { type: Object as PropType<IParams> },
    modelPath: { type: String, required: true },
    modal: { type: Object as PropType<IModal> },
    noLoadDefault: { type: Boolean, required: false },
  },
  setup(props) {
    const { proxy } = getCurrentInstance()!;
    const ns = useNamespace('view-detabexpview');
    const c = useTabExpViewController(proxy, props.modelPath);
    const lazyList = ref<string[]>([]);
    const activeTab = ref('');
    // 使分页都不激活
    const deactivateAll = ref(false);
    const router = useRouter(proxy);

    const tabExpPagesHistory: {
      [page: string]: string;
    } = {};

    // 点击回调
    const onTabClick = async (name: string) => {
      const route = useRoute(proxy);
      // 标签切换前缓存当前路径
      const fullPath = route.fullPath;
      tabExpPagesHistory[activeTab.value] = fullPath;

      // 找到对应分页模型并初始化分页视图模型
      const page = c.model.tabExpPanel.tabExpPages.find(
        item => item.name === name,
      );
      // 分页面板视图延迟初始化
      if (page?.embedView.initialized === false) {
        await page.embedView.init();
      }

      if (c.context.isRouter) {
        // 先让已有的分页变为不活跃
        deactivateAll.value = true;
        // 路由模式下变更路由
        if (tabExpPagesHistory[name]) {
          // 如果缓存过了路径直接跳路径
          router.push(tabExpPagesHistory[name]);
        } else {
          const tempContext = Object.assign(c.context.clone(), {
            toRouteLevel: c.modal.level! + 1,
          });
          ibiz.openView.root(page!.embedView.source, tempContext, c.params);
        }
        setTimeout(() => {
          deactivateAll.value = false;
          activeTab.value = name;
        }, 0);
      } else if (!lazyList.value.includes(name)) {
        lazyList.value.push(name);
        activeTab.value = name;
      }
    };

    // 处理默认展示分页，预置是第一个分页
    c.nerve.self.evt.on('created', () => {
      const route = useRoute(proxy);
      const { tabExpPages } = c.model.tabExpPanel;
      // 路由呈现下，处理默认打开的标签页
      if (c.context.isRouter) {
        const tabLevel = props.modal!.level! + 1;
        const tabViewName = route.params[`view${tabLevel}`];
        if (tabViewName) {
          const page = tabExpPages.find(item => {
            return getViewName(item.embedView.source) === tabViewName;
          });
          if (page) {
            activeTab.value = page.name;
          }
        }
      }

      // 路由没有打开的分页时，默认打开第一个分页
      if (tabExpPages.length && !activeTab.value) {
        const defaultTab = tabExpPages[0].name;
        onTabClick(defaultTab);
      }
    });

    const keyHistory = computed(() => {
      return Object.values(c.tabExpPages).map(item => item.key);
    });

    const embedViewModal = { mode: ViewMode.EMBED };

    return {
      c,
      ns,
      onTabClick,
      lazyList,
      deactivateAll,
      activeTab,
      keyHistory,
      embedViewModal,
    };
  },
  render() {
    const isRouter = this.c.context.isRouter === true;
    return (
      <view-base
        class={[this.ns.b(), isRouter ? this.ns.m('route') : '']}
        controller={this.c}
      >
        {this.c.complete && [
          <i-tabs
            class={this.ns.e('tab')}
            name={this.c.model.codeName}
            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>
              );
            })}
          </i-tabs>,
          isRouter && this.activeTab && (
            <div class={this.ns.e('route-content')}>
              <router-view
                // manualKey={this.c.tabExpPages[this.activeTab].key}
                key={this.c.tabExpPages[this.activeTab].key}
                on-neuron-init={this.c.nerve.onNeuronInit(this.activeTab)}
              >
                {({ Component }: { Component: string }) => {
                  return (
                    Component && (
                      <appKeepAlive keyList={this.keyHistory}>
                        <Component />
                      </appKeepAlive>
                    )
                  );
                }}
              </router-view>
            </div>
          ),
        ]}
      </view-base>
    );
  },
});