feat: 增加rowSpan

gmfe · May 10, 2023 · 8a1a8e9 · 8a1a8e9
1 parent 5d3327d
commit 8a1a8e9
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 22 deletions.
diff --git a/src/editor/context_menu.js b/src/editor/context_menu.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import CommonContextMenu from '../common/common_context_menu'
 import { inject, observer } from 'mobx-react'
 import _ from 'lodash'
+import { toJS } from 'mobx'
 import { Printer } from '../printer'
 
 const blockTypeList = [
@@ -135,7 +136,8 @@ class ContextMenu extends React.Component {
           isAutoFilling={editStore.isAutoFilling}
           lineheight={editStore.computedTableCustomerRowHeight}
           config={editStore.config}
-          data={editStore.mockData}
+          // 传入mobx对象，会导致后面各种判断失效
+          data={toJS(editStore.mockData)}
           getremainpageHeight={editStore.setRemainPageHeight}
           updateData={editStore.updateData}
         />

diff --git a/src/printer/store.js b/src/printer/store.js
@@ -748,6 +748,11 @@ class PrinterStore {
     }
   }
 
+  getColumnsData(dataKey, index) {
+    const list = this.data._table[dataKey] || this.data._table
+    return list[index]
+  }
+
   /**
    * 计算合并单元格的数据
    * @param {string} text thead的名称

diff --git a/src/printer/table.js b/src/printer/table.js
@@ -266,6 +266,20 @@ class Table extends React.Component {
                 // 获取process_task_command_id对应的数组
                 const processTaskCommandIdArr =
                   tableDataGroupBy[tableData[i][j]?.process_task_command_id]
+                // 获取rowSpan对应的数组
+                // rowSpan是一个字符串数组，里面装的是要合并的单元格的label
+                // 利用rowSpan把tableData[i]分组
+                const rowSpanGroup = {}
+                tableData[i].forEach(item => {
+                  if (item.rowSpan) {
+                    item.rowSpan.forEach(rowSpanItem => {
+                      if (!rowSpanGroup[rowSpanItem]) {
+                        rowSpanGroup[rowSpanItem] = []
+                      }
+                      rowSpanGroup[rowSpanItem].push(item)
+                    })
+                  }
+                })
                 // 处理特殊情况：计算分页时，一个数组中rowSpan的true和false分成了两个数组的情况
                 if (
                   _.every(
@@ -292,6 +306,11 @@ class Table extends React.Component {
                         // 合并单元格的个数
                         let rowSpanLength = tableData[i].length
 
+                        const trHtml = printerStore.templateRowSpanTable(
+                          col.text,
+                          item
+                        )
+
                         // 是熟食的组合工序聚合
                         if (
                           printerStore.config?.productionMergeType === '3' &&
@@ -317,7 +336,20 @@ class Table extends React.Component {
                           // 合并单元格的个数
                           rowSpanLength = processTaskCommandIdArr.length
                         }
-
+                        if (item.rowSpan) {
+                          if (item.rowSpan.includes(col.text)) {
+                            // 第一个单元格才显示
+                            if (j === 0) {
+                              isRowSpan = true
+                              rowSpanLength = rowSpanGroup[col.text].length
+                            } else {
+                              rowTdRender = true
+                            }
+                          } else {
+                            rowTdRender = false
+                            isRowSpan = false
+                          }
+                        }
                         return (
                           !rowTdRender && (
                             <td
@@ -329,21 +361,23 @@ class Table extends React.Component {
                               style={{
                                 maxWidth: thWidths[index],
                                 minWidth: '24px', // 最小两个字24px
-                                ...col.style
+                                ...col.style,
+                                ...(item.style ?? {})
                               }}
-                              className={classNames({
-                                active:
-                                  getTableColumnName(name, col.index) ===
-                                  printerStore.selected,
-                                [getTableRowColumnName(
-                                  col.rowSpan
-                                )]: col.rowSpan
-                              })}
+                              className={classNames(
+                                {
+                                  active:
+                                    getTableColumnName(name, col.index) ===
+                                    printerStore.selected,
+                                  [getTableRowColumnName(
+                                    col.rowSpan
+                                  )]: item.rowSpan ? j === 0 : col.rowSpan
+                                },
+                                // 加上自定义的class
+                                item.class
+                              )}
                               dangerouslySetInnerHTML={{
-                                __html: printerStore.templateRowSpanTable(
-                                  col.text,
-                                  item
-                                )
+                                __html: trHtml
                               }}
                             />
                           )
@@ -360,20 +394,30 @@ class Table extends React.Component {
                     <td colSpan='99' />
                   ) : (
                     _.map(columns, (col, j) => {
+                      // 获取当前td的数据
+                      const columnsData = printerStore.getColumnsData(
+                        dataKey,
+                        i
+                      )
                       return (
                         <td
                           key={j}
                           data-name={getTableColumnName(name, col.index)}
                           style={{
                             ...getTdStyle(j, col.style),
-                            ...col.style
+                            ...col.style,
+                            ...(columnsData.style ?? {})
                           }}
-                          className={classNames({
-                            active:
-                              getTableColumnName(name, col.index) ===
-                              printerStore.selected,
-                            [getTableRowColumnName(col.rowSpan)]: col.rowSpan
-                          })}
+                          className={classNames(
+                            {
+                              active:
+                                getTableColumnName(name, col.index) ===
+                                printerStore.selected
+                            },
+                            columnsData && columnsData.class,
+                            j === 0 && columnsData && columnsData.tdClass
+                            // 增加自定义class
+                          )}
                           dangerouslySetInnerHTML={{
                             __html: col.isSpecialColumn
                               ? printerStore.templateSpecialDetails(