添加分页

src/views/optionalSystem/plateChange/index.vue

@@ -4,10 +4,13 @@
                    @refreshLeft="refreshLeft"
                    @handleInfo="handleInfo"
                    @submit="submit"
-                   @CurrentChange="handleCurrentChange" @pageSizeChange="(val) => {
-				getList();
-			}
-				">
+                   @CurrentChange="handleCurrentChange" @pageSizeChange="
+        (val) => {
+          field.paging.currentPage = 1
+          field.paging.pageSize = val
+          getList()
+        }
+      ">
       <template #search>
         <el-input maxlength="60" v-trim clearable v-model="searchForm.plateNum" placeholder="请输入原车牌号"
                   :style="{ width: '180px', margin: '0 10px 10px 0' }">
@@ -118,7 +121,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8"><div class="grid-content ep-bg-purple" />
-          <el-form-item label="审核备注:" >
+          <el-form-item label="备注:" >
             <div>{{ detail.reviewerRemark }}</div>
           </el-form-item></el-col>
         <el-col :span="8"><div class="grid-content ep-bg-purple" />
@@ -140,7 +143,7 @@
       <el-table :data="tableData1" stripe style="width: 900%">
         <el-table-column
             type="index"
-            label="简易序号"
+            label="序号"
             style="align-content: center"
             width="80"
             :index="indexMethod"
@@ -160,7 +163,7 @@
           </template>
         </el-table-column>
         <el-table-column prop="opName" label="操作人" width="100" />
-        <el-table-column prop="insertTime" label="操作操作时间" width="180" />
+        <el-table-column prop="insertTime" label="操作时间" width="180" />
       </el-table>
 
     </el-dialog>
@@ -207,6 +210,8 @@ const searchForm: any = ref({
   agencyId: "",
   afterPlateNum: "",
   afterPlateColor: "",
+  pageNo: "1",
+  pageSize: "10",
 });
 const agencyOptions = ref<any>([])
 const getAgencyOptions = () => {
@@ -280,12 +285,16 @@ const tableData1 =  ref([])
 
 // 搜索重置
 function refreshLeft() {
+  field.value.paging.currentPage = 1;
+  field.value.paging.total = 10;
   searchForm.value = {
     plateNum: "",
     plateColor: "",
     agencyId: "",
     afterPlateNum: "",
     afterPlateColor: "",
+    pageNo: "1",
+    pageSize: "10",
   };
   tableData.value = [];
 }
@@ -303,12 +312,15 @@ const handleInfo = (idx: any, row: any) => {
 const crudRef = ref();
 onMounted(() => {
   getAgencyOptions()
-  // getList();
+  getList();
 });
 
 function handleCurrentChange(val: number) {
+
+  field.value.paging.currentPage = val;
   getList();
 }
+
 // 方法1的自定义序号（可选）
 const indexMethod = (index) => {
   return index + 1; // 从1开始
@@ -321,7 +333,7 @@ function submit(data: any) {
   //原数据
   const objList = tableData.value.filter(i =>i.id ==datas.id)
 
-  console.log(objList)
+  // console.log(objList)
   const firstMatch = objList[0];
   data = {
     aflPlateChangeId: datas.id,
@@ -395,17 +407,22 @@ function getList() {
       return;
     }
   }*/
+  searchForm.value.pageNo = field.value.paging.currentPage;
+  searchForm.value.pageSize = field.value.paging.pageSize;
   BaseService.post("IF01001202507021332", {
     agencyId: searchForm.value.agencyId,
     plateNum: searchForm.value.plateNum,
     plateColor: searchForm.value.plateColor,
     afterPlateNum: searchForm.value.afterPlateNum,
-    afterPlateColor: searchForm.value.afterPlateColor
+    afterPlateColor: searchForm.value.afterPlateColor,
+    pageNo: searchForm.value.pageNo,
+    pageSize: searchForm.value.pageSize
   }).then((res: any) => {
     if (res && res.statusCode === 0) {
       let bizContent = JSON.parse(res.bizContent);
       let data = JSON.parse(bizContent.bizContent);
       tableData.value = data.data;
+      field.value.paging.total = data.totalCount;
     } else {
       ElMessage.error(res.errorMsg);
     }
@@ -424,13 +441,13 @@ const field = ref({
   tabSize: "small", //Table 的尺寸 large / default /small (默认default)
   searchShow: true, //是否显示搜索模块(默认false)
   border: true, //是否添加边框(默认false)
-  // dialogInfoCustom: true,
+  dialogInfoCustom: false,
   dialogCustom: false, //自定义Dialog (默认false)
   dialogFooter: false, //隐藏弹窗页脚显示 (默认false)
   dialogWidth: "40%", //dialog宽度 (默认40%)
   crudChildShow: true, //是否显示CURD子操作栏 (默认true)
-  paginStart: false, //是否显示分页查询 (默认false)
-  isPageSizes: true,
+  paginStart: true, //是否显示分页查询 (默认false)
+  isPageSizes: true,//显示页面出现数据的行数
   pageLayout: "total, sizes, prev, pager, next",
   titleDialog: "", //table 标题
   pageSizes: [10, 20, 30, 100], //pagesize的值
@@ -457,7 +474,7 @@ const field = ref({
   operateShow: true, //是否为表格添加操作栏(默认true)
   operateTitle: "操作", //操作栏标题(默认为"")
   operateFixed: false, //操作栏是否固定(默认false)
-  operateWidth: "300", //操作栏宽度
+  operateWidth: "280", //操作栏宽度
   operate: {
     // edit: tSConstructSignatureDeclaration, //是否编辑(默认true)
     edit: true, //是否编辑(默认true)