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> &lt;!&ndash; 已审核 &ndash;&gt;-->
        <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> &lt;!&ndash; 付款失败 &ndash;&gt;-->
        <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!=='6' && scope.row.AUDIT_STATUS!=='7' && (permission.hasPermission(`finance/withdraw-status`))">
              <el-button type="primary" size="small" @click.stop="">
                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, 3, 'Are you sure to approve the current withdrawal?')"-->
<!--                                  v-show="scope.row.AUDIT_STATUS==='0' && permission.hasPermission(`finance/withdraw-status`)"> &lt;!&ndash; 确定对当前提现进行审核通过操作？ &ndash;&gt;-->
<!--                  Approve &lt;!&ndash; 审核通过 &ndash;&gt;-->
<!--                </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 === '0' && permission.hasPermission(`finance/withdraw-status`)"> &lt;!&ndash; 确定对当前提现进行设为待付款操作？ &ndash;&gt;-->
<!--                  Approve&lt;!&ndash; 设为待付款 &ndash;&gt;-->
<!--                </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-pay`)"> <!-- 确定对当前提现进行设为已付款操作 -->
                  Paid<!--付款-->
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 3, 'Are you sure to set the current withdrawal as approved?')"
                                  v-show="scope.row.AUDIT_STATUS === '0' && permission.hasPermission(`finance/withdraw-status-audit`)"> <!-- 确定对当前提现进行设为已付款操作 -->
                  Approve<!--审核通过-->
                </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`)"> &lt;!&ndash; 付款失败备注 &ndash;&gt; &lt;!&ndash; 确定对当前提现进行设为付款失败操作？ &ndash;&gt;-->
<!--                  Failed&lt;!&ndash; 设为付款失败 &ndash;&gt;-->
<!--                </el-dropdown-item>-->
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 7, 'Determines that the current withdrawal is set to a withdrawal return operation?', 'Note on withdrawal return')"
                                  v-show="(scope.row.AUDIT_STATUS === '0') && permission.hasPermission(`finance/withdraw-status-return`)"><!-- 提现退回备注 -->
                  Return <!-- 该会员已提供发票，请确认是否处理提现退回 --> <!-- 设为提现退回 -->
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 7, 'The member has provided the invoice, please confirm whether to process the withdrawal return?', 'Note on withdrawal return')"
                                  v-show="(scope.row.AUDIT_STATUS === '1'||scope.row.AUDIT_STATUS === '2') && permission.hasPermission(`finance/withdraw-status-return`)"><!-- 提现退回备注 -->
                  Return <!-- 该会员已提供发票，请确认是否处理提现退回 --> <!-- 设为提现退回 -->
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 0, 'Are you sure to set the current withdrawal as canceled?', 'Note on withdrawal return')"
                                  v-show="scope.row.AUDIT_STATUS === '3' && permission.hasPermission(`finance/withdraw-status-cancel`)"> <!-- 确定对当前提现进行设为提现退回操作？ --> <!-- 提现退回备注 -->
                  Cancel <!-- 取消审核 -->
                </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!=='6' && 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="3" v-show="permission.hasPermission(`finance/withdraw-status-audit`)">Batch audit passed</el-dropdown-item> <!-- 批量审核通过-->
            <el-dropdown-item command="7" v-show="permission.hasPermission(`finance/withdraw-status-return`)">Batch return</el-dropdown-item> <!-- 批量退回 -->
          </el-dropdown-menu>
<!--          <el-dropdown-menu v-else-if="filterStatus==='2'" slot="dropdown">-->
<!--            <el-dropdown-item command="3">Batch set to be paid</el-dropdown-item>&lt;!&ndash; 批量设为待付款 &ndash;&gt;-->
<!--          </el-dropdown-menu>-->
          <el-dropdown-menu v-else-if="filterStatus==='3'" slot="dropdown">
            <el-dropdown-item command="6" v-show="permission.hasPermission(`finance/withdraw-status-pay`)">Batch set paid</el-dropdown-item><!--批量设为已付款-->
            <el-dropdown-item command="0" v-show="permission.hasPermission(`finance/withdraw-status-cancel`)">Batch return</el-dropdown-item><!--批量退回-->
          </el-dropdown-menu>
<!--          <el-dropdown-menu v-else-if="filterStatus==='6'" slot="dropdown">-->
<!--            <el-dropdown-item command="4">Batch set payment failure</el-dropdown-item>&lt;!&ndash;批量设为付款失败&ndash;&gt;-->
<!--          </el-dropdown-menu>-->
<!--          <el-dropdown-menu v-else-if="filterStatus==='4'" slot="dropdown">-->
<!--            <el-dropdown-item command="3">Batch set to be paid</el-dropdown-item>&lt;!&ndash; 批量设为待付款 &ndash;&gt;-->
<!--          </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" :page_sizes="pageSizes" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"></pagination>
        <el-dialog title="modify the withdrawal information" :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" label-width="180"> <!-- 预计付款日期 -->
              <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="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">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="180px" style="width:500px;" v-loading="dialogAuditLoading">
            <el-form-item label="Estimated date of payment" v-show="planPayDateVisible"> <!-- 预计付款日期 -->
              <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,
      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,
      planPayDateVisible: 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: 'Select the record to operate on', // 请选择要操作的记录
          type: 'warning'
        })
        return
      }
      this.handleAudit(null, command)
    },
    handleAudit (row = null, status) {
      let title = ''
      if (status === '2') {
        title = 'Be sure to pass the review？Note：'// 确定要通过审核？备注：
      } else if (status === '3') {
        title = 'Be sure to unpaid the review？Note：'// 确定要设为待付款？备注：
      } else if (status === '4') {
        title = 'Be sure to payment failure the review？Note：'// 确定要设为付款失败？备注：
      } else if (status === '6') {
        title = 'Be sure to paid the review？Note：'// 确定要设为已付款？备注：
      } else if (status === '7') {
        title = 'Be sure to return the review？Note：'// 确定要设为已退回？备注：
      }
      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('Are you sure you want to export the current data？', '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: 'Modifying data', // 正在修改数据
        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 = '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: 'Select the record to operate on', // 请选择数据
          type: 'warning'
        })
        return
      }
      this.auditRemark = remark
      this.dialogAuditFormVisible = true
      this.auditForm.auditTips = title
      this.auditForm.auditStatus = status
      if (status == '3') {
        this.planPayDateVisible = true
      } else {
        this.planPayDateVisible = false
      }
    },
    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>