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

ProComponents tdesign-vue-next + Vue3 + TS

import "lodash-es";
import { g as F, w as T } from "./utils-CIySOLoe.js";
import { defineComponent as q, ref as P, computed as U, onMounted as $, watch as j, createVNode as u, Fragment as J, mergeProps as y, createTextVNode as L, resolveComponent as M, isVNode as X } from "vue";
import { MessagePlugin as _, Loading as z, Form as G, Space as S, FormItem as x, Col as b, Button as p, Upload as H } from "tdesign-vue-next";
import { P as A } from "./ProFormText-CWNgg2o3.js";
import { P as Q } from "./ProFormSelect-CTZGhQlG.js";
import { P as W } from "./ProFormRadio-BB5rdi81.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-dcWrLCY7.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((m) => m.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((m) => ({
      url: `${m}`,
      name: m.split("/").pop()
    })) : (l[a.name] = [], t[a.name].forEach((m) => {
      typeof m == "string" ? l[a.name].push({
        url: `${m}`,
        name: m.split("/").pop()
      }) : l[a.name].push({
        ...m,
        url: m[a.urlName || "url"]
      });
    })) : l[a.name] = t[a.name]);
  }), l;
}
function C(t, r, l = {}) {
  for (let n in t)
    if (r.hasOwnProperty(n))
      if (typeof t[n] == "object" && typeof r[n] == "object") {
        let a = {};
        C(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 O(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 k(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]" && !X(t);
}
const I = {
  text: {
    propsKey: "textProps",
    component: A
  },
  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__ */ q((t, {
  slots: r,
  emit: l,
  expose: n
}) => {
  const a = P({}), s = P(!1), m = U(() => {
    var e;
    return ((e = t.options) == null ? void 0 : e.filter((o) => !o.hidden)) || [];
  }), c = P(), d = F("footer", r, t)(), E = F("extral", r, t)();
  $(() => {
    v = t.initalData || {}, R();
  });
  function R() {
    h();
  }
  function V() {
    a.value = g(t.options || [], a.value || {});
  }
  function h() {
    t.request ? (s.value = !0, t.request().then((e) => {
      e ? a.value = g(m.value, ne(e, m.value)) : a.value = g(m.value, t.initalData || {}), JSON.stringify(v) == "{}" && (v = a.value);
    }).catch((e) => {
      _.error(e);
    }).finally(() => {
      s.value = !1;
    })) : t.initalData && (a.value = g(m.value, t.initalData || {}));
  }
  function D(e, o) {
    var f;
    l("change", e, o), a.value[e] = o;
    const i = m.value.find((B) => B.name === e);
    (f = i == null ? void 0 : i.onChange) == null || f.call(i, o, e);
  }
  function K() {
    var e;
    (e = c.value) == null || e.validate().then((o) => {
      if (o) {
        if (t.onSubmit) {
          s.value = !0;
          let i = t.increment ? C(v, a.value) : a.value;
          i = t.filterEmptyStr ? k(i) : i, i = t.filterEmptyArray ? O(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);
    });
  }
  j(() => t.options, () => {
    V();
  }, {
    deep: !0
  }), n({
    setItem: (e, o) => {
      a.value[e] = o;
    },
    getItem: (e) => a.value[e],
    resetRequest: h,
    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 ? k(e) : e, e = t.filterEmptyArray ? O(e) : e, e;
    }
  });
  const N = ({
    option: e
  }) => {
    var i;
    const o = ((i = I[e.type || "text"]) == null ? void 0 : i.component) || A;
    return e.type !== "upload" ? e.hidden ? null : u(b, {
      span: e.span || 6
    }, {
      default: () => [r[e.name] && r[e.name]({
        option: e
      }) ? r[e.name]({
        option: e
      }) : u(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[I[e.type || "text"].propsKey],
        onChange: (f) => {
          D(e.name, f);
        }
      }, {
        formItemProps: e.formItemProps
      }), null)]
    }) : e.hidden ? null : u(b, {
      span: e.span || 6
    }, {
      default: () => [r[e.name] && r[e.name]({
        option: e
      }) ? r[e.name]({
        option: e
      }) : u(M("t-form-item"), y({
        label: e.label,
        name: e.name,
        rules: e.rules
      }, e.formItemProps), {
        default: () => [u(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)]
      })]
    });
  }, w = () => u(S, {
    gutter: [12, 24]
  }, {
    default: () => [
      //@ts-ignore
      m.value.map((e) => u(N, {
        key: e.name,
        option: e
      }, null)),
      d ? u(x, {
        style: {
          flex: 1
        }
      }, le(d) ? d : {
        default: () => [d]
      }) : !t.hideFooter && u(b, {
        span: Number(t.footerSpan)
      }, {
        default: () => [L(" "), u(x, {
          style: "display: flex; justify-content: right;"
        }, {
          default: () => [u(S, null, {
            default: () => [u("div", null, [E]), u(p, {
              type: "submit"
            }, {
              default: () => [t.submitText]
            }), !t.hideReset && u(p, {
              type: "reset",
              theme: "default"
            }, {
              default: () => [t.resetText]
            })]
          })]
        })]
      })
    ]
  });
  return () => u(J, null, [u(z, {
    loading: s.value
  }, {
    default: () => [u(G, y({
      "validate-trigger": "blur",
      labelAlign: t.labelAlign,
      rules: t.rules
    }, t.formProps, {
      data: a.value,
      ref: c,
      onSubmit: K
    }), {
      default: () => r.default ? r.default() : u(w, 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
  }
}), he = T(re);
export {
  he as P
};