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

<template>
  <div class="page-wrap page-wrap-put-books">
    <tool-bar
      :text="['email', 'account_id', 'account_name', 'advertiser_id']"
      :label="['邮箱', '账户名/ID', '用户名', '广告主ID']"
      v-model:loading="inSearching"
      @confirm="onSearch"
    >
      <template #exbutton>
        <a-button type="primary" @click="handleClick" class="ml-10">
          授权
        </a-button>
      </template>
    </tool-bar>
    <a-table
      :columns="columns"
      :data-source="list"
      :pagination="tablePageOptions"
      :loading="loading.value"
      bordered
      @change="handleTableChange"
      :scroll="{ y: 600 }"
      rowKey="id"
    >
      <template #operator="{ text, record }">
        <a-switch
          v-model:checked="record.is_enable"
          @change="switchMethod(record)"
        />
      </template>
      <template #email="{ text, record }">
        <p>账户ID{{ record.account_id }}</p>
        <p>邮箱：{{ record.email }}</p>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import ToolBar from "@/components/tool-bar/index.vue";
import { TableColumnOfPutAdAccount } from "../_pageOptions/table-put";
import usePagination from "@/hooks/usePagination";
import { getAdPushList, getAdauth, statusAdChange } from "@/api";
import { ADpushSimple, PageOptions } from "@/types/api";
import useDebounceFn from "@/hooks/useDebounceFn";
import { message } from "ant-design-vue";
const PutAdAccount = defineComponent({
  components: {
    ToolBar,
  },
  setup() {
    let { loading, meta, tablePageOptions } = usePagination();
    const state = reactive({
      list: ref<ADpushSimple[]>([]),
      columns: TableColumnOfPutAdAccount,
      inSearching: false,
      loading,
      tablePageOptions,
    });
    getAdPushList({ page: 1 }).then((res) => {
      let clist = res.data.list.map((r: any) => {
        r.is_enable == 0 ? (r.is_enable = false) : (r.is_enable = true);
        return r;
      });

      state.list = clist;
      meta.value = res.data.meta;
    });
    const onSearch = async (fields: Record<string, string>) => {
      try {
        const { email, account_name, account_id, advertiser_id } = fields;
        const { data } = await getAdPushList({
          email,
          account_name,
          account_id,
          advertiser_id,
          page: 1,
        });
        let clist = data.list.map((r: any) => {
          r.is_enable == 0 ? (r.is_enable = false) : (r.is_enable = true);
          return r;
        });
        console.log(clist);
        state.list = clist;
        meta.value = data.meta;
      } catch (e) {
        console.log(e);
      } finally {
        state.inSearching = false;
      }
    };
    const switchMethod = (record: any) => {
      let data = {
        advertiser_id: record.advertiser_id,
        is_enable: Number(!record.is_enable),
      };
      statusAdChange(data).then((res) => {
        message.success("修改成功!");
      });
    };
    const handleTableChange = (pagination: PageOptions) => {
      const { current, pageSize, total } = pagination;
      getAdPushList({ page: current }).then((res) => {
        state.list = res.data.list;
        meta.value = res.data.meta;
      });
    };
    return { ...toRefs(state), onSearch, handleTableChange, switchMethod };
  },
  methods: {
    async handleClick() {
      let res: any = await getAdauth();

      if (res.data && res.data.url) {
        window.open(res.data.url);
      } else {
        this.$message.error("暂未配置授权地址");
      }
    },
  },
});

export default PutAdAccount;
</script>