@aplus-frontend/ui
Version:
553 lines (552 loc) • 18 kB
JavaScript
import { defineComponent as Qe, useSlots as Ye, getCurrentInstance as Ze, ref as y, computed as n, unref as t, toRef as et, nextTick as ae, watch as E, createElementBlock as I, openBlock as s, normalizeStyle as K, normalizeClass as m, createCommentVNode as w, createElementVNode as S, createVNode as L, 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 tt, guardReactiveProps as ot } from "vue";
import { VxeUI as ne, VxeTable as at, VxeColumn as le } from "vxe-table";
import "vxe-table/es/style.css";
import { isUndefined as b, isFunction as $, isArray as rt, omit as nt } from "lodash-unified";
import { ApForm as lt } from "../ap-form/index.mjs";
import "../config-provider/index.mjs";
import { noRenderAsFormItemValueList as st } from "../ap-table/constants.mjs";
import { getColumnOrder as se, updateFormProps as it, getFieldProps as dt, getSearchFormItemRenderNode as ut, recursionApColumns as ie } from "../ap-table/utils.mjs";
import { useTablePaging as ct } from "../ap-table/hooks/use-table-paging-ng.mjs";
import { Spin as pt, Empty as de, Pagination as ft } from "@aplus-frontend/antdv";
import { useInnerParams as mt } from "./hooks/use-inner-params.mjs";
import { toVxeProps as gt, getRowExpandProps as ht, getRowSelectionProps as Ct } from "./utils/table.mjs";
import vt from "./hooks/use-row-selection.mjs";
import { useProvideApTable as yt } from "../ap-table/context.mjs";
import { DEFAULT_ROW_SELECTION_CONFIG as ue, sizeReverseMap as wt, sizeMap as St, ROW_SELECTION_FIELD as Rt } from "./constants.mjs";
import { useRenderColumns as bt } from "./hooks/use-render-columns.mjs";
import { useToken as xt } from "@aplus-frontend/antdv/es/theme/internal";
import "../scroll-bar/index.mjs";
import { isDef as kt } from "../utils/index.mjs";
import { getValidVNodeList as Ft } from "../utils/slot.mjs";
import { useTableStyle as Et } from "./hooks/use-table-style.mjs";
import { useDevWarning as It } from "../utils/warning.mjs";
import Bt from "./style/index.mjs";
import { useNamespace as Tt } from "../config-provider/hooks/use-namespace.mjs";
import { useGlobalConfig as ce } from "../config-provider/hooks/use-global-config.mjs";
import { useLocale as Nt } from "../config-provider/hooks/use-locale.mjs";
import Pt from "../scroll-bar/index.vue.mjs";
const so = /* @__PURE__ */ Qe({
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: {},
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 T = Ye(), o = pe, x = Ze()?.appContext.app;
x && !x.__VXE_PC_UI_INSTALLED__ && (x.use(ne), x.__VXE_PC_UI_INSTALLED__ = !0), It("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 } = Tt("ap-grid"), ge = Bt("ap-grid"), he = ce("valueTypeMap"), Ce = ce("apGrid"), i = y([]), W = y([]), l = y(), F = y(o.size), ve = Et(), [, ye] = xt(), { t: we } = Nt(), N = y(!0);
ne.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) && !st.includes(e.valueType)
)?.sort((e, a) => {
let r = se(e.order);
return se(a.order) - r;
})?.map((e) => {
const a = it(
e,
dt(e.fieldProps, {})
), r = {
...e,
fieldProps: {
label: e.title,
name: e.dataIndex,
// tips: 在表格中的查询表单项默认是带边框的
bordered: !0,
...a || {},
_signal: G
},
renderNode: void 0
};
return r.renderNode = ut(
r,
t(he)
), r;
}) || [])), xe = n(() => kt(o.manual) ? o.manual : Ft(T.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(() => ie(t(i), (e) => {
if (e.sorter === !0)
return e.key || e.dataIndex;
}).filter(Boolean)), q = n(() => ie(t(i), (e) => {
if (e.filters && !e.onFilter)
return e.key || e.dataIndex;
}).filter(Boolean)), {
formRef: g,
submit: P,
reset: A,
refresh: H,
data: p,
tableProps: U,
setDataSource: Fe,
handleTableChangeOptional: Ee,
getPaging: Ie,
setPaging: Be,
submitWith: X
} = ct({
async request(e) {
if (C.value && !C.value.preserveSelectedRowKeys && b(o.dataSource) && !N.value && _(), N.value && (N.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: q,
sortFields: j,
params: et(o, "params"),
defaultData: o.defaultData,
manual: t(xe),
formatParams: o.beforeSearchSubmit,
pagination: o.pagination,
onClickReset: Me,
onAfterRequest: je
}), { sortChangeEvent: Te, filterChangeEvent: Ne, paginationChangeEvent: Pe } = mt(Ee);
yt({
columns: n(() => i.value),
columnsBackup: n(() => W.value),
size: n(() => St[F.value]),
updateColumns(e) {
i.value = e, o.onShownColumnsChange?.(e);
},
updateSize(e) {
F.value = wt[e];
},
renderConfig: n(() => ({
className: me("table-header", "title"),
color: ye.value.colorTextTertiary
})),
dataSource: n(() => t(p).records),
getSearchFormValues: Q,
setSearchFormValues: J,
submit: P,
submitWith: X,
reset: A,
refresh: H,
getSearchFormSorterItems: Y,
setSearchFormSorterItems: Z,
resetSearchFormSorterItems: ee
});
const Ae = n(
() => i.value.some(
(e) => e.fixed === "left" || e.fixed === !0
) ? "left" : void 0
), ze = n(
() => b(o.loading) ? p.loading : o.loading
), _e = n(
() => b(o.dataSource) ? p.records : o.dataSource
), { selectedRows: z, rowSelection: h, ...v } = vt({
...C.value,
dataSource: _e,
rowKey: o.rowKey
}), Ke = ({
checked: e
}) => {
const a = l.value;
a && a && v.selectChange(
e,
a.getCheckboxRecords(),
a.getCheckboxReserveRecords()
);
}, Le = ({
checked: e
}) => {
const a = l.value;
a && v.selectAllChange(e, [
...a.getCheckboxReserveRecords(),
...a.getCheckboxRecords()
]);
}, Ve = () => {
const e = l.value;
e && v.selectRangeChange(e.getCheckboxRecords(), [
...e.getCheckboxReserveRecords(),
...e.getCheckboxRecords()
]);
}, Oe = () => {
const e = l.value;
e && (z.value = [e.getRadioRecord()]);
}, De = ({
row: e
}) => {
const a = o.rowHighlightable;
$(a) && a(e);
};
function $e() {
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 We(e) {
$(o.rowKey) || (v.selectMultiByKeys(e), te());
}
function Ge(e) {
const a = l.value;
if (!a)
return;
const r = String(e[o.rowKey]), f = a.getRowById(r);
a.setCurrentRow(f);
}
function Me() {
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 je(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 He = (e) => $(o.rowKey) ? o.rowKey(e) : e[o.rowKey];
async function Ue(e, a = !0) {
const r = l.value;
if (!r)
return;
const f = rt(e) ? e : [e], Xe = (r.getData() || []).filter(
(Je) => f.includes(He(Je))
);
r.setRowExpand(Xe, a);
}
return E(
() => [o.columnResizable, o.columns],
() => {
const e = $e();
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: P,
reset: A,
refresh: H,
submitWith: X,
setSearchFormValues: J,
getSearchFormValues: Q,
getShowColumns: () => t(i),
rowSelection: {
selectedRows: n(() => z.value),
setSelectedRowKeys: We,
clearAll: _
},
scrollToRow: qe,
getDataSource: () => t(p.records),
setCurrentRow: Ge,
getPaging: Ie,
setPaging: Be,
getSearchFormSorterItems: Y,
setSearchFormSorterItems: Z,
resetSearchFormSorterItems: ee,
setRowExpand: Ue
}), (e, a) => (s(), I("div", {
class: m(ke.value),
style: K(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: K(e.searchFormWrapperStyle)
}, [
L(t(lt).SearchForm, R(e.searchForm || {}, {
ref_key: "formRef",
ref: g,
"custom-reset": "",
"submit-loading": t(U).loading,
onSubmit: t(P),
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
}, [
T.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: K(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(at), R(t(gt)(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: q.value.length > 0
},
loading: ze.value,
style: t(ve),
size: F.value,
onSortChange: t(Te),
onFilterChange: t(Ne),
onCheckboxChange: Ke,
onCheckboxRangeChange: Ve,
onCheckboxAll: Le,
onRadioChange: Oe,
onCurrentRowChange: De
}), V({
empty: c(() => [
L(t(de), {
image: t(de).PRESENTED_IMAGE_SIMPLE
}, null, 8, ["image"])
]),
loading: c(() => [
S("div", {
class: m(t(k)("table-loading-wrapper"))
}, [
L(t(pt))
], 2)
]),
default: c(() => [
o.expandable && i.value.length ? (s(), d(t(le), R({ key: 0 }, t(ht)(e.expandable), { fixed: Ae.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(le), R(
{ key: 1 },
t(Ct)(t(h), i.value, o.size),
{
resizable: !1,
field: t(Rt)
}
), 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(nt)(T, ["searchFormExtra"]), (r, f) => ({
name: f,
fn: c((oe) => [
D(e.$slots, f, tt(ot(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(Pt), {
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(ft), R({
key: 1,
class: t(u)("pagination")
}, t(U).pagination, { onChange: t(Pe) }), null, 16, ["class", "onChange"])) : w("", !0)
], 2)
], 6)
], 6));
}
});
export {
so as default
};