peko-admin-web/src/views/goldCoinGiftingHistory/GoldCoinGiftingHistory.vue

<template>
  <div class="list-gold-coin-transfer">
    <div class="container">
      <div class="handle-box">
        <el-form
          ref="searchForm"
          :model="searchForm"
          :rules="searchRule"
          label-width="120px"
          :disabled="tableLoading"
        >
          <div class="search-line">
            <el-form-item label="转赠用户平台号" prop="sendUserPlatformNo">
              <el-input
                v-model.number="searchForm.sendUserPlatformNo"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="接收用户平台号" prop="receiveUserPlatformNo">
              <el-input
                v-model.number="searchForm.receiveUserPlatformNo"
                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"
                  value-format="yyyy/MM/dd HH:mm:ss"
                ></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"
                  value-format="yyyy/MM/dd HH:mm:ss"
                ></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-button
                type="primary"
                class="mr10"
                @click="exportVisible = true"
                >导出</el-button
              >
            </el-form-item>
          </div>
        </el-form>

        <p style="color: #00d1b2">当前汇总值：{{ totalCoins }}</p>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @header-click="headerCopy"
        v-loading="tableLoading"
      >
        <el-table-column
          prop="id"
          width="90"
          label="ID"
          align="center"
          fixed="left"
        ></el-table-column>
        <el-table-column
          prop="fromUserNick"
          label="转赠用户昵称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="fromUserPlatformNo"
          width="120"
          label="转赠用户平台号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="toUserNick"
          label="接收用户昵称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="toUserPlatformNo"
          width="120"
          label="接收用户平台号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="abbr"
          label="接收用户国家"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goldNum"
          width="110"
          label="金币数量"
          align="center"
        ></el-table-column>
        <el-table-column width="160" label="创建时间" align="center">
          <template v-slot="scope">{{
            convertTimestamp(scope.row.createTime)
          }}</template>
        </el-table-column>
        <el-table-column width="160" label="更新时间" align="center">
          <template v-slot="scope">{{
            convertTimestamp(scope.row.updateTime)
          }}</template>
        </el-table-column>
      </el-table>
      <table-pagination
        :pageParams="pageParams"
        :pageTotal="pageTotal"
        @handleSizeChange="handleSizeChange"
        @handlePageChange="handlePageChange"
      ></table-pagination>
    </div>
    <!-- 确认导出弹出框 -->
    <el-dialog
      v-model="exportVisible"
      width="30%"
      :before-close="handlDialogClose"
    >
      <!-- 使用 v-slot 指令提供 'title' 插槽的内容 -->
      <template v-slot:title>
        <div style="display: flex; align-items: center">提示</div>
      </template>

      <!-- 默认插槽的内容 -->
      <div style="font-size: 16px">确定以当前筛选条件导出Excel吗？</div>

      <!-- 使用 v-slot 指令提供 'footer' 插槽的内容 -->
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="exportVisible = false" :disabled="dialogDisabled"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="confirmExport2Excel"
            :loading="btnLoading"
            :disabled="dialogDisabled"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGoldCoinTransferList,
  getGoldCoinSumGold,
} from "@/api/relUserBelongings/relUserBelongings.js";
import { formatDate } from "@/utils/relDate.js";
import { exportExcel } from "@/utils/exportExcel.js";
import TablePagination from "@/components/common/TablePagination.vue";
export default {
  name: "GoldCoinGiftingHistory",
  components: { TablePagination },
  data() {
    return {
      clickedLineId: null, // 记录被点击的某行数据的id
      clickedLineText: "GIFT_IN_ROOM", // 记录红包类型
      tableData: [], // 接口返回的表格数据
      pageTotal: 0, // 接口返回的表格总条数
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      exportVisible: false,
      tableLoading: false, // 表格是否加载中

      // 搜索表单相关
      searchForm: {
        sendUserPlatformNo: null, // 接收者平台号
        receiveUserPlatformNo: 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",
          },
        ],
      },

      dialogDisabled: false, // 是否禁用弹出框(dialog)表单元素
      btnLoading: false, // 弹出框(dialog)的确认按钮
      totalCoins: null, //当前金币汇总值
    };
  },
  created() {
    // this.getData();
  },
  methods: {
    getData() {
      this.tableLoading = true;

      let { pageParams, searchForm } = this;
      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);

      getGoldCoinSumGold(pageParams).then((res) => {
        if (res.data.success === true) {
          let data = res.data.data;
          this.totalCoins = data;
        }
      });
      getGoldCoinTransferList(pageParams).then((res) => {
        this.tableLoading = false;
        if (res.data.success === true) {
          let data = res.data.data;
          this.tableData = data.list;
          this.pageTotal = data.total;
        }
      });
    },
    // 点击搜索
    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();
    },
    // 弹窗关闭前控制
    handlDialogClose(done) {
      const { dialogDisabled } = this;
      if (dialogDisabled) return;
      done();
    },
    // 重置表单状态
    resetDialog() {
      this.btnLoading = false;
      this.dialogDisabled = false;
    },

    // 分页导航
    handleSizeChange(val) {
      this.$set(this.pageParams, "pageSize", val);
      this.getData();
    },
    handlePageChange(val) {
      this.$set(this.pageParams, "pageNo", val);
      this.getData();
    },
    headerCopy(column, e) {
      this.$copy(column.label);
    },

    // 确认导出
    confirmExport2Excel() {
      this.btnLoading = true;
      this.dialogDisabled = true;

      let { searchForm } = this;
      searchForm = JSON.parse(JSON.stringify(searchForm));
      Object.keys(searchForm).forEach((item) => {
        if (
          !searchForm[item] ||
          (searchForm[item] !== undefined && searchForm[item] === "")
        ) {
          delete searchForm[item];
        }
      });
      Object.assign(searchForm, { pageSize: 10000, pageNo: 1 });

      getGoldCoinTransferList(searchForm).then((res) => {
        this.resetDialog();
        if (res.data.success === true) {
          this.exportVisible = false;

          const list = res.data.data.list;
          list.forEach((item) => {
            item.createTime = formatDate(item.createTime);
            item.updateTime = formatDate(item.updateTime);
          });
          const tHeader = [
            "ID",
            "转赠用户昵称",
            "转赠用户平台号",
            "接收用户昵称",
            "接收用户平台号",
            "接收用户国家",
            "金币数量",
            "创建时间",
            "更新时间",
          ];
          const filterVal = [
            "id",
            "fromUserNick",
            "fromUserPlatformNo",
            "toUserNick",
            "toUserPlatformNo",
            "abbr",
            "goldNum",
            "createTime",
            "updateTime",
          ];
          const exportName = `金币转赠历史${formatDate(new Date())}`;

          exportExcel(tHeader, filterVal, list, exportName);
        }
      });
    },
  },
  computed: {
    convertTimestamp() {
      return function (time) {
        let date = new Date(time);
        return formatDate(date);
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.handle-box {
  overflow: hidden;
  .search-line {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 320px;
      .el-input,
      .el-select {
        width: 200px;
      }
      .el-form-item--small {
        margin-bottom: 0;
      }
      .el-form-item {
        float: left;
      }
      &.large {
        width: 580px;
        .el-form-item {
          width: 200px;
        }
      }
      &.small {
        .el-form-item {
          width: 90px;
          .el-input {
            width: 100%;
          }
        }
      }
    }
  }
}

.table {
  width: 100%;
  font-size: 14px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>