precise_delivery_distribution_front/src/views/put/put-data-more.vue

<template>
  <div class="page-wrap page-wrap-put-books">
    <tool-bar
      :text="['official_name', 'book_name']"
      :label="['公众号名称', '书名']"
      @confirm="onSearch"
      v-model:loading="inSearching"
    >
      <template #picker>
        <p class="label">日期</p>
        <a-range-picker />
      </template>
    </tool-bar>
    <a-table :columns="columns" :data-source="list" :scroll="{x: 18500}"></a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";

import ToolBar from "@/components/tool-bar/index.vue";

import { TableColumnOfMoreStat } from "../_pageOptions/table-put";

import { getDeliveryMoreStatList } from "@/api";
import usePagination from "@/hooks/usePagination";

import { moreStatPlanItem, PageOptions } from "@/types/api";

const PutData = defineComponent({
  components: {
    ToolBar,
  },
  setup() {
    let { loading, meta, tablePageOptions } = usePagination();
    const state = reactive({
      list: ref<moreStatPlanItem[]>([]),
      columns: TableColumnOfMoreStat,
      inSearching: false,
    });
    const onSearch = async (fields: Record<string, string>) => {
      try {
        const { official_name, book_name, start_time, end_time } = fields;
        const { data } = await getDeliveryMoreStatList({
          start_time,
          end_time,
          official_name,
          book_name,
          page: 1,
        });
        state.list = data.list;
        meta.value = data.meta;
      } catch (e) {
        console.log(e);
      } finally {
        console.log(state.inSearching);
        state.inSearching = false;
      }
    };
    getDeliveryMoreStatList().then((res) => {
      state.list = res.data.list;
    });
    const handleTableChange = (pagination: PageOptions) => {
      const { current, pageSize, total } = pagination;
      getDeliveryMoreStatList({ page: current }).then((res) => {
        state.list = res.data.list;
        meta.value = res.data.meta;
      });
    };
    return { ...toRefs(state), onSearch, handleTableChange, meta };
  },
});

export default PutData;
</script>