gm-printer 10.41.9 → 10.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gm-printer",
-  "version": "10.41.9",
+  "version": "10.42.1",
   "description": "diy printer",
   "main": "src/index.js",
   "scripts": {

package/src/common/data_key_util.js

@@ -19,14 +19,33 @@ export function buildDataKey(prefix, suffix) {
   return `${prefix}${suffix}`
 }
 
-/** 下拉选中「按明细单行」时的 value（detail_one_row） */
+/** 下拉选中「按明细单行」时的 value（detail_one_row），可带 category/multi 等后缀 */
 export function isDetailOneRowSelectKey(dataKey) {
-  return getDataKeySuffix(dataKey) === 'detail_one_row'
+  const suffix = getDataKeySuffix(dataKey)
+  return suffix === 'detail_one_row' || suffix.startsWith('detail_one_row_')
 }
 
+/** 独立滚动明细单行（sku/address），可带 category/multi 等后缀 */
 export function isIndependentRolDataKey(dataKey) {
   const suffix = getDataKeySuffix(dataKey)
-  return suffix === 'independent_rol_sku' || suffix === 'independent_rol_address'
+  return (
+    suffix === 'independent_rol_sku' ||
+    suffix === 'independent_rol_address' ||
+    suffix.startsWith('independent_rol_sku_') ||
+    suffix.startsWith('independent_rol_address_')
+  )
+}
+
+/**
+ * 从现有 dataKey 抽出可叠加修饰后缀（category / multi）
+ * 用于切换 goods/merchant 排序时保留右键「商品分类」「双栏」状态
+ */
+export function getDataKeyModifierSuffix(dataKey) {
+  const parts = getDataKeySuffix(dataKey).split('_').filter(Boolean)
+  const modifiers = []
+  if (parts.includes('category')) modifiers.push('category')
+  if (parts.includes('multi')) modifiers.push('multi')
+  return modifiers.length ? `_${modifiers.join('_')}` : ''
 }
 
 export function isLastColDataKey(dataKey) {

package/src/common/editor_customize_config.js

@@ -24,6 +24,9 @@ class EditorCutomizedConfig extends React.Component {
   handleFillIndex = value => {
     const { editStore } = this.props
     editStore.setFillIndex(value)
+    if (editStore.isAutoFilling) {
+      editStore.handleChangeTableData(true)
+    }
   }
 
   handleTaxFreeProductRateDisplay = e => {

package/src/common/editor_store.js

@@ -2,16 +2,37 @@ import i18next from '../../locales'
 import { action, computed, observable, set, toJS } from 'mobx'
 import { pageTypeMap } from '../config'
 import _ from 'lodash'
-import { dispatchMsg, getBlockName, exchange, getColSpanLength } from '../util'
+import {
+  dispatchMsg,
+  getBlockName,
+  exchange,
+  getColSpanLength,
+  isMultiTable,
+  getDataKey,
+  getMultiNumber
+} from '../util'
 import { accountRadioList } from './util'
 import {
   buildDataKey,
+  getDataKeyModifierSuffix,
   getDataKeyPrefix,
   isDetailOneRowSelectKey,
   isIndependentRolDataKey
 } from './data_key_util'
 import React from 'react'
 import { createDiySummaryStoreMethods } from './diy_summary_helper'
+import {
+  detectColNumber,
+  fillEmptyRowIndex,
+  fillPartialLastRow,
+  getMaxSerial,
+  flattenHorizontalPackedRows,
+  packVerticalNewspaper,
+  packHorizontalRowMajor,
+  createEmptyRows,
+  createEmptyRowSkeleton,
+  resolveVerticalEmptyCount
+} from '../printer/multi_column'
 
 class EditorStore {
   @observable
@@ -207,6 +228,7 @@ class EditorStore {
               vv.columns.length +
               vv.className +
               vv.dataKey +
+              (vv.arrange || 'lateral') +
               vv.subtotal.show +
               vv.summaryConfig?.pageSummaryShow +
               vv.customerRowHeight
@@ -246,14 +268,54 @@ class EditorStore {
     tr_count = Math.floor(
       this.remainPageHeihgt / this.computedTableCustomerRowHeight
     )
+    if (tr_count <= 0) return []
 
-    const filledData = {
-      _isEmptyData: true // 表示是填充的空白数据
+    const sample = (tableData || []).find(item => item && !item._isEmptyData)
+    const dataKey =
+      this.computedTableSpecialConfig?.dataKey || autoFillConfig?.dataKey
+    const colNumber = detectColNumber(dataKey, tableData)
+    return createEmptyRows(tr_count, sample, colNumber)
+  }
+
+  /** 多栏表缺失时（如双栏切三栏），从单栏/双栏源表现场打包到 mockData */
+  @action
+  ensureMockMultiTable(dataKey) {
+    if (!dataKey || !isMultiTable(dataKey)) return
+    if (!this.mockData._table) {
+      this.mockData._table = {}
+    }
+    if (this.mockData._table[dataKey]?.length) return
+
+    const isVertical = /_vertical$/.test(dataKey)
+    const sourceKey = dataKey.replace(/_vertical$/, '')
+    const colNumber = getMultiNumber(sourceKey)
+    const singleKey = sourceKey.replace(/_multi3?/, '')
+
+    let sourceRows = this.mockData._table[singleKey]
+    let sourceColNumber = 1
+    if (!sourceRows?.length && /multi3/.test(sourceKey)) {
+      const dualKey = sourceKey.replace('multi3', 'multi')
+      sourceRows = this.mockData._table[dualKey]
+      sourceColNumber = 2
+    }
+    if (!sourceRows?.length) {
+      sourceRows = this.mockData._table[sourceKey]
+      sourceColNumber = isMultiTable(sourceKey) ? colNumber : 1
+    }
+    if (!sourceRows?.length) {
+      this.mockData._table[dataKey] = []
+      return
     }
-    _.map(tableData[0], (val, key) => {
-      filledData[key] = ''
-    })
-    return Array(tr_count).fill(filledData)
+
+    const sourceItems = flattenHorizontalPackedRows(sourceRows, sourceColNumber)
+    const baseRowCount = sourceItems.length
+      ? Math.max(1, Math.ceil(sourceItems.length / colNumber))
+      : 0
+    this.mockData._table[dataKey] = !baseRowCount
+      ? []
+      : isVertical
+      ? packVerticalNewspaper(sourceItems, colNumber, baseRowCount, false)
+      : packHorizontalRowMajor(sourceItems, colNumber)
   }
 
   @action.bound
@@ -262,9 +324,6 @@ class EditorStore {
     if (!this.selectedRegion && !autoFillConfig?.checked) return
     const dataKey =
       this.computedTableSpecialConfig?.dataKey || autoFillConfig?.dataKey
-    // 每次都更新一下？
-    const table = this.mockData._table[dataKey]
-    // 赋值一下
     this.setAutoFillingConfig(isAutoFilling)
     this.setFillIndex(autoFillConfig?.fillIndex || false)
     set(this.config, {
@@ -277,24 +336,112 @@ class EditorStore {
       }
     })
 
-    const hasHadEmptyData = _.some(table, data => data?._isEmptyData)
+    if (dataKey && isMultiTable(dataKey)) {
+      this.ensureMockMultiTable(dataKey)
+      this.ensureMockMultiTable(getDataKey(dataKey, 'vertical'))
+    }
 
-    // 开关打开，且之前数组不包含空数据，再进行填充
+    const syncEmptyRows = key => {
+      if (!this.mockData._table?.[key]) return
+      const list = this.mockData._table[key]
+      const hasHadEmptyData = _.some(list, data => data?._isEmptyData)
+      if (isAutoFilling && !hasHadEmptyData) {
+        list.push(...this.getFilledTableData(list))
+      }
+      if (!isAutoFilling) {
+        this.clearExtraTableData(key)
+        return
+      }
+      this.mockData._table[key] = list
+    }
+
+    const numberEmptyRows = key => {
+      const list = this.mockData._table?.[key]
+      if (!list) return
+      const table = list.filter(item => !item._isEmptyData)
+      const emptyTable = list.filter(item => item._isEmptyData)
+      // 纵向表：对半数据行 + 空行占位；左列优先交给 Printer.repack
+      if (/_vertical$/.test(key)) {
+        const sourceKey = key.replace(/_vertical$/, '')
+        const singleKey = sourceKey.replace(/_multi3?/, '')
+        const colNumber = getMultiNumber(sourceKey)
+        const sourceRows =
+          this.mockData._table[singleKey] ||
+          this.mockData._table[sourceKey] ||
+          []
+        const sourceColNumber = isMultiTable(singleKey)
+          ? getMultiNumber(singleKey)
+          : isMultiTable(sourceKey)
+          ? colNumber
+          : 1
+        const sourceItems = flattenHorizontalPackedRows(
+          sourceRows,
+          sourceColNumber
+        )
+        const baseRowCount = sourceItems.length
+          ? Math.max(1, Math.ceil(sourceItems.length / colNumber))
+          : 0
+        // 钉死总行：repack 后 _isEmptyData 会变少，不能再用 emptyTable.length
+        const emptyCount = resolveVerticalEmptyCount(
+          list.length,
+          baseRowCount,
+          emptyTable.length > 0
+            ? emptyTable.length
+            : this.getFilledTableData(list).length,
+          emptyTable.length > 0
+        )
+        const dataRows = baseRowCount
+          ? packVerticalNewspaper(sourceItems, colNumber, baseRowCount, false)
+          : []
+        const sample = dataRows[0] || sourceRows[0]
+        this.mockData._table[key] = dataRows.concat(
+          createEmptyRows(emptyCount, sample, colNumber)
+        )
+        return
+      }
+      const colNumber = detectColNumber(key, list)
+      const withPartial = fillPartialLastRow(table, colNumber, this.fillIndex)
+      const lastKey = getMaxSerial(withPartial, colNumber) + 1
+      const sample = table[0]
+      this.mockData._table[key] = withPartial.concat(
+        emptyTable.map((item, index) =>
+          fillEmptyRowIndex(
+            {
+              ...createEmptyRowSkeleton(sample, colNumber),
+              ...item,
+              _isEmptyData: true
+            },
+            index,
+            lastKey,
+            colNumber,
+            this.fillIndex
+          )
+        )
+      )
+    }
 
-    if (isAutoFilling && !hasHadEmptyData) {
-      table.push(...this.getFilledTableData(table))
+    syncEmptyRows(dataKey)
+    if (dataKey && isMultiTable(dataKey)) {
+      const verticalKey = getDataKey(dataKey, 'vertical')
+      if (!this.mockData._table[verticalKey]) {
+        this.mockData._table[verticalKey] = []
+      }
+      syncEmptyRows(verticalKey)
     }
-    if (!isAutoFilling) {
-      this.clearExtraTableData(dataKey)
-      return
+    if (isAutoFilling) {
+      numberEmptyRows(dataKey)
+      if (dataKey && isMultiTable(dataKey)) {
+        numberEmptyRows(getDataKey(dataKey, 'vertical'))
+      }
     }
-    this.mockData._table[dataKey] = table
   }
 
   @action
   clearExtraTableData(dataKey) {
-    const newTable = this.mockData._table[dataKey].filter(x => !x._isEmptyData)
-    this.mockData._table[dataKey] = newTable
+    if (!this.mockData._table?.[dataKey]) return
+    this.mockData._table[dataKey] = this.mockData._table[dataKey].filter(
+      x => !x._isEmptyData
+    )
   }
 
   @action
@@ -549,12 +696,39 @@ class EditorStore {
     for (const [key, table] of Object.entries(tableData)) {
       tableData[key] = table.filter(x => !x._isEmptyData)
     }
-    // this.setAutoFillingConfig(false)
+    // 纵向 left-fill 后商品行数 > 对半行且无 _isEmptyData，只滤空行会留下偏多行，
+    // 重挂载测高/remain 偏小，多栏切换后空行补不回来。收回到对半商品行。
+    Object.keys(tableData).forEach(key => {
+      if (!/_vertical$/.test(key) || !isMultiTable(key)) return
+      this.collapseVerticalMultiToBaseRows(key)
+    })
     set(this.mockData, {
       _table: tableData
     })
   }
 
+  /** 纵向多栏收到「对半」商品行，去掉 left-fill 撑开的多余行 */
+  @action
+  collapseVerticalMultiToBaseRows(key) {
+    const sourceKey = key.replace(/_vertical$/, '')
+    const singleKey = sourceKey.replace(/_multi3?/, '')
+    const colNumber = getMultiNumber(sourceKey)
+    const sourceRows =
+      this.mockData._table[singleKey] || this.mockData._table[sourceKey] || []
+    const sourceColNumber = isMultiTable(singleKey)
+      ? getMultiNumber(singleKey)
+      : isMultiTable(sourceKey)
+      ? colNumber
+      : 1
+    const sourceItems = flattenHorizontalPackedRows(sourceRows, sourceColNumber)
+    const baseRowCount = sourceItems.length
+      ? Math.max(1, Math.ceil(sourceItems.length / colNumber))
+      : 0
+    this.mockData._table[key] = baseRowCount
+      ? packVerticalNewspaper(sourceItems, colNumber, baseRowCount, false)
+      : []
+  }
+
   @action
   addConfigBlock(name, type, pos = {}, link = '') {
     let blocks
@@ -1023,6 +1197,13 @@ class EditorStore {
 
     this.config.contents[arr[2]].dataKey = newDataKey.join('_')
 
+    // 双栏↔三栏等切换时，mock 可能缺对应 _table，现场兜底生成，避免整表空白
+    const joinedKey = newDataKey.join('_')
+    if (isMultiTable(joinedKey)) {
+      this.ensureMockMultiTable(joinedKey)
+      this.ensureMockMultiTable(getDataKey(joinedKey, 'vertical'))
+    }
+
     // 三级分类相关 token（商品三级分类/三级分类小计）是纯分组、标题能力，
     // 与每页/整单合计可共存，切换时不再强制关闭合计开关；
     // 其余 token（多栏/一级分类/标签等）保持历史行为：切换时强制关闭
@@ -1044,7 +1225,7 @@ class EditorStore {
         autoFillConfig: {
           ...(this.config.autoFillConfig || {}),
           region: this.selectedRegion || this.config.autoFillConfig?.region,
-          dataKey: newDataKey.join('_'),
+          dataKey: joinedKey,
           checked: true,
           fillIndex: this.fillIndex
         }
@@ -1393,13 +1574,16 @@ class EditorStore {
     const arr = this.selectedRegion.split('.')
     const table = this.config.contents[arr[2]]
     const prefix = getDataKeyPrefix(table.dataKey)
+    // 切换「按商品/按商户排序」时保留已开启的商品分类、双栏后缀，避免点完分类再切排序把 category 冲掉
+    const baseSuffix = dataKey === 'goods' ? 'independent_rol_sku' : 'independent_rol_address'
+    const nextDataKey = buildDataKey(
+      prefix,
+      `${baseSuffix}${getDataKeyModifierSuffix(table.dataKey)}`
+    )
 
     set(table, {
       purchaseSettingKey: dataKey,
-      dataKey:
-        dataKey === 'goods'
-          ? buildDataKey(prefix, 'independent_rol_sku')
-          : buildDataKey(prefix, 'independent_rol_address'),
+      dataKey: nextDataKey,
       detail_sort_type: 0
     })
   }
@@ -1421,7 +1605,8 @@ class EditorStore {
       const table = this.config.contents[arr[2]]
 
       const { dataKey } = table
-      if (isIndependentRolDataKey(dataKey)) {
+      // independent_rol_* / detail_one_row_*（含 category、multi 后缀）在下拉里都映射回「按采购明细单行」
+      if (isIndependentRolDataKey(dataKey) || isDetailOneRowSelectKey(dataKey)) {
         return buildDataKey(getDataKeyPrefix(dataKey), 'detail_one_row')
       }
       return dataKey
@@ -1487,10 +1672,26 @@ class EditorStore {
     if (this.selectedRegion) {
       const arr = this.selectedRegion.split('.')
       if (arr.includes('table')) {
+        const table = this.config.contents[arr[2]]
         this.config.contents[arr[2]] = {
-          ...this.config.contents[arr[2]],
+          ...table,
           arrange: val
         }
+        // 只改排列并清掉旧空行；保持填充开关，交给 Printer 重挂载后
+        // 「先补空 → 再重新分页」恢复空行（勿在此处用旧 remainHeight 立刻补）
+        if (this.isAutoFilling || this.config?.autoFillConfig?.checked) {
+          this.clearAllTableEmptyData()
+          this.setAutoFillingConfig(true)
+          set(this.config, {
+            autoFillConfig: {
+              ...(this.config.autoFillConfig || {}),
+              region: this.selectedRegion,
+              dataKey: table.dataKey,
+              checked: true,
+              fillIndex: this.fillIndex
+            }
+          })
+        }
       }
     }
   }

package/src/editor_purchase/editor_special_table.js

@@ -16,7 +16,9 @@ import _ from 'lodash'
 import { inject, observer } from 'mobx-react'
 import {
   buildDataKey,
+  getDataKeyModifierSuffix,
   getDataKeyPrefix,
+  getDataKeySuffix,
   isDetailOneRowSelectKey,
 } from '../common/data_key_util'
 
@@ -90,19 +92,23 @@ class TableDetailEditor extends React.Component {
           .replace(/{{([^.\s}]+)}}/g, '{{列.$1}}')
       }
       const prefix = getDataKeyPrefix(config.dataKey)
-      const rolSkuKey = buildDataKey(prefix, 'independent_rol_sku')
-      const rolAddressKey = buildDataKey(prefix, 'independent_rol_address')
+      const curSuffix = getDataKeySuffix(config.dataKey)
+      const modifier = getDataKeyModifierSuffix(config.dataKey)
+      // 已是对应 independent_rol_*（含 category/multi）则不再重设，避免冲掉商品分类
       if (
         config.purchaseSettingKey === 'goods' &&
-        config.dataKey !== rolSkuKey
+        !curSuffix.startsWith('independent_rol_sku')
       ) {
-        editStore.setPurchaseTableKey(rolSkuKey, addFields.specialTableConfig)
+        editStore.setPurchaseTableKey(
+          buildDataKey(prefix, `independent_rol_sku${modifier}`),
+          addFields.specialTableConfig
+        )
       } else if (
         config.purchaseSettingKey === 'merchant' &&
-        config.dataKey !== rolAddressKey
+        !curSuffix.startsWith('independent_rol_address')
       ) {
         editStore.setPurchaseTableKey(
-          rolAddressKey,
+          buildDataKey(prefix, `independent_rol_address${modifier}`),
           addFields.specialTableConfig
         )
       }

package/src/index.js

@@ -20,7 +20,8 @@ import {
   getCSS,
   getPrintContainerHTML,
   doBatchFinancePrint,
-  setPrintStyle
+  setPrintStyle,
+  computePages
 } from './printer'
 import { MULTI_SUFFIX, MULTI_SUFFIX3 } from './config'
 
@@ -49,5 +50,6 @@ export {
   MULTI_SUFFIX3,
   getPrintContainerHTML,
   doBatchFinancePrint,
-  setPrintStyle
+  setPrintStyle,
+  computePages
 }

package/src/printer/compute_pages.js

@@ -0,0 +1,122 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import _ from 'lodash'
+import { toJS } from 'mobx'
+import Printer from './printer'
+import getCSS from './get_css'
+import { afterImgAndSvgLoaded } from '../util'
+import { LONG_PRINT } from '../config'
+
+// 与 do_print.js 的容器隔离，使用独立 iframe，避免和打印任务互相 unmount 对方内容
+const printerId = '_gm-printer-compute-pages_' + Math.random()
+let $printer = null
+
+/**
+ * 初始化隐藏渲染容器
+ * 复制自 do_print.js 的 init({ isTest: true }) 分支（iframe 创建 + getCSS 注入），
+ * 差异仅 id 前缀与「永远隐藏」。⚠️ get_css / 容器初始化逻辑变更时两处需同步，
+ * 否则测量环境与打印环境漂移，分页边界不再一致
+ */
+function init() {
+  if (!$printer) {
+    $printer = window.document.createElement('iframe')
+    $printer.id = printerId
+    $printer.style.position = 'fixed'
+    $printer.style.top = '0'
+    $printer.style.width = '100%'
+    // 隐藏起来，用户不可见
+    $printer.style.left = '-2000px'
+    window.document.body.appendChild($printer)
+
+    const idocument = $printer.contentDocument
+    idocument.open()
+    idocument.write('<!DOCTYPE html><html><head></head><body></body></html>')
+    idocument.close()
+
+    const doc = $printer.contentWindow.document
+
+    const style = doc.createElement('style')
+    style.appendChild(doc.createTextNode(getCSS()))
+    doc.head.appendChild(style)
+
+    const div = doc.createElement('div')
+    div.id = 'appContainer'
+
+    doc.body.appendChild(div)
+  }
+}
+
+/**
+ * 按打印分页逻辑计算分页结果（不触发打印）
+ *
+ * 场景：导出功能需要拿到与打印完全一致的分页边界
+ *
+ * 不支持的模板类型（返回空 pages，调用方需自行降级）：
+ *   - batchPrintConfig === 2（合并打印）：componentDidMount 不跑 computedPages，pages 恒空
+ *   - page.type === LONG_PRINT（长条打印）：走 renderLongPage 全量渲染，pages 不对应真实布局
+ *
+ * @param {Object}  options
+ * @param {Object}  options.data             打印数据（结构同 doPrint 的 data，含 _table）
+ * @param {Object}  options.config           模板配置（结构同 doPrint 的 config）
+ * @param {boolean} [options.isSomeSubtotalTr] 每页合计是否展示多个字段（对齐 doPrint 第三参，
+ *                                            影响合计行渲染与行高，进而影响分页边界）
+ * @returns {Promise<{pages: Array, remainPageHeight: number, tableCustomerRowHeight: number}>}
+ *          pages: [[{type, index, begin, end}, ...], ...] 对 data._table[contents[i].dataKey] 行号的切片
+ *          remainPageHeight: 最后一页剩余高度（供行数填充换算）
+ *          tableCustomerRowHeight: 表格行高（供行数填充换算）
+ */
+function computePages({ data, config, isSomeSubtotalTr }) {
+  // 不支持的模板类型提前告警（不阻断，返回结果交由调用方降级处理）
+  if (config.batchPrintConfig === 2 || config.page?.type === LONG_PRINT) {
+    console.warn(
+      '[gm-printer] computePages: 当前模板为合并打印或长条打印，computedPages 不生效，pages 将为空'
+    )
+  }
+
+  return new window.Promise(resolve => {
+    init()
+
+    const $app = $printer.contentWindow.document.getElementById('appContainer')
+    ReactDOM.unmountComponentAtNode($app)
+
+    // computedPages 处理采购明细拆行时会原地 splice data._table，
+    // 深拷贝一份，避免污染调用方数据
+    const clonedData = _.cloneDeep(data)
+    // computedPages 会往 config 顶层写 isSave（store.js），浅拷贝隔离开调用方的
+    // template 对象（stationv2 导出时同一 template 跨多个 sheet 复用）
+    const clonedConfig = { ...config }
+
+    // 依赖 WithStorePrinter 实例字段 printerStore（printer.js）读取分页结果，
+    // Printer 组件重构（store 挂载方式变化）时此处需同步
+    let printerRef = null
+    ReactDOM.render(
+      <Printer
+        ref={ref => {
+          printerRef = ref
+        }}
+        isSomeSubtotalTr={isSomeSubtotalTr}
+        config={clonedConfig}
+        data={clonedData}
+        onReady={() => {
+          // onReady 触发时 componentDidMount 已同步执行完 computedPages()，pages 就绪
+          // 模板含图片时等图片加载完成，避免图片撑高导致测量偏差
+          afterImgAndSvgLoaded(() => {
+            const store = printerRef.printerStore
+            const result = {
+              pages: toJS(store.pages),
+              remainPageHeight: store.remainPageHeight,
+              tableCustomerRowHeight: store.computedTableCustomerRowHeight
+            }
+
+            // 读取完成后卸载，避免 DOM 累积
+            ReactDOM.unmountComponentAtNode($app)
+            resolve(result)
+          }, $app)
+        }}
+      />,
+      $app
+    )
+  })
+}
+
+export { computePages }

package/src/printer/index.js

@@ -7,6 +7,7 @@ import {
   doBatchFinancePrint,
   setPrintStyle
 } from './do_print'
+import { computePages } from './compute_pages'
 import getCSS from './get_css'
 
 export {
@@ -17,5 +18,6 @@ export {
   getCSS,
   getPrintContainerHTML,
   doBatchFinancePrint,
-  setPrintStyle
+  setPrintStyle,
+  computePages
 }