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

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>退款编号:</span>
        <el-input v-model="listQuery.returnedNo" style="width:130px;" placeholder="退款编号" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>订单ID:</span>
        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>订单编号:</span>
        <el-input v-model="listQuery.orderNo" style="width:130px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="机构名称" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>退款审核状态:</span>
        <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="待审核" value="1" />
          <el-option label="审核通过" value="2" />
          <el-option label="审核不通过" value="3" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>申请时间:</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
      </div>
    </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 label="退款编号" align="center" prop="returnedNo" />
      <el-table-column label="退款审核状态" align="center" prop="status" width="90">
        <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" min-width="130">
        <template slot-scope="{row}">
          <template v-if="row.returnedWay*1===4">未支付无退款</template>
          <template v-else-if="row.returnedWay*1===1">
            <p v-if="row.refundBalanceFee*1 !== 0">余额账户:¥{{ row.refundBalanceFee | toThousandFloatFilter }}</p>
            <p v-if="row.refundOnlineFee*1 !== 0">线上退回:¥{{ row.refundOnlineFee | toThousandFloatFilter }}</p>
            <p v-if="row.refundOfflineFee*1 !== 0">线下转账:¥{{ row.refundOfflineFee | toThousandFloatFilter }}</p>
          </template>
          <template v-else>----</template>
        </template>
      </el-table-column>
      <el-table-column label="申请人" align="center" prop="applicationUserName" width="100" />
      <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" width="100" />
      <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">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleDetailes(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <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 pickerOptions from '@/utils/time-picker.js'
export default {
  data() {
    return {
      time: '',
      pickerOptions,
      list: null,
      listLoading: true,
      total: 0,
      searchTimeVal: '',
      listQuery: {
        index: 1,
        pageSize: 20,
        organizeId: this.$store.getters.organizeId,
        returnedNo: '',
        orderID: '',
        orderNo: '',
        userName: '',
        beginReturnTime: '',
        endReturnTime: '',
        status: ''
      }
    }
  },
  computed: {

  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      if (this.time && this.time.length > 0) {
        this.listQuery.beginReturnTime = this.time[0]
        this.listQuery.endReturnTime = this.time[1]
      } else {
        this.listQuery.beginReturnTime = ''
        this.listQuery.endReturnTime = ''
      }
      try {
        const res = await getRefundList(this.listQuery)
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.listLoading = false
      } catch (error) {
        console.log('error', error)
        this.listLoading = false
      }
    },
    handleFilter() {
      this.getList()
    },
    handleDetailes(row) {
      this.$router.push({ path: '/order/refund-detail', query: { id: row.id }})
    }
  }
}
</script>

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