fix: table宽度计算bug

gmfe · Oct 23, 2023 · ec2f67f · ec2f67f
1 parent 35c0129
commit ec2f67f
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 56 deletions.
diff --git a/src/printer/printer.js b/src/printer/printer.js
@@ -1,5 +1,6 @@
 import i18next from '../../locales'
 import React from 'react'
+import { reaction } from 'mobx'
 import classNames from 'classnames'
 import { inject, observer, Provider } from 'mobx-react'
 import PropTypes from 'prop-types'
@@ -111,33 +112,42 @@ class Printer extends React.Component {
   componentDidMount() {
     const { printerStore, config, getremainpageHeight } = this.props
     const batchPrintConfig = config.batchPrintConfig
-    // 连续打印不需要计算
-    if (batchPrintConfig !== 2) {
-      // didMount 代表第一次渲染完成
-      printerStore.setReady(true)
-
-      // 开始计算，获取各种数据
-      config?.productionMergeType // productionMergeType有值的时候，是生产打印单，需要合并单元格的，分开计算
-        ? printerStore.computedRowTablePages()
-        : printerStore.computedPages()
-
-      /** @decscription 空白行填充补充 */
-      printerStore.computedPages()
-
-      if (config.autoFillConfig?.checked) {
-        this.props.printerStore.setAutofillConfig(
-          config.autoFillConfig?.checked || false
+    // didMount 代表第一次渲染完成
+    // 需要等table计算完成之后，才能计算 pages
+    const disposer = reaction(
+      () => printerStore.tableReady,
+      tableReady => {
+        const tableIsReady = Object.keys(tableReady).every(
+          key => tableReady[key]
         )
-        this.props.printerStore.changeTableData()
+        if (tableIsReady) {
+          // 连续打印不需要计算
+          if (batchPrintConfig !== 2) {
+            printerStore.setReady(true)
+            // 开始计算，获取各种数据
+            config?.productionMergeType // productionMergeType有值的时候，是生产打印单，需要合并单元格的，分开计算
+              ? printerStore.computedRowTablePages()
+              : printerStore.computedPages()
+            /** @decscription 空白行填充补充 */
+            printerStore.computedPages()
+            if (config.autoFillConfig?.checked) {
+              this.props.printerStore.setAutofillConfig(
+                config.autoFillConfig?.checked || false
+              )
+              this.props.printerStore.changeTableData()
+            }
+            // 获取剩余空白高度，传到editor
+            getremainpageHeight &&
+              getremainpageHeight(printerStore.remainPageHeight)
+          }
+          disposer()
+          this.setState({}, () => {
+            this.props.onReady()
+          })
+        }
       }
-
-      // 获取剩余空白高度，传到editor
-      getremainpageHeight && getremainpageHeight(printerStore.remainPageHeight)
-    }
+    )
     // Printer 不是立马就呈现出最终样式，有个过程。这个过程需要时间，什么 ready，不太清楚，估借 setState 来获取过程结束时刻
-    this.setState({}, () => {
-      this.props.onReady()
-    })
   }
 
   init() {

diff --git a/src/printer/store.js b/src/printer/store.js
@@ -34,6 +34,12 @@ const parseFloatFun = a => {
 class PrinterStore {
   @observable ready = false
 
+  /**
+   * 需要等待table渲染完毕才能计算
+   */
+  // eslint-disable-next-line
+  @observable tableReady = {}
+
   // eslint-disable-next-line
   @observable config = {}
   // eslint-disable-next-line
@@ -81,6 +87,12 @@ class PrinterStore {
     this.selected = null
     this.showCombineSkuDetail = config?.combineSkuDetail?.show || false
     this.showIngredientDetail = config?.ingredientDetail?.show || false
+    this.tableReady = {}
+    config.contents.map((v, index) => {
+      if (v.type === 'table') {
+        this.tableReady[`contents.table.${index}`] = false
+      }
+    })
   }
 
   @action
@@ -110,14 +122,25 @@ class PrinterStore {
 
   @action
   setTable(name, table) {
-    this.tablesInfo[name] = table
+    this.tablesInfo = {
+      ...this.tablesInfo,
+      [name]: table
+    }
   }
 
   @action
   setReady(ready) {
     this.ready = ready
   }
 
+  @action
+  setTableReady(name, ready) {
+    this.tableReady = {
+      ...this.tableReady,
+      [name]: ready
+    }
+  }
+
   get tableConfig() {
     const { autoFillConfig } = this.config
     if (!this.selectedRegion && !autoFillConfig?.checked) return null
@@ -330,7 +353,6 @@ class PrinterStore {
           table.body.heights,
           dataKey
         )
-        console.log('heights', heights)
         // 表格行的索引,用于table.slice(begin, end), 分割到不同页面中
         let begin = 0
         let end = 0

diff --git a/src/printer/table.js b/src/printer/table.js
@@ -33,6 +33,19 @@ class Table extends React.Component {
   }
 
   componentDidMount() {
+    if (!this.props.printerStore.ready) {
+      this.getTableHeight()
+    }
+  }
+
+  componentDidUpdate() {
+    if (!this.props.printerStore.tableReady[this.props.name]) {
+      this.getTableHeight()
+      this.props.printerStore.setTableReady(this.props.name, true)
+    }
+  }
+
+  getTableHeight = () => {
     let {
       name,
       printerStore,
@@ -41,37 +54,34 @@ class Table extends React.Component {
     // 数据
     dataKey = getDataKey(dataKey, arrange)
     const tableData = printerStore.data._table[dataKey] || []
+    const $table = this.ref.current.querySelector('table')
+    const tHead = $table.querySelector('thead')
+    const ths = tHead.querySelectorAll('th') || []
+    const trs =
+      $table.querySelectorAll(
+        `${
+          isRowSpanTable(tableData)
+            ? 'tbody .rowSpan-column-rowSpan' // 序号的那一列有这个类名
+            : 'tbody tr'
+        }`
+      ) || []
+    const trRowSpan = $table.querySelectorAll('tbody tr') || []
+    const detailsDiv = $table.querySelectorAll('tr td .b-table-details')
+    printerStore.setHeight(name, getHeight($table))
 
-    if (!printerStore.ready) {
-      const $table = this.ref.current.querySelector('table')
-      const tHead = $table.querySelector('thead')
-      const ths = tHead.querySelectorAll('th') || []
-      const trs =
-        $table.querySelectorAll(
-          `${
-            isRowSpanTable(tableData)
-              ? 'tbody .rowSpan-column-rowSpan' // 序号的那一列有这个类名
-              : 'tbody tr'
-          }`
-        ) || []
-      const trRowSpan = $table.querySelectorAll('tbody tr') || []
-      const detailsDiv = $table.querySelectorAll('tr td .b-table-details')
-      printerStore.setHeight(name, getHeight($table))
-
-      printerStore.setTable(name, {
-        head: {
-          height: getHeight(tHead),
-          widths: _.map(ths, th => getHeadThWidth(th))
-        },
-        body: {
-          heights: _.map(trs, tr => getHeight(tr)),
-          children: _.map(detailsDiv, div => getHeight(div))
-        },
-        bodyTr: {
-          heights: _.map(trRowSpan, tr => getHeight(tr))
-        }
-      })
-    }
+    printerStore.setTable(name, {
+      head: {
+        height: getHeight(tHead),
+        widths: _.map(ths, th => getHeadThWidth(th))
+      },
+      body: {
+        heights: _.map(trs, tr => getHeight(tr)),
+        children: _.map(detailsDiv, div => getHeight(div))
+      },
+      bodyTr: {
+        heights: _.map(trRowSpan, tr => getHeight(tr))
+      }
+    })
   }
 
   handleClick = e => {