ledehui-admin/src/view/fund/balance-record.vue

<template>
  <div class="page-box" v-loading="loading > 0">
    <Header :title="title"></Header>
    <div class="tabs">
      <div
        class="tab"
        :class="{ active: tabActive === item.value }"
        v-for="item in moneyType"
        :key="item.value"
        @click="tabChange(item.value)"
      >
        {{ item.name }}
        <div class="tab-line"></div>
      </div>
    </div>
    <div class="container">
      <!-- tab -->
      <div class="content">
        <!-- 表格 -->
        <div class="filter-box">
          <div class="filter">
            <!-- <div class="filter-item">
              <div class="label">货币类型：</div>
              <el-select
                v-model="filter.genre"
                size="small"
                class="select"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in moneyType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div> -->

            <div class="filter-item">
              <div class="label">变动类型：</div>
              <el-select
                v-model="filter.fundType"
                size="small"
                class="select"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in statusType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div class="filter-item">
              <div class="label">利润获得者ID：</div>
              <el-input
                class="input"
                v-model="filter.uid"
                placeholder="请输入内容"
                size="small"
              ></el-input>
            </div>
            <div class="filter-item">
              <div class="label">利润发起者ID：</div>
              <el-input
                class="input"
                v-model="filter.fid"
                placeholder="请输入内容"
                size="small"
              ></el-input>
            </div>

            <div class="filter-item">
              <div class="label">申请时间：</div>
              <el-date-picker
                v-model="date"
                type="datetimerange"
                align="right"
                unlink-panels
                class="date-input"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                size="small"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="btn-box">
            <button class="search" @click="search">筛选</button>
            <button class="reset" @click="reset">重置</button>
            <button
              class="search"
              style="margin-left: 60px"
              @click="order2excel"
            >
              导出
            </button>
          </div>
        </div>
        <el-table
          :data="list"
          class="order-table table no-border-table"
          ref="orderTable"
          :header-cell-style="{
            border: 'none',
            color: '#333',
            background: '#f6f6f6',
            borderBottom: '1px solid #E8E8E8',
            height: '54px',
          }"
          :row-style="{
            height: '54px',
          }"
        >
          <el-table-column
            prop="uid"
            align="center"
            label="奖励获得者ID"
          ></el-table-column>
          <el-table-column prop="genre" align="center" label="货币类型">
            <div>
              {{ moneyMap[tabActive] }}
            </div>
          </el-table-column>
          <el-table-column
            prop="describe"
            align="center"
            label="描述"
          ></el-table-column>
          <el-table-column
            prop="fid"
            align="center"
            label="奖励发起者ID"
            v-if="tabActive !==5"
          ></el-table-column>
          <el-table-column
            prop="amount"
            align="center"
            label="额度"
          ></el-table-column>
          <el-table-column
            prop="afterAmount"
            align="center"
            label="操作后额度/元"
          ></el-table-column>
          <el-table-column
            prop="created"
            align="center"
            label="创建时间"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 分页按钮 -->
      <div class="footer">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          background
          layout="total, prev, pager, next, jumper"
          :page-size="size"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      title="生成中..."
      :visible.sync="showProgressDialog"
      width="30%"
      center
    >
      <el-progress
        :percentage="progress"
        :text-inside="true"
        :stroke-width="18"
      ></el-progress>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import Header from '../../components/common/header';
import myUtils from '../../components/common/whatever2excel';
export default {
  components: {
    Header
  },
  name: 'balanceRecord',
  data() {
    return {
      currentPage: 1, // 当前页码
      size: 20, // 每页条数
      total: 0, // 总页数
      loading: 0, // 加载中
      title: {
        // 页面标题
        firstTitile: '资金管理',
        secondTitle: '变动记录'
      },
      filter: {
        uid: null,
        fid: null,
        fundType: null
      },
      tabActive: 1,
      statusType: [],
      moneyType: [
        {
          name: '积分',
          value: 1
        },
        {
          name: '代金券',
          value: 2
        },
        {
          name: '余额',
          value: 3
        },
        // {
        //   name: '金豆',
        //   value: 4
        // },
        // {
        //   name: '生命值',
        //   value: 5
        // }
      ],
      moneyMap: {
        1: '积分',
        2: '代金券',
        3: '余额',
        4: '金豆',
        5: '生命值'
      },
      hzType: [],
      hqType: [],
      balanceType: [],
      bean: [],
      tgType: [],
      hpType: [],
      list: [], // 列表
      date: [],
      showProgressDialog: false,
      progress: 0
    };
  },

  mounted() {
    this.statusType = this.hzType;
    // 获取列表
    this.getFundTypeMap();
    this.getList();
  },
  computed: {},
  methods: {
    // 切换页码
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    },
    tabChange(val) {
      this.filter = {
        fundType: null,
        uid: null
      };
      switch (val) {
        case 1:
          this.statusType = this.hzType;
          break;
        case 2:
          this.statusType = this.hqType;
          break;
        case 3:
          this.statusType = this.balanceType;
          break;
        case 4:
          this.statusType = this.beanType;
          break;
        case 5:
          this.statusType = this.hpType;
          break;
        default:
          return;
      }
      this.tabActive = val;
      this.currentPage = 1;
      this.getList();
    },
    getFundTypeMap() {
      this.loading++;
      this.httpGet(this.$root.getFundTypeMap, {}).then(
        (res) => {
          this.loading--;
          // this.typeMap = res.balanceLog;
          let hzType = [
            {
              name: '全部',
              value: ''
            }
          ];
          for (let key in res.balanceLog.integral) {
            hzType.push({
              name: res.balanceLog.integral[key],
              value: key
            });
          }
          this.hzType = hzType;
          let hqType = [
            {
              name: '全部',
              value: ''
            }
          ];
          for (let key in res.balanceLog.gold) {
            hqType.push({
              name: res.balanceLog.gold[key],
              value: key
            });
          }
          this.hqType = hqType;
          let balanceType = [
            {
              name: '全部',
              value: ''
            }
          ];
          for (let key in res.balanceLog.balance) {
            balanceType.push({
              name: res.balanceLog.balance[key],
              value: key
            });
          }
          this.balanceType = balanceType;
          let beanType = [
            {
              name: '全部',
              value: ''
            }
          ];
          for (let key in res.balanceLog.bean) {
            beanType.push({
              name: res.balanceLog.bean[key],
              value: key
            });
          }
          this.beanType = beanType;
          let hpType = [
            {
              name: '全部',
              value: ''
            }
          ];
          for (let key in res.balanceLog.hp) {
            hpType.push({
              name: res.balanceLog.hp[key],
              value: key
            });
          }
          this.hpType = hpType;
          this.statusType = this.hzType;
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    },
    // 获取列表
    getList() {
      this.filter.begin = this.date[0] || '';
      this.filter.end = this.date[1] || '';
      this.loading++;
      let url = '';
      switch (this.tabActive) {
        case 1:
          url = 'getIntegralList';
          break;
        case 2:
          url = 'getGoldList';
          break;
        case 3:
          url = 'getBalance';
          break;
        case 4:
          url = 'getBean';
          break;
        case 5:
          url = 'getHpList';
          break;
        default:
          return;
      }
      this.httpGet(this.$root[url], {
        page: this.currentPage,
        size: this.size,
        ...this.filter
      }).then(
        (res) => {
          this.loading--;
          this.list = res.list;
          this.total = res.total;
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    },
    // 过滤
    search() {
      this.currentPage = 1;
      this.getList();
    },
    // 重置过滤
    reset() {
      this.filter = {
        uid: null,
        fundType: null
      };
      this.date = [];
      this.getList();
    },
    async order2excel() {
      this.loading++;
      let list = [];
      let totalPage = null;
      let data = {
        page: this.currentPage,
        size: this.size,
        ...this.filter
      };
      let url = '';
      switch (this.tabActive) {
        case 1:
          url = 'getIntegralList';
          break;
        case 2:
          url = 'getGoldList';
          break;
        case 3:
          url = 'getBalance';
          break;
        case 4:
          url = 'getBean';
          break;
        case 5:
          url = 'getHpList';
          break;
        default:
          return;
      }
      await this.httpGet(this.$root[url], data).then(
        (res) => {
          this.loading--;
          totalPage = Math.ceil(parseInt(res.total) / this.size);
        },
        () => {
          this.loading--;
        }
      );
      this.showProgressDialog = true;
      this.progress = 0;
      await this.getAllPages(totalPage, list).then(
        () => {
          this.showProgressDialog = false;
          this.jsonFormatAndToExcel(list);
        },
        (err) => {
          console.error(err);
          this.showProgressDialog = false;
        }
      );
    },
    async getAllPages(totalPage, list) {
      for (let i = 1; i <= totalPage; i++) {
        let data = {
          page: i,
          size: this.size,
          ...this.filter
        };
        let url = '';
        switch (this.tabActive) {
          case 1:
            url = 'getIntegralList';
            break;
          case 2:
            url = 'getGoldList';
            break;
          case 3:
            url = 'getBalance';
            break;
          case 4:
            url = 'getBean';
            break;
          case 5:
            url = 'getHpList';
            break;
          default:
            return;
        }
        await this.httpGet(this.$root[url], data).then((res) => {
          list.push(...res.list);
          this.progress = Math.floor((i / totalPage) * 100);
          console.log('page' + i, list.length);
        });
        // console.log(5555, list);
      }
    },
    jsonFormatAndToExcel(list) {
      let formatList = [];
      list.forEach((item) => {
        let obj = {
          用户ID: item.uid,
          货币类型: this.moneyMap[this.tabActive],
          描述: item.describe,
          关联ID: item.fid,
          额度: item.amount,
          '操作前额度/元': item.BeforeAmount,
          创建时间: item.created
        };
        formatList.push(obj);
      });
      myUtils.json2excel(formatList);
    }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '~assets/public.styl';
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.page-box {
  height: 100%;
  width: 100%;
  flex-y(flex-start, flex-start);
  overflow-y: hidden;
  background: bg-color;

  .container {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    flex-y(flex-start, flex-start);
    padding: 10px;

    // content 表格
    .content {
      flex: 1;
      width: 100%;
      font-size: 14px;
      background: white;
      box-sizing: border-box;
      padding: 24px 32px;
      border-radius: 2px;

      // 按钮
      .btn {
        width: 100px;
        height: 32px;
        line-height: 32px;
        confirm-btn();
        font-size: 14px;
        margin: 16px 0;
      }

      // 表格按钮
      .table-btn {
        // width: 65px;
        height: 24px;
        line-height: 24px;
        color: gray3;
        font-size: 12px;
        margin-right: 8px;
        cancel-btn();
        padding: 0 8px;
      }

      .filter-item {
        margin-right: 12px;
      }

      .select, .input {
        width: 125px;
      }

      .date-input {
        width: 360px;
      }

      .btn-box {
        margin: 0;
      }

      .table {
        margin-top: 24px !important;
      }
    }
  }

  .footer {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    flex-x(flex-end);
    background: white;
  }

  .dialog-content {
    flex-y();
  }

  .form {
    width: 100%;
    flex-center();
    margin: 8px 0;
  }
}

.tabs {
  width: 100%;
  background: #fff;
  height: 60px;
  flex-x(flex-start);
  padding: 0 30px;
  box-sizing: border-box;
  margin-top: 8px;
  flex-shrink: 0;

  .tab {
    background: #fff;
    cursor: pointer;
    padding: 0 15px;
    position: relative;
    width: auto;
    margin-right: 100px;
    height: 100%;
    flex-x(center);
    word(16px, #999);

    &.active {
      word(16px, #333);

      .tab-line {
        width: 100%;
        position: absolute;
        background: #4678E6;
        height: 4px;
        border-radius: 2px;
        left: 0;
        bottom: 3px;
      }
    }
  }
}
</style>