🎨 rename pageName

src/components/tool-bar/index.vue

@@ -29,6 +29,7 @@
 import { defineComponent, PropType, ref, watchEffect } from "vue";
 import { SearchOutlined } from "@ant-design/icons-vue";
 
+// TODO 可以考虑之后通过json生成
 const ToolBar = defineComponent({
   components: {
     SearchOutlined,

src/hooks/usePagination.ts

@@ -0,0 +1,52 @@
+import { ref, watch, reactive } from "vue";
+import { IMeta } from "@/types/api";
+
+/**
+ * 判断是否加载下一页的hooks
+ * TODO 还需要根据具体情况做调整
+ */
+const usePagination = () => {
+  let meta = reactive<IMeta>({
+    current_page: 0,
+    is_end: true,
+    last_page: 0,
+    next_page: 0,
+    next_page_url: "",
+    per_page: 10,
+    prev_page_url: "",
+    total: 0,
+  });
+
+  let loading = ref(false);
+  let current = ref(1);
+  let tablePageOptions = reactive({
+    current: current.value,
+    pageSize: meta.per_page,
+    total: meta.total,
+  });
+
+  watch(
+    () => meta.current_page,
+    (current_page) => {
+      console.log("change");
+      loading.value = current_page < meta.last_page;
+      current.value = current_page + 1;
+    }
+  );
+
+  watch(
+    () => meta.total,
+    (total) => {
+      if (!total) {
+        loading.value = false;
+        meta.last_page = 0;
+        meta.current_page = 0;
+        current.value = 1;
+      }
+    }
+  );
+
+  return { loading, meta, current, tablePageOptions };
+};
+
+export default usePagination;

src/views/put/put-ad-account.vue

@@ -14,7 +14,7 @@ import ToolBar from "@/components/tool-bar/index.vue";
 
 import { TableColumnOfPutAdAccount } from "../_pageOptions/table-put";
 
-const PutBooks = defineComponent({
+const PutAdAccount = defineComponent({
   components: {
     ToolBar,
   },
@@ -28,5 +28,5 @@ const PutBooks = defineComponent({
   },
 });
 
-export default PutBooks;
+export default PutAdAccount;
 </script>

src/views/put/put-ad-plan.vue

@@ -26,7 +26,7 @@ import ToolBar from "@/components/tool-bar/index.vue";
 
 import { TableColumnOfPutAdPlan } from "../_pageOptions/table-put";
 
-const Account = defineComponent({
+const PutAdPlan = defineComponent({
   components: {
     ToolBar,
   },
@@ -69,5 +69,5 @@ const Account = defineComponent({
   },
 });
 
-export default Account;
+export default PutAdPlan;
 </script>

src/views/put/put-book.vue

@@ -5,6 +5,8 @@
               v-model:loading="inSearching"
               @confirm="onSearch" />
     <a-table row-key="id"
+             :pagination="tablePageOptions"
+             :loading="loading"
              :columns="columns"
              :data-source="list"></a-table>
   </div>
@@ -15,6 +17,7 @@ import { defineComponent, reactive, ref, toRefs } from "vue";
 
 import ToolBar from "@/components/tool-bar/index.vue";
 
+import usePagination from "@/hooks/usePagination";
 import { getDeliveryBookList } from "@/api";
 import { TableColumnOfPutBooks } from "../_pageOptions/table-put";
 import { IDeliveryBook } from "@/types/api";
@@ -24,6 +27,8 @@ const PutBooks = defineComponent({
     ToolBar,
   },
   setup() {
+    let { loading, meta, tablePageOptions } = usePagination();
+
     const bookData = reactive({
       inSearching: false,
       list: ref<IDeliveryBook[]>([]),
@@ -39,6 +44,7 @@ const PutBooks = defineComponent({
           page: 1,
         });
         bookData.list = data.list;
+        meta = data.meta;
       } catch (e) {
         console.log(e);
       } finally {
@@ -46,7 +52,7 @@ const PutBooks = defineComponent({
       }
     };
 
-    return { ...toRefs(bookData), onSearch };
+    return { ...toRefs(bookData), onSearch, loading, tablePageOptions };
   },
 });
 

src/views/put/put-data.vue

@@ -20,7 +20,7 @@ import ToolBar from "@/components/tool-bar/index.vue";
 
 import { TableColumnOfPutData } from "../_pageOptions/table-put";
 
-const PutBooks = defineComponent({
+const PutData = defineComponent({
   components: {
     ToolBar,
   },
@@ -34,5 +34,5 @@ const PutBooks = defineComponent({
   },
 });
 
-export default PutBooks;
+export default PutData;
 </script>