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