数据遍历过滤筛选download-excel动态fields

<template>
  <div>
    <div class="kind-name">
      <div class="kind-left">
        <MerchantMoreSelect ref="ChildMerchant" :business-option="businessOption" style="margin-right: 16px; width: 180px"
          @change="onMerchantChange" />

        <el-checkbox v-model="checked" style="margin-right:16px" @change="handleCheckedChange">只显示打印机开票商户</el-checkbox>

        <el-radio-group v-model="stateType" style="margin-right:16px" @change="handleChangeState">
          <el-radio-button label="whole">全部</el-radio-button>
          <el-radio-button label="haveStock">有进货</el-radio-button>
          <el-radio-button label="noneStock">无进货</el-radio-button>
        </el-radio-group>

        <download-excel :data="tableData" :fields="jsonFields" type="xls" :name="excelName" class="bangd">
          <el-button type="">导出 <i class="el-icon-download el-icon--right" /></el-button>
        </download-excel>

      </div>
      <TimeSelect @transTime="onTimeChange" />
    </div>

    <el-table ref="table" :data="tableData" border>
      <el-table-column fixed label="商户" prop="censusNameText" width="180px" />
      <!-- :fixed="indexVal === tableHeaders.length - 1 ? 'right' : false" -->
      <el-table-column v-for="(item, indexVal) in tableHeaders" :key="item" :label="item">
        <template slot-scope="scope">
          <span class="row-item" :class="{ 'is-morebig': scope.row.childArrayList[indexVal].itemTimeCountVal > 0 }"
            @click="itemClickFun(indexVal, scope.row)">
            {{ scope.row.childArrayList[indexVal] && scope.row.childArrayList[indexVal].itemTimeCountVal }}
          </span>

        </template>
      </el-table-column>
    </el-table>

    <StockBusinessDetDialog ref="StockBusinessDetDialog" />
  </div>
</template>

<script>

import statisticsReport from '@/api/report-statistics'
import TimeSelect from '../../components/TimeSelect.vue'
import dayjs from 'dayjs'
import MerchantMoreSelect from '@/components/MerchantMoreSelect.vue'
import { ChangeTons } from '@/utils/index'

import StockBusinessDetDialog from './StockBusinessDetDialog.vue'
import statisticsSales from '@/api/sales-statistics'
export default {
  components: {
    MerchantMoreSelect,
    TimeSelect,
    StockBusinessDetDialog
  },
  data() {
    return {
      jsonFields: {},
      tableHeaders: [],
      tableData: [],
      yearVal: dayjs().format('YYYY'),
      monthVal: '',
      dayVal: '',
      checked: false,
      businessOption: [],
      AllData: [],
      marketId: '8b188f986f1311eebd9b1c1b0dc7da9c',
      MarketList: [],
      excelName: '进货按商户统计列表' + new Date().getTime(),
      stateType: 'haveStock',
      IncludeUseBusiness: []

    }
  },
  mounted() {
    this.getMarketData()
    this.loadTableData()
  },

  methods: {
    creatTabel() {
      const conditionList = this.tableData[0].childArrayList
      const buildObj = {}
      if (conditionList.length > 12) {
        for (let i = 0; i < conditionList.length; i++) {
          buildObj[i + 1 + '日'] = {
            field: 'childArrayList',
            callback: value => {
              return '&nbsp;' + value[i].itemTimeCountVal
            }

          }
        }
      } else {
        for (let i = 0; i < conditionList.length; i++) {
          buildObj[i + 1 + '月'] = {
            field: 'childArrayList',
            callback: value => {
              return '&nbsp;' + value[i].itemTimeCountVal
            }

          }
        }
      }
      const trendsObj = {
        商户名称: 'censusNameText',
        ...buildObj
      }
      this.jsonFields = trendsObj
    },

    handleCheckedChange() {
      const MarketIDList = []
      this.AllData.map(item => {
        if (this.MarketList.some(each => each.enterpriseCreditCode === item.creditCode ||
          each.enterpriseName === item.censusNameText)) {
          MarketIDList.push(item.merchantId)
        }
      })
      this.$refs.ChildMerchant.hasData(this.checked === true ? MarketIDList : [])
      this.IncludeUseBusiness = this.checked === true ? MarketIDList : []
      this.CombinatorialScreen(this.AllData, this.IncludeUseBusiness)
    },
    // 过滤条件一
    onMerchantChange(value) {
      this.checked = false
      this.IncludeUseBusiness = value
      this.CombinatorialScreen(this.AllData, this.IncludeUseBusiness)
    },
    // 过滤条件2
    handleChangeState() {
      this.CombinatorialScreen(this.AllData, this.IncludeUseBusiness)
    },
    CombinatorialScreen(mainData, conditionData) {
      this.$nextTick(() => {
        this.$refs["table"].doLayout();
      });
      // 第一次过滤
      const stockedData = mainData.filter(function (each) {
        return each.childArrayList.find(obj => Number(obj.itemTimeCountVal) > 0)
      })

      const noneData = []
      mainData.map(function (each) {
        if (each.childArrayList.every(obj => Number(obj.itemTimeCountVal) === 0)) {
          noneData.push(each)
        }
      })
      var firstFilterData = []
      if (this.stateType === 'noneStock') {
        firstFilterData = noneData
      } else if (this.stateType === 'haveStock') {
        firstFilterData = stockedData
      } else {
        firstFilterData = this.AllData
      }
      
      // 第二次过滤
      if (conditionData.length > 0) {
        const newArr = []
        firstFilterData.map(item => {
          if (conditionData.some(selectId => selectId === item.merchantId)) {
            newArr.push(item)
          }
        })
        console.log(newArr)
        this.tableData = newArr
      } else {
        this.tableData = firstFilterData
      }
    },
    loadTableData() {
      const postData = {
        year: this.yearVal,
        month: this.monthVal
      }
      statisticsReport.getByBusiness(postData)
        .then(res => {
          this.$forceUpdate()
          const data = res.data
          var buildNewArray = []
          const ChangeData = data.rows.map((item) => {
            const cityFloor = item.values.map((each, index) => {
              return {
                monthOrDayVal: index,
                itemTimeCountVal: each
              }
            })
            buildNewArray.push({
              merchantId: item.rowKey.id,
              censusNameText: item.rowKey.name
            })
            return {
              creditCode: item.rowKey.creditCode,
              merchantId: item.rowKey.id,
              censusNameText: item.rowKey.name,
              childArrayList: cityFloor
            }
          })
          this.tableHeaders = data.headers
          this.businessOption = buildNewArray
          this.AllData = ChangeData

          this.tableData = ChangeData

          this.creatTabel()
          this.CombinatorialScreen(this.AllData, this.IncludeUseBusiness)
        }).finally(() => {

        })
    },
    filterStock(usefulData) {
      const stockedData = usefulData.filter(function (each) {
        return each.childArrayList.find(obj => Number(obj.itemTimeCountVal) > 0)
      })
      this.tableData = stockedData
    },
    getMarketData() {
      statisticsSales.MarketStalls(this.marketId)
        .then(res => {
          this.MarketList = res
        }).finally(() => {
        })
    },
    itemClickFun(index, row) {
      this.$refs.StockBusinessDetDialog.show(
        row.merchantId,
        this.yearVal,
        this.monthVal,
        index,
        row
      )
    },

    onTimeChange(yearVal, monthVal) {
      // this.stateType = 'haveStock';
      this.yearVal = yearVal
      this.monthVal = monthVal
      this.loadTableData()
    }

  }

}
</script>

<style scoped>
@import "../../components/statistics.css";

.martop {
  margin-top: 50px;
}

.is-morebig {
  color: #409eff;
}

.hoverspan {
  cursor: pointer;
}

.kind-left {
  display: flex;
  align-items: center;
}
</style>