@ibiz-template/vue3-components 0.0.1-alpha.1 → 0.0.1-alpha.3

package/lib/control/form/form/form.controller.d.ts

@@ -0,0 +1,129 @@
+import { ControlController, ControllerEvent, ControlVO, FormNotifyState, IFormController, IFormDetailProvider, IFormEvent } from '@ibiz-template/runtime';
+import { IDEForm, IDEFormDetail } from '@ibiz/model-core';
+import { FormDetailController } from '../form-detail/form-detail/form-detail';
+import { FormGroupPanelController } from '../form-detail/form-group-panel/form-group-panel.controller';
+import { FormItemController } from '../form-detail/form-item/form-item.controller';
+import { FormState } from './form-state';
+/**
+ * 表单控制器
+ *
+ * @author chitanda
+ * @date 2022-08-03 11:08:29
+ * @export
+ * @class FormController
+ * @extends {ControlController<T>}
+ * @template T
+ */
+export declare abstract class FormController<T extends IDEForm = IDEForm> extends ControlController<T> implements IFormController {
+    evt: ControllerEvent<IFormEvent>;
+    state: FormState;
+    /**
+     * 所有表单项成员的控制器
+     *
+     * @author lxm
+     * @date 2022-08-24 20:08:07
+     * @type {{ [key: string]: FormDetailController }}
+     */
+    details: {
+        [key: string]: FormDetailController;
+    };
+    /**
+     * 所有表单项成员的适配器
+     *
+     * @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 {ControlVO}
+     */
+    get data(): ControlVO;
+    /**
+     * 通知所有表单成员表单操作过程中的数据变更
+     *
+     * @author lxm
+     * @date 2022-09-20 18:09:40
+     * @param {string[]} names
+     */
+    dataChangeNotify(names: string[]): Promise<void>;
+    /**
+     * 表单状态变更通知
+     *
+     * @author lxm
+     * @date 2022-09-20 18:09:07
+     */
+    formStateNotify(state: FormNotifyState): void;
+    /**
+     * 初始化
+     *
+     * @author lxm
+     * @date 2022-08-24 20:08:59
+     * @protected
+     * @returns {*}  {Promise<void>}
+     */
+    protected doCreated(): Promise<void>;
+    /**
+     * 获取加载草稿额外参数，新建默认值
+     * @author lxm
+     * @date 2023-04-27 10:32:06
+     * @return {*}
+     */
+    getDraftParams(): Promise<IParams>;
+    /**
+     * 初始化表单成员控制器
+     *
+     * @author lxm
+     * @date 2022-08-24 21:08:48
+     * @protected
+     */
+    protected initDetailControllers(details?: IDEFormDetail[], form?: FormController, parent?: FormGroupPanelController | undefined): Promise<void>;
+    /**
+     * 加载
+     *
+     * @author lxm
+     * @date 2022-09-22 17:09:04
+     * @returns {*}  {Promise<IDatum>}
+     */
+    abstract load(): Promise<IDatum>;
+    /**
+     * 获取表单数据
+     *
+     * @author lxm
+     * @date 2022-08-30 19:08:11
+     * @returns {*}
+     */
+    getData(): IDatum[];
+    /**
+     * 设置表单数据的值
+     *
+     * @author lxm
+     * @date 2022-08-24 10:08:40
+     * @param {string} name 要设置的表单数据的属性名称
+     * @param {unknown} value 要设置的值
+     */
+    setDataValue(name: string, value: unknown): Promise<void>;
+    /**
+     * 校验表单的全部表单项
+     *
+     * @author lxm
+     * @date 2022-09-05 00:09:53
+     * @returns {*}  {Promise<boolean>}
+     */
+    validate(): Promise<boolean>;
+}

package/lib/control/form/form/form.controller.js

@@ -0,0 +1,199 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@ibiz-template/core");
+const runtime = require("@ibiz-template/runtime");
+const lodashEs = require("lodash-es");
+const formState = require("./form-state");
+class FormController extends runtime.ControlController {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", new formState.FormState());
+    /**
+     * 所有表单项成员的控制器
+     *
+     * @author lxm
+     * @date 2022-08-24 20:08:07
+     * @type {{ [key: string]: FormDetailController }}
+     */
+    __publicField(this, "details", {});
+    /**
+     * 所有表单项成员的适配器
+     *
+     * @author lxm
+     * @date 2022-08-24 20:08:07
+     * @type {{ [key: string]: IFormDetailProvider }}
+     */
+    __publicField(this, "providers", {});
+    /**
+     * 表单项控制器的集合
+     *
+     * @author lxm
+     * @date 2022-09-05 00:09:52
+     * @type {FormItemController[]}
+     */
+    __publicField(this, "formItems", []);
+  }
+  /**
+   * 表单数据
+   *
+   * @author chitanda
+   * @date 2023-01-04 10:01:46
+   * @readonly
+   * @type {ControlVO}
+   */
+  get data() {
+    return this.state.data;
+  }
+  /**
+   * 通知所有表单成员表单操作过程中的数据变更
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:40
+   * @param {string[]} names
+   */
+  async dataChangeNotify(names) {
+    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 core.RuntimeError("数据变更后有错误");
+    }
+  }
+  /**
+   * 表单状态变更通知
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:07
+   */
+  formStateNotify(state) {
+    Object.values(this.details).forEach((detail) => {
+      detail.formStateNotify(state);
+    });
+  }
+  /**
+   * 初始化
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:59
+   * @protected
+   * @returns {*}  {Promise<void>}
+   */
+  async doCreated() {
+    await super.doCreated();
+    await this.initDetailControllers();
+    this.details = { ...this.details };
+    this.providers = { ...this.providers };
+    this.dataChangeNotify = core.debounceAndAsyncMerge(
+      this.dataChangeNotify.bind(this),
+      (arr1, arr2) => {
+        return [Array.from(/* @__PURE__ */ new Set([...arr1[0], ...arr2[0]]))];
+      },
+      200
+    );
+  }
+  /**
+   * 获取加载草稿额外参数，新建默认值
+   * @author lxm
+   * @date 2023-04-27 10:32:06
+   * @return {*}
+   */
+  async getDraftParams() {
+    await Promise.all(this.formItems.map((item) => item.setDefaultValue(true)));
+    const result = {};
+    Object.keys(this.data).forEach((key) => {
+      if (!lodashEs.isNil(this.data[key])) {
+        result[key] = this.data[key];
+      }
+    });
+    return result;
+  }
+  /**
+   * 初始化表单成员控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 21:08:48
+   * @protected
+   */
+  async initDetailControllers(details = this.model.deformPages, form = this, parent = void 0) {
+    await Promise.all(
+      details.map(async (detail) => {
+        var _a;
+        const detailProvider = await runtime.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") {
+          form.formItems.push(detailController);
+        }
+        if ((_a = detail.deformDetails) == null ? void 0 : _a.length) {
+          await this.initDetailControllers(
+            detail.deformDetails,
+            form,
+            detailController
+          );
+        }
+      })
+    );
+  }
+  /**
+   * 获取表单数据
+   *
+   * @author lxm
+   * @date 2022-08-30 19:08:11
+   * @returns {*}
+   */
+  getData() {
+    return [this.state.data];
+  }
+  /**
+   * 设置表单数据的值
+   *
+   * @author lxm
+   * @date 2022-08-24 10:08:40
+   * @param {string} name 要设置的表单数据的属性名称
+   * @param {unknown} value 要设置的值
+   */
+  async setDataValue(name, value) {
+    if (Object.prototype.hasOwnProperty.call(this.state.data, name) && this.state.data[name] === value) {
+      return;
+    }
+    this.state.data[name] = value;
+    this.state.processing = true;
+    try {
+      await this.dataChangeNotify([name]);
+    } finally {
+      this.state.processing = false;
+    }
+    this.force();
+  }
+  /**
+   * 校验表单的全部表单项
+   *
+   * @author lxm
+   * @date 2022-09-05 00:09:53
+   * @returns {*}  {Promise<boolean>}
+   */
+  async validate() {
+    const values = await Promise.all(
+      this.formItems.map((formItem) => formItem.validate())
+    );
+    return values.findIndex((value) => !value) === -1;
+  }
+}
+exports.FormController = FormController;

package/lib/control/form/form/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue3Util = require("@ibiz-template/vue3-util");
+const runtime = require("@ibiz-template/runtime");
+const formItemProvider = require("../form-detail/form-item/form-item-provider");
+const IBizSearchForm = require("../search-form");
+const formControl = require("./form-control");
+const FormPage = require("../form-detail/form-page/form-page");
+const formPageItem = require("../form-detail/form-page/form-page-item");
+const formPageProvider = require("../form-detail/form-page/form-page-provider");
+const formItemContainer = require("../form-detail/form-item/form-item-container/form-item-container");
+const formDetail = require("../form-detail");
+const formState = require("./form-state");
+const form_controller = require("./form.controller");
+const IBizForm = vue3Util.withInstall(formControl.FormControl, function(v) {
+  v.component(formControl.FormControl.name, formControl.FormControl);
+  v.component(FormPage.name, FormPage);
+  v.component(formPageItem.FormPageItem.name, formPageItem.FormPageItem);
+  v.component(formItemContainer.FormItemContainer.name, formItemContainer.FormItemContainer);
+  v.component(formDetail.FormItem.name, formDetail.FormItem);
+  runtime.registerFormDetailProvider("FORMITEM", () => new formItemProvider.FormItemProvider());
+  runtime.registerFormDetailProvider("FORMPAGE", () => new formPageProvider.FormPageProvider());
+});
+exports.default = IBizSearchForm;
+exports.IBizForm = IBizForm;
+Object.keys(formControl).forEach((k) => {
+  if (k !== "default" && !exports.hasOwnProperty(k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => formControl[k]
+    });
+});
+Object.keys(formState).forEach((k) => {
+  if (k !== "default" && !exports.hasOwnProperty(k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => formState[k]
+    });
+});
+Object.keys(form_controller).forEach((k) => {
+  if (k !== "default" && !exports.hasOwnProperty(k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => form_controller[k]
+    });
+});

package/lib/control/form/form-detail/form-detail/form-detail-state.d.ts

@@ -0,0 +1,55 @@
+import { ILayoutController } from '@ibiz-template/runtime';
+import { FormGroupPanelState } from '../form-group-panel/form-group-panel-state';
+/**
+ * 表单项状态
+ *
+ * @author chitanda
+ * @date 2023-01-04 09:01:02
+ * @export
+ * @class FormDetailState
+ */
+export declare class FormDetailState {
+    protected parent?: FormGroupPanelState | undefined;
+    /**
+     * 是否显示
+     *
+     * @author lxm
+     * @date 2023-02-08 03:59:47
+     * @type {boolean}
+     * @memberof FormDetailState
+     */
+    visible: boolean;
+    /**
+     * 是否必填
+     *
+     * @author chitanda
+     * @date 2023-01-04 10:01:27
+     * @type {boolean}
+     */
+    required: boolean;
+    /**
+     * 是否禁用
+     *
+     * @author lxm
+     * @date 2023-02-08 03:51:09
+     * @type {boolean}
+     * @memberof FormDetailState
+     */
+    disabled: boolean;
+    /**
+     * 布局
+     *
+     * @author chitanda
+     * @date 2023-01-04 10:01:15
+     * @type {ILayoutController}
+     */
+    layoutController: ILayoutController;
+    /**
+     * 显示更多模式 {0：无、 1：受控内容、 2：管理容器}
+     * @author lxm
+     * @date 2023-03-17 02:16:43
+     * @type {(0 | 1 | 2)}
+     */
+    showMoreMode: 0 | 1 | 2 | number;
+    constructor(parent?: FormGroupPanelState | undefined);
+}

package/lib/control/form/form-detail/form-detail/form-detail-state.js

@@ -0,0 +1,72 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class FormDetailState {
+  constructor(parent) {
+    /**
+     * 是否必填
+     *
+     * @author chitanda
+     * @date 2023-01-04 10:01:27
+     * @type {boolean}
+     */
+    __publicField(this, "required", false);
+    /**
+     * 是否禁用
+     *
+     * @author lxm
+     * @date 2023-02-08 03:51:09
+     * @type {boolean}
+     * @memberof FormDetailState
+     */
+    __publicField(this, "disabled", false);
+    /**
+     * 布局
+     *
+     * @author chitanda
+     * @date 2023-01-04 10:01:15
+     * @type {ILayoutController}
+     */
+    __publicField(this, "layoutController", {
+      width: "",
+      height: "",
+      extraStyle: {},
+      extraClass: "",
+      contentStyle: {}
+    });
+    /**
+     * 显示更多模式 {0：无、 1：受控内容、 2：管理容器}
+     * @author lxm
+     * @date 2023-03-17 02:16:43
+     * @type {(0 | 1 | 2)}
+     */
+    __publicField(this, "showMoreMode", 0);
+    this.parent = parent;
+    let $visible = true;
+    Object.defineProperty(this, "visible", {
+      enumerable: true,
+      configurable: true,
+      get() {
+        if (this.parent) {
+          if (this.parent.visible === false) {
+            return false;
+          }
+          if (this.showMoreMode === 1 && this.parent.isShowMore === false) {
+            return false;
+          }
+        }
+        return $visible;
+      },
+      set(val) {
+        $visible = val;
+        return true;
+      }
+    });
+  }
+}
+exports.FormDetailState = FormDetailState;

package/lib/control/form/form-detail/form-detail/form-detail.d.ts

@@ -0,0 +1,106 @@
+import { FormNotifyState } from '@ibiz-template/runtime';
+import { IDEFormDetail } from '@ibiz/model-core';
+import { FormController } from '../../form/form.controller';
+import { FormGroupPanelController } from '../form-group-panel/form-group-panel.controller';
+import { FormDetailState } from './form-detail-state';
+export declare class FormDetailController<T extends IDEFormDetail = IDEFormDetail> {
+    /**
+     * 表单成员模型
+     *
+     * @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?: FormGroupPanelController;
+    /**
+     * 表单数据
+     *
+     * @author lxm
+     * @date 2022-09-01 22:09:48
+     * @readonly
+     */
+    get data(): import("@ibiz-template/runtime").ControlVO;
+    /**
+     * Creates an instance of FormDetailController.
+     * @author lxm
+     * @date 2022-08-24 20:08:22
+     * @param {T} model
+     */
+    constructor(model: T, form: FormController, parent?: FormGroupPanelController);
+    /**
+     * 子类不可覆盖或重写此方法，在 init 时需要重写的使用 onInit 方法。
+     *
+     * @author lxm
+     * @date 2022-08-18 22:08:30
+     * @returns {*}  {Promise<void>}
+     */
+    init(): Promise<void>;
+    protected onInit(): Promise<void>;
+    /**
+     * 创建表单状态对象
+     *
+     * @author chitanda
+     * @date 2023-01-04 10:01:00
+     * @protected
+     * @return {*}  {FormDetailState}
+     */
+    protected createState(): FormDetailState;
+    /**
+     * 表单数据变更通知(由表单控制器调用)
+     *
+     * @author lxm
+     * @date 2022-09-20 18:09:56
+     * @param {string[]} names
+     */
+    dataChangeNotify(names: string[]): Promise<void>;
+    /**
+     * 表单状态变更通知
+     *
+     * @author lxm
+     * @date 2022-09-20 18:09:07
+     */
+    formStateNotify(state: FormNotifyState): Promise<void>;
+    /**
+     * 计算动态逻辑
+     *
+     * @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;
+    /**
+     * 强制更新视图
+     *
+     * @author lxm
+     * @date 2022-09-15 09:09:05
+     * @param {() => void} [_callback] 更新之后，组件渲染完成后的回调
+     */
+    force(_callback?: () => void): void;
+}