更新

src/components/AiDownload.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="ai-download">
+      <a @click="onExport">
+        <slot slot v-if="isHasSlot"></slot>
+      </a>
+      <template v-if="!isHasSlot">
+        <el-button :disabled="disabled" type="primary" @click="onExport">导出</el-button>
+      </template>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'AiDownload',
+  
+    props: {
+      url: {
+        type: String,
+        default: '',
+        required: true
+      },
+  
+      timeout: {
+        type: Number,
+        default: 80000
+      },
+  
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+  
+      params: {
+        type: Object
+      },
+  
+      fileName: {
+        type: String,
+        default: '文件'
+      },
+  
+      suffixName: {
+        type: String,
+        default: 'xls'
+      }
+    },
+  
+    computed: {
+      isHasSlot() {
+        return this.$slots.default
+      }
+    },
+  
+    methods: {
+      onExport() {
+        if (this.disabled) {
+          return this.$message.error('暂无数据')
+        }
+        this.$http.post(this.url, this.params, {
+          responseType: 'blob',
+          params: this.params,
+          timeout: this.timeout
+        }).then(res => {
+          if (res?.type == "application/json") {
+            let reader = new FileReader()
+            reader.readAsText(res, "utf-8")
+            reader.onload = e => {
+              if (e.target.readyState === 2) {
+                let ret = JSON.parse(e.target.result)
+                if (ret?.code == 0) {
+                  this.$message.success(ret.msg)
+                } else this.$message.error(ret.msg)
+              }
+            }
+          } else {
+            const link = document.createElement('a')
+            let blob = new Blob([res], {type: res.type})
+            link.style.display = 'none'
+            link.href = URL.createObjectURL(blob)
+            link.setAttribute('download', this.fileName + '.' + this.suffixName)
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+          }
+        })
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  
+  </style>

src/view/ExportSaleData.vue

@@ -59,7 +59,7 @@
           <p>{{ inventoryMoeny }}</p>
         </div>
         <div class="item">
-          <h2>已收货总量</h2>
+          <h2>已收货总量(件)</h2>
           <p>{{ deliveryTotal }}</p>
         </div>
         <div class="item">

src/view/shipping/ShippingList.vue

@@ -28,21 +28,23 @@
           <p>{{ lastSyncDate }}</p>
         </div>
         <div class="item">
-          <h2>发货总量</h2>
+          <h2>发货总量(件)</h2>
           <p>{{ totalDelivery }}</p>
         </div>
       </div>
       <ai-card title="数据明细" style="padding-bottom: 40px;">
-        <!--<template #right>
-          <json-excel
-            :data="last30Daylist"
-            :fields="last30DaysJsonFields"
-            :before-generate = "startDownload"
-            name="近30天销售数据.xls"
-            worksheet="近30天销售统计">
-            <el-button type="primary">导出数据</el-button>
-          </json-excel>
-        </template>-->
+        <template #right>
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="发货开始日期"
+            end-placeholder="发货结束日期">
+          </el-date-picker>
+          <el-button type="primary" @click="beginSearch">查询</el-button>&nbsp;
+          <ai-download url="/api/deliveryOrder/exportExcel" fileName="已收货发货单" :disabled="!search.mallId" :params="getExportParams"></ai-download>
+        </template>
         <ai-table
             :tableData="tableData"
             :col-configs="colConfigs"
@@ -57,6 +59,7 @@
 </template>
 
 <script>
+import AiDownload from '@/components/AiDownload.vue'
 import {sendChromeAPIMessage} from '@/api/chromeApi'
 // import JsonExcel from 'vue-json-excel'
 import {timestampToTime} from '@/utils/date'
@@ -64,7 +67,7 @@ import { Message } from 'element-ui'
 
   export default {
     name: 'ShippingList',
-
+    components: {AiDownload},
     data () {
       return {
         isLoading: false,
@@ -78,6 +81,9 @@ import { Message } from 'element-ui'
           { prop: 'totalNumber', label: '总件数', align: 'left' },
           { prop: 'deliveryTime', label: '发货时间', width: '180px', fixed: 'right'}
         ],
+        form: {
+          date: ''
+        },
         currentPage: 1,
         pageSize: 100,
 
@@ -99,6 +105,14 @@ import { Message } from 'element-ui'
     },
 
     computed: {
+      getExportParams() {
+        let params = {...this.search}
+        if (this.form.date) {
+          params.beginDate = this.form.date[0]
+          params.endDate = this.form.date[1]
+        }
+        return {...params}
+      }
     },
 
     /*components: {
@@ -113,10 +127,13 @@ import { Message } from 'element-ui'
 
       },
       getDeliveryOrderList () {
+        let params = {...this.search}
+        if (this.form.date) {
+          params.beginDate = this.form.date[0]
+          params.endDate = this.form.date[1]
+        }
         this.$http.post('/api/deliveryOrder/page',null,{
-            params: {
-                ...this.search
-            }
+            params: params
         }).then(res => {
             this.tableData = res.data.records
             this.total = res.data.total
@@ -265,6 +282,13 @@ import { Message } from 'element-ui'
             this.getList()
           }, 1500)
         }
+      },
+      beginSearch() {
+        if (!this.search.mallId) {
+          Message.error("请先选择店铺")
+          return
+        }
+        this.getDeliveryOrderList()
       }
     }
   }