Skip to content

Commit ed85fab

Browse files
LZS911LZS911
authored
Merge pull request #782 from actiontech/fix/list-scroll
[fix](SqlManagementConf): Fix horizontal scrollbar for tables
2 parents 654f52b + 5b6215c commit ed85fab

File tree

3 files changed

+112
-21
lines changed

3 files changed

+112
-21
lines changed

‎packages/sqle/src/page/SqlManagementConf/Detail/ScanTypeSqlCollection/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 89 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ exports[`test ScanTypeSqlCollection should match snapshot 1`] = `
8181
</div>
8282
</div>
8383
<div
84-
class="ant-table-wrapper actiontech-table-namespace css-fxd6ka"
84+
class="ant-table-wrapper actiontech-table-namespace css-1gswrju"
8585
>
8686
<div
8787
class="ant-spin-nested-loading"
@@ -114,17 +114,17 @@ exports[`test ScanTypeSqlCollection should match snapshot 1`] = `
114114
class="ant-spin-container ant-spin-blur"
115115
>
116116
<div
117-
class="ant-table ant-table-empty ant-table-scroll-horizontal"
117+
class="ant-table ant-table-empty ant-table-fixed-header"
118118
>
119119
<div
120120
class="ant-table-container"
121121
>
122122
<div
123-
class="ant-table-content"
124-
style="overflow-x: auto; overflow-y: hidden;"
123+
class="ant-table-header"
124+
style="overflow: hidden;"
125125
>
126126
<table
127-
style="min-width: 100%; table-layout: auto;"
127+
style="table-layout: fixed;"
128128
>
129129
<colgroup />
130130
<thead
@@ -136,6 +136,16 @@ exports[`test ScanTypeSqlCollection should match snapshot 1`] = `
136136
/>
137137
</tr>
138138
</thead>
139+
</table>
140+
</div>
141+
<div
142+
class="ant-table-body"
143+
style="overflow-y: scroll; max-height: 500px;"
144+
>
145+
<table
146+
style="table-layout: fixed;"
147+
>
148+
<colgroup />
139149
<tbody
140150
class="ant-table-tbody"
141151
>
@@ -161,9 +171,50 @@ exports[`test ScanTypeSqlCollection should match snapshot 1`] = `
161171
class="ant-table-cell"
162172
>
163173
<div
164-
class="ant-table-expanded-row-fixed"
165-
style="width: 0px; position: sticky; left: 0px; overflow: hidden;"
166-
/>
174+
class="ant-empty ant-empty-normal"
175+
>
176+
<div
177+
class="ant-empty-image"
178+
>
179+
<svg
180+
height="41"
181+
viewBox="0 0 64 41"
182+
width="64"
183+
xmlns="http://www.w3.org/2000/svg"
184+
>
185+
<g
186+
fill="none"
187+
fill-rule="evenodd"
188+
transform="translate(0 1)"
189+
>
190+
<ellipse
191+
cx="32"
192+
cy="33"
193+
fill="#f5f5f5"
194+
rx="32"
195+
ry="7"
196+
/>
197+
<g
198+
fill-rule="nonzero"
199+
stroke="#d9d9d9"
200+
>
201+
<path
202+
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
203+
/>
204+
<path
205+
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
206+
fill="#fafafa"
207+
/>
208+
</g>
209+
</g>
210+
</svg>
211+
</div>
212+
<div
213+
class="ant-empty-description"
214+
>
215+
暂无数据
216+
</div>
217+
</div>
167218
</td>
168219
</tr>
169220
</tbody>
@@ -587,7 +638,7 @@ exports[`test ScanTypeSqlCollection should match snapshot 2`] = `
587638
</div>
588639
</div>
589640
<div
590-
class="ant-table-wrapper actiontech-table-namespace css-fxd6ka"
641+
class="ant-table-wrapper actiontech-table-namespace css-1gswrju"
591642
>
592643
<div
593644
class="ant-spin-nested-loading"
@@ -596,17 +647,17 @@ exports[`test ScanTypeSqlCollection should match snapshot 2`] = `
596647
class="ant-spin-container"
597648
>
598649
<div
599-
class="ant-table ant-table-scroll-horizontal"
650+
class="ant-table ant-table-fixed-header"
600651
>
601652
<div
602653
class="ant-table-container"
603654
>
604655
<div
605-
class="ant-table-content"
606-
style="overflow-x: auto; overflow-y: hidden;"
656+
class="ant-table-header"
657+
style="overflow: hidden;"
607658
>
608659
<table
609-
style="min-width: 100%; table-layout: auto;"
660+
style="table-layout: fixed; visibility: hidden;"
610661
>
611662
<colgroup />
612663
<thead
@@ -960,6 +1011,16 @@ exports[`test ScanTypeSqlCollection should match snapshot 2`] = `
9601011
</th>
9611012
</tr>
9621013
</thead>
1014+
</table>
1015+
</div>
1016+
<div
1017+
class="ant-table-body"
1018+
style="overflow-y: scroll; max-height: 500px;"
1019+
>
1020+
<table
1021+
style="table-layout: fixed;"
1022+
>
1023+
<colgroup />
9631024
<tbody
9641025
class="ant-table-tbody"
9651026
>
@@ -2852,7 +2913,7 @@ exports[`test ScanTypeSqlCollection should open report drawer and set current au
28522913
</div>
28532914
</div>
28542915
<div
2855-
class="ant-table-wrapper actiontech-table-namespace css-fxd6ka"
2916+
class="ant-table-wrapper actiontech-table-namespace css-1gswrju"
28562917
>
28572918
<div
28582919
class="ant-spin-nested-loading"
@@ -2861,17 +2922,17 @@ exports[`test ScanTypeSqlCollection should open report drawer and set current au
28612922
class="ant-spin-container"
28622923
>
28632924
<div
2864-
class="ant-table ant-table-scroll-horizontal"
2925+
class="ant-table ant-table-fixed-header"
28652926
>
28662927
<div
28672928
class="ant-table-container"
28682929
>
28692930
<div
2870-
class="ant-table-content"
2871-
style="overflow-x: auto; overflow-y: hidden;"
2931+
class="ant-table-header"
2932+
style="overflow: hidden;"
28722933
>
28732934
<table
2874-
style="min-width: 100%; table-layout: auto;"
2935+
style="table-layout: fixed; visibility: hidden;"
28752936
>
28762937
<colgroup />
28772938
<thead
@@ -3225,6 +3286,16 @@ exports[`test ScanTypeSqlCollection should open report drawer and set current au
32253286
</th>
32263287
</tr>
32273288
</thead>
3289+
</table>
3290+
</div>
3291+
<div
3292+
class="ant-table-body"
3293+
style="overflow-y: scroll; max-height: 500px;"
3294+
>
3295+
<table
3296+
style="table-layout: fixed;"
3297+
>
3298+
<colgroup />
32283299
<tbody
32293300
class="ant-table-tbody"
32303301
>

‎packages/sqle/src/page/SqlManagementConf/Detail/ScanTypeSqlCollection/indx.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {
2-
ActiontechTable,
32
TableFilterContainer,
43
useTableFilterContainer,
54
useTableRequestParams,
@@ -10,7 +9,10 @@ import { useTranslation } from 'react-i18next';
109
import ReportDrawer from '../../../../components/ReportDrawer';
1110
import { useCallback, useEffect, useMemo, useState } from 'react';
1211
import { useBoolean, useRequest } from 'ahooks';
13-
import { ScanTypeSqlCollectionStyleWrapper } from './style';
12+
import {
13+
ScanTypeSqlCollectionStyleWrapper,
14+
ScanTypeSqlCollectionTableStyleWrapper
15+
} from './style';
1416
import instance_audit_plan from '@actiontech/shared/lib/api/sqle/service/instance_audit_plan';
1517
import {
1618
useCurrentProject,
@@ -41,6 +43,7 @@ import { ResponseCode } from '@actiontech/dms-kit';
4143
import { message } from 'antd';
4244
import { ROUTE_PATHS } from '@actiontech/dms-kit';
4345
import { ResultIconRenderProps } from '../../../../components/AuditResultMessage/index.type';
46+
4447
const BEING_AUDITED = 'being_audited';
4548
const ScanTypeSqlCollection: React.FC<ScanTypeSqlCollectionProps> = ({
4649
instanceAuditPlanId,
@@ -299,7 +302,11 @@ const ScanTypeSqlCollection: React.FC<ScanTypeSqlCollectionProps> = ({
299302
</TableToolbar>
300303

301304
{messageContextHolder}
302-
<ActiontechTable
305+
<ScanTypeSqlCollectionTableStyleWrapper
306+
isMultiLineFiltering={
307+
!!tableMetas?.filter_meta_list?.length &&
308+
tableMetas?.filter_meta_list?.length > 6
309+
}
303310
rowKey="id"
304311
setting={tableSetting}
305312
errorMessage={getTableRowError && getErrorMessage(getTableRowError)}
@@ -358,6 +365,9 @@ const ScanTypeSqlCollection: React.FC<ScanTypeSqlCollectionProps> = ({
358365
pagination={{
359366
total: tableRows?.total
360367
}}
368+
scroll={{
369+
y: '500px' // scroll 中的y 只支持string | number 所以这里的 500px 只是为了开启antd的固定列功能随便写的高度 具体高度在styled中动态计算
370+
}}
361371
/>
362372
<ReportDrawer
363373
title={t(

‎packages/sqle/src/page/SqlManagementConf/Detail/ScanTypeSqlCollection/style.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { styled } from '@mui/material';
2+
import { ActiontechTable } from '@actiontech/dms-kit/es/components/ActiontechTable';
23

34
export const ScanTypeSqlCollectionStyleWrapper = styled('section')`
45
.table-describe-column {
@@ -20,3 +21,12 @@ export const ScanTypeSqlCollectionStyleWrapper = styled('section')`
2021
width: fit-content;
2122
}
2223
`;
24+
25+
export const ScanTypeSqlCollectionTableStyleWrapper = styled(ActiontechTable)<{
26+
isMultiLineFiltering: boolean;
27+
}>`
28+
.ant-table-body {
29+
max-height: ${(isMultiLineFiltering) =>
30+
`calc(100vh - ${isMultiLineFiltering ? '278px' : '240px'}) !important`};
31+
}
32+
`;

0 commit comments

Comments
 (0)