ngds-backend-ele/src/views/bonus/period.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <div class="filter-box">
        <filter-user :filter-types.sync="filterTypes" :filter-btn-name="$t('common.screen')"
                     @select-value="handleFilterUser"></filter-user><!-- Select -->
      </div>
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange"
                :height="tool.getTableHeight()">
        <el-table-column prop="PERIOD_NUM" :label="$t('bonus.periodNo')" width="100"><!-- 期数 -->
          <template slot-scope="scope">
            <el-tag type="" size="small" class="no-border">{{scope.row.PERIOD_NUM}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column :label="$t('bonus.bonusMonth')" width="110"><!-- 结算月 -->
          <template slot-scope="scope">
            <el-tag type="warning" size="small" class="no-border">{{ scope.row.CALC_YEAR_MONTH }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column :label="$t('bonus.settlementDate')" width="230"><!-- 结算时间 -->
          <template slot-scope="scope">
            {{ getWatTime(scope.row.CALCULATED_AT) }}
          </template>
        </el-table-column>

        <el-table-column :label="$t('bonus.networkConnectionTime')" width="230"><!-- 挂网时间 -->
          <template slot-scope="scope">
            {{getWatTime(scope.row.SENT_AT)}}
          </template>
        </el-table-column>
        <el-table-column :fixed="fixed" :label="$t('common.action')" width=""><!-- 操作 -->
          <template slot-scope="scope">

            <!-- 计算 -->
            <el-button v-if="scope.row.IS_CAN_CALC" class="button" type="primary" size="small" @click.native="calcHandle(scope.row.PERIOD_NUM)">{{ $t('bonus.calculationOfBonus') }}</el-button>
            <!-- 挂网 -->
            <el-button @click.native="sentHandle(scope.row)" type="danger" class="button" size="small" v-if="scope.row.IS_CAN_SENT && permission.hasPermission(`bonus/send-period`)">
              {{ $t('bonus.spreadNet') }}
            </el-button>
            <!-- 日志 -->
            <el-button v-if="scope.row.IS_SHOW_LOG" class="button" type="info" size="small" @click.native="getDialogData(scope.row.PERIOD_NUM);dialogLoading=true;" >{{$t('bonus.logRefresh')}}</el-button>

<!--                  <el-row><el-button class="button" type="primary" @click.native="autoPerfHandle(currentPeriod)" >计算和拉取期业绩</el-button></el-row>-->
<!--                <div>-->
<!--                  <el-table :data="dialogData" height="550" v-loading="dialogLoading" style="width: 100%">-->
<!--                    <el-table-column prop="CREATED_AT" :label="$t('bonus.actionTime')" width="180">-->
<!--                      <template slot-scope="scope">-->
<!--                        {{getWatTime(scope.row.CREATED_AT)}}-->
<!--                      </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column prop="TEXT" :label="$t('bonus.logContent')" width="650"></el-table-column>-->
<!--                  </el-table>-->
<!--              </div>-->
<!--            </el-dialog>-->

          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-button type="primary" size="small" @click="doAutoWithdraw()">
          {{$t('bonus.bulkWithdrawal')}}
        </el-button>
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import tool from './../../utils/tool'
import store from '@/utils/vuexStore'
import FilterUser from '@/components/FilterUser'
import permission from '@/utils/permission'
import Pagination from '@/components/Pagination'
import filterHelper from '../../utils/filterHelper'
import { fetchPeriod,fetchAutoWithdraw,fetchRecordList,fetchAutoCalc,fetchPerfOrderList,fetchInitData,fetchCalcPerfPeriod,fetchPullPerfPeriod,fetchCalcBonus,fetchSyncCalcRecord,fetchPullBonus,fetchClosePeriod,fetchCalcPeriod,fetchPerfPeriod,fetchSendPeriod } from '@/api/bonus'
import ElementUI from 'element-ui'
import {getScreenWidth} from "@/utils";

export default {
  name: 'bonus-period',
  components: {FilterUser, Pagination},
  created () {
    const wsServer = 'ws://127.0.0.1:9513'
    console.log(wsServer)
    let webSocket = new WebSocket(wsServer)
    webSocket.onopen = function (evt) {
      let userId = userInfo.userId()
      let sendData = {app: 'admin', userId: userId}
      webSocket.send(JSON.stringify(sendData))
    }
    webSocket.onmessage = (env) => {
      let data = JSON.parse(env.data)
      if (data.handle === 'adminAsyncPercent') {
        this.onMessageCallback(data)
      }
    }
  },
  mounted () {
    this.getData(this.currentPage, this.pageSize)
    // store.state.socket.onMessageCallback = this.onMessageCallback
  },
  data () {
    return {
      currentPeriod: 0,
      tableData: null,
      loading: true,
      multipleSelection: [],
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 10,
      tool: tool,
      permission: permission,
      filterTypes: {
        'periodNum': {isUserTable: false, name: this.$t('bonus.periodNum')}, // 期数
        'year': {isUserTable: false, name: this.$t('bonus.year')}, // 所在结算年
        'month': {isUserTable: false, name: this.$t('bonus.month')}, // 所在结算月
        'startTime': {isUserTable: false, name: this.$t('bonus.startTime'), other: 'date'}, // 期数开始时间
        'endTime': {isUserTable: false, name: this.$t('bonus.endTime'), other: 'date'}, // 期数结束时间
        'closedAt': {isUserTable: false, name: this.$t('bonus.closedAt'), other: 'date'}, // 封期时间
        'perfStartedAt': {isUserTable: false, name: this.$t('bonus.perfStartedAt'), other: 'date'}, // 生成业绩单开始时间
        'perfedAt': {isUserTable: false, name: this.$t('bonus.perfedAt'), other: 'date'}, // 生成业绩单结束时间
        'calStartedAt': {isUserTable: false, name: this.$t('bonus.calStartedAt'), other: 'date'}, // 结算开始时间
        'calculatedAt': {isUserTable: false, name: this.$t('bonus.calculatedAt'), other: 'date'}, // 结算结束时间
        'sendStartedAt': {isUserTable: false, name: this.$t('bonus.sendStartedAt'), other: 'date'}, // 挂网开始时间
        'sentAt': {isUserTable: false, name: this.$t('bonus.sentAt'), other: 'date'} // 挂网结束时间
      },
      filterModel: {},
      percentList: {
        'PERF_PERCENT': {},
        'CALC_PERCENT': {},
        'SENT_PERCENT': {}
      },
      dialogTableVisible: false,
      dialogData: null,
      currentDialogPage: 1,
      dialogPageSize: 100,
      dialogLoading: true,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
			fixed: getScreenWidth() < 500 ? false : 'right',
			screenWidth: getScreenWidth() > 600 ? '600px' : getScreenWidth() + 'px',
			labelPosition: getScreenWidth() >= 600 ? 'right' : 'top',
    };

  },
  methods: {
    autoCalcHandle(currentPeriod) {
      this.$confirm(this.$t('bonus.autoSettlementHint'), this.$t('common.hint'), { // '确定对当前期进行结算操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        // return network.getData(`calc/auto-calc/${currentPeriod}`)
        return fetchAutoCalc(currentPeriod)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getDialogData(this.currentPage, this.pageSize)
      }).catch((error) => {
          if(error !== 'cancel'){
              ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
          }
      })
    },
    perfOrderHandle(currentPeriod) {
      this.$confirm(this.$t('bonus.generatePerformanceOrderHint'), this.$t('common.hint'), { // '确定对当前期进行生成业绩单操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
         return fetchPerfOrderList(currentPeriod)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getDialogData(this.currentPage, this.pageSize)
     }).catch((error) => {
         if(error !== 'cancel'){
             ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
         }
     })
    },
    initDataHandle(currentPeriod) {
      this.$confirm(this.$t('bonus.generatePerformanceSheetHint'), this.$t('common.hint'), { // '确定对当前期进行生成业绩单操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        return fetchInitData(currentPeriod)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getDialogData(this.currentPage, this.pageSize)
     }).catch((error) => {
         if(error !== 'cancel'){
             ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
         }
     })
    },
    perfPeriodHandle(currentPeriod) {
      this.$confirm(this.$t('bonus.generatePerformanceSheetHint'), this.$t('common.hint'), { // '确定对当前期进行生成业绩单操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        return fetchCalcPerfPeriod(currentPeriod)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getDialogData(this.currentPage, this.pageSize)
      }).catch((error) => {
          if(error !== 'cancel'){
              ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
          }
      })
    },
    pullPerfPeriodHandle(currentPeriod) {
      this.$confirm(this.$t('bonus.pullPerformanceSheetHint'), this.$t('common.hint'), { // '确定对当前期进行生成业绩单操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        return fetchPullPerfPeriod(currentPeriod)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getDialogData(this.currentPage, this.pageSize)
      }).catch((error) => {
          if(error !== 'cancel'){
              ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
          }
      })
    },
    calcBonusHandle(currentPeriod) {
      this.$confirm(this.$t('bonus.calculateBonusDataHint'), this.$t('common.hint'), { // '确定对当前期进行生成业绩单操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        return fetchCalcBonus(currentPeriod)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getDialogData(this.currentPage, this.pageSize)
     }).catch((error) => {
         if(error !== 'cancel'){
             ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
         }
     })
    },
    calcBonusRecordHandle(currentPeriod) {
      this.$confirm(this.$t('bonus.syncCalculateBonusRecordHint'), this.$t('common.hint'), { // '确定对当前期进行生成业绩单操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
         return fetchSyncCalcRecord(currentPeriod)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getDialogData(this.currentPage, this.pageSize)
      }).catch((error) => {
          if(error !== 'cancel'){
              ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
          }
      })
    },
    pullBonusHandle(currentPeriod) {
      this.$confirm(this.$t('bonus.calculateBonusDataHint'), this.$t('common.hint'), { // '确定对当前期进行生成业绩单操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        return fetchPullBonus(currentPeriod)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getDialogData(this.currentPage, this.pageSize)
      }).catch((error) => {
          if(error !== 'cancel'){
              ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
          }
      })
    },
    // trialCalcHandle (currentPeriod) {
    //   this.$confirm('Confirm to calculate bonus data for the current period？', this.$t('common.hint'), { // '确定对当前期进行生成业绩单操作？', '提示'
    //     confirmButtonText: this.$t('common.confirm'), // 确定
    //     cancelButtonText: this.$t('common.cancel'), // 取消
    //     type: 'warning'
    //   }).then(() => {
    //     return network.getData(`calc/trial-calc/${currentPeriod}`)
    //   }).then(response => {
    //     this.$message({
    //       message: response,
    //       type: 'success'
    //     })
    //     this.getDialogData(this.currentPage, this.pageSize)
    //   }).catch(response => {
    //   })
    // },

    getDialogData (period) {
      let paramsData = {
        page: this.currentDialogPage,
        pageSize: this.dialogPageSize,
      }
      fetchRecordList(period, paramsData).then(response => {
        this.dialogData = response.data.list
        this.dialogLoading = false;
      })
    },

    closeHandle (row) {
      this.$confirm(this.$t('bonus.manuallySealHint'), this.$t('common.hint'), { // '确定对当前期进行手动封期操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
         return fetchClosePeriod(row.PERIOD_NUM)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getData(this.currentPage, this.pageSize)
      }).catch((error) => {
          if(error !== 'cancel'){
              ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
          }
      })
    },
    calcHandle (period) {
      this.$confirm(this.$t('bonus.performSettlementOperationHint'), this.$t('common.hint'), { // '确定对当前期进行结算操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        return fetchCalcPeriod(period)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getData(this.currentPage, this.pageSize)
     }).catch((error) => {
         if(error !== 'cancel'){
             ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
         }
     })
    },
    perfHandle (row) {
      this.$confirm(this.$t('bonus.generatePerformanceSheetHint'), this.$t('common.hint'), { // '确定对当前期进行生成业绩单操作？', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        return fetchPerfPeriod(row.PERIOD_NUM)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getData(this.currentPage, this.pageSize)
     }).catch((error) => {
         if(error !== 'cancel'){
             ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
         }
     })
    },
    sentHandle (row) {
      this.$confirm(this.$t('bonus.spreadNetHint'), this.$t('common.hint'), { // '确定对当前期进行挂网操作？挂网后无法生成业绩单和结算', '提示'
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        return fetchSendPeriod(row.PERIOD_NUM)
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getData(this.currentPage, this.pageSize)
      }).catch((error) => {
          if(error !== 'cancel'){
              ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
          }
      })
    },
    doAutoWithdraw () {
      this.$confirm(this.$t('bonus.allWithdrawalHint'), this.$t('common.hint'), {
        confirmButtonText: this.$t('common.confirm'), // 确定
        cancelButtonText: this.$t('common.cancel'), // 取消
        type: 'warning'
      }).then(() => {
        //return network.getData(`bonus/auto-withdraw`)
        return fetchAutoWithdraw()
      }).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.getData(this.currentPage, this.pageSize)
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },
    viewHandle (row) {
      this.$router.push({path: `/bonus/period-detail/${row.PERIOD_NUM}`})
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleCurrentChange (page) {
      this.getData(page, this.pageSize)
    },
    handleSizeChange (pageSize) {
      this.getData(this.currentPage, pageSize)
    },
    handleFilterUser (filterData) {
      filterHelper.handleFilterUser(this, filterData)
    },
    handleFilter () {
      this.getData()
    },
    getData (page, pageSize) {
      let filterData = this.filterModel
      const paramsData = Object.assign({
        page: (page === null || page === undefined) ? 1 : page,
        pageSize: (pageSize === null || pageSize === undefined) ? this.pageSize : pageSize
      }, filterData)
      // fetchPeriod(this, 'bonus/period', page, pageSize, filterData, function (response) {
      //   vueObj.allData = response
      // }, null, ['PERF_PERCENT', 'CALC_PERCENT', 'SENT_PERCENT'])
      fetchPeriod(paramsData).then(response => {
        this.tableData = response.data.list
        this.tableHeaders = response.data.columnsShow ? response.data.columnsShow : []
        this.loading = false
        this.currentPage = page
        this.totalPages = parseInt(response.data.totalPages)
        this.totalCount = parseInt(response.data.totalCount)
        this.pageSize = pageSize
        this.allData = response
      },null, ['PERF_PERCENT', 'CALC_PERCENT', 'SENT_PERCENT'])
    },
    onMessageCallback (data) {
      if (data) {
        if (data.other && data.other.MODEL === 'PERIOD' && data.other.ID) {
          this.$set(this.percentList[data.other.FIELD], data.other.ID, data.percent)
        }
        if (data.other && data.other.MODEL === 'PERIOD' && data.percent === 100) {
          this.getData(this.currentPage, this.pageSize)
        }
      }
    },
    getWatTime (ts) {
      ts = parseInt(ts)
      if (ts) {
        return this.$moment(ts * 1000).utcOffset('+0100' ).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return ''
      }
    }
  }
}
</script>
<style>

.button{
  margin-bottom: 10px;
}
.el-table__body {
-webkit-border-horizontal-spacing: -30px;
-webkit-border-vertical-spacing: -30px;
}

</style>

<style scoped>
.el-divider--horizontal {
  margin: 12px 0 !important;
}
@media (max-width:740px) {
 /deep/  .el-dialog__body {

 }

}
</style>>