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

<template>
  <div class="page-wrap page-wrap-put-books">
    <div class="table-filter">
      <div class="item-right">
        <a-radio-group v-model:value="selectValue" @change="onChange">
          <a-radio-button value="paid">
            付费
          </a-radio-button>
          <a-radio-button value="unpaid">
            未付费
          </a-radio-button>
          <a-radio-button value="all">
            显示全部
          </a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <a-table
      :columns="columns"
      :data-source="list"
      rowKey="id"
      bordered
      :pagination="tablePageOptions"
      :loading="loading.value"
      @change="handleTableChange"
      :scroll="{ x: true,y:true }"
    >
      <template #report_register_num="{ text, record }">
        <p v-if="record.report_register_num >= 1">
          已上报
        </p>
        <a-popconfirm
          title="是否要继续强制回传?"
          ok-text="是"
          cancel-text="否"
          @confirm="confirmEdit"
        >
          <p
            @click="mustUp(record, 'register', 'report_register_num')"
            v-if="record.report_register_num <= 0"
          >
            <a>强制回传</a>
          </p>
        </a-popconfirm>
      </template>
      <template #report_recharge_num="{ text, record }">
        <p v-if="record.report_recharge_num >= 1">
          已上报
        </p>
        <a-popconfirm
          title="是否要继续强制回传?"
          ok-text="是"
          cancel-text="否"
          @confirm="confirmEdit"
        >
          <p
            @click="mustUp(record, 'recharge', 'report_recharge_num')"
            v-if="record.report_recharge_num <= 0"
          >
            <a>强制回传</a>
          </p>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>

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

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

import { getRegisterData, setMustUpback } from "@/api";
import usePagination from "@/hooks/usePagination";

import { RegisterData, PageOptions } from "#/api";
import useApp from "@/hooks/useApp";

const RegisterDatad = defineComponent({
  props: {
    ad_lid: Number,
    back_platform: String,
  },
  setup(props) {
    const { router } = useApp();
    let { loading, meta, tablePageOptions } = usePagination();
    const state = reactive({
      list: ref<RegisterData[]>([]),
      columns: MatchList,
      loading,
      tablePageOptions,
      tableIndex: 0,
      filterList:[],
      selectValue: "all",
      selectValueAll: 1,
      selectValuePaid: 1,
      form: {
        report_type: "",
        uid: 0,
        platform: "",
        val: "",
      },
    });

    const getData = (
      ad_lid = props.ad_lid,
      back_platform = props.back_platform,
      page = 1,
      is_paid = 0,
      show_all = 1
    ) => {
      getRegisterData({
        ad_lid,
        back_platform,
        page,
        is_paid,
        show_all,
      }).then((res:any) => {
        state.list = res.data.list;
        meta.value = res.data.meta;
        let nCloumn = MatchList.filter(r=>{
           return !res.data.hiddenFields.includes(r.dataIndex);  
        })
        state.columns = nCloumn;

      });
    };
    watchEffect(() => {
      getData(
        props.ad_lid,
        props.back_platform,
        1,
        state.selectValuePaid,
        state.selectValueAll
      );
    });

    const onChange = (e: any) => {
      if (e.target.value == "all") {
        state.selectValueAll = 1;
      } else {
        state.selectValueAll = 0;
        if (e.target.value == "paid") {
          state.selectValuePaid = 1;
        } else {
          state.selectValuePaid = 0;
        }
      }
    };

    const handleTableChange = (pagination: PageOptions) => {
      const { current, pageSize, total } = pagination;
      meta.value.current_page = current;
      getRegisterData({
        ad_lid: props.ad_lid,
        back_platform: props.back_platform,
        is_paid: state.selectValuePaid,
        show_all: state.selectValueAll,
        page: current,
      }).then((res) => {
        state.list = res.data.list;
        meta.value = res.data.meta;
      });
    };
    return { ...toRefs(state), handleTableChange, meta, onChange };
  },
  methods: {
    confirmEdit() {
      setMustUpback(this.form).then((res) => {
        this.$message.success("修改成功！");
        let list = this.list.map((d: any, i: number) => {
          if (i == this.tableIndex) {
            d[this.form.val] = 1;
          }
          return d;
        });
        this.list = list;
      });
    },
    mustUp(record: any, type: string, val: string) {
      let { uid, platform } = record;
      console.log(uid);
      this.form.uid = uid;
      this.form.platform = platform;
      this.form.val = val;
      this.form.report_type = type;
      this.tableIndex = this.list.findIndex((r: any) => r.uid == uid);
    },
  },
});

export default RegisterDatad;
</script>
<style lang="scss" scoped>
.table-p {
  max-width: 500px;
  white-space: normal;
  word-break: break-all;
  line-height: 200%;
}
.item-right {
  margin-right: 10px;
}
.hover-content {
  margin: 8px 0 5px;
  display: flex;
  align-items: center;
  .label {
    padding-right: 15px;
    display: inline-block;
    max-width: 72px;
    width: 72px;
  }
  .ant-switch {
    width: 50px;
  }
}
.footer-slot {
  margin-top: 10px;
  button {
    margin-right: 10px;
  }
}
</style>