美文网首页
element table 横竖方向计算合计

element table 横竖方向计算合计

作者: 糖醋里脊120625 | 来源:发表于2024-01-15 17:24 被阅读0次

<template>
  <div>
    <div class="search-box" style="gap: 16px;margin-bottom: 20px">

      <div class="search-left">
        <el-input
          v-model="seacrchVal"
          placeholder="请输入商户名称"
          @change="onChange"
          clearable
        />

        <div style="margin:0px 20px">
          <el-button @click="searchFor" type="primary">查询</el-button>
        </div>

        <el-button type="" @click="exportExcel">导出 <i class="el-icon-download el-icon--right" /></el-button>
      </div>

      <TimeSelect @transTime="onTimeChange" />
    </div>
    <div class="item-table">

      <el-table v-loading="tableLoading" :data="tableData" border>
        <el-table-column label="商户" prop="censusNameText" fixed />
        <!-- :fixed="index==12? 'right': false" -->
        <el-table-column v-for="(item, indexVal) in timeList" :key="indexVal" :label="item" align="center">
          <el-table-column label="销售批次">
            <template slot-scope="scope">
              <span
                class="row-item"
                :class="{ 'is-morebig': scope.row.childArrayList[indexVal].itemTimeCountVal.orderQuantity > 0 }"
                @click="itemClickFun(indexVal, scope.row)"
              >
                <span>{{ scope.row.childArrayList[indexVal].itemTimeCountVal.orderQuantity }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="进货批次">
            <template slot-scope="scope">

              <span
                class="row-item"
                :class="{ 'is-morebig': scope.row.childArrayList[indexVal].itemTimeCountVal.regQuantity > 0 }"
                @click="itemClickFun(indexVal, scope.row)"
              >
                <span>{{ scope.row.childArrayList[indexVal].itemTimeCountVal.regQuantity }}</span>
              </span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import statisticsReport from '@/api/report-statistics'
import TimeSelect from '../components/TimeSelect.vue'
import { ChangeTons } from '@/utils/index'
import { createWs, sheet2Blob, saveXlsx } from "./excel"
export default {
  components: {
    TimeSelect
  },
  data() {
    return {
      seacrchVal: '',
      timeList: [],
      tableData: [],
      searchOriginalList: [],
      yearVal: dayjs().format('YYYY'),
      monthVal: '',
      dayVal: '',
      originCityName: '',
      originProvinceName: '',
      KindsVisible: false,
      stallAreaId: '',
      tableLoading: false,
      marketId: '8b188f986f1311eebd9b1c1b0dc7da9c',
      selectOptions: [],
      enterpriseSelectIds: [],
      AllData: [],
      excelName: '商户进销统计' + new Date().getTime(),
      IncludeUseBusiness: [],
      stateType: 'haveSale',
      infos: {
        orderQuantity: '销售批次',
        regQuantity: '进货批次'
      },
      dateType: '月',
      months: {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '七',
        8: '八',
        9: '九',
        10: '十',
        11: '十一',
        12: '十二',
        13: '合计'
      }
    }
  },
  mounted() {
    this.loadData()
  },

  methods: {
    fuzzySearch(keyword) {
      return this.searchOriginalList.filter((item) => {
        const regexp = new RegExp(`${keyword}`, 'i') // i参数表示不区分大小写
        return Object.values(item).some((value) => typeof value === 'string' && regexp.test(value))
      })
    },
    searchFor() {
      if (this.seacrchVal === '') {
        // alert(1)
      }
      const searchData = this.fuzzySearch(this.seacrchVal)
      const rowEnd = {
        censusNameText: '合计',
        childArrayList: this.getTotalByArray(searchData)
      }
      this.tableData = searchData.concat(rowEnd)
    },
    clear() {
      this.getCommonGoods()
    },
    onChange() {
      if (this.seacrchVal === '') {
        this.clear()
      }
    },
    handleExportData(rawData) {
      const exportData = []
      rawData.forEach((obj) => {
        const newObj = { name: obj.name }
        for (const key in obj) {
          if (key !== 'name') {
            const value = obj[key]
            for (const info in this.infos) {
              newObj[`${key}_${info}`] = value[`${info}`]
            }
          }
        }
        exportData.push(newObj)
      })
      return exportData
    },
    handleExportField(exportData) {
      if (exportData.length) return Object.keys(exportData[0])
      return []
    },
    handleExportTitle() {
      const obj = { name: '商户' }
      for (const month in this.months) {
        for (const info in this.infos) {
          if (info === 'orderQuantity') {
            obj[`month_${month}_orderQuantity`] = `${this.months[month]}` + this.dateType
          }
        }
      }
      return obj
    },
    firstLine() {
      const obj = {
        name: '商户'
      }

      for (const month in this.months) {
        for (const info in this.infos) {
          obj[`month_${month}_${info}`] = this.infos[info]
        }
      }

      return obj
    },
    exportExcel() {
      const conditionList = this.tableData[0].childArrayList
      let buildObj = {}
      if (conditionList.length > 13) {
        this.dateType = '日'
        for (let i = 0; i < conditionList.length; i++) {
          buildObj[i + 1] = this.yearVal + '年' + this.monthVal + '月' + (i + 1)
          if (i === conditionList.length - 1) {
            buildObj[i + 1] = '合计'
          }
        }
        this.months = buildObj
      } else {
        this.dateType = '月'
        buildObj = {
          1: this.yearVal + '年' + '一',
          2: this.yearVal + '年' + '二',
          3: this.yearVal + '年' + '三',
          4: this.yearVal + '年' + '四',
          5: this.yearVal + '年' + '五',
          6: this.yearVal + '年' + '六',
          7: this.yearVal + '年' + '七',
          8: this.yearVal + '年' + '八',
          9: this.yearVal + '年' + '九',
          10: this.yearVal + '年' + '十',
          11: this.yearVal + '年' + '十一',
          12: this.yearVal + '年' + '十二',
          13: this.yearVal + '年' + '合计'
        }
        this.months = buildObj
      }

      const newDATA = this.tableData.map((each, index) => {
        const buildObj = {}
        for (let i = 0; i < each.childArrayList.length; i++) {
          buildObj['month_' + '' + (i + 1) ] = {
            orderQuantity: each.childArrayList[i].itemTimeCountVal.orderQuantity,
            regQuantity: each.childArrayList[i].itemTimeCountVal.regQuantity
          }
        }
        return {
          name: each.censusNameText,
          ...buildObj
        }
      })
      this.changeData(newDATA)
    },
    changeData(newDATA) {
      const that = this
      let exportData = this.handleExportData(newDATA)
      const exportField = this.handleExportField(exportData)
      const exportTitle = this.handleExportTitle()
      const exportDataFirstLine = this.firstLine()
      exportData = [{ ...exportDataFirstLine }, ...exportData]
      const ws = []

      ws.push(createWs(exportData, exportField, exportTitle, '商户数据'))
      saveXlsx(sheet2Blob(ws), that.excelName + '.xlsx')
    },
    loadData() {
      this.getCommonGoods()
    },
    onMerchantChange() {
      if (this.enterpriseSelectIds.length > 0) {
        const newArr = []
        this.AllData.map(item => {
          if (this.enterpriseSelectIds.some(selectId => selectId === item.enterpriseId)) {
            newArr.push(item)
          }
        })
        this.tableData = newArr
      } else {
        this.tableData = this.AllData
      }
    },
    itemClickFun(index, row) {
      // this.$refs.detailDialog.show(
      //   this.marketId,
      //   row.enterpriseId,
      //   this.yearVal,
      //   this.monthVal,
      //   index, row
      // )
    },

    onTimeChange(yearVal, monthVal) {
      this.yearVal = yearVal
      this.monthVal = monthVal
      this.stateType = 'haveSale'
      this.seacrchVal = ''
      this.loadData()
    },
    // ccccccccc
    countEachData(jsonArray) {
      var sumOrder = 0
      var sumReg = 0
      for (var i = 0; i < jsonArray.length; i++) {
        var orderNum = jsonArray[i].orderQuantity
        var regNum = jsonArray[i].regQuantity
        sumOrder += orderNum
        sumReg += regNum
      }
      return {
        monthOrDayVal: jsonArray.length,
        itemTimeCountVal: {
          orderQuantity: sumOrder,
          regQuantity: sumReg
        }
      }
    },
    // gggggggggggggg
    getCommonGoods() {
      var that = this
      const postpaeams = {
        year: this.yearVal,
        month: this.monthVal
      }
      this.tableLoading = true
      statisticsReport.purchaSalesCount(postpaeams)
        .then(res => {
          const resdata = res.data
          this.$forceUpdate()
          this.timeList = resdata.headers
          this.timeList.push('合计')
          const provincesFloor = resdata.rows.map((item) => {
            const cityFloor = item.values.map((each, index) => {
              return {
                monthOrDayVal: index,
                itemTimeCountVal: {
                  orderQuantity: each.orderQuantity,
                  regQuantity: each.regQuantity
                }
              }
            })
            var buildNewArray = cityFloor
            buildNewArray.push(that.countEachData(item.values))
            return {
              censusNameText: item.rowKey.name,
              childArrayList: buildNewArray
            }
          })
          console.log(provincesFloor)
          this.searchOriginalList = provincesFloor
          // &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
          const rowEnd = {
            censusNameText: '合计',
            childArrayList: this.getTotalByArray(provincesFloor)
          }
          var buildData = provincesFloor
          // buildData.concat(rowEnd)
          // &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
          this.tableData = buildData.concat(rowEnd)
        }).finally(() => {
          this.tableLoading = false
        })
    },

    getTotalByArray (sourceData) {
      const col = sourceData[0].childArrayList.length
      const row = sourceData.length
      const result = []
      for (var i = 0; i < col; i++) {
        var temp = []
        for (var j = 0; j < row; j++) {
          temp.push(sourceData[j].childArrayList[i])
        }
        //  console.log(temp); // 代码块一
        const tatalorder = temp.reduce((total, item) => {
          return total + item.itemTimeCountVal.orderQuantity
        }, 0)
        const tatalreg = temp.reduce((total, item) => {
          return total + item.itemTimeCountVal.regQuantity
        }, 0)
        result.push({
          monthOrDayVal: i,
          itemTimeCountVal: {
            orderQuantity: tatalorder,
            regQuantity: tatalreg

          }

        })
      }
      return result
    }

  }

}
</script>

<style scoped>
/* @import "../../components/statistics.css"; */
.martop {
  margin-top: 50px;
}

.search-box {
  display: flex;
  justify-content: space-between;
}

.row-item {
  cursor: pointer;
}

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

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


相关文章

网友评论

      本文标题:element table 横竖方向计算合计

      本文链接:https://www.haomeiwen.com/subject/esyhodtx.html