peko-admin-web/src/views/guildOperationManagement/agentSendSalary.vue

<template>
  <div class="agent-send-salary">
    <div class="container">
      <div class="handle-box">
        <el-form
          ref="searchForm"
          :model="searchForm"
          :rules="searchRule"
          label-width="90px"
          :disabled="tableLoading"
        >
          <div class="search-line">
            <el-form-item label="充值代理ID" prop="chargeAgentErbanNo">
              <el-input
                v-model.trim="searchForm.chargeAgentErbanNo"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="主播ID" prop="erbanNo">
              <el-input
                v-model.trim="searchForm.erbanNo"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="时间" class="large">
              <el-form-item prop="startTime">
                <el-date-picker
                  type="datetime"
                  placeholder="选择开始时间"
                  v-model="searchForm.startTime"
                ></el-date-picker>
              </el-form-item>
              <el-col :span="2" align="center">-</el-col>
              <el-form-item prop="endTime">
                <el-date-picker
                  type="datetime"
                  placeholder="选择结束时间"
                  v-model="searchForm.endTime"
                ></el-date-picker>
              </el-form-item>
            </el-form-item>

            <el-form-item label-width="40px">
              <el-button type="primary" @click="handSearch">搜索</el-button>
              <el-button plain @click="resetSearchForm">重置搜索</el-button>
            </el-form-item>
          </div>
        </el-form>
        <el-button type="text" class="total"
          >转增薪资总额:{{ total ? total.toLocaleString() : "0" }}</el-button
        >
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          border
          v-loading="tableLoading"
          @header-click="headerCopy"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="receiveErbano"
            label="充值代理ID"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="receiveNick"
            label="充值代理昵称"
          >
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="receiveAbbr"
            label="充值代理国家"
          >
          </el-table-column> -->
          <el-table-column align="center" prop="erbano" label="主播ID">
          </el-table-column>
          <el-table-column align="center" prop="nick" label="主播昵称">
          </el-table-column>
          <!-- <el-table-column align="center" prop="abbr" label="主播国家">
          </el-table-column> -->
          <el-table-column align="center" prop="tradeUsb" label="转增薪资">
          </el-table-column>
          <el-table-column align="center" prop="gold" label="对应金币数">
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            width="160"
          >
            <template v-slot="scope">
              {{ convertTimestamp(scope.row.createTime) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination
        :pageParams="pageParams"
        :pageTotal="pageTotal"
        :page-sizes="[10, 20, 100, 200]"
        @handleSizeChange="handleSizeChange"
        @handlePageChange="handlePageChange"
      ></table-pagination>
    </div>
  </div>
</template>

<script>
import { chargeAgentList, chargeAgentSum } from "@/api/relAgency/relAgency.js";
import TablePagination from "@/components/common/TablePagination";
import { formatDate, formatDateYMD } from "@/utils/relDate";
// @ts-ignore
import { ElMessage } from "element-plus";
import { ref } from "vue";
export default {
  name: "agentSendSalary",
  components: { TablePagination },
  data() {
    return {
      total: 0,
      btnLoading: false, // 导出弹出框(dialog)的确认按钮
      tableLoading: false, // 表格是否加载中

      tableData: [], // 接口返回的表格数据
      pageTotal: 0, // 接口返回的表格总条数
      pageParams: {
        pageNo: 1,
        pageSize: 20,
      },
      // 搜索表单相关
      searchForm: {
        erbanNo: null,
        chargeAgentErbanNo: null,
        startTime: null,
        endTime: null,
      },
      searchRule: {
        startTime: [
          {
            validator: (rule, value, callback) => {
              this.$refs["searchForm"].validateField("endTime");
              callback();
            },
            trigger: "change",
          },
        ],
        endTime: [
          {
            validator: (rule, value, callback) => {
              const { startTime } = this.searchForm;
              if (startTime !== null && startTime !== "" && value) {
                if (value <= startTime) {
                  callback(new Error("须晚于开始时间"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    // this.getData();
  },
  methods: {
    getData() {
      this.tableLoading = true;

      let { pageParams, searchForm } = this;
      searchForm.startTime = formatDate(searchForm.startTime )
      searchForm.endTime = formatDate(searchForm.endTime )
      searchForm = JSON.parse(JSON.stringify(searchForm));
      pageParams = JSON.parse(JSON.stringify(pageParams));
      Object.keys(searchForm).forEach((item) => {
        if (
          !searchForm[item] ||
          (searchForm[item] !== undefined && searchForm[item] === "")
        ) {
          delete searchForm[item];
        }
      });
      Object.assign(pageParams, searchForm);
      console.log(pageParams);

      chargeAgentList(pageParams).then((res) => {
        this.tableLoading = false;
        if (res.code == 200) {
          let data = res.data;
          this.tableData = data.records;
          this.pageTotal = data.total;
        }else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
      chargeAgentSum(pageParams).then((res) => {
        if (res.code == 200) {
          this.total = res.data;
        }else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 点击搜索
    handSearch() {
      this.$refs["searchForm"].validate((valid) => {
        if (valid) {
          this.pageParams.pageNo = 1;
          this.getData();
        }
      });
    },
    // 重置搜索表单
    resetSearchForm() {
      this.$refs["searchForm"].resetFields();
      this.pageParams.pageNo = 1;
      this.getData();
    },

    // 分页导航
    handleSizeChange(val) {
      // this.$set(this.pageParams, 'pageSize', val);
      this.pageParams.pageSize = val;
      this.getData();
    },
    handlePageChange(val) {
      // this.$set(this.pageParams, 'pageNo', val);
      this.pageParams.pageSize = val;
      this.getData();
    },
    headerCopy(column, e) {
      this.$copy(column.label);
    },
  },
  computed: {
    convertTimestamp1() {
      return function (time) {
        let date = new Date(time);
        return formatDateYMD(date);
      };
    },
    convertTimestamp() {
      return function (time) {
        let date = new Date(time);
        return formatDate(date);
      };
    },
  },
};
</script>

<style scope>
.exportBtn {
  margin-bottom: 20px;
}
.total {
  font-size: 18px;
}
.container {
  width: 100%;
}
.search-line {
  width: 38%;
}
</style>