ngds/frontendEle/src/views/bonus/other.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table class="table-box" :data="tableData" style="width: 100%;">
        <el-table-column label="期数" prop="PERIOD_NUM.value">
        </el-table-column>
        <el-table-column label="销售奖金" prop="BONUS_TG.value">
        </el-table-column>
        <el-table-column label="业绩奖金" prop="ORI_BONUS_QY.value">
        </el-table-column>
        <el-table-column label="管理奖金" prop="ORI_BONUS_BS_MNT.value">
        </el-table-column>
        <el-table-column label="绩效奖金" prop="ORI_BONUS_BS_ABBR.value">
        </el-table-column>
        <el-table-column label="季度分红" prop="ORI_BONUS_QUARTER.value">
        </el-table-column>
        <el-table-column label="旅游积分" prop="BONUS_TOURISM.value">
        </el-table-column>
        <el-table-column label="车房积分" prop="BONUS_GARAGE.value">
        </el-table-column>
        <el-table-column label="合计" prop="BONUS_TOTAL.value">
        </el-table-column>
        <el-table-column label="实发" prop="BONUS_REAL.value">
        </el-table-column>
        <el-table-column >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click.native="showFlow(scope.row.PERIOD_NUM.value)">查看全部</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <el-dialog :title="`${periodNum}期奖金`" :visible.sync="dialogFlowVisible" width="70%">

        <el-descriptions title="" class="bonus-list" v-if="newData" :column="2">
          <el-descriptions-item class="bonus-item" label="期数">{{newData.PERIOD_NUM.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="会员等级">{{newData.LAST_DEC_LV.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="销售奖金">{{newData.ORI_BONUS_TG.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="业绩奖金">{{newData.ORI_BONUS_QY.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="管理奖金">{{newData.ORI_BONUS_BS_MNT.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="绩效奖金">{{newData.ORI_BONUS_BS_ABBR.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="季度分红">{{newData.ORI_BONUS_QUARTER.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="旅游积分">{{newData.BONUS_TOURISM.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="车房积分">{{newData.BONUS_GARAGE.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="合计">{{newData.BONUS_TOTAL.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="实发奖金">{{newData.BONUS_REAL.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="一市场新增">{{newData.PV_1L.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="一市场结余">{{newData.SURPLUS_1L.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="二市场新增">{{newData.PV_2L.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="二市场结余">{{newData.SURPLUS_2L.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="三市场新增">{{newData.PV_3L.value}}</el-descriptions-item>
          <el-descriptions-item class="bonus-item" label="三市场结余">{{newData.SURPLUS_3L.value}}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
  import network from '@/utils/network'
  import tool from '@/utils/tool'

  export default {
    name: 'bonus_other',
    components: {},
    mounted() {
      this.getData()
    },
    data() {
      return {
        allData: null,
        tableKey: null,
        newData: null,
        loading: true,
        tableData: null,
        dialogFlowVisible:false,
        periodNum: '',
        dialogLoading: false,
        tool: tool,
      }
    },
    methods: {
      getData() {
        let vueObj = this
        vueObj.loading = true
        network.getData('bonus/other').then(response => {
          vueObj.tableData = response.tableData
          vueObj.tableKey = response.tableKey
          vueObj.loading = false
        }).catch(response => {
          vueObj.loading = false
        })
      },
      showFlow(periodNum){
        let vueObj = this
        this.$message({
          message: '正在获取数据',
          type: 'info'
        })
        this.periodNum = periodNum
        vueObj.dialogFlowVisible = true
        vueObj.dialogLoading = true
        this.getFlowData()
      },
      getFlowData() {
        let vueObj = this
        network.getData('bonus/new',{periodNum: vueObj.periodNum}).then(response => {
          vueObj.newData = response
          vueObj.dialogLoading = false
        }).catch(response => {
          vueObj.dialogLoading = false
        })
      },

    }
  }

</script>
<style>
  .other-table-box .el-table__header-wrapper{display: none;}
  .other-table-box .el-table__body tr:hover>td{background-color: #fff!important;}
  .other-table-box .el-table__body tr td:not(:last-child):hover{background-color: #f5f5f5!important;}
  .bonus-list:after{content: '';clear: both;display: table;}
  .bonus-list{width: 360px;}
  .bonus-list .bonus-item{float: left;width: 33.333%;background: #fff;height:36px;line-height:36px;border: 1px solid #ddd;margin: -1px 0 0 -1px;box-sizing: border-box;}
  .bonus-item{text-align: center;}
  .bonus-item:hover{background: #f5f5f5;cursor: pointer;}
</style>