退款订单异步导出

src/views/order/refund/index.vue

@@ -1,25 +1,57 @@
 <template>
   <div class="divBox">
     <div class="selCard">
-      <el-form size="small" inline :model="tableFrom" ref="searchForm" label-width="90px">
+      <el-form
+        size="small"
+        inline
+        :model="tableFrom"
+        ref="searchForm"
+        label-width="90px"
+      >
         <el-form-item label="退款单状态：" class="width100" prop="status">
-          <el-radio-group v-model="tableFrom.status" type="button" @change="getList(1)">
+          <el-radio-group
-            <el-radio-button label>全部 {{ '(' +orderChartType.all?orderChartType.all:0 + ')' }}</el-radio-button>
+            v-model="tableFrom.status"
-            <el-radio-button
+            type="button"
-              label="0"
+            @change="getList(1)"
-            >待审核 {{ '(' +orderChartType.audit?orderChartType.audit:0+ ')' }}</el-radio-button>
+          >
-            <el-radio-button
+            <el-radio-button label
-              label="-1"
+              >全部
-            >审核未通过 {{ '(' +orderChartType.refuse?orderChartType.refuse:0+ ')' }}</el-radio-button>
+              {{
-            <el-radio-button
+                "(" + orderChartType.all ? orderChartType.all : 0 + ")"
-              label="1"
+              }}</el-radio-button
-            >审核通过 {{ '(' +orderChartType.agree?orderChartType.agree:0+ ')' }}</el-radio-button>
+            >
-            <el-radio-button
+            <el-radio-button label="0"
-              label="2"
+              >待审核
-            >待收货 {{ '(' +orderChartType.backgood?orderChartType.backgood:0+ ')' }}</el-radio-button>
+              {{
-            <el-radio-button
+                "(" + orderChartType.audit ? orderChartType.audit : 0 + ")"
-              label="3"
+              }}</el-radio-button
-            >已完成 {{ '(' +orderChartType.end?orderChartType.end:0+ ')' }}</el-radio-button>
+            >
+            <el-radio-button label="-1"
+              >审核未通过
+              {{
+                "(" + orderChartType.refuse ? orderChartType.refuse : 0 + ")"
+              }}</el-radio-button
+            >
+            <el-radio-button label="1"
+              >审核通过
+              {{
+                "(" + orderChartType.agree ? orderChartType.agree : 0 + ")"
+              }}</el-radio-button
+            >
+            <el-radio-button label="2"
+              >待收货
+              {{
+                "(" + orderChartType.backgood
+                  ? orderChartType.backgood
+                  : 0 + ")"
+              }}</el-radio-button
+            >
+            <el-radio-button label="3"
+              >已完成
+              {{
+                "(" + orderChartType.end ? orderChartType.end : 0 + ")"
+              }}</el-radio-button
+            >
           </el-radio-group>
         </el-form-item>
         <el-form-item label="时间选择：">
@@ -31,7 +63,7 @@
             type="datetimerange"
             placement="bottom-end"
             placeholder="自定义时间"
-            style="width: 280px;"
+            style="width: 280px"
             :picker-options="pickerOptions"
             @change="onchangeTime"
           />
@@ -113,13 +145,17 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" size="small" @click="getList(1)">搜索</el-button>
+          <el-button type="primary" size="small" @click="getList(1)"
+            >搜索</el-button
+          >
           <el-button size="small" @click="searchReset()">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <el-card class="mt14">
-      <el-button size="small" type="primary" class="mb20" @click="exports">导出列表</el-button>
+      <el-button size="small" type="primary" class="mb20" @click="exports"
+        >导出列表</el-button
+      >
       <el-table
         v-loading="listLoading"
         :data="tableData.data"
@@ -129,7 +165,11 @@
       >
         <el-table-column type="expand">
           <template slot-scope="props">
-            <el-form label-position="left" inline class="demo-table-expand demo-table-expands">
+            <el-form
+              label-position="left"
+              inline
+              class="demo-table-expand demo-table-expands"
+            >
               <el-form-item label="退款商品总价：">
                 <span>{{ getTotal(props.row.refundProduct) }}</span>
               </el-form-item>
@@ -150,53 +190,87 @@
         </el-table-column>
         <el-table-column label="退款单号" min-width="170">
           <template slot-scope="scope">
-            <span style="display: block;" v-text="scope.row.refund_order_sn" />
+            <span style="display: block" v-text="scope.row.refund_order_sn" />
-            <span v-show="scope.row.is_del > 0" style="color: #ED4014;display: block;">用户已删除</span>
+            <span
+              v-show="scope.row.is_del > 0"
+              style="color: #ed4014; display: block"
+              >用户已删除</span
+            >
           </template>
         </el-table-column>
         <el-table-column prop="order.order_sn" label="订单号" min-width="130" />
-        <el-table-column prop="user.nickname" label="用户信息" min-width="130" />
+        <el-table-column
-        <el-table-column prop="merchant.mer_name" label="商户名称" min-width="130" />
+          prop="user.nickname"
-        <el-table-column prop="merchant.ext.com.name" label="商户名称" min-width="130" />
+          label="用户信息"
+          min-width="130"
+        />
+        <el-table-column
+          prop="merchant.mer_name"
+          label="商户名称"
+          min-width="130"
+        />
+        <el-table-column
+          prop="merchant.ext.com.name"
+          label="商户名称"
+          min-width="130"
+        />
         <el-table-column prop="mer_name" label="商户类别" min-width="90">
           <template slot-scope="scope">
-            <span v-if="scope.row.merchant" class="spBlock">{{ scope.row.merchant.is_trader ? '自营' : '非自营' }}</span>
+            <span v-if="scope.row.merchant" class="spBlock">{{
+              scope.row.merchant.is_trader ? "自营" : "非自营"
+            }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="refund_price" label="退款金额" min-width="130" />
         <el-table-column label="退款类型" min-width="80">
           <template slot-scope="scope">
-            <span >{{ scope.row.refund_type==1?'退款':'退款退货' }}</span>
+            <span>{{ scope.row.refund_type == 1 ? "退款" : "退款退货" }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="nickname" label="商品信息" min-width="330">
           <template slot-scope="scope">
             <div
-              v-for="(val, i ) in scope.row.refundProduct"
+              v-for="(val, i) in scope.row.refundProduct"
               :key="i"
               class="tabBox acea-row row-middle"
             >
               <div class="demo-image__preview">
                 <el-image
                   :src="val.product && val.product.cart_info.product.image"
-                  :preview-src-list="[val.product && val.product.cart_info.product.image]"
+                  :preview-src-list="[
+                    val.product && val.product.cart_info.product.image,
+                  ]"
                 />
               </div>
-              <span
+              <span class="tabBox_tit"
-                class="tabBox_tit"
+                >{{
-              >{{ val.product && val.product.cart_info.product.store_name + ' | ' }}{{ val.product && val.product.cart_info.productAttr.sku }}</span>
+                  val.product &&
-              <span
+                  val.product.cart_info.product.store_name + " | "
-                class="tabBox_pice"
+                }}{{
-              >{{ '￥'+ val.product.cart_info.productAttr.price + ' x '+ val.product.product_num }}</span>
+                  val.product && val.product.cart_info.productAttr.sku
+                }}</span
+              >
+              <span class="tabBox_pice">{{
+                "￥" +
+                val.product.cart_info.productAttr.price +
+                " x " +
+                val.product.product_num
+              }}</span>
             </div>
           </template>
         </el-table-column>
 
         <el-table-column prop="serviceScore" label="订单状态" min-width="250">
           <template slot-scope="scope">
-            <span style="display: block">{{ scope.row.status | orderRefundFilter }}</span>
+            <span style="display: block">{{
-            <span style="display: block">退款原因：{{ scope.row.refund_message }}</span>
+              scope.row.status | orderRefundFilter
-            <span style="display: block">状态变更时间：{{ scope.row.status_time }}</span>
+            }}</span>
+            <span style="display: block"
+              >退款原因：{{ scope.row.refund_message }}</span
+            >
+            <span style="display: block"
+              >状态变更时间：{{ scope.row.status_time }}</span
+            >
           </template>
         </el-table-column>
         <el-table-column label="操作" min-width="90" fixed="right">
@@ -205,10 +279,28 @@
               type="text"
               size="small"
               @click="onOrderDetail(scope.row.order.order_sn)"
-            >订单详情</el-button>
+              >订单详情</el-button
-            <el-button v-if="scope.row.status === 0" type="text" size="small" @click="onOrderStatus(scope.row.refund_order_id)">退款</el-button>
+            >
-            <el-button v-if="scope.row.status === 0" type="text" size="small" @click="onOrdermanual(scope.row.refund_order_id)">手动退款</el-button>
+            <el-button
-            <el-button type="text" size="small" @click="onRefundOrderDetail(scope.row.refund_order_id)">退款单详情</el-button>
+              v-if="scope.row.status === 0"
+              type="text"
+              size="small"
+              @click="onOrderStatus(scope.row.refund_order_id)"
+              >退款</el-button
+            >
+            <el-button
+              v-if="scope.row.status === 0"
+              type="text"
+              size="small"
+              @click="onOrdermanual(scope.row.refund_order_id)"
+              >手动退款</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="onRefundOrderDetail(scope.row.refund_order_id)"
+              >退款单详情</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -227,7 +319,11 @@
     <!--导出订单列表-->
     <file-list ref="exportList" />
     <!--详情-->
-     <details-from ref="orderDetail" :order-datalist="orderDatalist" @get-logistics="openLogistics" />
+    <details-from
+      ref="orderDetail"
+      :order-datalist="orderDatalist"
+      @get-logistics="openLogistics"
+    />
     <el-dialog
       v-if="dialogLogistics"
       title="物流查询"
@@ -246,7 +342,6 @@
 </template>
 
 <script>
-
 import {
   refundorderListApi,
   orderUpdateApi,
@@ -254,23 +349,24 @@ import {
   refundorderDetailApi,
   refundorderExpressApi,
   onOrdermanualApi,
-  orderDeliveryApi, exportRefundOrderApi
+  orderDeliveryApi,
+  exportRefundOrderApi,
 } from "@/api/order";
-import createWorkBook from '@/utils/newToExcel.js';
+import createWorkBook from "@/utils/newToExcel.js";
-import detailsFrom from './refundDetail'
+import detailsFrom from "./refundDetail";
-import logisticsFrom from '../logistics'
+import logisticsFrom from "../logistics";
 import { fromList } from "@/libs/constants.js";
-import fileList from '@/components/exportFile/fileList'
+import fileList from "@/components/exportFile/fileList";
 import { roterPre } from "@/settings";
-import timeOptions from '@/utils/timeOptions';
+import timeOptions from "@/utils/timeOptions";
 export default {
-  components: { fileList,detailsFrom,logisticsFrom },
+  components: { fileList, detailsFrom, logisticsFrom },
   name: "OrderRefund",
   data() {
     return {
       pickerOptions: timeOptions,
       orderId: 0,
-      logisticsName: 'refund',
+      logisticsName: "refund",
       roterPre: roterPre,
       tableData: {
         data: [],
@@ -278,24 +374,26 @@ export default {
       },
       listLoading: true,
       orderStatusOptions: {
-        '交易完成': '3',
+        交易完成: "3",
       },
       tableFrom: {
-        refund_order_sn: this.$route.query.refund_order_sn ? this.$route.query.refund_order_sn : "",
+        refund_order_sn: this.$route.query.refund_order_sn
+          ? this.$route.query.refund_order_sn
+          : "",
         order_sn: "",
         status: "",
         date: "",
         page: 1,
         limit: 20,
-        is_trader: '',
+        is_trader: "",
-        refund_type:'',
+        refund_type: "",
-        user_type:'',
+        user_type: "",
-        order_status:''
+        order_status: "",
       },
       refundUserList: [
-        { value: 1, label: '用户' },
+        { value: 1, label: "用户" },
-        { value: 3, label: '商户' },
+        { value: 3, label: "商户" },
-        { value: 4, label: '平台' }
+        { value: 4, label: "平台" },
       ],
       orderChartType: {},
       timeVal: [],
@@ -316,7 +414,7 @@ export default {
       orderDatalist: null,
       orderDetails: {},
       result: [],
-      dialogLogistics:false
+      dialogLogistics: false,
     };
   },
   mounted() {
@@ -325,7 +423,7 @@ export default {
     } else {
       this.tableFrom.order_sn = "";
     }
-    this.getList('');
+    this.getList("");
   },
   // 被缓存接收参数
   activated() {
@@ -334,69 +432,71 @@ export default {
     } else {
       this.tableFrom.order_sn = "";
     }
-    this.getList('');
+    this.getList("");
   },
   methods: {
     // 退款
     onOrderStatus(id) {
-      this.$modalForm(refundorderStatusApi(id)).then(() => this.getList(''))
+      this.$modalForm(refundorderStatusApi(id)).then(() => this.getList(""));
     },
-    onOrdermanual(id){
+    onOrdermanual(id) {
-      this.$confirm('请确认该订单已线下退款，请谨慎操作', '提示', {
+      this.$confirm("请确认该订单已线下退款，请谨慎操作", "提示", {
-          confirmButtonText: '确定',
+        confirmButtonText: "确定",
-          cancelButtonText: '取消',
+        cancelButtonText: "取消",
-          type: 'warning'
+        type: "warning",
       }).then(() => {
-          onOrdermanualApi(id).then((res)=>{
+        onOrdermanualApi(id)
-            this.$message.success(res.message)
+          .then((res) => {
-            this.getList('');
+            this.$message.success(res.message);
-          }).catch(({ message }) => {
+            this.getList("");
-            this.$message.error(message)
-          });
           })
+          .catch(({ message }) => {
+            this.$message.error(message);
+          });
+      });
     },
     // 详情
     onRefundOrderDetail(id) {
-      this.orderId = id
+      this.orderId = id;
-      this.$refs.orderDetail.dialogVisible = true
+      this.$refs.orderDetail.dialogVisible = true;
-      this.loading = true
+      this.loading = true;
       refundorderDetailApi(id)
-        .then(res => {
+        .then((res) => {
-          this.orderDatalist = res.data
+          this.orderDatalist = res.data;
-          this.loading = false
+          this.loading = false;
-          this.$refs.orderDetail.onOrderLog(id)
+          this.$refs.orderDetail.onOrderLog(id);
         })
         .catch(({ message }) => {
-          this.loading = false
+          this.loading = false;
-          this.$message.error(message)
+          this.$message.error(message);
-        })
+        });
     },
     openLogistics(row) {
-      this.orderDetails = row
+      this.orderDetails = row;
-      this.getOrderData(row.refund_order_id)
+      this.getOrderData(row.refund_order_id);
-      this.dialogLogistics = true
+      this.dialogLogistics = true;
     },
     handleClose() {
-      this.dialogLogistics = false
+      this.dialogLogistics = false;
-      this.dialogConfirm = false
+      this.dialogConfirm = false;
     },
     // 获取订单物流信息
     getOrderData(id) {
       refundorderExpressApi(id)
-        .then(async res => {
+        .then(async (res) => {
-          this.result = res.data
+          this.result = res.data;
-        })
-        .catch(res => {
-          this.$message.error(res.message)
         })
+        .catch((res) => {
+          this.$message.error(res.message);
+        });
     },
     /**重置 */
-    searchReset(){
+    searchReset() {
-      this.timeVal = []
+      this.timeVal = [];
-      this.tableFrom.date = ""
+      this.tableFrom.date = "";
-      this.$refs.searchForm.resetFields()
+      this.$refs.searchForm.resetFields();
-      this.tableFrom.order_sn = ""
+      this.tableFrom.order_sn = "";
-      this.getList(1)
+      this.getList(1);
     },
     // 订单详情
     onOrderDetail(order_sn) {
@@ -408,54 +508,64 @@ export default {
       });
     },
     async exports() {
-      let excelData = JSON.parse(JSON.stringify(this.tableFrom)), data = []
+      let excelData = JSON.parse(JSON.stringify(this.tableFrom));
-      excelData.page = 1
+      this.exportRecord(excelData);
-      excelData.limit = 200
-      let pageCount = 1
-      let lebData = {};
-      for (let i = 0; i < pageCount; i++) {
-        lebData = await this.downData(excelData)
-        pageCount = Math.ceil(lebData.count/excelData.limit)
-        if (lebData.export.length) {
-          data = data.concat(lebData.export)
-          excelData.page++
-        }  
-      }
-      createWorkBook(lebData.header, lebData.title, data, lebData.foot,lebData.filename);
-      return
     },
     /**订单列表 */
     downData(excelData) {
       return new Promise((resolve, reject) => {
         exportRefundOrderApi(excelData).then((res) => {
-          return resolve(res.data)
+          return resolve(res.data);
-        })
+        });
-      })
+      });
     },
     // 导出
-    exportRecord() {
+    exportRecord(excelData) {
       exportRefundOrderApi(this.tableFrom)
-        .then((res) => {
+        .then(async (res) => {
+          if (res.data.filename) {
+            let data = [];
+            excelData.page = 1;
+            excelData.limit = 200;
+            let pageCount = 1;
+            let lebData = {};
+            for (let i = 0; i < pageCount; i++) {
+              lebData = await this.downData(excelData);
+              pageCount = Math.ceil(lebData.count / excelData.limit);
+              if (lebData.export.length) {
+                data = data.concat(lebData.export);
+                excelData.page++;
+              }
+            }
+            createWorkBook(
+              lebData.header,
+              lebData.title,
+              data,
+              lebData.foot,
+              lebData.filename
+            );
+            return;
+          }
           const h = this.$createElement;
           this.$msgbox({
-            title: '提示',
+            title: "提示",
-            message: h('p', null, [
+            message: h("p", null, [
-              h('span', null, '文件正在生成中，请稍后点击"'),
+              h("span", null, '文件正在生成中，请稍后点击"'),
-              h('span', { style: 'color: teal' }, '导出记录'),
+              h("span", { style: "color: teal" }, "导出记录"),
-              h('span', null, '"查看~ '),
+              h("span", null, '"查看~ '),
             ]),
-            confirmButtonText: '我知道了',
+            confirmButtonText: "我知道了",
-          }).then(action => {
+          }).then((action) => {
-
+            this.$router.push({ path: this.roterPre + "/group/exportList" });
           });
         })
         .catch((res) => {
-          this.$message.error(res.message)
+          this.$message.error(res.message);
-        })
+        });
     },
     // 导出列表
     getExportFileList() {
-      this.$refs.exportList.exportFileList()
+      this.$refs.exportList.exportFileList();
     },
     getTotal(row) {
       let sum = 0;
@@ -466,7 +576,7 @@ export default {
     },
     pageChangeLog(page) {
       this.tableFromLog.page = page;
-      this.getList('');
+      this.getList("");
     },
     handleSizeChangeLog(val) {
       this.tableFromLog.limit = val;
@@ -477,22 +587,22 @@ export default {
       this.tableFrom.date = tab;
       this.tableFrom.page = 1;
       this.timeVal = [];
-      this.getList('');
+      this.getList("");
     },
     // 具体日期
     onchangeTime(e) {
       this.timeVal = e;
       this.tableFrom.date = e ? this.timeVal.join("-") : "";
       this.tableFrom.page = 1;
-      this.getList('');
+      this.getList("");
     },
     // 编辑
     edit(id) {
-      this.$modalForm(orderUpdateApi(id)).then(() => this.getList(''));
+      this.$modalForm(orderUpdateApi(id)).then(() => this.getList(""));
     },
     // 发货
     send(id) {
-      this.$modalForm(orderDeliveryApi(id)).then(() => this.getList(''));
+      this.$modalForm(orderDeliveryApi(id)).then(() => this.getList(""));
     },
     // 列表
     getList(num) {
@@ -513,7 +623,7 @@ export default {
     },
     pageChange(page) {
       this.tableFrom.page = page;
-      this.getList('');
+      this.getList("");
     },
     handleSizeChange(val) {
       this.tableFrom.limit = val;