chenrui 4 年 前
コミット
ce48e33b5b
3 ファイル変更357 行追加324 行削除
  1. 61 61
      src/libs/getDate.js
  2. 142 131
      src/views/shop/goodsList.vue
  3. 154 132
      src/views/shop/shopOrder.vue

+ 61 - 61
src/libs/getDate.js

@@ -1,65 +1,65 @@
 // 引入 moment 时间插件
-import moment from "moment";
-//获取今日/昨日/本周/上周/本月/上月 时间
+import moment from 'moment'
+// 获取今日/昨日/本周/上周/本月/上月 时间
 export default {
-    // 获取今日的开始结束时间
-    getToday() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
-        obj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
-        return obj
-    },
-    // 获取昨日的开始结束时间
-    getYesterday() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD");
-        obj.endtime = moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD');
-        return obj
-    },
-    // 获取当前周的开始结束时间
-    getCurrWeekDays() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD')
-        obj.endtime = moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD');
-        return obj
-    },
-    // 获取上一周的开始结束时间
-    getLastWeekDays() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD')
-        obj.endtime = moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD');
-        return obj
-    },
-    // 获取当前月的开始结束时间
-    getCurrMonthDays() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD');
-        obj.endtime = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD');
-        return obj
-    },
-    // 获取上一个月的开始结束时间
-    getLastMonthDays() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD');
-        obj.endtime = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD');
-        return obj
+  // 获取今日的开始结束时间
+  getToday () {
+    const obj = {
+      starttime: '',
+      endtime: ''
     }
+    obj.starttime = moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取昨日的开始结束时间
+  getYesterday () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().add(-1, 'days').startOf('day').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取当前周的开始到当天结束时间
+  getCurrWeekDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().week(moment().week()).startOf('week').add('days').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取上一周的开始结束时间
+  getLastWeekDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().week(moment().week() - 1).startOf('week').add('days').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().week(moment().week() - 1).endOf('week').add('days').valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取当前月的开始到当天结束时间
+  getCurrMonthDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取上一个月的开始结束时间
+  getLastMonthDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD')
+    return obj
+  }
 }

+ 142 - 131
src/views/shop/goodsList.vue

@@ -1,26 +1,32 @@
 <template>
-  <a-card :bordered="false">
-    <div class="table-page-search-wrapper">
+  <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
+    <div class="shopOrder-searchForm">
       <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
         <a-row :gutter="48">
           <a-col :span="6">
-            <a-form-item label="企业名称">
-              <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入企业名称" />
+            <a-form-item label="商品名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <a-input allowClear v-model.trim="queryParam.contactPhone" :maxLength="11" placeholder="请输入商品名称" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="负责人手机">
-              <a-input allowClear v-model.trim="queryParam.contactPhone" placeholder="请输入申请人手机" />
+            <a-form-item label="供货商" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入供货商" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="启用状态">
-              <v-select ref="status" allowClear placeholder="状态" v-model="queryParam.status" code="ENABLE_FLAG"></v-select>
+            <a-form-item label="商品状态" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <v-select
+                v-model="queryParam.status"
+                ref="salesChannelSettleStatus"
+                id="shopOrder-status"
+                code="SETTLE_STATUS_ALL"
+                placeholder="请选择商品状态"
+                allowClear></v-select>
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-button type="primary" style="margin-right: 10px;" @click="$refs.table.refresh(true)">查询</a-button>
-            <a-button type="" @click="reset">重置</a-button>
+            <a-button class="handle-btn serach-btn" id="shopOrder-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button class="handle-btn" type="" id="shopOrder-reset" @click="handleReset">重置</a-button>
           </a-col>
         </a-row>
       </a-form>
@@ -36,15 +42,15 @@
       :columns="columns"
       :data="loadData"
       bordered>
+      <!-- 订单状态 -->
+      <template slot="orderStatus" slot-scope="text, record">
+        <span :class="[record.orderStatus==1 ? 'green' : 'red']">{{ record.orderStatus==1 ? '已启用' : '已禁用' }}</span>
+      </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
         <a-icon title="编辑" type="edit" class="actionBtn icon-blues" @click="openModal(record)" />
         <!-- <a-icon title="删除" type="delete" class="actionBtn icon-red" v-if="record.status == '0'" @click="delect(record)" /> -->
       </template>
-      <!-- 启用禁用 -->
-      <template slot="enable" slot-scope="text, row">
-        <span :class="[text==1 ? 'green' : 'red']">{{ text==1 ? '已启用' : '已禁用' }}</span>
-      </template>
     </s-table>
   </a-card>
 
@@ -59,82 +65,36 @@ import {
   getTenantsList,
   tenantsDelete
 } from '@/api/tenants.js'
+import getDate from '@/libs/getDate.js'
 import moment from 'moment'
 export default {
   name: 'GoodsList',
-  components: {
-    STable,
-    VSelect
-  },
+  components: { STable, VSelect },
   data () {
     return {
-      moment,
       pageNo: 1,
       pageSize: 10,
       openTenantsModal: false, // 打开授权弹窗
       itemId: '', // 要编辑的租户id
       // 查询参数
       queryParam: {
+        beginDate: null, // 开始时间
+        endDate: null, // 结束时间
         name: '',
         contactPhone: '',
         status: '' // 状态
       },
+      loading: false, // 导出loading
       // 表头
-      columns: [{
-        title: '序号',
-        dataIndex: 'no',
-        width: '40',
-        align: 'center'
-      },
-      {
-        title: '创建时间',
-        dataIndex: 'createDate',
-        width: '200',
-        align: 'center'
-      },
-      {
-        title: '企业名称',
-        dataIndex: 'name',
-        align: 'center'
-      },
-      {
-        title: '负责人名称',
-        dataIndex: 'contactName',
-        width: '120',
-        align: 'center',
-        customRender: (text) => {
-		  return text || '--'
-        }
-      },
-      {
-        title: '负责人手机',
-        width: '120',
-        align: 'center',
-        dataIndex: 'contactPhone'
-      },
-      {
-        title: '有效期至',
-        width: '200',
-        align: 'center',
-        dataIndex: 'expireDate'
-      },
-      {
-        title: '启用状态',
-        width: '200',
-        align: 'center',
-        dataIndex: 'status',
-        scopedSlots: {
-          customRender: 'enable'
-        }
-      },
-      {
-        title: '操作',
-        width: '200',
-        align: 'center',
-        scopedSlots: {
-          customRender: 'action'
-        }
-      }
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '商品名称', dataIndex: 'orderDate', width: 200, align: 'center' },
+        { title: '商品价格(乐豆)', dataIndex: 'userMoblie', width: 200, align: 'center' },
+        { title: '供货商', dataIndex: 'orderNo', width: 200, align: 'center' },
+        { title: '商品状态', scopedSlots: { customRender: 'orderStatus' }, width: 80, align: 'center' },
+        { title: '库存数量', dataIndex: 'orderPrice', width: 200, align: 'center' },
+        { title: '已售数量', dataIndex: 'orderNum', width: 200, align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
@@ -150,15 +110,33 @@ export default {
             return res.data
           }
         })
-      }
+      },
+      // 将默认当天时间日期回显在时间选择框中
+      time: [
+        moment(getDate.getToday().starttime, this.dateFormat),
+        moment(getDate.getToday().endtime, this.dateFormat)
+      ],
+      dateFormat: 'YYYY-MM-DD'
     }
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
-      vm.reset()
+      vm.handleReset()
     })
   },
   methods: {
+    moment,
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.searchForm.beginDate = dateStrings[0]
+        this.searchForm.endDate = dateStrings[1]
+      }
+    },
     // 打开新增/编辑 弹窗
     openModal (row) {
       this.itemId = row ? row.id : ''
@@ -186,64 +164,97 @@ export default {
       })
     },
     // 重置
-    reset () {
-      this.queryParam = {
-        name: '',
-        contactPhone: '',
-        status: '' // 状态
-      }
+    handleReset () {
+      this.queryParam.beginDate = getDate.getToday().starttime
+      this.queryParam.endDate = getDate.getToday().endtime
+      this.time = [
+        moment(getDate.getToday().starttime, this.dateFormat),
+        moment(getDate.getToday().endtime, this.dateFormat)
+      ]
+      this.queryParam.bundleName = ''
+      this.queryParam.number = ''
+      this.queryParam.orderFlag = null
       this.$refs.table.refresh(true)
+    },
+    // 导出
+    handleExport () {
+      const params = {
+        beginDate: this.searchForm.beginDate == null ? getDate.getToday().starttime : this.searchForm.beginDate,
+        endDate: this.searchForm.endDate == null ? getDate.getToday().endtime : this.searchForm.endDate,
+        bundleName: this.searchForm.bundleName,
+        number: this.searchForm.number,
+        queryWord: this.searchForm.queryWord,
+        orderFlag: this.searchForm.orderFlag,
+        salesChannelSettleStatus: this.searchForm.salesChannelSettleStatus
+      }
+      if (!params.beginDate && !params.endDate) {
+        this.$message.error('请先选择需要导出的下单时间区间再进行导出!')
+        return
+      }
+      // 判断两个时间段是否相差m个月
+      if (!completeDate(params.beginDate, params.endDate, 3)) {
+        this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
+        return
+      }
+      this.loading = true
+      exportBundle(params).then(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
+      link.setAttribute('download', fname + '.xlsx')
+      document.body.appendChild(link)
+      link.click()
     }
   }
 }
 </script>
-<style>
-	.table-page-search-wrapper,
-	.addButton {
-		margin-bottom: 0;
-	}
-
-	.table-page-search-wrapper .ant-form-inline .ant-form-item {
-		margin-bottom: 10px;
-	}
-
-	.textCount {
-		border: 1px solid #91d5ff;
-		background-color: #e6f7ff;
-		padding: 10px 0;
-		border-radius: 5px;
-		padding-left: 20px;
-		margin: 10px 0;
-	}
-
-	.action-button {
-		line-height: 40px;
-		white-space: nowrap;
-		padding: 5px 10px;
-		background-color: #1890ff;
-		border-radius: 4px;
-		color: #fff;
-		margin-right: 5px;
-	}
-
-	.menu-text {
-		background-color: #f90;
-	}
-
-	.actionBtn {
-		font-size: 20px;
-		padding: 0 10px;
-	}
-
-	.blue {
-		color: #1890FF;
-	}
-
-	.green {
-		color: #16b50e;
-	}
-
-	.red {
-		color: red;
-	}
+<style lang="less" scoped>
+  .shopOrder-table-page-search-wrapper{
+    .shopOrder-searchForm{
+      .ant-form-inline .ant-form-item{
+        width: 100%;
+      }
+      // 搜索框的下间距
+      .ant-form-item {
+      	margin-bottom: 10px;
+      }
+      .handle-btn{
+        margin-top: 4px;
+      }
+      .serach-btn{
+        margin-right: 10px;
+      }
+    }
+    .export-btn{
+      background-color: #ff9900;
+      border-color: #ff9900;
+      color: #fff;
+    }
+    .export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
+      color: #fff;
+      border-color: #ff9900;
+    }
+    .actionBtn {
+    	font-size: 20px;
+    	padding: 0 10px;
+    }
+    .blue {
+    	color: #1890FF;
+    }
+    .green {
+    	color: #16b50e;
+    }
+    .red {
+    	color: red;
+    }
+  }
 </style>

+ 154 - 132
src/views/shop/shopOrder.vue

@@ -1,33 +1,51 @@
 <template>
-  <a-card :bordered="false">
-    <div class="table-page-search-wrapper">
+  <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
+    <div class="shopOrder-searchForm">
       <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
         <a-row :gutter="48">
           <a-col :span="6">
-            <a-form-item label="企业名称">
-              <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入企业名称" />
+            <a-form-item label="下单时间" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <a-range-picker
+                id="shopOrder-time"
+                v-model="time"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="负责人手机">
-              <a-input allowClear v-model.trim="queryParam.contactPhone" placeholder="请输入申请人手机" />
+            <a-form-item label="用户手机" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <a-input allowClear v-model.trim="queryParam.contactPhone" :maxLength="11" placeholder="请输入用户手机" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="启用状态">
-              <v-select ref="status" allowClear placeholder="状态" v-model="queryParam.status" code="ENABLE_FLAG"></v-select>
+            <a-form-item label="订单编号" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入订单编号" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-button type="primary" style="margin-right: 10px;" @click="$refs.table.refresh(true)">查询</a-button>
-            <a-button type="" @click="reset">重置</a-button>
+            <a-form-item label="订单状态" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <v-select
+                v-model="queryParam.status"
+                ref="salesChannelSettleStatus"
+                id="shopOrder-status"
+                code="SETTLE_STATUS_ALL"
+                placeholder="请选择订单状态"
+                allowClear></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button class="handle-btn serach-btn" id="shopOrder-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button class="handle-btn" type="" id="shopOrder-reset" @click="handleReset">重置</a-button>
           </a-col>
         </a-row>
       </a-form>
     </div>
     <a-divider />
     <div class="table-operator">
-      <a-button type="primary" icon="plus" @click="openModal">新增</a-button>
+      <!-- <a-button type="primary" icon="plus" @click="openModal">新增</a-button> -->
+      <a-button class="export-btn" id="shopOrder-export" type="" :loading="loading" @click="handleExport">导出</a-button>
     </div>
     <s-table
       ref="table"
@@ -36,15 +54,15 @@
       :columns="columns"
       :data="loadData"
       bordered>
+      <!-- 订单状态 -->
+      <template slot="orderStatus" slot-scope="text, record">
+        <span :class="[record.orderStatus==1 ? 'green' : 'red']">{{ record.orderStatus==1 ? '已启用' : '已禁用' }}</span>
+      </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
         <a-icon title="编辑" type="edit" class="actionBtn icon-blues" @click="openModal(record)" />
         <!-- <a-icon title="删除" type="delete" class="actionBtn icon-red" v-if="record.status == '0'" @click="delect(record)" /> -->
       </template>
-      <!-- 启用禁用 -->
-      <template slot="enable" slot-scope="text, row">
-        <span :class="[text==1 ? 'green' : 'red']">{{ text==1 ? '已启用' : '已禁用' }}</span>
-      </template>
     </s-table>
   </a-card>
 
@@ -59,82 +77,35 @@ import {
   getTenantsList,
   tenantsDelete
 } from '@/api/tenants.js'
+import getDate from '@/libs/getDate.js'
 import moment from 'moment'
 export default {
   name: 'ShopOrder',
-  components: {
-    STable,
-    VSelect
-  },
+  components: { STable, VSelect },
   data () {
     return {
-      moment,
       pageNo: 1,
       pageSize: 10,
       openTenantsModal: false, // 打开授权弹窗
       itemId: '', // 要编辑的租户id
       // 查询参数
       queryParam: {
+        beginDate: null, // 开始时间
+        endDate: null, // 结束时间
         name: '',
         contactPhone: '',
         status: '' // 状态
       },
+      loading: false, // 导出loading
       // 表头
-      columns: [{
-        title: '序号',
-        dataIndex: 'no',
-        width: '40',
-        align: 'center'
-      },
-      {
-        title: '创建时间',
-        dataIndex: 'createDate',
-        width: '200',
-        align: 'center'
-      },
-      {
-        title: '企业名称',
-        dataIndex: 'name',
-        align: 'center'
-      },
-      {
-        title: '负责人名称',
-        dataIndex: 'contactName',
-        width: '120',
-        align: 'center',
-        customRender: (text) => {
-		  return text || '--'
-        }
-      },
-      {
-        title: '负责人手机',
-        width: '120',
-        align: 'center',
-        dataIndex: 'contactPhone'
-      },
-      {
-        title: '有效期至',
-        width: '200',
-        align: 'center',
-        dataIndex: 'expireDate'
-      },
-      {
-        title: '启用状态',
-        width: '200',
-        align: 'center',
-        dataIndex: 'status',
-        scopedSlots: {
-          customRender: 'enable'
-        }
-      },
-      {
-        title: '操作',
-        width: '200',
-        align: 'center',
-        scopedSlots: {
-          customRender: 'action'
-        }
-      }
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '下单时间', dataIndex: 'orderDate', width: 200, align: 'center' },
+        { title: '用户手机', dataIndex: 'userMoblie', width: 200, align: 'center' },
+        { title: '订单编号', dataIndex: 'orderNo', width: 200, align: 'center' },
+        { title: '订单状态', scopedSlots: { customRender: 'orderStatus' }, width: 80, align: 'center' },
+        { title: '订单总额', dataIndex: 'orderPrice', width: 200, align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
@@ -150,15 +121,33 @@ export default {
             return res.data
           }
         })
-      }
+      },
+      // 将默认当天时间日期回显在时间选择框中
+      time: [
+        moment(getDate.getToday().starttime, this.dateFormat),
+        moment(getDate.getToday().endtime, this.dateFormat)
+      ],
+      dateFormat: 'YYYY-MM-DD'
     }
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
-      vm.reset()
+      vm.handleReset()
     })
   },
   methods: {
+    moment,
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.searchForm.beginDate = dateStrings[0]
+        this.searchForm.endDate = dateStrings[1]
+      }
+    },
     // 打开新增/编辑 弹窗
     openModal (row) {
       this.itemId = row ? row.id : ''
@@ -186,64 +175,97 @@ export default {
       })
     },
     // 重置
-    reset () {
-      this.queryParam = {
-        name: '',
-        contactPhone: '',
-        status: '' // 状态
-      }
+    handleReset () {
+      this.queryParam.beginDate = getDate.getToday().starttime
+      this.queryParam.endDate = getDate.getToday().endtime
+      this.time = [
+        moment(getDate.getToday().starttime, this.dateFormat),
+        moment(getDate.getToday().endtime, this.dateFormat)
+      ]
+      this.queryParam.bundleName = ''
+      this.queryParam.number = ''
+      this.queryParam.orderFlag = null
       this.$refs.table.refresh(true)
+    },
+    // 导出
+    handleExport () {
+      const params = {
+        beginDate: this.searchForm.beginDate == null ? getDate.getToday().starttime : this.searchForm.beginDate,
+        endDate: this.searchForm.endDate == null ? getDate.getToday().endtime : this.searchForm.endDate,
+        bundleName: this.searchForm.bundleName,
+        number: this.searchForm.number,
+        queryWord: this.searchForm.queryWord,
+        orderFlag: this.searchForm.orderFlag,
+        salesChannelSettleStatus: this.searchForm.salesChannelSettleStatus
+      }
+      if (!params.beginDate && !params.endDate) {
+        this.$message.error('请先选择需要导出的下单时间区间再进行导出!')
+        return
+      }
+      // 判断两个时间段是否相差m个月
+      if (!completeDate(params.beginDate, params.endDate, 3)) {
+        this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
+        return
+      }
+      this.loading = true
+      exportBundle(params).then(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
+      link.setAttribute('download', fname + '.xlsx')
+      document.body.appendChild(link)
+      link.click()
     }
   }
 }
 </script>
-<style>
-	.table-page-search-wrapper,
-	.addButton {
-		margin-bottom: 0;
-	}
-
-	.table-page-search-wrapper .ant-form-inline .ant-form-item {
-		margin-bottom: 10px;
-	}
-
-	.textCount {
-		border: 1px solid #91d5ff;
-		background-color: #e6f7ff;
-		padding: 10px 0;
-		border-radius: 5px;
-		padding-left: 20px;
-		margin: 10px 0;
-	}
-
-	.action-button {
-		line-height: 40px;
-		white-space: nowrap;
-		padding: 5px 10px;
-		background-color: #1890ff;
-		border-radius: 4px;
-		color: #fff;
-		margin-right: 5px;
-	}
-
-	.menu-text {
-		background-color: #f90;
-	}
-
-	.actionBtn {
-		font-size: 20px;
-		padding: 0 10px;
-	}
-
-	.blue {
-		color: #1890FF;
-	}
-
-	.green {
-		color: #16b50e;
-	}
-
-	.red {
-		color: red;
-	}
+<style lang="less" scoped>
+  .shopOrder-table-page-search-wrapper{
+    .shopOrder-searchForm{
+      .ant-form-inline .ant-form-item{
+        width: 100%;
+      }
+      // 搜索框的下间距
+      .ant-form-item {
+      	margin-bottom: 10px;
+      }
+      .handle-btn{
+        margin-top: 4px;
+      }
+      .serach-btn{
+        margin-right: 10px;
+      }
+    }
+    .export-btn{
+      background-color: #ff9900;
+      border-color: #ff9900;
+      color: #fff;
+    }
+    .export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
+      color: #fff;
+      border-color: #ff9900;
+    }
+    .actionBtn {
+    	font-size: 20px;
+    	padding: 0 10px;
+    }
+    .blue {
+    	color: #1890FF;
+    }
+    .green {
+    	color: #16b50e;
+    }
+    .red {
+    	color: red;
+    }
+  }
 </style>