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

frontend/src/views/container/template/import/index.vue

@@ -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) => {
+const search = () => {
-    selects.value = val;
+    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 () => {

frontend/src/views/cronjob/cronjob/import/index.vue

@@ -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) => {
+const search = () => {
-    selects.value = val;
+    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);

frontend/src/views/host/firewall/forward/import/index.vue

@@ -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) => {
+const search = () => {
-    selects.value = val;
+    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 () => {

frontend/src/views/host/firewall/forward/index.vue

@@ -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,

frontend/src/views/host/firewall/ip/import/index.vue

@@ -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) => {
+const search = () => {
-    selects.value = val;
+    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 () => {

frontend/src/views/host/firewall/ip/index.vue

@@ -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,

frontend/src/views/host/firewall/port/import/index.vue

@@ -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) => {
+const search = () => {
-    selects.value = val;
+    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 () => {

frontend/src/views/terminal/command/import/index.vue

@@ -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;