update 对话框的分页导航

src/components/DialogWithMenu.vue

@@ -117,6 +117,17 @@
           <div v-if="dataForm.id && tab.key === 'attr'">
             <BaseListTable :table-config="null" :column-config="filteredTableProps" :table-data="subList" @operate-event="handleTableRowOperate" />
             <!-- paginator  -->
+            <el-pagination
+              class="mt-5 flex justify-end"
+              @size-change="handleSizeChange"
+              @current-change="handlePageChange"
+              :current-page.sync="attrPage"
+              :page-sizes="[5, 10, 20]"
+              :page-size="attrSize"
+              :total="attrTotal"
+              layout="total, sizes, prev, next"
+            ></el-pagination>
+            <!-- layout="total, sizes, prev, pager, next, jumper" -->
           </div>
           <div v-if="dataForm.id && tab.key === 'attachment'">附件</div>
         </el-tab-pane>
@@ -289,6 +300,9 @@ export default {
         placeholder: "在这里输入描述信息...",
         scrollingContainer: null,
       },
+      attrPage: 1,
+      attrSize: 5,
+      attrTotal: 0,
     };
   },
   computed: {
@@ -361,8 +375,6 @@ export default {
 
       this.detailMode = detailMode ?? false;
       this.$nextTick(() => {
-        // this.$refs['dataForm'].resetFields();
-
         this.dataForm.id = id || null;
         if (this.dataForm.id) {
           // 如果是编辑
@@ -373,37 +385,7 @@ export default {
           this.$http.get(this.urls.base + `/${this.dataForm.id}`).then(({ data: res }) => {
             if (res && res.code === 0) {
               const dataFormKeys = Object.keys(this.dataForm);
-              console.log("keys ===> ", dataFormKeys);
-              // console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
               this.dataForm = __pick(res.data, dataFormKeys);
-              console.log("pick(res.data, dataFormKeys) ===> ", __pick(res.data, dataFormKeys));
-              // LABEL: FILE_RELATED
-              /** 对文件下载进行分流 */
-              // this.fileList = {};
-              // if (this.dataForm.files) {
-              // 	// console.log('files: ', this.dataForm.files)
-              // 	this.dataForm.files.forEach((file) => {
-              // 		// const fileName = file.fileurls.split('/').pop()
-              // 		/** [1] 处理 fileList */
-              // 		// if (Object.hasOwn(this.fileList, file.typeCode)) {
-              // 		if (this.fileList.hasOwnProperty(file.typeCode)) {
-              // 			/** 已存在 */
-              // 			// this.fileList[file.typeCode].push({ id: file.id, name: fileName, typeCode: file.typeCode })
-              // 			this.fileList[file.typeCode].push(file);
-              // 		} else {
-              // 			// this.fileList[file.typeCode] = [{ id: file.id, name: fileName, typeCode: file.typeCode }]
-              // 			this.fileList[file.typeCode] = [file];
-              // 		}
-
-              // 		/** [2] 处理 fileForm */
-              // 		// if (Object.hasOwn(this.fileForm, file.typeCode)) {
-              // 		if (this.fileForm.hasOwnProperty(file.typeCode)) {
-              // 			this.fileForm[file.typeCode].push(file.id);
-              // 		} else {
-              // 			this.fileForm[file.typeCode] = [file.id];
-              // 		}
-              // 	});
-              // }
             }
             this.loadingStatus = false;
           });
@@ -483,10 +465,18 @@ export default {
       //   }
     },
 
-    getSubList(page = 1, size = 20) {
+    handlePageChange(val) {
+      this.getSubList(val, this.attrSize);
+    },
+    handleSizeChange(val) {
+      this.attrPage = 1;
+      this.getSubList(1, val);
+    },
+
+    getSubList(page, size) {
       const params = {};
-      params.page = page;
-      params.limit = size;
+      params.page = page ?? this.attrPage;
+      params.limit = size ?? this.attrSize;
 
       const requiredParams = this.configs.table.extraParams;
       if (requiredParams) {
@@ -505,12 +495,14 @@ export default {
         }
       }
       this.$http.get(this.urls.subpage, { params }).then(({ data: res }) => {
-        console.log("[subList] getSubList:", res);
+        console.log("[DialogWithMenu] getSubList:", res);
         if (res.code === 0 && res.data?.list) {
           // 有数据
           this.subList = res.data.list;
+          this.attrTotal = res.data.total
         } else {
           this.subList.splice(0);
+          this.attrTotal = 0
         }
       });
     },