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: 180px"
          placeholder="退款编号"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>订单ID:</span>
        <el-input
          v-model="listQuery.orderId"
          style="width: 180px"
          placeholder="订单ID"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>订单编号:</span>
        <el-input
          v-model="listQuery.orderNo"
          style="width: 180px"
          placeholder="订单编号"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input
          v-model="listQuery.clubName"
          style="width: 180px"
          placeholder="机构名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <!-- <div class="filter-control">
        <span>退款审核状态:</span>
        <el-select v-model="listQuery.status" style="width:180px;" 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="订单编号(ID)" align="center" prop="orderNo" width="200">
        <template slot-scope="{ row }">{{
          row.shopOrderReturnedList[0].shopOrderNo +
            "(" +
            row.shopOrderReturnedList[0].shopOrderId +
            ")"
        }}</template>
      </el-table-column>
      <el-table-column label="机构" align="center" prop="clubName" />
      <el-table-column label="退款金额" align="center" prop="refundFee" width="110">
        <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"
      >
        <template slot-scope="{ row }">
          <span>{{ row.applicationUserName ? row.applicationUserName : "--" }}</span>
        </template>
      </el-table-column>
      <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">
        <template slot-scope="{row}">
          <span>{{ row.reviewUserName ? row.reviewUserName : '--' }}</span>
        </template>
      </el-table-column>
      <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" 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">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="handleDetailes(row)"
          >查看详情</el-button>
          <el-button
            v-if="row.status == 2 && row.refundOnlineFee * 1 !== 0"
            type="warning"
            size="mini"
            @click="revokeRefund(row)"
          >撤销退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 10"
      :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, revokeApply } 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: 10,
        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
        console.log(this.list)
        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 }})
    },
    revokeRefund(row) {
      this.$confirm('确定撤销本次退款吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          try {
            await revokeApply({
              organizeId: 4,
              id: row.id,
              orderId: row.orderId,
              shopOrderId: row.shopOrderReturnedList[0].shopOrderId
            })
            this.getList()
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {})
    }
  }
}
</script>

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