@ibiz-template/vue3-util 0.6.0 → 0.6.1-dev.1

package/src/common/code-list/code-list.tsx

@@ -1,127 +0,0 @@
-import { CodeListItem } from '@ibiz-template/runtime';
-import { isNil } from 'ramda';
-import { defineComponent, PropType, ref, watch } from 'vue';
-import { IAppCodeList } from '@ibiz/model-core';
-import './code-list.scss';
-import { useNamespace } from '../../use';
-
-export const IBizCodeList = defineComponent({
-  name: 'IBizCodeList',
-  props: {
-    codeListItems: {
-      type: Array<CodeListItem>,
-    },
-    codeList: {
-      type: Object as PropType<IAppCodeList>,
-      required: true,
-    },
-    value: {
-      type: [String, Number],
-    },
-  },
-  emits: {
-    infoTextChange: (_text: string) => true,
-  },
-  setup(props, { emit }) {
-    const ns = useNamespace('code-list');
-    const items = ref<IData[]>([]);
-    const textSeparator = props.codeList?.textSeparator || '、';
-    const valueSeparator = props.codeList?.valueSeparator || ',';
-
-    watch(items, newVal => {
-      let infoText = '';
-      if (newVal.length > 0) {
-        infoText = newVal.map(item => item.text).join(textSeparator);
-      }
-      emit('infoTextChange', infoText);
-    });
-
-    const findCodeListItem = (
-      codelist: CodeListItem[] | undefined,
-      value: string | number,
-    ) => {
-      if (codelist) {
-        // eslint-disable-next-line eqeqeq
-        const findItem = codelist.find(item => item.value == value);
-        if (findItem) {
-          return findItem;
-        }
-        for (let i = 0; i < codelist.length; i++) {
-          const childrenItem = findCodeListItem(
-            codelist[i].children,
-            value,
-          ) as CodeListItem;
-          if (childrenItem) {
-            return childrenItem;
-          }
-        }
-      }
-    };
-
-    watch(
-      () => props.value,
-      (newVal, oldVal) => {
-        if (newVal !== oldVal) {
-          if (isNil(newVal) || newVal === '') {
-            // 空值置空
-            items.value = [];
-          } else {
-            // 非空值解析代码表
-            let values: string[] | number[];
-            if (typeof newVal === 'string') {
-              values = newVal.split(valueSeparator);
-            } else {
-              values = [newVal];
-            }
-            items.value = values.map(val => {
-              const findItem = findCodeListItem(props.codeListItems, val);
-              return {
-                text: findItem?.text || val,
-                color: findItem?.color,
-                textCls: findItem?.textCls,
-                sysImage: findItem?.sysImage,
-              };
-            });
-          }
-        }
-      },
-      { immediate: true },
-    );
-
-    const emptyText =
-      props.codeList.emptyText === '未定义'
-        ? '- - -'
-        : props.codeList.emptyText;
-
-    return { items, ns, emptyText, textSeparator };
-  },
-  render() {
-    return (
-      <span class={this.ns.b()}>
-        {this.items.length === 0
-          ? this.emptyText
-          : this.items.map((item, index) => {
-              return [
-                index !== 0 ? this.textSeparator : null,
-                <span
-                  class={[
-                    this.ns.e('item'),
-                    item.textCls ? item.textCls : null,
-                  ]}
-                  style={
-                    item.color
-                      ? this.ns.cssVarBlock({
-                          'item-color': `${item.color}`,
-                        })
-                      : null
-                  }
-                >
-                  {item.sysImage && <iBizIcon icon={item.sysImage}></iBizIcon>}
-                  {item.text}
-                </span>,
-              ];
-            })}
-      </span>
-    );
-  },
-});

package/src/common/control-base/control-base.scss

@@ -1,4 +0,0 @@
-@include b(control) {
-  width: 100%;
-  height: 100%;
-}

package/src/common/control-base/control-base.tsx

@@ -1,130 +0,0 @@
-import {
-  ControlController,
-  IControlProvider,
-  IViewLayoutPanelController,
-} from '@ibiz-template/runtime';
-import { IControlContainer } from '@ibiz/model-core';
-import { isNil } from 'ramda';
-import {
-  CSSProperties,
-  defineComponent,
-  h,
-  PropType,
-  reactive,
-  resolveComponent,
-  VNode,
-} from 'vue';
-import { useNamespace } from '../../use';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const IBizControlBase: any = defineComponent({
-  name: 'IBizControlBase',
-  props: {
-    controller: {
-      type: Object as PropType<ControlController>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('control');
-    const { controlType, sysCss, codeName } = props.controller.model;
-    const typeClass = controlType!.toLowerCase();
-    const sysCssName = sysCss?.cssName;
-    const model = props.controller.model;
-
-    /** 子部件模型 */
-    const controls = (props.controller.model as IControlContainer).controls;
-
-    const onLayoutPanelCreated = (
-      controller: IViewLayoutPanelController,
-    ): void => {
-      props.controller.setLayoutPanel(controller as IViewLayoutPanelController);
-    };
-
-    const inlineStyle = reactive<CSSProperties>({});
-    // 非导航栏时才输出宽高
-    if (model.controlType!.endsWith('EXPBAR') === false) {
-      if (!isNil(model.width)) {
-        inlineStyle.width = `${model.width}px`;
-      }
-      if (!isNil(model.height)) {
-        inlineStyle.height = `${model.height}px`;
-      }
-    }
-
-    return {
-      ns,
-      typeClass,
-      sysCssName,
-      inlineStyle,
-      codeName,
-      controls,
-      onLayoutPanelCreated,
-    };
-  },
-  render() {
-    const { state, controlPanel, providers } = this.controller;
-    let layoutPanel = null;
-    // 有部件布局的绘制布局面板
-    if (state.isCreated && controlPanel) {
-      // 绘制部件插槽，外部插槽优先
-      const slots: IData = {
-        ...this.$slots,
-      };
-
-      if (this.controls?.length) {
-        this.controls.forEach(ctrl => {
-          const slotKey = ctrl.name!;
-          const ctrlProps = {
-            context: this.controller.context,
-            params: this.controller.params,
-          };
-          // 已经有插槽的不用自己绘制了。
-          const outCtrlSlot = slots[slotKey];
-          if (outCtrlSlot) {
-            slots[slotKey] = (): VNode => {
-              return outCtrlSlot(ctrlProps);
-            };
-          } else {
-            slots[slotKey] = (): VNode => {
-              const comp = resolveComponent('IBizControlShell') as string;
-              return h(comp, {
-                modelData: ctrl,
-                ...ctrlProps,
-              });
-            };
-          }
-        });
-      }
-
-      // 绘制布局面板
-      const provider = providers[controlPanel.name!] as IControlProvider;
-      layoutPanel = h(
-        resolveComponent(provider.component) as string,
-        {
-          modelData: controlPanel,
-          context: this.controller.context,
-          params: this.controller.params,
-          provider,
-          container: this.controller,
-          onControllerAppear: this.onLayoutPanelCreated,
-        },
-        slots,
-      );
-    }
-
-    return (
-      <div
-        class={[
-          this.ns.b(),
-          this.ns.b(this.typeClass),
-          this.ns.m(this.codeName),
-          this.sysCssName,
-        ]}
-        style={this.inlineStyle}
-      >
-        {layoutPanel || this.$slots.default?.()}
-      </div>
-    );
-  },
-});

package/src/common/control-loading-placeholder/control-loading-placeholder.tsx

@@ -1,22 +0,0 @@
-import { CTX } from '@ibiz-template/runtime';
-import { defineComponent, inject, PropType } from 'vue';
-
-export const ControlLoadingPlaceholder = defineComponent({
-  name: 'ControlLoadingPlaceholder',
-  props: {
-    modelData: { type: Object as PropType<IData>, required: true },
-    context: { type: Object as PropType<IContext>, required: true },
-    params: { type: Object as PropType<IParams>, default: () => ({}) },
-  },
-  setup(props) {
-    // 上下文里提前预告部件
-    const ctx = inject('ctx') as CTX;
-
-    ctx.evt.emit('onForecast', props.modelData.name!);
-
-    return {};
-  },
-  render() {
-    return null;
-  },
-});

package/src/common/control-shell/control-shell.scss

@@ -1,5 +0,0 @@
-@include b(control-shell) {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}

package/src/common/control-shell/control-shell.tsx

@@ -1,70 +0,0 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable vue/no-mutating-props */
-import {
-  CTX,
-  getControlProvider,
-  IControlProvider,
-} from '@ibiz-template/runtime';
-import {
-  defineComponent,
-  h,
-  inject,
-  PropType,
-  ref,
-  resolveComponent,
-} from 'vue';
-import './control-shell.scss';
-import { IControl } from '@ibiz/model-core';
-import { useNamespace } from '../../use';
-
-export const IBizControlShell = defineComponent({
-  name: 'IBizControlShell',
-  props: {
-    modelData: { type: Object as PropType<IControl>, required: true },
-  },
-  setup(props) {
-    // 上下文里提前预告部件
-    const ctx = inject('ctx') as CTX;
-
-    ctx.evt.emit('onForecast', props.modelData.name!);
-
-    const isComplete = ref(false);
-    const errMsg = ref('');
-    const provider = ref<IControlProvider>();
-    getControlProvider(props.modelData)
-      .then(item => {
-        if (!item) {
-          errMsg.value = `未找到对应部件的适配器`;
-        } else {
-          provider.value = item;
-        }
-        isComplete.value = true;
-      })
-      .catch(err => {
-        ibiz.log.error(err);
-        errMsg.value = err.message;
-        isComplete.value = true;
-      });
-    const ns = useNamespace('control-shell');
-
-    return { ns, isComplete, errMsg, provider };
-  },
-  render() {
-    if (this.isComplete && this.provider) {
-      return h(
-        resolveComponent(this.provider.component) as string,
-        {
-          provider: this.provider,
-          ...this.$props,
-          ...this.$attrs,
-        },
-        this.$slots,
-      );
-    }
-    return (
-      <div class={this.ns.b()} v-loading={!this.isComplete}>
-        {this.isComplete ? this.errMsg : null}
-      </div>
-    );
-  },
-});

package/src/common/icon/icon.tsx

@@ -1,82 +0,0 @@
-import { defineComponent, PropType, VNode, computed } from 'vue';
-import { ISysImage } from '@ibiz/model-core';
-import { IIcon } from '@ibiz-template/runtime';
-import { isBase64Image, isSvg } from '@ibiz-template/core';
-import { useNamespace } from '../../use';
-
-export const IBizIcon = defineComponent({
-  name: 'IBizIcon',
-  props: {
-    icon: {
-      type: Object as PropType<ISysImage | IIcon>,
-    },
-    size: {
-      type: String as PropType<'small' | 'medium' | 'large'>,
-    },
-    baseDir: {
-      type: String,
-      default: 'images',
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('icon');
-    const BaseUrl = `${ibiz.env.assetsUrl}/${props.baseDir}/`;
-
-    function getContent(icon?: IData): VNode | null {
-      if (icon) {
-        if (icon.htmlStr) {
-          return <span class={ns.b()} v-html={icon.htmlStr}></span>;
-        }
-        if (icon.cssClass) {
-          if (icon.cssClass.indexOf('fa-') !== -1) {
-            return <i class={[ns.b(), icon.cssClass]} />;
-          }
-          return <ion-icon class={ns.b()} name={icon.cssClass}></ion-icon>;
-        }
-        if (icon.imagePath) {
-          // base64格式内容
-          if (isBase64Image(icon.imagePath)) {
-            return <img class={ns.b()} src={icon.imagePath}></img>;
-          }
-          // svg内容
-          if (isSvg(icon.imagePath)) {
-            return <div class={ns.b()} v-html={icon.imagePath}></div>;
-          }
-          // 以svg结尾
-          if (icon.imagePath.endsWith('svg')) {
-            // 远程svg
-            if (icon.imagePath.startsWith('http')) {
-              return <img class={ns.b()} src={icon.imagePath}></img>;
-            }
-            // 本地svg
-            return (
-              <ion-icon
-                src={BaseUrl + icon.imagePath}
-                class={ns.b()}
-              ></ion-icon>
-            );
-          }
-          // 远程图片
-          if (icon.imagePath.startsWith('http')) {
-            return <img class={ns.b()} src={icon.imagePath} />;
-          }
-          // 本地图片
-          return <img class={ns.b()} src={BaseUrl + icon.imagePath} />;
-        }
-        if (icon.rawContent) {
-          if (isSvg(icon.rawContent)) {
-            return <div class={ns.b()} v-html={icon.rawContent}></div>;
-          }
-          return <img class={ns.b()} src={icon.rawContent} />;
-        }
-      }
-      return null;
-    }
-
-    const content = computed<VNode | null>(() => {
-      return getContent(props.icon);
-    });
-
-    return (): VNode | null => content.value;
-  },
-});

package/src/common/index.ts

@@ -1,8 +0,0 @@
-export * from './icon/icon';
-export * from './router-view/router-view';
-export * from './control-base/control-base';
-export * from './control-shell/control-shell';
-export * from './view-shell/view-shell';
-export * from './code-list/code-list';
-export * from './control-loading-placeholder/control-loading-placeholder';
-export * from './badge/badge';

package/src/common/router-view/router-view.tsx

@@ -1,74 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { isNotNil } from 'ramda';
-import { defineComponent, h, PropType, VNode, watch } from 'vue';
-import { RouteLocationNormalizedLoaded } from 'vue-router';
-
-/**
- * 只会第一次绘制的时候绘制路由相关的内容，后面路由导致的router-view的回调都屏蔽了。
- * 通过变更manualKey,来强制刷新router-view的slot回调。并且吧manualKey传给Component的key，搭配AppKeepAlive可以缓存组件
- */
-
-export const IBizRouterView = defineComponent({
-  name: 'IBizRouterView',
-  inheritAttrs: false,
-  props: {
-    name: {
-      type: String as PropType<string>,
-      default: 'default',
-    },
-    route: Object as PropType<RouteLocationNormalizedLoaded>,
-    manualKey: {
-      type: String,
-    },
-  },
-  setup(props, { attrs }) {
-    const cache: { vNode?: VNode } = {};
-
-    let isActive = true;
-
-    watch(
-      () => props.manualKey,
-      (newVal, oldVal) => {
-        if (isNotNil(newVal) && newVal !== oldVal) {
-          isActive = true;
-        }
-      },
-    );
-
-    const renderComp = (Component: VNode, _route: any): VNode | undefined => {
-      // 非激活时返回缓存
-      if (!isActive) {
-        return cache.vNode;
-      }
-      isActive = false;
-      if (Component) {
-        const tempProps = { ...Component.props };
-        delete tempProps.onVnodeUnmounted;
-        delete tempProps.ref;
-        const hNode = h(Component.type as string, {
-          ...tempProps,
-          ...attrs,
-          key: props.manualKey,
-        });
-        cache.vNode = hNode;
-        return hNode;
-      }
-      return undefined;
-    };
-
-    return { renderComp };
-  },
-  render() {
-    return (
-      <router-view name={this.name} route={this.route}>
-        {({ Component, route }: any): VNode | VNode[] | undefined => {
-          const newComp = this.renderComp(Component, route);
-          if (this.$slots.default) {
-            return this.$slots.default({ Component: newComp, route });
-          }
-          return newComp;
-        }}
-      </router-view>
-    );
-  },
-});

package/src/common/view-shell/view-shell.scss

@@ -1,5 +0,0 @@
-@include b(view-shell) {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}

package/src/common/view-shell/view-shell.tsx

@@ -1,163 +0,0 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable vue/no-mutating-props */
-import {
-  getViewProvider,
-  IViewProvider,
-  calcDynaSysParams,
-} from '@ibiz-template/runtime';
-import { defineComponent, h, PropType, ref, resolveComponent } from 'vue';
-import { IAppView } from '@ibiz/model-core';
-import { RuntimeError } from '@ibiz-template/core';
-import { createUUID } from 'qx-util';
-import { isEmpty, isNil } from 'ramda';
-import { useNamespace } from '../../use';
-import './view-shell.scss';
-
-export const IBizViewShell = defineComponent({
-  name: 'IBizViewShell',
-  props: {
-    context: { type: Object as PropType<IContext>, required: true },
-    params: { type: Object as PropType<IParams> },
-    modelData: { type: Object as PropType<IAppView> },
-    viewId: { type: String },
-  },
-  setup(props) {
-    const ns = useNamespace('view-shell');
-    const isComplete = ref(false);
-    const errMsg = ref('');
-    const provider = ref<IViewProvider>();
-    const viewModelData = ref<IAppView | undefined>();
-    // 初始化方法
-    const init = async (): Promise<void> => {
-      let viewModel: IAppView | undefined;
-      if (props.modelData) {
-        viewModel = props.modelData;
-      } else {
-        viewModel = await ibiz.hub.getAppView(props.viewId!);
-      }
-      if (!viewModel) {
-        throw new RuntimeError('未找到视图模型');
-      }
-
-      if (viewModel.dynaSysMode === 1) {
-        //* 计算实体资源路径上下文参数
-        const appDataEntityId = viewModel.appDataEntityId;
-        if (!appDataEntityId) {
-          throw new RuntimeError(
-            `${viewModel.codeName}无实体,暂不支持加载动态模型`,
-          );
-        }
-
-        const params = props.params || {};
-
-        /** 加载动态模型的请求参数 */
-        const loadModelParams: IParams = await calcDynaSysParams(
-          appDataEntityId,
-          props.context,
-          { viewParams: params, appId: viewModel.appId },
-        );
-
-        if (params.srfdatatype) {
-          loadModelParams.srfdatatype = params.srfdatatype;
-        }
-
-        // 如果视图参数中存在 srfwftag 则直接使用视图参数
-        if (params.srfwftag) {
-          loadModelParams.srfwftag = params.srfwftag;
-        } else if (appDataEntityId && viewModel.enableWF) {
-          // 处理数据请求的上下文
-          const context: IContext = { ...props.context };
-          // 存在主键则加载数据计算对应的参数
-          if (loadModelParams.srfkey) {
-            const noSrfSessionId =
-              isNil(props.context.srfsessionid) ||
-              isEmpty(props.context.srfsessionid);
-            const id = createUUID();
-            // 只要上下文中无 srfsessionid 则生成一个
-            if (noSrfSessionId) {
-              // 生成一个界面域，界面域标识为当前控制器实例的标识
-              const domain = ibiz.uiDomainManager.create(id);
-              context.srfsessionid = domain.id;
-            }
-
-            const app = ibiz.hub.getApp(viewModel.appId);
-            const service = await app.deService.getService(
-              props.context,
-              appDataEntityId!,
-            );
-            const res = await service.get(context, props.params || {});
-            if (res.ok && res.data) {
-              const { srfwftag, processdefinitionkey, taskdefinitionkey } =
-                res.data;
-              if (srfwftag) {
-                loadModelParams.srfwftag = srfwftag;
-              }
-
-              // *动态工作流编辑视图从数据里额外获取参数
-              if (
-                ['DEWFDYNAEDITVIEW3', 'DEWFDYNAEDITVIEW'].includes(
-                  viewModel.viewType!,
-                )
-              ) {
-                const viewParams = props.params!;
-                // 如果视图参数中没有获取到对应流程实例标识与步骤标识，则从请求回来的数据中获取对应信息
-                if (isNil(viewParams.processDefinitionKey)) {
-                  viewParams.processDefinitionKey = processdefinitionkey;
-                }
-                if (isNil(viewParams.taskDefinitionKey)) {
-                  viewParams.taskDefinitionKey = taskdefinitionkey;
-                }
-              }
-            }
-
-            if (noSrfSessionId) {
-              ibiz.uiDomainManager.destroy(id);
-            }
-          }
-        }
-
-        // *加载动态模型
-        viewModelData.value = await ibiz.hub.loadAppView(
-          viewModel.appId,
-          viewModel.id!,
-          loadModelParams,
-        );
-      } else {
-        viewModelData.value = viewModel;
-      }
-
-      try {
-        provider.value = await getViewProvider(viewModel);
-      } catch (error) {
-        ibiz.log.error(error);
-        errMsg.value = (error as IData).message;
-      } finally {
-        isComplete.value = true;
-      }
-    };
-
-    init();
-
-    return { ns, isComplete, errMsg, viewModelData, provider };
-  },
-  render() {
-    if (this.isComplete && this.provider) {
-      return h(
-        resolveComponent(this.provider.component) as string,
-        {
-          context: this.$props.context,
-          params: this.$props.params,
-          modelData: this.viewModelData,
-          ...this.$attrs,
-          provider: this.provider,
-        },
-        this.$slots,
-      );
-    }
-    return (
-      <div class={this.ns.b()} v-loading={!this.isComplete}>
-        {this.isComplete ? this.errMsg : null}
-      </div>
-    );
-  },
-});

package/src/control/index.ts

@@ -1 +0,0 @@
-export * from './panel';