@ibiz-template/vue3-util 0.2.11 → 0.2.13

package/src/panel-component/single-data-container/single-data-container.controller.ts

@@ -0,0 +1,345 @@
+import {
+  ModelError,
+  RuntimeError,
+  RuntimeModelError,
+} from '@ibiz-template/core';
+import {
+  execDELogicById,
+  getAllPanelField,
+  getPanelItemProvider,
+  IPanelDataContainerController,
+  IPanelItemContainerController,
+  IPanelItemController,
+  IPanelItemProvider,
+  isDataContainer,
+  IViewController,
+  PanelController,
+  PanelData,
+  PanelItemController,
+  PanelNotifyState,
+} from '@ibiz-template/runtime';
+import { IPanelContainer, IPanelItem, IPanelTabPanel } from '@ibiz/model-core';
+import { SingleDataContainerState } from './single-data-container.state';
+
+/**
+ * 单项数据容器控制器
+ *
+ * @export
+ * @class SingleDataContainerController
+ * @extends {PanelItemController}
+ */
+export class SingleDataContainerController
+  extends PanelItemController<IPanelContainer>
+  implements IPanelDataContainerController
+{
+  declare state: SingleDataContainerState;
+
+  readonly isDataContainer = true;
+
+  /**
+   * 所有面板成员的控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:07
+   * @type {{ [key: string]: IPanelItemController }}
+   */
+  panelItems: { [key: string]: IPanelItemController } = {};
+
+  /**
+   * 所有面板成员的适配器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:07
+   * @type {{ [key: string]: IPanelItemProvider }}
+   */
+  providers: { [key: string]: IPanelItemProvider } = {};
+
+  /**
+   * 单项数据容器，根据数据模式
+   * @author lxm
+   * @date 2023-07-14 10:59:02
+   * @readonly
+   * @type {IData}
+   */
+  get data(): IData {
+    return this.state.data;
+  }
+
+  protected createState(): SingleDataContainerState {
+    return new SingleDataContainerState(this.parent?.state);
+  }
+
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    await this.initPanelItemControllers();
+    this.initContainerData();
+  }
+
+  /**
+   * 初始化面板成员控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 21:08:48
+   * @protected
+   */
+  protected async initPanelItemControllers(
+    panelItems: IPanelItem[] | undefined = this.model.panelItems,
+    panel: PanelController = this.panel,
+    parent: IPanelItemContainerController | undefined = this,
+  ): Promise<void> {
+    if (!panelItems) {
+      return;
+    }
+    await Promise.all(
+      panelItems.map(async panelItem => {
+        // 生成面板成员控制器
+        const panelItemProvider = await getPanelItemProvider(panelItem);
+        if (!panelItemProvider) {
+          return;
+        }
+        this.providers[panelItem.id!] = panelItemProvider;
+        const panelItemController = await panelItemProvider.createController(
+          panelItem,
+          panel,
+          parent,
+        );
+        this.panelItems[panelItem.id!] = panelItemController;
+        // 有子成员的,且不是数据容器的。生成子控制器
+        if (
+          (panelItem as IPanelContainer).panelItems?.length &&
+          !isDataContainer(panelItem)
+        ) {
+          await this.initPanelItemControllers(
+            (panelItem as IPanelContainer).panelItems,
+            panel,
+            panelItemController as IPanelItemContainerController,
+          );
+        }
+        if ((panelItem as IPanelTabPanel).panelTabPages?.length) {
+          await this.initPanelItemControllers(
+            (panelItem as IPanelTabPanel).panelTabPages,
+            panel,
+            panelItemController as IPanelItemContainerController,
+          );
+        }
+      }),
+    );
+  }
+
+  /**
+   * 根据来源类型初始化容器数据
+   * @author lxm
+   * @date 2023-08-04 03:05:59
+   * @protected
+   */
+  protected initContainerData(): void {
+    const { dataSourceType, dataName } = this.model;
+    switch (dataSourceType) {
+      case 'DEACTION':
+      case 'DEDATASET':
+        this.setDataByDeMethod();
+        break;
+      case 'APPGLOBALPARAM':
+        this.setDataByAppGlobalParam();
+        break;
+      case 'DELOGIC':
+        this.setDataByDeLogic();
+        break;
+      case 'TOPVIEWSESSIONPARAM': {
+        if (!dataName) {
+          throw new RuntimeModelError(this.model, '没有配置数据对象名称');
+        }
+        this.bindViewData(this.panel.getTopView(), dataName);
+        break;
+      }
+      case 'VIEWSESSIONPARAM': {
+        if (!dataName) {
+          throw new RuntimeModelError(this.model, '没有配置数据对象名称');
+        }
+        this.bindViewData(this.panel.view, dataName);
+        break;
+      }
+      default:
+        throw new ModelError(this.model, `数据源类型${dataSourceType}暂未支持`);
+    }
+  }
+
+  /**
+   * 面板状态变更通知
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:07
+   */
+  childrenStateNotify(state: PanelNotifyState): void {
+    Object.values(this.panelItems).forEach(panelItem => {
+      panelItem.panelStateNotify(state);
+    });
+  }
+
+  /**
+   * 设置数据
+   * @author lxm
+   * @date 2023-09-05 05:42:09
+   * @param {IData[]} items
+   */
+  async setData(data: IData): Promise<void> {
+    const fields = getAllPanelField(this.model);
+    const fieldKeys = fields.map(item => item.id!);
+    const panelData = new PanelData(fields, data);
+
+    // 面板属性变更的触发变更通知
+    panelData._evt.on('change', key => {
+      if (fieldKeys.includes(key)) {
+        this.childDataChangeNotify([key]);
+      }
+    });
+    // 清空上一个，如果存在的话。
+    this.data.destroy?.();
+    this.state.data = panelData;
+    this.childrenStateNotify(PanelNotifyState.LOAD);
+  }
+
+  /**
+   * 通过实体设置视图逻辑
+   * @author lxm
+   * @date 2023-08-04 03:00:31
+   * @protected
+   * @return {*}  {Promise<void>}
+   */
+  protected async setDataByDeLogic(): Promise<void> {
+    const { appDataEntityId, appDELogicId } = this.model;
+    if (!appDELogicId) {
+      throw new RuntimeModelError(this.model, '没有配置实体逻辑');
+    }
+    if (!appDataEntityId) {
+      throw new RuntimeModelError(this.model, '没有配置实体');
+    }
+
+    const data = await execDELogicById(
+      appDELogicId,
+      appDataEntityId,
+      this.panel.context,
+      [],
+      this.panel.params,
+    );
+
+    if (!data) {
+      throw new RuntimeError(`实体逻辑${appDELogicId}没有返回值`);
+    }
+
+    this.setData(data as IData);
+  }
+
+  /**
+   * 设置全局变量为当前容器数据
+   * @author lxm
+   * @date 2023-08-04 01:55:07
+   * @protected
+   */
+  protected setDataByAppGlobalParam(): void {
+    const { dataName } = this.model;
+    const originData = dataName ? ibiz.appData![dataName] : ibiz.appData!;
+    if (originData) {
+      this.setData(originData as IData);
+    } else {
+      ibiz.log.error(`全局变量里没有${dataName}属性`);
+    }
+  }
+
+  /**
+   * 请求实体行为并把返回值设置为当前容器的数据
+   * @author lxm
+   * @date 2023-08-04 11:47:17
+   * @protected
+   * @return {*}  {Promise<void>}
+   */
+  protected async setDataByDeMethod(): Promise<void> {
+    const { appDEMethodId, appDataEntityId } = this.model;
+    if (!appDEMethodId) {
+      throw new RuntimeModelError(this.model, '没有配置实体行为');
+    }
+    if (!appDataEntityId) {
+      throw new RuntimeModelError(this.model, '没有配置实体');
+    }
+    const app = ibiz.hub.getApp(this.panel.context.srfappid);
+    const res = await app.deService.exec(
+      appDataEntityId,
+      appDEMethodId,
+      this.panel.context,
+      [],
+      this.panel.params,
+    );
+    if (res.ok && res.data) {
+      this.setData(res.data as IData);
+    }
+  }
+
+  /**
+   * 绑定指定视图会话的变量
+   * @author lxm
+   * @date 2023-07-14 02:03:56
+   * @protected
+   * @param {IViewController} view 绑定视图控制器
+   * @param {string} dataName 变量名称
+   */
+  protected bindViewData(view: IViewController, dataName: string): void {
+    if (!Object.prototype.hasOwnProperty.call(view.state, dataName)) {
+      ibiz.log.error(`绑定视图的会话不存在${dataName}`);
+      return;
+    }
+    const updateData = (): void => {
+      const originData = (view.state as IData)[dataName] as IData;
+      if (originData) {
+        this.setData(originData);
+      } else {
+        ibiz.log.error(`视图state里没有${dataName}属性`);
+      }
+    };
+    updateData(); // 先绑定一次
+
+    // 每次视图数据变更之后更新一下
+    view.evt.on('onDataChange', () => {
+      updateData();
+    });
+  }
+
+  /**
+   * 通知所有子面板成员面板操作过程中的数据变更
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:40
+   * @param {string[]} names
+   */
+  childDataChangeNotify(names: string[]): void {
+    Object.values(this.panelItems).forEach(panelItem => {
+      panelItem.dataChangeNotify(names);
+    });
+  }
+
+  /**
+   * 设置面板数据的值
+   *
+   * @param {string} name 要设置的数据的属性名称
+   * @param {unknown} value 要设置的值
+   */
+  async setDataValue(name: string, value: unknown): Promise<void> {
+    if (
+      Object.prototype.hasOwnProperty.call(this.state.data, name) &&
+      this.state.data[name] === value
+    ) {
+      // *`面板里没有属性${name}或者${name}的值未发生改变`
+      return;
+    }
+
+    // 改变值
+    this.state.data[name] = value;
+  }
+
+  destroy(): void {
+    super.destroy();
+    this.data.destroy?.();
+    Object.values(this.panelItems).forEach(item => {
+      item.destroy();
+    });
+  }
+}

package/src/panel-component/single-data-container/single-data-container.provider.ts

@@ -0,0 +1,30 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { SingleDataContainerController } from './single-data-container.controller';
+
+/**
+ * 单项数据容器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class SingleDataContainerProvider
+ * @implements {EditorProvider}
+ */
+export class SingleDataContainerProvider implements IPanelItemProvider {
+  component: string = 'IBizSingleDataContainer';
+
+  async createController(
+    panelItem: IPanelContainer,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelItemController> {
+    const c = new SingleDataContainerController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

package/src/panel-component/single-data-container/single-data-container.scss

@@ -0,0 +1,10 @@
+$single-data-container: (
+);
+
+// 默认样式
+@include b(single-data-container) {
+  @include set-component-css-var('single-data-container', $single-data-container);
+
+  width: 100%;
+  height: 100%;
+}

package/src/panel-component/single-data-container/single-data-container.state.ts

@@ -0,0 +1,20 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+/**
+ * 单项数据容器状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:27
+ * @export
+ * @class SingleDataContainerState
+ * @extends {PanelItemState}
+ */
+export class SingleDataContainerState extends PanelItemState {
+  /**
+   * 单项数据容器数据
+   * @author lxm
+   * @date 2023-07-14 12:07:45
+   * @type {(IData | IData[])}
+   */
+  data: IData = {};
+}

package/src/panel-component/single-data-container/single-data-container.tsx

@@ -0,0 +1,95 @@
+import {
+  IPanelItemProvider,
+  IPanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelContainer, IPanelItem } from '@ibiz/model-core';
+import {
+  computed,
+  defineComponent,
+  inject,
+  PropType,
+  reactive,
+  VNode,
+} from 'vue';
+import { useNamespace } from '../../use';
+import { SingleDataContainerController } from './single-data-container.controller';
+import './single-data-container.scss';
+
+export const SingleDataContainer = defineComponent({
+  name: 'IBizSingleDataContainer',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    controller: {
+      type: SingleDataContainerController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('single-data-container');
+    const { id } = props.modelData;
+
+    // 面板成员state响应式
+    const keys = Object.keys(props.controller.panelItems);
+    keys.forEach(key => {
+      const panelItem = props.controller.panelItems[key];
+      panelItem.state = reactive(panelItem.state);
+    });
+
+    // 获取上层的绘制函数
+    const renderPanelItem = inject<
+      (
+        panelItem: IPanelItem,
+        options?: {
+          providers: {
+            [key: string]: IPanelItemProvider;
+          };
+          panelItems: {
+            [key: string]: IPanelItemController;
+          };
+        },
+      ) => VNode | null
+    >('renderPanelItem')!;
+
+    // 类名控制
+    const classArr = computed(() => {
+      const result: Array<string | false> = [
+        ns.b(),
+        ns.m(id),
+        ...props.controller.containerClass,
+      ];
+      return result;
+    });
+
+    return { ns, classArr, renderPanelItem };
+  },
+  render() {
+    let content: VNode | VNode[];
+    if (this.$slots.default) {
+      content = this.$slots.default();
+    } else {
+      // 内容区默认插槽处理，封装app-col
+      content = (
+        <iBizRow class={this.ns.b('content')} layout={this.modelData.layout}>
+          {this.modelData.panelItems?.map(panelItem => {
+            const childController = this.controller.panelItems[panelItem.id!];
+            return (
+              <iBizCol
+                layoutPos={panelItem.layoutPos}
+                state={childController.state}
+              >
+                {this.renderPanelItem(panelItem, {
+                  providers: this.controller.providers,
+                  panelItems: this.controller.panelItems,
+                })}
+              </iBizCol>
+            );
+          })}
+        </iBizRow>
+      );
+    }
+    return <div class={this.classArr}>{content}</div>;
+  },
+});

package/src/props/editor/span.ts

@@ -10,7 +10,7 @@ import { getEditorProps, getGridEditorCommonProps } from './common';
  * @returns {*}
  */
 export function getSpanProps<C>() {
-  return { ...getEditorProps<C>(), value: [String, Number] };
+  return { ...getEditorProps<C>(), value: [String, Number, Object, Array] };
 }
 
 /**

package/src/util/index.ts

@@ -3,3 +3,8 @@ export * from './route/route-listener';
 export * from './install';
 export * from './control/prepare-control';
 export * from './render/render';
+export { OverlayContainer } from './overlay-container/overlay-container';
+export { OverlayPopoverContainer } from './overlay-popover-container/overlay-popover-container';
+export * from './overlay-view-util/overlay-view-util';
+export { routerCallback } from './router-callback/router-callback';
+export * from './store';

package/src/util/overlay-container/overlay-container.ts

@@ -0,0 +1,155 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { QXEvent } from 'qx-util';
+import { IOverlayContainer } from '@ibiz-template/runtime';
+import { App, Component, h, VNode } from 'vue';
+import { RuntimeError } from '@ibiz-template/core';
+
+/**
+ * 全局弹出承载组件
+ *
+ * @author chitanda
+ * @date 2022-11-09 12:11:09
+ * @export
+ * @class OverlayContainer
+ */
+export class OverlayContainer<O> implements IOverlayContainer {
+  protected vm?: App;
+
+  /**
+   * 具体模态组件
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:34
+   * @protected
+   * @type {*}
+   */
+  protected modal: any;
+
+  /**
+   * 外面调用dismiss时传的result结果
+   *
+   * @author lxm
+   * @date 2022-11-09 20:11:06
+   * @protected
+   * @type {unknown}
+   */
+  protected result?: unknown;
+
+  /**
+   * 内部事件
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:42
+   * @protected
+   */
+  protected evt: QXEvent<{ dismiss: (data?: unknown) => void }> = new QXEvent();
+
+  /**
+   * 创建全局呈现
+   *
+   * @author chitanda
+   * @date 2022-11-09 14:11:52
+   * @param {unknown} component
+   * @param {(h: CreateElement) => VNode} render
+   * @param {IPopoverOptions} [opts]
+   */
+  constructor(
+    protected component: unknown,
+    protected render: (...args: any[]) => VNode,
+    protected opts?: O,
+  ) {
+    this.init();
+  }
+
+  static createVueApp(
+    _rootComponent: Component,
+    _rootProps?: IData,
+  ): App<Element> {
+    throw new RuntimeError('没有注入createVueApp方法');
+  }
+
+  /**
+   * 初始化飘窗
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:55
+   * @protected
+   * @return {*}  {void}
+   */
+  protected init(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    const { render, opts } = this;
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const vm = OverlayContainer.createVueApp({
+      mounted() {
+        self.modal = this.$refs.root;
+      },
+      unmounted() {
+        document.body.removeChild(container);
+        self.evt.emit('dismiss', self.result);
+      },
+      render() {
+        return h(
+          self.component as string,
+          {
+            ref: 'root',
+            opts,
+            onDismiss(data: IData) {
+              self.result = data;
+              vm.unmount();
+            },
+          },
+          { default: render },
+        );
+      },
+    });
+    ibiz.plugin.register(vm);
+    vm.mount(container);
+    this.vm = vm;
+  }
+
+  /**
+   * 打开飘窗
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:52
+   * @param {HTMLElement} target
+   * @return {*}  {Promise<void>}
+   */
+  async present(): Promise<void> {
+    return this.modal.present();
+  }
+
+  /**
+   * 手动调用关闭飘窗
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:39
+   * @param {unknown} [data]
+   * @return {*}  {Promise<void>}
+   */
+  async dismiss(data?: unknown): Promise<void> {
+    this.modal.dismiss(data);
+  }
+
+  /**
+   * 订阅窗口关闭
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:20
+   * @template T
+   * @return {*}  {Promise<T>}
+   */
+  async onWillDismiss<T = unknown>(): Promise<T> {
+    return new Promise<T>(resolve => {
+      const callback = (data: unknown) => {
+        resolve(data as T);
+        this.evt.off('dismiss', callback);
+      };
+      this.evt.on('dismiss', callback);
+    });
+  }
+}

package/src/util/overlay-popover-container/overlay-popover-container.ts

@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-dupe-class-members */
+import {
+  IPopoverOptions,
+  IOverlayPopoverContainer,
+} from '@ibiz-template/runtime';
+import { OverlayContainer } from '../overlay-container/overlay-container';
+
+/**
+ * 飘窗组件呈现容器
+ *
+ * @author chitanda
+ * @date 2022-11-09 14:11:46
+ * @export
+ * @class OverlayPopoverContainer
+ * @extends {OverlayContainer<IPopoverOptions>}
+ * @implements {IOverlayPopoverContainer}
+ */
+export class OverlayPopoverContainer
+  extends OverlayContainer<IPopoverOptions>
+  implements IOverlayPopoverContainer
+{
+  present(): Promise<void>;
+
+  present(target: HTMLElement): Promise<void>;
+
+  present(target?: HTMLElement): Promise<void> {
+    return this.modal.present(target);
+  }
+}