ngds-backend-ele/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="$t('financial.all')" name="-1" :lazy="true"></el-tab-pane> <!-- 全部 -->
          <el-tab-pane :label="$t('financial.toBeReviewed')" name="0" :lazy="true"></el-tab-pane> <!-- 待审核 -->
          <el-tab-pane :label="$t('financial.reviewed')" name="2" :lazy="true"></el-tab-pane> <!-- 已审核 -->
          <el-tab-pane :label="$t('financial.toBePaid')" name="3" :lazy="true"></el-tab-pane> <!-- 待付款 -->
          <el-tab-pane :label="$t('financial.paid')" name="6" :lazy="true"></el-tab-pane> <!-- 已付款 -->
          <el-tab-pane :label="$t('financial.paymentFailed')" name="4" :lazy="true"></el-tab-pane> <!-- 付款失败 -->
          <el-tab-pane :label="$t('financial.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(true)">
          <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="fixedColumn" :label="$t('financial.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="">
                  {{ $t('financial.action') }}<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, $t('financial.approveWithdrawalNotice'))"
                                    v-show="scope.row.AUDIT_STATUS==='0' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 确定对当前提现进行审核通过操作？ -->
                                    {{ $t('financial.approve') }} <!-- 审核通过 -->
                  </el-dropdown-item>
                  <el-dropdown-item command="status"
                                    @click.native="handleStatusShow(scope.row, 3, $t('financial.setWithdrawalPaymentAction'))"
                                    v-show="scope.row.AUDIT_STATUS === '2' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 确定对当前提现进行设为待付款操作？ -->
                          {{ $t('financial.toBePaid') }}<!-- 设为待付款 -->
                  </el-dropdown-item>
                  <el-dropdown-item command="status"
                                    @click.native="handleStatusShow(scope.row, 6, $t('financial.setWithdrawalPaidNotice'))"
                                    v-show="scope.row.AUDIT_STATUS === '3' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 确定对当前提现进行设为已付款操作 -->
                          {{ $t('financial.paid') }}<!--设为已付款-->
                  </el-dropdown-item>
                  <el-dropdown-item command="status"
                                    @click.native="handleStatusShow(scope.row, 3, $t('financial.setWithdrawalPaymentAction'))"
                                    v-show="scope.row.AUDIT_STATUS === '4' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 确定对当前提现进行设为待付款操作？ -->
                          {{ $t('financial.toBePaid') }}<!-- 设为待付款 -->
                  </el-dropdown-item>
                  <el-dropdown-item command="status"
                                    @click.native="handleStatusShow(scope.row, 4, $t('financial.setPayFailedWithdrawal'), $t('common.note'))"
                                    v-show="scope.row.AUDIT_STATUS === '6' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 付款失败备注 --> <!-- 确定对当前提现进行设为付款失败操作？ -->
                          {{ $t('financial.withdrawSetFailed') }}<!-- 设为付款失败 -->
                  </el-dropdown-item>
                  <el-dropdown-item command="status"
                                    @click.native="handleStatusShow(scope.row, 7, $t('financial.setWithdrawalReturnNotice'), $t('financial.noteWithdrawalReturn'))"
                                    v-show="scope.row.AUDIT_STATUS === '0' && permission.hasPermission(`finance/withdraw-status`)"> <!-- 确定对当前提现进行设为提现退回操作？ --> <!-- 提现退回备注 -->
                                    {{ $t('financial.withdrawSetReturn') }} <!-- 设为提现退回 -->
                  </el-dropdown-item>
                  <el-dropdown-item command="status"
                                    @click.native="handleStatusShow(scope.row, 7, $t('financial.memberInvoiceWithdrawalReturnNotice'), $t('financial.noteWithdrawalReturn'))"
                                    v-show="(scope.row.AUDIT_STATUS === '1'||scope.row.AUDIT_STATUS === '2'||scope.row.AUDIT_STATUS === '3') && permission.hasPermission(`finance/withdraw-status`)"><!-- 提现退回备注 -->
                                    {{ $t('financial.withdrawSetReturn') }} <!-- 该会员已提供发票，请确认是否处理提现退回 --> <!-- 设为提现退回 -->
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div class="white-box-footer">
          <el-dropdown  style="margin-right:10px;" size="small" trigger="click" @command="handleMuli"
                       v-if="filterStatus!=='-1' && filterStatus!=='7' && (permission.hasPermission(`finance/withdraw-status`))">
            <el-button type="primary" size="small">
                {{ $t('financial.selectedData') }}<!--所选数据--><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">{{ $t('financial.batchAuditPassed') }}</el-dropdown-item> <!-- 批量审核通过-->
              <el-dropdown-item command="7">{{ $t('financial.batchReturn') }}</el-dropdown-item> <!-- 批量退回 -->
            </el-dropdown-menu>
            <el-dropdown-menu v-else-if="filterStatus==='2'" slot="dropdown">
              <el-dropdown-item command="3">{{ $t('financial.batchSetToBePaid') }}</el-dropdown-item><!-- 批量设为待付款 -->
            </el-dropdown-menu>
            <el-dropdown-menu v-else-if="filterStatus==='3'" slot="dropdown">
              <el-dropdown-item command="6">{{ $t('financial.batchSetPaid') }}</el-dropdown-item><!--批量设为已付款-->
              <el-dropdown-item command="7">{{ $t('financial.batchReturn') }}</el-dropdown-item><!--批量退回-->
            </el-dropdown-menu>
            <el-dropdown-menu v-else-if="filterStatus==='6'" slot="dropdown">
              <el-dropdown-item command="4">{{ $t('financial.batchSetPaymentFailure') }}</el-dropdown-item><!--批量设为付款失败-->
            </el-dropdown-menu>
            <el-dropdown-menu v-else-if="filterStatus==='4'" slot="dropdown">
              <el-dropdown-item command="3">{{ $t('financial.batchSetToBePaid') }}</el-dropdown-item><!-- 批量设为待付款 -->
            </el-dropdown-menu>
          </el-dropdown>
  
          <el-button type="success" size="small" @click="handleExport" style="margin-right:10px;"
                     v-show="permission.hasPermission(`finance/transfer-list-export`)">{{ $t('common.exportExcel') }}
          </el-button>
          <pagination :total="totalCount" :page_size="pageSize" :page_sizes="pageSizes" @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"></pagination>
          <el-dialog :title="$t('financial.modifyWithdrawalInfo')" :visible.sync="dialogEditFormVisible">
            <el-form :model="form" label-width="150px"  v-loading="dialogEditLoading">
              <el-form-item :label="$t('financial.memberCode')">
                <el-input v-model="form.baseInfo.USER_NAME" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('financial.memberName')">
                <el-input v-model="form.baseInfo.REAL_NAME" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('financial.idCardNumber')">
                <el-input v-model="form.baseInfo.ID_CARD" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('financial.registerType')">
                <el-select v-model="form.baseInfo.REG_TYPE" :placeholder="$t('financial.pleaseSelectRegisterType')" :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="$t('financial.withdrawAmount')">
                <el-input v-model="form.amount" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('financial.estimatedDatePayment')" label-width="180"> <!-- 预计付款日期 -->
                <el-date-picker
                        v-model="form.planPaidAt"
                        type="date"
                        :placeholder="$t('financial.selectDate')"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions0"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item :label="$t('table.remark')"> <!-- 备注 -->
                <el-input v-model="form.createRemark"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogEditFormVisible = false">{{ $t('common.cancel') }}<!-- 取 消 --></el-button>
              <el-button type="primary" @click.native="handleEdit">{{ $t('common.edit') }}<!-- 修 改 --></el-button>
            </div>
          </el-dialog><!--修改提现信息-->
          <el-dialog :title="$t('financial.reviewWithdrawalInfoNotice')" :visible.sync="dialogAuditFormVisible"> <!-- 审核提现信息 -->
            <el-alert
                    :title="auditForm.auditTips"
                    type="warning" :closable="false">
            </el-alert>
            <el-form :model="auditForm"  v-loading="dialogAuditLoading">
              <el-form-item :label="$t('financial.estimatedDatePayment')" v-show="filterStatus==='2' || filterStatus==='4'"> <!-- 预计付款日期 -->
                <el-date-picker
                        v-model="auditForm.planPaidAt"
                        type="date"
                        :placeholder="$t('financial.selectDate')"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions0"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item :label="$t('financial.datePayment')" v-show="filterStatus==='3'"><!-- 付款日期 -->
                <el-date-picker
                        v-model="auditForm.paidAt"
                        type="date"
                        :placeholder="$t('financial.selectDate')"
                        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">{{ $t('common.cancel') }}<!-- 取 消 --></el-button>
              <el-button type="primary" @click.native="handleStatus">{{ $t('common.submit') }}<!-- 提 交 --></el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import permission from '@/utils/permission'
  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'
  import { withdrawList, withdrawExport, multPoint, postWithdrawStatus } from '@/api/finance'
  import {getOperatingSystem} from "@/utils"

  export default {
    name: 'finance_withdraw',
    components: {FilterUser, Pagination},
  
    data () {
      return {
        fixedColumn:false, // 固定,当手机端不固定,pc固定
        activeName: 'all',
        tableHeaders: null,
        baseDecLevels: baseInfo.decLevels(),
        allData: null,
        tableData: null,
        loading: true,
        multipleSelection: [],
        currentPage: 1,
        totalPages: 1,
        totalCount: 1,
        pageSize: 20,
        pageSizes:  [1, 2, 5, 10, 20, 50, 100],
        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();
      let system =  getOperatingSystem()
        if (system == "Android" || system == 'ios') {
            this.fixedColumn = false
        } else {
            this.fixedColumn = 'right'
        }
      // 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: this.$t('financial.selectRecordOperateNotice'), // 请选择要操作的记录
            type: 'warning'
          })
          return;
        }
        this.handleAudit(null, command)
      },
      handleAudit (row = null, status) {
        let title = ''
        if (status === '2') {
          title = this.$t('financial.surePassReviewNoteNotice') // 确定要通过审核？备注：
        }else if(status === '3') {
          title = this.$t('financial.sureUnpaidReviewNotice') // 确定要设为待付款？备注：
        }else if(status === '4') {
          title = this.$t('financial.surePaymentFailureReview')// 确定要设为付款失败？备注：
        }else if(status === '6') {
          title = this.$t('financial.surePaidReviewNotice')// 确定要设为已付款？备注：
        }else if(status === '7') {
          title = this.$t('financial.sureReturnReviewNotice')//确定要设为已退回？备注：
        }
        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(this.$t('financial.exportNotice'), this.$t('common.hint'), {
          confirmButtonText:  this.$t('common.confirm'), // 确定
          cancelButtonText: this.$t('common.cancel'), // 取消
          type: 'warning'
        }).then(() => {
            withdrawExport(filterData).then(response => {
                this.$message({
                    message: response.data,
                    type: 'success'
                })
            }).catch(err => {
                this.$message({
                    message: err,
                    type: 'error'
                })
            })
        })
      },
      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: this.$t('financial.modifyData'),//正在修改数据
          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 = this.$t('table.remark')) { // 备注
        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: this.$t('financial.selectRecordOperateNotice'),// 请选择数据
            type: 'warning'
          })
          return
        }
        this.auditRemark = remark
        this.dialogAuditFormVisible = true
        this.auditForm.auditTips = title
        this.auditForm.auditStatus = status
      },
      handleStatus () {
        multPoint({opType: 2}).then(response => {
            this.auditForm.withdrawAudit = response.data.withdrawAudit
            this.$confirm(this.$t('financial.changeStateSelectedDataNotice'), this.$t('common.hint'), {
                confirmButtonText: this.$t('common.confirm'),
                cancelButtonText: this.$t('common.cancel'),
                type: 'warning'
            }).then(() => {
                postWithdrawStatus(this.auditForm).then(response => {
                    this.dialogAuditFormVisible = false
                    this.$message({
                        message: response.data,
                        type: 'success'
                    })
                    this.getData(this.currentPage, this.pageSize)
                }).catch(err => {
                    this.dialogAuditFormVisible = false
                    this.$message({
                        message: err,
                        type: 'error'
                    })
                })
          })
        })
      },
      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
        const paramsData = Object.assign({
        page: (page === null || page == undefined) ? 1 : page,
        pageSize: (pageSize === null || pageSize == undefined) ? vueObj.pageSize : pageSize
        }, filterData)
        withdrawList(paramsData).then(response => {
            vueObj.tableHeaders = response.data.columnsShow ? response.data.columnsShow : []
            vueObj.tableData = response.data.list
            vueObj.filterTypes = response.data.filterTypes
            vueObj.currentPage = page
            vueObj.totalPages = parseInt(response.data.totalPages)
            vueObj.totalCount = parseInt(response.data.totalCount)
            vueObj.pageSize = pageSize
            this.loading = false
        }).catch(err => {
            console.log('err=============' + err)
            this.loading = false
        })
      },
      onMessageCallback() {
        this.getData(this.currentPage, this.pageSize)
      },
    }
  }
  </script>
  
  <style scoped>
  /deep/ .el-date-editor.el-input {
    width:100% !important;
  }
 
  </style>