tree-exp-view.tsx 3.3 KB
Newer Older
1 2 3 4 5 6 7 8 9 10
import { IModal, ViewMode } from '@ibiz-template/runtime';
import { useRouteKey, useTreeExpViewController } from '@ibiz-template/vue-util';
import {
  defineComponent,
  getCurrentInstance,
  h,
  PropType,
  ref,
  Ref,
  toRef,
11
  VNode,
12 13 14 15 16 17 18 19 20 21
  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> },
22
    noLoadDefault: { type: Boolean, required: false },
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
  },
  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;
58 59
    let treeComponent: VNode | null = null;
    let expBarModel = null;
60

61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
    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'),
          },
        });
      }
78
    }
79 80 81 82 83 84 85 86 87 88 89 90 91
    return (
      <exp-view-base
        controller={this.c}
        expBarModel={expBarModel}
        scopedSlots={{
          default: () => treeComponent,
          expView: () => {
            if (!currentNavKey) {
              return;
            }
            if (!this.c.context.isRouter) {
              // 非路由模式下绘制嵌入视图
              return h('ViewShell', {
92
                attrs: {
93 94 95 96 97
                  context: navViewParams[currentNavKey].context,
                  params: navViewParams[currentNavKey].params,
                  modal: { mode: ViewMode.EMBED },
                  modelPath: navViewParams[currentNavKey].modelPath,
                },
98
                key: currentNavKey,
99 100 101 102 103 104 105 106 107 108 109 110
              });
            }

            // 路由模式下绘制
            if (this.routeViewKey) {
              return <router-view key={this.routeViewKey}></router-view>;
            }
            return null;
          },
        }}
      ></exp-view-base>
    );
111 112
  },
});