@web-utils/component 2.0.14 → 2.7.0

package/dist/components/fy-form/index.js

@@ -0,0 +1,754 @@
+import { d as P } from "../../chunks/detail.a3249549.js";
+import { i as N } from "../../chunks/init.352281f5.js";
+import { s as _, k as $, u as j, c as h, l as I, m as L, n as O, a as V, o as z, p as M } from "../../chunks/util.5053d54e.js";
+import { c as A, b as B, g as W, a as R, f as G } from "../../chunks/dataformat.fb35ee10.js";
+import { s as H } from "../../chunks/dic.5f7e3523.js";
+import { p as U } from "../../chunks/packages.5d7a86c4.js";
+import { n as q } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+const K = (t, i, s, r) => {
+  if (!r)
+    return;
+  if (!window.Mock) {
+    U.logs("mock");
+    return;
+  }
+  let e = (window.Mock || {}).Random, a = {};
+  function o({ en: u }) {
+    return u ? e.name(!0) : e.cname();
+  }
+  function l({ max: u, min: n, precision: p }) {
+    if (p) {
+      const c = e.float(n, u, p) + "", m = c.indexOf(".") + 1;
+      return Number(c.substring(0, m + p));
+    } else
+      return e.integer(n, u);
+  }
+  function d({ header: u, footer: n }) {
+    let p = e.url();
+    const c = p.indexOf("://");
+    return u === !1 ? p = p.substring(c + 3) : p = "http://" + p.substring(c + 3), p;
+  }
+  function F({ format: u, now: n }) {
+    return n ? e.now(u) : e.datetime(u);
+  }
+  function C({ min: u, max: n }) {
+    return e.csentence(u, n);
+  }
+  function x() {
+    return e.county(!0);
+  }
+  function T({ dic: u, props: n, columnType: p, multiple: c }) {
+    const m = n.value || "value", b = u.length;
+    if (["checkbox"].includes(p) || c) {
+      const v = l({
+        min: 1,
+        max: b
+      });
+      let y = [];
+      for (let g = 0; g < v; g++) {
+        let D = !0;
+        for (; D; ) {
+          const E = l({
+            min: 0,
+            max: b - 1
+          }), k = u[E][m];
+          y.includes(k) || (y.push(k), D = !1);
+        }
+      }
+      return y;
+    } else {
+      const v = l({
+        min: 0,
+        max: b - 1
+      });
+      return u[v][m];
+    }
+  }
+  function w() {
+    Object.keys(t).forEach((u) => {
+      const n = t[u];
+      if (n.mock && typeof n.mock == "object") {
+        let p = n.mock;
+        switch (p.dic = typeof n.dicData == "string" ? i[n.dicData] : n.dicData || [], p.props = n.props || {}, p.columnType = n.type, p.multiple = n.multiple, p.type) {
+          case "name":
+            a[n.prop] = o(p);
+            break;
+          case "number":
+            a[n.prop] = l(p);
+            break;
+          case "datetime":
+            a[n.prop] = F(p);
+            break;
+          case "word":
+            a[n.prop] = C(p);
+            break;
+          case "url":
+            a[n.prop] = d(p);
+            break;
+          case "county":
+            a[n.prop] = x();
+            break;
+          case "dic":
+            a[n.prop] = T(p);
+            break;
+        }
+      } else
+        n.mock instanceof Function && (a[n.prop] = n.mock(s));
+    });
+  }
+  return w(), a;
+};
+var J = 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, f) {
+    return s("FormGroup", {
+      key: r.prop,
+      attrs: {
+        tabs: t.isTabs,
+        arrow: r.arrow,
+        collapse: r.collapse,
+        display: t.vaildDisplay(r),
+        icon: r.icon,
+        index: f,
+        header: !t.isTabs,
+        active: t.activeName,
+        label: r.label
+      },
+      on: {
+        change: t.handleGroupClick
+      }
+    }, [t.isTabs && f == 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, a) {
+      return [t.vaildDisplay(e) && a != 0 ? s("ElTabPane", {
+        key: a,
+        attrs: {
+          name: a + ""
+        }
+      }, [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(), t.getSlotName(r, "H", t.$scopedSlots) ? s("template", {
+      slot: "header"
+    }, [t._t(t.getSlotName(r, "H"), null, {
+      column: r
+    })], 2) : t._e(), s("div", {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: t.isGroupShow(r, f),
+        expression: "isGroupShow(item,index)"
+      }],
+      class: ["avue-form__group", {
+        "avue-form__group--flex": r.flex === !1
+      }]
+    }, [t._l(r.column, function(e, a) {
+      return [t.vaildDisplay(e) ? s("ElCol", {
+        key: a,
+        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([{
+          key: "error",
+          fn: function(o) {
+            return t.getSlotName(e, "E", t.$scopedSlots) ? [t._t(t.getSlotName(e, "E"), null, null, Object.assign(o, {
+              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]
+            }))] : void 0;
+          }
+        }], null, !0)
+      }, [t.getSlotName(e, "L", t.$scopedSlots) ? s("template", {
+        slot: "label"
+      }, [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]
+      })], 2) : e.labelTip ? s("template", {
+        slot: "label"
+      }, [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))])], 1) : t._e(), 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(o) {
+            return t.propChange(r.column, e);
+          }
+        },
+        scopedSlots: t._u([t._l(t.getSlotName(e, "T", t.$scopedSlots) ? [e] : [], function(o) {
+          return {
+            key: t.getSlotName(e, "T"),
+            fn: function(l) {
+              return [t._t(t.getSlotName(o, "T"), null, null, l)];
+            }
+          };
+        }), t._l(t.columnSlot, function(o) {
+          return {
+            key: o,
+            fn: function(l) {
+              return [t._t(o, null, null, l)];
+            }
+          };
+        })], null, !0),
+        model: {
+          value: t.form[e.prop],
+          callback: function(o) {
+            t.$set(t.form, e.prop, o);
+          },
+          expression: "form[column.prop]"
+        }
+      }, "FormTemp", t.uploadFun(e), !1))], 2)], 2)], 1) : t._e(), t.vaildDisplay(e) && e.row && e.span !== 24 && e.count ? s("div", {
+        key: `line${a}`,
+        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)], 2);
+  }), !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);
+}, Q = [];
+const X = {
+  name: "FyForm",
+  mixins: [N],
+  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() {
+      let t = [];
+      return this.propOption.forEach((i) => {
+        i.type === "dynamic" && this.vaildDisplay(i) && t.push(i);
+      }), t;
+    },
+    propOption() {
+      let t = [];
+      return this.columnOption.forEach((i) => {
+        i.display !== !1 && i.column.forEach((s) => {
+          t.push(s);
+        });
+      }), t;
+    },
+    parentOption() {
+      return this.tableOption || {};
+    },
+    columnOption() {
+      let t = this.tableOption.column || [], i = $(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, f) => {
+        r.column = r.column || [], r.column.forEach((e, a) => {
+          e.display !== !1 && !this.isMobile && (e = A(e, this.itemSpanDefault, a === 0));
+        }), r.column = B(r.column), r.column = r.column.sort((e, a) => (a.order || 0) - (e.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(t) {
+        this.formCreate && this.setForm();
+      },
+      deep: !0
+    },
+    form: {
+      handler(t) {
+        this.formCreate && (this.setLabel(), this.setVal());
+      },
+      deep: !0
+    },
+    tabsActive: {
+      handler(t) {
+        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: $,
+    getComponent: W,
+    getPlaceholder: R,
+    uploadFun: j,
+    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() {
+      let t = G(this.propOption).tableForm, i = this.value, s = {};
+      Object.entries(Object.assign(t, i)).forEach((r) => {
+        let f = r[0], e = r[1];
+        h(i[f]) ? s[f] = e : s[f] = i[f];
+      }), this.$set(this, "form", s), this.setLabel(), this.setControl(), this.setVal(), setTimeout(() => {
+        this.formCreate = !0, this.clearValidate();
+      });
+    },
+    setControl() {
+      this.propOption.forEach((t) => {
+        let i = t.prop, s = t.bind, r = t.control;
+        if (this.form, !this.formBind[i]) {
+          let f = [];
+          if (s) {
+            let e = this.$watch("form." + i, (o, l) => {
+              o != l && I(this.form, s, o);
+            }), a = this.$watch("form." + s, (o, l) => {
+              o != l && this.$set(this.form, i, o);
+            });
+            f.push(e), f.push(a), this.$set(this.form, i, L(this.form, s));
+          }
+          if (r) {
+            const e = () => {
+              let o = r(this.form[t.prop], this.form) || {};
+              Object.keys(o).forEach((l) => {
+                let d = Object.assign(this.objectOption[l] || {}, o[l]);
+                this.$set(this.objectOption, l, d), o[l].dicData && (this.DIC[l] = o[l].dicData);
+              });
+            };
+            let a = this.$watch("form." + i, (o, l) => {
+              e();
+            });
+            f.push(a), e();
+          }
+          this.formBind[i] = f;
+        }
+      });
+    },
+    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 = O(this.form, [""], !1)), this.tableOption.filterDic == !0 ? this.form = O(this.form, ["$"], !1) : this.propOption.forEach((t) => {
+        let i, s = this.DIC[t.prop];
+        h(s) || (i = P(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 h(t.labelWidth) ? h(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((f) => {
+          const e = f, a = this.form[i.prop], o = this.findObject(t, e);
+          h(o) || (this.formList.includes(r) && s.forEach((l) => {
+            this.form[l] = "", this.$set(this.DIC, l, []);
+          }), !(h(s) || h(a) || h(o)) && H({
+            column: o,
+            value: a,
+            form: this.form
+          }).then((l) => {
+            this.formList.includes(r) || this.formList.push(r);
+            const d = l || [];
+            this.$set(this.DIC, e, d), !h(d) && !h(d) && !h(o.cascaderIndex) && h(this.form[e]) && (this.form[e] = d[o.cascaderIndex][(o.props || {}).value || V.value]);
+          }));
+        });
+      });
+    },
+    handlePrint() {
+      this.$Print(this.$el);
+    },
+    propChange(t, i) {
+      i.cascader && this.handleChange(t, i);
+    },
+    handleMock() {
+      this.isMock && (this.columnOption.forEach((t) => {
+        const i = K(t.column, this.DIC, this.form, this.isMock);
+        h(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 (!h(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 (!h(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 h(t.display) ? this.isAdd ? i = "addDisplay" : this.isEdit ? i = "editDisplay" : this.isView && (i = "viewDisplay") : i = "display", i ? z(t[i], !0) : !0;
+    },
+    clearValidate(t) {
+      this.$refs.form.clearValidate(t);
+    },
+    validateCellForm() {
+      return new Promise((t) => {
+        this.$refs.form.validate((i, s) => {
+          t(s);
+        });
+      });
+    },
+    validate(t) {
+      this.$refs.form.validate((i, s) => {
+        let r = [], f = [], e = {};
+        this.dynamicOption.forEach((a) => {
+          let o = a.children.type === "form";
+          f.push(a.prop), o ? h(this.$refs[a.prop][0].$refs.temp.$refs.main) || this.$refs[a.prop][0].$refs.temp.$refs.main.forEach((l) => {
+            r.push(l.validateCellForm());
+          }) : r.push(this.$refs[a.prop][0].$refs.temp.$refs.main.validateCellForm());
+        }), Promise.all(r).then((a) => {
+          a.forEach((l, d) => {
+            h(l) || (e[f[d]] = l);
+          });
+          let o = Object.assign(e, s);
+          h(o) ? (this.show(), t(!0, this.hide)) : t(!1, this.hide, o);
+        });
+      });
+    },
+    resetForm(t = !0) {
+      if (t) {
+        let i = this.propOption.map((s) => s.prop);
+        this.form = M(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", O(this.form, ["$"]), this.hide) : this.$emit("error", i);
+      });
+    }
+  }
+}, S = {};
+var Y = /* @__PURE__ */ q(
+  X,
+  J,
+  Q,
+  !1,
+  Z,
+  null,
+  null,
+  null
+);
+function Z(t) {
+  for (let i in S)
+    this[i] = S[i];
+}
+const lt = /* @__PURE__ */ function() {
+  return Y.exports;
+}();
+export {
+  lt as default
+};