@dhccmobile/vue3-lo-form 1.1.41 → 2.0.0

package/src/components/form/DvForm.vue

@@ -1,642 +1,642 @@
-<template>
-  <div v-if="desForm?.controls?.length" ref="formView" :class="'lo-form-container ' + ('lo-' + (edit ? 'enable' : 'disable') + '-edit') + ' lo-class-style-' + styleMode + ' lo-form-theme-' + loFormTheme">
-    <dv-form-layout v-for="(item, i) in desForm.controls" :key="i" :control="item" :customFormats="customFormats" :linkList="linkList" @linkClick="linkClick" :index="i" @change="onChange($event)" @focus="onFocus($event)" @blur="onBlur($event)" @click="onClick($event)" @addon-before="onAddonBeforeHandler($event)" @addon-after="onAddonAfterHandler($event)" @add-item="selectAddItem($event)">
-      <template v-for="propName in Object.keys(this.$slots)" v-slot:[propName]="slotProps">
-        <slot :name="propName" :content="slotProps.content" :control="slotProps.control" :onChange="slotProps.onChange"></slot>
-      </template>
-    </dv-form-layout>
-  </div>
-</template>
-
-<script lang="ts">
-import DvFormLayout from "./DvFormLayout.vue";
-import { Options, Prop, Provide, Watch, Vue } from "vue-property-decorator";
-import { DesForm } from "@/domain";
-import { FormFieldClass } from "@/constants";
-import { formToolsService } from "@/services";
-import { Control } from "@/domain";
-import { DesFormControl } from "@/domain";
-import { FormGroup } from "@/domain";
-import { FormControl } from "@/domain";
-import { formBeanUtilsService } from "@/services";
-import { FormApi } from "@/core";
-import { FormFieldType } from "@/constants";
-import { ProvideInjectData } from "@/domain/ProvideInjectData";
-import { validateGeneratorService } from "@/services";
-import { CustomFormat, FieldChangeHistory } from "../../domain";
-import { extractOptions } from "@/filtres/extract-options.filter";
-import { DynamicOptionType, OptionType } from "../../constants/enum";
-import { NzTreeNodeOptions } from "@/services";
-
-export type NfFormMode = "manual" | "auto";
-
-export type NfStyleMode = "default" | "trust" | "credit-rd";
-
-export type NfFormTheme = "default" | "gray";
-/**
- * @description: 动态表单
- * @author ChenRui
- * @date 2020/12/30 11:20
- */
-@Options({
-  name: "DyForm",
-  components: {
-    DvFormLayout: DvFormLayout,
-  },
-})
-export default class DyForm extends Vue {
-  @Prop() formId: string | undefined;
-  @Prop() mode: NfFormMode | undefined;
-  @Prop({ type: String, default: "default" }) styleMode!: NfStyleMode;
-  @Prop() srcDesForm: DesForm | undefined;
-  @Prop({ default: false, type: Boolean }) edit!: boolean;
-  @Prop({ default: false, type: Boolean }) colon!: boolean;
-  @Prop({ default: "130px", type: String }) labelSpan!: string;
-  @Prop({ default: undefined }) controlSpan!: any;
-  @Prop({ type: Object }) formApi: FormApi | undefined;
-  @Prop({ type: Array }) history: FieldChangeHistory | undefined;
-  @Prop({ type: Object, default: () => ({}) }) customFormats!: {
-    [key: string]: CustomFormat;
-  };
-  @Prop() refreshArguments: any; // 刷新自变量
-  @Prop({ default: false }) widthCompatibleMode!: boolean; // 宽度计算模式
-  @Prop({ type: String }) formTheme!: NfFormTheme; // 表单主题
-  @Prop({ type: Array }) linkList: any | undefined; // 需要添加超链接点击事件数组 例：['cifNo', 'prodBaseNo']
-
-  private metaRefresh: any = new Date().getTime(); // 刷新标识
-  private refreshCheckFeedbackFlag = new Date().getTime(); // 刷新校验标识
-  private sysDictDetailOptions: NzTreeNodeOptions[] = []; // 常规字典
-  private sysDictTreeDetailOptions: NzTreeNodeOptions[] = []; // 树形字典
-  private formValidateStateResetMark: any = new Date().getTime(); // 重置校验标识
-
-  desForm: DesForm = new DesForm();
-
-  @Provide() provideInjectData: ProvideInjectData = {
-    edit: (this.$props as any).edit,
-    labelSpan: (this.$props as any).labelSpan,
-    controlSpan: (this.$props as any).controlSpan,
-    colon: (this.$props as any).colon,
-    metaRefresh: this.metaRefresh,
-    refreshCheckFeedbackFlag: this.refreshCheckFeedbackFlag,
-    widthCompatibleMode: (this.$props as any).widthCompatibleMode,
-    formValidateStateResetMark: this.formValidateStateResetMark,
-  };
-
-  /**
-   * @description: 刷新自变量监听处理
-   * @author ChenRui
-   * @date 2021/2/5 10:25
-   */
-  @Watch("refreshArguments", { immediate: true })
-  onRefreshArgumentsHandler(newVal: any): void {
-    this.metaRefresh = newVal;
-  }
-
-  /**
-   * @description: 重置表单校验状态监听
-   * @author ChenRui
-   * @date 2022/4/6 14:17
-   */
-  @Watch("formValidateStateResetMark")
-  onPropFormValidateStateResetHandler(newVal: any): void {
-    if ((this as any)._provided) {
-      ((this as any)._provided as any).provideInjectData.formValidateStateResetMark = this.formValidateStateResetMark;
-    }
-  }
-
-  /**
-   * @description: 值变更处理器
-   * @author ChenRui
-   * @date 2021/1/8 11:03
-   */
-  @Watch("edit")
-  @Watch("labelSpan")
-  @Watch("controlSpan")
-  @Watch("metaRefresh")
-  @Watch("refreshCheckFeedbackFlag")
-  @Watch("widthCompatibleMode")
-  onPropHandler(newVal: any): void {
-    if (this) {
-      this.provideInjectData.edit = this.edit;
-      this.provideInjectData.labelSpan = this.labelSpan;
-      this.provideInjectData.controlSpan = this.controlSpan;
-      this.provideInjectData.metaRefresh = this.metaRefresh;
-      this.provideInjectData.refreshCheckFeedbackFlag = this.refreshCheckFeedbackFlag;
-      this.provideInjectData.widthCompatibleMode = this.widthCompatibleMode;
-    }
-  }
-
-  get loFormTheme(): string {
-    const win: any = window;
-    const themes = ["default", "gray"];
-    const formTheme = themes.indexOf(this.formTheme) > -1 ? this.formTheme : win.$loFormTheme;
-    return themes.indexOf(formTheme) > -1 ? formTheme : themes[0];
-  }
-  /**
-   * @Description 表单数据反显回调（data：Object  { key: 元素码值, value: 元素值 }）
-   * @Author JiangTao
-   * @Date 2023-10-07 下午 05:16
-   */
-  linkClick(data: any) {
-    this.$emit("linkClick", data);
-  }
-
-  created() {
-    this.initDict();
-  }
-
-  mounted() {
-    if (this.formId) {
-      this.initDesForm();
-    } else if (this.desForm) {
-      this.formatDesForm();
-    }
-  }
-
-  @Watch("formId")
-  private onFormIdChanged() {
-    this.initDesForm();
-  }
-
-  @Watch("srcDesForm", { immediate: true })
-  private onSrcDesFormChanged(newVal: DesForm) {
-    if (newVal != null) {
-      this.desForm = formBeanUtilsService.copy(newVal);
-      this.formatDesForm();
-    }
-  }
-
-  /**
-   * @description: 初始化表单
-   * @author ChenRui
-   * @date 2020/11/23 11:19
-   */
-  private initDesForm(): void {
-    if (this.formId != null && this.formId !== "") {
-      this.desForm = formToolsService.loadResource(this.formId);
-      this.formatDesForm();
-    }
-  }
-
-  /**
-   * @description: 初始化字典
-   * @author ChenRui
-   * @date 2021/3/12 10:12
-   */
-  private initDict(): void {
-    this.sysDictDetailOptions = formToolsService.sysDictDetailOptions;
-    this.sysDictTreeDetailOptions = formToolsService.sysDictTreeDetailOptions;
-  }
-
-  /**
-   * @description: 格式化表单
-   * @author ChenRui
-   * @date 2020/11/30 16:05
-   */
-  private formatDesForm(isReset?: boolean): void {
-    if (this.desForm != null && this.desForm.controls != null && this.desForm.controls.length > 0) {
-      const model = this.analysisBindingObjects();
-      this.desForm.formGroup = this.generateFormGroup(model);
-      this.initControlForm(this.desForm.controls, this.desForm.formGroup);
-      this.generateFormApi(isReset);
-      if (this.history != null) {
-        this.formApi?.setFieldChangeHistory(this.history);
-      }
-      this.$emit("complete");
-    }
-  }
-  /**
-   * @Description: 临时-该方法被取消
-   * @author LiuBo
-   * @date 2022/11/6
-   * @time 17:11
-   */
-  private fixFormLayout() {
-    this.$nextTick(() => {
-      console.log("自动修改表单宽度");
-      try {
-        const formView: any = this.$refs.formView;
-        const cons = formView.getElementsByClassName("lo-control-container");
-        const len = cons.length;
-        for (let i = 0; i < len - 1; i++) {
-          if (cons[i].offsetLeft === cons[i + 1].offsetLeft && cons[i].clientWidth < cons[i + 1].clientWidth) {
-            cons[i].style.width = "200%";
-          } else {
-            cons[i].style.width = "100%";
-          }
-        }
-        if (len > 2) {
-          const con1 = cons[len - 1];
-          const con2 = cons[len - 2];
-          if (con1.clientWidth === con2.clientWidth && con1.offsetLeft !== con2.offsetLeft) {
-            con1.style.width = "200%";
-          } else {
-            con1.style.width = "100%";
-          }
-        }
-      } catch (e) {
-        console.error("自动修改表单宽度错误" + e);
-      }
-    });
-  }
-
-  /**
-   * @description: 生成表单对象
-   * @author ChenRui
-   * @date 2021/1/7 20:48
-   */
-  private generateFormApi(isReset?: boolean): void {
-    if (isReset) {
-      const formApi: FormApi = new FormApi(this.formApi);
-      formApi.dvForm = this;
-      this.$emit("update:formApi", formApi);
-    } else {
-      if (this.formApi) {
-        this.formApi.dvForm = this;
-        this.$emit("update:formApi", this.formApi);
-      } else {
-        const formApi = new FormApi({ dvForm: this });
-        this.$emit("update:formApi", formApi);
-      }
-    }
-  }
-
-  /**
-   * @description: 解析对象
-   * @author ChenRui
-   * @date 2020/11/25 16:25
-   */
-  private analysisBindingObjects(): any {
-    const models: any[] = this.objectExtraction(this.desForm!.controls);
-    let obj: any = {};
-    if (models != null && models.length > 0) {
-      models.forEach((item) => {
-        if (Object.keys(item).length > 0) {
-          obj = this.objectMerge(obj, item[Object.keys(item)[0]]);
-        }
-      });
-    }
-    return obj;
-  }
-
-  /**
-   * @description: 对象抽取
-   * @author ChenRui
-   * @date 2020/11/25 17:28
-   */
-  private objectExtraction(controls: Control[], models: any[] = []): any {
-    controls.forEach((item) => {
-      if (item.type === FormFieldClass.Layout.code) {
-        if (item.subControls != null && item.subControls.length > 0) {
-          return this.objectExtraction(item.subControls, models);
-        }
-      } else {
-        const desFormControl: DesFormControl = item?.controlAttr as DesFormControl;
-        const boundProperty: string = desFormControl.boundProperty;
-        if (boundProperty) {
-          /* 初始化字典项数据 */
-          if (desFormControl.generalDictionary || desFormControl.treeShape) {
-            if (desFormControl.isOptionType === OptionType.Dynamic.code) {
-              if (desFormControl.dynamicOptionType === DynamicOptionType.GeneralDictionary.code) {
-                desFormControl.generalDictionaryOptions = this.findDictOptions(desFormControl.generalDictionary, this.sysDictDetailOptions);
-              } else if (desFormControl.dynamicOptionType === DynamicOptionType.TreeDictionary.code) {
-                desFormControl.treeShapeOptions = this.findDictOptions(desFormControl.treeShape, this.sysDictTreeDetailOptions);
-              }
-            }
-          }
-          /*初始化默认值*/
-          const propertys: string[] = boundProperty.split(".");
-          let lastMd: any = {};
-          const md = { lastMd };
-          propertys.forEach((val, idx, array) => {
-            if (idx < array.length - 1) {
-              lastMd[val] = {};
-              lastMd = lastMd[val];
-            } else {
-              const defaultValue: any = formBeanUtilsService.parse((item.controlAttr as DesFormControl).fieldDefaultValue) || "";
-              lastMd[val] = this.securityValue(item, defaultValue);
-            }
-          });
-          models.push(md.lastMd);
-        }
-      }
-    });
-    return models;
-  }
-
-  /**
-   * @description: 查询字典
-   * @author ChenRui
-   * @date 2021/3/11 17:19
-   */
-  private findDictOptions(key: string, nzTreeNodeOptions: NzTreeNodeOptions[]): NzTreeNodeOptions[] {
-    if (nzTreeNodeOptions != null && nzTreeNodeOptions.length > 0) {
-      for (const item of nzTreeNodeOptions) {
-        if (item.key === key) {
-          (item.children || []).forEach((item) => {
-            item.disabled = false;
-          });
-          return item.children || [];
-        } else if (item.children && item.children.length > 0) {
-          const subTtems: NzTreeNodeOptions[] = this.findDictOptions(key, item.children);
-          if (subTtems != null && subTtems.length > 0) {
-            return subTtems;
-          }
-        }
-      }
-    }
-    return [];
-  }
-
-  /**
-   * @description: 安全值处理
-   * @author ChenRui
-   * @date 2021/1/29 17:01
-   */
-  securityValue(control: Control, defaultValue: any): any {
-    if (control.code === FormFieldType.DatePicker.code || control.code === FormFieldType.TimePicker.code) {
-      if (defaultValue) {
-        return defaultValue;
-      } else {
-        return null;
-      }
-    } else if (control.code === FormFieldType.TreeSelect.code) {
-      const options = extractOptions(control.controlAttr);
-      if (options && options.length > 0 && defaultValue) {
-        defaultValue = this.treeSelectRecursion(defaultValue, options);
-      }
-      return defaultValue;
-    } else if (control.code === FormFieldType.Upload.code) {
-      return defaultValue || [];
-    } else if (control.code === FormFieldType.Switch.code) {
-      if (control.controlAttr && (control.controlAttr as DesFormControl).onOpeningValue) {
-        return defaultValue === true || defaultValue === (control.controlAttr as DesFormControl).onOpeningValue ? true : false;
-      } else if (control.controlAttr && (control.controlAttr as DesFormControl).whenClosedValue) {
-        return defaultValue === false || defaultValue === (control.controlAttr as DesFormControl).whenClosedValue ? false : true;
-      }
-      return defaultValue;
-    } else {
-      return defaultValue;
-    }
-  }
-
-  /**
-   * @description: 树形递归
-   * @author ChenRui
-   * @date 2021/1/11 0:23
-   */
-  treeSelectRecursion(value: any, items: any[]): any {
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].key === value) {
-        return items[i].value;
-      } else if (items[i].children && items[i].children.length > 0) {
-        const subValue = this.treeSelectRecursion(value, items[i].children);
-        if (subValue) {
-          return subValue;
-        }
-      }
-    }
-    return "";
-  }
-
-  /**
-   * @description: 对象合并
-   * @author ChenRui
-   * @date 2020/11/25 17:49
-   */
-  private objectMerge(modelX: any, modelY: any): any {
-    let key;
-    for (key in modelY) {
-      if (modelX[key] && modelX[key].toString() === "[object Object]" && modelY[key] && modelY[key].toString() === "[object Object]") {
-        modelX[key] = this.objectMerge(modelX[key], modelY[key]);
-      } else {
-        modelX[key] = modelX[key] = modelY[key];
-      }
-    }
-    return modelX;
-  }
-
-  /**
-   * @description: 生成表单对象
-   * @author ChenRui
-   * @date 2020/11/26 11:02
-   */
-  private generateFormGroup(model: any): FormGroup {
-    const group: FormGroup = new FormGroup();
-    if (model != null) {
-      Object.keys(model).forEach((key) => {
-        if (Object.prototype.toString.call(model[key]) === "[object Object]") {
-          const subFormGroup: FormGroup = this.generateFormGroup(model[key]);
-          subFormGroup.key = key;
-          group.addControl(key, subFormGroup);
-        } else {
-          const formControl: FormControl = new FormControl(model[key]);
-          formControl.key = key;
-          group.addControl(key, formControl);
-        }
-      });
-    }
-    return group;
-  }
-
-  /**
-   * @description: 创建表单对象
-   * @author ChenRui
-   * @date 2020/11/23 11:19
-   */
-  private initControlForm(controls: Control[], formGroup: FormGroup): void {
-    controls.forEach((control) => {
-      if (control.type === FormFieldClass.Base.code || control.type === FormFieldClass.Senior.code) {
-        const boundProperty: string = (control.controlAttr as DesFormControl)?.boundProperty;
-        if (boundProperty) {
-          const propertys: string[] = boundProperty.split(".");
-          if (propertys.length > 1 && formGroup != null) {
-            const formControl: FormControl = this.findFormControlByProperty(propertys.slice(1, propertys.length), formGroup);
-            formControl.code = control.code;
-            formControl.controlAttr = control.controlAttr;
-            validateGeneratorService.fillCheckRule(formControl, control.controlAttr as DesFormControl);
-            control["formControl"] = formControl;
-          }
-        }
-      } else if (control.type === FormFieldClass.Layout.code && control.subControls != null && control.subControls.length > 0) {
-        this.initControlForm(control.subControls, formGroup);
-      }
-    });
-  }
-
-  /**
-   * @description: 按照节点查询控件
-   * @author ChenRui
-   * @date 2020/11/26 15:45
-   */
-  private findFormControlByProperty(propertys: string[], formGroup: FormGroup): FormControl | any {
-    let currentFormGroup = formGroup;
-    for (let i = 0; i < propertys.length; i++) {
-      const formObject = currentFormGroup.get(propertys[i]);
-      if (i < propertys.length - 1 && formObject != null && formObject instanceof FormGroup) {
-        currentFormGroup = formObject;
-      } else {
-        return formObject;
-      }
-    }
-  }
-
-  /**
-   * @description: 控件值变化事件处理
-   * @author ChenRui
-   * @date 2020/12/2 14:35
-   */
-  onChange(event: any): void {
-    this.$emit("change", event);
-  }
-
-  /**
-   * @description: 下拉选项新增
-   * @author ChenRui
-   * @date 2021/1/14 20:05
-   */
-  selectAddItem(event: any): void {
-    this.$emit("add-item", event);
-  }
-
-  /**
-   * @description: 单击事件
-   * @author ChenRui
-   * @date 2021/3/4 11:39
-   */
-  onClick(event: any): void {
-    this.$emit("click", event);
-  }
-
-  /**
-   * @description: 内置前置标签事件
-   * @author ChenRui
-   * @date 2021/4/23 9:42
-   */
-  onAddonBeforeHandler(event: any): void {
-    this.$emit("addon-before", event);
-  }
-
-  /**
-   * @description: 内置后置标签事件
-   * @author ChenRui
-   * @date 2021/4/23 9:43
-   */
-  onAddonAfterHandler(event: any): void {
-    this.$emit("addon-after", event);
-  }
-
-  /**
-   * @description: 获取焦点
-   * @author ChenRui
-   * @date 2021/3/4 11:46
-   */
-  onFocus(event: Control): void {
-    this.$emit("focus", event);
-  }
-
-  /**
-   * @description: 失焦事件
-   * @author ChenRui
-   * @date 2021/3/4 11:38
-   */
-  onBlur(event: Control): void {
-    this.$emit("blur", event);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.w-100 {
-  width: 100%;
-}
-.lo-form-container {
-  box-sizing: border-box;
-  :deep {
-    .ant-form-horizontal {
-      .lo-control-container {
-        .ant-form-item-label {
-          padding-left: 10px;
-          padding-right: 10px;
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-  }
-  /* START 非编辑模式主题样式 */
-  &.lo-class-style-credit-rd.lo-disable-edit,
-  &.lo-class-style-trust.lo-disable-edit {
-    :deep {
-      .lo-control-container {
-        .ant-form-item-label {
-          padding-left: 12px;
-          text-align: left;
-          label {
-            &::after {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-  }
-  /* END 非编辑模式主题样式 */
-  /* START 编辑模式主题样式 */
-  &.lo-class-style-trust.lo-enable-edit {
-    :deep {
-      .ant-form-horizontal {
-        .lo-control-container {
-          .ant-form-item-label {
-            label {
-              &::after {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  &.lo-class-style-credit-rd.lo-enable-edit,
-  &.lo-class-style-trust.lo-enable-edit {
-    :deep {
-      .ant-form-horizontal {
-        .lo-control-container {
-          .ant-form-item-label {
-            label {
-              padding-left: 10px;
-              padding-right: 5px;
-            }
-          }
-        }
-      }
-      .lo-control-container {
-        padding-bottom: 10px;
-        border: 0;
-        .ant-form-item-label {
-          background-color: inherit;
-          border: 0;
-          label {
-            color: rgba(0, 0, 0, 0.850980392156863);
-          }
-        }
-        .ant-form-item-control-wrapper {
-          .ant-form-item-children {
-            .ant-input,
-            .ant-select,
-            .ant-cascader-picker-label,
-            .ant-select-selection-selected-value,
-            .ant-time-picker-input,
-            .ant-radio-wrapper,
-            .ant-checkbox-wrapper {
-              color: #000000;
-            }
-          }
-        }
-      }
-    }
-  }
-  /* END 编辑模式主题样式 */
-}
-</style>
+<template>
+  <div v-if="desForm?.controls?.length" ref="formView" :class="'lo-form-container ' + ('lo-' + (edit ? 'enable' : 'disable') + '-edit') + ' lo-class-style-' + styleMode + ' lo-form-theme-' + loFormTheme">
+    <dv-form-layout v-for="(item, i) in desForm.controls" :key="i" :control="item" :customFormats="customFormats" :linkList="linkList" @linkClick="linkClick" :index="i" @change="onChange($event)" @focus="onFocus($event)" @blur="onBlur($event)" @click="onClick($event)" @addon-before="onAddonBeforeHandler($event)" @addon-after="onAddonAfterHandler($event)" @add-item="selectAddItem($event)">
+      <template v-for="propName in Object.keys(this.$slots)" v-slot:[propName]="slotProps">
+        <slot :name="propName" :content="slotProps.content" :control="slotProps.control" :onChange="slotProps.onChange"></slot>
+      </template>
+    </dv-form-layout>
+  </div>
+</template>
+
+<script lang="ts">
+import DvFormLayout from "./DvFormLayout.vue";
+import { Options, Prop, Provide, Watch, Vue } from "vue-property-decorator";
+import { DesForm } from "@/domain";
+import { FormFieldClass } from "@/constants";
+import { formToolsService } from "@/services";
+import { Control } from "@/domain";
+import { DesFormControl } from "@/domain";
+import { FormGroup } from "@/domain";
+import { FormControl } from "@/domain";
+import { formBeanUtilsService } from "@/services";
+import { FormApi } from "@/core";
+import { FormFieldType } from "@/constants";
+import { ProvideInjectData } from "@/domain/ProvideInjectData";
+import { validateGeneratorService } from "@/services";
+import { CustomFormat, FieldChangeHistory } from "../../domain";
+import { extractOptions } from "@/filtres/extract-options.filter";
+import { DynamicOptionType, OptionType } from "../../constants/enum";
+import { NzTreeNodeOptions } from "@/services";
+
+export type NfFormMode = "manual" | "auto";
+
+export type NfStyleMode = "default" | "trust" | "credit-rd";
+
+export type NfFormTheme = "default" | "gray";
+/**
+ * @description: 动态表单
+ * @author ChenRui
+ * @date 2020/12/30 11:20
+ */
+@Options({
+  name: "DyForm",
+  components: {
+    DvFormLayout: DvFormLayout,
+  },
+})
+export default class DyForm extends Vue {
+  @Prop() formId: string | undefined;
+  @Prop() mode: NfFormMode | undefined;
+  @Prop({ type: String, default: "default" }) styleMode!: NfStyleMode;
+  @Prop() srcDesForm: DesForm | undefined;
+  @Prop({ default: false, type: Boolean }) edit!: boolean;
+  @Prop({ default: false, type: Boolean }) colon!: boolean;
+  @Prop({ default: "130px", type: String }) labelSpan!: string;
+  @Prop({ default: undefined }) controlSpan!: any;
+  @Prop({ type: Object }) formApi: FormApi | undefined;
+  @Prop({ type: Array }) history: FieldChangeHistory | undefined;
+  @Prop({ type: Object, default: () => ({}) }) customFormats!: {
+    [key: string]: CustomFormat;
+  };
+  @Prop() refreshArguments: any; // 刷新自变量
+  @Prop({ default: false }) widthCompatibleMode!: boolean; // 宽度计算模式
+  @Prop({ type: String }) formTheme!: NfFormTheme; // 表单主题
+  @Prop({ type: Array }) linkList: any | undefined; // 需要添加超链接点击事件数组 例：['cifNo', 'prodBaseNo']
+
+  private metaRefresh: any = new Date().getTime(); // 刷新标识
+  private refreshCheckFeedbackFlag = new Date().getTime(); // 刷新校验标识
+  private sysDictDetailOptions: NzTreeNodeOptions[] = []; // 常规字典
+  private sysDictTreeDetailOptions: NzTreeNodeOptions[] = []; // 树形字典
+  private formValidateStateResetMark: any = new Date().getTime(); // 重置校验标识
+
+  desForm: DesForm = new DesForm();
+
+  @Provide() provideInjectData: ProvideInjectData = {
+    edit: (this.$props as any).edit,
+    labelSpan: (this.$props as any).labelSpan,
+    controlSpan: (this.$props as any).controlSpan,
+    colon: (this.$props as any).colon,
+    metaRefresh: this.metaRefresh,
+    refreshCheckFeedbackFlag: this.refreshCheckFeedbackFlag,
+    widthCompatibleMode: (this.$props as any).widthCompatibleMode,
+    formValidateStateResetMark: this.formValidateStateResetMark,
+  };
+
+  /**
+   * @description: 刷新自变量监听处理
+   * @author ChenRui
+   * @date 2021/2/5 10:25
+   */
+  @Watch("refreshArguments", { immediate: true })
+  onRefreshArgumentsHandler(newVal: any): void {
+    this.metaRefresh = newVal;
+  }
+
+  /**
+   * @description: 重置表单校验状态监听
+   * @author ChenRui
+   * @date 2022/4/6 14:17
+   */
+  @Watch("formValidateStateResetMark")
+  onPropFormValidateStateResetHandler(newVal: any): void {
+    if ((this as any)._provided) {
+      ((this as any)._provided as any).provideInjectData.formValidateStateResetMark = this.formValidateStateResetMark;
+    }
+  }
+
+  /**
+   * @description: 值变更处理器
+   * @author ChenRui
+   * @date 2021/1/8 11:03
+   */
+  @Watch("edit")
+  @Watch("labelSpan")
+  @Watch("controlSpan")
+  @Watch("metaRefresh")
+  @Watch("refreshCheckFeedbackFlag")
+  @Watch("widthCompatibleMode")
+  onPropHandler(newVal: any): void {
+    if (this) {
+      this.provideInjectData.edit = this.edit;
+      this.provideInjectData.labelSpan = this.labelSpan;
+      this.provideInjectData.controlSpan = this.controlSpan;
+      this.provideInjectData.metaRefresh = this.metaRefresh;
+      this.provideInjectData.refreshCheckFeedbackFlag = this.refreshCheckFeedbackFlag;
+      this.provideInjectData.widthCompatibleMode = this.widthCompatibleMode;
+    }
+  }
+
+  get loFormTheme(): string {
+    const win: any = window;
+    const themes = ["default", "gray"];
+    const formTheme = themes.indexOf(this.formTheme) > -1 ? this.formTheme : win.$loFormTheme;
+    return themes.indexOf(formTheme) > -1 ? formTheme : themes[0];
+  }
+  /**
+   * @Description 表单数据反显回调（data：Object  { key: 元素码值, value: 元素值 }）
+   * @Author JiangTao
+   * @Date 2023-10-07 下午 05:16
+   */
+  linkClick(data: any) {
+    this.$emit("linkClick", data);
+  }
+
+  created() {
+    this.initDict();
+  }
+
+  mounted() {
+    if (this.formId) {
+      this.initDesForm();
+    } else if (this.desForm) {
+      this.formatDesForm();
+    }
+  }
+
+  @Watch("formId")
+  private onFormIdChanged() {
+    this.initDesForm();
+  }
+
+  @Watch("srcDesForm", { immediate: true })
+  private onSrcDesFormChanged(newVal: DesForm) {
+    if (newVal != null) {
+      this.desForm = formBeanUtilsService.copy(newVal);
+      this.formatDesForm();
+    }
+  }
+
+  /**
+   * @description: 初始化表单
+   * @author ChenRui
+   * @date 2020/11/23 11:19
+   */
+  private initDesForm(): void {
+    if (this.formId != null && this.formId !== "") {
+      this.desForm = formToolsService.loadResource(this.formId);
+      this.formatDesForm();
+    }
+  }
+
+  /**
+   * @description: 初始化字典
+   * @author ChenRui
+   * @date 2021/3/12 10:12
+   */
+  private initDict(): void {
+    this.sysDictDetailOptions = formToolsService.sysDictDetailOptions;
+    this.sysDictTreeDetailOptions = formToolsService.sysDictTreeDetailOptions;
+  }
+
+  /**
+   * @description: 格式化表单
+   * @author ChenRui
+   * @date 2020/11/30 16:05
+   */
+  private formatDesForm(isReset?: boolean): void {
+    if (this.desForm != null && this.desForm.controls != null && this.desForm.controls.length > 0) {
+      const model = this.analysisBindingObjects();
+      this.desForm.formGroup = this.generateFormGroup(model);
+      this.initControlForm(this.desForm.controls, this.desForm.formGroup);
+      this.generateFormApi(isReset);
+      if (this.history != null) {
+        this.formApi?.setFieldChangeHistory(this.history);
+      }
+      this.$emit("complete");
+    }
+  }
+  /**
+   * @Description: 临时-该方法被取消
+   * @author LiuBo
+   * @date 2022/11/6
+   * @time 17:11
+   */
+  private fixFormLayout() {
+    this.$nextTick(() => {
+      console.log("自动修改表单宽度");
+      try {
+        const formView: any = this.$refs.formView;
+        const cons = formView.getElementsByClassName("lo-control-container");
+        const len = cons.length;
+        for (let i = 0; i < len - 1; i++) {
+          if (cons[i].offsetLeft === cons[i + 1].offsetLeft && cons[i].clientWidth < cons[i + 1].clientWidth) {
+            cons[i].style.width = "200%";
+          } else {
+            cons[i].style.width = "100%";
+          }
+        }
+        if (len > 2) {
+          const con1 = cons[len - 1];
+          const con2 = cons[len - 2];
+          if (con1.clientWidth === con2.clientWidth && con1.offsetLeft !== con2.offsetLeft) {
+            con1.style.width = "200%";
+          } else {
+            con1.style.width = "100%";
+          }
+        }
+      } catch (e) {
+        console.error("自动修改表单宽度错误" + e);
+      }
+    });
+  }
+
+  /**
+   * @description: 生成表单对象
+   * @author ChenRui
+   * @date 2021/1/7 20:48
+   */
+  private generateFormApi(isReset?: boolean): void {
+    if (isReset) {
+      const formApi: FormApi = new FormApi(this.formApi);
+      formApi.dvForm = this;
+      this.$emit("update:formApi", formApi);
+    } else {
+      if (this.formApi) {
+        this.formApi.dvForm = this;
+        this.$emit("update:formApi", this.formApi);
+      } else {
+        const formApi = new FormApi({ dvForm: this });
+        this.$emit("update:formApi", formApi);
+      }
+    }
+  }
+
+  /**
+   * @description: 解析对象
+   * @author ChenRui
+   * @date 2020/11/25 16:25
+   */
+  private analysisBindingObjects(): any {
+    const models: any[] = this.objectExtraction(this.desForm!.controls);
+    let obj: any = {};
+    if (models != null && models.length > 0) {
+      models.forEach((item) => {
+        if (Object.keys(item).length > 0) {
+          obj = this.objectMerge(obj, item[Object.keys(item)[0]]);
+        }
+      });
+    }
+    return obj;
+  }
+
+  /**
+   * @description: 对象抽取
+   * @author ChenRui
+   * @date 2020/11/25 17:28
+   */
+  private objectExtraction(controls: Control[], models: any[] = []): any {
+    controls.forEach((item) => {
+      if (item.type === FormFieldClass.Layout.code) {
+        if (item.subControls != null && item.subControls.length > 0) {
+          return this.objectExtraction(item.subControls, models);
+        }
+      } else {
+        const desFormControl: DesFormControl = item?.controlAttr as DesFormControl;
+        const boundProperty: string = desFormControl.boundProperty;
+        if (boundProperty) {
+          /* 初始化字典项数据 */
+          if (desFormControl.generalDictionary || desFormControl.treeShape) {
+            if (desFormControl.isOptionType === OptionType.Dynamic.code) {
+              if (desFormControl.dynamicOptionType === DynamicOptionType.GeneralDictionary.code) {
+                desFormControl.generalDictionaryOptions = this.findDictOptions(desFormControl.generalDictionary, this.sysDictDetailOptions);
+              } else if (desFormControl.dynamicOptionType === DynamicOptionType.TreeDictionary.code) {
+                desFormControl.treeShapeOptions = this.findDictOptions(desFormControl.treeShape, this.sysDictTreeDetailOptions);
+              }
+            }
+          }
+          /*初始化默认值*/
+          const propertys: string[] = boundProperty.split(".");
+          let lastMd: any = {};
+          const md = { lastMd };
+          propertys.forEach((val, idx, array) => {
+            if (idx < array.length - 1) {
+              lastMd[val] = {};
+              lastMd = lastMd[val];
+            } else {
+              const defaultValue: any = formBeanUtilsService.parse((item.controlAttr as DesFormControl).fieldDefaultValue) || "";
+              lastMd[val] = this.securityValue(item, defaultValue);
+            }
+          });
+          models.push(md.lastMd);
+        }
+      }
+    });
+    return models;
+  }
+
+  /**
+   * @description: 查询字典
+   * @author ChenRui
+   * @date 2021/3/11 17:19
+   */
+  private findDictOptions(key: string, nzTreeNodeOptions: NzTreeNodeOptions[]): NzTreeNodeOptions[] {
+    if (nzTreeNodeOptions != null && nzTreeNodeOptions.length > 0) {
+      for (const item of nzTreeNodeOptions) {
+        if (item.key === key) {
+          (item.children || []).forEach((item) => {
+            item.disabled = false;
+          });
+          return item.children || [];
+        } else if (item.children && item.children.length > 0) {
+          const subTtems: NzTreeNodeOptions[] = this.findDictOptions(key, item.children);
+          if (subTtems != null && subTtems.length > 0) {
+            return subTtems;
+          }
+        }
+      }
+    }
+    return [];
+  }
+
+  /**
+   * @description: 安全值处理
+   * @author ChenRui
+   * @date 2021/1/29 17:01
+   */
+  securityValue(control: Control, defaultValue: any): any {
+    if (control.code === FormFieldType.DatePicker.code || control.code === FormFieldType.TimePicker.code) {
+      if (defaultValue) {
+        return defaultValue;
+      } else {
+        return null;
+      }
+    } else if (control.code === FormFieldType.TreeSelect.code) {
+      const options = extractOptions(control.controlAttr);
+      if (options && options.length > 0 && defaultValue) {
+        defaultValue = this.treeSelectRecursion(defaultValue, options);
+      }
+      return defaultValue;
+    } else if (control.code === FormFieldType.Upload.code) {
+      return defaultValue || [];
+    } else if (control.code === FormFieldType.Switch.code) {
+      if (control.controlAttr && (control.controlAttr as DesFormControl).onOpeningValue) {
+        return defaultValue === true || defaultValue === (control.controlAttr as DesFormControl).onOpeningValue ? true : false;
+      } else if (control.controlAttr && (control.controlAttr as DesFormControl).whenClosedValue) {
+        return defaultValue === false || defaultValue === (control.controlAttr as DesFormControl).whenClosedValue ? false : true;
+      }
+      return defaultValue;
+    } else {
+      return defaultValue;
+    }
+  }
+
+  /**
+   * @description: 树形递归
+   * @author ChenRui
+   * @date 2021/1/11 0:23
+   */
+  treeSelectRecursion(value: any, items: any[]): any {
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].key === value) {
+        return items[i].value;
+      } else if (items[i].children && items[i].children.length > 0) {
+        const subValue = this.treeSelectRecursion(value, items[i].children);
+        if (subValue) {
+          return subValue;
+        }
+      }
+    }
+    return "";
+  }
+
+  /**
+   * @description: 对象合并
+   * @author ChenRui
+   * @date 2020/11/25 17:49
+   */
+  private objectMerge(modelX: any, modelY: any): any {
+    let key;
+    for (key in modelY) {
+      if (modelX[key] && modelX[key].toString() === "[object Object]" && modelY[key] && modelY[key].toString() === "[object Object]") {
+        modelX[key] = this.objectMerge(modelX[key], modelY[key]);
+      } else {
+        modelX[key] = modelX[key] = modelY[key];
+      }
+    }
+    return modelX;
+  }
+
+  /**
+   * @description: 生成表单对象
+   * @author ChenRui
+   * @date 2020/11/26 11:02
+   */
+  private generateFormGroup(model: any): FormGroup {
+    const group: FormGroup = new FormGroup();
+    if (model != null) {
+      Object.keys(model).forEach((key) => {
+        if (Object.prototype.toString.call(model[key]) === "[object Object]") {
+          const subFormGroup: FormGroup = this.generateFormGroup(model[key]);
+          subFormGroup.key = key;
+          group.addControl(key, subFormGroup);
+        } else {
+          const formControl: FormControl = new FormControl(model[key]);
+          formControl.key = key;
+          group.addControl(key, formControl);
+        }
+      });
+    }
+    return group;
+  }
+
+  /**
+   * @description: 创建表单对象
+   * @author ChenRui
+   * @date 2020/11/23 11:19
+   */
+  private initControlForm(controls: Control[], formGroup: FormGroup): void {
+    controls.forEach((control) => {
+      if (control.type === FormFieldClass.Base.code || control.type === FormFieldClass.Senior.code) {
+        const boundProperty: string = (control.controlAttr as DesFormControl)?.boundProperty;
+        if (boundProperty) {
+          const propertys: string[] = boundProperty.split(".");
+          if (propertys.length > 1 && formGroup != null) {
+            const formControl: FormControl = this.findFormControlByProperty(propertys.slice(1, propertys.length), formGroup);
+            formControl.code = control.code;
+            formControl.controlAttr = control.controlAttr;
+            validateGeneratorService.fillCheckRule(formControl, control.controlAttr as DesFormControl);
+            control["formControl"] = formControl;
+          }
+        }
+      } else if (control.type === FormFieldClass.Layout.code && control.subControls != null && control.subControls.length > 0) {
+        this.initControlForm(control.subControls, formGroup);
+      }
+    });
+  }
+
+  /**
+   * @description: 按照节点查询控件
+   * @author ChenRui
+   * @date 2020/11/26 15:45
+   */
+  private findFormControlByProperty(propertys: string[], formGroup: FormGroup): FormControl | any {
+    let currentFormGroup = formGroup;
+    for (let i = 0; i < propertys.length; i++) {
+      const formObject = currentFormGroup.get(propertys[i]);
+      if (i < propertys.length - 1 && formObject != null && formObject instanceof FormGroup) {
+        currentFormGroup = formObject;
+      } else {
+        return formObject;
+      }
+    }
+  }
+
+  /**
+   * @description: 控件值变化事件处理
+   * @author ChenRui
+   * @date 2020/12/2 14:35
+   */
+  onChange(event: any): void {
+    this.$emit("change", event);
+  }
+
+  /**
+   * @description: 下拉选项新增
+   * @author ChenRui
+   * @date 2021/1/14 20:05
+   */
+  selectAddItem(event: any): void {
+    this.$emit("add-item", event);
+  }
+
+  /**
+   * @description: 单击事件
+   * @author ChenRui
+   * @date 2021/3/4 11:39
+   */
+  onClick(event: any): void {
+    this.$emit("click", event);
+  }
+
+  /**
+   * @description: 内置前置标签事件
+   * @author ChenRui
+   * @date 2021/4/23 9:42
+   */
+  onAddonBeforeHandler(event: any): void {
+    this.$emit("addon-before", event);
+  }
+
+  /**
+   * @description: 内置后置标签事件
+   * @author ChenRui
+   * @date 2021/4/23 9:43
+   */
+  onAddonAfterHandler(event: any): void {
+    this.$emit("addon-after", event);
+  }
+
+  /**
+   * @description: 获取焦点
+   * @author ChenRui
+   * @date 2021/3/4 11:46
+   */
+  onFocus(event: Control): void {
+    this.$emit("focus", event);
+  }
+
+  /**
+   * @description: 失焦事件
+   * @author ChenRui
+   * @date 2021/3/4 11:38
+   */
+  onBlur(event: Control): void {
+    this.$emit("blur", event);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.w-100 {
+  width: 100%;
+}
+.lo-form-container {
+  box-sizing: border-box;
+  :deep {
+    .ant-form-horizontal {
+      .lo-control-container {
+        .ant-form-item-label {
+          padding-left: 10px;
+          padding-right: 10px;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+  /* START 非编辑模式主题样式 */
+  &.lo-class-style-credit-rd.lo-disable-edit,
+  &.lo-class-style-trust.lo-disable-edit {
+    :deep {
+      .lo-control-container {
+        .ant-form-item-label {
+          padding-left: 12px;
+          text-align: left;
+          label {
+            &::after {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+  /* END 非编辑模式主题样式 */
+  /* START 编辑模式主题样式 */
+  &.lo-class-style-trust.lo-enable-edit {
+    :deep {
+      .ant-form-horizontal {
+        .lo-control-container {
+          .ant-form-item-label {
+            label {
+              &::after {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.lo-class-style-credit-rd.lo-enable-edit,
+  &.lo-class-style-trust.lo-enable-edit {
+    :deep {
+      .ant-form-horizontal {
+        .lo-control-container {
+          .ant-form-item-label {
+            label {
+              padding-left: 10px;
+              padding-right: 5px;
+            }
+          }
+        }
+      }
+      .lo-control-container {
+        padding-bottom: 10px;
+        border: 0;
+        .ant-form-item-label {
+          background-color: inherit;
+          border: 0;
+          label {
+            color: rgba(0, 0, 0, 0.850980392156863);
+          }
+        }
+        .ant-form-item-control-wrapper {
+          .ant-form-item-children {
+            .ant-input,
+            .ant-select,
+            .ant-cascader-picker-label,
+            .ant-select-selection-selected-value,
+            .ant-time-picker-input,
+            .ant-radio-wrapper,
+            .ant-checkbox-wrapper {
+              color: #000000;
+            }
+          }
+        }
+      }
+    }
+  }
+  /* END 编辑模式主题样式 */
+}
+</style>