tdesign-pro-component/dist/es/ProForm-tiWSlLM0.js

ProComponents tdesign-vue-next + Vue3 + TS

import "lodash-es";
import { g as F, w as B } from "./utils-CIySOLoe.js";
import { defineComponent as T, ref as P, computed as q, onMounted as U, watch as $, createVNode as m, Fragment as j, mergeProps as y, createTextVNode as J, resolveComponent as L, isVNode as M } from "vue";
import { MessagePlugin as X, Loading as _, Form as z, Row as G, FormItem as x, Col as h, Button as S, Upload as H } from "tdesign-vue-next";
import { P as I } from "./ProFormText-CWNgg2o3.js";
import { P as Q } from "./ProFormSelect-CTZGhQlG.js";
import { P as W } from "./ProFormRadio-B6zkqihe.js";
import { P as Y } from "./ProFormCheckbox-CXrn2e7I.js";
import { P as Z } from "./ProFormTextarea-CdYcVowX.js";
import { P as ee } from "./ProFormDatePicker-C2i1BPCB.js";
import { P as te } from "./ProFormInputNumber-Ct1jG3UC.js";
import { P as ae } from "./ProFormDatePickerRange-DssVHvug.js";
import "./ProFormBuilder-hH2sdzX9.js";
function g(t, r) {
  const l = {};
  return t.forEach((n) => {
    var a;
    [null, void 0].includes(r[n.name]) ? n.type === void 0 || ["text", "textarea", "radio", "number"].includes(n.type) ? l[n.name] = "" : ["select", "treeSelect"].includes(n.type) ? l[n.name] = (a = n.selectProps) != null && a.multiple ? [] : "" : ["checkbox", "upload"].includes(n.type) ? l[n.name] = [] : n.type === "date" ? l[n.name] = null : n.type === "date-range" ? l[n.name] = [] : l[n.name] = "" : l[n.name] = r[n.name];
  }), l;
}
function ne(t, r) {
  const l = {};
  return Object.keys(t).forEach((n) => {
    var s;
    const a = r.find((u) => u.name === n);
    a && ([null, void 0].includes(t[a.name]) ? a.type === void 0 || ["text", "textarea", "radio", "number"].includes(a.type) ? l[a.name] = "" : ["select", "treeSelect"].includes(a.type) ? l[a.name] = (s = a.selectProps) != null && s.multiple ? [] : "" : ["checkbox", "upload"].includes(a.type) ? l[a.name] = [] : a.type === "date" ? l[a.name] = null : a.type === "date-range" ? l[a.name] = [] : l[a.name] = a.type === "upload" ? [] : "" : a.type === "upload" ? typeof t[a.name] == "string" ? l[a.name] = t[a.name].split(",").map((u) => ({
      url: `${u}`,
      name: u.split("/").pop()
    })) : (l[a.name] = [], t[a.name].forEach((u) => {
      typeof u == "string" ? l[a.name].push({
        url: `${u}`,
        name: u.split("/").pop()
      }) : l[a.name].push({
        ...u,
        url: u[a.urlName || "url"]
      });
    })) : l[a.name] = t[a.name]);
  }), l;
}
function A(t, r, l = {}) {
  for (let n in t)
    if (r.hasOwnProperty(n))
      if (typeof t[n] == "object" && typeof r[n] == "object") {
        let a = {};
        A(t[n], r[n], a), Object.keys(a).length > 0 && (l[n] = a);
      } else t[n] !== r[n] && (l[n] = r[n]);
    else
      l[n] = void 0;
  for (let n in r)
    t.hasOwnProperty(n) || (l[n] = r[n]);
  return l;
}
function p(t) {
  const r = {};
  for (let l in t)
    if (t.hasOwnProperty(l)) {
      const n = t[l];
      typeof n == "object" ? Array.isArray(n) && n.length && (r[l] = n) : r[l] = n;
    }
  return r;
}
function O(t) {
  const r = {};
  for (let l in t)
    if (t.hasOwnProperty(l)) {
      const n = t[l];
      (typeof n == "object" || n !== "" && n !== void 0 && n !== null) && (r[l] = n);
    }
  return r;
}
function le(t) {
  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !M(t);
}
const k = {
  text: {
    propsKey: "textProps",
    component: I
  },
  radio: {
    propsKey: "radioProps",
    component: W
  },
  checkbox: {
    propsKey: "checkboxProps",
    component: Y
  },
  select: {
    propsKey: "selectProps",
    component: Q
  },
  date: {
    propsKey: "datePickerProps",
    component: ee
  },
  "date-range": {
    propsKey: "datePickerRangeProps",
    component: ae
  },
  number: {
    propsKey: "numberProps",
    component: te
  },
  textarea: {
    propsKey: "textareaProps",
    component: Z
  }
};
let v = {};
const re = /* @__PURE__ */ T((t, {
  slots: r,
  emit: l,
  expose: n
}) => {
  const a = P({}), s = P(!1), u = q(() => {
    var e;
    return ((e = t.options) == null ? void 0 : e.filter((o) => !o.hidden)) || [];
  }), c = P(), d = F("footer", r, t)(), C = F("extral", r, t)();
  U(() => {
    v = t.initalData || {}, E();
  });
  function E() {
    b();
  }
  function R() {
    a.value = g(t.options || [], a.value || {});
  }
  function b() {
    t.request ? (s.value = !0, t.request().then((e) => {
      e ? a.value = g(u.value, ne(e, u.value)) : a.value = g(u.value, t.initalData || {}), JSON.stringify(v) == "{}" && (v = a.value);
    }).catch((e) => {
      X.error(e);
    }).finally(() => {
      s.value = !1;
    })) : t.initalData && (a.value = g(u.value, t.initalData || {}));
  }
  function V(e, o) {
    var f;
    l("change", e, o), a.value[e] = o;
    const i = u.value.find((N) => N.name === e);
    (f = i == null ? void 0 : i.onChange) == null || f.call(i, o, e);
  }
  function w() {
    var e;
    (e = c.value) == null || e.validate().then((o) => {
      if (o) {
        if (t.onSubmit) {
          s.value = !0;
          let i = t.increment ? A(v, a.value) : a.value;
          i = t.filterEmptyStr ? O(i) : i, i = t.filterEmptyArray ? p(i) : i, t.onSubmit(i).then(() => {
            t.onSuccess && t.onSuccess();
          }).catch((f) => {
            t.onFail && t.onFail(f);
          }).finally(() => {
            s.value = !1;
          });
        }
      } else
        t.onFail && t.onFail(o);
    });
  }
  $(() => t.options, () => {
    R();
  }, {
    deep: !0
  }), n({
    setItem: (e, o) => {
      a.value[e] = o;
    },
    getItem: (e) => a.value[e],
    resetRequest: b,
    validate: async () => {
      var e;
      return await ((e = c.value) == null ? void 0 : e.validate());
    },
    submit: () => {
      var e;
      (e = c.value) == null || e.submit();
    },
    reset: () => {
      var e;
      (e = c.value) == null || e.reset();
    },
    getFormInstance: () => c.value,
    getFormValue: () => {
      let e = a.value;
      return e = t.filterEmptyStr ? O(e) : e, e = t.filterEmptyArray ? p(e) : e, e;
    }
  });
  const D = ({
    option: e
  }) => {
    var i;
    const o = ((i = k[e.type || "text"]) == null ? void 0 : i.component) || I;
    return e.type !== "upload" ? e.hidden ? null : m(h, {
      span: e.span || 6
    }, {
      default: () => [r[e.name] && r[e.name]({
        option: e
      }) ? r[e.name]({
        option: e
      }) : m(o, y({
        modelValue: a.value[e.name],
        "onUpdate:modelValue": (f) => a.value[e.name] = f,
        label: e.label,
        placeholder: e.placeholder,
        name: e.name,
        readonly: t.readonly || e.readonly,
        disabled: t.disabled || e.disabled,
        rules: e.rules,
        data: e.data
      }, {
        //@ts-ignore
        ...e[k[e.type || "text"].propsKey],
        onChange: (f) => {
          V(e.name, f);
        }
      }, {
        formItemProps: e.formItemProps
      }), null)]
    }) : e.hidden ? null : m(h, {
      span: e.span || 6
    }, {
      default: () => [r[e.name] && r[e.name]({
        option: e
      }) ? r[e.name]({
        option: e
      }) : m(L("t-form-item"), y({
        label: e.label,
        name: e.name,
        rules: e.rules
      }, e.formItemProps), {
        default: () => [m(H, y({
          modelValue: a.value[e.name],
          "onUpdate:modelValue": (f) => a.value[e.name] = f,
          readonly: t.readonly || e.readonly,
          disabled: t.disabled || e.disabled
        }, e.uploadProps), null)]
      })]
    });
  }, K = () => m(G, {
    gutter: [0, t.gap === void 0 ? 20 : t.gap]
  }, {
    default: () => [
      //@ts-ignore
      u.value.map((e) => m(D, {
        key: e.name,
        option: e
      }, null)),
      d ? m(x, {
        style: {
          flex: 1
        }
      }, le(d) ? d : {
        default: () => [d]
      }) : !t.hideFooter && m(h, {
        span: Number(t.footerSpan)
      }, {
        default: () => [J(" "), m(x, {
          style: "display: flex; justify-content: right;"
        }, {
          default: () => [m("div", {
            style: "margin-right:16px"
          }, [C]), m(S, {
            type: "submit"
          }, {
            default: () => [t.submitText]
          }), !t.hideReset && m(S, {
            style: "margin-left:16px;",
            type: "reset",
            theme: "default"
          }, {
            default: () => [t.resetText]
          })]
        })]
      })
    ]
  });
  return () => m(j, null, [m(_, {
    loading: s.value
  }, {
    default: () => [m(z, y({
      "validate-trigger": "blur",
      labelAlign: t.labelAlign,
      rules: t.rules
    }, t.formProps, {
      data: a.value,
      ref: c,
      onSubmit: w
    }), {
      default: () => r.default ? r.default() : m(K, null, null)
    })]
  })]);
}, {
  name: "ProForm",
  emits: ["change", "submit"],
  props: {
    options: {
      type: Array,
      default: () => []
    },
    request: Function,
    initalData: Object,
    onSubmit: Function,
    footer: [String, Function, Object],
    onSuccess: Function,
    onFail: Function,
    increment: Boolean,
    readonly: Boolean,
    disabled: Boolean,
    submitText: {
      type: String,
      default: "提交"
    },
    resetText: {
      type: String,
      default: "重置"
    },
    hideReset: Boolean,
    extral: [String, Function, Object],
    formProps: Object,
    labelAlign: String,
    rules: Object,
    footerAligin: String,
    hideFooter: Boolean,
    gap: Number,
    footerSpan: {
      type: [Number, String],
      default: 12
    },
    filterEmptyStr: Boolean,
    filterEmptyArray: Boolean,
    onChage: Function
  }
}), be = B(re);
export {
  be as P
};