@aplus-frontend/ui
Version:
557 lines (556 loc) • 18.1 kB
JavaScript
import { defineComponent as Ye, useSlots as Ze, getCurrentInstance as et, ref as y, computed as n, unref as t, toRef as tt, nextTick as ae, watch as E, createElementBlock as I, openBlock as s, normalizeStyle as L, normalizeClass as m, createCommentVNode as w, createElementVNode as S, createVNode as K, mergeProps as R, createSlots as V, withCtx as c, Fragment as re, renderList as O, createBlock as d, resolveDynamicComponent as B, renderSlot as D, normalizeProps as ot, guardReactiveProps as at } from "vue";
import { Spin as rt, Empty as ne, Pagination as nt } from "@aplus-frontend/antdv";
import { useToken as lt } from "@aplus-frontend/antdv/es/theme/internal";
import { isUndefined as b, isFunction as $, isArray as st, omit as it } from "lodash-unified";
import { VxeUI as le, VxeTable as dt, VxeColumn as se } from "vxe-table";
import "vxe-table/es/style.css";
import { noRenderAsFormItemValueList as ut } from "../ap-table/constants.mjs";
import { useProvideApTable as ct } from "../ap-table/context.mjs";
import { useTablePaging as pt } from "../ap-table/hooks/use-table-paging-ng.mjs";
import { getColumnOrder as ie, updateFormProps as ft, getFieldProps as mt, getSearchFormItemRenderNode as gt, recursionApColumns as de } from "../ap-table/utils.mjs";
import "../config-provider/index.mjs";
import "../scroll-bar/index.mjs";
import "../utils/index.mjs";
import { getValidVNodeList as ht } from "../utils/slot.mjs";
import { useDevWarning as Ct } from "../utils/warning.mjs";
import { ApForm as vt } from "../ap-form/index.mjs";
import { DEFAULT_ROW_SELECTION_CONFIG as ue, sizeReverseMap as yt, sizeMap as wt, ROW_SELECTION_FIELD as St } from "./constants.mjs";
import { useInnerParams as Rt } from "./hooks/use-inner-params.mjs";
import { useRenderColumns as bt } from "./hooks/use-render-columns.mjs";
import xt from "./hooks/use-row-selection.mjs";
import { useTableStyle as kt } from "./hooks/use-table-style.mjs";
import Ft from "./style/index.mjs";
import { toVxeProps as Et, getRowExpandProps as It, getRowSelectionProps as Bt } from "./utils/table.mjs";
import { useNamespace as Pt } from "../config-provider/hooks/use-namespace.mjs";
import { useGlobalConfig as ce } from "../config-provider/hooks/use-global-config.mjs";
import { useLocale as Tt } from "../config-provider/hooks/use-locale.mjs";
import { isDef as Nt } from "../utils/is.mjs";
import At from "../scroll-bar/index.vue.mjs";
const uo = /* @__PURE__ */ Ye({
name: "ApGrid",
__name: "index",
props: {
dropdownPrefixCls: {},
bordered: { type: Boolean, default: !1 },
locale: {},
onChange: {},
onResizeColumn: {},
getPopupContainer: {},
scroll: {},
sortDirections: { default: () => ["ascend", "descend"] },
showSorterTooltip: { type: [Boolean, Object], default: !1 },
prefixCls: {},
tableLayout: {},
title: {},
id: {},
showHeader: { type: Boolean, default: !0 },
components: {},
customRow: {},
customHeaderRow: {},
direction: {},
expandFixed: { type: [String, Boolean], default: !1 },
expandColumnWidth: {},
expandedRowKeys: {},
defaultExpandedRowKeys: {},
expandedRowRender: {},
expandRowByClick: { type: Boolean, default: !1 },
expandIcon: {},
onExpand: {},
onExpandedRowsChange: {},
defaultExpandAllRows: { type: Boolean, default: !1 },
indentSize: { default: 15 },
expandIconColumnIndex: {},
showExpandColumn: { type: Boolean, default: !0 },
expandedRowClassName: {},
childrenColumnName: { default: "children" },
rowExpandable: {},
sticky: { type: [Boolean, Object], default: !1 },
transformCellText: {},
rowHoverable: { type: Boolean },
rowClassName: {},
stripe: { type: Boolean },
headerRowClassName: {},
footerRowClassName: {},
cellClassName: {},
headerCellClassName: {},
footerCellClassName: {},
rowStyle: {},
headerRowStyle: {},
footerRowStyle: {},
cellStyle: {},
headerCellStyle: {},
footerCellStyle: {},
height: {},
minHeight: {},
maxHeight: {},
mergeCells: {},
mergeFooterItems: {},
cellConfig: {},
loading: { type: Boolean, default: void 0 },
loadingConfig: {},
headerCellConfig: {},
footerCellConfig: {},
round: { type: Boolean, default: void 0 },
columns: {},
rowSelection: { type: [Boolean, Object] },
card: { type: Boolean, default: !1 },
params: {},
request: {},
defaultData: {},
dataSource: {},
onLoadingChange: {},
onShownColumnsChange: {},
searchForm: { type: [Boolean, Object], default: void 0 },
beforeSearchSubmit: {},
pagination: { type: [Boolean, Object], default: void 0 },
searchFormWrapperStyle: {},
tableWrapperStyle: {},
wrapperStyle: {},
manual: { type: Boolean, default: void 0 },
size: { default: "mini" },
adaptive: { type: Boolean, default: !1 },
columnResizable: { type: [Boolean, Object], default: !1 },
rowKey: { default: "key" },
footer: {},
virtual: { type: [Boolean, Object], default: void 0 },
expandable: {},
value: {},
rowHighlightable: { type: [Boolean, Function], default: !1 },
treeConfig: {},
onReady: {}
},
setup(pe, { expose: fe }) {
const P = Ze(), o = pe, x = et()?.appContext.app;
x && !x.__VXE_PC_UI_INSTALLED__ && (x.use(le), x.__VXE_PC_UI_INSTALLED__ = !0), Ct("ApGrid")(
!1,
"breaking",
"AgGrid has been EOL, Please use AgGrid(https://aplus.aplnk.com/aplus-ui/components/ag-grid/) instead."
);
const { e: k, b: u, be: me } = Pt("ap-grid"), ge = Ft("ap-grid"), he = ce("valueTypeMap"), Ce = ce("apGrid"), i = y([]), W = y([]), l = y(), F = y(o.size), ve = kt(), [, ye] = lt(), { t: we } = Tt(), T = y(!0);
le.setConfig({
i18n: (e, a) => we(`ap.${e}`, a)
});
const { renderConfig: Se, updateSignal: Re } = bt(i);
let G = 0;
const C = n(() => {
let e = o.rowSelection || Ce.value?.rowSelection;
if (e)
return e === !0 ? ue : {
...ue,
...e
};
}), be = n(() => {
if (l.value)
return l.value.$el.querySelector(
".vxe-table--header-inner-wrapper"
);
}), M = n(() => (G++, o.columns?.filter(
(e) => !e.hideInSearch && e.dataIndex && (e.valueType || e.customRenderFormItem) && !ut.includes(e.valueType)
)?.sort((e, a) => {
let r = ie(e.order);
return ie(a.order) - r;
})?.map((e) => {
const a = ft(
e,
mt(e.fieldProps, {})
), r = {
...e,
fieldProps: {
label: e.title,
name: e.dataIndex,
// tips: 在表格中的查询表单项默认是带边框的
bordered: !0,
...a || {},
_signal: G
},
renderNode: void 0
};
return r.renderNode = gt(
r,
t(he)
), r;
}) || [])), xe = n(() => Nt(o.manual) ? o.manual : ht(P.searchFormExtra?.() || []).some((a) => a.type?.name === "ApView")), ke = n(() => [
u(),
o.card ? null : u("wrapper"),
o.adaptive ? u("adaptive") : null,
o.sticky ? u("sticky") : null,
ge.value
].filter(Boolean)), j = n(() => de(t(i), (e) => {
if (e.sorter === !0)
return e.key || e.dataIndex;
}).filter(Boolean)), H = n(() => de(t(i), (e) => {
if (e.filters && !e.onFilter)
return e.key || e.dataIndex;
}).filter(Boolean)), {
formRef: g,
submit: N,
reset: A,
refresh: q,
data: p,
tableProps: U,
setDataSource: Fe,
handleTableChangeOptional: Ee,
getPaging: Ie,
setPaging: Be,
submitWith: X,
getLastParams: Pe
} = pt({
async request(e) {
if (C.value && !C.value.preserveSelectedRowKeys && b(o.dataSource) && !T.value && _(), T.value && (T.value = !1), !b(o.dataSource)) {
const r = e.pageSize * (e.current - 1);
return {
data: (o.pagination === !1 ? o.dataSource : o.dataSource.slice(r, r + e.pageSize)) || [],
total: o.dataSource.length || 0
};
}
const a = await o.request?.(e);
return {
data: a?.data || [],
total: a?.total || 0
};
},
namespace: "ap-grid",
filterFields: H,
sortFields: j,
params: tt(o, "params"),
defaultData: o.defaultData,
manual: t(xe),
formatParams: o.beforeSearchSubmit,
pagination: o.pagination,
onClickReset: je,
onAfterRequest: He
}), { sortChangeEvent: Te, filterChangeEvent: Ne, paginationChangeEvent: Ae } = Rt(Ee);
ct({
columns: n(() => i.value),
columnsBackup: n(() => W.value),
size: n(() => wt[F.value]),
updateColumns(e) {
i.value = e, o.onShownColumnsChange?.(e);
},
updateSize(e) {
F.value = yt[e];
},
renderConfig: n(() => ({
className: me("table-header", "title"),
color: ye.value.colorTextTertiary
})),
dataSource: n(() => t(p).records),
getSearchFormValues: Q,
setSearchFormValues: J,
submit: N,
submitWith: X,
reset: A,
refresh: q,
getSearchFormSorterItems: Y,
setSearchFormSorterItems: Z,
resetSearchFormSorterItems: ee,
getLastParams: Pe
});
const ze = n(
() => i.value.some(
(e) => e.fixed === "left" || e.fixed === !0
) ? "left" : void 0
), _e = n(
() => b(o.loading) ? p.loading : o.loading
), Le = n(
() => b(o.dataSource) ? p.records : o.dataSource
), { selectedRows: z, rowSelection: h, ...v } = xt({
...C.value,
dataSource: Le,
rowKey: o.rowKey
}), Ke = ({
checked: e
}) => {
const a = l.value;
a && a && v.selectChange(
e,
a.getCheckboxRecords(),
a.getCheckboxReserveRecords()
);
}, Ve = ({
checked: e
}) => {
const a = l.value;
a && v.selectAllChange(e, [
...a.getCheckboxReserveRecords(),
...a.getCheckboxRecords()
]);
}, Oe = () => {
const e = l.value;
e && v.selectRangeChange(e.getCheckboxRecords(), [
...e.getCheckboxReserveRecords(),
...e.getCheckboxRecords()
]);
}, De = () => {
const e = l.value;
e && (z.value = [e.getRadioRecord()]);
}, $e = ({
row: e
}) => {
const a = o.rowHighlightable;
$(a) && a(e);
};
function We() {
return o.columns?.filter((e) => !e.hideInTable) || [];
}
function J(e) {
g.value?.apForm?.setFieldsValue?.(e);
}
function Q(e = !1) {
const a = e ? "getFieldsValueTransformed" : "getFieldsValue";
return g.value?.apForm?.[a]?.(!0);
}
function Y() {
return g.value?.getSorterItems() || [];
}
function Z(e) {
g.value?.setSorterItems(e);
}
function ee() {
g.value?.resetSorterItems();
}
function _() {
v.clearAll();
const e = l.value;
e && (h.value.type === "radio" ? (e.clearRadioRow(), e.clearRadioReserve()) : (e.clearCheckboxRow(), e.clearCheckboxReserve()));
}
function Ge(e) {
$(o.rowKey) || (v.selectMultiByKeys(e), te());
}
function Me(e) {
const a = l.value;
if (!a)
return;
const r = String(e[o.rowKey]), f = a.getRowById(r);
a.setCurrentRow(f);
}
function je() {
const e = l.value;
e && (e.clearSort(), e.clearFilter());
}
function te() {
ae(() => {
h.value.type === "radio" ? l.value?.setRadioRowKey(h.value.selectedRowKeys[0]) : l.value?.setCheckboxRowKey(
h.value.selectedRowKeys,
!0
);
});
}
function He(e) {
te(), o.onReady && ae(() => {
o.onReady(e);
});
}
async function qe(e, a) {
const r = p.records[e];
if (r)
return l.value?.scrollToRow(r, a);
}
const Ue = (e) => $(o.rowKey) ? o.rowKey(e) : e[o.rowKey];
async function Xe(e, a = !0) {
const r = l.value;
if (!r)
return;
const f = st(e) ? e : [e], Je = (r.getData() || []).filter(
(Qe) => f.includes(Ue(Qe))
);
r.setRowExpand(Je, a);
}
return E(
() => [o.columnResizable, o.columns],
() => {
const e = We();
i.value = e, o.onShownColumnsChange?.(e), W.value = e;
},
{
deep: !0,
immediate: !0
}
), E(
() => o.dataSource,
(e) => {
Fe(e);
},
{ immediate: !0, deep: !0 }
), E(
() => t(p).loading,
(e) => {
o.onLoadingChange?.(e);
}
), E(
() => o.size,
(e) => {
F.value = e;
}
), fe({
submit: N,
reset: A,
refresh: q,
submitWith: X,
setSearchFormValues: J,
getSearchFormValues: Q,
getShowColumns: () => t(i),
rowSelection: {
selectedRows: n(() => z.value),
setSelectedRowKeys: Ge,
clearAll: _
},
scrollToRow: qe,
getDataSource: () => t(p.records),
setCurrentRow: Me,
getPaging: Ie,
setPaging: Be,
getSearchFormSorterItems: Y,
setSearchFormSorterItems: Z,
resetSearchFormSorterItems: ee,
setRowExpand: Xe
}), (e, a) => (s(), I("div", {
class: m(ke.value),
style: L(e.wrapperStyle)
}, [
t(b)(e.dataSource) && e.searchForm !== !1 && M.value.length > 0 ? (s(), I("div", {
key: 0,
class: m(e.card ? t(k)("search-wrapper") : null),
style: L(e.searchFormWrapperStyle)
}, [
K(t(vt).SearchForm, R(e.searchForm || {}, {
ref_key: "formRef",
ref: g,
"custom-reset": "",
"submit-loading": t(U).loading,
onSubmit: t(N),
onReset: t(A)
}), V({
default: c(() => [
(s(!0), I(re, null, O(M.value, (r) => (s(), d(B(r.renderNode), {
key: r.dataIndex
}))), 128))
]),
_: 2
}, [
P.searchFormExtra ? {
name: "extra",
fn: c(() => [
D(e.$slots, "searchFormExtra")
]),
key: "0"
} : void 0
]), 1040, ["submit-loading", "onSubmit", "onReset"])
], 6)) : w("", !0),
S("div", {
class: m([t(k)("table-wrapper"), e.card ? t(k)("table-wrapper-card") : null]),
style: L(e.tableWrapperStyle)
}, [
S("div", {
class: m(t(u)("header-wrapper"))
}, [
D(e.$slots, "title", {
selectedRows: t(z),
selectedRowKeys: t(h).selectedRowKeys,
shownColumns: i.value,
clearAll: _
})
], 2),
S("div", {
class: m(t(u)("vxe-wrapper"))
}, [
(s(), d(t(dt), R(t(Et)(o, C.value), {
ref_key: "tableRef",
ref: l,
key: t(Re),
data: t(p).records,
"sort-config": {
remote: j.value.length > 0,
trigger: "cell"
},
"filter-config": {
remote: H.value.length > 0
},
loading: _e.value,
style: t(ve),
size: F.value,
onSortChange: t(Te),
onFilterChange: t(Ne),
onCheckboxChange: Ke,
onCheckboxRangeChange: Oe,
onCheckboxAll: Ve,
onRadioChange: De,
onCurrentRowChange: $e
}), V({
empty: c(() => [
K(t(ne), {
image: t(ne).PRESENTED_IMAGE_SIMPLE
}, null, 8, ["image"])
]),
loading: c(() => [
S("div", {
class: m(t(k)("table-loading-wrapper"))
}, [
K(t(rt))
], 2)
]),
default: c(() => [
o.expandable && i.value.length ? (s(), d(t(se), R({ key: 0 }, t(It)(e.expandable), { fixed: ze.value }), V({
content: c((r) => [
(s(), d(B(o.expandable.renderContent(r))))
]),
_: 2
}, [
e.expandable?.renderCell ? {
name: "default",
fn: c((r) => [
(s(), d(B(
e.expandable.renderCell(
r.$table.isRowExpandByRow(r.row),
r.row
)
)))
]),
key: "0"
} : void 0
]), 1040, ["fixed"])) : w("", !0),
C.value && i.value.length ? (s(), d(t(se), R(
{ key: 1 },
t(Bt)(t(h), i.value, o.size),
{
resizable: !1,
field: t(St)
}
), null, 16, ["field"])) : w("", !0),
(s(!0), I(re, null, O(t(Se), (r) => (s(), d(B(r), {
key: r.props.colId
}))), 128))
]),
_: 2
}, [
O(t(it)(P, ["searchFormExtra"]), (r, f) => ({
name: f,
fn: c((oe) => [
D(e.$slots, f, ot(at(oe || {})))
])
}))
]), 1040, ["data", "sort-config", "filter-config", "loading", "style", "size", "onSortChange", "onFilterChange"]))
], 2),
S("div", {
class: m(t(u)("pagination-wrapper"))
}, [
e.sticky ? (s(), d(t(At), {
key: 0,
direction: "horizontal",
"scroll-container": be.value,
"extra-size": -4.2,
"bar-color": "var(--scrollbar-thumb-color-base)",
"track-color": "var(--table-header-bg, #f2f6f9)"
}, null, 8, ["scroll-container"])) : w("", !0),
e.pagination !== !1 ? (s(), d(t(nt), R({
key: 1,
class: t(u)("pagination")
}, t(U).pagination, { onChange: t(Ae) }), null, 16, ["class", "onChange"])) : w("", !0)
], 2)
], 6)
], 6));
}
});
export {
uo as default
};