动态表单配置：表单项合并单元格

epmet-oper-web/src/views/modules/dyform/itemList.vue

@@ -33,6 +33,7 @@
 
     <el-card>
       <el-table
+          :span-method="mergeCells"
           :data="formItemList"
           style="width: 100%;margin-bottom: 20px;"
           row-key="id"
@@ -97,7 +98,8 @@ export default {
         customerId: [{required: true, message: '请选择客户'}],
         formId: [{required: true, message: '请选择表单'}]
       },
-      formItemList: []
+      formItemList: [],
+      mergeCellMap: {}
     }
   },
   mounted() {
@@ -145,10 +147,12 @@ export default {
           return;
         }
 
-        this.$http.get(`/oper/customize/icform/config/listItems?customerId=${this.formQueryParams.customerId}&formId=${this.formQueryParams.formId}`).then(({
+        let url = `/oper/customize/icform/config/listItems?customerId=${this.formQueryParams.customerId}&formId=${this.formQueryParams.formId}`
-                                                                                                                                                              status: httpStatus,
+        this.$http.get(url).then(({
-                                                                                                                                                              data: httpData
+                                    status: httpStatus,
-                                                                                                                                                            }) => {
+                                    data: httpData
+                                  }) => {
+
           if (httpData.code !== 0) {
             this.$message({
               type: 'error',
@@ -157,18 +161,130 @@ export default {
             return;
           }
 
+          this.mergeCellMap = {}
+
+          for (let i = httpData.data.length - 1; i >= 0; i--) {
+            let item = httpData.data[i];
+            // 合并单元格数
+            this.setMergeRowQty(httpData.data[i], httpData.data[i + 1], i === 0);
+
+            // 设置hasChildren属性
+            item.hasChildren = (item.children.length > 0);
+          }
+
           this.formItemList = httpData.data;
         })
       })
     },
 
+    /**
+     * 合并单元格数
+     * @param rowData 当前数据行
+     * @param lastRowData 上一条数据
+     * @returns {{groupNameMergeRows, formCodeMergeRows}}
+     */
+    setMergeRowQty(rowData, lastRowData, isTheFirstRow) {
+      let formCode = rowData.formCode;
+      let itemGroupName = rowData.itemGroupName;
+
+      let {groupChanged: formCodeGroupChanged, mergeRowsQty4LastRow: formCodeMergeRowsQty4LastRow} = this.setAndGetMergeRows('formCode', formCode);
+      let {groupChanged: groupGroupChanged, mergeRowsQty4LastRow: groupMergeRowsQty4LastRow} = this.setAndGetMergeRows('groupName', itemGroupName);
+
+      // 若合并的分组变了，那么给上一条数据设置上值
+      if (formCodeGroupChanged) {
+        lastRowData.formCodeMergeRows = formCodeMergeRowsQty4LastRow;
+      }
+
+      if (groupGroupChanged) {
+        lastRowData.groupNameMergeRows = groupMergeRowsQty4LastRow;
+      }
+
+      if (isTheFirstRow) {
+        // 如果是最后一条
+        rowData.formCodeMergeRows = this.mergeCellMap['formCode']['mergeRowsQty'];
+        rowData.groupNameMergeRows = this.mergeCellMap['groupName']['mergeRowsQty'];
+      } else {
+        rowData.formCodeMergeRows = 0;
+        rowData.groupNameMergeRows = 0;
+      }
+    },
+
+    setAndGetMergeRows(columnKey, cellValue) {
+      let dict4ThisColumn = this.mergeCellMap[columnKey];
+      if (!dict4ThisColumn) {
+        dict4ThisColumn = {};
+        dict4ThisColumn.cellValue = cellValue;
+        dict4ThisColumn.mergeRowsQty = 0;
+        this.mergeCellMap[columnKey] = dict4ThisColumn;
+      }
+
+      let groupChanged = false; // 分组是否变化
+      let mergeRowsQty4LastRow = dict4ThisColumn.mergeRowsQty; // 上个分组最后一条的数值
+
+      if (cellValue !== dict4ThisColumn.cellValue) {
+        // 分组变了
+        groupChanged = true;
+
+        dict4ThisColumn.cellValue = cellValue;
+        dict4ThisColumn.mergeRowsQty = 0;
+      } else {
+        // 分组没变
+        groupChanged = false;
+      }
+
+      dict4ThisColumn.mergeRowsQty++;
+
+      return {
+        groupChanged: groupChanged,
+        mergeRowsQty4LastRow: mergeRowsQty4LastRow,
+      };
+    },
+
+    /**
+     * 客户下拉框改变
+     * @param currCustomerId
+     */
     onCustomerSelChanged(currCustomerId) {
       this.formQueryParams.customerId = currCustomerId;
       this.loadFormList();
     },
 
+    /**
+     * 点击搜索按钮
+     */
     onSearchClicked() {
       this.loadItemList();
+    },
+
+    /**
+     * 合并单元格回调
+     * @param row
+     * @param column
+     * @param rowIndex
+     * @param columnIndex
+     * @returns {(default.methods.mergeCellMap.formCode.mergeRowsQty|number|*|number)[]|number[]}
+     */
+    mergeCells({row, column, rowIndex, columnIndex}) {
+
+      let columnKey = column.property;
+
+      if (columnKey !== 'formCode' && columnKey !== 'itemGroupName') {
+        // if (columnKey !== 'formCode') {
+        return [1, 1];
+      }
+
+      let rst;
+
+      if (columnKey === 'formCode') {
+        rst = [row.formCodeMergeRows, 1];
+      }
+
+      if (columnKey === 'itemGroupName') {
+        rst = [row.groupNameMergeRows, 1];
+        console.log(columnKey, ":", rst)
+      }
+
+      return rst;
     }
   }
 }