precise_delivery_distribution_front/src/views/put/ad-countdata.vue

<template>
  <div class="page-wrap page-wrap-put-books">
    <tool-bar
      :text="['advertiser_id', 'account_id']"
      :label="['广告主/ID', '账户/ID']"
      v-model:loading="inSearching"
      @confirm="onSearch"
    >
      <template #picker>
        <p class="label">日期</p>
        <a-range-picker
          v-model:value="pickered"
          :ranges="rangePick"
          format="YYYY/MM/DD"
        />
      </template>
    </tool-bar>
    <a-table
      :columns="columns"
      :data-source="list"
      :scroll="{ x: true }"
      @change="handleTableChange"
    >
      <template #info="{ text, record }">
        <p>广告主名：{{ record.advertiser_name }}</p>
        <p>广告主ID：{{ record.advertiser_id }}</p>
      </template>

      <template #budget="{ text, record }">
          
        <editable-cell
          :text="record.budget_mode=='BUDGET_MODE_INFINITE'?'不限':record.budget"
          title="预算"
          :minValue="1000"
          :muliteType="true"
          customTitle="不限"
          customValue="不限"
          @change="(val) => onCellChange(record, 'budget', val)"
        />
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
import { picker } from "@/helper/config/range";
import ToolBar from "@/components/tool-bar/index.vue";
import moment from "moment";
import { AdCoundCloumn } from "../_pageOptions/table-put";

import { getAdgroupData, setGroupStatus,setGroupDay } from "@/api";
import usePagination from "@/hooks/usePagination";
import EditableCell from "@/components/edit-cell/index.vue";
import { AdgroupList, PageOptions } from "@/types/api";

const Adgroup = defineComponent({
  components: {
    ToolBar,
    EditableCell,
  },
  setup() {
    let { loading, meta, tablePageOptions } = usePagination();

    const state = reactive({
      inSearching: false,
      open: false,
      inConfirm: false,
      list: ref<AdgroupList[]>([]),
      rangePick: picker,
      pickered: [],
      columns: AdCoundCloumn,
      fields: {},
    });

    const onSearch = (fields: Record<string, string>) => {
      const { advertiser_id, account_id } = fields;
      state.fields = fields;
      getData({ current: 1, advertiser_id, account_id });
    };

    const getData = async (query?: {
      current: number;
      advertiser_id?: string;
      account_id?: string;
    }) => {
      try {
        loading.value = true;
        let [begin_dates, end_dates] = state.pickered;
        let begin_date, end_date;
        if (begin_dates && end_dates) {
          begin_date = moment(begin_dates).format("YYYY-MM-DD");
          end_date = moment(end_dates).format("YYYY-MM-DD");
        }

        const { data } = await getAdgroupData({
          begin_date,
          end_date,
          advertiser_id: query?.advertiser_id,
          account_id: query?.account_id,
          page: query?.current ?? 1,
        });
        state.list = data.list;
        meta.value = data.meta;
      } catch (error) {
        console.log("on get books list error");
      } finally {
        state.inSearching = false;
      }
    };
    const handleTableChange = (pagination: PageOptions) => {
      const { current, pageSize, total } = pagination;
      let data = Object.assign({ current, ...state.fields });
      getData(data);
    };

    onMounted(getData);

    return {
      ...toRefs(state),
      loading,
      tablePageOptions,
      onSearch,
      handleTableChange,
    };
  },
  methods: {
    moment,
    onCellChange(record: any, dataIndex: string, value: string){
        let data = {
            advertiser_id:record.advertiser_id,
            budget_mode: value == '不限'?'BUDGET_MODE_INFINITE' :'BUDGET_MODE_DAY',
            budget: value == '不限'?'0' :Number(value)  
        }
        setGroupDay(data).then(res=>{
            this.$message.success("修改成功！");
        })   
    }
  },
});

export default Adgroup;
</script>