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-input v-model="listQuery.returnedNo" placeholder="退款编号" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-input v-model="listQuery.orderID" placeholder="订单ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-input v-model="listQuery.orderNo" placeholder="订单编号" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-input v-model="listQuery.userName" placeholder="买家" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <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 label="  申请时间:">
          <el-date-picker
            v-model="listQuery.beginReturnTime"
            style="width:150px"
            type="date"
            placeholder="选择日期"
            format="yyyy/MM/dd"
            value-format="yyyy-MM-dd"
          />
          至
          <el-date-picker
            v-model="listQuery.endReturnTime"
            style="width:150px"
            type="date"
            placeholder="选择日期"
            format="yyyy/MM/dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      </el-form>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width:100%;margin-top:20px;"
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index }}
        </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 | toThousandFilter }}</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 | toThousandFilter }}</span>
            <span v-if="row.refundOnlineFee*1 !== 0">线上退回:¥{{ row.refundOnlineFee | toThousandFilter }}</span>
            <span v-if="row.refundOfflineFee*1 !== 0">线下转账:¥{{ row.refundOfflineFee | toThousandFilter }}</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 slot-scope="{row}">
          <i class="el-icon-time" />
          <span>{{ row.returnTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核人" align="center" prop="reviewUserName" />
      <el-table-column align="center" label="审核时间" prop="confirmReturnTime">
        <template slot-scope="{row}">
          <i class="el-icon-time" />
          <span>{{ row.confirmReturnTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</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.orderID "><el-button type="primary" size="small">查看详情</el-button></router-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />

  </div>
</template>

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

<style scoped>

</style>