ngds/backendEle/src/views/finance/withdraw.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-tabs v-model="filterStatus" @tab-click="handleFilterStatusClick">
        <el-tab-pane label="All" name="-1" :lazy="true"></el-tab-pane> <!-- 全部 -->
        <el-tab-pane label="To be reviewed" name="0" :lazy="true"></el-tab-pane> <!-- 待审核 -->
        <el-tab-pane label="Reviewed" name="2" :lazy="true"></el-tab-pane> <!-- 已审核 -->
        <el-tab-pane label="To be paid" name="3" :lazy="true"></el-tab-pane> <!-- 待付款 -->
        <el-tab-pane label="Paid" name="6" :lazy="true"></el-tab-pane> <!-- 已付款 -->
        <el-tab-pane label="Payment failed" name="4" :lazy="true"></el-tab-pane> <!-- 付款失败 -->
        <el-tab-pane label="Returned" name="7" :lazy="true"></el-tab-pane> <!-- 已退回 -->
      </el-tabs>
      <div class="filter-box">
        <filter-user :filter-types.sync="filterTypes" @select-value="handleFilterUser"></filter-user>
      </div>
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange" :height="tool.getTableHeight()">
        <el-table-column type="selection" width="55" v-if="tableHeaders"></el-table-column>
        <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''">
          <template slot-scope="scope">
            <template v-if="scope.row[tableHeader.index].other.tag" >
              <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
            </template>
            <template v-else-if="scope.row[tableHeader.index].other.progress" >
              <el-progress type="circle" :percentage="Number.parseInt(percentList['MOVE_PERCENT'][scope.row.ID])"
                           :width="50"
                           :stroke-width="3"></el-progress>
            </template>
            <template v-else>
              <div v-html="scope.row[tableHeader.index].value"></div>
            </template>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="Action" width="180"> <!-- 操作 -->
          <template slot-scope="scope">
            <el-dropdown size="small" trigger="click"
                         v-if="scope.row.AUDIT_STATUS!=='7' && (permission.hasPermission(`finance/withdraw-status`))">
              <el-button type="primary" size="small" @click.stop="">
                Operate on this data<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <!--<el-dropdown-item command="add"-->
                <!--@click.native="handleAddInvoiceShow(scope.row)"-->
                <!--v-show="(scope.row.AUDIT_STATUS==='0'||scope.row.AUDIT_STATUS==='1') && (permission.hasPermission(`finance/invoice-audit-add`)||permission.hasPermission(`finance/invoice-audit-edit`))">-->
                <!--补录发票信息-->
                <!--</el-dropdown-item>-->
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 2, 'Are you sure to approve the current withdrawal?')"
                                  v-show="scope.row.AUDIT_STATUS==='0' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 确定对当前提现进行审核通过操作？ -->
                  Approve <!-- 审核通过 -->
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 3, 'Are you sure to set the current withdrawal as payment action?')"
                                  v-show="scope.row.AUDIT_STATUS === '2' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 确定对当前提现进行设为待付款操作？ -->
                  To be paid<!-- 设为待付款 -->
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 6, 'Are you sure to set the current withdrawal as paid?确定对当前提现进行设为已付款操作？')"
                                  v-show="scope.row.AUDIT_STATUS === '3' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 确定对当前提现进行设为已付款操作 -->
                  Paid<!--设为已付款-->
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 3, 'Are you sure to set the current withdrawal as payment action?？')"
                                  v-show="scope.row.AUDIT_STATUS === '4' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 确定对当前提现进行设为待付款操作？ -->
                  To be paid<!-- 设为待付款 -->
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 4, 'Are you sure to set payment failure for the current withdrawal?', 'Note')"
                                  v-show="scope.row.AUDIT_STATUS === '6' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 付款失败备注 --> <!-- 确定对当前提现进行设为付款失败操作？ -->
                  Failed<!-- 设为付款失败 -->
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 7, '确定对当前提现进行设为提现退回操作？', '提现退回备注')"
                                  v-show="scope.row.AUDIT_STATUS === '0' && permission.hasPermission(`finance/withdraw-status`)">
                  Return <!-- 设为提现退回 -->
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 7, '该会员已提供发票，请确认是否处理提现退回？', '提现退回备注')"
                                  v-show="(scope.row.AUDIT_STATUS === '1'||scope.row.AUDIT_STATUS === '2'||scope.row.AUDIT_STATUS === '3') && permission.hasPermission(`finance/withdraw-status`)">
                  Return <!-- 设为提现退回 -->
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">

        <el-dropdown size="small" trigger="click" @command="handleMuli"
                     v-if="filterStatus!=='-1' && filterStatus!=='7' && (permission.hasPermission(`finance/withdraw-status`))">
          <el-button type="primary" size="small">
            Selected data<!--所选数据--><i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu v-if="filterStatus==='0'" slot="dropdown">
            <el-dropdown-item command="2">Batch audit passed</el-dropdown-item> <!-- 批量审核通过-->
            <el-dropdown-item command="7">Batch return</el-dropdown-item> <!-- 批量退回 -->
          </el-dropdown-menu>
          <el-dropdown-menu v-else-if="filterStatus==='2'" slot="dropdown">
            <el-dropdown-item command="3">批量设为待付款</el-dropdown-item>
          </el-dropdown-menu>
          <el-dropdown-menu v-else-if="filterStatus==='3'" slot="dropdown">
            <el-dropdown-item command="6">批量设为已付款</el-dropdown-item>
            <el-dropdown-item command="7">批量退回</el-dropdown-item>
          </el-dropdown-menu>
          <el-dropdown-menu v-else-if="filterStatus==='6'" slot="dropdown">
            <el-dropdown-item command="4">批量设为付款失败</el-dropdown-item>
          </el-dropdown-menu>
          <el-dropdown-menu v-else-if="filterStatus==='4'" slot="dropdown">
            <el-dropdown-item command="3">批量设为待付款</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-button type="success" size="small" @click="handleExport"
                   v-show="permission.hasPermission(`finance/transfer-list-export`)">Export Excel
        </el-button>
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"></pagination>
        <el-dialog title="修改提现信息" :visible.sync="dialogEditFormVisible">
          <el-form :model="form" label-width="150px" style="width:500px;" v-loading="dialogEditLoading">
            <el-form-item label="会员编号">
              <el-input v-model="form.baseInfo.USER_NAME" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="会员姓名">
              <el-input v-model="form.baseInfo.REAL_NAME" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="form.baseInfo.ID_CARD" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="注册类型">
              <el-select v-model="form.baseInfo.REG_TYPE" placeholder="请选择注册类型" :disabled="true">
                <el-option v-for="(item,key) in regTypes" :label="item.TYPE_NAME" :value="item.ID"
                           :key="item.ID"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="提现金额">
              <el-input v-model="form.amount" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="Estimated date of payment"> <!-- 预计付款日期 -->
              <el-date-picker
                      v-model="form.planPaidAt"
                      type="date"
                      placeholder="Select date"
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions0"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="Note"> <!-- 备注 -->
              <el-input v-model="form.createRemark"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEditFormVisible = false">Cancel<!-- 取 消 --></el-button>
            <el-button type="primary" @click.native="handleEdit">Edit<!-- 修 改 --></el-button>
          </div>
        </el-dialog>
        <el-dialog title="Review withdrawal info" :visible.sync="dialogAuditFormVisible"> <!-- 审核提现信息 -->
          <el-alert
                  :title="auditForm.auditTips"
                  type="warning" :closable="false">
          </el-alert>
          <el-form :model="auditForm" label-width="150px" style="width:500px;" v-loading="dialogAuditLoading">
            <el-form-item label="Estimated date of payment" v-show="filterStatus==='2' || filterStatus==='4'"> <!-- 预计付款日期 -->
              <el-date-picker
                      v-model="auditForm.planPaidAt"
                      type="date"
                      placeholder="Select date"
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions0"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="Date of payment" v-show="filterStatus==='3'"><!-- 付款日期 -->
              <el-date-picker
                      v-model="auditForm.paidAt"
                      type="date"
                      placeholder="Select date"
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions1"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="auditRemark">
              <el-input v-model="auditForm.createRemark"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAuditFormVisible = false">Cancel<!-- 取 消 --></el-button>
            <el-button type="primary" @click.native="handleStatus">Submit<!-- 提 交 --></el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import permission from '@/utils/permission'
import network from '@/utils/network'
import tool from '@/utils/tool'
import FilterUser from '@/components/FilterUser'
import baseInfo from '@/utils/baseInfo'
import Pagination from '@/components/Pagination'
import filterHelper from '../../utils/filterHelper'
export default {
    name: 'finance_withdraw',
    components: {FilterUser, Pagination},

    data() {
        return {
            activeName: 'all',
            tableHeaders: null,
            baseDecLevels: baseInfo.decLevels(),

            allData: null,
            tableData: null,
            loading: true,
            multipleSelection: [],
            currentPage: 1,
            totalPages: 1,
            totalCount: 1,
            pageSize: 20,
            tool: tool,
            permission: permission,
            regTypes: baseInfo.regTypes(),
            dialogEditFormVisible: false,
            dialogEditLoading: false,
            dialogAuditFormVisible: false,
            dialogAuditLoading: false,
            dialogAddInvoiceVisible: false,
            dialogAddInvoiceLoading: false,
            auditId: null,
            form: {
                id: null,
                baseInfo: {USER_NAME: null, REG_TYPE: null},
                amount: null,
                planPaidAt: null,
                paidAt: new Date(),
                createRemark: null,
            },
            invoiceForm: {
                id: null,
                withdrawId: null,
                withdrawSn: null,
                invoiceCode: null,
                invoiceNum: null,
                invoiceDate: null,
                amount: null,
                taxRate: null,
                purchaserName: null,
                purchaserRegisterNum: null,
                purchaserAddress: null,
                purchaserBank: null,
                sellerName: null,
                sellerRegisterNum: null,
                sellerAddress: null,
                sellerBank: null,
                itemName: null,
                invoiceRemark: null,
                createRemark: null,
            },
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                }
            },
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            auditRemark: '',
            auditForm: {
                auditTips: '',
                auditStatus: null,
                selectedIds: [],
                planPaidAt: null,
                createRemark: null,
                withdrawAudit: '',
            },
            auditTips: '',
            filterTypes: {},
            filterModel: {},
            excelForm: {
                rowCount: '',
            },
            filterStatus: '0',
        }
    },
  mounted () {
      this.getData();
   /* if (permission.hasPermission(`finance/withdraw-7`)) {
      this.activeName = 'seven'
    }
    if (permission.hasPermission(`finance/withdraw-4`)) {
      this.activeName = 'four'
    }
    if (permission.hasPermission(`finance/withdraw-6`)) {
      this.activeName = 'six'
    }
    if (permission.hasPermission(`finance/withdraw-3`)) {
      this.activeName = 'three'
    }
    if (permission.hasPermission(`finance/withdraw-2`)) {
      this.activeName = 'two'
    }
    if (permission.hasPermission(`finance/withdraw-1`)) {
      this.activeName = 'one'
    }
    if (permission.hasPermission(`finance/withdraw-0`)) {
      this.activeName = 'zero'
    }
    if (permission.hasPermission(`finance/withdraw-0`) && permission.hasPermission(`finance/withdraw-1`) && permission.hasPermission(`finance/withdraw-2`) && permission.hasPermission(`finance/withdraw-3`) && permission.hasPermission(`finance/withdraw-6`) && permission.hasPermission(`finance/withdraw-4`) && permission.hasPermission(`finance/withdraw-7`)) {
      this.activeName = 'all'
    }*/
  },

      methods: {
          handleMuli(command) {
              if (this.multipleSelection.length < 1) {
                  this.$message({
                      message: '请选择要操作的记录',
                      type: 'warning'
                  })
                  return;
              }
              this.handleAudit(null, command)
          },
          handleAudit(row = null, status) {
              let title = ''
              if (status === '2') {
                  title = '确定要通过审核？备注：'
              }else if(status === '3'){
                  title = '确定要设为待付款？备注：'
              }else if(status === '4'){
                  title = '确定要设为付款失败？备注：'
              }else if(status === '6'){
                  title = '确定要设为已付款？备注：'
              }else if(status === '7'){
                  title = '确定要设为已退回？备注：'
              }
              this.handleStatusShow(row,status,title);
          },
          handleExpand(row, event, column) {
              this.$refs.multipleTable.toggleRowExpansion(row)
          },
          handleExport() {
              let filterData = this.filterModel
              // 如果有选中,导出选中ID,否则导出全部
              if (this.multipleSelection.length > 0) {
                  let selectedIds = []
                  for (let val of this.multipleSelection) {
                      selectedIds.push(val.ID)
                  }

                  filterData.selectedIds = selectedIds
              }
              this.$confirm('确定要导出当前表格中的提现数据吗？', 'Hint', {
                  confirmButtonText: 'confirm', // 确定
                  cancelButtonText: 'cancel', // 取消
                  type: 'warning'
              }).then(() => {
                  return network.getData('finance/withdraw-export', filterData)
              }).then(response => {
                  this.$message({
                      message: response,
                      type: 'success'
                  })
              }).catch(response => {
              })
          },
          handleAdd() {
              this.$router.push({path: `/finance/withdraw-add`})
          },
          handleExcel() {
          },
          handleExcelPaidFalse() {
              window.open(CDN_BASE_URL + `/files/bonus_withdraw_paid_false.xlsx`)
          },
          handleEditShow(row) {
              this.dialogEditLoading = true
              this.auditId = row.ID
              this.dialogEditFormVisible = true
              let vueObj = this
              network.getData('finance/withdraw-get', {id: this.auditId}).then(response => {
                  vueObj.dialogEditLoading = false
                  vueObj.form = response
              })
          },
          handleEdit() {
              this.dialogEditFormVisible = false
              this.$message({
                  message: '正在修改数据',
                  type: 'info'
              })
              this.loading = true
              let path = 'finance/withdraw-edit'
              network.postData(path, this.form).then(response => {
                  this.$message({
                      message: response,
                      type: 'success'
                  })
                  this.getData(this.currentPage, this.pageSize)
              }).catch(response => {
              })
          },
          handleStatusShow(row, status, title, remark = 'Note') { // 备注
              this.auditForm = {
                  auditTips: '',
                  auditStatus: null,
                  selectedIds: [],
                  planPaidAt: null,
                  paidAt: new Date(),
                  remark: null,
              }
              if (row === null) {
                  for (let val of this.multipleSelection) {
                      this.auditForm.selectedIds.push(val.ID)
                  }
              } else {
                  this.auditForm.selectedIds.push(row.ID)
              }
              if (this.auditForm.selectedIds.length === 0) {
                  this.$message({
                      message: '请选择数据',
                      type: 'warning'
                  })
                  return
              }
              this.auditRemark = remark
              this.dialogAuditFormVisible = true
              this.auditForm.auditTips = title
              this.auditForm.auditStatus = status
          },
          handleStatus() {
              network.postData('finance/mult-point', {opType: 2}).then(response => {
                  this.auditForm.withdrawAudit = response.withdrawAudit
                  this.$confirm('Are you sure to change the state of the selected data?', 'Hint', { // 确定要对所选数据修改状态吗？
                      confirmButtonText: 'confirm', // 确定
                      cancelButtonText: 'cancel', // 取消
                      type: 'warning'
                  }).then(() => {
                      return network.postData('finance/withdraw-status', this.auditForm)
                  }).then(response => {
                      this.dialogAuditFormVisible = false
                      this.$message({
                          message: response,
                          type: 'success'
                      })
                      this.getData(this.currentPage, this.pageSize)
                  }).catch(response => {
                      this.dialogAuditFormVisible = false
                  })
              })
          },
          handleAddInvoiceShow(row) {
              this.dialogAddInvoiceVisible = true
              this.auditId = row.INVOICE_ID
              this.dialogAddInvoiceLoading = true
              let vueObj = this
              network.getData('finance/invoice-audit-get', {id: this.auditId}).then(response => {
                  vueObj.dialogAddInvoiceLoading = false
                  vueObj.invoiceForm = response
                  this.invoiceForm.withdrawSn = row.SN
                  this.invoiceForm.withdrawId = row.ID
              })
          },
          handleAddInvoice() {
              let path = 'finance/invoice-audit-add'
              if (this.invoiceForm.id) path = 'finance/invoice-audit-edit'
              network.postData(path, this.invoiceForm).then(response => {
                  this.$message({
                      message: response,
                      type: 'success'
                  })
                  this.dialogAddInvoiceVisible = false
                  this.getData(this.currentPage, this.pageSize)
              }).catch(response => {
              })
          },
          handleSelectionChange(val) {
              this.multipleSelection = val
          },
          handleCurrentChange(page) {
              this.getData(page, this.pageSize)
          },
          handleSizeChange(pageSize) {
              this.getData(this.currentPage, pageSize)
          },
          handleFilterStatusClick(tab, event) {
              filterHelper.clearFilterOption(this)
              this.getData()
          },
          handleFilterUser(filterData) {
              filterHelper.handleFilterUser(this, filterData)
          },
          handleFilter() {
              this.getData()
          },
          getData(page, pageSize) {
              let filterData = this.filterModel
              filterData.filterStatus = this.filterStatus != '-1' ? `=,${this.filterStatus}` : ''
              let vueObj = this
              network.getPageData(this, 'finance/withdraw', page, pageSize, filterData, function (response) {
                  vueObj.allData = response
                  vueObj.filterTypes = response.filterTypes
              })
          },
          onMessageCallback() {
              this.getData(this.currentPage, this.pageSize)
          },
      }
}
</script>

<style scoped>

</style>