peko-admin-web/src/views/lucky/LuckyGiftDetail.vue

<template>
  <div class="outer">
    <!-- 查询 -->
    <div class="inquire" style="display: inline-block; margin-right: 20px">
      <span class="demonstration">选择礼物</span>
      <el-select v-model="inquire.giftId" placeholder="请选择">
        <el-option
          v-for="item in inquire.gifts"
          :key="item.giftId"
          :label="item.giftName"
          :value="item.giftId"
        >
        </el-option>
      </el-select>
    </div>
    <div class="inquire" style="display: inline-block; margin-right: 120px">
      <span class="demonstration" style="display: inline-block">送礼用户ID</span>
      <el-input
        style="display: inline-block"
        v-model="inquire.senUserId"
        placeholder=""
        class="input"
      ></el-input>
    </div>
    <!-- 查询按钮 -->
    <el-button style="" type="primary" @click="getData()">查询</el-button>
    <el-button style="" type="primary" @click="exportDate()">导出</el-button>
  </div>

  <!-- 表格 -->
  <el-table
    v-loading="loading"
    :data="tableData"
    border
    style="width: 100%; margin-top: 25px"
  >
    <el-table-column prop="createTime" align="center" label="时间" />
    <el-table-column prop="sendErBanNo" align="center" label="送礼人ID" />
    <el-table-column prop="sendNick" align="center" label="送礼人昵称" />
    <el-table-column prop="giftName" align="center" label="送礼名称" />
    <el-table-column prop="giftPrice" align="center" label="礼物单价" />
    <el-table-column prop="giftNum" align="center" label="礼物个数" />
    <el-table-column prop="totalGoldNum" align="center" label="总价值" />
    <el-table-column prop="receiveErBanNo" align="center" label="收礼人ID" />
    <el-table-column prop="receiveNick" align="center" label="收礼人昵称" />
    <el-table-column align="center" label="获得奖励数额" width="">
      <template v-slot="scope">
        <el-button @click="edi(scope.row)" type="text" size="small">{{
          scope.row.rewardAmount
        }}</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    style="margin-top: 10px"
    class="paginationClass"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
    layout="sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <!-- 详情 -->
  <el-dialog v-model="detailsDialog" title="奖励详情" width="30%" center>
    <!-- 内表格 -->
    <el-table
      v-loading="loading"
      :data="tableDataIn"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="rewardName" align="center" label="奖励内容" />
      <el-table-column prop="rewardValue" align="center" label="单价" />
      <el-table-column prop="rewardNum" align="center" label="个数" />
      <el-table-column prop="totalRewardNum" align="center" label="总价值" />
    </el-table>
    <!-- 操作 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" class="primary" @click="detailsDialog = false"
          >关闭</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {
  getGiftSendPage,
  getAll,
  getRewardList,
  luckyGiftRewardRecordExport,
} from "@/api/lucky/luckyGiftRangeConfig";
import { ElMessage } from "element-plus";
export default {
  name: "LuckyGiftDetail",
  data() {
    return {
      loading: false,
      // 查询条件
      inquire: {
        gifts: [],
        giftId: "",
        senUserId: "",
      },
      // 表格
      tableData: [],
      // 分页
      total: 10, //总页数
      currentPage: 1, //页码
      pageSize: 10, //条数
      //   内表格
      detailsDialog: false,
      tableDataIn: [],
    };
  },
  created() {
    getAll({ giftType: 16 }).then((res) => {
      var arr = [];
      arr = res.data;
      arr.unshift({ giftId: null, giftName: "全部" });
      this.inquire.gifts = arr;
      this.inquire.giftId = arr[0].giftId;
    });
    this.getData();
  },
  methods: {
    // 查询
    getData() {
      this.loading = true;
      getGiftSendPage({
        page: this.currentPage,
        pageSize: this.pageSize,
        giftId: this.inquire.giftId,
        sendErBanNo: this.inquire.senUserId,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.records;
        this.loading = false;
      });
    },
    // 详情
    edi(val) {
      getRewardList({ giftSendRecordId: val.giftSendRecordId }).then((res) => {
        this.tableDataIn = res.data;
        this.detailsDialog = true;
      });
    },
    // 导出
    exportDate() {
      var obj = {};
      if (this.inquire.giftId == null || this.inquire.giftId == "null") {
        obj = {
          sendErBanNo: this.inquire.senUserId,
        };
      } else {
        obj = {
          giftId: this.inquire.giftId,
          sendErBanNo: this.inquire.senUserId,
        };
      }

      luckyGiftRewardRecordExport(obj).then();
    },
    // 分页导航
    handleSizeChange() {
      this.getData();
    },
    handleCurrentChange() {
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.outer {
  padding-top: 20px;
  background: #ecf0f5;
  border-top: 3px solid #d2d6de;
  .demonstration {
    margin-right: 20px;
  }
  .inquire {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
  }
  .search {
    width: 100%;
    height: 41px;
    .searchLeft,
    .searchRight {
      width: 20%;
      float: left;
      span {
        margin-right: 10px;
      }
      .input {
        width: 75%;
      }
    }
  }
  .buttonBox {
    margin-top: 10px;
  }
  .authorityBox {
    .authoritySpan {
      margin-right: 20px;
    }
    .authorityInpput {
      width: 50%;
    }
  }
  .dialogTableVisibleBut {
    margin: -25px 0 20px 0px;
  }
}
</style>