设备时间错误校验增加分页

src/views/EquipmentTimeErrorVerification/EquipmentTimeErrorVerification.vue

 <template>
 <template>
+    <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '100px' } }">
+        <a-form-item label="日期:" style="padding: 5px 0">
+            <a-date-picker v-model:value="queryForm.countDate" style="width: 280px"/>
+        </a-form-item>
+        <a-form-item style="padding: 5px 0">
+            <a-button type="primary" @click="search">查询</a-button>
+        </a-form-item>
+    </a-form>
     <a-table :dataSource="dataList" v-loading="isLoading" :columns="[
     <a-table :dataSource="dataList" v-loading="isLoading" :columns="[
           {
           {
                 title: '集团名称',
                 title: '集团名称',
@@ -51,30 +59,76 @@
         ]" :pagination="false">
         ]" :pagination="false">
 
 
     </a-table>
     </a-table>
+    <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
+        :show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20']"
+        @change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper
+        style="text-align:center" />
 </template>
 </template>
 <script>
 <script>
-import {defineComponent, ref} from 'vue'
+import moment from 'moment'
+import {defineComponent, ref,toRaw,reactive } from 'vue'
+import {filterEmptyValueInObject,formatDate} from '@/PublicUtil/PublicUtil'
 import equipmentTimeErrorVerificationApi from '@/views/EquipmentTimeErrorVerification/EquipmentTimeErrorVerificationApi'
 import equipmentTimeErrorVerificationApi from '@/views/EquipmentTimeErrorVerification/EquipmentTimeErrorVerificationApi'
 
 
 export default defineComponent({
 export default defineComponent({
     setup() {
     setup() {
+        const pageNum = ref(1)
+        const pageSize = ref(10)
+        const total = ref()
         const dataList = ref([])
         const dataList = ref([])
         const isLoading = ref(false)
         const isLoading = ref(false)
-
-        const __main = function() {
+        const onPageNumChange = function(num) {
+            pageNum.value = num
+            confirmSearch()
+        }
+        const queryForm = reactive(
+            {
+                countDate: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD')
+            }
+        )
+        const onPageSizeChange = function(current, size) {
+            pageNum.value = 1
+            pageSize.value = size
+            confirmSearch()
+        }
+        const confirmSearch = function(){
             isLoading.value = true
             isLoading.value = true
-            equipmentTimeErrorVerificationApi.getList().then(
+            const rawData = toRaw(queryForm)
+            const data = filterEmptyValueInObject({
+                page: pageNum.value - 1,
+                pageSize: pageSize.value,
+                countDate:formatDate(rawData.countDate)
+            })
+            console.log(data)
+            equipmentTimeErrorVerificationApi.getList(data).then(
                 (r) => {
                 (r) => {
                     isLoading.value = false
                     isLoading.value = false
-                    dataList.value = r.data
+                    dataList.value = r.data.devices
+                    total.value = r.data.pageNum
                 }
                 }
             )
             )
         }
         }
+        const search = function(){
+            pageNum.value = 1
+            pageSize.value = 10
+            confirmSearch()
+        }
+        const __main = function() {
+            confirmSearch()
+        }
 
 
         __main()
         __main()
         return {
         return {
+            queryForm,
+            pageNum,
+            pageSize,
+            total,
             isLoading,
             isLoading,
             dataList,
             dataList,
+            onPageNumChange,
+            onPageSizeChange,
+            confirmSearch,
+            search
         }
         }
     },
     },
 })
 })

src/views/EquipmentTimeErrorVerification/EquipmentTimeErrorVerificationApi.js

@@ -7,6 +7,9 @@ class EquipmentTimeErrorVerificationApi {
             {
             {
                 method: 'GET',
                 method: 'GET',
                 url: `/devices/deviceInfo`,
                 url: `/devices/deviceInfo`,
+                params: filterEmptyValueInObject(
+                    data
+                )
             }
             }
         )
         )
     }
     }