erp/resources/frontend/src/views/plat/afterSaleOrder.vue

<template>
  <div class="pageBox">
    <div class="cardBox">
      <div class="searchBox">
        <div class="row">
          <span>店铺：</span>
          <el-select v-model="filter.shop_id" placeholder="店铺">
            <el-option v-for="item in shopsList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="row">
          <span>售后单状态：</span>
          <el-select v-model="filter.after_sales_status" placeholder="请选择">
            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="row">
          <span>订单编号：</span>
          <el-input v-model="filter.order_sn" clearable></el-input>
        </div>
        <div class="row">
          <span>售后单编号：</span>
          <el-input v-model="filter.after_sales_biz_sn" clearable></el-input>
        </div>
        <div class="row">
          <span>创建时间：</span>
          <el-date-picker
            v-model="addTime"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 340px">
          </el-date-picker>
        </div>
        <div class="row">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">筛选</el-button>
          <el-button type="warning" :loading="exportLoading" @click="handleExport" icon="el-icon-download">数据导出</el-button>
        </div>
      </div>
    </div>
    <el-card>
      <el-table v-loading="loading" :data="afterList" style="width: 100%" border>
        <el-table-column prop="after_sales_biz_sn" label="售后单编号" />
        <el-table-column prop="order_sn" label="父订单编号" />
        <el-table-column label="店铺">
          <template slot-scope="scope">
            <span>{{ Shops[scope.row.shop_id] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="refund_amount" label="退款金额" />
        <el-table-column prop="refund_shipping_amount" label="用户申请退运费金额" />
        <el-table-column prop="reason" label="退款原因" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="退款图片" width="220">
          <template slot-scope="scope">
            <div class="imgBox" v-if="scope.row.image_list">
              <el-image v-for="(it, i) in scope.row.image_list" :key="i" :src="it" :preview-src-list="scope.row.image_list" class="img"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apply_type" label="申请类型">
          <template slot-scope="scope">
            <span>{{ APPLYTYPE[scope.row.apply_type] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="售后单状态">
          <template slot-scope="scope">
            <span>{{ STATUS[scope.row.after_sales_status] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="after_sale_created_at" label="售后单创建时间" />
      </el-table>
      <div class="page-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="prev, pager, next, sizes, total, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
import { getAfterSaleOrders, exportAfterOrder } from "@/api/plat"
import { storeList } from "@/api/shop"
import dayjs from 'dayjs'

export default {
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      afterList: [],
      filter: {
        shop_id: '',
        after_sales_status: '',
        order_sn: '',
        after_sales_biz_sn: ''
      },
      shopsList: [],
      Shops: {},
      addTime: [],
      statusList: [
        { id: 0, name: '未发起售后' },
        { id: 1, name: '退款中' },
        { id: 2, name: '退款成功' },
        { id: 3, name: '待处理' },
        { id: 4, name: '拒绝退款' },
        { id: 6, name: '待(顾客)退货' },
        { id: 7, name: '待(团长)确认退货' },
        { id: 8, name: '(顾客)撤销' },
        { id: 9, name: '(系统)关闭' }
      ],
      STATUS: {
        '0': '未发起售后',
        '1': '退款中',
        '2': '退款成功',
        '3': '待处理',
        '4': '拒绝退款',
        '6': '待(顾客)退货',
        '7': '待(团长)确认退货',
        '8': '(顾客)撤销',
        '9': '(系统)关闭'
      },
      APPLYTYPE: {
        0: '仅退款',
        1: '退货退款'
      },
      exportLoading: false
    }
  },
  methods: {
    fetchList() {
      this.loading = true
      let params = {
        page: this.page,
        per_page: this.pageSize,
        ...this.filter,
        created_at_start: this.addTime ? this.addTime[0] : '',
        created_at_end: this.addTime ? this.addTime[1] : ''
      }
      getAfterSaleOrders(params).then((res) => {
        this.afterList = res.data.data
        this.total = res.data.meta.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.page = 1
      this.pageSize = val
      this.fetchList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.fetchList()
    },
    handleSearch() {
      this.page = 1
      this.fetchList()
    },
    getShopsList() {
      let params = {
        page: 1,
        per_page: 999
      }
      storeList(params).then((res) => {
        this.shopsList = res.data.data
        res.data.data.forEach((it) => {
          this.Shops[it.id] = it.name
        })
      })
    },
    handleExport() {
      this.exportLoading = true
      let params = {
        ...this.filter,
        created_at_start: this.addTime ? this.addTime[0] : '',
        created_at_end: this.addTime ? this.addTime[1] : '',
        is_export: 1
      }
      // window.open("/api/plat_after_sale_orders?" + this.objectToQueryString(params))
      exportAfterOrder(params).then((res) => {
        console.log(res.data)
        this.downLoadXls(res.data)
        this.$message({ type: 'success', message: '导出成功！' })
        this.exportLoading = false
      }).catch(() => {
        this.exportLoading = false
      })
    },
    downLoadXls(response) {
      const content = response
      const blob = new Blob([content])
      const today = new Date().toLocaleDateString()
      const fileName = `售后单列表${today}.xlsx`
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
    objectToQueryString(obj) {
      return Object.keys(obj)
        .map(key => encodeURIComponent(key) + '=' + (obj[key] ? encodeURIComponent(obj[key]) : ''))
        .join('&');
    }
  },
  mounted() {
    let end = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
    let start = dayjs().subtract(30, 'day').format('YYYY-MM-DD') + ' 00:00:00'
    this.addTime = [start, end]
    this.getShopsList()
    this.fetchList()
  }
}
</script>

<style lang="scss" scoped>
  .searchBox{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
    .row{
      font-size: 14px;
      margin-bottom: 20px;
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
  }
  .imgBox{
    .img{
      width: 55px;
      height: 55px;
      border-radius: 4px;
      margin: 3px;
    }
  }
</style>