@web-utils/component 2.7.36 → 2.8.0

package/fy-form/index.mjs

@@ -0,0 +1,777 @@
+var k = (t, i, s) => new Promise((r, p) => {
+  var e = (o) => {
+    try {
+      a(s.next(o));
+    } catch (d) {
+      p(d);
+    }
+  }, n = (o) => {
+    try {
+      a(s.throw(o));
+    } catch (d) {
+      p(d);
+    }
+  }, a = (o) => o.done ? r(o.value) : Promise.resolve(o.value).then(e, n);
+  a((s = s.apply(t, i)).next());
+});
+import { d as N } from "../chunks/detail.6e53ede8.mjs";
+import { i as j } from "../chunks/init.f04c7036.mjs";
+import { s as _, d as S, u as L, x as V, g as z, v as $, D as I, o as M, y as A } from "../chunks/util.17330567.mjs";
+import { b as B, c as W, g as R, a as G, f as H } from "../chunks/dataformat.25e22176.mjs";
+import { s as U } from "../chunks/dic.e8280157.mjs";
+import { p as q } from "../chunks/packages.1fc9ccba.mjs";
+import { isBlank as u } from "@web-utils/core";
+import { n as K } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+const J = (t, i, s, r) => {
+  if (!r)
+    return;
+  if (!window.Mock) {
+    q.logs("mock");
+    return;
+  }
+  const e = (window.Mock || {}).Random, n = {};
+  function a({ en: h }) {
+    return h ? e.name(!0) : e.cname();
+  }
+  function o({ max: h, min: l, precision: f }) {
+    if (f) {
+      const c = `${e.float(l, h, f)}`, m = c.indexOf(".") + 1;
+      return Number(c.substring(0, m + f));
+    } else
+      return e.integer(l, h);
+  }
+  function d({ header: h, footer: l }) {
+    let f = e.url();
+    const c = f.indexOf("://");
+    return h === !1 ? f = f.substring(c + 3) : f = `http://${f.substring(c + 3)}`, f;
+  }
+  function F({ format: h, now: l }) {
+    return l ? e.now(h) : e.datetime(h);
+  }
+  function C({ min: h, max: l }) {
+    return e.csentence(h, l);
+  }
+  function T() {
+    return e.county(!0);
+  }
+  function w({ dic: h, props: l, columnType: f, multiple: c }) {
+    const m = l.value || "value", b = h.length;
+    if (["checkbox"].includes(f) || c) {
+      const v = o({ min: 1, max: b }), y = [];
+      for (let O = 0; O < v; O++) {
+        let g = !0;
+        for (; g; ) {
+          const P = o({ min: 0, max: b - 1 }), D = h[P][m];
+          y.includes(D) || (y.push(D), g = !1);
+        }
+      }
+      return y;
+    } else {
+      const v = o({ min: 0, max: b - 1 });
+      return h[v][m];
+    }
+  }
+  function E() {
+    Object.keys(t).forEach((h) => {
+      const l = t[h];
+      if (l.mock && typeof l.mock == "object") {
+        const f = l.mock;
+        switch (f.dic = typeof l.dicData == "string" ? i[l.dicData] : l.dicData || [], f.props = l.props || {}, f.columnType = l.type, f.multiple = l.multiple, f.type) {
+          case "name":
+            n[l.prop] = a(f);
+            break;
+          case "number":
+            n[l.prop] = o(f);
+            break;
+          case "datetime":
+            n[l.prop] = F(f);
+            break;
+          case "word":
+            n[l.prop] = C(f);
+            break;
+          case "url":
+            n[l.prop] = d(f);
+            break;
+          case "county":
+            n[l.prop] = T();
+            break;
+          case "dic":
+            n[l.prop] = w(f);
+            break;
+        }
+      } else
+        l.mock instanceof Function && (n[l.prop] = l.mock(s));
+    });
+  }
+  return E(), n;
+};
+var Q = function() {
+  var t = this, i = t.$createElement, s = t._self._c || i;
+  return s("div", {
+    class: ["avue-form", {
+      "avue--detail": t.isDetail
+    }],
+    style: {
+      width: t.setPx(t.parentOption.formWidth, "100%")
+    }
+  }, [s("ElForm", {
+    ref: "form",
+    attrs: {
+      "status-icon": t.parentOption.statusIcon,
+      model: t.form,
+      "label-suffix": t.labelSuffix,
+      size: t.$AVUE.formSize || t.controlSize,
+      "label-position": t.parentOption.labelPosition,
+      "label-width": t.setPx(t.parentOption.labelWidth, t.labelWidth)
+    },
+    nativeOn: {
+      submit: function(r) {
+        r.preventDefault();
+      }
+    }
+  }, [s("ElRow", {
+    class: {
+      "avue-form__tabs": t.isTabs
+    },
+    attrs: {
+      span: 24
+    }
+  }, [t._l(t.columnOption, function(r, p) {
+    return s("FormGroup", {
+      key: r.prop,
+      attrs: {
+        tabs: t.isTabs,
+        arrow: r.arrow,
+        collapse: r.collapse,
+        display: t.vaildDisplay(r),
+        icon: r.icon,
+        index: p,
+        header: !t.isTabs,
+        active: t.activeName,
+        label: r.label
+      },
+      on: {
+        change: t.handleGroupClick
+      },
+      scopedSlots: t._u([t.getSlotName(r, "H", t.$scopedSlots) ? {
+        key: "header",
+        fn: function() {
+          return [t._t(t.getSlotName(r, "H"), null, {
+            column: r
+          })];
+        },
+        proxy: !0
+      } : null], null, !0)
+    }, [t.isTabs && p === 1 ? s("ElTabs", {
+      staticClass: "avue-form__tabs",
+      attrs: {
+        slot: "tabs",
+        type: t.tabsType
+      },
+      on: {
+        "tab-click": t.handleTabClick
+      },
+      slot: "tabs",
+      model: {
+        value: t.activeName,
+        callback: function(e) {
+          t.activeName = e;
+        },
+        expression: "activeName"
+      }
+    }, [t._l(t.columnOption, function(e, n) {
+      return [t.vaildDisplay(e) && n !== 0 ? s("ElTabPane", {
+        key: n,
+        attrs: {
+          name: `${n}`
+        }
+      }, [s("span", {
+        attrs: {
+          slot: "label"
+        },
+        slot: "label"
+      }, [t.getSlotName(e, "H", t.$scopedSlots) ? t._t(t.getSlotName(e, "H"), null, {
+        column: t.column
+      }) : [s("i", {
+        class: e.icon
+      }, [t._v(" ")]), t._v(" " + t._s(e.label) + " ")]], 2)]) : t._e()];
+    })], 2) : t._e(), s("div", {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: t.isGroupShow(r, p),
+        expression: "isGroupShow(item, index)"
+      }],
+      class: ["avue-form__group", {
+        "avue-form__group--flex": r.flex === !1
+      }]
+    }, [t._l(r.column, function(e, n) {
+      return [t.vaildDisplay(e) ? s("ElCol", {
+        key: n,
+        class: ["avue-form__row", {
+          "avue--detail avue--detail__column": t.vaildDetail(e)
+        }, e.className],
+        style: {
+          paddingLeft: t.gutter,
+          paddingRight: t.gutter
+        },
+        attrs: {
+          span: t.getSpan(e),
+          md: t.getSpan(e),
+          sm: e.smSpan || r.smSpan || 12,
+          xs: e.xsSpan || r.xmSpan || 24,
+          offset: e.offset || r.offset,
+          push: e.push || r.push,
+          pull: e.pull || r.pull
+        }
+      }, [s("ElFormItem", {
+        class: `avue-form__item--${e.labelPosition || r.labelPosition || ""}`,
+        attrs: {
+          prop: e.prop,
+          label: e.label,
+          rules: e.rules,
+          "label-position": e.labelPosition || r.labelPosition || t.parentOption.labelPosition,
+          "label-width": t.getLabelWidth(e, r)
+        },
+        scopedSlots: t._u([t.getSlotName(e, "L", t.$scopedSlots) ? {
+          key: "label",
+          fn: function() {
+            return [t._t(t.getSlotName(e, "L"), null, {
+              column: e,
+              value: t.form[e.prop],
+              readonly: e.readonly || t.readonly,
+              disabled: t.getDisabled(e),
+              size: e.size || t.controlSize,
+              dic: t.DIC[e.prop]
+            })];
+          },
+          proxy: !0
+        } : e.labelTip ? {
+          key: "label",
+          fn: function() {
+            return [s("ElTooltip", {
+              staticClass: "item",
+              attrs: {
+                effect: "dark",
+                placement: e.labelTipPlacement || "top-start"
+              }
+            }, [s("div", {
+              attrs: {
+                slot: "content"
+              },
+              domProps: {
+                innerHTML: t._s(e.labelTip)
+              },
+              slot: "content"
+            }), s("i", {
+              staticClass: "el-icon-info"
+            })]), s("span", [t._v(" " + t._s(e.label) + t._s(t.labelSuffix))])];
+          },
+          proxy: !0
+        } : null, t.getSlotName(e, "E", t.$scopedSlots) ? {
+          key: "error",
+          fn: function(a) {
+            return [t._t(t.getSlotName(e, "E"), null, null, Object.assign(a, {
+              column: e,
+              value: t.form[e.prop],
+              readonly: t.readonly || e.readonly,
+              disabled: t.getDisabled(e),
+              size: e.size || t.controlSize,
+              dic: t.DIC[e.prop]
+            }))];
+          }
+        } : null], null, !0)
+      }, [s(t.validTip(e) ? "div" : "elTooltip", {
+        tag: "Component",
+        attrs: {
+          disabled: t.validTip(e),
+          content: e.tip || t.getPlaceholder(e),
+          placement: e.tipPlacement
+        }
+      }, [t.$scopedSlots[e.prop] ? t._t(e.prop, null, {
+        value: t.form[e.prop],
+        column: e,
+        label: t.form[`$${e.prop}`],
+        size: e.size || t.controlSize,
+        readonly: t.readonly || e.readonly,
+        disabled: t.getDisabled(e),
+        dic: t.DIC[e.prop]
+      }) : s("FormTemp", t._b({
+        ref: e.prop,
+        refInFor: !0,
+        attrs: {
+          column: e,
+          dic: t.DIC[e.prop],
+          props: t.parentOption.props,
+          "props-http": t.parentOption.propsHttp,
+          disabled: t.getDisabled(e),
+          readonly: e.readonly || t.readonly,
+          enter: t.parentOption.enter,
+          size: e.size || t.controlSize,
+          "column-slot": t.columnSlot
+        },
+        on: {
+          enter: t.submit,
+          change: function(a) {
+            return t.propChange(r.column, e);
+          }
+        },
+        scopedSlots: t._u([t._l(t.getSlotName(e, "T", t.$scopedSlots) ? [e] : [], function(a) {
+          return {
+            key: t.getSlotName(e, "T"),
+            fn: function(o) {
+              return [t._t(t.getSlotName(a, "T"), null, null, o)];
+            }
+          };
+        }), t._l(t.columnSlot, function(a) {
+          return {
+            key: a,
+            fn: function(o) {
+              return [t._t(a, null, null, o)];
+            }
+          };
+        })], null, !0),
+        model: {
+          value: t.form[e.prop],
+          callback: function(a) {
+            t.$set(t.form, e.prop, a);
+          },
+          expression: "form[column.prop]"
+        }
+      }, "FormTemp", t.uploadFun(e), !1))], 2)], 1)], 1) : t._e(), t.vaildDisplay(e) && e.row && e.span !== 24 && e.count ? s("div", {
+        key: `line${n}`,
+        staticClass: "avue-form__line",
+        style: {
+          width: `${e.count / 24 * 100}%`
+        }
+      }) : t._e()];
+    }), !t.isDetail && !t.isMenu ? s("FyFormMenu", {
+      scopedSlots: t._u([{
+        key: "menuForm",
+        fn: function(e) {
+          return [t._t("menuForm", null, null, e)];
+        }
+      }], null, !0)
+    }) : t._e()], 2)], 1);
+  }), !t.isDetail && t.isMenu ? s("FyFormMenu", {
+    scopedSlots: t._u([{
+      key: "menuForm",
+      fn: function(r) {
+        return [t._t("menuForm", null, null, r)];
+      }
+    }], null, !0)
+  }) : t._e()], 2)], 1)], 1);
+}, X = [];
+const Y = {
+  name: "FyForm",
+  mixins: [j],
+  provide() {
+    return {
+      formSafe: this
+    };
+  },
+  props: {
+    uploadBefore: Function,
+    uploadAfter: Function,
+    uploadDelete: Function,
+    uploadPreview: Function,
+    uploadError: Function,
+    uploadExceed: Function,
+    status: {
+      type: Boolean,
+      default: !1
+    },
+    isCrud: {
+      type: Boolean,
+      default: !1
+    },
+    value: {
+      type: Object,
+      required: !0,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      activeName: "",
+      labelWidth: 90,
+      allDisabled: !1,
+      optionIndex: [],
+      optionBox: !1,
+      tableOption: {},
+      itemSpanDefault: 12,
+      form: {},
+      formCreate: !1,
+      formList: [],
+      formBind: {}
+    };
+  },
+  computed: {
+    columnSlot() {
+      return Object.keys(this.$scopedSlots).filter((t) => !this.propOption.map((i) => i.prop).includes(t));
+    },
+    labelSuffix() {
+      return this.parentOption.labelSuffix || ":";
+    },
+    isMenu() {
+      return this.columnOption.length !== 1;
+    },
+    isDetail() {
+      return this.detail === !0;
+    },
+    isTabs() {
+      return this.parentOption.tabs === !0;
+    },
+    isAdd() {
+      return this.boxType === "add";
+    },
+    isEdit() {
+      return this.boxType === "edit";
+    },
+    isView() {
+      return this.boxType === "view";
+    },
+    gutter() {
+      return _((this.parentOption.gutter || 10) / 2);
+    },
+    detail() {
+      return this.parentOption.detail;
+    },
+    disabled() {
+      return this.parentOption.disabled;
+    },
+    readonly() {
+      return this.parentOption.readonly;
+    },
+    tabsType() {
+      return this.parentOption.tabsType;
+    },
+    columnLen() {
+      return this.columnOption.length;
+    },
+    dynamicOption() {
+      const t = [];
+      return this.propOption.forEach((i) => {
+        i.type === "dynamic" && this.vaildDisplay(i) && t.push(i);
+      }), t;
+    },
+    propOption() {
+      const t = [];
+      return this.columnOption.forEach((i) => {
+        i.display !== !1 && i.column.forEach((s) => {
+          t.push(s);
+        });
+      }), t;
+    },
+    parentOption() {
+      return this.tableOption || {};
+    },
+    columnOption() {
+      const t = this.tableOption.column || [], i = S(this.tableOption.group) || [], s = this.tableOption.footer || [];
+      return i.unshift({
+        header: !1,
+        column: t
+      }), s.length !== 0 && i.push({
+        header: !1,
+        column: s
+      }), i.forEach((r) => {
+        r.column = r.column || [], r.column.forEach((p, e) => {
+          p.display !== !1 && !this.isMobile && (p = B(p, this.itemSpanDefault, e === 0));
+        }), r.column = W(r.column), r.column = r.column.sort((p, e) => (e.order || 0) - (p.order || 0));
+      }), i;
+    },
+    menuPosition: function() {
+      return this.parentOption.menuPosition ? this.parentOption.menuPosition : "center";
+    },
+    boxType: function() {
+      return this.parentOption.boxType;
+    },
+    isPrint() {
+      return this.parentOption.printBtn === !0;
+    },
+    tabsActive() {
+      return this.tableOption.tabsActive || "1";
+    },
+    isMock() {
+      return this.parentOption.mockBtn === !0;
+    }
+  },
+  watch: {
+    value: {
+      handler() {
+        this.formCreate && this.setForm();
+      },
+      deep: !0
+    },
+    form: {
+      handler() {
+        this.formCreate && (this.setLabel(), this.setVal());
+      },
+      deep: !0
+    },
+    tabsActive: {
+      handler() {
+        this.activeName = this.tabsActive;
+      },
+      immediate: !0
+    },
+    DIC: {
+      handler() {
+        this.setLabel();
+      },
+      deep: !0,
+      immediate: !0
+    },
+    allDisabled: {
+      handler(t) {
+        this.$emit("update:status", t);
+      },
+      deep: !0,
+      immediate: !0
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.dataFormat();
+    });
+  },
+  beforeDestroy() {
+    Object.keys(this.formBind).forEach((t) => {
+      this.formBind[t].forEach((i) => {
+        i();
+      });
+    });
+  },
+  methods: {
+    setPx: _,
+    deepClone: S,
+    getComponent: R,
+    getPlaceholder: G,
+    uploadFun: L,
+    getDisabled(t) {
+      return this.vaildDetail(t) || this.isDetail || this.vaildDisabled(t) || this.allDisabled;
+    },
+    getSpan(t) {
+      return t.span || this.parentOption.span || this.itemSpanDefault;
+    },
+    isGroupShow(t, i) {
+      return this.isTabs ? i == this.activeName || i == 0 : !0;
+    },
+    // 初始化表单
+    dataFormat() {
+      const t = H(this.propOption).tableForm, i = this.value, s = {};
+      Object.entries(Object.assign(t, i)).forEach((r) => {
+        const p = r[0], e = r[1];
+        u(i[p]) ? s[p] = e : s[p] = i[p];
+      }), this.$set(this, "form", s), this.setLabel(), this.setControl(), this.setVal(), setTimeout(() => {
+        this.formCreate = !0, this.clearValidate();
+      });
+    },
+    setControl() {
+      this.propOption.forEach((t) => {
+        const i = t.prop, s = t.bind, r = t.control;
+        if (!this.formBind[i]) {
+          const p = [];
+          if (s) {
+            const e = this.$watch(`form.${i}`, (a, o) => {
+              a != o && V(this.form, s, a);
+            }), n = this.$watch(`form.${s}`, (a, o) => {
+              a != o && this.$set(this.form, i, a);
+            });
+            p.push(e), p.push(n), this.$set(this.form, i, z(this.form, s));
+          }
+          if (r) {
+            const e = () => {
+              const a = r(this.form[t.prop], this.form) || {};
+              Object.keys(a).forEach((o) => {
+                const d = Object.assign(this.objectOption[o] || {}, a[o]);
+                this.$set(this.objectOption, o, d), a[o].dicData && (this.DIC[o] = a[o].dicData);
+              });
+            }, n = this.$watch(`form.${i}`, () => {
+              e();
+            });
+            p.push(n), e();
+          }
+          this.formBind[i] = p;
+        }
+      });
+    },
+    setForm() {
+      Object.keys(this.value).forEach((t) => {
+        this.$set(this.form, t, this.value[t]);
+      });
+    },
+    setVal() {
+      this.$emit("input", this.form), this.$emit("change", this.form);
+    },
+    setLabel() {
+      this.tableOption.filterNull === !0 && (this.form = $(this.form, [""], !1)), this.tableOption.filterDic == !0 ? this.form = $(this.form, ["$"], !1) : this.propOption.forEach((t) => {
+        let i;
+        const s = this.DIC[t.prop];
+        u(s) || (i = N(this.form, t, this.tableOption, s), i ? this.$set(this.form, `$${t.prop}`, i) : this.$delete(this.form, `$${t.prop}`));
+      });
+    },
+    handleGroupClick(t) {
+      this.$emit("tab-click", t);
+    },
+    handleTabClick(t, i) {
+      this.$emit("tab-click", t, i);
+    },
+    getLabelWidth(t, i) {
+      let s;
+      return u(t.labelWidth) ? u(i.labelWidth) ? s = this.parentOption.labelWidth : s = i.labelWidth : s = t.labelWidth, _(s, this.labelWidth);
+    },
+    // 对部分表单字段进行校验的方法
+    validateField(t) {
+      return this.$refs.form.validateField(t);
+    },
+    validTip(t) {
+      return !t.tip || t.type === "upload";
+    },
+    getPropRef(t) {
+      return this.$refs[t][0];
+    },
+    handleChange(t, i) {
+      this.$nextTick(() => {
+        const s = i.cascader, r = s.join(",");
+        s.forEach((p) => {
+          const e = p, n = this.form[i.prop], a = this.findObject(t, e);
+          u(a) || (this.formList.includes(r) && s.forEach((o) => {
+            this.form[o] = "", this.$set(this.DIC, o, []);
+          }), !(u(s) || u(n) || u(a)) && U({
+            column: a,
+            value: n,
+            form: this.form
+          }).then((o) => {
+            this.formList.includes(r) || this.formList.push(r);
+            const d = o || [];
+            this.$set(this.DIC, e, d), !u(d) && !u(d) && !u(a.cascaderIndex) && u(this.form[e]) && (this.form[e] = d[a.cascaderIndex][(a.props || {}).value || I.value]);
+          }));
+        });
+      });
+    },
+    handlePrint() {
+      this.$Print(this.$el);
+    },
+    propChange(t, i) {
+      i.cascader && this.handleChange(t, i);
+    },
+    handleMock() {
+      this.isMock && (this.columnOption.forEach((t) => {
+        const i = J(t.column, this.DIC, this.form, this.isMock);
+        u(i) || Object.keys(i).forEach((s) => {
+          this.form[s] = i[s];
+        });
+      }), this.$nextTick(() => {
+        this.clearValidate(), this.$emit("mock-change", this.form);
+      }));
+    },
+    vaildDetail(t) {
+      let i;
+      if (this.detail)
+        return !1;
+      if (!u(t.detail))
+        i = "detail";
+      else if (this.isAdd)
+        i = "addDetail";
+      else if (this.isEdit)
+        i = "editDetail";
+      else if (this.isView)
+        return !1;
+      return i ? t[i] === !0 : !1;
+    },
+    // 验证表单是否禁止
+    vaildDisabled(t) {
+      let i;
+      if (this.disabled)
+        return !0;
+      if (!u(t.disabled))
+        i = "disabled";
+      else if (this.isAdd)
+        i = "addDisabled";
+      else if (this.isEdit)
+        i = "editDisabled";
+      else if (this.isView)
+        return !0;
+      return i ? t[i] === !0 : !1;
+    },
+    // 验证表单是否显隐
+    vaildDisplay(t) {
+      let i;
+      return u(t.display) ? this.isAdd ? i = "addDisplay" : this.isEdit ? i = "editDisplay" : this.isView && (i = "viewDisplay") : i = "display", i ? M(t[i], !0) : !0;
+    },
+    clearValidate(t) {
+      return k(this, null, function* () {
+        var i;
+        (i = this.$refs.form) == null || i.clearValidate(t);
+      });
+    },
+    validateCellForm() {
+      return new Promise((t) => {
+        this.$refs.form.validate((i, s) => {
+          t(s);
+        });
+      });
+    },
+    validate(t) {
+      this.$refs.form.validate((i, s) => {
+        const r = [], p = [], e = {};
+        this.dynamicOption.forEach((n) => {
+          const a = n.children.type === "form";
+          p.push(n.prop), a ? u(this.$refs[n.prop][0].$refs.temp.$refs.main) || this.$refs[n.prop][0].$refs.temp.$refs.main.forEach((o) => {
+            r.push(o.validateCellForm());
+          }) : r.push(this.$refs[n.prop][0].$refs.temp.$refs.main.validateCellForm());
+        }), Promise.all(r).then((n) => {
+          n.forEach((o, d) => {
+            u(o) || (e[p[d]] = o);
+          });
+          const a = Object.assign(e, s);
+          u(a) ? (this.show(), t(!0, this.hide)) : t(!1, this.hide, a);
+        });
+      });
+    },
+    resetForm(t = !0) {
+      if (t) {
+        const i = this.propOption.map((s) => s.prop);
+        this.form = A(this.form, i, (this.tableOption.filterParams || []).concat([this.rowKey]));
+      }
+      this.$nextTick(() => {
+        this.clearValidate(), this.$emit("reset-change");
+      });
+    },
+    resetFields() {
+      this.$refs.form.resetFields();
+    },
+    show() {
+      this.allDisabled = !0;
+    },
+    hide() {
+      this.allDisabled = !1;
+    },
+    submit() {
+      this.validate((t, i) => {
+        t ? this.$emit("submit", $(this.form, ["$"]), this.hide) : this.$emit("error", i);
+      });
+    }
+  }
+}, x = {};
+var Z = /* @__PURE__ */ K(
+  Y,
+  Q,
+  X,
+  !1,
+  tt,
+  null,
+  null,
+  null
+);
+function tt(t) {
+  for (let i in x)
+    this[i] = x[i];
+}
+const ft = /* @__PURE__ */ function() {
+  return Z.exports;
+}();
+export {
+  ft as default
+};