完善集团日报表、事业部日报表、分公司日报表--合并单元格--分公司列数据显示不全的问题

anrui-reportcenter-ui/src/views/branchofficestatistics/branchofficestatistics.vue

@@ -31,7 +31,7 @@
         </div>
         <!--Start 主页面主要部分 -->
         <div class="">
-          <el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;" @selection-change="handleSelectionChange" :span-method="rowspanMethod">
+          <el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;" @selection-change="handleSelectionChange" :span-method="objectSpanMethod">
             <el-table-column prop="useOrgName" label="分公司" width="120" align="center"></el-table-column>
             <el-table-column prop="brandName" label="品牌" width="120" align="center"></el-table-column>
             <el-table-column prop="vehModeName" label="车型" width="250" align="center"></el-table-column>
@@ -266,6 +266,80 @@ export default {
         }
       }
     },
+    // 这个方法是 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)
+      }
+    },
     // 表中序号
     indexMethod(index) {
       var pagestart = (this.listQuery.current - 1) * this.listQuery.size

anrui-reportcenter-ui/src/views/businessdivisionstatistics/businessdivisionstatistics.vue

@@ -31,9 +31,9 @@
         </div>
         <!--Start 主页面主要部分 -->
         <div class="">
-          <el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;" @selection-change="handleSelectionChange" :span-method="rowspanMethod">
+          <el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;" @selection-change="handleSelectionChange" :span-method="objectSpanMethod">
             <el-table-column prop="busOrgName" label="事业部" width="120" align="center"></el-table-column>
-            <el-table-column label="分公司" width="120" align="center">
+            <el-table-column prop="useOrgName" label="分公司" width="120" align="center">
               <template slot-scope="scope">
                 <span class="bluezi" @click="lookBranch(scope.row)">{{ scope.row.useOrgName }}</span>
               </template>
@@ -233,9 +233,9 @@ export default {
       })
       this.sids = aa
     },
-    // 合并单元格
+    // 合并单元格 旧方法暂时不用
     rowspanMethod({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) { // 定位到需要合并的列
+      if (columnIndex === 1) { // 定位到需要合并的列
         // 获取当前单元格的值
         const currentValue = row[column.property]
         // 获取上一行相同列的值
@@ -260,6 +260,83 @@ export default {
         }
       }
     },
+    // 合并单元格 新方法
+    // 这个方法是 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('busOrgName', rowIndex)
+        case 1:
+          return this.mergeCol('useOrgName', rowIndex)
+        case 2:
+          return this.mergeCol('brandName', rowIndex)
+      }
+    },
     // 表中序号
     indexMethod(index) {
       var pagestart = (this.listQuery.current - 1) * this.listQuery.size

anrui-reportcenter-ui/src/views/groupstatistics/groupstatistics.vue

@@ -31,8 +31,8 @@
         </div>
         <!--Start 主页面主要部分 -->
         <div class="">
-          <el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;" @selection-change="handleSelectionChange" :span-method="rowspanMethod">
-            <el-table-column label="事业部" width="120" align="center">
+          <el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;" @selection-change="handleSelectionChange" :span-method="objectSpanMethod">
+            <el-table-column prop="busOrgName" label="事业部" width="120" align="center">
               <template slot-scope="scope">
                 <span class="bluezi" @click="lookBusiness(scope.row)">{{ scope.row.busOrgName }}</span>
               </template>
@@ -250,6 +250,80 @@ export default {
         }
       }
     },
+    // 这个方法是 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('busOrgName', rowIndex)
+        case 1:
+          return this.mergeCol('brandName', rowIndex)
+      }
+    },
     // 表中序号
     indexMethod(index) {
       var pagestart = (this.listQuery.current - 1) * this.listQuery.size