precise_delivery_distribution_front/src/views/put/put-log.vue

<template>
  <div class="page-wrap page-wrap-put-books">
    <tool-bar
      :text="[]"
      :label="[]"
      @confirm="onSearch"
      v-model:loading="inSearching"
    >
      <template #picker>
        <p class="label">日期</p>
        <a-range-picker
          v-model:value="picker"
          :ranges="{
            本日: [moment(), moment()],
            近7日: [moment().subtract(7, 'd'), moment()],
            近14日: [moment().subtract(14, 'd'), moment()],
            近30日: [moment().subtract(30, 'd'), moment()],
            近3月: [
              moment()
                .subtract(3, 'month')
                .startOf('month'),
              moment().startOf('month'),
            ],
          }"
          format="YYYY/MM/DD"
        />
      </template>
    </tool-bar>
    <a-table
      :columns="columns"
      :data-source="list"
      rowKey="id"
      bordered
      :pagination="false"
    >
      <template #log="{ text, record }">
        <p
          v-for="(log, index) in record.content_log"
          :key="log"
          class="table-p"
        >
          {{ log }}
        </p>
      </template>
    </a-table>
  </div>
</template>

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

import ToolBar from "@/components/tool-bar/index.vue";
import moment from "moment";
import { TableColumnOfPutLog } from "../_pageOptions/table-put";

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

import { adPlanLog, PageOptions } from "@/types/api";
import useApp from "@/hooks/useApp";

const PutData = defineComponent({
  components: {
    ToolBar,
  },
  props: {
    id: String,
  },
  setup(props) {
    const { router } = useApp();
    let { loading, meta, tablePageOptions } = usePagination();
    const state = reactive({
      list: ref<adPlanLog[]>([]),
      columns: TableColumnOfPutLog,
      picker: [],
      inSearching: false,
    });

    const onSearch = async (fields: Record<string, string>) => {
      try {
        const { picker } = state;
        let [begin_dates, end_dates] = picker;
        let begin_time = moment(begin_dates).format("YYYY-MM-DD");
        let end_time = moment(end_dates).format("YYYY-MM-DD");
        const { data } = await opertaroLog({
          begin_time,
          end_time,
          page: 1,
          ad_id: props.id,
        });
        state.list = data.list;
        meta.value = data.meta;
      } catch (e) {
        console.log(e);
      } finally {
        console.log(state.inSearching);
        state.inSearching = false;
      }
    };
    const getData = (id = props.id) => {
      opertaroLog({ ad_id: props.id }).then((res) => {
        state.list = res.data.list;
      });
    };

    watchEffect(() => {
      getData(props.id);
    });
    const handleTableChange = (pagination: PageOptions) => {
      const { current, pageSize, total } = pagination;
      opertaroLog({ page: current }).then((res) => {
        state.list = res.data.list;
        meta.value = res.data.meta;
      });
    };
    const more = (data: any) => {
      router.push({ path: "/put/datamore" });
    };
    return { ...toRefs(state), onSearch, handleTableChange, meta, more };
  },
  methods: {
    moment,
  },
});

export default PutData;
</script>
<style lang="scss" scoped>
.table-p {
  max-width: 500px;
  white-space: normal;
  word-break: break-all;
  line-height: 200%;
}
</style>