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

package/src/util/router-callback/router-callback.ts

@@ -0,0 +1,110 @@
+import { IModalData } from '@ibiz-template/runtime';
+import { Router } from 'vue-router';
+import { RouterCallbackItem } from './router-callback-item';
+
+/**
+ * 路由打开视图回调，连通上级视图的关闭
+ *
+ * @author chitanda
+ * @date 2023-07-13 20:07:20
+ * @export
+ * @class RouterCallback
+ */
+export class RouterCallback {
+  /**
+   * 回调实例
+   *
+   * @author chitanda
+   * @date 2023-07-13 20:07:12
+   * @protected
+   * @type {Map<string, RouterCallbackItem>}
+   */
+  protected map: Map<string, RouterCallbackItem> = new Map();
+
+  /**
+   * 打开视图
+   *
+   * @author chitanda
+   * @date 2023-07-13 20:07:13
+   * @param {Router} router
+   * @param {string} path
+   * @return {*}  {Promise<IModalData>}
+   */
+  async open(
+    router: Router,
+    path: string,
+    modalOptions: IData = {},
+  ): Promise<IModalData> {
+    const from = router.currentRoute.value.fullPath;
+    if (modalOptions.replace) {
+      router.replace({ path });
+    } else {
+      router.push({ path });
+    }
+    const to = path;
+    if (this.map.has(to)) {
+      const item = this.map.get(to)!;
+      return item.onWillDismiss();
+    }
+    const item = new RouterCallbackItem(from, to);
+    this.map.set(to, item);
+    this.scheduledDestruction(item);
+    return item.onWillDismiss();
+  }
+
+  /**
+   * 关闭视图回调
+   *
+   * @author chitanda
+   * @date 2023-07-13 20:07:38
+   * @param {string} toFullPath
+   * @param {IModalData} modal
+   */
+  close(toFullPath: string, modal: IModalData): void {
+    const item = this.map.get(toFullPath);
+    if (item) {
+      window.clearTimeout(item.timeout);
+      item.timeout = undefined;
+      item.close(modal);
+      this.map.delete(toFullPath);
+    }
+  }
+
+  /**
+   * 激活回调
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:03
+   * @param {string} toFullPath
+   */
+  active(toFullPath: string): void {
+    const item = this.map.get(toFullPath);
+    if (item) {
+      window.clearTimeout(item.timeout);
+      item.timeout = undefined;
+      item.active();
+    }
+  }
+
+  /**
+   * 十分钟内未激活的视图回调会被清除
+   *
+   * @author chitanda
+   * @date 2023-07-13 21:07:57
+   * @protected
+   * @param {RouterCallbackItem} item
+   */
+  protected scheduledDestruction(item: RouterCallbackItem): void {
+    item.timeout = window.setTimeout(
+      () => {
+        item.timeout = undefined;
+        item.destroy();
+        this.map.delete(item.to);
+      },
+      10 * 60 * 1000,
+    );
+  }
+}
+
+// 路由打开视图回调，连通上级视图的关闭工具类
+export const routerCallback = new RouterCallback();

package/src/util/store/app-store/app-store.ts

@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia';
+import { reactive } from 'vue';
+
+export interface IAppStore {}
+
+export const useAppStore = defineStore('appStore', () => {
+  const appStore = reactive<IAppStore>({});
+
+  return { appStore };
+});

package/src/util/store/index.ts

@@ -0,0 +1,6 @@
+import { createPinia } from 'pinia';
+
+export * from './app-store/app-store';
+export * from './ui-store/ui-store';
+
+export const piniaInstance = createPinia();

package/src/util/store/ui-store/ui-store.ts

@@ -0,0 +1,37 @@
+/* eslint-disable no-restricted-syntax */
+import { defineStore } from 'pinia';
+import { reactive, Ref } from 'vue';
+import { useZIndexStore } from './z-index';
+
+export interface IUIState {
+  /**
+   * ui层级
+   *
+   * @author lxm
+   * @date 2022-08-18 21:08:48
+   * @type {number}
+   */
+  zIndex: Ref<number>;
+
+  theme: string;
+}
+
+export const useUIStore = defineStore('uiStore', () => {
+  const zIndex = useZIndexStore();
+
+  const getTheme = () => {
+    const themeTag = ibiz.util.theme.getTheme();
+    return themeTag.includes('dark') ? 'dark' : 'light';
+  };
+
+  const UIStore = reactive<IUIState>({
+    zIndex: zIndex.zIndex,
+    theme: getTheme(),
+  });
+
+  ibiz.util.theme.evt.on('onChange', () => {
+    UIStore.theme = getTheme();
+  });
+
+  return { UIStore, zIndex };
+});

package/src/util/store/ui-store/z-index.ts

@@ -0,0 +1,53 @@
+import { Ref, ref } from 'vue';
+
+export interface IzIndexStore {
+  /**
+   * 当前最高的ui层级
+   *
+   * @author lxm
+   * @date 2022-08-18 21:08:48
+   * @type {number}
+   */
+  zIndex: Ref<number>;
+
+  /**
+   * 增加Ui层级,返回增加后的层级
+   *
+   * @author lxm
+   * @date 2022-08-18 21:08:22
+   */
+  increment(): number;
+
+  /**
+   * 减少Ui层级
+   *
+   * @author lxm
+   * @date 2022-08-18 21:08:22
+   */
+  decrement(): void;
+}
+
+/**
+ * 定义zIndex的全局状态变量
+ *
+ * @author lxm
+ * @date 2022-08-18 21:08:26
+ * @export
+ * @returns {*}
+ */
+export function useZIndexStore(): IzIndexStore {
+  const DEFAULT_INDEX = 500;
+  const INCREMENT_VALUE = 1;
+  const zIndex = ref(DEFAULT_INDEX);
+
+  function increment(): number {
+    zIndex.value += INCREMENT_VALUE;
+    return zIndex.value;
+  }
+
+  function decrement() {
+    zIndex.value -= INCREMENT_VALUE;
+  }
+
+  return { zIndex, increment, decrement };
+}

package/src/view/app-data-upload-view/app-data-upload-view.provider.ts

@@ -0,0 +1,31 @@
+import {
+  AppDataUploadViewController,
+  CTX,
+  IViewController,
+  IViewEvent,
+  IViewProvider,
+  IViewState,
+} from '@ibiz-template/runtime';
+import { IAppView } from '@ibiz/model-core';
+
+/**
+ * 应用导入视图适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class ViewProvider
+ * @implements {IViewProvider}
+ */
+export class AppDataUploadViewProvider implements IViewProvider {
+  component: string = 'IBizView';
+
+  createController(
+    model: IAppView,
+    context: IContext,
+    params?: IParams | undefined,
+    ctx?: CTX<IViewController<IAppView, IViewState, IViewEvent>> | undefined,
+  ): IViewController<IAppView, IViewState, IViewEvent> {
+    return new AppDataUploadViewController(model, context, params, ctx);
+  }
+}

package/src/view/app-redirect-view/app-redirect-view.tsx

@@ -0,0 +1,26 @@
+import { defineComponent, onMounted, onUnmounted } from 'vue';
+import { IBizContext } from '@ibiz-template/core';
+import { toLocalOpenWFRedirectView } from '@ibiz-template/runtime';
+
+export const AppRedirectView = defineComponent({
+  setup() {
+    const context = IBizContext.create(ibiz.appData?.context || {});
+
+    onUnmounted(() => {
+      context.destroy();
+    });
+
+    const { href } = window.location;
+
+    async function toRedirect(): Promise<void> {
+      await toLocalOpenWFRedirectView(context, href);
+    }
+
+    onMounted(() => ibiz.util.hiddenAppLoading());
+
+    toRedirect();
+  },
+  render() {
+    return <div>{ibiz.i18n.t('vue3Util.view.redirectionProgress')}</div>;
+  },
+});

package/src/view/common/index.ts

@@ -0,0 +1,19 @@
+import { App } from 'vue';
+import { registerViewProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { ViewProvider } from './view.provider';
+import { View } from './view';
+import { AppDataUploadViewProvider } from '../app-data-upload-view/app-data-upload-view.provider';
+import { MDCustomViewProvider } from '../md-custom-view/md-custom-view.provider';
+
+export const IBizView = withInstall(View, function (v: App) {
+  v.component(View.name!, View);
+  registerViewProvider('DEFAULT', () => new ViewProvider());
+  // 注册应用导入视图适配器
+  registerViewProvider(
+    'APPDATAUPLOADVIEW',
+    () => new AppDataUploadViewProvider(),
+  );
+  // 注册实体多数据自定义视图适配器
+  registerViewProvider('DEMDCUSTOMVIEW', () => new MDCustomViewProvider());
+});

package/src/view/common/view.provider.ts

@@ -0,0 +1,14 @@
+import { IViewProvider } from '@ibiz-template/runtime';
+
+/**
+ * 视图适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class ViewProvider
+ * @implements {IViewProvider}
+ */
+export class ViewProvider implements IViewProvider {
+  component: string = 'IBizView';
+}

package/src/view/common/view.scss

@@ -0,0 +1,39 @@
+// 视图样式
+$view: (
+  bg-color: getCssVar(color, bg, 1),                  // 视图背景色  
+  border-radius: getCssVar(border-radius, medium),    // 视图圆角
+);
+
+// 视图默认撑满父容器
+@include b(view) {
+  @include set-component-css-var(view, $view);
+
+  width: 100%;
+  height: 100%;
+
+  .#{bem(view)} {
+    background-color: getCssVar(view, bg-color);
+    border-radius: getCssVar(view, border-radius);
+  }
+
+  // 看板视图样式
+  @include b(view-appportalview){
+    background-color: transparent;
+  }
+
+  &.has-top-message,&.has-bottom-message{
+    @include flex(column);
+
+    // 视图消息不压缩
+    > .#{bem(view-message)}{
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+
+    // 视图面板自适应
+    > .#{bem(control-viewlayoutpanel)}{
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+}

package/src/view/common/view.tsx

@@ -0,0 +1,285 @@
+import {
+  getControlsByView,
+  getCtrlTeleportParams,
+  getErrorViewProvider,
+  IModal,
+  IViewLayoutPanelController,
+  IViewProvider,
+  ViewController,
+} from '@ibiz-template/runtime';
+import { IAppView, IControl } from '@ibiz/model-core';
+import {
+  defineComponent,
+  h,
+  PropType,
+  resolveComponent,
+  VNode,
+  computed,
+  renderSlot,
+  Teleport,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+} from 'vue';
+import './view.scss';
+import { useNamespace, useViewController, useViewOperation } from '../../use';
+
+export const View = defineComponent({
+  name: 'IBizView',
+  props: {
+    /**
+     * @description 应用上下文
+     */
+    context: { type: Object as PropType<IContext> },
+    /**
+     * @description 视图参数
+     * @default {}
+     */
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    /**
+     * @description 视图模型
+     */
+    modelData: { type: Object as PropType<IAppView>, required: true },
+    /**
+     * @description 视图模态操作对象，在模态等形式打开视图时，需给视图注入此对象
+     */
+    modal: { type: Object as PropType<IModal> },
+    /**
+     * @description 视图状态
+     */
+    state: { type: Object as PropType<IData> },
+    /**
+     * @description 视图适配器
+     */
+    provider: { type: Object as PropType<IViewProvider> },
+  },
+  setup(_props, { slots }) {
+    const ns = useNamespace('view');
+    const c = useViewController((...args) => new ViewController(...args));
+    // 监听视图用户操作
+    useViewOperation(c);
+    // 视图部件模型在viewlayoutPanel里面。
+    const allControls = getControlsByView(c.model);
+    const teleportControls: IControl[] = [];
+    const teleportTags = new Map<string, string>();
+    const controls: IControl[] = [];
+
+    allControls.forEach(ctrl => {
+      const { teleportFlag, teleportTag } = getCtrlTeleportParams(ctrl);
+      // 配置了tag或者flag，则认为是teleport部件
+      if (!!teleportTag || teleportFlag) {
+        teleportControls.push(ctrl);
+        teleportTags.set(ctrl.id!, teleportTag || '');
+      } else {
+        controls.push(ctrl);
+      }
+    });
+
+    const getCtrlTeleportTag = (ctrl: IControl): string | undefined => {
+      const tag = teleportTags.get(ctrl.id!);
+      if (tag) {
+        return tag;
+      }
+      const placeholderC = c.parentView?.layoutPanel?.panelItems[ctrl.name!];
+      if (placeholderC) {
+        return `#${(placeholderC.state as IData).teleportTag}`;
+      }
+    };
+
+    const { viewType, sysCss, codeName } = c.model;
+    const typeClass = viewType!.toLowerCase();
+    const sysCssName = sysCss?.cssName;
+    const viewClassNames = computed(() => [
+      ns.b(),
+      true && ns.b(typeClass),
+      true && ns.m(codeName),
+      true && sysCssName,
+      c.state.viewMessages.TOP ? 'has-top-message' : '',
+      c.state.viewMessages.BOTTOM ? 'has-bottom-message' : '',
+      c.state.presetClassList,
+    ]);
+
+    const onLayoutPanelCreated = (
+      controller: IViewLayoutPanelController,
+    ): void => {
+      c.setLayoutPanel(controller as IViewLayoutPanelController);
+    };
+
+    const getControlStyle = () => {
+      const result = {};
+      Object.assign(result, {
+        display: c.state.hasError ? 'none' : 'initial',
+      });
+      return result;
+    };
+
+    /**
+     * 获取部件绘制的props
+     * @author lxm
+     * @date 2024-03-27 01:39:30
+     * @param {IControl} ctrl
+     * @return {*}  {IParams}
+     */
+    const getCtrlProps = (ctrl: IControl, slotProps: IData = {}): IParams => {
+      const slotKey = ctrl.name! || ctrl.id!;
+      return {
+        context: c.context,
+        params: c.params,
+        modelData: ctrl,
+        ...(c.slotProps[slotKey] || {}),
+        ...slotProps,
+      };
+    };
+
+    /**
+     * 绘制部件
+     * @author lxm
+     * @date 2024-03-27 01:45:21
+     * @param {IControl} ctrl
+     * @return {*}  {VNode}
+     */
+    const renderControl = (ctrl: IControl, slotProps: IData = {}): VNode => {
+      const slotKey = ctrl.name! || ctrl.id!;
+      const ctrlProps = getCtrlProps(ctrl, slotProps);
+      if (slots[slotKey]) {
+        return renderSlot(slots, slotKey, ctrlProps);
+      }
+
+      const provider = c.providers[slotKey];
+      const comp = resolveComponent(
+        provider?.component || 'IBizControlShell',
+      ) as string;
+      if (provider) {
+        ctrlProps.provider = provider;
+      }
+      return h(comp, ctrlProps);
+    };
+
+    // 水印销毁方法
+    let watermarkDestroy: void | null | (() => void);
+    onMounted(() => {
+      nextTick(async () => {
+        const container = document.getElementById(c.id);
+        const appView: IData = await ibiz.hub.config.view.get(c.model.id!);
+        if (!container || !appView?.waterMarkOption) return;
+
+        // 挂载视图水印
+        watermarkDestroy = ibiz.util.watermark.mount(
+          appView.waterMarkOption,
+          container,
+          c.context,
+          c.params,
+          c.state.srfactiveviewdata || {},
+        );
+      });
+    });
+
+    onBeforeUnmount(() => {
+      watermarkDestroy?.();
+    });
+
+    return {
+      c,
+      ns,
+      controls,
+      teleportControls,
+      viewClassNames,
+      onLayoutPanelCreated,
+      getCtrlProps,
+      renderControl,
+      getCtrlTeleportTag,
+      getControlStyle,
+    };
+  },
+  render() {
+    let layoutPanel = null;
+    if (this.c.state.isCreated) {
+      if (this.c.engines.length === 0) {
+        layoutPanel = (
+          <span style={'color:red;'}>
+            {ibiz.i18n.t('vue3Util.view.viewType', {
+              viewType: this.modelData.viewType,
+            })}
+          </span>
+        );
+      } else {
+        // 绘制部件插槽，外部插槽优先
+        const slots: IData = {
+          ...this.$slots,
+        };
+        if (this.controls?.length) {
+          this.controls.forEach(ctrl => {
+            const slotKey = ctrl.name! || ctrl.id!;
+            slots[slotKey] = (slotProps: IData): VNode => {
+              return this.renderControl(ctrl, slotProps);
+            };
+          });
+        }
+
+        // 绘制视图布局面板
+        const viewLayoutPanel = this.c.model.viewLayoutPanel!;
+        const provider = this.c.providers[viewLayoutPanel.name!];
+        layoutPanel = h(
+          resolveComponent(provider.component) as string,
+          {
+            modelData: viewLayoutPanel,
+            context: this.c.context,
+            params: this.c.params,
+            provider,
+            container: this.c,
+            style: this.getControlStyle(),
+            onControllerAppear: this.onLayoutPanelCreated,
+          },
+          slots,
+        );
+      }
+    }
+
+    // 绘制teleport部件
+    let teleportContent = null;
+    if (this.c.state.isCreated && this.teleportControls?.length) {
+      teleportContent = this.teleportControls.map(ctrl => {
+        const tag = this.getCtrlTeleportTag(ctrl);
+        if (!tag) {
+          ibiz.log.error(
+            ibiz.i18n.t('vue3Util.view.noTeleportTag', {
+              name: ctrl.name,
+            }),
+          );
+          return null;
+        }
+        return (
+          <div style={this.getControlStyle()}>
+            <Teleport to={tag} disabled={!this.c.state.activated}>
+              {this.renderControl(ctrl)}
+            </Teleport>
+          </div>
+        );
+      });
+    }
+
+    // 绘制错误页面
+    let errorContent = null;
+    if (this.c.state.hasError && this.c.error.status) {
+      const provider = getErrorViewProvider(this.c.error.status);
+      if (provider) {
+        if (typeof provider.component === 'string') {
+          errorContent = h(resolveComponent(provider.component) as string);
+        }
+        errorContent = h(provider.component);
+      }
+    }
+    return (
+      <div
+        class={this.viewClassNames}
+        id={this.c.id}
+        v-loading={this.c.state.isLoading}
+        element-loading-text={this.c.state.loadingText}
+      >
+        {layoutPanel}
+        {teleportContent}
+        {errorContent}
+      </div>
+    );
+  },
+});

package/src/view/de-redirect-view/de-redirect-view.provider.ts

@@ -0,0 +1,14 @@
+import { IViewProvider } from '@ibiz-template/runtime';
+
+/**
+ * 实体重定向视图适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class ViewProvider
+ * @implements {IViewProvider}
+ */
+export class DeRedirectViewProvider implements IViewProvider {
+  component: string = 'IBizDeRedirectView';
+}