优化小票打印

src/views/table/index.vue

@@ -45,10 +45,15 @@
                             </div>
                         </div>
                     </div>
-                    <div class="empty">
-                        <el-empty description="空空如也~" v-if="!tableList.length" />
+                    <div class="empty" v-if="!tableList.length">
+                        <el-empty description="空空如也~" />
                     </div>
                 </div>
+                <div class="pagination">
+                    <el-pagination background v-model:current-page="query.page" :pager-count="5"
+                        layout=" pager, jumper, total" :total="query.total"
+                        @current-change="shopTableAjax"></el-pagination>
+                </div>
             </div>
         </div>
         <div class="right_card card">
@@ -61,17 +66,11 @@
 </template>
 
 <script setup>
-import { queryShopArea, queryShopTable } from '@/api/table'
 import { shopArea, shopTable } from "@/api/account.js";
-
 import countCard from '@/views/table/components/countCard.vue'
 import tableInfo from '@/views/table/components/tableInfo.vue'
-
 import { ref, onMounted } from 'vue'
-import { useUser } from "@/store/user.js"
 import { dayjs } from 'element-plus'
-const store = useUser()
-
 
 const tabActive = ref(0)
 const tabAreas = ref([
@@ -93,6 +92,11 @@ const tabAreas = ref([
     // }
 ])
 
+const query = ref({
+    page: 1,
+    size: 12,
+    total: 0
+})
 const loading = ref(false)
 // 区域列表
 const areaList = ref([])
@@ -158,12 +162,15 @@ async function shopTableAjax() {
     try {
         loading.value = true
         const res = await shopTable({
+            page: query.value.page,
+            size: query.value.size,
             areaId: area.value,
             tableCode: '',
             name: '',
             status: tabAreas.value[tabActive.value].type,
         })
         tableList.value = res.records
+        query.value.total = +res.totalRow
         setTimeout(() => {
             loading.value = false
         }, 500)
@@ -180,6 +187,12 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.pagination {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: var(--el-font-size-base);
+}
+
 .cart_wrap {
     flex: 2;
 }
@@ -244,7 +257,7 @@ onMounted(() => {
     }
 
     .overflow_y {
-        height: calc(100vh - 160px);
+        height: calc(100vh - 220px);
         overflow-y: auto;
     }
 
@@ -252,7 +265,7 @@ onMounted(() => {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         grid-template-rows: auto;
-        gap: var(--el-font-size-base);
+        gap: 10px;
 
         .item {
             $closedColor: #aeb8c9;
@@ -317,7 +330,7 @@ onMounted(() => {
             }
 
             .tab_cont {
-                height: 120px;
+                height: 112px;
                 display: flex;
                 align-items: center;
                 justify-content: center;