@ibiz-template/vue3-util 0.7.41-alpha.13 → 0.7.41-alpha.131

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

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

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

@@ -0,0 +1,337 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-case-declarations */
+/* eslint-disable no-param-reassign */
+/* eslint-disable vue/no-mutating-props */
+import {
+  getViewProvider,
+  IViewProvider,
+  calcDynaSysParams,
+  getErrorViewProvider,
+  RedrawViewEvent,
+  IModal,
+  CTX,
+  EventBase,
+  IViewShellHooks,
+} from '@ibiz-template/runtime';
+import {
+  defineComponent,
+  h,
+  PropType,
+  provide,
+  Ref,
+  ref,
+  resolveComponent,
+  watch,
+} from 'vue';
+import { IAppView } from '@ibiz/model-core';
+import { RuntimeError } from '@ibiz-template/core';
+import { createUUID } from 'qx-util';
+import { isEmpty, isNil, clone } 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 },
+    // 解决打开浮动容器（模态、抽屉、弹出框）ctx丢失问题
+    ctx: { type: Object as PropType<CTX> },
+    viewShellHooks: { type: Object as PropType<IViewShellHooks> },
+  },
+  setup(props, { attrs }) {
+    const ns = useNamespace('view-shell');
+    const isComplete = ref(false);
+    const errMsg = ref('');
+    const provider = ref<IViewProvider>();
+    const viewModelData = ref<IAppView | undefined>();
+    const hasAuthority = ref(true);
+    if (props.ctx) {
+      provide('ctx', props.ctx);
+    }
+    // 当前视图上下文
+    const context: Ref<IContext> = ref(props.context);
+    // 当前视图参数
+    const params: Ref<IParams> = ref(props.params || {});
+    // 动态视图加载缓存key
+    let dynaViewCacheKey: string = '';
+    // 监听上层视图视图参数合视图上下文变化
+    watch(
+      () => ({ context: props.context, params: props.params }),
+      newVal => {
+        context.value = newVal.context;
+        params.value = newVal.params ? newVal.params : {};
+      },
+    );
+
+    // 检查视图权限
+    const checkViewAuthority = async (
+      viewModel: IAppView,
+    ): Promise<boolean> => {
+      let checkResult: boolean = true;
+      const { accessKey } = viewModel;
+      let { accUserMode } = viewModel;
+      const authInfo = ibiz.auth.getAuthInfo();
+      // 0：未指定、 1：未登录用户、 2：登录用户、 3：未登录用户及登录用户、 4：登录用户且拥有指定资源能力
+      if (isNil(accUserMode) || accUserMode === 0) {
+        accUserMode = ibiz.config.view.viewAccUserMode;
+      }
+      switch (accUserMode) {
+        case 1:
+          // 未登录用户(登录用户不能访问)
+          if (authInfo && !authInfo.isAnonymous) {
+            checkResult = false;
+          }
+          break;
+        case 2:
+          // 登录用户(未登录用户或者匿名用户不能访问)
+          if (!authInfo || (authInfo && authInfo.isAnonymous)) {
+            checkResult = false;
+          }
+          break;
+        case 4:
+          // 登录用户且拥有指定资源能力（登录用户且存在指定资源能力才能访问）
+          if (authInfo && !authInfo.isAnonymous) {
+            if (accessKey) {
+              const app = await ibiz.hub.getApp(context.value.srfappid);
+              const permitted = app.authority.calcByResCode(accessKey);
+              if (!permitted) {
+                checkResult = false;
+              }
+            } else {
+              checkResult = false;
+            }
+          } else {
+            checkResult = false;
+          }
+          break;
+        default:
+          break;
+      }
+      return checkResult;
+    };
+
+    let viewModel: IAppView | undefined;
+
+    // 设置动态视图加载缓存key，排除传入参数srfdatatype以外的参数
+    const getDynaViewCacheKey = (args: IParams): string => {
+      const copyArgs = clone(args);
+      if (copyArgs.srfdatatype) {
+        delete copyArgs.srfdatatype;
+      }
+      return JSON.stringify(copyArgs);
+    };
+
+    // 初始化视图模型
+    const initViewModel = async (): Promise<void> => {
+      if (props.modelData) {
+        viewModel = props.modelData;
+      } else {
+        viewModel = await ibiz.hub.getAppView(props.viewId!);
+      }
+    };
+
+    // 初始化方法
+    const init = async (): Promise<void> => {
+      try {
+        await initViewModel();
+        if (!viewModel) {
+          throw new RuntimeError(
+            ibiz.i18n.t('vue3Util.common.noFoundViewModel'),
+          );
+        }
+        // 检查权限
+        hasAuthority.value = await checkViewAuthority(viewModel);
+        if (!hasAuthority.value) {
+          return;
+        }
+
+        if (viewModel.dynaSysMode === 1) {
+          //* 计算实体资源路径上下文参数
+          const appDataEntityId = viewModel.appDataEntityId;
+          if (!appDataEntityId) {
+            throw new RuntimeError(
+              ibiz.i18n.t('vue3Util.common.noSupportLoadingDynamic', {
+                codeName: viewModel.codeName,
+              }),
+            );
+          }
+
+          /** 加载动态模型的请求参数 */
+          const loadModelParams: IParams = await calcDynaSysParams(
+            appDataEntityId,
+            context.value,
+            { viewParams: params.value, appId: viewModel.appId },
+          );
+
+          if (params.value.srfdatatype) {
+            loadModelParams.srfdatatype = params.value.srfdatatype;
+          }
+
+          // 如果视图参数中存在 srfwftag 则直接使用视图参数
+          if (params.value.srfwftag) {
+            loadModelParams.srfwftag = params.value.srfwftag;
+          } else if (appDataEntityId && viewModel.enableWF) {
+            // 处理数据请求的上下文
+            // 存在主键则加载数据计算对应的参数
+            if (loadModelParams.srfkey) {
+              const noSrfSessionId =
+                isNil(context.value.srfsessionid) ||
+                isEmpty(context.value.srfsessionid);
+              const id = createUUID();
+              // 只要上下文中无 srfsessionid 则生成一个
+              if (noSrfSessionId) {
+                // 生成一个界面域，界面域标识为当前控制器实例的标识
+                const domain = ibiz.uiDomainManager.create(id, appDataEntityId);
+                context.value.srfsessionid = domain.id;
+              }
+
+              const app = ibiz.hub.getApp(viewModel.appId);
+              if (!context.value.srfappid)
+                context.value.srfappid = viewModel.appId;
+              const service = await app.deService.getService(
+                context.value,
+                appDataEntityId!,
+              );
+              const res = await service.get(context.value, params.value || {});
+              if (res.ok && res.data) {
+                const { srfwftag, processdefinitionkey, taskdefinitionkey } =
+                  res.data;
+                if (srfwftag) {
+                  loadModelParams.srfwftag = srfwftag;
+                }
+
+                // *动态工作流编辑视图从数据里额外获取参数
+                if (
+                  [
+                    'DEWFDYNAEDITVIEW3',
+                    'DEWFDYNAEDITVIEW',
+                    'DEMOBWFDYNAEDITVIEW3',
+                    'DEMOBWFDYNAEDITVIEW',
+                  ].includes(viewModel.viewType!)
+                ) {
+                  // 如果视图参数中没有获取到对应流程实例标识与步骤标识，则从请求回来的数据中获取对应信息
+                  if (isNil(params.value.processDefinitionKey)) {
+                    params.value.processDefinitionKey = processdefinitionkey;
+                  }
+                  if (isNil(params.value.taskDefinitionKey)) {
+                    params.value.taskDefinitionKey = taskdefinitionkey;
+                  }
+                }
+              }
+
+              if (noSrfSessionId) {
+                ibiz.uiDomainManager.destroy(id);
+                context.value.srfsessionid = '';
+              }
+            }
+          }
+          // 当前计算加载动态视图key和缓存key一致，则不需要重新加载动态视图
+          const curDynaViewCacheKey = getDynaViewCacheKey(loadModelParams);
+          if (curDynaViewCacheKey === dynaViewCacheKey) {
+            setTimeout(() => {
+              isComplete.value = true;
+            });
+            return;
+          }
+          // *加载动态模型
+          viewModelData.value = await ibiz.hub.loadAppView(
+            viewModel.appId,
+            viewModel.id!,
+            loadModelParams,
+          );
+          dynaViewCacheKey = getDynaViewCacheKey(loadModelParams);
+        } else {
+          viewModelData.value = viewModel;
+        }
+        provider.value = await getViewProvider(viewModel);
+      } catch (error) {
+        ibiz.log.error(error);
+        errMsg.value = (error as IData).message;
+      } finally {
+        isComplete.value = true;
+      }
+    };
+
+    init();
+
+    // 重绘视图
+    const redrawView = async (event: RedrawViewEvent): Promise<void> => {
+      isComplete.value = false;
+      const { redrawData } = event;
+      const { isReloadModel } = redrawData;
+      // 合并参数
+      Object.assign(context.value, redrawData.context);
+      Object.assign(params.value, redrawData.params);
+      // 重绘清空原关闭监听
+      const modal = attrs.modal as IModal;
+      if (modal) {
+        modal.hooks.preDismiss.clear();
+        modal.hooks.shouldDismiss.clear();
+        modal.hooks.beforeDismiss.clear();
+      }
+      if (isReloadModel) {
+        await init();
+      } else {
+        setTimeout(() => {
+          isComplete.value = true;
+        });
+      }
+    };
+
+    // 视图创建完成
+    const onCreated = (event: EventBase): void => {
+      if (props.viewShellHooks) {
+        props.viewShellHooks.hooks.viewCreated.call(event);
+      }
+    };
+
+    return {
+      ns,
+      errMsg,
+      provider,
+      isComplete,
+      hasAuthority,
+      viewModelData,
+      redrawView,
+      onCreated,
+      curContext: context,
+      curParams: params,
+    };
+  },
+  render() {
+    if (this.isComplete && this.provider && this.hasAuthority) {
+      return h(
+        resolveComponent(this.provider.component) as string,
+        {
+          context: this.curContext,
+          params: this.curParams,
+          modelData: clone(this.viewModelData),
+          ...this.$attrs,
+          provider: this.provider,
+          onRedrawView: this.redrawView,
+          onCreated: this.onCreated,
+        },
+        this.$slots,
+      );
+    }
+    // 无权限访问绘制403界面
+    if (!this.hasAuthority) {
+      const provider = getErrorViewProvider('403');
+      if (provider) {
+        if (typeof provider.component === 'string') {
+          return h(resolveComponent(provider.component) as string);
+        }
+        return h(provider.component);
+      }
+    }
+    return (
+      <div class={this.ns.b()} v-loading={!this.isComplete}>
+        {this.isComplete ? this.errMsg : null}
+      </div>
+    );
+  },
+});

package/src/control/index.ts

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

package/src/control/panel/index.ts

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

package/src/control/panel/panel/index.ts

@@ -0,0 +1,12 @@
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { PanelControl } from './panel';
+import { PanelProvider } from './panel.provider';
+import { withInstall } from '../../../util';
+
+export const IBizPanelControl = withInstall(PanelControl, function (v: App) {
+  v.component(PanelControl.name!, PanelControl);
+  registerControlProvider(ControlType.PANEL, () => new PanelProvider());
+});
+
+export default IBizPanelControl;

package/src/control/panel/panel/panel.provider.ts

@@ -0,0 +1,14 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+
+/**
+ * 面板部件适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class ViewLayoutPanelProvider
+ * @implements {IControlProvider}
+ */
+export class PanelProvider implements IControlProvider {
+  component: string = 'IBizPanelControl';
+}

package/src/control/panel/panel/panel.scss

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

package/src/control/panel/panel/panel.tsx

@@ -0,0 +1,273 @@
+import {
+  defineComponent,
+  PropType,
+  resolveComponent,
+  h,
+  VNode,
+  reactive,
+  ComponentPublicInstance,
+  watch,
+  provide,
+  inject,
+  renderSlot,
+} from 'vue';
+import {
+  IPanel,
+  IPanelContainer,
+  IPanelField,
+  IPanelItem,
+  IPanelTabPanel,
+} from '@ibiz/model-core';
+import {
+  IControlProvider,
+  IController,
+  IPanelItemController,
+  IPanelItemProvider,
+  PanelController,
+  ScriptFactory,
+  filterPresetAttrs,
+  isDataContainer,
+} from '@ibiz-template/runtime';
+import { useControlController, useNamespace } from '../../../use';
+import './panel.scss';
+
+/**
+ * 绘制成员的attrs
+ * @author lxm
+ * @date 2024-03-19 03:48:00
+ * @param {IDEFormDetail} model
+ * @return {*}  {IParams}
+ */
+function renderAttrs(
+  model: IPanelItem,
+  controller: IPanelItemController,
+): IParams {
+  const attrs: IParams = {};
+  filterPresetAttrs(model.controlAttributes).forEach(item => {
+    if (item.attrName && item.attrValue) {
+      attrs[item.attrName!] = ScriptFactory.execSingleLine(item.attrValue!, {
+        ...controller.panel.getEventArgs(),
+        data: controller.data,
+      });
+    }
+  });
+  return attrs;
+}
+
+/**
+ * 绘制面板成员
+ *
+ * @author lxm
+ * @date 2023-02-07 05:58:43
+ * @param {IPanelItem} panelItem
+ * @param {PanelController} c
+ * @returns {*}  {(VNode | undefined)}
+ */
+function renderPanelItem(
+  panelItem: IPanelItem,
+  c: PanelController,
+  ins: ComponentPublicInstance,
+): VNode | undefined {
+  if ((panelItem as IPanelField).hidden) {
+    return;
+  }
+  const { providers, panelItems } = c;
+  const provider = providers[panelItem.id!];
+  if (!provider) {
+    return (
+      <div>
+        {ibiz.i18n.t('vue3Util.control.unsupportedPanel', {
+          id: panelItem.id,
+          itemType: panelItem.itemType,
+        })}
+      </div>
+    );
+  }
+  const component = resolveComponent(provider.component);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let children: any;
+  // 占位类型成员填充外部对应的插槽。
+  if (panelItem.itemType === 'CTRLPOS' && ins.$slots[panelItem.id!]) {
+    children = (): VNode[] => {
+      return ins.$slots[panelItem.id!]!();
+    };
+  } else if (
+    panelItem.itemType === 'TABPANEL' &&
+    (panelItem as IPanelTabPanel).panelTabPages?.length
+  ) {
+    children = (): (VNode | undefined)[] => {
+      return (panelItem as IPanelTabPanel).panelTabPages!.map(child => {
+        return renderPanelItem(child, c, ins);
+      });
+    };
+  } else if (isDataContainer(panelItem)) {
+    // 单项数据容器，多项数据容器不给子
+    children = undefined;
+  } else if ((panelItem as IPanelContainer).panelItems?.length) {
+    children = (): (VNode | undefined)[] => {
+      return (panelItem as IPanelContainer).panelItems!.map(child => {
+        return renderPanelItem(child, c, ins);
+      });
+    };
+  }
+
+  // 直接样式
+  let tempStyle = '';
+  if (panelItem.cssStyle) {
+    tempStyle = panelItem.cssStyle;
+  }
+  const panelItemC = panelItems[panelItem.id!]!;
+
+  const attrs = renderAttrs(panelItem, panelItemC);
+
+  // 动态样式
+  if (attrs.dynamicstyle) {
+    if (typeof attrs.dynamicstyle === 'object') {
+      tempStyle += Object.entries(attrs.dynamicstyle)
+        .map(([key, value]) => {
+          return `${key}:${value};`;
+        })
+        .join('');
+    } else {
+      tempStyle += attrs.dynamicstyle;
+    }
+    delete attrs.dynamicstyle;
+  }
+  if (ins?.$slots[panelItem.id!]) {
+    return renderSlot(ins.$slots, panelItem.id!, {
+      modelData: panelItem,
+      controller: panelItemC,
+      key: panelItem.id,
+      style: tempStyle,
+      attrs,
+    });
+  }
+  return h(
+    component,
+    {
+      modelData: panelItem,
+      controller: panelItemC,
+      key: panelItem.id,
+      style: tempStyle,
+      attrs,
+    },
+    children,
+  );
+}
+
+/**
+ * 视图布局面板组件
+ */
+export const PanelControl = defineComponent({
+  name: 'IBizPanelControl',
+  props: {
+    /**
+     * @description 面板模型数据
+     */
+    modelData: {
+      type: Object as PropType<IPanel>,
+      required: true,
+    },
+    /**
+     * @description 应用上下文对象
+     */
+    context: { type: Object as PropType<IContext>, required: true },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    /**
+     * @description 部件适配器
+     */
+    provider: { type: Object as PropType<IControlProvider> },
+    /**
+     * @description 容器控制器,为上层部件控制器或视图控制器
+     */
+    container: { type: Object as PropType<IController> },
+    /**
+     * @description 视图布局面板数据
+     */
+    data: { type: Object as PropType<IData> },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
+    loadDefault: { type: Boolean, default: true },
+  },
+  setup(props) {
+    const c = useControlController<PanelController>(
+      (...args) => new PanelController(...args, props.container),
+    );
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
+
+    watch(
+      () => props.data,
+      newVal => {
+        if (newVal) {
+          c.setInputData(newVal);
+          c.load();
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    c.evt.on('onCreated', () => {
+      // 面板成员state响应式
+      const keys = Object.keys(c.panelItems);
+      keys.forEach(key => {
+        const panelItem = c.panelItems[key];
+        panelItem.state = reactive(panelItem.state);
+      });
+    });
+    // 获取上层的绘制函数
+    const parentRenderPanelItem = inject<
+      (
+        panelItem: IPanelItem,
+        options?: {
+          providers: {
+            [key: string]: IPanelItemProvider;
+          };
+          panelItems: {
+            [key: string]: IPanelItemController;
+          };
+        },
+      ) => VNode | null
+    >('renderPanelItem')!;
+
+    if (parentRenderPanelItem) {
+      provide('renderPanelItem', parentRenderPanelItem);
+    } else {
+      provide('renderPanelItem', renderPanelItem);
+    }
+
+    return { c, ns };
+  },
+  render() {
+    const { state, model } = this.c;
+    return (
+      <iBizControlBase controller={this.c}>
+        <iBizRow class={this.ns.b('content')} layout={{ layout: 'FLEX' }}>
+          {state.isCreated &&
+            (this.$slots.default
+              ? this.$slots.default({
+                  panelItems: this.c.panelItems,
+                })
+              : model.rootPanelItems?.map(panelItem => {
+                  const subC = this.c.panelItems[panelItem.id!];
+                  // 视图布局面板的子默认布局改成flex
+                  // eslint-disable-next-line no-param-reassign
+                  panelItem.layoutPos!.layout = 'FLEX';
+                  return (
+                    <iBizCol layoutPos={panelItem.layoutPos} state={subC.state}>
+                      {renderPanelItem(panelItem, this.c, this)}
+                    </iBizCol>
+                  );
+                }))}
+        </iBizRow>
+      </iBizControlBase>
+    );
+  },
+});

package/src/control/panel/view-layout-panel/index.ts

@@ -0,0 +1,18 @@
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { ViewLayoutPanelControl } from './view-layout-panel';
+import { ViewLayoutPanelProvider } from './view-layout-panel.provider';
+import { withInstall } from '../../../util';
+
+export const IBizViewLayoutPanelControl = withInstall(
+  ViewLayoutPanelControl,
+  function (v: App) {
+    v.component(ViewLayoutPanelControl.name!, ViewLayoutPanelControl);
+    registerControlProvider(
+      ControlType.VIEW_LAYOUT_PANEL,
+      () => new ViewLayoutPanelProvider(),
+    );
+  },
+);
+
+export default IBizViewLayoutPanelControl;

package/src/control/panel/view-layout-panel/view-layout-panel.provider.ts

@@ -0,0 +1,14 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+
+/**
+ * 视图布局面板部件适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class ViewLayoutPanelProvider
+ * @implements {IControlProvider}
+ */
+export class ViewLayoutPanelProvider implements IControlProvider {
+  component: string = 'IBizViewLayoutPanelControl';
+}

package/src/control/panel/view-layout-panel/view-layout-panel.scss

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