anrui/anrui-reportcenter-ui/src/views/statement/rebateSummary/rebateSummaryByFiliale.vue

<template>
  <div class="app-container">
    <!--列表页面-->
    <div v-show="viewState == 1">
      <button-bar view-title="厂家返利汇总统计报表" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
      <div class="main-content">
        <div class="listtop">
          <div class="tit">厂家返利汇总统计报表</div>
        </div>
        <div class="">
          <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;" :span-method="objectSpanMethod">
            <el-table-column prop="customerName" label="分公司" align="center" width="120" />
            <el-table-column prop="customerName" label="年份" align="center" width="120" />
            <el-table-column prop="vehMark" label="预提" align="center" min-width="180" />
            <el-table-column prop="vinNo" label="上传" align="center" width="150" />
            <el-table-column prop="count" label="调整" align="center" width="120" />
            <el-table-column prop="amount" label="实销日期" align="center" width="120" />
            <el-table-column label="未上传" align="center">
              <el-table-column prop="count" label="合计" align="center" width="120" />
              <el-table-column label="其中费用" align="center">
                <el-table-column prop="count" label="支出" align="center" width="120" />
                <el-table-column prop="count" label="待支付" align="center" width="120" />
                <el-table-column prop="count" label="抵顶" align="center" width="120" />
              </el-table-column>
              <el-table-column prop="count" label="其中返利" align="center" width="120" />
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ButtonBar from '@/components/ButtonBar'
import req from '@/api/statement/salesstatement'

export default {
  name: 'BikeRebateStatistics',
  components: {
    ButtonBar
  },
  data() {
    return {
      btndisabled: false,
      btnList: [
        {
          type: 'info',
          size: 'small',
          icon: 'cross',
          btnKey: 'doClose',
          btnLabel: '关闭'
        }
      ],
      isSearchShow: false,
      searchxianshitit: '显示查询条件',
      viewState: 1, // 1、列表 2、新增 3、编辑 4、查看
      tableKey: 0,
      list: [],
      FormLoading: false,
      listLoading: false,
      // 翻页
      listQuery: {
        current: 1,
        size: 10,
        total: 0,
        params: {
          goodsSpuName: '',
          useOrgSid: '',
          startDate: '',
          endDate: '',
          userSid: '',
          orgPath: '',
          menuUrl: ''
        }
      }
    }
  },
  created() {
    // 初始化变量
    this.getList()
  },
  mounted() {
    this.$refs['btnbar'].setButtonList(this.btnList)
  },
  methods: {
    btnHandle(btnKey) {
      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
      switch (btnKey) {
        case 'doClose':
          this.doClose()
          break
        default:
          break
      }
    },
    // 查询列表信息
    getList() {
      this.listLoading = true
      req.goodsTrendReport(this.listQuery).then(response => {
        this.listLoading = false
        if (response.success) {
          this.list = response.data.records
          this.listQuery.total = response.data.total
        } else {
          this.list = []
          this.listQuery.total = 0
        }
      })
    },
    // 这个方法是 element-ui提供的单元格合并方法
    // objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
    // row: 当前行
    // column: 当前列
    // rowIndex:当前行号
    // columnIndex: 当前列号
    // 1代表: 独占一行
    // 更大的自然数: 代表合并了若干行
    // 0: 代表“消失”的哪那一个单元格,后面的单元格向前推一格
    mergeCol(id, rowIndex) {
      // debugger
      // 合并单元格
      // id: 属性名
      // rowIndex: 行索引值
      var idName = this.list[rowIndex][id] // 获取当前单元格的值
      if (rowIndex > 0) {
        // 判断是不是第一行
        // eslint-disable-next-line eqeqeq
        if (this.list[rowIndex][id] !== this.list[rowIndex - 1][id]) {
          // 先判断当前单元格的值是不是和上一行的值相等
          var i = rowIndex
          var num = 0 // 定义一个变量i,用于记录行索引值并进行循环,num用于计数
          while (i < this.list.length) {
            // 当索引值小于table的数组长度时,循环执行
            if (this.list[i][id] === idName) {
              // 判断循环的单元格的值是不是和当前行的值相等
              i++ // 如果相等,则索引值加1
              num++ // 合并的num计数加1
            } else {
              i = this.list.length // 如果不相等,将索引值设置为table的数组长度,跳出循环
            }
          }
          return {
            rowspan: num, // 最终将合并的行数返回
            colspan: 1
          }
        } else {
          return {
            rowspan: 0, // 如果相等,则将rowspan设置为0
            colspan: 1
          }
        }
      } else {
        // 如果是第一行,则直接返回
        let i = rowIndex
        let num = 0
        while (i < this.list.length) {
          // 当索引值小于table的数组长度时,循环执行
          if (this.list[i][id] === idName) {
            i++
            num++
          } else {
            i = this.list.length
          }
        }
        return {
          rowspan: num,
          colspan: 1
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并单元格
      switch (
        columnIndex // 将列索引作为判断值
        ) {
        // 通过传递不同的列索引和需要合并的属性名,可以实现不同列的合并(索引0,1 指的是页面上的0,1)
        // gzTroubles,gzID 这两个字段是我要合并的字段名
        case 0:
          return this.mergeCol('useOrgName', rowIndex)
        case 1:
          return this.mergeCol('brandName', rowIndex)
      }
    },
    doClose() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
</style>