@kp-ui/lowcode 1.0.3 → 1.0.21

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

@@ -0,0 +1,467 @@
+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 = {
+  inject: [
+    "refList",
+    "getFormConfig",
+    "globalOptionData",
+    "globalModel",
+    "getOptionData",
+    "getGlobalDsv",
+    "getReadMode",
+    "getSubFormFieldFlag",
+    "getSubFormName",
+    "getDSResultCache"
+  ],
+  data() {
+    return {
+      fieldReadonlyFlag: !1,
+      loading: !1
+    };
+  },
+  computed: {
+    formConfig() {
+      return this.getFormConfig();
+    },
+    subFormName() {
+      return this.getSubFormName ? this.getSubFormName() : "";
+    },
+    subFormItemFlag() {
+      return this.getSubFormFieldFlag ? this.getSubFormFieldFlag() : !1;
+    },
+    formModel: {
+      cache: !1,
+      get() {
+        return this.globalModel.formModel;
+      }
+    },
+    isReadMode() {
+      return this.getReadMode() ? !0 : this.fieldReadonlyFlag;
+    },
+    optionLabel() {
+      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;
+      }
+    }
+  },
+  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;
+    },
+    handleDisabled() {
+      if (this.designState)
+        return !1;
+      const { onDisabled: i, disabled: t } = this.field.options;
+      return t ? !0 : i ? new Function(i).call(this) : !1;
+    },
+    findInArray(i, t) {
+      if (!Array.isArray(i))
+        return -1;
+      let e = -1;
+      return i.forEach((s, n) => {
+        s === t && (e = n);
+      }), e;
+    },
+    //--------------------- 组件内部方法 begin ------------------//
+    getPropName() {
+      return this.subFormItemFlag && !this.designState ? this.subFormName + "." + this.subFormRowIndex + "." + this.field.options.name : 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;
+        }
+        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();
+      }
+    },
+    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)));
+    },
+    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);
+      });
+    },
+    handleOnCreated() {
+      this.designState || this.field.options.onCreated && new Function(this.field.options.onCreated).call(this);
+    },
+    handleOnMounted() {
+      this.designState || this.field.options.onMounted && new Function(this.field.options.onMounted).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));
+    },
+    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];
+      }
+    },
+    clearOptionItems() {
+      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))
+          try {
+            const s = await r.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);
+          }
+        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;
+      }
+    },
+    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)
+        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]));
+    },
+    refreshDefaultValue() {
+      this.designState === !0 && this.field.options.defaultValue !== void 0 && (this.fieldModel = this.field.options.defaultValue);
+    },
+    clearFieldRules() {
+      this.field.formItemFlag && 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,
+          //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],
+            trigger: ["blur", "change"],
+            label: this.field.options.label,
+            errorMsg: this.field.options.validationHint
+          }) : this.rules.push({
+            validator: l.regExp,
+            trigger: ["blur", "change"],
+            regExp: i,
+            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
+          });
+        }
+      }
+    },
+    /**
+     * 禁用字段值变动触发表单校验
+     */
+    disableChangeValidate() {
+      this.rules && this.rules.forEach((i) => {
+        i.trigger && i.trigger.splice(0, i.trigger.length);
+      });
+    },
+    /**
+     * 启用字段值变动触发表单校验
+     */
+    enableChangeValidate() {
+      this.rules && this.rules.forEach((i) => {
+        i.trigger && (i.trigger.push("blur"), i.trigger.push("change"));
+      });
+    },
+    disableOptionOfList(i, t) {
+      i && i.length > 0 && i.forEach((e) => {
+        e.value === t && (e.disabled = !0);
+      });
+    },
+    enableOptionOfList(i, t) {
+      i && i.length > 0 && i.forEach((e) => {
+        e.value === t && (e.disabled = !1);
+      });
+    },
+    //--------------------- 组件内部方法 end ------------------//
+    //--------------------- 事件处理 begin ------------------//
+    emitFieldDataChange(i, t) {
+      i && (i = i.target ? i.target.value : i), this.emit$("field-value-changed", [i, t]), this.dispatch("VFormRender", "fieldChange", [
+        this.field.options.name,
+        i,
+        t,
+        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;
+    },
+    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()]));
+    },
+    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()));
+    },
+    handleBlurCustomEvent(i) {
+      this.designState || this.field.options.onBlur && new Function("event", this.field.options.onBlur).call(this, i);
+    },
+    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));
+    },
+    emitAppendButtonClick() {
+      this.designState || (this.field.options.onAppendButtonClick ? new Function(this.field.options.onAppendButtonClick).call(this) : 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]);
+    },
+    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);
+    },
+    onClick() {
+      if (!this.designState) {
+        if (this.field.options.onClick)
+          return new Function(this.field.options.onClick).call(this);
+        this.dispatch("VFormRender", "buttonClick", [this]);
+      }
+    },
+    handleButtonWidgetClick() {
+      if (!this.designState) {
+        if (this.field.options.onClick)
+          return new Function(this.field.options.onClick).call(this);
+        this.dispatch("VFormRender", "buttonClick", [this]);
+      }
+    },
+    /**
+     * 下拉框右边搜索按钮
+     */
+    handleClickIcon() {
+      this.designState || this.handleDisabled() || this.field.options.onClickIcon && new Function(this.field.options.onClickIcon).call(this);
+    },
+    // remoteQuery(keyword) {
+    //   if (!!this.designState) {
+    //     //设计状态不触发事件
+    //     return;
+    //   }
+    //   if (!!this.field.options.onRemoteQuery) {
+    //     const remoteFn = new Function('keyword', this.field.options.onRemoteQuery);
+    //     remoteFn.call(this, keyword);
+    //   }
+    // },
+    //--------------------- 事件处理 end ------------------//
+    //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
+    /* 提示：用户可自行扩充这些方法！！！ */
+    getFormRef() {
+      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;
+    },
+    getFieldEditor() {
+      return this.$refs.fieldEditor;
+    },
+    showFileList(i) {
+      return d(i) ? i.map((e, s) => ({
+        ...e,
+        name: e.fileName,
+        uid: s
+      })) : [];
+    },
+    /*
+      注意：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);
+      }
+    },
+    getValue() {
+      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));
+    },
+    setWidgetOption(i, t) {
+      this.field.options.hasOwnProperty(i) && (this.field.options[i] = t);
+    },
+    setReadonly(i) {
+      this.field.options.readonly = i;
+    },
+    setDisabled(i) {
+      this.field.options.disabled = i;
+    },
+    setAppendButtonVisible(i) {
+      this.field.options.appendButton = i;
+    },
+    setAppendButtonDisabled(i) {
+      this.field.options.appendButtonDisabled = i;
+    },
+    setHidden(i) {
+      this.field.options.hidden = i, i ? this.clearFieldRules() : this.buildFieldRules();
+    },
+    setRequired(i) {
+      this.field.options.required = i, this.buildFieldRules(), !this.designState && !i && this.clearValidate();
+    },
+    /**
+     * 清除字段校验提示
+     */
+    clearValidate() {
+      this.designState || this.getFormRef().getNativeForm().clearValidate(this.getPropName());
+    },
+    getVfCtx() {
+      return this.getFormRef().vfCtx;
+    },
+    setLabel(i) {
+      this.field.options.label = i;
+    },
+    focus() {
+      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 = "");
+    },
+    /**
+     * 加载选项，并清空字段值
+     * @param options
+     */
+    loadOptions(i) {
+      this.field.options.optionItems = h(
+        i,
+        this.field.type,
+        this.field.options.labelKey || "label",
+        this.field.options.valueKey || "value"
+      );
+    },
+    /**
+     * 重新加载选项，不清空字段值
+     * @param options
+     */
+    reloadOptions(i) {
+      this.field.options.optionItems = h(
+        i,
+        this.field.type,
+        this.field.options.labelKey || "label",
+        this.field.options.valueKey || "value"
+      );
+    },
+    disableOption(i) {
+      this.disableOptionOfList(this.field.options.optionItems, i);
+    },
+    enableOption(i) {
+      this.enableOptionOfList(this.field.options.optionItems, i);
+    },
+    /**
+     * 返回选择项
+     * @returns {*}
+     */
+    getOptionItems() {
+      return this.field.options.optionItems;
+    },
+    setUploadHeader(i, t) {
+      this.uploadHeaders[i] = t;
+    },
+    setUploadData(i, t) {
+      this.uploadData[i] = t;
+    },
+    setToolbar(i) {
+      this.customToolbar = i;
+    },
+    /**
+     * 是否子表单内嵌的字段组件
+     * @returns {boolean}
+     */
+    isSubFormItem() {
+      return this.subFormItemFlag;
+    },
+    /**
+     * 是否子表单内嵌的字段组件
+     * @returns {boolean}
+     */
+    isSubFormField() {
+      return this.subFormItemFlag;
+    },
+    /**
+     * 设置或取消设置字段只读查看模式
+     * @param readonlyFlag
+     */
+    setReadMode(i = !0) {
+      this.fieldReadonlyFlag = i;
+    },
+    /**
+     * 动态增加自定义css样式
+     * @param className
+     */
+    addCssClass(i) {
+      this.field.options.customClass ? this.field.options.customClass.push(i) : this.field.options.customClass = [i];
+    },
+    /**
+     * 动态移除自定义css样式
+     * @param className
+     */
+    removeCssClass(i) {
+      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);
+    }
+    //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
+  }
+};
+export {
+  F as default
+};

package/es/components/form-designer/form-widget/field-widget/file-upload-widget.vue.js

@@ -0,0 +1,88 @@
+import w from "./file-upload-widget.vue2.js";
+import { resolveComponent as o, createBlock as y, createCommentVNode as h, openBlock as n, withCtx as s, createVNode as a, createElementVNode as c, normalizeClass as R, createTextVNode as C, createElementBlock as r, Fragment as x, renderList as k, toDisplayString as m } from "vue";
+/* empty css                        */
+import I from "../../../../_virtual/_plugin-vue_export-helper.js";
+const L = ["loading", "disabled"], T = {
+  gutter: 20,
+  class: "fileUploadTip"
+}, F = { key: 0 }, P = { key: 1 }, V = ["src"];
+function N(l, u, e, S, i, t) {
+  const p = o("SvgIcon"), _ = o("a-space"), g = o("a-upload"), b = o("a-modal"), v = o("form-item-wrapper");
+  return l.handleHidden() ? h("", !0) : (n(), y(v, {
+    key: 0,
+    designer: e.designer,
+    field: e.field,
+    rules: i.rules,
+    "design-state": e.designState,
+    "parent-widget": e.parentWidget,
+    "parent-list": e.parentList,
+    "index-of-parent-list": e.indexOfParentList,
+    "sub-form-row-index": e.subFormRowIndex,
+    "sub-form-col-index": e.subFormColIndex,
+    "sub-form-row-id": e.subFormRowId
+  }, {
+    default: s(() => [
+      a(g, {
+        ref: "fieldEditor",
+        disabled: l.handleDisabled() || l.isReadMode,
+        class: R(["dynamicPseudoAfter", ["tpf-upload", { isReadonly: l.isReadMode }]]),
+        multiple: e.field.options.multiple,
+        accept: t.acceptType,
+        maxCount: e.field.options.limit,
+        "file-list": i.fileList,
+        "onUpdate:fileList": u[0] || (u[0] = (d) => i.fileList = d),
+        listType: e.field.options.uploadListType,
+        customRequest: t.customRequest,
+        iconRender: t.iconRender,
+        onPreview: t.handlePreview,
+        onRemove: t.removeFile
+      }, {
+        default: s(() => [
+          a(_, {
+            size: 10,
+            align: "start"
+          }, {
+            default: s(() => [
+              c("div", {
+                loading: i.loading,
+                class: "tpf-button",
+                type: "primary",
+                disabled: l.handleDisabled()
+              }, [
+                a(p, { "icon-class": "daochu" }),
+                C(" 上传文件 ")
+              ], 8, L)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["disabled", "class", "multiple", "accept", "maxCount", "file-list", "listType", "customRequest", "iconRender", "onPreview", "onRemove"]),
+      c("div", T, [
+        (n(!0), r(x, null, k(t.descCol, (d, f) => (n(), r("div", { key: f }, [
+          t.descCol.length > 1 ? (n(), r("span", F, m(f + 1) + "、" + m(d), 1)) : (n(), r("span", P, m(d), 1))
+        ]))), 128))
+      ]),
+      a(b, {
+        visible: i.previewVisible,
+        class: "tpf-modal",
+        title: i.previewTitle,
+        footer: null,
+        onCancel: t.handleCancel
+      }, {
+        default: s(() => [
+          c("img", {
+            style: { width: "100%" },
+            src: i.previewImage
+          }, null, 8, V)
+        ]),
+        _: 1
+      }, 8, ["visible", "title", "onCancel"])
+    ]),
+    _: 1
+  }, 8, ["designer", "field", "rules", "design-state", "parent-widget", "parent-list", "index-of-parent-list", "sub-form-row-index", "sub-form-col-index", "sub-form-row-id"]));
+}
+const U = /* @__PURE__ */ I(w, [["render", N], ["__scopeId", "data-v-4b4d49bf"]]);
+export {
+  U as default
+};