content.vue

<template>
  <div class="daily">
    <!-- 小时分钟合并 -->
    <div class="asis-table-wrapper">
      <h3 class="asis-table-header single-report-header tf-table-header">
       <span
          class="asis-table-download"
          @click="downloadData(i18nFormatter(trafficFlow_title) + '-' + Time(),
            radioDate
          )"
        >{{$t('allPages.load')}}</span>
      </h3>
      <div class="asis-table-content" v-loading="loading">
        <el-table
            class="asis-table baseasis-table specialTable"
            id="domBaseTrafficFlow"
            :data="tabOps"
            header-row-class-name="asis-table-head"
            style="width: 100%"
            :max-height="tableHeight"
          >
          <el-table-column
              v-if="tabOps.length"
              type="index"
              :label="$t('table.order')"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <span>{{ indexFormatter(scope) }}</span>
              </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-for="(item,index) in tabHeadData"
            :key="index"
            :width="item.width?item.width:100"
          >
              <template v-if="item.children">
                  <el-table-column
                    :prop="item1.prop"
                    :label="item1.label"
                    align="center"
                    v-for="(item1,index1) in item.children"
                    :key="index1"
                    min-width="130"
                  >
                  
                   <template slot="header" slot-scope="scope">
                      <p v-html="scope.column.label"></p>
                    </template>
                    
                  </el-table-column>
              </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import exportData from "../../public/exportData";
import { columnComputed, rowComputed, curryAvgAndSum, combineHeadAndBody } from '@/utils'

export default {
  props: {
    propparam: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    "export-data-dialog": exportData,
  },
  data() {
    return {
      loading: false,
      trafficFlow_title: "ratioAnalysis", //报表
      emitData: {},
      radioDate: "day",
      tabHeadData: [],
      tabOps: [],
    };
  },
  computed: {
    tableHeight() {
      let windowHeight = window.innerHeight,
        scale = 0.34
      scale = windowHeight <= 720
        ? 0.4
        : windowHeight <= 768
          ? 0.38
          : windowHeight <= 900
            ? 0.36
            : windowHeight <= 1080
              ? 0.32
              : 0.32
      return windowHeight - windowHeight * scale
    }
  },
  watch: {
    propparam: {
      handler: "refreshHandle",
      immediate: true,
      deep:true
    },
    emitData: {
      handler(){

      },
      immediate: true,
      deep:true
    }
  },
  methods: {
    refreshHandle(param) {
        if(param && param.option){
            this.emitData = param
            this.getData();
        }
    },
    // 获取表格数据
    getTableData(resData) {
        let originData = JSON.parse(JSON.stringify(resData.data))
        let flowHeadData = JSON.parse(JSON.stringify(resData.headTree|| []));
        this.tabHeadData = this.dealTheadData(flowHeadData)
        console.log(this.tabHeadData)
        this.tabOps = []
        originData.forEach((item)=>{
            let childArr = []
            item.forEach((itemChild,indexChild)=>{
                childArr[`defaultOrg${indexChild}`]=itemChild
            })
            this.tabOps.push(childArr)
        })
    },
    getData() {
        this.tabHeadData = [];
        this.tabOps = [];
        this.loading = true;
        let param = {
            accountId:this.$cookie.get("accountId"),
            mallIds: this.emitData.orgId?this.emitData.orgId:null,
            indexes: this.emitData.indexes?this.emitData.indexes:null,
            startDate: this.emitData.startDate,
            endDate: this.emitData.endDate,
            option:this.emitData.option
        }
        this.$api.analysisReport.getIndexMalls(param).then(res => {
            let resData = res.data.data;
            this.loading = false;
            this.getTableData(resData)
        })
    },
    // 新增表格回调
    /**
     * 表头格式化
     * @param {array} originHeadData
     * @param {string} addColumn { 'avg' | 'sum' | 'avgAndTotal' }
     */
    dealTheadData(theadData) {
          let cols = [],
            $index = 0;
          cols = theadData.map((item, index) => {
            if (item.children) {
              return {
                label: item.head,
                children: item.children.map((childItem, childIndex) => {
                    if (childItem.children) {
                      return {
                        label: childItem.head,
                        children: childItem.children.map((childItem1, childIndex1) => {
                            return {
                              prop: "defaultOrg" + $index++,
                              label: childItem1.head
                            };
                          }).filter(Boolean)
                      };
                    } else {
                      return {
                        prop: "defaultOrg" + $index++,
                        label: childItem.head,
                      };
                    }
                  }).filter(Boolean)
              };
            } else {
              return {
                prop: "defaultOrg" + $index++,
                label: item.head,
                fixed: true,
                width: 200
              };
            }
          });
          console.log(cols)
          return cols;
    },
    /**
     * 处理表格数据
     * @param {array} data
     * @param {string} addPlace { 'index' | 'column' | 'row' | 'both' }
     * @param {string} addOption { 'avg' | 'sum' | 'avgAndTotal' }
     * @param {number} startPostion
     * @returns {array} result
     */
    dealTableData(data, addPlace, addOption, startPosition = 0) {
      if (!addPlace) return data
      let result = []
      if (addPlace === 'column') {
        result = columnComputed({data, addOption, startPosition})
      } else if (addPlace === 'row') {
        result = rowComputed({data, addOption, startPosition})
      } else {
        let addColAndRow = curryAvgAndSum(columnComputed, rowComputed)
        result = addColAndRow({data, addOption, startPosition})
      }

      return result
    },
    indexFormatter({ $index, row }) {
      const { createRow, tabOps } = this
      const realDataLen = createRow === 'avgAndTotal'
        ? tabOps.length - 2
        : tabOps.length
      if ($index < realDataLen) {
        return $index + 1
      } else {
        return ((realDataLen - $index) === 0) ? this.$t('table.average') : this.$t('table.total')
      }
    },
    downloadData(title) {
      this.dealExport("domBaseTrafficFlow", title);
    },
  }
};
</script>

<style scoped>
.asis-table-wrapper {
  position: relative;
}

.bar-report {
  background: url("~@/assets/img/asis/bar_icon.svg") no-repeat;
  background-size: 100% 100%;
}

.report-item-bar {
  background: url("~@/assets/img/asis/active_bar_icon.svg") no-repeat;
  background-size: 100% 100%;
}
</style>