refactor: 优化 ListTable 组件滚动逻辑和样式
- 在 `ListTable` 组件中合并默认滚动配置 - 更新 `TenantMeetingPointsSettings`、`MeetingPointsManagement` 和 `logs/index` 页面的滚动设置 - 优化 `ListTable` 和相关页面的 CSS 样式 - 更新 `fetchLogs` 请求参数处理逻辑dev_na
parent
4499e6265b
commit
33caa1201f
|
|
@ -69,6 +69,10 @@
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-table-container .list-table-table--y-scroll.ant-table-wrapper .ant-table-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.list-table-container .list-table-table--y-scroll.ant-table-wrapper .ant-table-body {
|
.list-table-container .list-table-table--y-scroll.ant-table-wrapper .ant-table-body {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,14 @@ function ListTable<T extends Record<string, any>>({
|
||||||
className = "",
|
className = "",
|
||||||
onChange,
|
onChange,
|
||||||
}: ListTableProps<T>) {
|
}: ListTableProps<T>) {
|
||||||
const hasVerticalScroll = scroll?.y !== undefined;
|
const mergedScroll = React.useMemo(() => {
|
||||||
|
return {
|
||||||
|
x: 1200,
|
||||||
|
...scroll,
|
||||||
|
};
|
||||||
|
}, [scroll]);
|
||||||
|
|
||||||
|
const hasVerticalScroll = mergedScroll.y !== undefined;
|
||||||
const rowSelection: TableProps<T>["rowSelection"] = onSelectionChange
|
const rowSelection: TableProps<T>["rowSelection"] = onSelectionChange
|
||||||
? {
|
? {
|
||||||
selectedRowKeys,
|
selectedRowKeys,
|
||||||
|
|
@ -104,7 +111,7 @@ function ListTable<T extends Record<string, any>>({
|
||||||
|
|
||||||
const wrapperStyle = hasVerticalScroll
|
const wrapperStyle = hasVerticalScroll
|
||||||
? ({
|
? ({
|
||||||
["--list-table-scroll-y" as string]: typeof scroll.y === "number" ? `${scroll.y}px` : scroll.y,
|
["--list-table-scroll-y" as string]: typeof mergedScroll.y === "number" ? `${mergedScroll.y}px` : mergedScroll.y,
|
||||||
} as React.CSSProperties)
|
} as React.CSSProperties)
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
|
|
@ -118,7 +125,7 @@ function ListTable<T extends Record<string, any>>({
|
||||||
dataSource={dataSource}
|
dataSource={dataSource}
|
||||||
rowKey={rowKey}
|
rowKey={rowKey}
|
||||||
pagination={mergedPagination}
|
pagination={mergedPagination}
|
||||||
scroll={scroll}
|
scroll={mergedScroll}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
onRow={(record) => ({
|
onRow={(record) => ({
|
||||||
|
|
|
||||||
|
|
@ -857,6 +857,10 @@ body::after {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-table-wrapper .ant-table-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.ant-table-wrapper .ant-table-body {
|
.ant-table-wrapper .ant-table-body {
|
||||||
overflow-y: auto !important;
|
overflow-y: auto !important;
|
||||||
max-height: none !important;
|
max-height: none !important;
|
||||||
|
|
|
||||||
|
|
@ -388,14 +388,14 @@ export default function MeetingPointsManagement() {
|
||||||
|
|
||||||
const ledgerTableContent = (
|
const ledgerTableContent = (
|
||||||
<div style={{ display: "flex", flexDirection: "column", height: "400px" }}>
|
<div style={{ display: "flex", flexDirection: "column", height: "400px" }}>
|
||||||
<div className="app-page__table-wrap" style={{ overflow: "auto", padding: "0 24px" }}>
|
<div className="app-page__table-wrap" style={{overflow: "hidden", padding: "0 24px"}}>
|
||||||
<ListTable<MeetingPointsLedgerListItemVO>
|
<ListTable<MeetingPointsLedgerListItemVO>
|
||||||
rowKey="id"
|
rowKey="id"
|
||||||
columns={ledgerColumns}
|
columns={ledgerColumns}
|
||||||
dataSource={records}
|
dataSource={records}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
totalCount={total}
|
totalCount={total}
|
||||||
scroll={{ x: 1100, y: 400 }}
|
scroll={{x: 1100, y: 280}}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -416,13 +416,13 @@ export default function MeetingPointsManagement() {
|
||||||
|
|
||||||
const personalAccountTableContent = (
|
const personalAccountTableContent = (
|
||||||
<div style={{ display: "flex", flexDirection: "column", height: "400px" }}>
|
<div style={{ display: "flex", flexDirection: "column", height: "400px" }}>
|
||||||
<div className="app-page__table-wrap" style={{ overflow: "auto", padding: "0 24px" }}>
|
<div className="app-page__table-wrap" style={{overflow: "hidden", padding: "0 24px"}}>
|
||||||
<ListTable<MeetingPointsPersonalAccountVO>
|
<ListTable<MeetingPointsPersonalAccountVO>
|
||||||
rowKey="userId"
|
rowKey="userId"
|
||||||
columns={personalAccountColumns}
|
columns={personalAccountColumns}
|
||||||
dataSource={pagedPersonalAccounts}
|
dataSource={pagedPersonalAccounts}
|
||||||
totalCount={personalAccountRows.length}
|
totalCount={personalAccountRows.length}
|
||||||
scroll={{ x: 900, y: 400 }}
|
scroll={{x: 900, y: 280}}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -325,14 +325,14 @@ export default function TenantMeetingPointsSettings() {
|
||||||
<Text type="secondary">平台管理员可查看并调整全部租户的余额校验开关。</Text>
|
<Text type="secondary">平台管理员可查看并调整全部租户的余额校验开关。</Text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="app-page__table-wrap" style={{ overflow: "auto", padding: "0 24px" }}>
|
<div className="app-page__table-wrap" style={{overflow: "hidden", padding: "0 24px"}}>
|
||||||
<ListTable<TenantMeetingPointsSettingVO>
|
<ListTable<TenantMeetingPointsSettingVO>
|
||||||
rowKey="tenantId"
|
rowKey="tenantId"
|
||||||
columns={columns}
|
columns={columns}
|
||||||
dataSource={records}
|
dataSource={records}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
totalCount={total}
|
totalCount={total}
|
||||||
scroll={{ x: 1200, y: 500 }}
|
scroll={{x: 1200, y: "calc(100vh - 380px)"}}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,11 @@ export default function Logs() {
|
||||||
const loadData = async (currentParams = params) => {
|
const loadData = async (currentParams = params) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const result = await fetchLogs({ ...currentParams, logType: activeTab });
|
const apiParams = {
|
||||||
|
...currentParams,
|
||||||
|
sortOrder: currentParams.sortOrder === "ascend" ? "asc" : currentParams.sortOrder === "descend" ? "desc" : undefined
|
||||||
|
};
|
||||||
|
const result = await fetchLogs({...apiParams, logType: activeTab});
|
||||||
setData(result.records || []);
|
setData(result.records || []);
|
||||||
setTotal(result.total || 0);
|
setTotal(result.total || 0);
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -95,12 +99,14 @@ export default function Logs() {
|
||||||
}, [activeTab, isPlatformAdmin, params.tenantId]);
|
}, [activeTab, isPlatformAdmin, params.tenantId]);
|
||||||
|
|
||||||
const handleTableChange = (pagination: any, _filters: any, sorter: any) => {
|
const handleTableChange = (pagination: any, _filters: any, sorter: any) => {
|
||||||
|
const sField = sorter?.field || "createdAt";
|
||||||
|
const sOrder = sorter?.order || undefined;
|
||||||
setParams({
|
setParams({
|
||||||
...params,
|
...params,
|
||||||
current: pagination.current,
|
current: pagination?.current || params.current,
|
||||||
size: pagination.pageSize,
|
size: pagination?.pageSize || params.size,
|
||||||
sortField: sorter.field || "createdAt",
|
sortField: sField,
|
||||||
sortOrder: sorter.order || "descend"
|
sortOrder: sOrder
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -345,7 +351,7 @@ export default function Logs() {
|
||||||
: <><Tabs.TabPane tab={<span><InfoCircleOutlined aria-hidden="true" />{t("logs.opLog")}</span>} key="OPERATION" /><Tabs.TabPane tab={<span><UserOutlined aria-hidden="true" />{t("logs.loginLog")}</span>} key="LOGIN" /></>}
|
: <><Tabs.TabPane tab={<span><InfoCircleOutlined aria-hidden="true" />{t("logs.opLog")}</span>} key="OPERATION" /><Tabs.TabPane tab={<span><UserOutlined aria-hidden="true" />{t("logs.loginLog")}</span>} key="LOGIN" /></>}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
<div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflow: "auto", padding: "0 24px" }}>
|
<div className="app-page__table-wrap" style={{flex: 1, minHeight: 0, overflow: "hidden", padding: "0 24px"}}>
|
||||||
<ListTable
|
<ListTable
|
||||||
rowKey="id"
|
rowKey="id"
|
||||||
columns={columns}
|
columns={columns}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue