订单报单合并单元格

frontendEle/src/views/shop/dec-order-list.vue

@@ -48,9 +48,69 @@
                 totalCount: 1,
                 pageSize: 20,
                 tool: tool,
+                //订单号判断
+                spanArr: [], // 用于存放需要合并的行的个数
+                pos: 0, // 记录spanArr数组的下标
+
             }
         },
         methods: {
+
+ //
+      objectSpanMethod(obj) {
+
+        if (
+          obj.columnIndex === 5 ||
+          obj.columnIndex === 6 ||
+          obj.columnIndex === 7 ||
+          obj.columnIndex === 8 ||
+          obj.columnIndex === 9 ||
+          obj.columnIndex === 10
+        ) {
+          // ⼆维数组存储的数据取出
+          var _row = this.spanArr[obj.rowIndex];
+          var _col = _row > 0 ? 1 : 0;
+          return {
+            rowspan: _row,
+            colspan: _col,
+          };
+        } else {
+          return false;
+        }
+      },
+      getSpanArr(orderList) {//传⼊你的列表数据
+        this.pos = 0;
+        orderList.forEach((item, index) => {
+
+          //判断是否是第⼀项
+          if (index === 0) {
+            this.spanArr.push(1);
+            this.pos = 0;
+          } else {
+            //不是第⼀项时，就根据标识去存储
+            if (//orderSn，createdAt...是你的第⼀个数据、第⼆个数据...
+
+              orderList[index].DEC_SN === orderList[index - 1].DEC_SN &&
+              orderList[index].ORDER_SN === orderList[index - 1].ORDER_SN &&
+              orderList[index].USER_NAME === orderList[index - 1].USER_NAME &&
+              orderList[index].REAL_NAME === orderList[index - 1].REAL_NAME &&
+              orderList[index].CON_USER_NAME === orderList[index - 1].CON_USER_NAME &&
+              orderList[index].P_CALC_MONTH === orderList[index - 1].P_CALC_MONTH 
+            ) {
+              // 查找到符合条件的数据时每次要把之前存储的数据+1
+              this.spanArr[this.pos] += 1;
+              this.spanArr.push(0);
+            } else {
+              // 没有符合的数据时，要记住当前的index
+              this.spanArr.push(1);
+              this.pos = index;
+            }
+          }
+        });
+      },
+
+
+
             handleCurrentChange (page) {
                 this.getData(page, this.pageSize)
             },
@@ -58,6 +118,8 @@
                 this.getData(this.currentPage, pageSize)
             },
             getData(page, pageSize) {
+                this.spanArr = [];
+                this.pos = 0;
                 let _this = this
                 network.getPageData(_this, 'shop/dec-order-list', page, pageSize, {type: this.type}, function (response) {
                 //network.getData(`shop/dec-order-list`).then(response => {
@@ -71,23 +133,11 @@
                     } );
 
                     _this.tableData=settingArr;
+                    console.log('11111',_this.tableData);
+                    _this.getSpanArr(_this.tableData);
                 });
             },
-            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-              if (columnIndex > 4) {
-                if (rowIndex % 2 === 0) {
-                  return {
-                    rowspan: 2,
-                    colspan: 1
-                  };
-                } else {
-                  return {
-                    rowspan: 0,
-                    colspan: 0
-                  };
-                }
-              }
-            },
+
         }
     }
 </script>

frontendEle/src/views/shop/order-list.vue

@@ -37,7 +37,8 @@
         name: "order-list",
         components: {Pagination},
         mounted() {
-            this.getData()
+            this.getData();
+
         },
         data() {
             return {
@@ -52,24 +53,75 @@
                 totalCount: 1,
                 pageSize: 20,
                 tool: tool,
+                //订单号判断
+                spanArr: [], // 用于存放需要合并的行的个数
+                pos: 0, // 记录spanArr数组的下标
+
+
             }
         },
+
+
         methods: {
-            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-              if (columnIndex > 4) {
-                if (rowIndex % 2 === 0) {
-                  return {
-                    rowspan: 2,
-                    colspan: 1
-                  };
-                } else {
-                  return {
-                    rowspan: 0,
-                    colspan: 0
-                  };
-                }
-              }
-            },
+
+  //
+      objectSpanMethod(obj) {
+
+        if (
+          obj.columnIndex === 5 ||
+          obj.columnIndex === 6 ||
+          obj.columnIndex === 7 ||
+          obj.columnIndex === 8 ||
+          obj.columnIndex === 9 ||
+          obj.columnIndex === 10
+        ) {
+          // ⼆维数组存储的数据取出
+          var _row = this.spanArr[obj.rowIndex];
+          var _col = _row > 0 ? 1 : 0;
+          return {
+            rowspan: _row,
+            colspan: _col,
+          };
+        } else {
+          return false;
+        }
+      },
+      getSpanArr(orderList) {//传⼊你的列表数据
+        this.pos = 0;
+        orderList.forEach((item, index) => {
+
+          //判断是否是第⼀项
+          if (index === 0) {
+            this.spanArr.push(1);
+            this.pos = 0;
+          } else {
+            //不是第⼀项时，就根据标识去存储
+            if (//orderSn，createdAt...是你的第⼀个数据、第⼆个数据...
+
+              orderList[index].ORDER_SN === orderList[index - 1].ORDER_SN &&
+              orderList[index].USER_NAME === orderList[index - 1].USER_NAME &&
+              orderList[index].REAL_NAME === orderList[index - 1].REAL_NAME &&
+              orderList[index].CONSIGNEE === orderList[index - 1].CONSIGNEE &&
+              orderList[index].MOBILE === orderList[index - 1].MOBILE &&
+              orderList[index].PAY_AT === orderList[index - 1].PAY_AT
+            ) {
+              // 查找到符合条件的数据时每次要把之前存储的数据+1
+              this.spanArr[this.pos] += 1;
+              this.spanArr.push(0);
+            } else {
+              // 没有符合的数据时，要记住当前的index
+              this.spanArr.push(1);
+              this.pos = index;
+            }
+          }
+        });
+      },
+
+
+
+
+
+
             handleCurrentChange (page) {
                 this.getData(page, this.pageSize)
             },
@@ -77,18 +129,26 @@
                 this.getData(this.currentPage, pageSize)
             },
             getData(page, pageSize) {
+                 this.spanArr = [];
+                 this.pos = 0;
                 let _this = this
                 network.getPageData(_this, 'shop/order-list', page, pageSize, {type: this.type}, function (response) {
+
                     _this.loading = false;
+
                     _this.list = response.list;
+
                     let settingObj=_this.list;
 
                     let settingArr = Object.keys(settingObj).map(key => {
+
                         //console.log(key); //为每个键名
                         return settingObj[key];  //把每个对象返回出去生成一个新的数组中相当于0:{id:1}
                     } );
+
                     _this.tableData=settingArr;
-                    console.log(this.tableData)
+                   // console.log('11111',_this.tableData);
+                    _this.getSpanArr(_this.tableData);
 
 
                 });