caimei-mall-admin-ui/src/views/order/refund.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="searchForm" :inline="true" class="demo-form-inline">
        <el-form-item label="退款编号:" style="width:215px;float: left;">
          <el-input v-model="listQuery.returnedNo" placeholder="请输入退款编号" style="width: 140px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="订单ID:" style="width:180px;float: left;">
          <el-input v-model="listQuery.orderID" type="number" placeholder="请输入订单ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="订单编号:" style="width:215px;float: left;">
          <el-input v-model="listQuery.orderNo" placeholder="请输入订单编号" style="width: 140px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="买家:" style="width:190px;float: left;">
          <el-input v-model="listQuery.userName" placeholder="请输入买家名称" style="width: 140px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="退款审核状态:" style="width:240px;float: left;">
          <el-select v-model="listQuery.status" placeholder="退款审核状态" clearable style="width: 130px" class="filter-item" value="" @change="handleFilter">
            <el-option label="待审核" value="1" />
            <el-option label="审核通过" value="2" />
            <el-option label="审核不通过" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item class="date-box" label="申请时间:" style="width:405px;float: left;">
          <el-date-picker
            v-model="listQuery.beginReturnTime"
            style="width:150px"
            type="date"
            placeholder="请选择时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="handleFilter"
          />
          至
          <el-date-picker
            v-model="listQuery.endReturnTime"
            style="width:150px"
            type="date"
            placeholder="请选择时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="handleFilter"
          />
        </el-form-item>
        <el-form-item style="width:100px;float: left;">
          <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ ((pageNum-1)*listQuery.pageSize)+scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="退款编号" align="center" prop="returnedNo" />
      <el-table-column label="退款审核状态" align="center" prop="status">
        <template slot-scope="{row}">
          <el-tag v-if="row.status*1===1" type="warning" size="small">待审核</el-tag>
          <el-tag v-if="row.status*1===2" type="success" size="small">审核通过</el-tag>
          <el-tag v-if="row.status*1===3" type="danger" size="small">审核不通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="买家" align="center" prop="userName" />
      <el-table-column label="订单编号(ID)" align="center" prop="orderNo">
        <template slot-scope="{row}">{{ row.orderNo + '(' + row.orderID + ')' }}</template>
      </el-table-column>
      <el-table-column label="退款金额" align="center" prop="refundFee">
        <template slot-scope="{row}">{{ row.refundFee | toThousandFloatFilter }}</template>
      </el-table-column>
      <el-table-column label="退款方式" align="center" prop="returnedWay">
        <template slot-scope="{row}">
          <template v-if="row.returnedWay*1===4">未支付无退款</template>
          <template v-else-if="row.returnedWay*1===1">
            <span v-if="row.refundBalanceFee*1 !== 0">余额账户:¥{{ row.refundBalanceFee | toThousandFloatFilter }}</span>
            <span v-if="row.refundOnlineFee*1 !== 0">线上退回:¥{{ row.refundOnlineFee | toThousandFloatFilter }}</span>
            <span v-if="row.refundOfflineFee*1 !== 0">线下转账:¥{{ row.refundOfflineFee | toThousandFloatFilter }}</span>
          </template>
          <template v-else>----</template>
        </template>
      </el-table-column>
      <el-table-column label="申请人" align="center" prop="applicationUserName" />
      <el-table-column align="center" label="申请时间" prop="returnTime">
        <template v-if="row.returnTime" slot-scope="{row}">
          <span>{{ row.returnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核人" align="center" prop="reviewUserName" />
      <el-table-column align="center" label="审核时间" prop="confirmReturnTime">
        <template v-if="row.confirmReturnTime" slot-scope="{row}">
          <span>{{ row.confirmReturnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <router-link :to="'/order/refund/detail/' + row.id + '?orderID=' + row.orderID "><el-button type="primary" size="mini" style="width: 80px;margin:5px;">查看详情</el-button></router-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <template>
      <el-backtop style="right: 40px; bottom: 40px;">
        <i class="el-icon-upload2" />
      </el-backtop>
    </template>
  </div>
</template>

<script>
import { getRefundList } from '@/api/order'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      list: null,
      pageNum: 0,
      listLoading: true,
      total: 0,
      searchTimeVal: '',
      listQuery: {
        index: 1,
        pageSize: 20,
        organizeID: this.$store.getters.organizeID,
        returnedNo: '',
        orderID: '',
        orderNo: '',
        userName: '',
        beginReturnTime: '',
        endReturnTime: '',
        status: ''
      }
    }
  },
  computed: {
    organizeID() {
      return this.$store.getters.organizeID
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getRefundList(this.listQuery).then(response => {
        this.list = response.data.results
        this.total = response.data.totalRecord
        this.pageNum = response.data.index
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleFilter() {
      this.fetchData()
    }
  }
}
</script>

<style scoped>
  .el-form-item{
    margin-bottom: 0;
  }
  .date-box{
    margin-right:0;
  }
</style>