arco-crud-plus
Version:
基于arco-design-vue的配置化表格表单组件
424 lines (423 loc) • 18.6 kB
JavaScript
import { defineComponent as te, mergeModels as W, useSlots as se, useAttrs as ie, useModel as ae, ref as re, reactive as K, resolveComponent as g, openBlock as a, createBlock as u, mergeProps as S, withKeys as ue, unref as p, withCtx as i, createVNode as c, createElementBlock as k, Fragment as $, renderList as F, normalizeStyle as L, normalizeProps as q, createSlots as O, renderSlot as r, resolveDynamicComponent as J, createTextVNode as C, toDisplayString as b, createCommentVNode as y, createElementVNode as E, normalizeClass as pe } from "vue";
import { validataNull as A, deepCopy as de } from "../utils/validate.js";
const fe = {
key: 0,
class: "left-bot"
}, ze = /* @__PURE__ */ te({
name: "aFormPlus",
__name: "main",
props: /* @__PURE__ */ W({
option: {}
}, {
modelValue: {},
modelModifiers: {}
}),
emits: /* @__PURE__ */ W(["submit", "reset", "form-change"], ["update:modelValue"]),
setup(M, { expose: Q, emit: X }) {
const f = se(), Y = ie(), Z = M, s = {
colGap: 1,
rowGap: 1,
span: 8,
marginTop: "10px",
autoLabelWidth: !0,
scrollToFirstError: !0,
layout: "horizontal",
gutter: 10,
size: "medium",
labelAlign: "right",
columns: [],
justify: "start",
align: "start",
wrap: !0
}, m = ae(M, "modelValue"), V = re(null), G = X, N = K({}), d = K({
submit: !1,
reset: !1
});
function U() {
d.submit = !1;
}
const _ = ({ values: e, errors: o }) => {
o === void 0 && (d.submit = !0, G("submit", e, U));
};
function j() {
V.value.resetFields(), V.value.clearValidate(), G("reset");
}
function D(e) {
return Z.option.disabled ?? e ?? !1;
}
function x() {
}
function H(e, o) {
G("form-change", e, o, U);
}
Q(new Proxy({}, {
get(e, o) {
var t;
return (t = V.value) == null ? void 0 : t[o];
},
has(e, o) {
return o in V.value;
}
}));
function I(e) {
return A(e.bind) ? Reflect.get(m.value, e.field) : ee(m.value, e.bind);
}
function P(e, o) {
A(e.bind) ? Reflect.set(m.value, e.field, o) : (m[e.field] = o, oe(m.value, e.bind, o));
}
const ee = (e, o) => o.split(".").reduce((t, z) => t && t[z], e), oe = (e, o, t) => {
const z = o.split("."), B = z.pop(), h = z.reduce((v, w) => v[w] = v[w] || {}, e);
h[B] = t;
}, R = (e, o) => {
const t = {};
if ((o.type === "input" || o.type === void 0) && (t.allowClear = !0, t.placeholder = `请输入${o.label}`), o.type === "input-password") {
const z = de(o);
return delete z.type, { ...t, ...z, msg: null };
}
return o.type === "input-number" && (t.placeholder = `请输入${o.label}`), o.type === "textarea" && (t.allowClear = !0, t.showWordLimit = o.showWordLimit ?? !0, t.placeholder = `请输入${o.label}`), o.type === "select" && (t.allowClear = !0, t.placeholder = `请选择${o.label}`, t.options = [], t.options = e[o.field] || o.dicData), o.type === "cascader" && (t.allowClear = !0, t.placeholder = `请选择${o.label}`, t.options = e[o.field] || o.dicData), o.type === "radio" && (t.options = e[o.field] || o.dicData), o.type === "radio-group" && (t.options = e[o.field] || o.dicData), o.type === "checkbox-group" && (t.options = e[o.field] || o.dicData), o.type === "checkbox" && (t.options = e[o.field] || o.dicData), o.type === "date-picker" && (t.placeholder = "请选择日期"), o.type === "time-picker" && (t.allowClear = !0, t.placeholder = "请选择时间"), { ...t, ...o, msg: null, field: null, type: null };
};
return (e, o) => {
const t = g("icon-question-circle-fill"), z = g("a-tooltip"), B = g("a-form-item"), h = g("a-col"), v = g("a-button"), w = g("a-row"), le = g("a-space"), ne = g("a-form");
return a(), u(ne, S({
ref_key: "formRef",
ref: V,
"auto-label-width": e.option.autoLabelWidth ?? s.autoLabelWidth,
layout: e.option.layout ?? s.layout ?? "horizontal",
scrollToFirstError: e.option.scrollToFirstError ?? s.scrollToFirstError,
size: e.option.size ?? s.size,
"label-align": e.option.labelAlign ?? s.labelAlign,
model: m.value,
onSubmit: _,
onKeyup: ue(x, ["enter"]),
disabled: !0
}, p(Y)), {
default: i(() => [
c(w, {
class: "form-row__container",
justify: e.option.justify ?? s.justify,
align: e.option.align ?? s.align,
wrap: e.option.wrap ?? s.wrap,
cols: 24,
gutter: e.option.gutter || s.gutter,
colGap: e.option.colGap ?? s.colGap,
rowGap: e.option.rowGap ?? s.rowGap
}, {
default: i(() => [
(a(!0), k($, null, F(e.option.columns, (l) => (a(), k($, {
key: l.field
}, [
l.display ?? !0 ? (a(), u(h, {
key: 0,
style: L({ marginTop: e.option.marginTop ?? s.marginTop }),
span: l.span ?? e.option.span ?? s.span,
offset: l.offset ?? 0,
order: l.order ?? 0
}, {
default: i(() => [
c(B, q({
[(d.submit ? "" : "disabled") || ""]: D(l.disabled),
label: l.label,
field: l.bind ?? l.field,
rules: l.rules
}), O({
default: i(() => [
p(f)[l.field] ? r(e.$slots, l.field, {
key: 0,
item: l,
size: e.option.size ?? s.size
}, void 0, !0) : (a(), u(J(l.component ? l.component : `a-${l.type || "input"}`), S({
key: 1,
style: { width: l.type === "switch" ? "" : "100%" },
size: e.option.size ?? s.size,
disabled: e.option.detail ?? l.disabled ?? !1,
modelValue: I(l),
"onUpdate:modelValue": (n) => P(l, n),
visibility: l.visibility,
"onUpdate:visibility": (n) => l.visibility = n,
ref_for: !0
}, R(N, l), {
onChange: (n) => H(n, l)
}), null, 16, ["style", "size", "disabled", "modelValue", "onUpdate:modelValue", "visibility", "onUpdate:visibility", "onChange"]))
]),
_: 2
}, [
p(f)[l.field + "Label"] ? {
name: "label",
fn: i(() => [
r(e.$slots, l.field + "Label", {}, void 0, !0)
]),
key: "0"
} : void 0,
p(f)[l.field + "Label"] ? void 0 : {
name: "label",
fn: i(() => [
C(b(l.label) + " ", 1),
l.helpIconText ? (a(), u(z, {
key: 0,
content: l.helpIconText
}, {
default: i(() => [
c(t, {
size: e.option.size ?? s.size
}, null, 8, ["size"])
]),
_: 2
}, 1032, ["content"])) : y("", !0)
]),
key: "1"
},
p(f)[l.field + "Help"] || l.help ? {
name: "help",
fn: i(() => [
r(e.$slots, l.field + "Help", {}, void 0, !0),
E("span", null, b(l.help), 1)
]),
key: "2"
} : void 0,
p(f)[l.field + "Extra"] || l.extra ? {
name: "extra",
fn: i(() => [
r(e.$slots, l.field + "Extra", {}, void 0, !0),
E("span", null, b(l.extra), 1)
]),
key: "3"
} : void 0
]), 1040, ["label", "field", "rules"])
]),
_: 2
}, 1032, ["style", "span", "offset", "order"])) : y("", !0)
], 64))), 128)),
e.option.search === !0 ? (a(), u(h, {
key: 0,
order: 11,
span: e.option.searchMenuSpan ?? 8,
style: L({
textAlign: e.option.searchMenuAlign ?? "left",
marginTop: e.option.searchMenuMargintop ?? "10px"
})
}, {
default: i(() => [
p(f).menu ? r(e.$slots, "menu", {
key: 0,
size: e.option.size ?? s.size,
loading: d.submit
}, void 0, !0) : y("", !0),
r(e.$slots, "menuLeft", {
size: e.option.size ?? s.size,
loading: d.submit
}, void 0, !0),
r(e.$slots, "suffix", {
loading: d.submit
}, () => [
e.option.menuBtn ?? e.option.submitBtn ?? !0 ? (a(), u(v, {
key: 0,
size: e.option.size ?? s.size,
type: "primary",
loading: d.submit,
"html-type": "submit"
}, {
default: i(() => [
C(b(e.option.submitBtnText ?? "提交"), 1)
]),
_: 1
}, 8, ["size", "loading"])) : y("", !0),
e.option.menuBtn ?? e.option.resetBtn ?? !0 ? (a(), u(v, {
key: 1,
size: e.option.size ?? s.size,
onClick: o[0] || (o[0] = (l) => j())
}, {
default: i(() => [
C(b(e.option.resetBtnText ?? "重置"), 1)
]),
_: 1
}, 8, ["size"])) : y("", !0)
], !0),
r(e.$slots, "menuright", {
size: e.option.size ?? s.size,
loading: d.submit
}, void 0, !0)
]),
_: 3
}, 8, ["span", "style"])) : y("", !0)
]),
_: 3
}, 8, ["justify", "align", "wrap", "gutter", "colGap", "rowGap"]),
(a(!0), k($, null, F(e.option.groups, (l) => (a(), k($, null, [
(l.display, a(), u(w, {
key: 0,
style: L(e.option.groupContainerStyle ?? {})
}, {
default: i(() => [
c(h, { span: 24 }, {
default: i(() => [
!p(f)[l.field + "GroupHeader"] && !p(A)(l.label) ? (a(), k("div", fe, b(l.label), 1)) : r(e.$slots, l.field + "GroupHeader", {
key: 1,
label: l.label,
record: l
}, void 0, !0)
]),
_: 2
}, 1024),
(a(!0), k($, null, F(l.columns, (n) => (a(), k($, {
key: n.field
}, [
n.display ?? !0 ? (a(), u(h, {
key: 0,
span: n.span ?? e.option.span ?? s.span,
offset: n.offset ?? 0,
order: n.order ?? 100
}, {
default: i(() => [
c(B, q({
"label-col-style": {
width: "100px"
},
[(d.submit ? "" : "disabled") || ""]: D(n.disabled),
label: n.label,
field: n.field,
rules: n.rules
}), O({
default: i(() => [
p(f)[n.field] ? r(e.$slots, n.field, {
key: 0,
item: n,
size: e.option.size ?? s.size
}, void 0, !0) : (a(), u(J(n.component ? n.component : `a-${n.type || "input"}`), S({
key: 1,
style: { width: n.type === "switch" ? "" : "100%" },
size: e.option.size ?? s.size,
disabled: e.option.detail ?? n.disabled ?? !1,
modelValue: I(n),
"onUpdate:modelValue": (T) => P(n, T),
visibility: n.visibility,
"onUpdate:visibility": (T) => n.visibility = T,
ref_for: !0
}, R(N, n), {
onChange: (T) => H(T, n)
}), null, 16, ["style", "size", "disabled", "modelValue", "onUpdate:modelValue", "visibility", "onUpdate:visibility", "onChange"]))
]),
_: 2
}, [
p(f)[n.field + "Label"] ? {
name: "label",
fn: i(() => [
r(e.$slots, n.field + "Label", {}, void 0, !0)
]),
key: "0"
} : void 0,
p(f)[n.field + "Label"] ? void 0 : {
name: "label",
fn: i(() => [
C(b(n.label) + " ", 1),
n.helpIconText ? (a(), u(z, {
key: 0,
content: n.helpIconText
}, {
default: i(() => [
c(t, {
size: e.option.size ?? s.size
}, null, 8, ["size"])
]),
_: 2
}, 1032, ["content"])) : y("", !0)
]),
key: "1"
},
p(f)[n.field + "Help"] || n.help ? {
name: "help",
fn: i(() => [
r(e.$slots, n.field + "Help", {}, void 0, !0),
E("span", null, b(n.help), 1)
]),
key: "2"
} : void 0,
p(f)[n.field + "Extra"] || n.extra ? {
name: "extra",
fn: i(() => [
r(e.$slots, n.field + "Extra", {}, void 0, !0),
E("span", null, b(n.extra), 1)
]),
key: "3"
} : void 0
]), 1040, ["label", "field", "rules"])
]),
_: 2
}, 1032, ["span", "offset", "order"])) : y("", !0)
], 64))), 128))
]),
_: 2
}, 1032, ["style"]))
], 64))), 256)),
e.option.search ? y("", !0) : (a(), u(w, {
key: 0,
class: pe({ formMenuContainer: e.option.menu ?? !e.option.detail ?? !0 })
}, {
default: i(() => [
e.option.menu ?? !e.option.detail ?? !0 ? (a(), u(h, {
key: 0,
order: 1e4,
span: e.option.menuSpan ?? 24,
style: L({
textAlign: e.option.menuAlign ?? "center"
})
}, {
default: i(() => [
p(f).menu ? r(e.$slots, "menu", {
key: 0,
size: e.option.size ?? s.size,
loading: d.submit
}, void 0, !0) : y("", !0),
c(le, { wrap: "" }, {
default: i(() => [
r(e.$slots, "menuLeft", {
size: e.option.size ?? s.size,
loading: d.submit
}, void 0, !0),
r(e.$slots, "suffix", {
loading: d.submit
}, () => [
e.option.menuBtn ?? e.option.submitBtn ?? !0 ? (a(), u(v, {
key: 0,
size: e.option.size ?? s.size,
type: "primary",
loading: d.submit,
"html-type": "submit"
}, {
default: i(() => [
C(b(e.option.submitBtnText ?? "提交"), 1)
]),
_: 1
}, 8, ["size", "loading"])) : y("", !0),
e.option.menuBtn ?? e.option.resetBtn ?? !0 ? (a(), u(v, {
key: 1,
size: e.option.size ?? s.size,
onClick: o[1] || (o[1] = (l) => j())
}, {
default: i(() => [
C(b(e.option.resetBtnText ?? "重置"), 1)
]),
_: 1
}, 8, ["size"])) : y("", !0)
], !0),
r(e.$slots, "menuright", {
size: e.option.size ?? s.size,
loading: d.submit
}, void 0, !0)
]),
_: 3
})
]),
_: 3
}, 8, ["span", "style"])) : y("", !0)
]),
_: 3
}, 8, ["class"]))
]),
_: 3
}, 16, ["auto-label-width", "layout", "scrollToFirstError", "size", "label-align", "model"]);
};
}
});
export {
ze as default
};