1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-12-17 21:08:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: support paginated viewing of imported data (#10923)

Browse source
This commit is contained in:
ssongliu 2025-11-11 22:41:28 +08:00 • committed by GitHub
parent 102f7c316d
commit cf4274afdc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 125 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/views/container/template/import/index.vue
View file

@ -22,7 +22,13 @@
</el-upload>
<el-card class="mt-2 w-full" v-loading="loading">
<el-table :data="displayData" @selection-change="handleSelectionChange">
<ComplexTable
:pagination-config="paginationConfig"
@search="search"
v-model:selects="selects"
:data="pageData"
:height="440"
>
<el-table-column type="selection" fix />
<el-table-column :label="$t('commons.table.status')" :min-width="80">
<template #default="{ row }">
@ -48,7 +54,7 @@
</el-button>
</template>
</el-table-column>
</el-table>
</ComplexTable>
</el-card>
</div>
<template #footer>
@ -85,6 +91,12 @@ const currentData = ref<Container.TemplateInfo[]>([]);
const uploadRef = ref();
const uploaderFiles = ref();
const detailRef = ref();
const pageData = ref([]);
const paginationConfig = reactive({
currentPage: 1,
pageSize: 10,
total: 0,
});
const acceptParams = async (): Promise<void> => {
visible.value = true;
@ -102,8 +114,10 @@ const loadTemplates = async () => {
currentData.value = res.data.items || [];
};
const handleSelectionChange = (val: any) => {
selects.value = val;
const search = () => {
const startIndex = (paginationConfig.currentPage - 1) * paginationConfig.pageSize;
const endIndex = startIndex + paginationConfig.pageSize;
pageData.value = displayData.value.slice(startIndex, endIndex);
};
const onOpenDetail = async (row: Container.TemplateInfo) => {
@ -186,6 +200,8 @@ const compareData = (importLists: any[]) => {
}
displayData.value = [...news, ...conflicts, ...duplicates];
paginationConfig.total = displayData.value.length;
search();
};
const onImport = async () => {

24
frontend/src/views/cronjob/cronjob/import/index.vue
View file

@ -22,7 +22,13 @@
</el-button>
<el-card class="mt-2 w-full" v-loading="loading">
<el-table :data="data" @selection-change="handleSelectionChange">
<ComplexTable
:pagination-config="paginationConfig"
@search="search"
v-model:selects="selects"
:data="pageData"
:height="440"
>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('cronjob.taskName')"
@ -62,7 +68,7 @@
</template>
</el-table-column>
<el-table-column :label="$t('cronjob.retainCopies')" :min-width="120" prop="retainCopies" />
</el-table>
</ComplexTable>
</el-card>
</div>
<template #footer>
@ -93,14 +99,22 @@ const data = ref();
const uploadRef = ref();
const uploaderFiles = ref();
const pageData = ref([]);
const paginationConfig = reactive({
currentPage: 1,
pageSize: 10,
total: 0,
});
const acceptParams = (): void => {
visible.value = true;
data.value = [];
};
const handleSelectionChange = (val: any) => {
selects.value = val;
const search = () => {
const startIndex = (paginationConfig.currentPage - 1) * paginationConfig.pageSize;
const endIndex = startIndex + paginationConfig.pageSize;
pageData.value = data.value.slice(startIndex, endIndex);
};
const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
@ -125,6 +139,8 @@ const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
}
}
data.value = parsed;
paginationConfig.total = data.value.length;
search();
loading.value = false;
} catch (error) {
MsgError(i18n.global.t('commons.msg.errImport') + error.message);

24
frontend/src/views/host/firewall/forward/import/index.vue
View file

@ -22,7 +22,13 @@
</el-upload>
<el-card class="mt-2 w-full" v-loading="loading">
<el-table :data="displayData" @selection-change="handleSelectionChange">
<ComplexTable
:pagination-config="paginationConfig"
@search="search"
v-model:selects="selects"
:data="pageData"
:height="440"
>
<el-table-column type="selection" fix />
<el-table-column :label="$t('commons.table.status')" :min-width="80">
<template #default="{ row }">
@ -49,7 +55,7 @@
</span>
</template>
</el-table-column>
</el-table>
</ComplexTable>
</el-card>
</div>
<template #footer>
@ -85,6 +91,12 @@ const availableInterfaces = ref<string[]>([]);
const uploadRef = ref();
const uploaderFiles = ref();
const pageData = ref([]);
const paginationConfig = reactive({
currentPage: 1,
pageSize: 10,
total: 0,
});
const acceptParams = async (fireName: string): Promise<void> => {
visible.value = true;
@ -110,8 +122,10 @@ const loadCurrentData = async (fireName: string) => {
}
};
const handleSelectionChange = (val: any) => {
selects.value = val;
const search = () => {
const startIndex = (paginationConfig.currentPage - 1) * paginationConfig.pageSize;
const endIndex = startIndex + paginationConfig.pageSize;
pageData.value = displayData.value.slice(startIndex, endIndex);
};
const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
@ -197,6 +211,8 @@ const compareRules = (importedRules: any[]) => {
}
displayData.value = [...newRules, ...conflictRules, ...duplicateRules];
paginationConfig.total = displayData.value.length;
search();
};
const onImport = async () => {

2
frontend/src/views/host/firewall/forward/index.vue
View file

@ -239,7 +239,7 @@ const onExport = () => {
cancelButtonText: i18n.global.t('commons.button.cancel'),
},
).then(async () => {
const exportData = data.value.map((item: Host.RuleInfo) => ({
const exportData = selects.value.map((item: Host.RuleInfo) => ({
family: item.family,
protocol: item.protocol,
port: item.port,

24
frontend/src/views/host/firewall/ip/import/index.vue
View file

@ -22,7 +22,13 @@
</el-upload>
<el-card class="mt-2 w-full" v-loading="loading">
<el-table :data="displayData" @selection-change="handleSelectionChange">
<ComplexTable
:pagination-config="paginationConfig"
@search="search"
v-model:selects="selects"
:data="pageData"
:height="440"
>
<el-table-column type="selection" fix />
<el-table-column :label="$t('commons.table.status')" :min-width="80">
<template #default="{ row }">
@ -46,7 +52,7 @@
prop="description"
show-overflow-tooltip
/>
</el-table>
</ComplexTable>
</el-card>
</div>
<template #footer>
@ -80,6 +86,12 @@ const currentRules = ref<Host.RuleInfo[]>([]);
const uploadRef = ref();
const uploaderFiles = ref();
const pageData = ref([]);
const paginationConfig = reactive({
currentPage: 1,
pageSize: 10,
total: 0,
});
const acceptParams = async (): Promise<void> => {
visible.value = true;
@ -100,8 +112,10 @@ const loadCurrentData = async () => {
currentRules.value = res.data.items || [];
};
const handleSelectionChange = (val: any) => {
selects.value = val;
const search = () => {
const startIndex = (paginationConfig.currentPage - 1) * paginationConfig.pageSize;
const endIndex = startIndex + paginationConfig.pageSize;
pageData.value = displayData.value.slice(startIndex, endIndex);
};
const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
@ -183,6 +197,8 @@ const compareRules = (importedRules: any[]) => {
}
displayData.value = [...newRules, ...conflictRules, ...duplicateRules];
paginationConfig.total = displayData.value.length;
search();
};
const onImport = async () => {

2
frontend/src/views/host/firewall/ip/index.vue
View file

@ -303,7 +303,7 @@ const onExport = () => {
cancelButtonText: i18n.global.t('commons.button.cancel'),
},
).then(async () => {
const exportData = data.value.map((item: Host.RuleInfo) => ({
const exportData = selects.value.map((item: Host.RuleInfo) => ({
family: item.family,
address: item.address,
strategy: item.strategy,

24
frontend/src/views/host/firewall/port/import/index.vue
View file

@ -22,7 +22,13 @@
</el-upload>
<el-card class="mt-2 w-full" v-loading="loading">
<el-table :data="displayData" @selection-change="handleSelectionChange">
<ComplexTable
:pagination-config="paginationConfig"
@search="search"
v-model:selects="selects"
:data="pageData"
:height="440"
>
<el-table-column type="selection" fix />
<el-table-column :label="$t('commons.table.status')" :min-width="80">
<template #default="{ row }">
@ -48,7 +54,7 @@
prop="description"
show-overflow-tooltip
/>
</el-table>
</ComplexTable>
</el-card>
</div>
<template #footer>
@ -82,6 +88,12 @@ const currentRules = ref<Host.RuleInfo[]>([]);
const uploadRef = ref();
const uploaderFiles = ref();
const pageData = ref([]);
const paginationConfig = reactive({
currentPage: 1,
pageSize: 10,
total: 0,
});
const acceptParams = async (): Promise<void> => {
visible.value = true;
@ -103,8 +115,10 @@ const loadCurrentData = async () => {
currentRules.value = res.data.items || [];
};
const handleSelectionChange = (val: any) => {
selects.value = val;
const search = () => {
const startIndex = (paginationConfig.currentPage - 1) * paginationConfig.pageSize;
const endIndex = startIndex + paginationConfig.pageSize;
pageData.value = displayData.value.slice(startIndex, endIndex);
};
const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
@ -189,6 +203,8 @@ const compareRules = (importedRules: any[]) => {
}
displayData.value = [...newRules, ...conflictRules, ...duplicateRules];
paginationConfig.total = displayData.value.length;
search();
};
const onImport = async () => {

29
frontend/src/views/terminal/command/import/index.vue
View file

@ -34,7 +34,13 @@
</el-select>
<el-card class="mt-2 w-full" v-loading="loading">
<el-table :data="data" @selection-change="handleSelectionChange">
<ComplexTable
:pagination-config="paginationConfig"
@search="search"
v-model:selects="selects"
:data="pageData"
:height="440"
>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
@ -60,7 +66,7 @@
prop="command"
show-overflow-tooltip
/>
</el-table>
</ComplexTable>
</el-card>
</div>
<template #footer>
@ -90,6 +96,12 @@ const data = ref([]);
const uploadRef = ref();
const uploaderFiles = ref();
const pageData = ref([]);
const paginationConfig = reactive({
currentPage: 1,
pageSize: 10,
total: 0,
});
const currentGroup = ref();
const groupList = ref();
@ -100,6 +112,13 @@ const acceptParams = (): void => {
loadGroups();
currentGroup.value = '';
data.value = [];
pageData.value = [];
};
const search = () => {
const startIndex = (paginationConfig.currentPage - 1) * paginationConfig.pageSize;
const endIndex = startIndex + paginationConfig.pageSize;
pageData.value = data.value.slice(startIndex, endIndex);
};
const loadGroups = async () => {
@ -120,10 +139,6 @@ const changeGroup = () => {
}
};
const handleSelectionChange = (val: any) => {
selects.value = val;
};
const fileOnChange = async (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
uploaderFiles.value = uploadFiles;
if (uploaderFiles.value.length !== 1) {
@ -142,6 +157,8 @@ const fileOnChange = async (_uploadFile: UploadFile, uploadFiles: UploadFiles) =
if (data.value.length === 0) {
MsgError(i18n.global.t('terminal.noSuchCommand'));
}
paginationConfig.total = data.value.length;
search();
})
.catch(() => {
loading.value = false;