Skip to content

Commit afa56f3

Browse files
dataeaseShudataeaseShu
committed
fix: bug fix
1 parent 5ce2bb2 commit afa56f3

File tree

1 file changed

+97
-37
lines changed

1 file changed

+97
-37
lines changed

‎frontend/src/views/ds/DataTable.vue‎

Lines changed: 97 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import { ref, computed, onMounted } from 'vue'
2+
import { ref, computed, onMounted, reactive } from 'vue'
33
import { datasourceApi } from '@/api/datasource'
44
import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
55
import icon_form_outlined from '@/assets/svg/icon_form_outlined.svg'
@@ -67,11 +67,32 @@ const currentTable = ref<any>({})
6767
const ds = ref<any>({})
6868
const btnSelect = ref('d')
6969
70+
const pageInfo = reactive({
71+
currentPage: 1,
72+
pageSize: 10,
73+
total: 0,
74+
})
75+
76+
const handleSizeChange = (val: number) => {
77+
pageInfo.currentPage = 1
78+
pageInfo.pageSize = val
79+
}
80+
const handleCurrentChange = (val: number) => {
81+
pageInfo.currentPage = val
82+
}
83+
84+
const fieldListComputed = computed(() => {
85+
const { currentPage, pageSize } = pageInfo
86+
return fieldList.value.slice((currentPage - 1) * pageSize, currentPage * pageSize)
87+
})
88+
7089
const init = () => {
7190
initLoading.value = true
7291
datasourceApi.getDs(props.info.id).then((res) => {
7392
ds.value = res
7493
fieldList.value = []
94+
pageInfo.total = 0
95+
pageInfo.currentPage = 1
7596
datasourceApi.tableList(props.info.id).then((res) => {
7697
tableList.value = res
7798
initLoading.value = false
@@ -104,6 +125,8 @@ const clickTable = (table: any) => {
104125
.fieldList(table.id)
105126
.then((res) => {
106127
fieldList.value = res
128+
pageInfo.total = res.length
129+
pageInfo.currentPage = 1
107130
datasourceApi.previewData(props.info.id, buildData()).then((res) => {
108131
previewData.value = res
109132
})
@@ -191,6 +214,8 @@ const btnSelectClick = (val: any) => {
191214
.fieldList(currentTable.value.id)
192215
.then((res) => {
193216
fieldList.value = res
217+
pageInfo.total = res.length
218+
pageInfo.currentPage = 1
194219
})
195220
.finally(() => {
196221
loading.value = false
@@ -308,41 +333,66 @@ const btnSelectClick = (val: any) => {
308333
</div>
309334

310335
<div class="preview-or-schema">
311-
<el-table v-if="btnSelect === 'd'" :data="fieldList" style="width: 100%">
312-
<el-table-column prop="field_name" :label="t('datasource.field_name')" width="180" />
313-
<el-table-column prop="field_type" :label="t('datasource.field_type')" width="180" />
314-
<el-table-column prop="field_comment" :label="t('datasource.field_original_notes')" />
315-
<el-table-column :label="t('datasource.field_notes_1')">
316-
<template #default="scope">
317-
<div class="field-comment">
318-
<span :title="scope.row.custom_comment" class="notes-in_table">{{
319-
scope.row.custom_comment
320-
}}</span>
321-
<el-tooltip
322-
:offset="14"
323-
effect="dark"
324-
:content="$t('datasource.edit')"
325-
placement="top"
326-
>
327-
<el-icon class="action-btn" size="16" @click="editField(scope.row)">
328-
<edit></edit>
329-
</el-icon>
330-
</el-tooltip>
331-
</div>
332-
</template>
333-
</el-table-column>
334-
<el-table-column :label="t('datasource.enabled_status')" width="180">
335-
<template #default="scope">
336-
<div style="display: flex; align-items: center">
337-
<el-switch
338-
v-model="scope.row.checked"
339-
size="small"
340-
@change="changeStatus(scope.row)"
341-
/>
342-
</div>
343-
</template>
344-
</el-table-column>
345-
</el-table>
336+
<div class="table-content_preview">
337+
<el-table v-if="btnSelect === 'd'" :data="fieldListComputed" style="width: 100%">
338+
<el-table-column
339+
prop="field_name"
340+
:label="t('datasource.field_name')"
341+
width="180"
342+
/>
343+
<el-table-column
344+
prop="field_type"
345+
:label="t('datasource.field_type')"
346+
width="180"
347+
/>
348+
<el-table-column
349+
prop="field_comment"
350+
:label="t('datasource.field_original_notes')"
351+
/>
352+
<el-table-column :label="t('datasource.field_notes_1')">
353+
<template #default="scope">
354+
<div class="field-comment">
355+
<span :title="scope.row.custom_comment" class="notes-in_table">{{
356+
scope.row.custom_comment
357+
}}</span>
358+
<el-tooltip
359+
:offset="14"
360+
effect="dark"
361+
:content="$t('datasource.edit')"
362+
placement="top"
363+
>
364+
<el-icon class="action-btn" size="16" @click="editField(scope.row)">
365+
<edit></edit>
366+
</el-icon>
367+
</el-tooltip>
368+
</div>
369+
</template>
370+
</el-table-column>
371+
<el-table-column :label="t('datasource.enabled_status')" width="180">
372+
<template #default="scope">
373+
<div style="display: flex; align-items: center">
374+
<el-switch
375+
v-model="scope.row.checked"
376+
size="small"
377+
@change="changeStatus(scope.row)"
378+
/>
379+
</div>
380+
</template>
381+
</el-table-column>
382+
</el-table>
383+
</div>
384+
<div v-if="fieldList.length" class="pagination-container">
385+
<el-pagination
386+
v-model:current-page="pageInfo.currentPage"
387+
v-model:page-size="pageInfo.pageSize"
388+
:page-sizes="[10, 20, 30]"
389+
:background="true"
390+
layout="total, sizes, prev, pager, next, jumper"
391+
:total="pageInfo.total"
392+
@size-change="handleSizeChange"
393+
@current-change="handleCurrentChange"
394+
/>
395+
</div>
346396
<template v-else>
347397
<div class="preview-num">
348398
{{ t('ds.pieces_in_total', { msg: total, ms: showNum }) }}
@@ -588,7 +638,17 @@ const btnSelectClick = (val: any) => {
588638
.preview-or-schema {
589639
margin-top: 16px;
590640
height: calc(100% - 50px);
591-
overflow-y: auto;
641+
642+
.table-content_preview {
643+
max-height: calc(100% - 50px);
644+
overflow-y: auto;
645+
margin-bottom: 16px;
646+
}
647+
648+
.pagination-container {
649+
display: flex;
650+
justify-content: flex-end;
651+
}
592652
593653
.field-comment {
594654
display: flex;

0 commit comments

Comments
 (0)