浏览代码

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
订单记录新增导出

1004749546@qq.com 4 年之前
父节点
当前提交
797bbbf09a
共有 2 个文件被更改,包括 71 次插入18 次删除
  1. 10 0
      src/api/order.js
  2. 61 18
      src/views/Order/OrderCenter.vue

+ 10 - 0
src/api/order.js

@@ -55,3 +55,13 @@ export const orderTotal = params => {
     method: 'post'
   })
 }
+// 导出
+export const exportOrder = params => {
+  const url = 'order/export'
+  return axios({
+    url: url,
+    data: params,
+    method: 'post',
+    responseType: 'blob'
+  })
+}

+ 61 - 18
src/views/Order/OrderCenter.vue

@@ -4,46 +4,47 @@
     <div class="orderCenter-searchForm">
       <a-form ref="searchForm">
         <a-row :gutter="48">
-          <a-col :span="8">
-            <a-form-item label="下单时间" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
+          <a-col :span="6">
+            <a-form-item label="下单时间" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
               <a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="网点名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+            <a-form-item label="网点名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
               <a-select placeholder="请选择" allowClear v-model="storeId" mode="multiple">
                 <a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+            <a-form-item label="单号" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
               <a-input v-model.trim="searchForm.orderNo" placeholder="请输入" allowClear />
             </a-form-item>
           </a-col>
-          <a-col :span="4">
-            <a-button style="margin-right: 10px;" type="primary" @click="handleSearch">查询</a-button>
-            <a-button type="" @click="handleRest">重置</a-button>
-          </a-col>
-        </a-row>
-        <a-row :gutter="48">
-          <a-col :span="8">
-            <a-form-item label="服务项目" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
+          <a-col :span="6">
+            <a-form-item label="服务项目" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
               <a-select placeholder="请选择" allowClear v-model="searchForm.itemId">
                 <a-select-option v-for="item in itemOptionData" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
               </a-select>
             </a-form-item>
           </a-col>
+        </a-row>
+        <a-row :gutter="48">
           <a-col :span="6">
-            <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+            <a-form-item label="手机号码" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
               <a-input v-model.trim="searchForm.customerMobile" placeholder="请输入" allowClear :maxLength="11" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+            <a-form-item label="状态" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
               <v-select v-model="searchForm.orderStatus" ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear></v-select>
             </a-form-item>
           </a-col>
+          <a-col :span="12">
+            <a-button style="margin-right: 10px;" type="primary" @click="handleSearch">查询</a-button>
+            <a-button type="" @click="handleRest">重置</a-button>
+            <a-button type="" :loading="loading" class="export-btn" @click="handleExport">导出</a-button>
+          </a-col>
         </a-row>
       </a-form>
     </div>
@@ -92,13 +93,14 @@ import {
   STable,
   VSelect
 } from '@/components'
-import getDate from '../../libs/getDate.js'
+import getDate from '@/libs/getDate.js'
 import {
   orderCenterList,
   itemList,
   storeList,
-  orderTotal
-} from '../../api/order.js'
+  orderTotal,
+  exportOrder
+} from '@/api/order.js'
 import OrderDetailModal from './OrderDetailModal.vue'
 import moment from 'moment'
 export default {
@@ -121,6 +123,7 @@ export default {
         customerMobile: '', // 手机号码
         orderStatus: '' // 状态
       },
+      loading: false, // 导出loading
       orderTotal: '', // 合计开单数量
       paymentAmountTotal: '', // 合计实收金额
       itemOptionData: [], // 服务项目数据
@@ -323,6 +326,41 @@ export default {
       // this.$refs.searchForm.resetFields()
       this.$refs.table.refresh()
       this.getTotal()
+    },
+    // 导出
+    handleExport () {
+      this.loading = true
+      const params = {
+        beginDate: this.searchForm.beginDate == null ? getDate.getToday().starttime : this.searchForm.beginDate,
+        endDate: this.searchForm.endDate == null ? getDate.getToday().endtime : this.searchForm.endDate,
+        storeIdList: this.storeId,
+        orderNo: this.searchForm.orderNo,
+        itemId: this.searchForm.itemId,
+        customerMobile: this.searchForm.customerMobile,
+        orderStatus: this.searchForm.orderStatus
+      }
+      exportOrder(params).then(res => {
+        console.log(res)
+        this.loading = false
+        this.download(res)
+      })
+    },
+    download (data) {
+      if (!data) {
+        return
+      }
+      const url = window.URL.createObjectURL(new Blob([data]))
+      const link = document.createElement('a')
+
+      link.style.display = 'none'
+      link.href = url
+      const a = moment().format('YYYYMMDDhhmmss')
+      const fname = '订单记录-' + a
+      console.log(fname, '111111')
+      link.setAttribute('download', fname + '.xlsx')
+
+      document.body.appendChild(link)
+      link.click()
     }
   },
   beforeRouteEnter (to, from, next) {
@@ -342,7 +380,12 @@ export default {
 			margin-bottom: 10px;
 		}
 	}
-
+  .export-btn{
+    background-color: #ff9900;
+    border-color: #ff9900;
+    color: #fff;
+    margin-left: 10px;
+  }
 	// 合计
 	.total {
 		margin: 15px 0 25px;