juipvue/src/components/order/cashOut.vue

<template>
<div style="height:95%">
  <el-input
    placeholder="请输入内容"
    style="width:18%;"
    size='small'
    v-model="search_info">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
  <el-button size='small' @click="search()" type="primary" icon="el-icon-search">搜索</el-button>
  <el-table :row-class-name="tableRowClassName" :show-overflow-tooltip="true" :data="tableData" height="calc(100% - 120px)" style="width: 100%">
    <el-table-column prop="username" label="用户" width="180"> </el-table-column>
    <el-table-column prop="money" label="提现金额" width="180"> </el-table-column>
    <el-table-column prop="apply_reason" label="提现理由"> </el-table-column>
    <el-table-column prop="alipay_account" label="支付宝账号"> </el-table-column>
    <el-table-column prop="casn_no" label="账单号"> </el-table-column>
    <el-table-column prop="alipay_no" label="支付宝转帐订单号"> </el-table-column>
    <el-table-column prop="remark" label="备注"> </el-table-column>
    <el-table-column prop="status" label="状态"> </el-table-column>
    <el-table-column prop="op_user" label="处理人"> </el-table-column>
    <el-table-column show-overflow-tooltip prop="create_time" label="提现时间"> </el-table-column>
    <el-table-column show-overflow-tooltip prop="update_time" label="处理时间"> </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">处理</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    v-if="count !== 0"
    :current-page="pageNum"
    style="top:91%"
    layout="prev, pager, next"
    :page-size = "50"
    @prev-click="prev_page"
    @next-click="next_page"
    @current-change="handleCurrentChange"
    :total="count">
  </el-pagination>

  <el-dialog title="详细记录" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="用户" :label-width="formLabelWidth">
        <el-input disabled v-model="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="提现金额" :label-width="formLabelWidth">
        <el-input disabled v-model="form.money" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="提现理由" :label-width="formLabelWidth">
        <el-input disabled v-model="form.apply_reason" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="支付宝账号" :label-width="formLabelWidth">
        <el-input disabled v-model="form.alipay_account" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="备注" :label-width="formLabelWidth" :rules="[
        { required: true, message: '备注不能为空'}
      ]">
        <el-input v-model="form.remark" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="status" label="处理结果" :label-width="formLabelWidth">
        <el-select v-model="form.status" placeholder="请选择处理结果">
          <el-option label="同意" value="1"></el-option>
          <el-option label="拒绝" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit(form)">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      count: 0,
      pageNum: 1,
      dialogFormVisible: false,
      form: {},
      formLabelWidth: '120px',
      search_info: ''
    }
  },

  created () {
    this.$store.commit('setCurrentNav', '订单管理>>提现处理')
    this.getData()
  },
  methods: {
    handleClick (row) {
      this.dialogFormVisible = true
      this.form = row
    },
    tableRowClassName ({row, rowIndex}) {
      if (row.status === '同意') {
        return 'success-row'
      } else if (row.status === '拒绝') {
        return 'error-row'
      }
      return ''
    },
    getData () {
      this.$api.get('http://autophp.wyk/order/CashOutAdmin/getData').then(res => {
        this.tableData = res.data
        this.count = parseInt(res.count)
      })
    },
    prev_page () {
      this.$api.get('http://autophp.wyk/order/CashOutAdmin/pageList', {page: this.pageNum}).then(res => {
        this.tableData = res.data
      })
    },
    next_page () {
      this.$api.get('http://autophp.wyk/order/CashOutAdmin/pageList', {page: this.pageNum}).then(res => {
        this.tableData = res.data
      })
    },
    handleCurrentChange: function (currentPage) {
      this.pageNum = currentPage
      this.$api.get('http://autophp.wyk/order/CashOutAdmin/pageList', {page: this.pageNum}).then(res => {
        this.tableData = res.data
      })
    },
    submit (info) {
      if (info.remark == null) {
        this.$message.error('请填写备注')
        return false
      }
      this.$api.post('http://autophp.wyk/order/CashOutAdmin/handle', {info}).then(res => {
        this.dialogFormVisible = false
        this.form.status = this.dealStatus(this.form.status)
      })
    },
    search () {
      this.$api.post('http://autophp.wyk/order/CashOutAdmin/search', {username: this.search_info}).then(res => {
        this.tableData = res.data
        this.count = parseInt(res.count)
      })
    },
    dealStatus (info) {
      switch (info) {
        case '0':
          info = '待处理'
          break
        case '1':
          info = '同意'
          break
        case '2':
          info = '拒绝'
          break
      }
      return info
    }
  }
}
</script>

<style>

  .el-table .success-row {
    background: #d7f8c5;
  }

  .el-table .error-row {
    background: #f1c6c6;
  }
</style>