积分结算添加条件搜索和导出

src/views/fingertipIntegral/settlementList.vue

@@ -9,16 +9,34 @@
         clearable
       /> -->
       <el-select v-model="listQuery.settlementStatus" clearable class="filter-item" style="width:200px;margin-right:10px" placeholder="请选择结算状态">
-        <el-option v-for="item of statusOptions" :key="item.value" v-bind="item" />
+        <el-option v-for="item of settlementStatusOptions" :key="item.value" v-bind="item" />
       </el-select>
       <el-select v-model="listQuery.dealStatus" clearable class="filter-item" style="width:200px;margin-right:10px" placeholder="请选择已处理状态">
         <el-option v-for="item of dealStatusOptions" :key="item.value" v-bind="item" />
       </el-select>
+      <el-date-picker
+        v-model="listQuery.dateArr"
+        type="datetimerange"
+        class="filter-item"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="timestamp"
+        align="right"
+        clearable
+      />
       <el-button
         type="primary"
         style="margin-left:10px"
         @click="handleSearch"
       >搜索</el-button>
+      <el-button
+        :loading="exportLoading"
+        icon="el-icon-download"
+        type="primary"
+        style="margin-left:10px"
+        @click="handleExport"
+      >导出</el-button>
     </div>
     <el-table :data="list" border style="width: 100%">
       <el-table-column label="用户名" prop="residentInformation.name" />
@@ -35,7 +53,7 @@
       <el-table-column label="结算状态">
         <template slot-scope="scope">
           <span>{{
-            scope.row.settlementStatus | optionsFilter(statusOptions)
+            scope.row.settlementStatus | optionsFilter(settlementStatusOptions)
           }}</span>
         </template>
       </el-table-column>
@@ -150,11 +168,14 @@ export default {
         keyword: undefined,
         settlementStatus: undefined,
         startDate: undefined,
-        status: undefined
+        status: undefined,
+        dateArr: []
       },
       list: undefined,
 
-      statusOptions: [
+      exportLoading: false,
+
+      settlementStatusOptions: [
         {
           label: '待处理',
           value: '0'
@@ -208,7 +229,13 @@ export default {
   },
   methods: {
     getList() {
-      settlementList(this.listQuery).then(res => {
+      const listQuery = JSON.parse(JSON.stringify(this.listQuery))
+      const { dateArr } = listQuery
+      if (dateArr) {
+        listQuery.startDate = dateArr[0]
+        listQuery.endDate = dateArr[1]
+      }
+      settlementList(listQuery).then(res => {
         this.list = res.d.records
         this.total = res.d.total
         // this.pageSize = res.d.pageSize
@@ -244,6 +271,53 @@ export default {
     closeDia() {
       this.diaVisible = false
     },
+    handleExport() {
+      const that = this
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['用户名', '店名', '结算积分数', '提交时间', '结算状态', '已处理状态', '处理备注', '发票状态']
+        const filterVal = ['residentInformation.name', 'residentInformation.speciallyBusinessInfo.name', 'num', 'createDate', 'settlementStatus', 'dealStatus', 'remark', 'invoiceStatus']
+        this.exportLoading = true
+        const listQuery = JSON.parse(JSON.stringify(this.listQuery))
+        const { dateArr } = listQuery
+        if (dateArr) {
+          listQuery.startDate = dateArr[0]
+          listQuery.endDate = dateArr[1]
+        }
+        listQuery.size = 999999
+        settlementList(listQuery).then(res => {
+          setTimeout(() => {
+            this.exportLoading = false
+          }, 3000)
+
+          const data = that.formatJson(filterVal, res.d.records)
+          excel.export_json_to_excel({
+            header: tHeader,
+            data: data,
+            filename: '结算记录'
+          })
+        })
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v =>
+        filterVal.map(j => {
+          let value
+          if (j === 'invoiceStatus' || j === 'dealStatus' || j === 'settlementStatus') {
+            value = this.$options.filters['optionsFilter'](v[j], this[`${j}Options`])
+          } else if (j === 'createDate') {
+            value = this.$options.filters['parseTime'](v[j])
+          } else if (j === 'residentInformation.name') {
+            value = v['residentInformation']['name']
+          } else if (j === 'residentInformation.speciallyBusinessInfo.name') {
+            value = v['residentInformation']['speciallyBusinessInfo']['name']
+          } else {
+            value = v[j]
+          }
+          // if (!value && value !== 0) value = "N/A";
+          return value
+        })
+      )
+    },
     handleDelivery(item) {
       this.$confirm('是否收到发票?', '提示', {
         confirmButtonText: '确定',