krco/es/index-C_vi7WqV.js

基于arco-design-vue的配置化表格表单组件

import { ref as m, onMounted as V, onBeforeUnmount as F, defineComponent as N, mergeModels as _, computed as S, useModel as U, resolveComponent as h, openBlock as T, createBlock as k, withCtx as g, createElementVNode as x, createVNode as C, createTextVNode as O, toDisplayString as z, createCommentVNode as D, normalizeClass as L, getCurrentInstance as R, reactive as W, render as M, h as A } from "vue";
function H(e, n) {
  let o;
  return function(...l) {
    clearTimeout(o), o = setTimeout(() => {
      e.apply(this, l);
    }, n);
  };
}
function Q(e, n = 300) {
  const o = m(window.innerWidth), l = m(window.innerHeight), u = H(() => {
    o.value = window.innerWidth, l.value = window.innerHeight, e && e({ width: o.value, height: l.value });
  }, n);
  return V(() => {
    u(), window.addEventListener("resize", u);
  }), F(() => {
    window.removeEventListener("resize", u);
  }), { width: o, height: l };
}
function X(e, n, o) {
  V(() => {
    const [l, i] = n.value, u = o.context[l], r = i.split(".");
    e.value = r.reduce((c, d) => c && c[d], u), e.addEventListener("input", (c) => {
      const d = c.target.value;
      r.reduce((s, t, a) => {
        if (a === r.length - 1)
          s[t] = d;
        else
          return s[t] || o.context.$set(s, t, {}), s[t];
      }, u);
    });
  });
}
function Y(e) {
  return e == null;
}
function y(e) {
  if (typeof e != "object" || e === null)
    return e;
  let n = Array.isArray(e) ? [] : {};
  for (let o in e)
    e.hasOwnProperty(o) && (n[o] = y(e[o]));
  return n;
}
let I = { a: 1, b: { c: 2 } };
y(I);
const E = /* @__PURE__ */ new Set();
function P() {
  let e;
  do
    e = `${Date.now()}${Math.floor(Math.random() * 1e6)}`;
  while (E.has(e));
  return E.add(e), e;
}
const B = {
  size: "small"
}, Z = {
  colGap: 0,
  rowGap: 0,
  span: 8,
  marginTop: "2px",
  autoLabelWidth: !0,
  scrollToFirstError: !0,
  layout: "horizontal",
  gutter: 10,
  labelAlign: "right",
  columns: [],
  justify: "start",
  align: "start",
  wrap: !0,
  submitBtn: !0,
  resetBtn: !0,
  menuBtn: !0,
  menu: !0,
  submitBtnText: "提交",
  resetBtnText: "重置",
  ...B
}, j = {
  pagePosition: "br",
  resizable: !1,
  calcHeight: 20,
  align: "left",
  stripe: !1,
  drag: !1,
  rowKey: "id",
  scroll: {},
  submitBtn: !1,
  bordered: {
    cell: !0
    // wrapper: true,
  },
  columns: [],
  ...B
}, ee = (e) => {
  const n = m(e), o = m({});
  function l(t) {
    t.columns && t.columns.forEach((a) => {
      a._id = P();
    }), n.value = t;
  }
  function i(t, a) {
    Reflect.set(n.value, t, a);
  }
  function u() {
    n.value.columns = [];
  }
  function r(t, a) {
    a ? n.value.columns.splice(a, 0, t) : n.value.columns.push(t);
  }
  function c(t) {
    n.value.columns.splice(t, 1);
  }
  function d(t, a, p) {
    const { found: f, config: v } = s(t, n.value);
    if (f)
      Reflect.set(v, a, p);
    else
      throw new Error("字段不存在");
  }
  function s(t, a) {
    const p = a.columns.find((f) => f.field === t);
    if (p)
      return {
        found: !0,
        config: p
      };
    if (!a.groups)
      return {
        found: !1,
        config: null
      };
    for (const f of a.groups ?? []) {
      const v = f.columns.find((w) => w.field === t);
      if (v)
        return {
          found: !0,
          config: v,
          group: f.label
          // 可选：返回所属分组的标签
        };
    }
    return {
      found: !1,
      config: null
    };
  }
  return {
    option: n,
    formData: o,
    setColumn: d,
    addColumn: r,
    clearColumn: u,
    setOptionConfig: i,
    setOption: l,
    delColumn: c
  };
}, $ = { style: { display: "flex", "justify-content": "space-between" } }, G = /* @__PURE__ */ N({
  __name: "modal-form",
  props: /* @__PURE__ */ _({
    option: { default: {} },
    loading: { type: Boolean, default: !1 },
    onText: { default: "确定" },
    cancelText: { default: "取消" },
    title: { default: "表单" },
    footer: { type: Boolean, default: !0 },
    default: {},
    cancelBtn: { type: Boolean, default: !0 },
    maskClosable: { type: Boolean, default: !1 }
  }, {
    visible: {
      default: !0
    },
    visibleModifiers: {}
  }),
  emits: /* @__PURE__ */ _(["submit", "close"], ["update:visible"]),
  setup(e, { emit: n }) {
    m(B.size);
    const o = e, l = n, i = m(), u = S(() => Object.assign(
      {
        span: 12,
        menu: !1
      },
      o.option.value
    )), r = U(e, "visible");
    function c() {
      i.value.validate().then((t) => {
        t === void 0 && l("submit", s.value);
      });
    }
    function d() {
      l("close");
    }
    const s = m(y(o.default));
    return (t, a) => {
      const p = h("a-form-plus"), f = h("a-button"), v = h("a-space"), w = h("a-modal");
      return T(), k(w, {
        visible: r.value,
        "onUpdate:visible": a[1] || (a[1] = (b) => r.value = b),
        "unmount-on-close": !0,
        maskClosable: t.maskClosable,
        title: t.title,
        onClose: d,
        onCancel: d,
        footer: t.footer
      }, {
        footer: g((b) => [
          x("div", $, [
            a[2] || (a[2] = x("div", null, null, -1)),
            C(v, null, {
              default: g(() => [
                t.cancelBtn ? (T(), k(f, {
                  key: 0,
                  loading: t.loading,
                  onClick: d
                }, {
                  default: g(() => [
                    O(z(t.cancelText), 1)
                  ]),
                  _: 1
                }, 8, ["loading"])) : D("", !0),
                C(f, {
                  loading: t.loading,
                  type: "primary",
                  onClick: c
                }, {
                  default: g(() => [
                    O(z(t.onText), 1)
                  ]),
                  _: 1
                }, 8, ["loading"])
              ]),
              _: 1
            })
          ])
        ]),
        default: g(() => [
          C(p, {
            class: L({
              "form-modal--view": !0
            }),
            disabled: t.loading,
            option: u.value,
            ref_key: "formRef",
            ref: i,
            modelValue: s.value,
            "onUpdate:modelValue": a[0] || (a[0] = (b) => s.value = b)
          }, null, 8, ["disabled", "option", "modelValue"])
        ]),
        _: 1
      }, 8, ["visible", "maskClosable", "title", "footer"]);
    };
  }
}), K = (e, n) => {
  const o = e.__vccOpts || e;
  for (const [l, i] of n)
    o[l] = i;
  return o;
}, q = /* @__PURE__ */ K(G, [["__scopeId", "data-v-0fdccaba"]]);
function te(e) {
  const n = R(), o = n == null ? void 0 : n.appContext, l = W({
    visible: !1,
    loading: !1
  }), i = document.createElement("div"), u = () => {
    l.loading = !1, l.visible = !1, M(null, i), document.body.removeChild(i);
  }, r = m(e == null ? void 0 : e.option);
  function c() {
    document.body.appendChild(i);
    const s = A(q, {
      title: e.title,
      default: (e == null ? void 0 : e.default) ?? {},
      okText: e.okText,
      cancelText: e.cancelText,
      cancelBtn: e.cancelBtn,
      width: e.width,
      option: r,
      visible: l.visible,
      loading: l.loading,
      "onUpdate:visible": (t) => l.visible = t,
      onClose: () => {
        e.close && e.close(), u();
      },
      onSubmit: (t) => {
        l.loading = !0, e.submit && e.submit(t, u);
      }
    });
    o && (s.appContext = o), M(s, i);
  }
  function d() {
    l.visible = !0, c();
  }
  return {
    show: d,
    close: u,
    option: r
  };
}
export {
  K as _,
  Z as a,
  P as b,
  B as c,
  y as d,
  j as e,
  Q as f,
  X as g,
  te as h,
  ee as u,
  Y as v
};