@ibiz-template/runtime 0.1.10 → 0.1.12-dev.0

package/src/controller/control/form/form/form.controller.ts

@@ -0,0 +1,271 @@
+/* eslint-disable no-param-reassign */
+import { RuntimeError, debounceAndAsyncMerge } from '@ibiz-template/core';
+import { IDEForm, IDEFormDetail } from '@ibiz/model-core';
+import {
+  IFormState,
+  IFormEvent,
+  IFormController,
+  IFormDetailController,
+  IFormDetailProvider,
+} from '../../../../interface';
+import { findChildFormDetails } from '../../../../model';
+import { getFormDetailProvider } from '../../../../register';
+import { ControlVO } from '../../../../service';
+import { ControlController } from '../../../common';
+import { FormNotifyState } from '../../../constant';
+import { ControllerEvent, isValueChange } from '../../../utils';
+import type {
+  FormGroupPanelController,
+  FormItemController,
+} from '../form-detail';
+
+/**
+ * 表单控制器
+ *
+ * @author chitanda
+ * @date 2022-08-03 11:08:29
+ * @export
+ * @class FormController
+ * @extends {ControlController<T>}
+ * @template T
+ */
+export abstract class FormController<
+    T extends IDEForm = IDEForm,
+    S extends IFormState = IFormState,
+    E extends IFormEvent = IFormEvent,
+  >
+  extends ControlController<T, S, E>
+  implements IFormController<T, S, E>
+{
+  protected get _evt(): ControllerEvent<IFormEvent> {
+    return this.evt;
+  }
+
+  /**
+   * 所有表单项成员的控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:07
+   * @type {{ [key: string]: IFormDetailController }}
+   */
+  details: { [key: string]: IFormDetailController } = {};
+
+  /**
+   * 所有表单项成员的适配器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:07
+   * @type {{ [key: string]: IFormDetailProvider }}
+   */
+  providers: { [key: string]: IFormDetailProvider } = {};
+
+  /**
+   * 表单项控制器的集合
+   *
+   * @author lxm
+   * @date 2022-09-05 00:09:52
+   * @type {FormItemController[]}
+   */
+  formItems: FormItemController[] = [];
+
+  /**
+   * 表单数据
+   *
+   * @author chitanda
+   * @date 2023-01-04 10:01:46
+   * @readonly
+   * @type {IData}
+   */
+  get data(): IData {
+    return this.state.data;
+  }
+
+  protected initState(): void {
+    super.initState();
+    this.state.data = new ControlVO();
+    this.state.isLoaded = false;
+    this.state.processing = false;
+    this.state.modified = false;
+  }
+
+  /**
+   * 通知所有表单成员表单操作过程中的数据变更
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:40
+   * @param {string[]} names
+   */
+  async dataChangeNotify(names: string[]): Promise<void> {
+    // 通知所有成员项去处理成员项相关逻辑
+    const values = await Promise.allSettled(
+      Object.values(this.details).map(async detail => {
+        return detail.dataChangeNotify(names);
+      }),
+    );
+    if (values.find(item => item.status === 'rejected')) {
+      ibiz.log.error('dataChangeNotify报错', values);
+      throw new RuntimeError('数据变更后有错误');
+    }
+  }
+
+  /**
+   * 表单状态变更通知
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:07
+   */
+  formStateNotify(state: FormNotifyState): void {
+    Object.values(this.details).forEach(detail => {
+      detail.formStateNotify(state);
+    });
+  }
+
+  /**
+   * 初始化
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:59
+   * @protected
+   * @returns {*}  {Promise<void>}
+   */
+  protected async onCreated(): Promise<void> {
+    await super.onCreated();
+    await this.initDetailControllers();
+
+    // 数据变更通知防抖，且合并参数
+    this.dataChangeNotify = debounceAndAsyncMerge(
+      this.dataChangeNotify.bind(this),
+      (arr1, arr2): [string[]] => {
+        return [Array.from(new Set([...arr1[0], ...arr2[0]]))];
+      },
+      200,
+    );
+  }
+
+  /**
+   * 获取加载草稿额外参数，新建默认值
+   * @author lxm
+   * @date 2023-04-27 10:32:06
+   * @return {*}
+   */
+  async getDraftParams(): Promise<IData> {
+    const result: IData = {};
+    await Promise.all(
+      this.formItems.map(item => item.setDefaultValue(true, result)),
+    );
+    return result;
+  }
+
+  /**
+   * 初始化表单成员控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 21:08:48
+   * @protected
+   */
+  protected async initDetailControllers(
+    details: IDEFormDetail[] = this.model.deformPages!,
+    form: FormController = this,
+    parent: FormGroupPanelController | undefined = undefined,
+  ): Promise<void> {
+    await Promise.all(
+      details.map(async detail => {
+        // 生成表单成员控制器
+        const detailProvider = await getFormDetailProvider(detail);
+        if (!detailProvider) {
+          return;
+        }
+        form.providers[detail.id!] = detailProvider;
+        const detailController = await detailProvider.createController(
+          detail,
+          form,
+          parent,
+        );
+        form.details[detail.id!] = detailController;
+        if (
+          detail.detailType === 'FORMITEM' ||
+          detail.detailType === 'MDCTRL'
+        ) {
+          form.formItems.push(detailController as FormItemController);
+        }
+        // 有子成员的生成子控制器
+        const childDetails = findChildFormDetails(detail);
+        if (childDetails.length) {
+          await this.initDetailControllers(
+            childDetails,
+            form,
+            detailController as FormGroupPanelController,
+          );
+        }
+      }),
+    );
+  }
+
+  /**
+   * 加载
+   *
+   * @author lxm
+   * @date 2022-09-22 17:09:04
+   * @returns {*}  {Promise<IData>}
+   */
+  abstract load(): Promise<IData>;
+
+  /**
+   * 获取表单数据
+   *
+   * @author lxm
+   * @date 2022-08-30 19:08:11
+   * @returns {*}
+   */
+  getData(): IData[] {
+    return [this.state.data];
+  }
+
+  /**
+   * 设置表单数据的值
+   *
+   * @author lxm
+   * @date 2022-08-24 10:08:40
+   * @param {string} name 要设置的表单数据的属性名称
+   * @param {unknown} value 要设置的值
+   */
+  async setDataValue(name: string, value: unknown): Promise<void> {
+    if (
+      Object.prototype.hasOwnProperty.call(this.state.data, name) &&
+      !isValueChange(this.state.data[name], value)
+    ) {
+      // *`表单里没有属性${name}或者${name}的值未发生改变`
+      return;
+    }
+
+    // 改变值
+    this.state.data[name] = value;
+
+    // 设置正在处理状态
+    this.state.processing = true;
+    this.state.modified = true;
+
+    await this._evt.emit('onFormDataChange', undefined);
+    try {
+      await this.dataChangeNotify([name]);
+    } finally {
+      this.state.processing = false;
+    }
+  }
+
+  /**
+   * 校验表单的全部表单项
+   *
+   * @author lxm
+   * @date 2022-09-05 00:09:53
+   * @returns {*}  {Promise<boolean>}
+   */
+  async validate(): Promise<boolean> {
+    const values = await Promise.all(
+      this.formItems.map(formItem => formItem.validate()),
+    );
+
+    // 找不到value为false即全部是true
+    return values.findIndex(value => !value) === -1;
+  }
+}

package/src/controller/control/form/form/index.ts

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

package/src/controller/control/form/form-detail/form-button/form-button.controller.ts

@@ -0,0 +1,88 @@
+import { IDEFormButton } from '@ibiz/model-core';
+import { UIActionUtil } from '../../../../../ui-action';
+import type { EditFormController } from '../../edit-form';
+import { FormDetailController } from '../form-detail';
+import { FormButtonState } from './form-button.state';
+
+/**
+ * 表单按钮控制器
+ *
+ * @author lxm
+ * @date 2022-09-04 15:09:52
+ * @export
+ * @class FormButtonController
+ * @extends {FormDetailController}
+ */
+export class FormButtonController extends FormDetailController<IDEFormButton> {
+  declare state: FormButtonState;
+
+  protected createState(): FormButtonState {
+    return new FormButtonState(this.parent?.state);
+  }
+
+  /**
+   * 表单数据
+   *
+   * @author lxm
+   * @date 2022-09-01 22:09:48
+   * @readonly
+   */
+  get data(): IData {
+    return this.form.data;
+  }
+
+  /**
+   * 按钮点击处理回调
+   *
+   * @author lxm
+   * @date 2022-09-28 21:09:33
+   * @param {MouseEvent} event
+   */
+  async onClick(event: MouseEvent): Promise<void> {
+    this.state.loading = true;
+    try {
+      if (this.model.actionType === 'UIACTION') {
+        await this.doUIAction(event);
+      }
+      await this.doFormItemUpdate();
+    } finally {
+      this.state.loading = false;
+    }
+  }
+
+  /**
+   * 执行界面行为
+   *
+   * @author lxm
+   * @date 2022-10-19 22:10:20
+   * @param {MouseEvent} event
+   * @returns {*}  {Promise<void>}
+   */
+  async doUIAction(event: MouseEvent): Promise<void> {
+    const actionId = this.model.uiactionId;
+    await UIActionUtil.execAndResolved(actionId!, {
+      context: this.form.context,
+      params: this.form.params,
+      data: [this.data],
+      view: this.form.view,
+      event,
+      noWaitRoute: true,
+    });
+  }
+
+  /**
+   * 执行表单项更新
+   *
+   * @author lxm
+   * @date 2022-10-19 22:10:22
+   * @returns {*}  {Promise<void>}
+   */
+  async doFormItemUpdate(): Promise<void> {
+    if (!this.model.deformItemUpdateId) {
+      return;
+    }
+    await (this.form as EditFormController).updateFormItem(
+      this.model.deformItemUpdateId,
+    );
+  }
+}

package/src/controller/control/form/form-detail/form-button/form-button.state.ts

@@ -0,0 +1,17 @@
+import { FormDetailState } from '../form-detail';
+
+/**
+ * 表单按钮状态
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2023-01-04 10:26:34
+ */
+export class FormButtonState extends FormDetailState {
+  /**
+   * 加载中
+   * @author lxm
+   * @date 2023-07-21 10:11:21
+   * @type {boolean}
+   */
+  loading: boolean = false;
+}

package/src/controller/control/form/form-detail/form-button/index.ts

@@ -0,0 +1,2 @@
+export * from './form-button.controller';
+export * from './form-button.state';

package/src/controller/control/form/form-detail/form-detail/form-detail.controller.ts

@@ -0,0 +1,253 @@
+import { isOverlap } from '@ibiz-template/core';
+import { IDEFormDetail } from '@ibiz/model-core';
+import {
+  IFormDetailController,
+  IFormDetailContainerController,
+} from '../../../../../interface';
+import { calcLayoutHeightWidth, calcDynaClass } from '../../../../../model';
+import { verifyFormGroupLogic } from '../../../../../utils';
+import { FormNotifyState } from '../../../../constant';
+import { FormController } from '../../form/form.controller';
+import { FormDetailState } from './form-detail.state';
+
+export class FormDetailController<T extends IDEFormDetail = IDEFormDetail>
+  implements IFormDetailController
+{
+  /**
+   * 表单成员模型
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:19
+   * @type {T}
+   */
+  readonly model: T;
+
+  /**
+   * 表单项状态
+   *
+   * @author chitanda
+   * @date 2023-01-04 09:01:04
+   * @type {FormDetailState}
+   */
+  state: FormDetailState;
+
+  /**
+   * 表单控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 22:08:59
+   * @type {FormController}
+   */
+  readonly form: FormController;
+
+  /**
+   * 父容器控制器(除了表单分页都存在)
+   *
+   * @author lxm
+   * @date 2022-08-24 22:08:59
+   * @type {FormController}
+   */
+  readonly parent?: IFormDetailContainerController;
+
+  /**
+   * 表单数据
+   *
+   * @author lxm
+   * @date 2022-09-01 22:09:48
+   * @readonly
+   */
+  get data(): IData {
+    return this.form.data;
+  }
+
+  /**
+   * 获取容器类名集合
+   * @author lxm
+   * @date 2023-08-02 06:06:12
+   * @readonly
+   * @type {string[]}
+   */
+  get containerClass(): string[] {
+    return [...this.state.class.container, ...this.state.class.containerDyna];
+  }
+
+  /**
+   * 获取标题类名集合
+   * @author lxm
+   * @date 2023-08-02 06:16:48
+   * @readonly
+   * @type {string[]}
+   */
+  get labelClass(): string[] {
+    return [...this.state.class.label, ...this.state.class.labelDyna];
+  }
+
+  /**
+   * Creates an instance of FormDetailController.
+   * @author lxm
+   * @date 2022-08-24 20:08:22
+   * @param {T} model
+   */
+  constructor(
+    model: T,
+    form: FormController,
+    parent?: IFormDetailContainerController,
+  ) {
+    this.model = model;
+    this.form = form;
+    this.parent = parent;
+    this.state = this.createState();
+  }
+
+  /**
+   * 子类不可覆盖或重写此方法，在 init 时需要重写的使用 onInit 方法。
+   *
+   * @author lxm
+   * @date 2022-08-18 22:08:30
+   * @returns {*}  {Promise<void>}
+   */
+  async init(): Promise<void> {
+    await this.onInit();
+  }
+
+  protected async onInit(): Promise<void> {
+    this.state.showMoreMode = this.model.showMoreMode!;
+
+    // 初始化布局参数
+    const { layoutPos, sysCss, labelSysCss } = this.model;
+
+    // 初始化高宽
+    if (layoutPos) {
+      const { width, height } = calcLayoutHeightWidth(layoutPos);
+      this.state.layout.width = `${width}`;
+      this.state.layout.height = `${height}`;
+    }
+
+    if (sysCss?.cssName) {
+      this.state.class.container.push(sysCss.cssName);
+    }
+
+    if (labelSysCss?.cssName) {
+      this.state.class.label.push(labelSysCss.cssName);
+    }
+  }
+
+  /**
+   * 创建表单状态对象
+   *
+   * @author chitanda
+   * @date 2023-01-04 10:01:00
+   * @protected
+   * @return {*}  {FormDetailState}
+   */
+  protected createState(): FormDetailState {
+    return new FormDetailState(this.parent?.state);
+  }
+
+  /**
+   * 表单数据变更通知(由表单控制器调用)
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:56
+   * @param {string[]} names
+   */
+  async dataChangeNotify(names: string[]): Promise<void> {
+    // 计算动态控制逻辑
+    this.calcDynamicLogic(names);
+
+    // 计算动态样式表
+    this.calcDynaClass(this.data);
+  }
+
+  /**
+   * 表单状态变更通知
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:07
+   */
+  async formStateNotify(state: FormNotifyState): Promise<void> {
+    // 计算动态控制逻辑
+    this.calcDynamicLogic([], state);
+
+    // 计算动态样式表
+    this.calcDynaClass(this.data);
+  }
+
+  /**
+   * 计算动态逻辑
+   *
+   * @author lxm
+   * @date 2022-09-20 19:09:20
+   * @protected
+   * @param {string[]} names 变更的属性集合
+   * @param {FormNotifyState} [state] 表单通知状态
+   * @returns {*}  {void}
+   */
+  protected calcDynamicLogic(names: string[], state?: FormNotifyState): void {
+    // 逻辑优化，当父容器存在且为不显示时，不去计算自己的动态逻辑
+    if (this.parent && !this.parent.state.visible) {
+      return;
+    }
+
+    // 根据自身的动态逻辑计算
+    this.model.defdgroupLogics?.forEach(logic => {
+      const relatedNames = logic.relatedDetailNames || [];
+      // name是动态逻辑涉及到的时或state存在时
+      if (state || isOverlap(relatedNames, names)) {
+        try {
+          const ok = verifyFormGroupLogic(this.form.data, logic);
+          switch (logic.logicCat) {
+            // 动态空输入，不满足则必填
+            case 'ITEMBLANK':
+              this.state.required = !ok;
+              break;
+            // 动态启用，满足则启用
+            case 'ITEMENABLE':
+              this.state.disabled = !ok;
+              break;
+            // 动态显示，满足则显示
+            case 'PANELVISIBLE':
+              this.state.visible = ok;
+              break;
+            default:
+          }
+        } catch (error) {
+          ibiz.log.error(error);
+        }
+      }
+    });
+  }
+
+  /**
+   * 强制更新视图
+   *
+   * @author lxm
+   * @date 2022-09-15 09:09:05
+   * @param {() => void} [_callback] 更新之后，组件渲染完成后的回调
+   */
+  force(_callback?: () => void): void {
+    // 在界面数据发生变更时，会调用此方法。
+    // 可外部覆盖实例的此方法，实现自定义的数据更新逻辑。
+  }
+
+  /**
+   * 计算动态样式表
+   * @author lxm
+   * @date 2023-08-02 06:15:08
+   * @param {IData} data
+   */
+  protected calcDynaClass(data: IData): void {
+    if (this.model.dynaClass) {
+      const dynaClass = calcDynaClass(this.model.dynaClass, data);
+      if (dynaClass.length) {
+        this.state.class.containerDyna = dynaClass;
+      }
+    }
+    if (this.model.labelDynaClass) {
+      const dynaClass = calcDynaClass(this.model.labelDynaClass, data);
+      if (dynaClass.length) {
+        this.state.class.labelDyna = dynaClass;
+      }
+    }
+  }
+}