gm-printer 10.42.2 → 10.42.3-beta.1

package/src/printer/block.js

@@ -8,7 +8,12 @@ import BarCode from './barcode'
 import QrCode from './qrcode'
 import Tag from './tag'
 
-@inject('printerStore')
+// editStore 用函数形式注入:打印态(do_print 的 iframe)没有 editStore Provider,
+// 字符串形式的 inject 会直接抛错,这里降级为 null 关闭编辑能力
+@inject(({ printerStore, editStore }) => ({
+  printerStore,
+  editStore: editStore || null
+}))
 @observer
 class Block extends React.Component {
   constructor(props) {
@@ -16,8 +21,10 @@ class Block extends React.Component {
     this.state = {
       clientX: null,
       clientY: null,
-      isEdit: false
+      isEdit: false,
+      isResizing: false
     }
+    this.resizeState = null
   }
 
   componentDidMount() {
@@ -32,6 +39,7 @@ class Block extends React.Component {
       'gm-printer-block-edit',
       this.handleBlockEdit
     )
+    this.teardownResize()
   }
 
   handleBlockEdit = e => {
@@ -112,6 +120,118 @@ class Block extends React.Component {
     })
   }
 
+  // 电子签章:图片四角等比例拖拽缩放
+  handleResizeStart = (direction, e) => {
+    // 阻止触发块的选中/拖动
+    e.stopPropagation()
+    e.preventDefault()
+
+    const {
+      config: { style, ratio }
+    } = this.props
+
+    const initW = parseFloat(style.width) || 0
+    const initH = parseFloat(style.height) || 0
+    // 旧模板无 ratio 时按当前显示宽高锁定;宽或高缺失(存量块无 width)时退回 1,
+    // 避免比例算出 0 导致高度 Infinity
+    const fallbackRatio = initW > 0 && initH > 0 ? initW / initH : 1
+    this.resizeState = {
+      direction,
+      startX: e.clientX,
+      startY: e.clientY,
+      initW,
+      initH,
+      initL: parseFloat(style.left) || 0,
+      initT: parseFloat(style.top) || 0,
+      // ratio = 原始宽/高
+      ratio: ratio || fallbackRatio,
+      baseStyle: style
+    }
+
+    this.setState({
+      isResizing: true
+    })
+
+    window.addEventListener('mousemove', this.handleResizeMove)
+    window.addEventListener('mouseup', this.handleResizeEnd)
+  }
+
+  handleResizeMove = e => {
+    if (!this.resizeState) return
+
+    // rAF 节流,避免高频 mousemove 打爆渲染
+    if (this.resizePending) return
+    this.resizePending = e
+    window.requestAnimationFrame(() => {
+      const evt = this.resizePending
+      this.resizePending = null
+      if (!evt || !this.resizeState) return
+      this.doResize(evt)
+    })
+  }
+
+  doResize = e => {
+    const {
+      direction,
+      startX,
+      initW,
+      initH,
+      initL,
+      initT,
+      ratio,
+      baseStyle
+    } = this.resizeState
+    const dx = e.clientX - startX
+
+    // 右侧角向右放大,左侧角向左放大
+    let width =
+      direction === 'rb' || direction === 'rt' ? initW + dx : initW - dx
+    // 最小尺寸兜底,防止翻转
+    width = Math.max(width, 10)
+    const height = Math.round(width / ratio)
+    width = Math.round(width)
+
+    // 锚定对角:左向角拖拽时右/下边不动,上向角拖拽时下边不动
+    let left = initL
+    let top = initT
+    if (direction === 'lb' || direction === 'lt') {
+      left = initL + initW - width
+    }
+    if (direction === 'rt' || direction === 'lt') {
+      top = initT + initH - height
+    }
+
+    dispatchMsg('gm-printer-block-style-set', {
+      style: {
+        ...baseStyle,
+        width: width + 'px',
+        height: height + 'px',
+        left: left + 'px',
+        top: top + 'px'
+      }
+    })
+  }
+
+  handleResizeEnd = () => {
+    // 先 flush 掉节流里排队中的最后一帧,避免松手回退
+    if (this.resizePending) {
+      const evt = this.resizePending
+      this.resizePending = null
+      this.doResize(evt)
+    }
+    this.teardownResize()
+    this.setState({
+      isResizing: false
+    })
+  }
+
+  teardownResize = () => {
+    window.removeEventListener('mousemove', this.handleResizeMove)
+    window.removeEventListener('mouseup', this.handleResizeEnd)
+    this.resizeState = null
+    this.resizePending = null
+  }
+
   render() {
     let {
       name,
@@ -119,6 +239,7 @@ class Block extends React.Component {
       pageIndex,
       className,
       printerStore,
+      editStore,
       ...rest
     } = this.props
     const { isEdit } = this.state
@@ -186,6 +307,14 @@ class Block extends React.Component {
     }
 
     const active = name === printerStore.selected
+    const { isResizing } = this.state
+    const showResizeHandles = !!(
+      active &&
+      type === 'image' &&
+      editStore &&
+      editStore.imageConfig &&
+      editStore.imageConfig.resizable
+    )
 
     return (
       <div
@@ -193,7 +322,7 @@ class Block extends React.Component {
         className={classNames('gm-printer-block', className, {
           active
         })}
-        draggable
+        draggable={!isResizing}
         onDragStart={this.handleDragStart}
         onDragEnd={this.handleDragEnd}
         onClick={this.handleClick}
@@ -221,6 +350,26 @@ class Block extends React.Component {
           />
         )}
         {content}
+        {showResizeHandles && (
+          <>
+            <div
+              className='gm-printer-resize-handle gm-printer-resize-lt'
+              onMouseDown={this.handleResizeStart.bind(this, 'lt')}
+            />
+            <div
+              className='gm-printer-resize-handle gm-printer-resize-rt'
+              onMouseDown={this.handleResizeStart.bind(this, 'rt')}
+            />
+            <div
+              className='gm-printer-resize-handle gm-printer-resize-lb'
+              onMouseDown={this.handleResizeStart.bind(this, 'lb')}
+            />
+            <div
+              className='gm-printer-resize-handle gm-printer-resize-rb'
+              onMouseDown={this.handleResizeStart.bind(this, 'rb')}
+            />
+          </>
+        )}
       </div>
     )
   }
@@ -231,7 +380,8 @@ Block.propTypes = {
   config: PropTypes.object.isRequired,
   pageIndex: PropTypes.number.isRequired,
   className: PropTypes.string,
-  printerStore: PropTypes.object
+  printerStore: PropTypes.object,
+  editStore: PropTypes.object
 }
 
 export default Block

package/src/printer/compute_pages.js

@@ -62,7 +62,8 @@ function init() {
  *                                            影响合计行渲染与行高，进而影响分页边界）
  * @returns {Promise<{pages: Array, remainPageHeight: number, tableCustomerRowHeight: number}>}
  *          pages: [[{type, index, begin, end}, ...], ...] 对 data._table[contents[i].dataKey] 行号的切片
- *          remainPageHeight: 最后一页剩余高度（供行数填充换算）
+ *          remainPageHeight: 行数填充基准高度（填充表格最后一段所在页的剩余高度，
+ *                            无填充表格时为末页剩余；供行数填充换算）
  *          tableCustomerRowHeight: 表格行高（供行数填充换算）
  */
 function computePages({ data, config, isSomeSubtotalTr }) {

package/src/printer/multi_column.js

@@ -5,6 +5,7 @@ export const INDEX_KEY = '序号'
 
 const SPECIAL_ROW_KEYS = [
   '_special',
+  '_specialText', // 分类标题行（三级分类/商品分类的品类名行），漏掉会在多栏重排时被当普通行丢弃
   '_diyCategorySubtotal',
   '_diyTagSubtotal',
   '_customTr'
@@ -345,6 +346,58 @@ export const ensureRowSerialKeys = (
   return next
 }
 
+/**
+ * 统一收敛多栏序号，修复「半行续号」与「空行起始序号」两处独立计算导致的序号重复
+ * （如 5 条数据双栏：第三行第二列续号为 6，第四行空行起始又编出 6）。
+ * - 先给最后一个实数据行的右侧空格续号并写回（渲染侧 ensureRowSerialKeys 不再另行补号）
+ * - 空行序号以「全表已用最大序号 + 1」连续重编，与半行续号同源
+ * 幂等，重复执行结果不变；仅 fillIndex 开启时生效
+ */
+export const normalizeMultiSerials = (rows, colNumber, fillIndex) => {
+  if (!fillIndex || !rows?.length || colNumber < 1) return rows
+  const keys = getSerialKeys(colNumber)
+  const isFill = row => row && !row._isEmptyData && !isSpecialTableRow(row)
+
+  const result = rows.slice()
+
+  // 实数据行已用最大序号
+  let max = 0
+  result.forEach(row => {
+    if (!isFill(row)) return
+    keys.forEach(key => {
+      const n = toSerialNumber(row?.[key])
+      if (n != null && n > max) max = n
+    })
+  })
+
+  // 1. 最后一个实数据行的空格续号（写回数据，保证序号只有一处来源）
+  for (let i = result.length - 1; i >= 0; i--) {
+    if (!isFill(result[i])) continue
+    const next = { ...result[i] }
+    keys.forEach(key => {
+      if (!isFilledIndexValue(next[key])) {
+        max += 1
+        next[key] = max
+      }
+    })
+    result[i] = next
+    break
+  }
+
+  // 2. 空行从 max+1 连续重编，不会与实数据序号/半行续号撞号
+  result.forEach((row, i) => {
+    if (!row?._isEmptyData || isSpecialTableRow(row)) return
+    const next = { ...row }
+    keys.forEach(key => {
+      max += 1
+      next[key] = max
+    })
+    result[i] = next
+  })
+
+  return result
+}
+
 /** 最后一行右侧空单元格续编序号 */
 export const fillPartialLastRow = (rows, colNumber, fillIndex) => {
   if (!fillIndex || !rows?.length || colNumber <= 1) return rows

package/src/printer/page_summary.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import _ from 'lodash'
-import { getDataKey, isMultiTable } from '../util'
+import { getDataKey, isMultiTable, isMaskedValue, MASKED_VALUE } from '../util'
 import Big from 'big.js'
 import { observer } from 'mobx-react'
 import { get } from 'mobx'
@@ -19,6 +19,8 @@ const regExp = text => {
  * @returns {*|string}
  */
 const sumCol = (key, dataList, summaryFieldsResultToNumber = []) => {
+  // 任一值脱敏 '***' 则合计显 '***'(原逻辑 Big('***') 抛异常被 catch,合计显空串)
+  if (dataList.some(item => isMaskedValue(item[key]))) return MASKED_VALUE
   let result
   try {
     result = dataList

package/src/printer/printer.js

@@ -100,6 +100,13 @@ class Printer extends React.Component {
       await this.props.printerStore.setFillIndex(nextProps.fillIndex)
       await this.props.printerStore.setData(nextProps.data)
       await this.props.printerStore.setReady(true)
+      // 与 componentDidMount 同序：先按当前数据分页拿到行数填充基准，再补空行、
+      // 按补空后的数据重新分页。缺前置分页时 changeTableData 只能用上一轮
+      // （可能已含空行）的 remainPageHeight 换算行数，开关填充时行数会偏小或偏大
+      await this.props.printerStore.computedPages()
+      // 把「未补空」基准回报给编辑器，与挂载流程同口径
+      this.props.getremainpageHeight &&
+        this.props.getremainpageHeight(this.props.printerStore.remainPageHeight)
       await this.props.printerStore.changeTableData()
       await this.props.printerStore.computedPages()
     }
@@ -132,7 +139,7 @@ class Printer extends React.Component {
         printerStore.changeTableData()
         printerStore.computedPages()
       }
-      // 获取剩余空白高度，传到editor
+      // 获取剩余空白高度，传到 editor
       getremainpageHeight && getremainpageHeight(printerStore.remainPageHeight)
     }
     printerStore.setReady(true)

package/src/printer/store.js

@@ -7,7 +7,8 @@ import {
   getDataKey,
   caclSingleDetailsPageHeight,
   getArrayMid,
-  getOverallOrderTrHeight
+  getOverallOrderTrHeight,
+  isMaskedValue
 } from '../util'
 import {
   isDetailOneRowSelectKey,
@@ -23,6 +24,7 @@ import {
   detectColNumber,
   ensureRowSerialKeys,
   flattenHorizontalPackedRows,
+  normalizeMultiSerials,
   repackVerticalTableByPageRanges,
   packVerticalNewspaper,
   packHorizontalRowMajor,
@@ -45,6 +47,8 @@ const canSplitRowDetails = (dataKey, row) => {
 }
 
 const price = (n, f = 2) => {
+  // 脱敏值 '***' 原样返回(不能走 isNaN 判空,空单元格仍需显空)
+  if (isMaskedValue(n)) return n
   if (isNaN(n)) return null
   return Big(n || 0).toFixed(f)
 }
@@ -64,7 +68,7 @@ class PrinterStore {
 
   @observable pages = [] // [{type, index, begin, end}]
 
-  /** 当前页剩余空白高度 */
+  /** 行数填充基准：填充表格最后一段所在页的剩余空白高度；无填充表格时为末页剩余 */
   @observable remainPageHeight = 0
   @observable isSave = false
   /** data._table 非 observable，变更后递增以驱动预览重渲 */
@@ -323,6 +327,8 @@ class PrinterStore {
 
     // 使用本地数组累积分页结果，避免循环中反复触发 observable 更新
     const pages = []
+    // 各表格的行高数组（含明细拆分 splice 后的结果），供行数填充基准按同一口径复算
+    const splicedHeightsMap = {}
     // 每页必有 页眉header, 页脚footer , 签名
     const allPagesHaveThisHeight = heightMap.header + heightMap.footer
     // 退出计算! 因为页眉 + 页脚 > currentPageHeight,页面装不下其他东西
@@ -358,43 +364,15 @@ class PrinterStore {
           index++
           continue
         }
-        const {
-          subtotal,
-          dataKey,
-          summaryConfig,
-          overallOrder,
-          diySubtotal
-        } = content
-        // 如果显示每页合计,那么table高度多预留一行高度
-        const subtotalTrHeight = subtotal.show ? getSumTrHeight(subtotal) : 0
-        // 如果显示整单合计,那么table高度多预留一行高度
-        const overallOrderTrHeight = overallOrder?.show
-          ? getOverallOrderTrHeight(overallOrder)
-          : 0
-        // 如果每页合计(新的),那么table高度多预留一行高度
-        const pageSummaryTrHeight =
-          summaryConfig?.pageSummaryShow && !isMultiTable(dataKey) // 双栏table没有每页合计
-            ? getSumTrHeight(summaryConfig)
-            : 0
-
-        // 如果显示自定义每页合计,那么table高度多预留一行高度
-        const diySubtotalTrHeight = diySubtotal?.show
-          ? getOverallOrderTrHeight(diySubtotal) // 使用相同的计算方式
-          : 0
-
-        // 每个表格都具有的高度
-        const allTableHaveThisHeight =
-          table.head.height +
-          subtotalTrHeight +
-          pageSummaryTrHeight +
-          overallOrderTrHeight +
-          diySubtotalTrHeight
+        const { dataKey } = content
+        // 每个表格都具有的高度（表头 + 各类合计行），提取成方法供填充基准复用同一口径
+        const allTableHaveThisHeight = this.getTableAllHaveHeight(index)
 
         /** 当前page页面的最小高度 */
         const currentPageMinimumHeight =
           allPagesHaveThisHeight + allTableHaveThisHeight
         // 最后一项是表格时，末页仍要渲染签名：装行可用高度预留签名，避免空行顶进签名区
-        const isLastContent = index === this.config.contents.length - 1
+        const isLastContent = index === contentsLength - 1
         const signReserve = isLastContent ? this.getSignHeight() : 0
         /** 当前page可容纳的table高度 */
         let pageAccomodateTableHeight = roundHeight(
@@ -404,6 +382,8 @@ class PrinterStore {
         const heights = [
           ...this.getNormalTableBodyHeights(table.body.heights, dataKey)
         ]
+        // 保留引用：该数组会被明细拆分 splice，填充基准需要用拆分后的行高
+        splicedHeightsMap[index] = heights
         const tableData = tableDataMap[dataKey] || []
         // 表格行的索引,用于table.slice(begin, end), 分割到不同页面中
         let begin = 0
@@ -486,7 +466,7 @@ class PrinterStore {
                 )
                 break
               }
-              // 行无法拆分（普通长文本列）或拆分失败
+              // 行无法拆分（普通长文本列）或拆分失败时，强制推进 end 防止死循环
               if (end === begin) {
                 // 新一页可容纳的 table 高度（页高 - 页眉页脚）
                 const fullPageAccomodateTableHeight = roundHeight(
@@ -605,15 +585,127 @@ class PrinterStore {
       currentPageHeight += this.getSignHeight()
     }
 
-    this.remainPageHeight = Math.max(
-      0,
-      Math.round(pageHeight - currentPageHeight)
+    // 行数填充基准：优先取「填充表格最后一段所在页」的剩余高度（表格底部与该页
+    // 可用底边之间的空白）。旧口径固定取末页剩余，当填充表格不在末页（下方内容
+    // 被挤到下一页）时，行数按末页空间换算会超出所在页容量：多出的空行被切到
+    // 下一页渲染成空表格，或把同页后续表格挤到下一页。
+    // 填充基准不做 Math.round 向上取整，避免整行边界多算 ≤1px 导致重分页时溢出
+    const fillRemainHeight = this.computeFillTableRemainHeight(
+      pages,
+      pageHeight,
+      heightMap,
+      splicedHeightsMap
     )
+    this.remainPageHeight =
+      fillRemainHeight != null
+        ? Math.max(0, fillRemainHeight)
+        : Math.max(0, Math.round(pageHeight - currentPageHeight))
     this.isSave = false
     this.config.isSave = false
     this.repackVerticalMultiByPages()
   }
 
+  /** 表格固定高度：表头 + 每页/整单/自定义合计行（不含数据行），与 computedPages 分页口径一致 */
+  getTableAllHaveHeight(contentIndex) {
+    const table = this.tablesInfo[`contents.table.${contentIndex}`]
+    if (!table?.head) return 0
+    const content = this.config.contents[contentIndex]
+    const {
+      subtotal,
+      dataKey,
+      summaryConfig,
+      overallOrder,
+      diySubtotal
+    } = content
+    // 如果显示每页合计,那么table高度多预留一行高度
+    const subtotalTrHeight = subtotal.show ? getSumTrHeight(subtotal) : 0
+    // 如果显示整单合计,那么table高度多预留一行高度
+    const overallOrderTrHeight = overallOrder?.show
+      ? getOverallOrderTrHeight(overallOrder)
+      : 0
+    // 如果每页合计(新的),那么table高度多预留一行高度
+    const pageSummaryTrHeight =
+      summaryConfig?.pageSummaryShow && !isMultiTable(dataKey) // 双栏table没有每页合计
+        ? getSumTrHeight(summaryConfig)
+        : 0
+    // 如果显示自定义每页合计,那么table高度多预留一行高度
+    const diySubtotalTrHeight = diySubtotal?.show
+      ? getOverallOrderTrHeight(diySubtotal) // 使用相同的计算方式
+      : 0
+
+    return (
+      table.head.height +
+      subtotalTrHeight +
+      pageSummaryTrHeight +
+      overallOrderTrHeight +
+      diySubtotalTrHeight
+    )
+  }
+
+  /** 行数填充目标表格在 contents 中的索引（对齐 tableConfig 的解析口径），无法解析返回 null */
+  getFillTableContentIndex() {
+    const { autoFillConfig } = this.config
+    // checked 为 false 时 region 也保留着（编辑器开关来回切），此时同样能定位，
+    // 让基准在「未开启填充」的分页里也保持正确口径
+    if (!this.selectedRegion && !autoFillConfig?.region) return null
+    const region = this.selectedRegion || autoFillConfig.region
+    const contentIndex = Number(region.split('.')[2])
+    const content = this.config.contents[contentIndex]
+    if (!content || !_.has(content, 'dataKey')) return null
+    return contentIndex
+  }
+
+  /**
+   * 填充表格最后一段所在页的剩余高度（表格底部到该页可用底边的空白）。
+   * 高度口径与 computedPages 一致：页眉页脚 + 该页各内容
+   * （表格固定高度 + 分段行高 / panel 实测高），所在页为末页时再扣签名区。
+   * 定位不到填充表格（未配置 / 表格无数据被跳过）时返回 null，由调用方退回旧口径。
+   */
+  computeFillTableRemainHeight(
+    pages,
+    pageHeight,
+    heightMap,
+    splicedHeightsMap
+  ) {
+    const fillIndex = this.getFillTableContentIndex()
+    if (fillIndex == null || !pages?.length) return null
+
+    // 定位填充表格最后一个分段所在的页（一个表格每页至多一个分段）
+    let pageIndex = -1
+    for (let i = pages.length - 1; i >= 0; i--) {
+      if (
+        (pages[i] || []).some(
+          panel => panel?.type === 'table' && panel.index === fillIndex
+        )
+      ) {
+        pageIndex = i
+        break
+      }
+    }
+    if (pageIndex < 0) return null
+
+    // 按分页同一套口径累计该页已用高度：表格下方还有内容时一并计入，
+    // 填充就只会补「表格与后续内容之间」的空隙，不会把它们挤到下一页
+    let used = heightMap.header + heightMap.footer
+    ;(pages[pageIndex] || []).forEach(panel => {
+      if (panel.type === 'table') {
+        const heights = splicedHeightsMap[panel.index] || []
+        used += this.getTableAllHaveHeight(panel.index)
+        for (let r = panel.begin; r < panel.end; r++) {
+          used += heights[r] || 0
+        }
+      } else {
+        used += heightMap[`contents.panel.${panel.index}`] || 0
+      }
+    })
+
+    // 签名只渲染在最后一页，填充所在页为末页时同样要预留
+    const signReserve =
+      pageIndex === pages.length - 1 ? this.getSignHeight() : 0
+    const remain = pageHeight - used - signReserve
+    return Number.isFinite(remain) ? remain : null
+  }
+
   getTablePageRanges(contentIndex, rows) {
     const ranges = []
     this.pages.forEach(page => {
@@ -1045,7 +1137,12 @@ class PrinterStore {
       )
     )
     withPartial.push(...fillList)
-    this.data._table[dataKey] = withPartial
+    // 半行续号与空行起始序号统一收敛，防止两处各自计算造成序号重复（如双栏 5 条出现两个 6）
+    this.data._table[dataKey] = normalizeMultiSerials(
+      withPartial,
+      colNumber,
+      this.fillIndex
+    )
   }
 
   @action.bound

package/src/printer/table_diy_overallOrder_tr.js

@@ -2,10 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
 // import Big from 'big.js'
-import { coverDigit2Uppercase, getDataKey } from '../util'
+import { coverDigit2Uppercase, getDataKey, maskedSum } from '../util'
 import { observer } from 'mobx-react'
 import classNames from 'classnames'
-import Big from 'big.js'
 
 const DiyOverallOrder = props => {
   const {
@@ -15,20 +14,14 @@ const DiyOverallOrder = props => {
   } = props
   const tableData = printerStore.data._table[getDataKey(dataKey)] || []
 
-  // 计算合计
+  // 计算合计:任一渲染结果脱敏 '***' 则合计显 '***'(整格判定假设同 table_diy_summary_tr)
   const sumData = field => {
-    return _.reduce(
-      tableData,
-      (a, b, i) => {
-        let result = a
-        const bRes = printerStore
-          .templateTable(field, dataKey, i, pageIndex)
-          .replace(/\(\)/g, '')
-        result = a.plus(+bRes || 0)
-        return result
-      },
-      Big(0)
-    ).toFixed(2)
+    const values = _.map(tableData, (b, i) =>
+      printerStore
+        .templateTable(field, dataKey, i, pageIndex)
+        .replace(/\(\)/g, '')
+    )
+    return maskedSum(values)
   }
 
   if (!diyOverallOrder?.show || !printerStore?.ready) {