feat(order): 订单新增导出

package-lock.json

@@ -17,6 +17,7 @@
         "cross-env": "^7.0.3",
         "dayjs": "^1.10.5",
         "element-ui": "^2.15.2",
+        "js-file-download": "^0.4.12",
         "lodash": "^4.17.21",
         "qrcode.vue": "^1.7.0",
         "vue": "^2.6.12",
@@ -7556,6 +7557,11 @@
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
+    "node_modules/js-file-download": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+      "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -19703,6 +19709,11 @@
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
+    "js-file-download": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+      "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -77,6 +77,7 @@
     "cross-env": "^7.0.3",
     "dayjs": "^1.10.5",
     "element-ui": "^2.15.2",
+    "js-file-download": "^0.4.12",
     "lodash": "^4.17.21",
     "qrcode.vue": "^1.7.0",
     "vue": "^2.6.12",

src/api/order.js

@@ -39,3 +39,10 @@ export function orderSearch(data) {
 export function getOrderLogs(data) {
   return httpRequest.post('/api/shop/order/logs/search', data)
 }
+
+/**
+ * 导出订单
+ */
+export function exportOrder(data) {
+  return httpRequest.post('/api/shop/order/range/search/download', data, { responseType: 'blob' })
+}

src/pages/order/index.vue

@@ -8,6 +8,11 @@
       border
       ref="list"
     >
+      <div class="tab-aside">
+        <div class="tab-aside-buttons">
+          <el-button type="primary" size="medium" @click="handleExport">导出</el-button>
+        </div>
+      </div>
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
         <el-tab-pane :label="item.label" :name="item.value" v-for="item in orderStatus" :key="item.value"></el-tab-pane>
       </el-tabs>
@@ -80,12 +85,13 @@
 
 <script>
 import dayjs from 'dayjs'
+import fileDownload from 'js-file-download'
 // 组件
 import TableList from '@/components/base/tableList'
 import AppCard from '@/components/base/card'
 import GoodsItem from '@/components/goods/goodsItem'
 // 接口
-import { getOrderSearchList } from '@/api/order'
+import { getOrderSearchList, exportOrder } from '@/api/order'
 export default {
   components: { AppCard, TableList, GoodsItem },
   data() {
@@ -103,7 +109,14 @@ export default {
       ],
       orderStartTime: '',
       orderEndTime: '',
-      orderActiveDay: ''
+      orderActiveDay: '',
+      params: {
+        shop_id: this.$store.state.shopId,
+        search_field: 'spu_name',
+        search_value: '',
+        order_status: '',
+        payment_method: ''
+      }
     }
   },
   computed: {
@@ -112,13 +125,7 @@ export default {
       return {
         remote: {
           httpRequest: getOrderSearchList,
-          params: {
-            shop_id: this.$store.state.shopId,
-            search_field: 'spu_name',
-            search_value: '',
-            order_status: '',
-            payment_method: ''
-          },
+          params: this.params,
           beforeRequest: this.beforeRequest,
           callback: this.callback
         },
@@ -226,6 +233,13 @@ export default {
       }
       return map[value] || value
     },
+    // 导出
+    handleExport() {
+      exportOrder(this.params).then(response => {
+        const datetime = dayjs().format('YYYY-MM-DD-HH-mm-ss')
+        fileDownload(response, `Order_zijing_${datetime}.csv`)
+      })
+    },
     // tab
     handleClick() {
       this.$refs.list.refetch(true)
@@ -257,6 +271,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.tab-aside {
+  position: relative;
+  z-index: 10;
+}
+.tab-aside-buttons {
+  position: absolute;
+  right: 0;
+}
 ::v-deep .filter-buttons {
   display: block;
   padding-left: 68px;