arco-crud-plus
Version:
基于arco-design-vue的配置化表格表单组件
397 lines (396 loc) • 14.4 kB
JavaScript
import { defineComponent as Pe, mergeModels as le, useAttrs as Ve, ref as m, useSlots as Re, computed as N, useModel as P, reactive as Be, watch as $e, resolveComponent as i, resolveDirective as Me, openBlock as a, createElementBlock as v, createBlock as _, createCommentVNode as s, renderSlot as b, createVNode as g, withCtx as r, Fragment as He, renderList as V, unref as R, createElementVNode as Ue, toDisplayString as ae, withDirectives as Fe, normalizeClass as Ie, mergeProps as We, createSlots as je, createTextVNode as Le, normalizeStyle as Oe } from "vue";
import Ae from "../form/main.vue.js";
import { validataNull as De } from "../utils/validate.js";
const Ke = { key: 1 }, qe = {
key: 2,
class: "table-plus-menu"
}, Ee = { style: { padding: "0 15px 0 15px" } }, Ge = { key: 3 }, Je = {
key: 1,
style: {}
}, Ze = /* @__PURE__ */ Pe({
name: "aTablePlus",
__name: "main",
props: /* @__PURE__ */ le({
option: {
type: Object
},
loading: {
type: Boolean,
default: !1
},
data: {
type: Array,
default: () => []
},
stickyHeader: {
type: [Boolean, Number],
default: !1
}
}, {
modelValue: {},
modelModifiers: {},
selected: {},
selectedModifiers: {},
page: {
type: Object,
default: () => ({
total: 0,
current: 1,
pageSize: 20,
pageSizeOptions: [10, 20, 40, 50, 100]
})
},
pageModifiers: {}
}),
emits: /* @__PURE__ */ le([
"refreshChange",
"searchChange",
"sortChange",
"filterChange",
"resetChange",
"pageChange",
"pageSizeChange",
"formChange"
], ["update:modelValue", "update:selected", "update:page"]),
setup(C, { expose: ie, emit: se }) {
const re = Ve(), ue = m(null), B = m(null), $ = m(null), S = m("100%");
let pe = m("100%");
function de(o) {
var e, l, x, z;
if (t.option.page === !1) {
S.value = "100%";
return;
}
if (pe.value = o.width + "px", ((e = t.option) == null ? void 0 : e.autoHeight) === !1)
return !0;
S.value = ((l = B.value) == null ? void 0 : l.offsetHeight) - ((x = $.value) == null ? void 0 : x.offsetHeight) - (((z = t.option) == null ? void 0 : z.calcHeight) ?? -10);
}
const u = {
pagePosition: "br",
resizable: !1,
calcHeight: 20,
align: "left",
stripe: !1,
rowKey: "id",
scroll: {},
size: "medium",
bordered: {
cell: !0
// wrapper: true,
},
columns: []
}, t = C, p = Re(), f = se, d = N(() => {
var o;
return ((o = t.option) == null ? void 0 : o.size) ?? u.size;
}), M = P(C, "modelValue"), H = P(C, "selected"), c = P(C, "page");
m({
total: 0
});
const U = Be({
setting: {
visible: !1,
data: [],
activeIndexs: []
}
}), ce = N(() => {
const o = t.option;
return {
...o,
searchMenuSpan: o.searchMenuSpan ?? 6,
search: !0,
span: o.searchSpan ?? 6,
gutter: o.gutter ?? 0,
rowGap: 0,
marginTop: "10px",
align: "center",
layout: "",
submitBtnText: o.submitBtnText ?? "搜索",
columns: o.columns.map((l) => ({
...l,
display: l.search ?? !1,
span: l.searchSpan ?? o.searchSpan ?? 6,
rules: []
}))
};
}), w = N(() => {
p.menu && !y.value.find((e) => e.field === "menu") && y.value.push({
title: t.option.menuText ?? "操作",
label: t.option.menuText ?? "操作",
dataIndex: "menu",
field: "menu",
slotName: "menu",
width: t.option.menuWidth ?? 120,
fixed: "right",
align: t.option.menuWidth ?? t.option.align ?? u.align
});
let o = y.value.filter((e) => (e.bodyCellStyle = {
tablePlusBodyActive: !0
}, e.checked !== !1 && e.hide !== !0));
return t.option.index !== !1 && o.unshift({ label: t.option.indexLabel ?? "序号", title: t.option.indexLabel ?? "#", render: ({ rowIndex: e }) => `${e + 1}`, field: "index", width: t.option.indexWidth ?? 50, [t.option.indexFixed === !1 ? "1fixed" : "fixed"]: "left" }), o;
});
let y = m([]);
$e(
() => t.option,
(o) => {
y.value = o.columns.map((e) => (e.children && (e.children = e.children.map((l) => ({
title: e.label,
dataIndex: e.field,
align: e.align ?? t.option.align ?? u.align,
ellipsis: e.ellipsis ?? !0,
checked: !0,
[p[e.field] ? "slotName" : ""]: e.field,
titleSlotName: e.field + "Title",
tooltip: e.tooltip ?? !0,
minWidth: e.minWidth ?? 80,
...e
}))), {
title: e.label,
dataIndex: e.field,
align: e.align ?? t.option.align ?? u.align,
ellipsis: e.ellipsis ?? !0,
[p[e.field] ? "slotName" : ""]: e.field,
titleSlotName: e.field + "Title",
checked: !0,
// [slots[item.field+'Title'] ? "titleSlotName" : ""]: item.field + "Title",
tooltip: e.tooltip ?? !0,
minWidth: e.minWidth ?? 80,
...e
}));
},
{
immediate: !0
}
);
function ge(o) {
f("pageChange", c.value);
}
function fe(o) {
f("pageSizeChange", c.value);
}
function he(o, e) {
f("filterChange", o, e);
}
function me(o, e) {
f("sortChange", o, e);
}
function ve(o, e) {
f("searchChange", o, e);
}
function be(o, e, l) {
f("formChange", o, e);
}
const T = m(null);
return ie(
new Proxy(
{},
{
get(o, e) {
var l;
return (l = T.value) == null ? void 0 : l[e];
},
has(o, e) {
return e in T.value;
}
}
)
), (o, e) => {
var F, I, W, j, L, O, A, D, K, q, E, G, J, Q, X, Y, Z, ee, te, oe, ne;
const l = i("a-space"), x = i("icon-refresh"), z = i("a-button"), ye = i("icon-settings"), ze = i("a-checkbox"), ke = i("a-doption"), _e = i("a-dropdown"), Ce = i("icon-question-circle-fill"), xe = i("a-tooltip"), Se = i("a-table"), we = i("a-pagination"), Te = Me("resize");
return a(), v("div", {
class: "table-plus",
ref_key: "tablePlusRef",
ref: ue
}, [
t.option.search !== !1 ? (a(), _(Ae, {
key: 0,
option: ce.value,
modelValue: M.value,
"onUpdate:modelValue": e[0] || (e[0] = (n) => M.value = n),
onSubmit: ve,
onReset: e[1] || (e[1] = (n) => f("resetChange")),
onFormChange: be
}, null, 8, ["option", "modelValue"])) : s("", !0),
p.header ? (a(), v("div", Ke, [
b(o.$slots, "header", { size: d.value }, void 0, !0)
])) : s("", !0),
((F = t.option) == null ? void 0 : F.tool) ?? !0 ? (a(), v("div", qe, [
g(l, null, {
default: r(() => [
p.menuLeft ? b(o.$slots, "menuLeft", {
key: 0,
size: d.value
}, void 0, !0) : s("", !0)
]),
_: 3
}),
g(l, null, {
default: r(() => [
p.menuRight ? b(o.$slots, "menuRight", {
key: 0,
size: d.value
}, void 0, !0) : s("", !0),
t.option.refreshBtn !== !1 ? (a(), _(z, {
key: 1,
loading: t.loading,
type: "outline",
size: d.value,
onClick: e[2] || (e[2] = (n) => f("refreshChange"))
}, {
icon: r(() => [
g(x)
]),
_: 1
}, 8, ["loading", "size"])) : s("", !0),
t.option.toolBtn !== !1 ? (a(), _(_e, {
key: 2,
"popup-visible": U.setting.visible,
"onUpdate:popupVisible": e[3] || (e[3] = (n) => U.setting.visible = n)
}, {
content: r(() => [
(a(!0), v(He, null, V(R(y).filter((n) => n.dataIndex !== "menu" && n.hide !== !0), (n, h) => (a(), _(ke, { key: h }, {
default: r(() => [
g(ze, {
modelValue: n.checked,
"onUpdate:modelValue": (k) => n.checked = k
}, null, 8, ["modelValue", "onUpdate:modelValue"]),
Ue("span", Ee, ae(n.label), 1)
]),
_: 2
}, 1024))), 128))
]),
default: r(() => [
g(z, {
type: "outline",
size: d.value
}, {
icon: r(() => [
g(ye)
]),
_: 1
}, 8, ["size"]),
p.menuRightAfter ? b(o.$slots, "menuRightAfter", {
key: 0,
size: d.value
}, void 0, !0) : s("", !0)
]),
_: 3
}, 8, ["popup-visible"])) : s("", !0)
]),
_: 3
})
])) : s("", !0),
p.menuLeft ? (a(), v("div", Ge)) : s("", !0),
Fe((a(), v("div", {
style: { flex: "auto", overflow: "hidden" },
class: Ie({
"margin-top-20": !(((I = t.option) == null ? void 0 : I.tool) ?? !0)
}),
ref_key: "tableRefDom",
ref: B
}, [
g(Se, We({
ref_key: "TableRef",
ref: T
}, R(re), {
"column-resizable": t.option.resizable ?? u.resizable,
pagination: !1,
columns: w.value,
size: ((W = t.option) == null ? void 0 : W.size) ?? u.size,
loading: t.loading,
data: t.data,
"sticky-header": t.stickyHeader,
stripe: ((j = t.option) == null ? void 0 : j.stripe) ?? u.stripe,
"row-key": ((L = t.option) == null ? void 0 : L.rowKey) ?? u.rowKey,
scroll: R(De)((O = t.option) == null ? void 0 : O.scroll) ? {
y: S.value,
x: (t == null ? void 0 : t.data.length) !== 0 ? "100%" : ""
} : (A = t.option) == null ? void 0 : A.scroll,
bordered: ((D = t.option) == null ? void 0 : D.bordered) ?? u.bordered,
"selected-keys": H.value,
"onUpdate:selectedKeys": e[4] || (e[4] = (n) => H.value = n),
"page-position": ((K = t.option) == null ? void 0 : K.pagePosition) ?? u.pagePosition,
onFilterChange: he,
onSorterChange: me,
"scroll-bar": !0,
"row-selection": t.option.rowSelection
}), je({ _: 2 }, [
p.menu ? {
name: "menu",
fn: r(({ record: n, rowIndex: h, column: k }) => [
b(o.$slots, "menu", {
record: n,
column: k,
rowIndex: h,
size: d.value
}, void 0, !0)
]),
key: "0"
} : void 0,
V(w.value.filter((n) => n.slotName), (n) => ({
name: n.slotName,
fn: r(({ record: h, rowIndex: k, column: Ne }) => [
b(o.$slots, n.slotName || "", {
size: d.value,
record: h,
column: Ne,
rowIndex: k
}, void 0, !0)
])
})),
V(w.value, (n) => ({
name: n.field + "Title",
fn: r(({ column: h }) => [
p[n.titleSlotName] ? b(o.$slots, n.titleSlotName || "", {
key: 0,
size: d.value,
label: h.label,
column: h
}, void 0, !0) : (a(), v("span", Je, [
Le(ae(n.label) + " ", 1),
n.helpIconTableText ? (a(), _(xe, {
key: 0,
content: n.helpIconTableText
}, {
default: r(() => [
g(Ce, { size: d.value }, null, 8, ["size"])
]),
_: 2
}, 1032, ["content"])) : s("", !0)
]))
])
}))
]), 1040, ["column-resizable", "columns", "size", "loading", "data", "sticky-header", "stripe", "row-key", "scroll", "bordered", "selected-keys", "page-position", "row-selection"])
], 2)), [
[Te, de]
]),
(((q = t.option) == null ? void 0 : q.page) ?? !0) && c.value.total > 0 ? (a(), v("div", {
key: 4,
ref_key: "pageRef",
ref: $,
style: Oe([{ display: "flex", "justify-content": "flex-end", "padding-top": "20px", "border-top": "1px solid #ebebeb" }, {
justifyContent: ((E = t.option) == null ? void 0 : E.pagePosition) ?? "flex-end"
}])
}, [
g(we, {
total: c.value.total,
"onUpdate:total": e[5] || (e[5] = (n) => c.value.total = n),
current: c.value.current,
"onUpdate:current": e[6] || (e[6] = (n) => c.value.current = n),
"page-size": c.value.pageSize,
"onUpdate:pageSize": e[7] || (e[7] = (n) => c.value.pageSize = n),
onChange: ge,
onPageSizeChange: fe,
"show-total": ((J = (G = t.option) == null ? void 0 : G.page) == null ? void 0 : J.showTotal) ?? !0,
"show-page-size": ((X = (Q = t.option) == null ? void 0 : Q.page) == null ? void 0 : X.showPageSize) ?? !0,
"show-jumper": ((Z = (Y = t.option) == null ? void 0 : Y.page) == null ? void 0 : Z.showJumper) ?? !1,
simple: ((te = (ee = t.option) == null ? void 0 : ee.page) == null ? void 0 : te.simple) ?? !1,
"page-size-options": ((ne = (oe = t.option) == null ? void 0 : oe.page) == null ? void 0 : ne.pageSizeOptions) ?? [10, 20, 40, 50, 100]
}, null, 8, ["total", "current", "page-size", "show-total", "show-page-size", "show-jumper", "simple", "page-size-options"])
], 4)) : s("", !0)
], 512);
};
}
});
export {
Ze as default
};