@kp-ui/lowcode 1.0.25 → 1.0.27

package/src/components/form-designer/form-widget/field-widget/fieldMixin.js

@@ -1,8 +1,8 @@
-import { translateOptionItems as h, deepClone as o } from "../../../../utils/util.js";
-import l from "../../../../utils/validators.js";
-import { fmtHttpParams as r } from "../../../../utils/request/fmtHttpParams.js";
-import { eq as a, isArray as d } from "lodash-es";
-const F = {
+import { translateOptionItems, deepClone } from "../../../../utils/util.js";
+import FormValidators from "../../../../utils/validators.js";
+import { fmtHttpParams } from "../../../../utils/request/fmtHttpParams.js";
+import { eq, isArray } from "lodash-es";
+const fieldMixin = {
   inject: [
     "refList",
     "getFormConfig",
@@ -17,8 +17,8 @@ const F = {
   ],
   data() {
     return {
-      fieldReadonlyFlag: !1,
-      loading: !1
+      fieldReadonlyFlag: false,
+      loading: false
     };
   },
   computed: {
@@ -26,257 +26,493 @@ const F = {
       return this.getFormConfig();
     },
     subFormName() {
-      return this.getSubFormName ? this.getSubFormName() : "";
+      return !!this.getSubFormName ? this.getSubFormName() : "";
     },
     subFormItemFlag() {
-      return this.getSubFormFieldFlag ? this.getSubFormFieldFlag() : !1;
+      return !!this.getSubFormFieldFlag ? this.getSubFormFieldFlag() : false;
     },
     formModel: {
-      cache: !1,
+      cache: false,
       get() {
         return this.globalModel.formModel;
       }
     },
     isReadMode() {
-      return this.getReadMode() ? !0 : this.fieldReadonlyFlag;
+      return !!this.getReadMode() ? true : this.fieldReadonlyFlag;
     },
     optionLabel() {
-      if (this.fieldModel === null)
+      if (this.fieldModel === null) {
         return "";
-      {
-        let i = "";
-        const { valueKey: t, labelKey: e } = this.field.options;
-        return this.field.options.optionItems.forEach((s) => {
-          (s[t] === this.fieldModel || this.findInArray(this.fieldModel, s[t]) !== -1) && (i = i === "" ? s[e] : i + " " + s[e]);
-        }), i;
+      } else {
+        let resultContent = "";
+        const { valueKey, labelKey } = this.field.options;
+        this.field.options.optionItems.forEach((oItem) => {
+          if (oItem[valueKey] === this.fieldModel || this.findInArray(this.fieldModel, oItem[valueKey]) !== -1) {
+            resultContent = resultContent === "" ? oItem[labelKey] : resultContent + " " + oItem[labelKey];
+          }
+        });
+        return resultContent;
       }
     }
   },
   methods: {
     handleHidden() {
-      if (this.designState)
-        return !1;
-      const { onHidden: i, hidden: t } = this.field.options;
-      return t ? !0 : i ? new Function(i).call(this) : !1;
+      if (this.designState) {
+        return false;
+      }
+      const { onHidden, hidden } = this.field.options;
+      if (hidden) return true;
+      if (onHidden) {
+        const onHiddenFn = new Function(onHidden);
+        return onHiddenFn.call(this);
+      }
+      return false;
     },
     handleDisabled() {
-      if (this.designState)
-        return !1;
-      const { onDisabled: i, disabled: t } = this.field.options;
-      return t ? !0 : i ? new Function(i).call(this) : !1;
+      if (this.designState) {
+        return false;
+      }
+      const { onDisabled, disabled } = this.field.options;
+      if (disabled) return true;
+      if (onDisabled) {
+        const disabledFn = new Function(onDisabled);
+        return disabledFn.call(this);
+      }
+      return false;
     },
-    findInArray(i, t) {
-      if (!Array.isArray(i))
+    findInArray(arrayObject, element) {
+      if (!Array.isArray(arrayObject)) {
         return -1;
-      let e = -1;
-      return i.forEach((s, n) => {
-        s === t && (e = n);
-      }), e;
+      }
+      let foundIdx = -1;
+      arrayObject.forEach((aItem, aIdx) => {
+        if (aItem === element) {
+          foundIdx = aIdx;
+        }
+      });
+      return foundIdx;
     },
     //--------------------- 组件内部方法 begin ------------------//
     getPropName() {
-      return this.subFormItemFlag && !this.designState ? this.subFormName + "." + this.subFormRowIndex + "." + this.field.options.name : this.field.options.name;
+      if (this.subFormItemFlag && !this.designState) {
+        return this.subFormName + "." + this.subFormRowIndex + "." + this.field.options.name;
+      } else {
+        return this.field.options.name;
+      }
     },
     initFieldModel() {
-      if (this.field.formItemFlag) {
-        if (this.subFormItemFlag && !this.designState) {
-          const i = this.formModel[this.subFormName];
-          (i === void 0 || i[this.subFormRowIndex] === void 0 || i[this.subFormRowIndex][this.field.options.name] === void 0) && this.field.options.defaultValue !== void 0 ? (this.fieldModel = this.field.options.defaultValue, i[this.subFormRowIndex][this.field.options.name] = this.field.options.defaultValue) : i[this.subFormRowIndex][this.field.options.name] === void 0 ? (this.fieldModel = null, i[this.subFormRowIndex][this.field.options.name] = null) : this.fieldModel = i[this.subFormRowIndex][this.field.options.name], setTimeout(() => {
-            this.handleOnChangeForSubForm(
-              this.fieldModel,
-              this.oldFieldValue,
-              [],
-              i,
-              this.subFormRowId
-            );
-          }, 800), this.oldFieldValue = o(this.fieldModel), this.initFileList();
-          return;
+      if (!this.field.formItemFlag) {
+        return;
+      }
+      if (!!this.subFormItemFlag && !this.designState) {
+        const subFormData = this.formModel[this.subFormName];
+        if ((subFormData === void 0 || subFormData[this.subFormRowIndex] === void 0 || subFormData[this.subFormRowIndex][this.field.options.name] === void 0) && this.field.options.defaultValue !== void 0) {
+          this.fieldModel = this.field.options.defaultValue;
+          subFormData[this.subFormRowIndex][this.field.options.name] = this.field.options.defaultValue;
+        } else if (subFormData[this.subFormRowIndex][this.field.options.name] === void 0) {
+          this.fieldModel = null;
+          subFormData[this.subFormRowIndex][this.field.options.name] = null;
+        } else {
+          this.fieldModel = subFormData[this.subFormRowIndex][this.field.options.name];
         }
-        this.formModel[this.field.options.name] === void 0 && this.field.options.defaultValue !== void 0 ? this.fieldModel = this.field.options.defaultValue : this.formModel[this.field.options.name] === void 0 ? this.formModel[this.field.options.name] = null : this.fieldModel = this.formModel[this.field.options.name], this.oldFieldValue = o(this.fieldModel), this.initFileList();
+        setTimeout(() => {
+          this.handleOnChangeForSubForm(
+            this.fieldModel,
+            this.oldFieldValue,
+            [],
+            subFormData,
+            this.subFormRowId
+          );
+        }, 800);
+        this.oldFieldValue = deepClone(this.fieldModel);
+        this.initFileList();
+        return;
+      }
+      if (this.formModel[this.field.options.name] === void 0 && this.field.options.defaultValue !== void 0) {
+        this.fieldModel = this.field.options.defaultValue;
+      } else if (this.formModel[this.field.options.name] === void 0) {
+        this.formModel[this.field.options.name] = null;
+      } else {
+        this.fieldModel = this.formModel[this.field.options.name];
       }
+      this.oldFieldValue = deepClone(this.fieldModel);
+      this.initFileList();
     },
     initFileList() {
-      this.field.type !== "picture-upload" && this.field.type !== "file-upload" || this.designState === !0 || this.fieldModel && (Array.isArray(this.fieldModel) ? this.fileList = o(this.fieldModel) : this.fileList.splice(0, 0, o(this.fieldModel)));
+      if (this.field.type !== "picture-upload" && this.field.type !== "file-upload" || this.designState === true) {
+        return;
+      }
+      if (!!this.fieldModel) {
+        if (Array.isArray(this.fieldModel)) {
+          this.fileList = deepClone(this.fieldModel);
+        } else {
+          this.fileList.splice(0, 0, deepClone(this.fieldModel));
+        }
+      }
     },
     initEventHandler() {
-      this.on$("setFormData", (i) => {
-        this.subFormItemFlag || this.setValue(i[this.field.options.name]);
-      }), this.on$("field-value-changed", (i) => {
-        if (this.subFormItemFlag) {
-          const t = this.formModel[this.subFormName];
-          this.handleOnChangeForSubForm(i[0], i[1], t, this.subFormRowId);
-        } else
-          this.handleOnChange(i[0], i[1]);
-      }), this.on$("loadOptionItemsFromDataSet", (i) => {
-        this.loadOptionItemsFromDataSet(i);
-      }), this.on$("reloadOptionItems", (i) => {
-        (i.length === 0 || i.indexOf(this.field.options.name) > -1) && this.initOptionItems(!0);
+      this.on$("setFormData", (newFormData) => {
+        if (!this.subFormItemFlag) {
+          this.setValue(newFormData[this.field.options.name]);
+        }
+      });
+      this.on$("field-value-changed", (values) => {
+        if (!!this.subFormItemFlag) {
+          const subFormData = this.formModel[this.subFormName];
+          this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId);
+        } else {
+          this.handleOnChange(values[0], values[1]);
+        }
+      });
+      this.on$("loadOptionItemsFromDataSet", (dsName) => {
+        this.loadOptionItemsFromDataSet(dsName);
+      });
+      this.on$("reloadOptionItems", (widgetNames) => {
+        if (widgetNames.length === 0 || widgetNames.indexOf(this.field.options.name) > -1) {
+          this.initOptionItems(true);
+        }
       });
     },
     handleOnCreated() {
-      this.designState || this.field.options.onCreated && new Function(this.field.options.onCreated).call(this);
+      if (!!this.designState) {
+        return;
+      }
+      if (!!this.field.options.onCreated) {
+        const customFunc = new Function(this.field.options.onCreated);
+        customFunc.call(this);
+      }
     },
     handleOnMounted() {
-      this.designState || this.field.options.onMounted && new Function(this.field.options.onMounted).call(this);
+      if (!!this.designState) {
+        return;
+      }
+      if (!!this.field.options.onMounted) {
+        const mountFunc = new Function(this.field.options.onMounted);
+        mountFunc.call(this);
+      }
     },
-    registerToRefList(i) {
-      this.refList !== null && this.field.options.name && (this.subFormItemFlag && !this.designState ? (i && delete this.refList[i + "@row" + this.subFormRowId], this.refList[this.field.options.name + "@row" + this.subFormRowId] = this) : (i && delete this.refList[i], this.refList[this.field.options.name] = this));
+    registerToRefList(oldRefName) {
+      if (this.refList !== null && !!this.field.options.name) {
+        if (this.subFormItemFlag && !this.designState) {
+          if (!!oldRefName) {
+            delete this.refList[oldRefName + "@row" + this.subFormRowId];
+          }
+          this.refList[this.field.options.name + "@row" + this.subFormRowId] = this;
+        } else {
+          if (!!oldRefName) {
+            delete this.refList[oldRefName];
+          }
+          this.refList[this.field.options.name] = this;
+        }
+      }
     },
     unregisterFromRefList() {
-      if (this.refList !== null && this.field.options.name) {
-        const i = this.field.options.name;
-        this.subFormItemFlag && !this.designState ? delete this.refList[i + "@row" + this.subFormRowId] : delete this.refList[i];
+      if (this.refList !== null && !!this.field.options.name) {
+        const oldRefName = this.field.options.name;
+        if (this.subFormItemFlag && !this.designState) {
+          delete this.refList[oldRefName + "@row" + this.subFormRowId];
+        } else {
+          delete this.refList[oldRefName];
+        }
       }
     },
     clearOptionItems() {
-      this.field.options.dsEnabled && this.field.options.optionItems.splice(0, this.field.options.optionItems.length);
+      if (!!this.field.options.dsEnabled) {
+        this.field.options.optionItems.splice(0, this.field.options.optionItems.length);
+      }
     },
-    async initOptionItems(i) {
-      var t;
-      if (!this.designState && !this.loading && (this.loading = !0, ["radio", "checkbox", "select", "cascader", "treeSelect"].includes(this.field.type))) {
-        if (this.field.options.dsEnabled && ((t = this.field.options.http) != null && t.url))
+    async initOptionItems(keepSelected) {
+      var _a;
+      if (this.designState) {
+        return;
+      }
+      if (this.loading) return;
+      this.loading = true;
+      if (["radio", "checkbox", "select", "cascader", "treeSelect"].includes(this.field.type)) {
+        if (!!this.field.options.dsEnabled && ((_a = this.field.options.http) == null ? void 0 : _a.url)) {
           try {
-            const s = await r.call(this, this.field.options, {
+            const dsResult = await fmtHttpParams.call(this, this.field.options, {
               fieldCode: this.field.options.name
             });
-            d(s) && this.loadOptions(s), d(s.list) && (this.field.options.loadingPage ? (this.pager.total = s.total || 0, this.pager.totalPage = s.totalPage || 0, this.loadOptions([...this.getOptionItems(), ...s.list])) : this.loadOptions(s.list));
-          } catch (s) {
-            console.error("err: ", s);
+            if (isArray(dsResult)) {
+              this.loadOptions(dsResult);
+            }
+            if (isArray(dsResult.list)) {
+              if (this.field.options.loadingPage) {
+                this.pager.total = dsResult.total || 0;
+                this.pager.totalPage = dsResult.totalPage || 0;
+                this.loadOptions([...this.getOptionItems(), ...dsResult.list]);
+              } else {
+                this.loadOptions(dsResult.list);
+              }
+            }
+          } catch (err) {
+            console.error("err: ", err);
+          }
+        }
+        const newOptionItems = this.getOptionData();
+        if (!!newOptionItems && newOptionItems.hasOwnProperty(this.field.options.name)) {
+          if (!!keepSelected) {
+            this.reloadOptions(newOptionItems[this.field.options.name]);
+          } else {
+            this.loadOptions(newOptionItems[this.field.options.name]);
           }
-        const e = this.getOptionData();
-        e && e.hasOwnProperty(this.field.options.name) && (i ? this.reloadOptions(e[this.field.options.name]) : this.loadOptions(e[this.field.options.name])), this.loading = !1;
+        }
+        this.loading = false;
       }
     },
-    loadOptionItemsFromDataSet(i) {
-      if (this.designState || this.field.type !== "radio" && this.field.type !== "checkbox" && this.field.type !== "select" && this.field.type !== "cascader" || !this.field.options.dsEnabled || !this.field.options.dsName || !this.field.options.dataSetName || this.field.options.dsName !== i)
+    loadOptionItemsFromDataSet(dsName) {
+      if (this.designState) {
+        return;
+      }
+      if (this.field.type !== "radio" && this.field.type !== "checkbox" && this.field.type !== "select" && this.field.type !== "cascader") {
+        return;
+      }
+      if (!this.field.options.dsEnabled || !this.field.options.dsName || !this.field.options.dataSetName || this.field.options.dsName !== dsName) {
         return;
-      const t = this.getDSResultCache(), e = this.field.options.dataSetName;
-      t && t[i] && t[i][e] && (this.field.options.optionItems.splice(0, this.field.options.optionItems.length), this.loadOptions(t[i][e]));
+      }
+      const dataCache = this.getDSResultCache();
+      const dSetName = this.field.options.dataSetName;
+      if (!!dataCache && !!dataCache[dsName] && !!dataCache[dsName][dSetName]) {
+        this.field.options.optionItems.splice(0, this.field.options.optionItems.length);
+        this.loadOptions(dataCache[dsName][dSetName]);
+      }
     },
     refreshDefaultValue() {
-      this.designState === !0 && this.field.options.defaultValue !== void 0 && (this.fieldModel = this.field.options.defaultValue);
+      if (this.designState === true && this.field.options.defaultValue !== void 0) {
+        this.fieldModel = this.field.options.defaultValue;
+      }
     },
     clearFieldRules() {
-      this.field.formItemFlag && this.rules.splice(0, this.rules.length);
+      if (!this.field.formItemFlag) {
+        return;
+      }
+      this.rules.splice(0, this.rules.length);
     },
     buildFieldRules() {
-      if (!(!this.field.formItemFlag || this.field.options.hidden)) {
-        if (this.rules.splice(0, this.rules.length), this.field.options.required && this.rules.push({
-          required: !0,
+      if (!this.field.formItemFlag || this.field.options.hidden) {
+        return;
+      }
+      this.rules.splice(0, this.rules.length);
+      if (!!this.field.options.required) {
+        this.rules.push({
+          required: true,
           //trigger: ['blur', 'change'],
           trigger: [
             "blur"
           ],
           message: this.field.options.requiredHint || this.i18nt("render.hint.fieldRequired")
-        }), this.field.options.validation) {
-          const i = this.field.options.validation;
-          l[i] ? this.rules.push({
-            validator: l[i],
+        });
+      }
+      if (!!this.field.options.validation) {
+        const vldName = this.field.options.validation;
+        if (!!FormValidators[vldName]) {
+          this.rules.push({
+            validator: FormValidators[vldName],
             trigger: ["blur", "change"],
             label: this.field.options.label,
             errorMsg: this.field.options.validationHint
-          }) : this.rules.push({
-            validator: l.regExp,
+          });
+        } else {
+          this.rules.push({
+            validator: FormValidators["regExp"],
             trigger: ["blur", "change"],
-            regExp: i,
+            regExp: vldName,
             label: this.field.options.label,
             errorMsg: this.field.options.validationHint
           });
         }
-        if (this.field.options.onValidate) {
-          const i = (t, e) => new Function("rule", "value", this.field.options.onValidate).call(this, t, e);
-          this.rules.push({
-            validator: i,
-            trigger: ["blur"],
-            label: this.field.options.label
-          });
-        }
+      }
+      if (!!this.field.options.onValidate) {
+        const customFn = (rule, value) => {
+          const tmpFunc = new Function("rule", "value", this.field.options.onValidate);
+          return tmpFunc.call(this, rule, value);
+        };
+        this.rules.push({
+          validator: customFn,
+          trigger: ["blur"],
+          label: this.field.options.label
+        });
       }
     },
     /**
      * 禁用字段值变动触发表单校验
      */
     disableChangeValidate() {
-      this.rules && this.rules.forEach((i) => {
-        i.trigger && i.trigger.splice(0, i.trigger.length);
+      if (!this.rules) {
+        return;
+      }
+      this.rules.forEach((rule) => {
+        if (!!rule.trigger) {
+          rule.trigger.splice(0, rule.trigger.length);
+        }
       });
     },
     /**
      * 启用字段值变动触发表单校验
      */
     enableChangeValidate() {
-      this.rules && this.rules.forEach((i) => {
-        i.trigger && (i.trigger.push("blur"), i.trigger.push("change"));
+      if (!this.rules) {
+        return;
+      }
+      this.rules.forEach((rule) => {
+        if (!!rule.trigger) {
+          rule.trigger.push("blur");
+          rule.trigger.push("change");
+        }
       });
     },
-    disableOptionOfList(i, t) {
-      i && i.length > 0 && i.forEach((e) => {
-        e.value === t && (e.disabled = !0);
-      });
+    disableOptionOfList(optionList, optionValue) {
+      if (!!optionList && optionList.length > 0) {
+        optionList.forEach((opt) => {
+          if (opt.value === optionValue) {
+            opt.disabled = true;
+          }
+        });
+      }
     },
-    enableOptionOfList(i, t) {
-      i && i.length > 0 && i.forEach((e) => {
-        e.value === t && (e.disabled = !1);
-      });
+    enableOptionOfList(optionList, optionValue) {
+      if (!!optionList && optionList.length > 0) {
+        optionList.forEach((opt) => {
+          if (opt.value === optionValue) {
+            opt.disabled = false;
+          }
+        });
+      }
     },
     //--------------------- 组件内部方法 end ------------------//
     //--------------------- 事件处理 begin ------------------//
-    emitFieldDataChange(i, t) {
-      i && (i = i.target ? i.target.value : i), this.emit$("field-value-changed", [i, t]), this.dispatch("VFormRender", "fieldChange", [
+    emitFieldDataChange(newValue, oldValue) {
+      if (newValue) {
+        newValue = newValue.target ? newValue.target.value : newValue;
+      }
+      this.emit$("field-value-changed", [newValue, oldValue]);
+      this.dispatch("VFormRender", "fieldChange", [
         this.field.options.name,
-        i,
-        t,
+        newValue,
+        oldValue,
         this.subFormName,
         this.subFormRowIndex
       ]);
     },
-    syncUpdateFormModel(i) {
-      if (!this.designState)
-        if (this.subFormItemFlag) {
-          const e = (this.formModel[this.subFormName] || [{}])[this.subFormRowIndex];
-          e && (e[this.field.options.name] = i);
-        } else
-          this.formModel[this.field.options.name] = i;
+    syncUpdateFormModel(value) {
+      if (!!this.designState) {
+        return;
+      }
+      if (!!this.subFormItemFlag) {
+        const subFormData = this.formModel[this.subFormName] || [{}];
+        const subFormDataRow = subFormData[this.subFormRowIndex];
+        if (!!subFormDataRow) {
+          subFormDataRow[this.field.options.name] = value;
+        }
+      } else {
+        this.formModel[this.field.options.name] = value;
+      }
     },
-    handleChangeEvent(i) {
-      i && (i = i.target ? i.target.value : i), !this.designState && (this.syncUpdateFormModel(i), this.emitFieldDataChange(i, this.oldFieldValue), this.oldFieldValue = o(i), this.dispatch("VFormRender", "fieldValidation", [this.getPropName()]));
+    handleChangeEvent(value) {
+      if (value) {
+        value = value.target ? value.target.value : value;
+      }
+      if (!!this.designState) {
+        return;
+      }
+      this.syncUpdateFormModel(value);
+      this.emitFieldDataChange(value, this.oldFieldValue);
+      this.oldFieldValue = deepClone(value);
+      this.dispatch("VFormRender", "fieldValidation", [this.getPropName()]);
     },
-    handleFocusCustomEvent(i) {
-      this.designState || (this.oldFieldValue = o(this.fieldModel), this.field.options.onFocus && new Function("event", this.field.options.onFocus).call(this, i), this.field.options.loadingPage && (this.initPager(), this.initOptionItems()));
+    handleFocusCustomEvent(event) {
+      if (!!this.designState) {
+        return;
+      }
+      this.oldFieldValue = deepClone(this.fieldModel);
+      if (!!this.field.options.onFocus) {
+        const customFn = new Function("event", this.field.options.onFocus);
+        customFn.call(this, event);
+      }
+      if (this.field.options.loadingPage) {
+        this.initPager();
+        this.initOptionItems();
+      }
     },
-    handleBlurCustomEvent(i) {
-      this.designState || this.field.options.onBlur && new Function("event", this.field.options.onBlur).call(this, i);
+    handleBlurCustomEvent(event) {
+      if (!!this.designState) {
+        return;
+      }
+      if (!!this.field.options.onBlur) {
+        const customFn = new Function("event", this.field.options.onBlur);
+        customFn.call(this, event);
+      }
     },
-    handleInputCustomEvent(i) {
-      i && (i = i.target ? i.target.value : i), !this.designState && (this.syncUpdateFormModel(i), this.dispatch("VFormRender", "fieldValidation", [this.getPropName()]), this.field.options.onInput && new Function("value", this.field.options.onInput).call(this, i));
+    handleInputCustomEvent(value) {
+      if (value) {
+        value = value.target ? value.target.value : value;
+      }
+      if (!!this.designState) {
+        return;
+      }
+      this.syncUpdateFormModel(value);
+      this.dispatch("VFormRender", "fieldValidation", [this.getPropName()]);
+      if (!!this.field.options.onInput) {
+        const customFn = new Function("value", this.field.options.onInput);
+        customFn.call(this, value);
+      }
     },
     emitAppendButtonClick() {
-      this.designState || (this.field.options.onAppendButtonClick ? new Function(this.field.options.onAppendButtonClick).call(this) : this.dispatch("VFormRender", "appendButtonClick", [this]));
+      if (!!this.designState) {
+        return;
+      }
+      if (!!this.field.options.onAppendButtonClick) {
+        const customFn = new Function(this.field.options.onAppendButtonClick);
+        customFn.call(this);
+      } else {
+        this.dispatch("VFormRender", "appendButtonClick", [this]);
+      }
     },
-    handleOnChange(i, t, e = []) {
-      this.designState || this.field.options.onChange && new Function("value", "oldValue", "ops", this.field.options.onChange).call(this, i, t, e[0]);
+    handleOnChange(val, oldVal, ops = []) {
+      if (!!this.designState) {
+        return;
+      }
+      if (!!this.field.options.onChange) {
+        const changeFn = new Function("value", "oldValue", "ops", this.field.options.onChange);
+        changeFn.call(this, val, oldVal, ops[0]);
+      }
     },
-    handleOnChangeForSubForm(i, t, e = [], s, n) {
-      this.designState || this.field.options.onChange && new Function(
-        "value",
-        "oldValue",
-        "ops",
-        "subFormData",
-        "rowId",
-        this.field.options.onChange
-      ).call(this, i, t, e[0], s, n);
+    handleOnChangeForSubForm(val, oldVal, ops = [], subFormData, rowId) {
+      if (!!this.designState) {
+        return;
+      }
+      if (!!this.field.options.onChange) {
+        const changeFn = new Function(
+          "value",
+          "oldValue",
+          "ops",
+          "subFormData",
+          "rowId",
+          this.field.options.onChange
+        );
+        changeFn.call(this, val, oldVal, ops[0], subFormData, rowId);
+      }
     },
     onClick() {
-      if (!this.designState) {
-        if (this.field.options.onClick)
-          return new Function(this.field.options.onClick).call(this);
+      if (!!this.designState) {
+        return;
+      }
+      if (!!this.field.options.onClick) {
+        const customFn = new Function(this.field.options.onClick);
+        return customFn.call(this);
+      } else {
         this.dispatch("VFormRender", "buttonClick", [this]);
       }
     },
     handleButtonWidgetClick() {
-      if (!this.designState) {
-        if (this.field.options.onClick)
-          return new Function(this.field.options.onClick).call(this);
+      if (!!this.designState) {
+        return;
+      }
+      if (!!this.field.options.onClick) {
+        const customFn = new Function(this.field.options.onClick);
+        return customFn.call(this);
+      } else {
         this.dispatch("VFormRender", "buttonClick", [this]);
       }
     },
@@ -284,7 +520,16 @@ const F = {
      * 下拉框右边搜索按钮
      */
     handleClickIcon() {
-      this.designState || this.handleDisabled() || this.field.options.onClickIcon && new Function(this.field.options.onClickIcon).call(this);
+      if (!!this.designState) {
+        return;
+      }
+      if (this.handleDisabled()) {
+        return;
+      }
+      if (!!this.field.options.onClickIcon) {
+        const onClickIconFn = new Function(this.field.options.onClickIcon);
+        onClickIconFn.call(this);
+      }
     },
     // remoteQuery(keyword) {
     //   if (!!this.designState) {
@@ -300,86 +545,135 @@ const F = {
     //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
     /* 提示：用户可自行扩充这些方法！！！ */
     getFormRef() {
-      return this.refList.v_form_ref;
+      return this.refList["v_form_ref"];
     },
-    getWidgetRef(i, t) {
-      const e = this.refList[i];
-      return !e && t && this.$message.error(this.i18nt("render.hint.refNotFound") + i), e;
+    getWidgetRef(widgetName, showError) {
+      const foundRef = this.refList[widgetName];
+      if (!foundRef && !!showError) {
+        this.$message.error(this.i18nt("render.hint.refNotFound") + widgetName);
+      }
+      return foundRef;
     },
     getFieldEditor() {
-      return this.$refs.fieldEditor;
+      return this.$refs["fieldEditor"];
     },
-    showFileList(i) {
-      return d(i) ? i.map((e, s) => ({
-        ...e,
-        name: e.fileName,
-        uid: s
-      })) : [];
+    showFileList(list) {
+      if (!isArray(list)) return [];
+      const res = list.map((item, uid) => ({
+        ...item,
+        name: item.fileName,
+        uid
+      }));
+      return res;
     },
     /*
       注意：VFormRender的setFormData方法不会触发子表单内field-widget的setValue方法，
       因为setFormData方法调用后，子表单内所有field-widget组件已被清空，接收不到setFormData事件！！
     */
-    setValue(i, t = !1) {
-      if (i && (i = i.target ? i.target.value : i), !a(this.fieldModel, i) && this.field.formItemFlag) {
-        const e = o(this.fieldModel);
-        this.field.type === "file-upload" ? i = this.showFileList(i || []) : this.field.type === "code-editor" && this.$refs.fieldEditor.setValue(i), this.fieldModel = i, this.initFileList(), this.syncUpdateFormModel(i), t || this.emitFieldDataChange(i, e);
+    setValue(newValue, disableChangeEvent = false) {
+      if (newValue) {
+        newValue = newValue.target ? newValue.target.value : newValue;
+      }
+      if (eq(this.fieldModel, newValue)) return;
+      if (!!this.field.formItemFlag) {
+        const oldValue = deepClone(this.fieldModel);
+        if (this.field.type === "file-upload") {
+          newValue = this.showFileList(newValue || []);
+        } else if (this.field.type === "code-editor") {
+          this.$refs.fieldEditor.setValue(newValue);
+        }
+        this.fieldModel = newValue;
+        this.initFileList();
+        this.syncUpdateFormModel(newValue);
+        if (!disableChangeEvent) {
+          this.emitFieldDataChange(newValue, oldValue);
+        }
       }
     },
     getValue() {
-      return this.fieldModel;
+      {
+        return this.fieldModel;
+      }
     },
     resetField() {
-      const i = this.field.options.defaultValue;
-      this.setValue(i), this.$nextTick(() => {
-      }), (this.field.type === "picture-upload" || this.field.type === "file-upload") && (this.fileList.splice(0, this.fileList.length), this.handleChangeEvent(this.fileList));
+      const defaultValue = this.field.options.defaultValue;
+      this.setValue(defaultValue);
+      this.$nextTick(() => {
+      });
+      if (this.field.type === "picture-upload" || this.field.type === "file-upload") {
+        this.fileList.splice(0, this.fileList.length);
+        this.handleChangeEvent(this.fileList);
+      }
     },
-    setWidgetOption(i, t) {
-      this.field.options.hasOwnProperty(i) && (this.field.options[i] = t);
+    setWidgetOption(optionName, optionValue) {
+      if (this.field.options.hasOwnProperty(optionName)) {
+        this.field.options[optionName] = optionValue;
+      }
     },
-    setReadonly(i) {
-      this.field.options.readonly = i;
+    setReadonly(flag) {
+      this.field.options.readonly = flag;
     },
-    setDisabled(i) {
-      this.field.options.disabled = i;
+    setDisabled(flag) {
+      this.field.options.disabled = flag;
     },
-    setAppendButtonVisible(i) {
-      this.field.options.appendButton = i;
+    setAppendButtonVisible(flag) {
+      this.field.options.appendButton = flag;
     },
-    setAppendButtonDisabled(i) {
-      this.field.options.appendButtonDisabled = i;
+    setAppendButtonDisabled(flag) {
+      this.field.options.appendButtonDisabled = flag;
     },
-    setHidden(i) {
-      this.field.options.hidden = i, i ? this.clearFieldRules() : this.buildFieldRules();
+    setHidden(flag) {
+      this.field.options.hidden = flag;
+      if (!!flag) {
+        this.clearFieldRules();
+      } else {
+        this.buildFieldRules();
+      }
     },
-    setRequired(i) {
-      this.field.options.required = i, this.buildFieldRules(), !this.designState && !i && this.clearValidate();
+    setRequired(flag) {
+      this.field.options.required = flag;
+      this.buildFieldRules();
+      if (!this.designState && !flag) {
+        this.clearValidate();
+      }
     },
     /**
      * 清除字段校验提示
      */
     clearValidate() {
-      this.designState || this.getFormRef().getNativeForm().clearValidate(this.getPropName());
+      if (!!this.designState) {
+        return;
+      }
+      this.getFormRef().getNativeForm().clearValidate(this.getPropName());
     },
     getVfCtx() {
       return this.getFormRef().vfCtx;
     },
-    setLabel(i) {
-      this.field.options.label = i;
+    setLabel(newLabel) {
+      this.field.options.label = newLabel;
     },
     focus() {
-      this.getFieldEditor() && this.getFieldEditor().focus && this.getFieldEditor().focus();
+      if (!!this.getFieldEditor() && !!this.getFieldEditor().focus) {
+        this.getFieldEditor().focus();
+      }
     },
     clearSelectedOptions() {
-      this.field.type !== "checkbox" && this.field.type !== "radio" && this.field.type !== "select" || (this.field.type === "checkbox" || this.field.type === "select" && this.field.options.multiple ? this.fieldModel = [] : this.fieldModel = "");
+      if (this.field.type !== "checkbox" && this.field.type !== "radio" && this.field.type !== "select") {
+        return;
+      }
+      if (this.field.type === "checkbox" || this.field.type === "select" && this.field.options.multiple) {
+        this.fieldModel = [];
+      } else {
+        this.fieldModel = "";
+      }
     },
     /**
      * 加载选项，并清空字段值
      * @param options
      */
-    loadOptions(i) {
-      this.field.options.optionItems = h(
-        i,
+    loadOptions(options) {
+      this.field.options.optionItems = translateOptionItems(
+        options,
         this.field.type,
         this.field.options.labelKey || "label",
         this.field.options.valueKey || "value"
@@ -389,19 +683,19 @@ const F = {
      * 重新加载选项，不清空字段值
      * @param options
      */
-    reloadOptions(i) {
-      this.field.options.optionItems = h(
-        i,
+    reloadOptions(options) {
+      this.field.options.optionItems = translateOptionItems(
+        options,
         this.field.type,
         this.field.options.labelKey || "label",
         this.field.options.valueKey || "value"
       );
     },
-    disableOption(i) {
-      this.disableOptionOfList(this.field.options.optionItems, i);
+    disableOption(optionValue) {
+      this.disableOptionOfList(this.field.options.optionItems, optionValue);
     },
-    enableOption(i) {
-      this.enableOptionOfList(this.field.options.optionItems, i);
+    enableOption(optionValue) {
+      this.enableOptionOfList(this.field.options.optionItems, optionValue);
     },
     /**
      * 返回选择项
@@ -410,14 +704,14 @@ const F = {
     getOptionItems() {
       return this.field.options.optionItems;
     },
-    setUploadHeader(i, t) {
-      this.uploadHeaders[i] = t;
+    setUploadHeader(name, value) {
+      this.uploadHeaders[name] = value;
     },
-    setUploadData(i, t) {
-      this.uploadData[i] = t;
+    setUploadData(name, value) {
+      this.uploadData[name] = value;
     },
-    setToolbar(i) {
-      this.customToolbar = i;
+    setToolbar(customToolbar) {
+      this.customToolbar = customToolbar;
     },
     /**
      * 是否子表单内嵌的字段组件
@@ -437,31 +731,41 @@ const F = {
      * 设置或取消设置字段只读查看模式
      * @param readonlyFlag
      */
-    setReadMode(i = !0) {
-      this.fieldReadonlyFlag = i;
+    setReadMode(readonlyFlag = true) {
+      this.fieldReadonlyFlag = readonlyFlag;
     },
     /**
      * 动态增加自定义css样式
      * @param className
      */
-    addCssClass(i) {
-      this.field.options.customClass ? this.field.options.customClass.push(i) : this.field.options.customClass = [i];
+    addCssClass(className) {
+      if (!this.field.options.customClass) {
+        this.field.options.customClass = [className];
+      } else {
+        this.field.options.customClass.push(className);
+      }
     },
     /**
      * 动态移除自定义css样式
      * @param className
      */
-    removeCssClass(i) {
-      if (!this.field.options.customClass)
+    removeCssClass(className) {
+      if (!this.field.options.customClass) {
         return;
-      let t = -1;
-      this.field.options.customClass.map((e, s) => {
-        e === i && (t = s);
-      }), t > -1 && this.field.options.customClass.splice(t, 1);
+      }
+      let foundIdx = -1;
+      this.field.options.customClass.map((cc, idx) => {
+        if (cc === className) {
+          foundIdx = idx;
+        }
+      });
+      if (foundIdx > -1) {
+        this.field.options.customClass.splice(foundIdx, 1);
+      }
     }
     //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
   }
 };
 export {
-  F as default
+  fieldMixin as default
 };