Skip to content

Commit 034a9f7

Browse files
pythonHuangpythonHuang
committed
fix: 所有网格页面去除页面滚动条，只在el-table内滚动
参照FlowLog页面的flex布局模式，统一改造13个列表页面： - 页面根容器: height:100% + display:flex + overflow:hidden - 搜索栏/页头: flex-shrink:0 固定不压缩 - 表格卡片: flex:1 + min-height:0 占满剩余高度 - el-table: height=100% 内部滚动 - 分页栏: flex-shrink:0 固定底部 修改页面: FlowDefinitionList, FlowInfoList, SuiteList, ApiList, FlowVersionList, FlowTestCase, TokenList, DataSourceList, StaticVariable, ScheduleTask, WebhookList, UserManage, ObjectList
1 parent 1bfccd8 commit 034a9f7

13 files changed

Lines changed: 541 additions & 78 deletions

‎JuggleNet6.Frontend/src/views/flow/FlowDefinitionList.vue‎

Lines changed: 48 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
</el-card>
3131

3232
<!-- 表格 -->
33-
<el-card>
34-
<el-table :data="tableData" stripe v-loading="loading" style="width:100%"
33+
<el-card class="table-card">
34+
<el-table :data="tableData" stripe v-loading="loading" height="100%"
3535
@selection-change="(rows: any) => selectedRows = rows">
3636
<el-table-column type="selection" width="45" />
3737
<el-table-column prop="flowKey" label="流程Key" width="200" show-overflow-tooltip />
@@ -69,9 +69,11 @@
6969
</template>
7070
</el-table-column>
7171
</el-table>
72-
<el-pagination v-model:current-page="page.num" v-model:page-size="page.size"
73-
:total="page.total" layout="total,prev,pager,next" style="margin-top:16px;justify-content:flex-end"
74-
@current-change="loadData" />
72+
<div class="pagination-bar">
73+
<el-pagination v-model:current-page="page.num" v-model:page-size="page.size"
74+
:total="page.total" layout="total,prev,pager,next"
75+
@current-change="loadData" />
76+
</div>
7577
</el-card>
7678

7779
<!-- 新建/编辑弹窗 -->
@@ -357,9 +359,47 @@ async function generateWord() {
357359
</script>
358360

359361
<style scoped>
360-
.page-container { padding: 20px; }
361-
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
362+
.page-container {
363+
padding: 16px;
364+
height: 100%;
365+
display: flex;
366+
flex-direction: column;
367+
overflow: hidden;
368+
box-sizing: border-box;
369+
}
370+
.page-header {
371+
display: flex;
372+
justify-content: space-between;
373+
align-items: center;
374+
margin-bottom: 12px;
375+
flex-shrink: 0;
376+
}
362377
.page-header h2 { font-size: 20px; color: #333; }
363-
.search-card { margin-bottom: 16px; }
378+
.search-card { flex-shrink: 0; margin-bottom: 12px; }
379+
.table-card {
380+
flex: 1;
381+
min-height: 0;
382+
display: flex;
383+
flex-direction: column;
384+
overflow: hidden;
385+
}
386+
.table-card :deep(.el-card__body) {
387+
flex: 1;
388+
min-height: 0;
389+
display: flex;
390+
flex-direction: column;
391+
overflow: hidden;
392+
padding-bottom: 0;
393+
}
394+
.table-card :deep(.el-table) {
395+
flex: 1;
396+
min-height: 0;
397+
}
398+
.pagination-bar {
399+
flex-shrink: 0;
400+
padding: 10px 0 2px;
401+
display: flex;
402+
justify-content: flex-end;
403+
}
364404
</style>
365405

‎JuggleNet6.Frontend/src/views/flow/FlowInfoList.vue‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<div class="page-header">
44
<h2>流程列表（已部署）</h2>
55
</div>
6-
<el-card>
7-
<el-table :data="tableData" stripe v-loading="loading">
6+
<el-card class="table-card">
7+
<el-table :data="tableData" stripe v-loading="loading" height="100%">
88
<el-table-column prop="flowKey" label="流程Key" width="200" show-overflow-tooltip />
99
<el-table-column prop="flowName" label="流程名称" />
1010
<el-table-column prop="flowType" label="类型" width="80">
@@ -24,9 +24,11 @@
2424
</template>
2525
</el-table-column>
2626
</el-table>
27-
<el-pagination v-model:current-page="page.num" v-model:page-size="page.size"
28-
:total="page.total" layout="total,prev,pager,next" style="margin-top:16px;justify-content:flex-end"
29-
@current-change="loadData" />
27+
<div class="pagination-bar">
28+
<el-pagination v-model:current-page="page.num" v-model:page-size="page.size"
29+
:total="page.total" layout="total,prev,pager,next"
30+
@current-change="loadData" />
31+
</div>
3032
</el-card>
3133
</div>
3234
</template>
@@ -69,7 +71,45 @@ function copyFlowUrl(row: any) {
6971
</script>
7072

7173
<style scoped>
72-
.page-container { padding: 20px; }
73-
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
74+
.page-container {
75+
padding: 16px;
76+
height: 100%;
77+
display: flex;
78+
flex-direction: column;
79+
overflow: hidden;
80+
box-sizing: border-box;
81+
}
82+
.page-header {
83+
display: flex;
84+
justify-content: space-between;
85+
align-items: center;
86+
margin-bottom: 12px;
87+
flex-shrink: 0;
88+
}
7489
.page-header h2 { font-size: 20px; color: #333; }
90+
.table-card {
91+
flex: 1;
92+
min-height: 0;
93+
display: flex;
94+
flex-direction: column;
95+
overflow: hidden;
96+
}
97+
.table-card :deep(.el-card__body) {
98+
flex: 1;
99+
min-height: 0;
100+
display: flex;
101+
flex-direction: column;
102+
overflow: hidden;
103+
padding-bottom: 0;
104+
}
105+
.table-card :deep(.el-table) {
106+
flex: 1;
107+
min-height: 0;
108+
}
109+
.pagination-bar {
110+
flex-shrink: 0;
111+
padding: 10px 0 2px;
112+
display: flex;
113+
justify-content: flex-end;
114+
}
75115
</style>

‎JuggleNet6.Frontend/src/views/flow/FlowTestCase.vue‎

Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@
5353
</el-card>
5454

5555
<!-- 表格 -->
56-
<el-card>
57-
<el-table :data="tableData" stripe v-loading="loading">
56+
<el-card class="table-card">
57+
<el-table :data="tableData" stripe v-loading="loading" height="100%">
5858
<el-table-column prop="id" label="ID" width="70" />
5959
<el-table-column prop="flowKey" label="流程Key" width="200" show-overflow-tooltip />
6060
<el-table-column prop="caseName" label="用例名称" />
@@ -76,9 +76,11 @@
7676
</template>
7777
</el-table-column>
7878
</el-table>
79-
<el-pagination v-model:current-page="page.num" v-model:page-size="page.size"
80-
:total="page.total" layout="total,prev,pager,next" style="margin-top:16px;justify-content:flex-end"
81-
@current-change="loadData" />
79+
<div class="pagination-bar">
80+
<el-pagination v-model:current-page="page.num" v-model:page-size="page.size"
81+
:total="page.total" layout="total,prev,pager,next"
82+
@current-change="loadData" />
83+
</div>
8284
</el-card>
8385

8486
<!-- 新建/编辑弹窗 -->
@@ -259,11 +261,49 @@ function viewResult(row: any) {
259261
</script>
260262

261263
<style scoped>
262-
.page-container { padding: 20px; }
263-
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
264+
.page-container {
265+
padding: 16px;
266+
height: 100%;
267+
display: flex;
268+
flex-direction: column;
269+
overflow: hidden;
270+
box-sizing: border-box;
271+
}
272+
.page-header {
273+
display: flex;
274+
justify-content: space-between;
275+
align-items: center;
276+
margin-bottom: 12px;
277+
flex-shrink: 0;
278+
}
264279
.page-header h2 { font-size: 20px; color: #333; }
265-
.search-card { margin-bottom: 16px; }
266-
.result-card { margin-bottom: 16px; background: #f8fff8; }
280+
.search-card { flex-shrink: 0; margin-bottom: 12px; }
281+
.result-card { flex-shrink: 0; margin-bottom: 12px; background: #f8fff8; }
282+
.table-card {
283+
flex: 1;
284+
min-height: 0;
285+
display: flex;
286+
flex-direction: column;
287+
overflow: hidden;
288+
}
289+
.table-card :deep(.el-card__body) {
290+
flex: 1;
291+
min-height: 0;
292+
display: flex;
293+
flex-direction: column;
294+
overflow: hidden;
295+
padding-bottom: 0;
296+
}
297+
.table-card :deep(.el-table) {
298+
flex: 1;
299+
min-height: 0;
300+
}
301+
.pagination-bar {
302+
flex-shrink: 0;
303+
padding: 10px 0 2px;
304+
display: flex;
305+
justify-content: flex-end;
306+
}
267307
.batch-summary { display: flex; gap: 40px; padding: 8px 0; }
268308
.section-title { font-weight: 600; margin: 12px 0 8px; color: #333; }
269309
.hint { font-size: 12px; color: #999; margin-top: 4px; }

‎JuggleNet6.Frontend/src/views/flow/FlowVersionList.vue‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
</div>
88
<el-button type="warning" @click="openDiffDialog" icon="Switch" :disabled="tableData.length < 2">版本对比</el-button>
99
</div>
10-
<el-card>
11-
<el-table :data="tableData" stripe v-loading="loading">
10+
<el-card class="table-card">
11+
<el-table :data="tableData" stripe v-loading="loading" height="100%">
1212
<el-table-column prop="version" label="版本号" width="100" />
1313
<el-table-column prop="status" label="状态" width="80">
1414
<template #default="{ row }">
@@ -241,8 +241,39 @@ function copyJson() {
241241
</script>
242242

243243
<style scoped>
244-
.page-container { padding: 20px; }
245-
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
244+
.page-container {
245+
padding: 16px;
246+
height: 100%;
247+
display: flex;
248+
flex-direction: column;
249+
overflow: hidden;
250+
box-sizing: border-box;
251+
}
252+
.page-header {
253+
display: flex;
254+
justify-content: space-between;
255+
align-items: center;
256+
margin-bottom: 12px;
257+
flex-shrink: 0;
258+
}
259+
.table-card {
260+
flex: 1;
261+
min-height: 0;
262+
display: flex;
263+
flex-direction: column;
264+
overflow: hidden;
265+
}
266+
.table-card :deep(.el-card__body) {
267+
flex: 1;
268+
min-height: 0;
269+
display: flex;
270+
flex-direction: column;
271+
overflow: hidden;
272+
}
273+
.table-card :deep(.el-table) {
274+
flex: 1;
275+
min-height: 0;
276+
}
246277
.diff-summary { display: flex; gap: 8px; margin-bottom: 12px; }
247278
.diff-code { background: #1e1e1e; color: #d4d4d4; border-radius: 8px; padding: 12px; font-family: 'Consolas', 'Monaco', monospace; font-size: 13px; overflow: auto; max-height: 60vh; }
248279
.diff-line { display: flex; gap: 8px; line-height: 1.6; padding: 0 4px; }

‎JuggleNet6.Frontend/src/views/object/ObjectList.vue‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<h2>对象管理</h2>
55
<el-button type="primary" icon="Plus" @click="openAdd">新建对象</el-button>
66
</div>
7-
<el-card>
8-
<el-table :data="tableData" stripe v-loading="loading">
7+
<el-card class="table-card">
8+
<el-table :data="tableData" stripe v-loading="loading" height="100%">
99
<el-table-column prop="objectCode" label="对象Code" width="220" show-overflow-tooltip />
1010
<el-table-column prop="objectName" label="对象名称" />
1111
<el-table-column prop="objectDesc" label="描述" show-overflow-tooltip />
@@ -18,9 +18,11 @@
1818
</template>
1919
</el-table-column>
2020
</el-table>
21-
<el-pagination v-model:current-page="page.num" v-model:page-size="page.size"
22-
:total="page.total" layout="total,prev,pager,next" style="margin-top:16px;justify-content:flex-end"
23-
@current-change="loadData" />
21+
<div class="pagination-bar">
22+
<el-pagination v-model:current-page="page.num" v-model:page-size="page.size"
23+
:total="page.total" layout="total,prev,pager,next"
24+
@current-change="loadData" />
25+
</div>
2426
</el-card>
2527

2628
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑对象' : '新建对象'" width="480px">
@@ -105,7 +107,45 @@ async function doDelete(row: any) {
105107
</script>
106108

107109
<style scoped>
108-
.page-container { padding: 20px; }
109-
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
110+
.page-container {
111+
padding: 16px;
112+
height: 100%;
113+
display: flex;
114+
flex-direction: column;
115+
overflow: hidden;
116+
box-sizing: border-box;
117+
}
118+
.page-header {
119+
display: flex;
120+
justify-content: space-between;
121+
align-items: center;
122+
margin-bottom: 12px;
123+
flex-shrink: 0;
124+
}
110125
.page-header h2 { font-size: 20px; color: #333; }
126+
.table-card {
127+
flex: 1;
128+
min-height: 0;
129+
display: flex;
130+
flex-direction: column;
131+
overflow: hidden;
132+
}
133+
.table-card :deep(.el-card__body) {
134+
flex: 1;
135+
min-height: 0;
136+
display: flex;
137+
flex-direction: column;
138+
overflow: hidden;
139+
padding-bottom: 0;
140+
}
141+
.table-card :deep(.el-table) {
142+
flex: 1;
143+
min-height: 0;
144+
}
145+
.pagination-bar {
146+
flex-shrink: 0;
147+
padding: 10px 0 2px;
148+
display: flex;
149+
justify-content: flex-end;
150+
}
111151
</style>

0 commit comments

Comments
 (0)