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

package/src/control/form/form-detail/form-item/form-item-state.ts

@@ -0,0 +1,48 @@
+/* eslint-disable no-setter-return */
+import { FormDetailState } from '../form-detail/form-detail-state';
+import { FormGroupPanelState } from '../form-group-panel/form-group-panel-state';
+
+/**
+ * 表单项状态
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2023-01-04 10:26:34
+ */
+export class FormItemState extends FormDetailState {
+  constructor(protected parent?: FormGroupPanelState) {
+    super(parent);
+
+    let $disabled = false;
+    Object.defineProperty(this, 'disabled', {
+      enumerable: true,
+      configurable: true,
+      get() {
+        if (this.enableCondDisabled) {
+          return true;
+        }
+        return $disabled;
+      },
+      set(val) {
+        $disabled = val;
+        return true;
+      },
+    });
+  }
+
+  /**
+   * 值规则校验错误信息
+   *
+   * @author lxm
+   * @date 2022-09-01 22:09:02
+   * @type {string}
+   */
+  error: string | null = null;
+
+  /**
+   * 启用条件的禁用状态
+   *
+   * @author lxm
+   * @date 2022-09-19 16:09:18
+   */
+  enableCondDisabled = false;
+}

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

@@ -0,0 +1,341 @@
+/* eslint-disable no-param-reassign */
+import {
+  EditorController,
+  FormNotifyState,
+  IEditorProvider,
+  Srfuf,
+} from '@ibiz-template/runtime';
+import { IDEFormItem } from '@ibiz/model-core';
+import Schema from 'async-validator';
+import { dayjs } from 'element-plus';
+import { isNilOrEmpty } from 'qx-util';
+import { FormController } from '../../form/form.controller';
+import { FormDetailController } from '../form-detail/form-detail';
+import { FormGroupPanelController } from '../form-group-panel/form-group-panel.controller';
+import { FormItemState } from './form-item-state';
+
+export class FormItemController extends FormDetailController<IDEFormItem> {
+  declare state: FormItemState;
+
+  protected createState(): FormItemState {
+    return new FormItemState(this.parent?.state);
+  }
+
+  /**
+   * 上下文
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:55
+   * @type {IContext}
+   */
+  readonly context: IContext;
+
+  /**
+   * 视图参数
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:52
+   * @type {IParams}
+   */
+  readonly params: IParams;
+
+  /**
+   * 编辑器控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:42
+   * @type {EditorController}
+   */
+  editor: EditorController | null = null;
+
+  /**
+   * 编辑器适配器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:42
+   */
+  editorProvider?: IEditorProvider;
+
+  /**
+   * 表单项校验器实例
+   *
+   * @author lxm
+   * @date 2022-09-04 18:09:56
+   * @private
+   * @type {Schema}
+   */
+  private validator!: Schema;
+
+  /**
+   * 值规则
+   *
+   * @author lxm
+   * @date 2022-09-01 22:09:49
+   * @type {IData}
+   */
+  rules: IData = [];
+
+  /**
+   * 表单项名称
+   *
+   * @author lxm
+   * @date 2022-09-04 18:09:32
+   * @readonly
+   */
+  get name() {
+    return this.model.id!;
+  }
+
+  /**
+   * 表单项对应属性的值
+   *
+   * @author lxm
+   * @date 2022-08-24 22:08:25
+   * @readonly
+   * @type {unknown}
+   */
+  get value(): unknown {
+    return this.form.data[this.name];
+  }
+
+  /**
+   * Creates an instance of FormItemController.
+   * @author lxm
+   * @date 2022-08-24 20:08:24
+   * @param {FormItemModel} model 表单项模型
+   * @param {IContext} context 上下对象
+   * @param {IParams} [params={}] 视图参数
+   */
+  constructor(
+    model: IDEFormItem,
+    form: FormController,
+    parent?: FormGroupPanelController,
+  ) {
+    super(model, form, parent);
+    this.context = form.context;
+    this.params = form.params;
+  }
+
+  /**
+   * 初始化
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:42
+   * @protected
+   * @returns {*}  {Promise<void>}
+   */
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    // 空输入默认值
+    this.state.required = !this.model.allowEmpty;
+    // 初始化编辑器控制器
+    if (this.model.editor && this.model.editor.editorType !== 'HIDDEN') {
+      this.editorProvider = await ibiz.register.editor.get(this.model.editor);
+      if (this.editorProvider) {
+        this.editor = await this.editorProvider.createController(
+          this.model.editor,
+          this,
+        );
+        await this.editor!.init();
+        await this.initRules();
+      }
+    }
+  }
+
+  /**
+   * 初始化值规则
+   *
+   * @author lxm
+   * @date 2022-09-02 09:09:27
+   * @protected
+   * @returns {*}
+   */
+  protected async initRules() {
+    // const formItemsVRs = this.form.model.formItemVRs.get(this.name);
+    // if (!formItemsVRs) {
+    //   return;
+    // }
+    // this.rules = generateRules(
+    //   formItemsVRs,
+    //   this.name,
+    //   this.model.source.valueItemName,
+    // );
+    // // 初始化async-validator实例
+    // this.validator = new Schema({ [this.name]: this.rules });
+  }
+
+  /**
+   * 计算启用条件的禁用
+   *
+   * @author lxm
+   * @date 2022-09-20 00:09:57
+   * @param {(string | FormNotifyState)} name
+   * @returns {*}
+   */
+  calcEnableCond() {
+    const { enableCond } = this.model;
+    const isNew = this.data.srfuf === Srfuf.CREATE;
+    if (enableCond === 0) {
+      this.state.enableCondDisabled = true;
+    } else if ((isNew && enableCond === 2) || (!isNew && enableCond === 1)) {
+      this.state.enableCondDisabled = true;
+    }
+  }
+
+  async dataChangeNotify(name: string[]): Promise<void> {
+    await super.dataChangeNotify(name);
+    const { resetItemNames } = this.model;
+
+    // 重置项，变更时自己的值置空
+    let isReset = false;
+    if (resetItemNames && resetItemNames.length > 0) {
+      resetItemNames.forEach((resetItemName: string) => {
+        if (name.includes(resetItemName)) {
+          isReset = true;
+        }
+      });
+    }
+    if (isReset) {
+      this.setDataValue(null, this.name);
+    }
+
+    // // 刚加载初始化时的值不校验,只校验值项和自身值变更
+    // if (name.includes(this.name) || name.includes(valueItemName)) {
+    //   this.validate();
+    // }
+
+    // // 有表单项更新，且是自身变更时，触发表单项更新
+    // if (name.includes(this.name) && this.model.formItemUpdate) {
+    //   const { methodName, itemNames } = this.model.formItemUpdate;
+    //   await (this.form as EditFormController).updateFormItem(
+    //     methodName,
+    //     itemNames,
+    //   );
+    // }
+  }
+
+  async formStateNotify(state: FormNotifyState): Promise<void> {
+    super.formStateNotify(state);
+
+    // // 计算启用条件
+    // this.calcEnableCond();
+
+    // 触发默认值
+    if (state === FormNotifyState.LOAD) {
+      this.setDefaultValue(false);
+    }
+  }
+
+  protected calcDynamicLogic(names: string[], state?: FormNotifyState): void {
+    // 隐藏表单项不计算动态逻辑
+    if (!this.model.hidden) {
+      super.calcDynamicLogic(names, state);
+    }
+  }
+
+  /**
+   * 表单项值规则校验
+   * 如果表单项不显示则不校验直接返回true
+   *
+   * @author lxm
+   * @date 2022-09-01 22:09:29
+   */
+  async validate(): Promise<boolean> {
+    if (!this.state.visible) {
+      this.state.error = null;
+      return true;
+    }
+
+    // 必填校验
+    if (this.state.required && isNilOrEmpty(this.data[this.name])) {
+      this.state.error = `请填写${this.model.caption}`;
+      return false;
+    }
+
+    if (this.validator) {
+      try {
+        await this.validator.validate(this.data);
+      } catch ({ errors, _fields }) {
+        this.state.error = (errors as IDatum[])[0].message;
+        return false;
+      }
+    }
+    this.state.error = null;
+    return true;
+  }
+
+  /**
+   * 设置表单数据的值
+   *
+   * @author lxm
+   * @date 2022-08-24 10:08:40
+   * @param {unknown} value 要设置的值
+   * @param {string} name 要设置的表单数据的属性名称
+   */
+  async setDataValue(value: unknown, name?: string): Promise<void> {
+    name = name || this.name;
+    await this.form.setDataValue(name, value);
+  }
+
+  /**
+   * 设置默认值
+   *
+   * @author lxm
+   * @date 2022-09-15 22:09:52
+   * @param {boolean} isCreate 新建默认值还是更新默认值
+   */
+  setDefaultValue(isCreate: boolean) {
+    const { createDVT, createDV, updateDVT, updateDV } = this.model;
+    const valueType = isCreate ? createDVT : updateDVT;
+    const defaultValue = isCreate ? createDV : updateDV;
+    // 置空
+    if (valueType === 'RESET') {
+      this.data[this.name] = null;
+      return;
+    }
+
+    // 除置空之外的默认值类型，有值的时候不走
+    if (this.value) {
+      return;
+    }
+    // 没有配置默认值
+    if (isNilOrEmpty(valueType) && isNilOrEmpty(defaultValue)) {
+      return;
+    }
+    // 没有配类型，配了默认值的直接赋值默认值
+    if (!valueType && defaultValue) {
+      this.data[this.name] = defaultValue;
+      return;
+    }
+    switch (valueType) {
+      // 当前应用数据，优先取视图参数，视图参数没有取上下文
+      case 'APPDATA':
+        if (Object.prototype.hasOwnProperty.call(this.context, defaultValue!)) {
+          this.data[this.name] = this.context[defaultValue!];
+        }
+        if (Object.prototype.hasOwnProperty.call(this.params, defaultValue!)) {
+          this.data[this.name] = this.params[defaultValue!];
+        }
+        break;
+      // 当前操作用户(名称)
+      case 'OPERATORNAME':
+        this.data[this.name] = this.context.srfusername;
+        break;
+      // 当前操作用户(编号)
+      case 'OPERATOR':
+        this.data[this.name] = this.context.srfuserid;
+        break;
+      // 当前时间
+      case 'CURTIME':
+        this.data[this.name] = dayjs().format(this.model.valueFormat);
+        break;
+      // 数据对象属性
+      case 'PARAM':
+        this.data[this.name] = this.data[defaultValue!];
+        break;
+      default:
+        ibiz.message.error(`[${valueType}]类型默认值未支持`);
+        break;
+    }
+  }
+}

package/src/control/form/form-detail/form-item/form-item.scss

@@ -0,0 +1,4 @@
+@include b(form-item) {
+  @include set-component-css-var('form-item', $form-item);
+  @include set-component-css-var('form-item-caption', $form-item-caption);
+}

package/src/control/form/form-detail/form-item/form-item.tsx

@@ -0,0 +1,69 @@
+import { defineComponent, h, PropType, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './form-item.scss';
+import { IDEFormItem } from '@ibiz/model-core';
+import { kebabCase } from 'lodash-es';
+import { FormItemController } from './form-item.controller';
+
+export const FormItem = defineComponent({
+  name: 'FormItem',
+  props: {
+    modelData: {
+      type: Object as PropType<IDEFormItem>,
+      required: true,
+    },
+    controller: {
+      type: FormItemController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('form-item');
+    const c = props.controller;
+    const modelClass = kebabCase(props.modelData.id!);
+    const onValueChange = (val: unknown, name?: string) => {
+      props.controller.setDataValue(val, name);
+    };
+
+    return { ns, c, onValueChange, modelClass };
+  },
+  render() {
+    if (!this.c.state.visible) {
+      return null;
+    }
+
+    // 编辑器内容
+    let editor = null;
+    if (this.c.form.state.isLoaded) {
+      if (this.controller.editorProvider) {
+        const component = resolveComponent(
+          this.controller.editorProvider.formEditor,
+        );
+        editor = h(component, {
+          value: this.controller.value,
+          data: this.controller.data,
+          controller: this.controller.editor,
+          disabled: this.controller.state.disabled,
+          readonly: this.controller.editor!.readonly,
+          onChange: this.onValueChange,
+        });
+      } else {
+        editor = <not-supported-editor modelData={this.modelData.editor} />;
+      }
+    }
+
+    return (
+      <form-item-container
+        class={[this.ns.b(), this.ns.m(this.modelClass)]}
+        required={this.c.state.required}
+        error={this.c.state.error}
+        label={this.modelData.caption}
+        label-pos={this.c.model.labelPos}
+        label-width={this.c.model.labelWidth}
+      >
+        {editor}
+      </form-item-container>
+    );
+  },
+});
+export default FormItem;

package/src/control/form/form-detail/form-item/index.ts

@@ -0,0 +1,3 @@
+export * from './form-item-provider';
+export * from './form-item-state';
+export * from './form-item';

package/src/control/form/form-detail/form-page/form-page-item.tsx

@@ -0,0 +1,59 @@
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IDEFormPage } from '@ibiz/model-core';
+import { kebabCase } from 'lodash-es';
+import { defineComponent, PropType, VNode } from 'vue';
+import { FormPageController } from './form-page.controller';
+
+export const FormPageItem = defineComponent({
+  name: 'FormPageItem',
+  props: {
+    modelData: {
+      type: Object as PropType<IDEFormPage>,
+      required: true,
+    },
+    controller: {
+      type: FormPageController,
+      required: true,
+    },
+    caption: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('form-page-item');
+    console.log(props.controller);
+    const modelClass = kebabCase(props.modelData.id!);
+    return { ns, modelClass };
+  },
+  render() {
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+    defaultSlots.forEach(item => {
+      const data = item.component?.data;
+      if (data) {
+        data.class = { [this.ns.b('child')]: true };
+      }
+    });
+    return (
+      <app-row
+        class={[this.ns.b(), this.ns.m(this.modelClass)]}
+        layout={this.modelData.layout}
+      >
+        {defaultSlots.map(slot => {
+          const props = slot.props as IData;
+          if (!props || !props.controller) {
+            return slot;
+          }
+          return (
+            <app-col
+              layoutPos={props.modelData.layoutPos}
+              controller={props.controller.state.layoutController}
+            >
+              {slot}
+            </app-col>
+          );
+        })}
+      </app-row>
+    );
+  },
+});

package/src/control/form/form-detail/form-page/form-page-provider.ts

@@ -0,0 +1,27 @@
+import { IFormDetailProvider } from '@ibiz-template/runtime';
+import { IDEFormPage } from '@ibiz/model-core';
+import { FormController } from '../../form/form.controller';
+import { FormPageController } from './form-page.controller';
+
+/**
+ * 表单分页部件适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class FormPageProvider
+ * @implements {EditorProvider}
+ */
+export class FormPageProvider implements IFormDetailProvider {
+  component: string = 'FormPage';
+
+  async createController(
+    detailModel: IDEFormPage,
+    form: FormController,
+    _parent: undefined,
+  ): Promise<FormPageController> {
+    const c = new FormPageController(detailModel, form);
+    await c.init();
+    return c;
+  }
+}

package/src/control/form/form-detail/form-page/form-page-state.ts

@@ -0,0 +1,12 @@
+import { FormGroupPanelState } from '../form-group-panel';
+
+/**
+ * 表单分页状态
+ *
+ * @author chitanda
+ * @date 2023-01-04 09:01:57
+ * @export
+ * @class FormPageState
+ * @extends {FormContainerState}
+ */
+export class FormPageState extends FormGroupPanelState {}

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

@@ -0,0 +1,20 @@
+import { IDEFormPage } from '@ibiz/model-core';
+import { FormGroupPanelController } from '../form-group-panel';
+import { FormPageState } from './form-page-state';
+
+/**
+ * 表单分页控制器
+ *
+ * @author lxm
+ * @date 2022-09-04 15:09:52
+ * @export
+ * @class FormPageController
+ * @extends {FormContainerController}
+ */
+export class FormPageController extends FormGroupPanelController<IDEFormPage> {
+  declare state: FormPageState;
+
+  protected createState(): FormPageState {
+    return new FormPageState(this.parent?.state);
+  }
+}

package/src/control/form/form-detail/form-page/form-page.scss

@@ -0,0 +1,42 @@
+@include b(form-page) {
+  @include set-component-css-var('form-page', $form-page);
+
+  // 无分页时，分页内容区最上不需要间隔
+  @include m(no-tab-header) {
+    @include b(form-page-item) {
+      padding-top: 0;
+    }
+  }
+}
+
+// 表单分页，tabs头样式
+@include b(form-page-tab) {
+  > .el-tabs__header.is-top {
+    margin: 0;
+
+    .el-tabs__item.is-top {
+      font-size: getCssVar('form-page', 'font-size');
+      color: getCssVar('form-page', 'text-color');
+      background-color: getCssVar('form-page', 'bg-color');
+    }
+
+    .el-tabs__item.is-top:hover {
+      color: getCssVar('form-page', 'hover-color');
+      background-color: getCssVar('form-page', 'hover-bg-color');
+    }
+
+    .el-tabs__item.is-top.is-active {
+      color: getCssVar('form-page', 'active-color');
+      background-color: getCssVar('form-page', 'active-bg-color');
+    }
+  }
+}
+
+// 有分页时内容离分页有间隔
+@include b(form-page-item) {
+  padding-top: getCssVar('padding', 'top');
+}
+
+@include b(form-page-item-child) {
+  margin-bottom: getCssVar('margin', 'bottom');
+}

package/src/control/form/form-detail/form-page/form-page.tsx

@@ -0,0 +1,56 @@
+import { defineComponent, PropType, VNode } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './form-page.scss';
+import { IDEForm } from '@ibiz/model-core';
+
+export const FormPage = defineComponent({
+  name: 'FormPage',
+  props: {
+    modelData: {
+      type: Object as PropType<IDEForm>,
+      required: true,
+    },
+  },
+  setup() {
+    const ns = useNamespace('form-page');
+    return { ns };
+  },
+  render() {
+    const { noTabHeader } = this.modelData;
+    const defaultSlots: VNode[] =
+      (this.$slots.default?.()[0]?.children as VNode[]) || [];
+    if (defaultSlots.length === 1 || noTabHeader) {
+      return (
+        <div class={(this.ns.b(), this.ns.m('no-tab-header'))}>
+          {defaultSlots}
+        </div>
+      );
+    }
+    return (
+      <el-tabs
+        class={[this.ns.b(), this.ns.b('tab')]}
+        model-value={defaultSlots[0]?.key}
+      >
+        {defaultSlots.map(slot => {
+          const props = slot.props || {};
+          const c = props.controller;
+          if (!c.state.visible) {
+            return null;
+          }
+          return (
+            <el-tab-pane
+              class={this.ns.b('tab-item')}
+              label={props.caption}
+              name={slot.key}
+              lazy
+            >
+              {slot}
+            </el-tab-pane>
+          );
+        })}
+      </el-tabs>
+    );
+  },
+});
+
+export default FormPage;

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

@@ -0,0 +1,3 @@
+export * from './form-detail/index';
+export * from './form-group-panel/index';
+export * from './form-item/index';