list-exp-view.tsx 3.4 KB
Newer Older
1 2 3 4 5 6 7 8 9
import { IModal, ViewMode } from '@ibiz-template/runtime';
import {
  defineComponent,
  PropType,
  h,
  ref,
  Ref,
  toRef,
  getCurrentInstance,
10
  VNode,
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
} from 'vue';
import qs from 'qs';
import {
  useListExpViewController,
  useRoute,
  useRouteKey,
} from '@ibiz-template/vue-util';

export const ListExpView = defineComponent({
  name: 'ListExpView',
  props: {
    context: Object as PropType<IContext>,
    params: { type: Object as PropType<IParams> },
    srfnav: String,
    modelPath: { type: String, required: true },
    modal: { type: Object as PropType<IModal> },
27
    noLoadDefault: { type: Boolean, required: false },
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 c = useListExpViewController(proxy, props.modelPath);
    const routeViewKey: Ref<string> = ref('');
    const defaultSelectKeys: Ref<string[]> = ref([]);

    if (c.context.isRouter === true) {
      const route = useRoute(proxy);

      // 第一次设置key是由自身通知,后续走监听
      c.nerve.self.evt.on('created', () => {
        // 解析首页上下文参数里的主键
        if (route.params.params1) {
          const params1Str = route.params.params1 as string;
          const params1Obj = qs.parse(params1Str, { delimiter: ';' });
          const key = params1Obj[c.model.appEntity.deName] as string;
          if (key) {
            c.navItem.key = key;
            defaultSelectKeys.value = [key];
          }
        }
        // 监听并变更routeViewKey
        useRouteKey(toRef(c.navItem, 'key'), proxy, routeViewKey);
      });
    }

    return { c, defaultSelectKeys, routeViewKey };
  },
  render() {
58 59 60
    const isRouter = this.c.context.isRouter === true;
    let listComponent: VNode | null = null;
    let expBarModel = null;
61 62 63
    if (this.c.complete) {
      const { listExpBar } = this.c.model;
      const { list } = listExpBar;
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
      expBarModel = listExpBar;
      if (this.c.providers[list.name]) {
        listComponent = h(this.c.providers[list.name].component, {
          props: {
            modelData: list,
            context: this.c.context,
            params: this.c.params,
            isExpView: true,
            isSelectFirstDefault: true,
            mdCtrlActiveMode: 1,
            defaultSelectKeys: this.defaultSelectKeys,
          },
          on: {
            neuronInit: this.c.nerve.onNeuronInit(list.name),
          },
        });
      }
    }
    return (
      <exp-view-base
        controller={this.c}
        expBarModel={expBarModel}
        scopedSlots={{
          default: () => listComponent,
          expView: () => {
            if (this.c.complete) {
              const { listExpBar } = this.c.model;
              const { list } = listExpBar;
92 93 94 95 96 97 98 99 100 101 102
              if (!list.navView) {
                return null;
              }
              if (isRouter) {
                if (this.routeViewKey) {
                  return <router-view key={this.routeViewKey}></router-view>;
                }
                return null;
              }
              // 非路由模式下绘制嵌入视图
              return h('ViewShell', {
103
                attrs: {
104 105 106 107 108 109 110
                  context: this.c.navItem.context,
                  params: this.c.navItem.params,
                  modal: { mode: ViewMode.EMBED },
                  modelPath: list.navView.source.modelPath,
                },
                key: this.c.navItem.key,
              });
111 112 113 114 115
            }
          },
        }}
      ></exp-view-base>
    );
116 117
  },
});