gm-printer 10.11.5-beta2 → 10.11.5

package/src/editor_purchase/store.js

@@ -23,17 +23,30 @@ class Store extends EditorStore {
     tableConfig.columns.replace(newCols)
 
     // 单列-总表最后一列,在columns上修改
-    if (dataKey === 'purchase_last_col') {
+    if (
+      dataKey === 'purchase_last_col' ||
+      dataKey === 'purchase_last_col_noLineBreak'
+    ) {
       tableConfig.columns.push({
         head: i18next.t('明细'),
         headStyle: { textAlign: 'center' },
         style: { textAlign: 'left' },
         isSpecialColumn: true,
+        separator: '+',
+        // detailsType: 'purchase_last_col',
         specialDetailsKey: '__details',
         text: i18next.t(
-          '{{采购数量_计量单位}}{{计量单位}}*{{商户名}}*{{商品备注}}'
+          '{{采购数量_采购单位}}{{采购单位}}*{{商户名}}*{{商品备注}}'
         )
       })
+      // 通过detailsType属性区分单列-总表最后一列的数据是否换行展示
+      dataKey === 'purchase_last_col'
+        ? (tableConfig.columns[
+            tableConfig.columns.length - 1
+          ].detailLastColType = 'purchase_last_col')
+        : (tableConfig.columns[
+            tableConfig.columns.length - 1
+          ].detailLastColType = 'purchase_last_col_noLineBreak')
     }
   }
 
@@ -44,7 +57,10 @@ class Store extends EditorStore {
 
     tableConfig.specialConfig.template_text = value
     // 单列-总表最后一列,在columns上修改
-    if (tableConfig.dataKey === 'purchase_last_col') {
+    if (
+      tableConfig.dataKey === 'purchase_last_col' ||
+      tableConfig.dataKey === 'purchase_last_col_noLineBreak'
+    ) {
       const specialCol = tableConfig.columns.find(o => o.isSpecialColumn)
       specialCol.text = value
     }
@@ -57,7 +73,10 @@ class Store extends EditorStore {
 
     tableConfig.specialConfig.style = value
     // 单列-总表最后一列,在columns上修改
-    if (tableConfig.dataKey === 'purchase_last_col') {
+    if (
+      tableConfig.dataKey === 'purchase_last_col' ||
+      tableConfig.dataKey === 'purchase_last_col_noLineBreak'
+    ) {
       const specialCol = tableConfig.columns.find(o => o.isSpecialColumn)
       specialCol.style = value
     }
@@ -70,7 +89,10 @@ class Store extends EditorStore {
 
     tableConfig.specialConfig.template_text += fieldText
     // 单列-总表最后一列,在columns上修改
-    if (tableConfig.dataKey === 'purchase_last_col') {
+    if (
+      tableConfig.dataKey === 'purchase_last_col' ||
+      tableConfig.dataKey === 'purchase_last_col_noLineBreak'
+    ) {
       const specialCol = tableConfig.columns.find(o => o.isSpecialColumn)
       specialCol.text += fieldText
     }

package/src/index.js

@@ -9,7 +9,7 @@ import EditorStatement from './editor_statement'
 import EditorAccoutStatement from './editor_account_statement'
 import EditorBoxLabel from './editor_box_label'
 import EditorSaleMenus from './editor_salemenus'
-import EditorCannibalize from './editor_cannibalize'
+import EditorAccount from './editor_account'
 import { BatchPrinter, doBatchPrint, doPrint, Printer, getCSS } from './printer'
 import { MULTI_SUFFIX } from './config'
 
@@ -26,7 +26,7 @@ export {
   EditorAccoutStatement,
   EditorBoxLabel,
   EditorSaleMenus,
-  EditorCannibalize,
+  EditorAccount,
   Printer,
   BatchPrinter,
   doPrint,

package/src/printer/block.js

@@ -155,20 +155,28 @@ class Block extends React.Component {
         </div>
       )
     } else if (type === 'barcode') {
+      // sid 合并打印没有订单id值，所以不渲染条形码
+      if (printerStore.template(text)) {
+        content = (
+          <BarCode
+            value={printerStore.template(text)}
+            textMargin={0}
+            margin={0}
+            height={35}
+            width={2}
+            displayValue={false}
+            dataName={name}
+            background='transparent'
+          />
+        )
+      }
+    } else if (type === 'qrcode') {
       content = (
-        <BarCode
+        <QrCode
           value={printerStore.template(text)}
-          textMargin={0}
-          margin={0}
-          height={35}
-          width={2}
-          displayValue={false}
-          dataName={name}
-          background='transparent'
+          size={parseInt(style.height)}
         />
       )
-    } else if (type === 'qrcode') {
-      content = <QrCode value={printerStore.template(text)} />
     }
 
     const active = name === printerStore.selected

package/src/printer/printer.js

@@ -110,7 +110,7 @@ class Printer extends React.Component {
                   key={`contents.table.${index}`}
                   name={`contents.table.${index}`}
                   config={content}
-                  range={{ begin: 0, end: list.length }}
+                  range={{ begin: 0, end: list?.length || 0 }}
                   pageIndex={0}
                   placeholder={`${i18next.t('区域')} ${index}`}
                 />
@@ -208,7 +208,7 @@ class Printer extends React.Component {
                   key={`contents.table.${index}`}
                   name={`contents.table.${index}`}
                   config={content}
-                  range={{ begin: 0, end: list.length }}
+                  range={{ begin: 0, end: list?.length || 0 }}
                   pageIndex={0}
                   placeholder={`${i18next.t('区域')} ${index}`}
                 />

package/src/printer/qrcode.js

@@ -1,10 +1,13 @@
 import React from 'react'
 import QRCode from 'qrcode.react'
 import PropTypes from 'prop-types'
+import _ from 'lodash'
 
 const QrCode = props => {
-  const { value } = props
-  return <QRCode value={value} size={75} />
+  const { value, size } = props
+  return (
+    <QRCode renderAs='svg' value={value} size={_.isFinite(size) ? size : 75} />
+  )
 }
 
 QrCode.propTypes = {

package/src/printer/store.js

@@ -1,6 +1,10 @@
 import i18next from '../../locales'
 import { action, observable } from 'mobx'
-import { getSumTrHeight, isMultiTable } from '../util'
+import {
+  getSumTrHeight,
+  isMultiTable,
+  caclSingleDetailsPageHeight
+} from '../util'
 import _ from 'lodash'
 import Big from 'big.js'
 
@@ -84,17 +88,22 @@ class PrinterStore {
 
     // 某一page的累计高度
     let currentPageHeight = allPagesHaveThisHeight
+    /** 区域1的高度 */
+    let firstPagePanel0Height = 0
     // 当前在处理 contents 的索引
     let index = 0
     // 一页承载的内容. [object, object, ...]
     let page = []
-
+    // 处理配送单有多个表格的情况
+    let tableCount = 0
     /* --- 遍历 contents,将内容动态分配到page --- */
     while (index < this.config.contents.length) {
       const content = this.config.contents[index]
 
       /* 表格内容处理 */
       if (content.type === 'table') {
+        // 是表格就++
+        tableCount++
         // 表格原始的高度和宽度信息
         const table = this.tablesInfo[`contents.table.${index}`]
 
@@ -113,21 +122,15 @@ class PrinterStore {
         const currentPageMinimumHeight =
           allPagesHaveThisHeight + allTableHaveThisHeight
 
+        // 当前数据
+        const tableData = this.data._table[dataKey] || []
+
         // 表格行的索引,用于table.slice(begin, end), 分割到不同页面中
         let begin = 0
         let end = 0
 
         // 如果表格没有数据,那么轮一下个content
-        if (
-          table.body.heights.length === 0 || // 没有数据,不渲染此table
-          table.body.heights[0] + currentPageMinimumHeight > this.pageHeight // 页面无法容纳此table,不渲染这个table了
-        ) {
-          if (
-            table.body.heights[0] + currentPageMinimumHeight >
-            this.pageHeight
-          ) {
-            window.alert('表格明细内容过多，无法打印，请更换其他打印模板') // 例如: 采购明细放在单列-最后一列,造成一列高度大于页面高度
-          }
+        if (table.body.heights.length === 0) {
           index++
         } else {
           // 表格有数据,添加[每个表格都具有的高度]
@@ -137,36 +140,82 @@ class PrinterStore {
           while (end < table.body.heights.length) {
             currentPageHeight += table.body.heights[end]
 
-            // 当前页没有对于空间
+            // 当前页没有多余空间
             if (currentPageHeight > this.pageHeight) {
+              // 第一条数据计算时，不能加上header的高度
+              const calcHeight = this.pageHeight - firstPagePanel0Height
+              // 第一条就极端会有问题
               if (end !== 0) {
-                // ‼️‼️‼️ 极端情况: 如果一行的高度 大于 页面高度, 那么就做下一行
-                if (
-                  table.body.heights[end] + currentPageMinimumHeight >
-                  this.pageHeight
-                ) {
-                  end++
-                }
                 page.push({
                   type: 'table',
                   index,
                   begin,
                   end
                 })
+                // 此页完成任务
+                this.pages.push(page)
+                page = []
+              }
+              // 页面有多个表格时，当同一页的第二个表格的第一行高度加上第一个表格的高度大于页面的高度，需要生成新的一页
+              // 因为是第二个表格，重新走了遍历，end重置0，没有进入到上面的判断（end !== 0），不会生成新的一页
+              if (tableCount > 1 && end === 0) {
+                this.pages.push(page)
+                page = []
               }
 
-              begin = end
+              // ‼️‼️‼️ 极端情况: 如果一行的高度 大于 页面高度, 那么就对明细进行分页
+              if (
+                table.body.heights[end] + currentPageMinimumHeight >
+                this.pageHeight
+              ) {
+                /** 明细data */
+                const detailsData = tableData[end]?.__details || []
+                const heightParams = {
+                  currentPageMinimumHeight: currentPageMinimumHeight,
+                  calcHeight: calcHeight,
+                  pageHeight: this.pageHeight
+                }
+                const {
+                  ranges,
+                  detailsPageHeight
+                } = caclSingleDetailsPageHeight(
+                  end,
+                  table,
+                  detailsData,
+                  heightParams
+                )
+                // 分局明细拆分后的数据
+                const splitTableData = _.map(ranges, range => {
+                  // 当前行的table数据
+                  const _tableData = Object.assign({}, tableData[end])
+                  _tableData.__details = detailsData.slice(...range)
+                  return _tableData
+                })
+                // 插入原table数据中
+                tableData.splice(end, 1, ...splitTableData)
+                // 更新
+                this.data._table[dataKey] = tableData
+
+                // 同时也要更新body.heights 不能影响后续计算
+                table.body.heights.splice(end, 1, ...detailsPageHeight)
 
-              // 此页完成任务
-              this.pages.push(page)
+                page.push({
+                  type: 'table',
+                  index,
+                  begin: end,
+                  end: ++end
+                })
+                // 此页完成任务
+                this.pages.push(page)
+                page = []
+              }
 
+              begin = end
               // 开启新一页,重置页面高度
-              page = []
               currentPageHeight = currentPageMinimumHeight
             } else {
               // 有空间，继续做下行
               end++
-
               // 最后一行，把信息加入 page，并轮下一个contents
               if (end === table.body.heights.length) {
                 page.push({
@@ -190,6 +239,11 @@ class PrinterStore {
           break
         }
 
+        if (index === 0) {
+          // 针对极端情况下，保存区域1的高度
+          firstPagePanel0Height = panelHeight
+        }
+
         if (currentPageHeight <= this.pageHeight) {
           // 空间充足，把信息加入 page，并轮下一个contents
           page.push({
@@ -208,7 +262,6 @@ class PrinterStore {
         }
       }
     }
-
     this.pages.push(page)
   }
 
@@ -224,7 +277,6 @@ class PrinterStore {
         price: price
       })
     } catch (err) {
-      // console.warn(err)
       return text
     }
   }
@@ -250,13 +302,47 @@ class PrinterStore {
 
   templateSpecialDetails(col, dataKey, index) {
     // 做好保护，出错就返回 text
-    const { specialDetailsKey, text } = col
+    const { specialDetailsKey, text, detailLastColType, separator } = col
     try {
       const row = this.data._table[dataKey][index]
       const compiled = _.template(text, { interpolate: /{{([\s\S]+?)}}/g })
-      const detailsList = row[specialDetailsKey]
+      let detailsList = row[specialDetailsKey] || []
+
+      /** 简单处理下数据 */
+      const filterList = (list, type = '') => {
+        if (type === 'noLineBreak') {
+          return list.map(d => `${compiled(d)}`).join(separator)
+        }
+        return list
+          .map(d => `<div class='b-table-details'> ${compiled(d)} </div>`)
+          .join('')
+      }
 
-      return detailsList.map(d => `<div>${compiled(d)}</div>`).join('')
+      /** 明细换行和不换行处理 */
+      detailsList =
+        !detailLastColType || detailLastColType === 'purchase_last_col'
+          ? filterList(detailsList)
+          : filterList(detailsList, 'noLineBreak')
+
+      // 兼容之前已经添加上最后一列的模板
+      // if (!detailLastColType) {
+      //   detailsList = detailsList
+      //     ? detailsList.map(d => `<div> ${compiled(d)} </div>`).join('')
+      //     : []
+      // } else {
+      //   // 多栏商品时，同一行仅有一个商品，后面空余部分显示空白
+      //   if (detailsList) {
+      //     // detailLastColType ---> 区分采购明细单列——最后一列是否换行
+      //     detailsList =
+      //       detailLastColType === 'purchase_last_col'
+      //         ? detailsList.map(d => `<div> ${compiled(d)} </div>`).join('')
+      //         : detailsList.map(d => `${compiled(d)}`).join(separator)
+      //   } else {
+      //     detailsList = []
+      //   }
+      // }
+
+      return detailsList
     } catch (err) {
       return text
     }

package/src/printer/style.lesss

@@ -96,7 +96,7 @@
     td,
     th {
       border: 1px solid black;
-      padding: 2px;
+      padding: 2px 0;
     }
   }
 }
@@ -106,7 +106,7 @@
     td,
     th {
       border: 1px solid #ddd;
-      padding: 2px;
+      padding: 2px 0;
     }
   }
 }
@@ -116,6 +116,7 @@
     td,
     th {
       border: 1px solid transparent;
+      padding: 2px 0;
     }
 
     th {
@@ -130,7 +131,7 @@
     td,
     th {
       border: none;
-      padding: 2px;
+      padding: 2px 0;
     }
   }
 }
@@ -152,3 +153,12 @@
 @page {
   margin: 0;
 }
+
+.gm-printer-subtotal-UpperLowerCaseSeparate-outer{
+  display:flex;
+}
+.gm-printer-subtotal-UpperLowerCaseSeparate-inter{
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+}

package/src/printer/table.js

@@ -36,6 +36,7 @@ class Table extends React.Component {
       const tHead = $table.querySelector('thead')
       const ths = tHead.querySelectorAll('th') || []
       const trs = $table.querySelectorAll('tbody tr') || []
+      const detailsDiv = $table.querySelectorAll('tr td .b-table-details')
 
       printerStore.setHeight(name, getHeight($table))
 
@@ -45,7 +46,8 @@ class Table extends React.Component {
           widths: _.map(ths, th => getWidth(th))
         },
         body: {
-          heights: _.map(trs, tr => getHeight(tr))
+          heights: _.map(trs, tr => getHeight(tr)),
+          children: _.map(detailsDiv, div => getHeight(div))
         }
       })
     }
@@ -107,14 +109,27 @@ class Table extends React.Component {
       for (let i = 2; i <= colNumber; i++) {
         const colNum = i > 2 ? i : '' // 栏数
         const columnsI = columns.map((val, index) => {
-          return {
+          const data = {
             ...val,
             index,
             text: val.text.replace(
-              /{{列\.([^{{]+)}}/g,
-              (s, s1) => `{{列.${s1}${MULTI_SUFFIX}${colNum}}}`
+              /{{(price\()?列\.([^{{]+)}}/g,
+              (s, s1, s2) => {
+                if (s1) {
+                  // 有price函数插进来
+                  const mix_suffix = s2.replace(/\*/, () => `${MULTI_SUFFIX}*`)
+                  return `{{${s1}列.${mix_suffix}${colNum}}}`
+                } else {
+                  return `{{列.${s2}${MULTI_SUFFIX}${colNum}}}`
+                }
+              }
             ) // {{列.xx}} => {{列.xxMULTI_SUFFIXi}}
           }
+          // 多栏商品的明细取 __details_MULTI_SUFFIX
+          if (val.specialDetailsKey)
+            data.specialDetailsKey =
+              val.specialDetailsKey + `${MULTI_SUFFIX}${colNum}`
+          return data
         })
         res = res.concat(columnsI)
       }
@@ -140,9 +155,34 @@ class Table extends React.Component {
 
     // 列
     const columns = this.getColumns()
-
     // 列宽固定(避免跳页bug)
     const thWidths = printerStore.tablesInfo[name]?.head.widths || []
+    // 每页合计在前
+    const subtotalTrPageSummary = () => {
+      return (
+        <>
+          <SubtotalTr
+            range={range}
+            config={config}
+            printerStore={printerStore}
+          />
+          <PageSummary {...this.props} />
+        </>
+      )
+    }
+    // 合计在前
+    const PageSummarySubtotalTr = () => {
+      return (
+        <>
+          <PageSummary {...this.props} />
+          <SubtotalTr
+            range={range}
+            config={config}
+            printerStore={printerStore}
+          />
+        </>
+      )
+    }
 
     return (
       <table>
@@ -155,7 +195,7 @@ class Table extends React.Component {
                 data-name={getTableColumnName(name, col.index)}
                 draggable
                 style={{
-                  minWidth: thWidths[i],
+                  maxWidth: thWidths[i],
                   ...col.headStyle
                 }}
                 className={classNames({
@@ -178,7 +218,6 @@ class Table extends React.Component {
             const _special = tableData[i] && tableData[i]._special
             if (_special)
               return <SpecialTr key={i} config={config} data={_special} />
-
             // 如果项为空对象展现一个占满一行的td
             const isItemNone = !_.keys(tableData[i]).length
 
@@ -192,7 +231,11 @@ class Table extends React.Component {
                       <td
                         key={j}
                         data-name={getTableColumnName(name, col.index)}
-                        style={col.style}
+                        style={{
+                          minWidth: '24px',
+                          maxWidth: thWidths[j],
+                          ...col.style
+                        }}
                         className={classNames({
                           active:
                             getTableColumnName(name, col.index) ===
@@ -205,12 +248,9 @@ class Table extends React.Component {
                                 dataKey,
                                 i
                               )
-                            : printerStore.templateTable(
-                                col.text,
-                                dataKey,
-                                i,
-                                pageIndex
-                              )
+                            : printerStore
+                                .templateTable(col.text, dataKey, i, pageIndex)
+                                .replace(/\(\)/g, '')
                         }}
                       />
                     )
@@ -219,8 +259,9 @@ class Table extends React.Component {
               </tr>
             )
           })}
-          <SubtotalTr {...this.props} />
-          <PageSummary {...this.props} />
+          {this.props.config.subtotal.isCommutationPlace
+            ? PageSummarySubtotalTr()
+            : subtotalTrPageSummary()}
         </tbody>
       </table>
     )

package/src/printer/table_special_tr.js

@@ -25,6 +25,7 @@ const SpecialTr = ({ data, config }) => {
 
   switch (type) {
     case 'flex':
+      // eslint-disable-next-line no-case-declarations
       const row = list.map((d, i) => {
         let text = ''
         try {

package/src/printer/table_subtotal_tr.js

@@ -7,6 +7,7 @@ import Big from 'big.js'
 import { coverDigit2Uppercase, getDataKey } from '../util'
 import { observer } from 'mobx-react'
 import { get } from 'mobx'
+import { Flex } from '../components'
 
 /**
  * 每页合计组件,分页计算后,根据range来统计每页合计数据
@@ -21,6 +22,8 @@ const SubtotalTr = props => {
       subtotal,
       subtotal: {
         show,
+        isUpperCaseBefore, // 决定小写金额是否在前
+        isUpperLowerCaseSeparate, // 决定大小写金额是否分开在两端
         style,
         fields = [
           {
@@ -62,21 +65,37 @@ const SubtotalTr = props => {
     const list = tableData.slice(range.begin, range.end)
 
     const sum = {}
-    let subtotalStr = ''
 
     _.each(fields, v => {
       sum[v.name] = sumData(list, v.valueField)
     })
 
+    // 定义每页小记的左右两侧内容
+    let subtotalLeftContent
+    let subtotalRightContent
+
     for (const name in sum) {
       const price = sum[name]
       const priceUpperCase = get(subtotal, 'needUpperCase') // needUpperCase在初始模板中undefined,所以必须用这个方法
         ? '大写：' + coverDigit2Uppercase(price)
         : ''
       if (displayName) {
-        subtotalStr += `${name} ${price}   ${priceUpperCase}    `
+        // 大写金额是否在前
+        if (isUpperCaseBefore) {
+          subtotalLeftContent = `${name}${priceUpperCase}`
+          subtotalRightContent = `${price}`
+        } else {
+          subtotalLeftContent = `${price}`
+          subtotalRightContent = `${name} ${priceUpperCase}`
+        }
       } else {
-        subtotalStr += `${price}   ${priceUpperCase}    `
+        if (isUpperCaseBefore) {
+          subtotalLeftContent = `${priceUpperCase}`
+          subtotalRightContent = `${price}`
+        } else {
+          subtotalLeftContent = `${price}`
+          subtotalRightContent = `${priceUpperCase}`
+        }
       }
     }
 
@@ -85,10 +104,31 @@ const SubtotalTr = props => {
         <td
           colSpan={99}
           style={{ fontWeight: 'bold', ...style }}
-          dangerouslySetInnerHTML={{
-            __html: `${i18next.t('每页合计')}：${subtotalStr}`
-          }}
-        />
+          // dangerouslySetInnerHTML={{
+          //   __html: `${i18next.t('每页合计')}：${subtotalStr}`
+          // }}flex-grow: 1
+        >
+          {/* 大写金额和小写金额分开在表格的两侧，通过控制类名实现，添加类名后，覆盖原来的居中、靠右靠左 */}
+          <div
+            className={
+              isUpperLowerCaseSeparate
+                ? 'gm-printer-subtotal-UpperLowerCaseSeparate-outer'
+                : ''
+            }
+          >
+            {i18next.t('每页合计')}：
+            <span
+              className={
+                isUpperLowerCaseSeparate
+                  ? 'gm-printer-subtotal-UpperLowerCaseSeparate-inter'
+                  : ''
+              }
+            >
+              <span>&nbsp;&nbsp;{subtotalLeftContent}&nbsp;&nbsp;</span>
+              <span>&nbsp;&nbsp;{subtotalRightContent}&nbsp;&nbsp;</span>
+            </span>
+          </div>
+        </td>
       </tr>
     )
   } else {