gm-printer 10.14.2 → 10.14.4

package/src/printer/store.js

@@ -4,7 +4,8 @@ import {
   getSumTrHeight,
   isMultiTable,
   caclSingleDetailsPageHeight,
-  getArrayMid
+  getArrayMid,
+  getOverallOrderTrHeight
 } from '../util'
 import _ from 'lodash'
 import Big from 'big.js'
@@ -172,6 +173,11 @@ class PrinterStore {
     }
   }
 
+  @action
+  setOverallOrder(config) {
+    this.config = config || {}
+  }
+
   @action
   computedData(dataKey, table, end, currentRemainTableHeight) {
     /** 当前数据 */
@@ -243,9 +249,13 @@ class PrinterStore {
         tableCount++
         // 表格原始的高度和宽度信息
         const table = this.tablesInfo[`contents.table.${index}`]
-        const { subtotal, dataKey, summaryConfig } = content
+        const { subtotal, dataKey, summaryConfig, overallOrder } = 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没有每页合计
@@ -253,7 +263,10 @@ class PrinterStore {
             : 0
         // 每个表格都具有的高度
         const allTableHaveThisHeight =
-          table.head.height + subtotalTrHeight + pageSummaryTrHeight
+          table.head.height +
+          subtotalTrHeight +
+          pageSummaryTrHeight +
+          overallOrderTrHeight
         /** 当前page页面的最小高度 */
         const currentPageMinimumHeight =
           allPagesHaveThisHeight + allTableHaveThisHeight

package/src/printer/style.lesss

@@ -166,3 +166,15 @@
   flex-grow: 1;
   justify-content: space-between;
 }
+.gm-printer-subtotal-isUpperCaseBefore-inter{
+  order:2;
+}
+.gm-flex-justify-between-page{
+   justify-content: space-between;
+}
+.gm-flex-grow-page{
+    flex-grow: 1;
+}
+.gm-flex-page{
+  display:flex
+}

package/src/printer/table.js

@@ -16,6 +16,7 @@ import { MULTI_SUFFIX } from '../config'
 import SpecialTr from './table_special_tr'
 import SubtotalTr from './table_subtotal_tr'
 import PageSummary from './page_summary'
+import OverallOrder from './table_overallOrder_tr'
 
 @inject('printerStore')
 @observer
@@ -293,6 +294,11 @@ class Table extends React.Component {
           {this.props.config.subtotal.isCommutationPlace
             ? PageSummarySubtotalTr()
             : subtotalTrPageSummary()}
+          <OverallOrder
+            range={range}
+            config={config}
+            printerStore={printerStore}
+          />
         </tbody>
       </table>
     )

package/src/printer/table_overallOrder_tr.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+// import Big from 'big.js'
+import { coverDigit2Uppercase } from '../util'
+import { observer } from 'mobx-react'
+import classNames from 'classnames'
+
+const OverallOrder = props => {
+  const {
+    config: { overallOrder },
+    printerStore,
+    printerStore: {
+      data: { common }
+    }
+  } = props
+
+  return (
+    overallOrder?.show &&
+    printerStore?.ready && (
+      <tr>
+        {_.map(overallOrder.fields, (item, index) => {
+          return (
+            <td colSpan={item.colSpan} key={index}>
+              <div style={{ ...item.style }} className='gm-flex-page'>
+                {item.name}
+                <div
+                  className={classNames('gm-flex-page', {
+                    'gm-flex-justify-between-page':
+                      overallOrder?.isUpperLowerCaseSeparate,
+                    'gm-flex-grow-page': overallOrder?.isUpperLowerCaseSeparate
+                  })}
+                >
+                  <span
+                    className={
+                      overallOrder?.isUpperCaseBefore
+                        ? 'gm-printer-subtotal-isUpperCaseBefore-inter'
+                        : ''
+                    }
+                  >
+                    {common?.[item.valueField] ?? ''}
+                  </span>
+                  {overallOrder?.needUpperCase && (
+                    <span>
+                      {common?.[item.valueField]
+                        ? coverDigit2Uppercase(common[item.valueField])
+                        : ''}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </td>
+          )
+        })}
+      </tr>
+    )
+  )
+}
+OverallOrder.propTypes = {
+  config: PropTypes.object.isRequired,
+  range: PropTypes.object.isRequired,
+  printerStore: PropTypes.object
+}
+
+export default observer(OverallOrder)

package/src/printer/table_subtotal_tr.js

@@ -7,11 +7,18 @@ import Big from 'big.js'
 import { coverDigit2Uppercase, getDataKey } from '../util'
 import { observer } from 'mobx-react'
 import { get } from 'mobx'
+import classNames from 'classnames'
+
 /**
  * 每页合计组件,分页计算后,根据range来统计每页合计数据
  * @param props
  * @returns {*}
  */
+const flexStyle = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+}
 const SubtotalTr = props => {
   const {
     config: {
@@ -25,7 +32,7 @@ const SubtotalTr = props => {
         style,
         fields = [
           {
-            name: i18next.t('出库金额'),
+            name: i18next.t('每页合计：'),
             valueField: 'real_item_price'
           }
         ],
@@ -36,7 +43,6 @@ const SubtotalTr = props => {
     printerStore,
     isSomeSubtotalTr
   } = props
-
   const tableData = printerStore.data._table[getDataKey(dataKey, arrange)] || []
   // 计算合计
   const sumData = (list, field) => {
@@ -67,18 +73,14 @@ const SubtotalTr = props => {
   if (show && printerStore.ready) {
     const list = tableData.slice(range.begin, range.end)
 
-    const sum = {}
-
-    _.each(fields, v => {
-      sum[v.name] = sumData(list, v.valueField)
-    })
-
-    // 定义每页小记的左右两侧内容
-    let subtotalLeftContent
-    let subtotalRightContent
-    let subtotalStr = ''
-    // 结款单
+    // 针对结款单的
     if (isSomeSubtotalTr) {
+      const sum = {}
+
+      _.each(fields, v => {
+        sum[v.name] = sumData(list, v.valueField)
+      })
+      let subtotalStr = ''
       for (const name in sum) {
         const price = sum[name]
         const priceUpperCase = get(subtotal, 'needUpperCase') // needUpperCase在初始模板中undefined,所以必须用这个方法
@@ -103,61 +105,49 @@ const SubtotalTr = props => {
         </tr>
       )
     } else {
-      for (const name in sum) {
-        const price = sum[name]
-        const priceUpperCase = get(subtotal, 'needUpperCase') // needUpperCase在初始模板中undefined,所以必须用这个方法
-          ? '大写：' + coverDigit2Uppercase(price)
-          : ''
-        if (displayName) {
-          // 大写金额是否在前
-          if (isUpperCaseBefore) {
-            subtotalLeftContent = `${name}${priceUpperCase}`
-            subtotalRightContent = `${price}`
-          } else {
-            subtotalLeftContent = `${price}`
-            subtotalRightContent = `${name} ${priceUpperCase}`
-          }
-        } else {
-          if (isUpperCaseBefore) {
-            subtotalLeftContent = `${priceUpperCase}`
-            subtotalRightContent = `${price}`
-          } else {
-            subtotalLeftContent = `${price}`
-            subtotalRightContent = `${priceUpperCase}`
-          }
-        }
-      }
-
       return (
         <tr>
-          <td
-            colSpan={99}
-            style={{ fontWeight: 'bold', ...style }}
-            // 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>
+          {_.map(fields, (item, index) => {
+            return (
+              <td colSpan={item.colSpan ?? 99} key={index}>
+                <div
+                  style={{
+                    fontWeight: 'bold',
+                    'justify-content': flexStyle[subtotal.style?.textAlign], // flex布局中textAlign不生效，改使用justify-content
+                    ...subtotal.style
+                  }}
+                  className='gm-flex-page'
+                >
+                  {item.name}
+                  <div
+                    className={classNames('gm-flex-page', {
+                      'gm-flex-justify-between-page': isUpperLowerCaseSeparate, // 决定大小写金额是否分开在两端
+                      'gm-flex-grow-page': isUpperLowerCaseSeparate
+                    })}
+                  >
+                    <span
+                      className={
+                        isUpperCaseBefore // 决定小写金额是否在前
+                          ? 'gm-printer-subtotal-isUpperCaseBefore-inter'
+                          : ''
+                      }
+                    >
+                      {/* 这样写是为了支持自定义单元，index = 1时是自定义单元格 */}
+                      {index === 0 ? sumData(list, item.valueField) : ''}
+                    </span>
+                    {subtotal?.needUpperCase && ( // 是否需要大写金额
+                      <span>
+                        {index === 0
+                          ? '大写：' +
+                            coverDigit2Uppercase(sumData(list, item.valueField))
+                          : ''}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </td>
+            )
+          })}
         </tr>
       )
     }

package/src/util.js

@@ -108,6 +108,14 @@ function getSumTrHeight(SumTr) {
   return (parseInt(fontSize) - 12) * 1.5 + 26
 }
 
+function getOverallOrderTrHeight(overallOrder) {
+  const { fields = [] } = overallOrder
+  const fontSize = fields?.[0]?.style?.fontSize || '12px'
+
+  // 12px => 26, 14px => 29, 16px => 33, ...
+  return (parseInt(fontSize) - 12) * 1.5 + 26
+}
+
 // eslint-disable-next-line
 const coverDigit2Uppercase = n => {
   if (_.isNil(n) || _.isNaN(n)) {
@@ -274,6 +282,17 @@ const getArrayMid = arr => {
   return majority
 }
 
+/**
+ * 获取整单合计colSpan合并的个数
+ * @param {*} table
+ * @returns number
+ */
+const getColSpanLength = table => {
+  return /multi/.test(table.dataKey)
+    ? getMultiNumber(table.dataKey) * table.columns.length
+    : table.columns.length
+}
+
 export {
   getHeight,
   getWidth,
@@ -291,5 +310,7 @@ export {
   isMultiTable,
   getMultiNumber,
   caclSingleDetailsPageHeight,
-  getArrayMid
+  getArrayMid,
+  getColSpanLength,
+  getOverallOrderTrHeight
 }