🐛 fix toolbar loading status | fix pagination

src/components/tool-bar/index.vue

@@ -14,7 +14,7 @@
     <slot />
     <div class="tool-bar-item">
       <a-button type="primary"
-                :loading="btn_loading"
+                :loading="loading"
                 @click="onConfirm">
         <template #icon>
           <search-outlined />
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watchEffect } from "vue";
+import { defineComponent, PropType, ref, watch, watchEffect } from "vue";
 import { SearchOutlined } from "@ant-design/icons-vue";
 
 // TODO 可以考虑之后通过json生成
@@ -49,24 +49,25 @@ const ToolBar = defineComponent({
       default: false,
     },
   },
+  emits: ["update:loading", "confirm"],
   setup(props, { emit, slots }) {
     const fields = ref<{ [key: string]: string }>({});
-    let btn_loading = ref(props.loading);
+    let loading = ref(props.loading);
     let showPickerSlots = ref(!!slots.picker);
 
     props.text.forEach((field) => {
       fields.value[field] = "";
     });
 
-    watchEffect(() => (btn_loading.value = props.loading));
+    watchEffect(() => (loading.value = props.loading));
 
     const onConfirm = () => {
-      btn_loading.value = true;
-      emit("update:loading", btn_loading.value);
+      loading.value = true;
+      emit("update:loading", loading.value);
       emit("confirm", fields.value);
     };
 
-    return { fields, showPickerSlots, btn_loading, onConfirm };
+    return { fields, showPickerSlots, loading, onConfirm };
   },
 });
 

src/hooks/usePagination.ts

@@ -6,47 +6,31 @@ import { IMeta } from "@/types/api";
  * TODO 还需要根据具体情况做调整
  */
 const usePagination = () => {
-  let meta = reactive<IMeta>({
+  let meta = ref<Partial<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,
+    current: meta.value.current_page,
+    pageSize: meta.value.per_page,
+    total: meta.value.total,
   });
 
   watch(
-    () => meta.current_page,
-    (current_page) => {
-      console.log("change");
-      loading.value = current_page < meta.last_page;
-      current.value = current_page + 1;
+    () => meta.value,
+    () => {
+      console.log("change page");
+      tablePageOptions.current = meta.value.current_page;
+      tablePageOptions.pageSize = meta.value.per_page;
+      tablePageOptions.total = meta.value.total;
+      loading.value = false;
     }
   );
 
-  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 };
+  return { loading, meta, tablePageOptions };
 };
 
 export default usePagination;

src/views/account/account.vue

@@ -76,7 +76,7 @@ const Account = defineComponent({
       loading.value = true;
       getOfficialAccounts(params).then(({ data }) => {
         state.list = data.list;
-        meta = data.meta;
+        meta.value = data.meta;
         loading.value = false;
         state.searching = false;
       });

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

@@ -1,25 +1,22 @@
 <template>
   <div class="page-wrap page-wrap-put-books">
-    <tool-bar
-      :text="['email', 'account_id', 'account_name']"
-      :label="['邮箱', '账户ID', '用户名']"
-      v-model:loading="inSearching"
-      @confirm="onSearch"
-    >
+    <tool-bar :text="['email', 'account_id', 'account_name']"
+              :label="['邮箱', '账户ID', '用户名']"
+              v-model:loading="inSearching"
+              @confirm="onSearch">
       <template #exbutton>
-        <a-button type="primary" class="ml-10">
+        <a-button type="primary"
+                  class="ml-10">
           授权
         </a-button>
       </template>
     </tool-bar>
-    <a-table
-      :columns="columns"
-      :data-source="list"
-      :pagination="tablePageOptions"
-      :loading="loading.value"
-      @change="handleTableChange"
-      rowKey="id"
-    >
+    <a-table :columns="columns"
+             :data-source="list"
+             :pagination="tablePageOptions"
+             :loading="loading.value"
+             @change="handleTableChange"
+             rowKey="id">
     </a-table>
   </div>
 </template>
@@ -48,7 +45,7 @@ const PutAdAccount = defineComponent({
     });
     getAdPushList({ page: 1 }).then((res) => {
       state.list = res.data.list;
-      meta = res.data.meta;
+      meta.value = res.data.meta;
     });
     const onSearch = async (fields: Record<string, string>) => {
       try {
@@ -61,7 +58,7 @@ const PutAdAccount = defineComponent({
           page: 1,
         });
         state.list = data.list;
-        meta = data.meta;
+        meta.value = data.meta;
       } catch (e) {
         console.log(e);
       } finally {
@@ -74,7 +71,7 @@ const PutAdAccount = defineComponent({
       const { current, pageSize, total } = pagination;
       getAdPushList({ page: current }).then((res) => {
         state.list = res.data.list;
-        meta = res.data.meta;
+        meta.value = res.data.meta;
       });
     };
 

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

@@ -1,9 +1,7 @@
 <template>
   <div class="page-wrap page-wrap-account">
-    <tool-bar
-      :text="['account_name', 'email', 'ad_name', 'campaign_name']"
-      :label="['账户名', '邮箱', '计划名称', '广告组名称']"
-    >
+    <tool-bar :text="['account_name', 'email', 'ad_name', 'campaign_name']"
+              :label="['账户名', '邮箱', '计划名称', '广告组名称']">
       <template #picker>
         <p class="label">日期</p>
         <a-range-picker />
@@ -15,23 +13,19 @@
         </a-select>
       </div> -->
     </tool-bar>
-    <a-table
-      :columns="columns"
-      :data-source="list"
-      :pagination="tablePageOptions"
-      :loading="loading.value"
-      @change="handleTableChange"
-      rowKey="id"
-      :scroll="{ x: 2500 }"
-    ></a-table>
+    <a-table :columns="columns"
+             :data-source="list"
+             :pagination="tablePageOptions"
+             :loading="loading.value"
+             @change="handleTableChange"
+             rowKey="id"
+             :scroll="{ x: 2500 }"></a-table>
 
-    <a-modal
-      title="Title"
-      :visible="visible"
-      :confirm-loading="confirmLoading"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
+    <a-modal title="Title"
+             :visible="visible"
+             :confirm-loading="confirmLoading"
+             @ok="handleOk"
+             @cancel="handleCancel">
       <p>{{ ModalText }}</p>
     </a-modal>
   </div>
@@ -90,7 +84,7 @@ const PutAdPlan = defineComponent({
           page: 1,
         });
         state.list = data.list;
-        meta = data.meta;
+        meta.value = data.meta;
       } catch (e) {
         console.log(e);
       } finally {
@@ -110,7 +104,7 @@ const PutAdPlan = defineComponent({
       const { current, pageSize, total } = pagination;
       getADPlanlist({ page: current }).then((res) => {
         state.list = res.data.list;
-        meta = res.data.meta;
+        meta.value = res.data.meta;
       });
     };
     return { ...toRefs(state), handleTableChange, handleOk, handleCancel };

src/views/put/put-book.vue

@@ -2,7 +2,7 @@
   <div class="page-wrap page-wrap-put-books">
     <tool-bar :text="['official_name', 'book_name']"
               :label="['公众号名称', '书名']"
-              v-model:loading="inSearching"
+              v-model:loading="searching"
               @confirm="onSearch" />
     <div class="operator-bar">
       <a-button type="primary"
@@ -64,7 +64,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, computed, toRefs } from "vue";
+import {
+  defineComponent,
+  reactive,
+  ref,
+  computed,
+  toRefs,
+  onMounted,
+} from "vue";
 
 import ToolBar from "@/components/tool-bar/index.vue";
 
@@ -89,10 +96,12 @@ const PutBooks = defineComponent({
     const { labelCol, wrapperCol } = useFormLayout();
 
     const state = reactive({
-      inSearching: false,
+      searching: false,
       open: false,
       list: ref<IDeliveryBook[]>([]),
       columns: TableColumnOfPutBooks,
+      official_name: "",
+      book_name: "",
     });
 
     const addFormState = reactive({
@@ -105,20 +114,28 @@ const PutBooks = defineComponent({
       inConfirm: false,
     });
 
-    const onSearch = async (fields: Record<string, string>) => {
+    const onSearch = (fields: Record<string, string>) => {
+      const { official_name, book_name } = fields;
+      state.official_name = official_name;
+      state.book_name = book_name;
+      onBookLoaded();
+    };
+
+    const onBookLoaded = async (query?: { page: 1 }) => {
       try {
-        const { official_name, book_name } = fields;
+        loading.value = true;
+        const { official_name, book_name } = state;
         const { data } = await getDeliveryBookList({
           official_name,
           book_name,
-          page: 1,
+          page: query?.page ?? 1,
         });
         state.list = data.list;
-        meta = data.meta;
-      } catch (e) {
-        console.log(e);
+        meta.value = data.meta;
+      } catch (error) {
+        console.log("on get books list error");
       } finally {
-        state.inSearching = false;
+        state.searching = false;
       }
     };
 
@@ -133,6 +150,8 @@ const PutBooks = defineComponent({
       addFormState.book = options.key;
     };
 
+    onMounted(onBookLoaded);
+
     return {
       ...toRefs(state),
       addFormState,