precise_delivery_distribution_front/src/views/data/performance.vue

<template>
  <div class="performance">
    <div class="title-box-common">
      <h3>员工绩效</h3>
    </div>
    <div class="padding-box-common">
      <div class="search-box" style="padding: 0 10px">
        <a-input-search
          v-model:value="search.uname"
          placeholder="请输入推广员名称"
          style="width: 180px"
          @keyup.enter="getList"
        />
        <div class="right-search">
          <span v-show="search.type === 'month'">自定义月数：</span>
          <span v-show="search.type === 'day'">自定义天数：</span>
          <a-input
            v-model:value="search.value"
            placeholder="请输入"
            style="width: 100px"
            type="number"
            :min="0"
            :max="30"
            :precision="0"
            :onkeyup="(search.value = String(search.value).replace(/\D/g, ''))"
            @keyup.enter="getList"
          />&nbsp;
          <a-select
            style="width: 100px"
            v-model:value="search.type"
            @change="onTypeChange"
          >
            <a-select-option value="month">按月查询</a-select-option>
            <a-select-option value="day">按日查询</a-select-option> </a-select
          >&nbsp;
          <el-date-picker
            v-if="search.type === 'month'"
            v-model="search.date_arr"
            type="monthrange"
            range-separator="-"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            @change="getList"
            size="small"
            style="width: 240px"
            value-format="YYYY-MM"
          >
          </el-date-picker>
          <el-date-picker
            v-else
            v-model="search.date_arr"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getList"
            size="small"
            style="width: 240px"
            value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="table-box">
        <a-radio-group
          v-model:value="search.model"
          @change="getList"
          style="margin: 10px 0"
        >
          <a-radio-button value="natural">自然日数据</a-radio-button>
          <a-radio-button value="precise">顺延24小时数据</a-radio-button>
        </a-radio-group>
        <a-table
          bordered
          :scroll="{ x: 1700 }"
          :data-source="list"
          :columns="columns"
          @change="getList"
          rowKey="uid"
          :loading="loading"
          :pagination="tablePageOptions"
        >
          <template #operation="{ record }">
            <a-button type="link" @click="toDetial(record)">查看详情</a-button>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script lang="tsx">
import usePagination from "@/hooks/usePagination";
import { defineComponent, reactive, toRefs, ref } from "vue";
import { Moment } from "moment";
import { TableColumnOfStuffPerformance } from "../_pageOptions/table_data";
//getPromotionList
import { getStuffPerformance } from "@/api";
import { message } from "ant-design-vue";
import { ColumnProps } from 'ant-design-vue/es/table/interface';

const Performance = defineComponent({
  components: {},
  setup() {
    let { meta,tablePageOptions } = usePagination();
    const state = reactive({
      search: {
        uname: "", // 推广员名称
        type: "month", // 时间类型 day/month
        model: "natural", // 计算方式 自然日：natural/ 顺延24小时:precise
        value: ref<any[number | string]>(3), // 自定义月数、天数
        date_arr: ref<any[]>([]),
      },
      loading: false,
      list: ref<any[]>([]),
    });
    const columns: ColumnProps[] = []
    return {
      ...toRefs(state),
      tablePageOptions,
      meta,
      columns
    };
  },
  mounted() {
    this.columnsInit()
    // this.getList({ current: 1 });
    this.onTypeChange("month");
  },
  methods: {
    // columns初始化
    columnsInit() {
      this.columns = [{
        title: '推广员',
        dataIndex: 'uname',
        fixed: 'left',
        width: 150,
      },
      {
        title: '成本合计(元)',
        dataIndex: 'cost_amount',
        width:120
      },
      {
        title: '回本(元)',
        dataIndex: 'back_amount',
        sorter: (a: any, b: any) => a.back_amount - b.back_amount,
        width:120
      },
      {
        title: '提现合计(元)',
        dataIndex: 'cash_withdrawal_amount',
        width:120
      },
      //
      {
        title: '用户充值(元)',
        dataIndex: 'user_charge_amount_sum',
        width:120
      },
      //
      {
        title: '操作',
        dataIndex: 'operation',
        slots: { customRender: 'operation' },
        fixed: 'right',
      }]
    },
    // 获取推广链接数据
    async getList(page?: any, filters?: any, sorter?: any) {
      if(this.search.value > 30) {
        message.warning('不能超过30')
        this.search.value = 30
      }
      console.log("SORT", page, filters, sorter);
      this.loading = true;
      let param: any = {
        start_date: this.search.date_arr ? this.search.date_arr[0] : "",
        end_date: this.search.date_arr ? this.search.date_arr[1] : "",
        ...this.search,
      };
      delete param.date_arr;
      console.log("请求参数", param);
      let { data } = await getStuffPerformance({
        page: page ? page.current : 1,
        ...param,
      });
      console.log("请求结果", data);
      this.list = data.list;
      this.meta = data.meta;
      this.customColumns();
      this.loading = false;
    },
    // 月、日查询类型改变
    onTypeChange(val: string) {
      var date = new Date((new Date).getTime()-24*60*60*1000);
      console.log(val);
      if (val === "month") {
        this.search.value = 3;
        var list = this.getDateRange(date, 30, true);
        console.log(list[0].substring(0, 7));
        this.search.date_arr = [
          list[0].substring(0, 7),
          list[1].substring(0, 7),
        ];
      } else {
        this.search.value = "";
        var list = this.getDateRange(date, 7, true);
        this.search.date_arr = list;
      }
      this.getList();
    },
    // 搜索条件修改后 处理columns
    customColumns() {
      this.columnsInit()
      let withdrawalIndex = 0, chargeIndex = 0;
      this.columns.forEach((item,index)=> {
        if(item.dataIndex === 'cash_withdrawal_amount') withdrawalIndex = index
        if(item.dataIndex === 'user_charge_amount_sum') chargeIndex = index+2
      })
      // 选择按月查询 1.自然日从0加起-默认展示M+0、M+1、M+2 \ 2.24小时-从1加起-默认展示M+1、M+2
      if(this.search.type === 'month') { //  按月查询
        if(this.search.model === 'natural') { // 自然日
          if(!this.search.value) {// 默认 未输入自定义月数
            for(let i = 0; i< 3; i++) {
              this.columns.splice(withdrawalIndex+(i+1), 0,{
                title: '提现(元)M+'+ i,
                dataIndex: 'cash_withdrawal',
                width: 150,
                customRender: ({ text, record }) => {
                  return (<div style="color:gray;font-size:13px">
                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
                            <p>累计提现： { text[i].accruing_amount }</p>
                            <p>回本率： { text[i].back_rate }</p>
                          </div>)
                },
              })
              this.columns.splice(chargeIndex+(i*2), 0,{
                title: '用户充值(元)M+'+ i,
                dataIndex: 'user_charge',
                width: 150,
                customRender: ({ text, record }) => {
                  return (<div style="color:gray;font-size:13px">
                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
                            <p>累计提现： { text[i].accruing_amount }</p>
                            <p>回本率： { text[i].back_rate }</p>
                          </div>)
                },
              })
            }
          } else { // 自定义月数
            for(let i = 0; i< this.search.value; i++) {
                this.columns.splice(withdrawalIndex+(i+1), 0,{
                  title: '提现(元)M+'+ i,
                  dataIndex: 'cash_withdrawal',
                  width: 150,
                  customRender: ({ text, record }) => {
                    return (<div style="color:gray;font-size:13px">
                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
                              <p>累计提现： { text[i].accruing_amount }</p>
                              <p>回本率： { text[i].back_rate }</p>
                            </div>)
                  },
                })
                this.columns.splice(chargeIndex+(i*2), 0,{
                  title: '用户充值(元)M+'+ i,
                  dataIndex: 'user_charge',
                  width: 150,
                  customRender: ({ text, record }) => {
                    return (<div style="color:gray;font-size:13px">
                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
                              <p>累计提现： { text[i].accruing_amount }</p>
                              <p>回本率： { text[i].back_rate }</p>
                            </div>)
                  },
                })
            }
          }
        } else { // 24小时
          if(!this.search.value) { // 未输入月数 默认
            for(let i =0; i< 3; i++) {
              this.columns.splice(withdrawalIndex+(i+1), 0,{
                title: '提现(元)M+'+ (i+1),
                dataIndex: 'cash_withdrawal',
                width: 150,
                customRender: ({ text, record }) => {
                  return (<div style="color:gray;font-size:13px">
                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
                            <p>累计提现： { text[i].accruing_amount }</p>
                            <p>回本率： { text[i].back_rate }</p>
                          </div>)
                },
              })
              this.columns.splice(chargeIndex+(i*2), 0,{
                title: '用户充值(元)M+'+ (i+1),
                dataIndex: 'user_charge',
                width: 150,
                customRender: ({ text, record }) => {
                  return (<div style="color:gray;font-size:13px">
                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
                            <p>累计提现： { text[i].accruing_amount }</p>
                            <p>回本率： { text[i].back_rate }</p>
                          </div>)
                },
              })
            }
          } else { // 自定义月数
            for(let i = 0; i< this.search.value; i++) {
                this.columns.splice(withdrawalIndex+(i+1), 0,{
                  title: '提现(元)M+'+ (i+1),
                  dataIndex: 'cash_withdrawal',
                  width: 150,
                  customRender: ({ text, record }) => {
                    return (<div style="color:gray;font-size:13px">
                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
                              <p>累计提现： { text[i].accruing_amount }</p>
                              <p>回本率： { text[i].back_rate }</p>
                            </div>)
                  },
                })
                this.columns.splice(chargeIndex+(i*2), 0,{
                  title: '用户充值(元)M+'+(i+1),
                  dataIndex: 'user_charge',
                  width: 150,
                  customRender: ({ text, record }) => {
                    return (<div style="color:gray;font-size:13px">
                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
                              <p>累计提现： { text[i].accruing_amount }</p>
                              <p>回本率： { text[i].back_rate }</p>
                            </div>)
                  },
                })
            }
          }
        }
      } else { // 选择按日查询 1.自然日从0加起-默认展示T+0、T+2、T+6、T+14、T+29 \ 2.24小时-从1加起-默认展示T+0、T+2、T+6、T+14、T+29
          if(!this.search.value) {// 默认 未输入自定义月数
            for(let i = 0; i< 5; i++) {
              this.columns.splice(withdrawalIndex+(i+1), 0,{
                title: '提现(元)T+'+ [0,2,6,14,29][i],
                dataIndex: 'cash_withdrawal',
                width: 150,
                customRender: ({ text, record }) => {
                  return (<div style="color:gray;font-size:13px">
                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
                            <p>累计提现： { text[i].accruing_amount }</p>
                            <p>回本率： { text[i].back_rate }</p>
                          </div>)
                },
              })
              this.columns.splice(chargeIndex+(i*2), 0,{
                title: '用户充值(元)M+'+ [0,2,6,14,29][i],
                dataIndex: 'user_charge',
                width: 150,
                customRender: ({ text, record }) => {
                  return (<div style="color:gray;font-size:13px">
                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
                            <p>累计提现： { text[i].accruing_amount }</p>
                            <p>回本率： { text[i].back_rate }</p>
                          </div>)
                },
              })
            }
          } else { // 自定义月数
            for(let i = 0; i< this.search.value; i++) {
                this.columns.splice(withdrawalIndex+(i+1), 0,{
                  title: '提现(元)M+'+ i,
                  dataIndex: 'cash_withdrawal',
                  width: 150,
                  customRender: ({ text, record }) => {
                    return (<div style="color:gray;font-size:13px">
                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
                              <p>累计提现： { text[i].accruing_amount }</p>
                              <p>回本率： { text[i].back_rate }</p>
                            </div>)
                  },
                })
                this.columns.splice(chargeIndex+(i*2), 0,{
                  title: '用户充值(元)M+'+ i,
                  dataIndex: 'user_charge',
                  width: 150,
                  customRender: ({ text, record }) => {
                    return (<div style="color:gray;font-size:13px">
                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
                              <p>累计提现： { text[i].accruing_amount }</p>
                              <p>回本率： { text[i].back_rate }</p>
                            </div>)
                  },
                })
            }
          }
      }
    },
    // 返回需要添加的列
    // 工具函数：获取最近日期
    getDateRange(dateNow: any, intervalDays: any, bolPastTime: any) {
      let oneDayTime = 24 * 60 * 60 * 1000;
      let list = [];
      let lastDay;

      if (bolPastTime == true) {
        lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
        list.push(this.formateDate(lastDay));
        list.push(this.formateDate(dateNow));
      } else {
        lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime);
        list.push(this.formateDate(dateNow));
        list.push(this.formateDate(lastDay));
      }
      return list;
    },
    formateDate(time: any) {
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day + "";
    },
    // 查看详情
    toDetial(item: any) {
      console.log("查看详情", item);
      this.$router.push(
        `/data/performanceDetail?uid=${item.uid}&uname=${item.uname}`
      );
    },
  },
});

export default Performance;
</script>
<style lang="scss" scoped>
@import "@/assets/common-style/frame.scss";
.performance {
  .search-box {
    display: flex;
    justify-content: space-between;
  }
  .table-box {
    padding: 0 10px;
  }
  .detail-num {
    color: gray;
  }
  .small-font {
    font-size: 13px;
  }
}
</style>