gm-printer 10.14.2-alpha.3 → 10.14.2

package/src/components/flex/index.js

@@ -3,87 +3,63 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 class Flex extends React.Component {
-  render() {
+  render () {
     const {
       flex,
 
-      auto,
-      none,
-      width,
-      height,
+      auto, none, width, height,
 
-      row,
-      column,
+      row, column,
 
-      wrap,
-      nowrap,
-      flexGrow,
+      wrap, nowrap,
 
-      justifyStart,
-      justifyEnd,
-      justifyCenter,
-      justifyBetween,
-      justifyAround,
+      justifyStart, justifyEnd, justifyCenter, justifyBetween, justifyAround,
 
-      alignStart,
-      alignEnd,
-      alignCenter,
-      alignBaseline,
-      alignStretch,
+      alignStart, alignEnd, alignCenter, alignBaseline, alignStretch,
 
-      alignContentStart,
-      alignContentEnd,
-      alignContentCenter,
-      alignContentBetween,
-      alignContentAround,
-      alignContentStretch,
+      alignContentStart, alignContentEnd, alignContentCenter, alignContentBetween, alignContentAround, alignContentStretch,
 
-      className,
-      style,
+      className, style,
 
       ...rest
     } = this.props
-    const cn = classNames(
-      {
-        'gm-flex': true,
-
-        'gm-flex-grow': flexGrow,
-        'gm-flex-flex': flex,
-        'gm-flex-auto': auto,
-        'gm-flex-none': none || width || height,
-
-        'gm-flex-row': row,
-        'gm-flex-column': column,
-
-        'gm-flex-wrap': wrap,
-        'gm-flex-nowrap': nowrap,
-
-        'gm-flex-justify-start': justifyStart,
-        'gm-flex-justify-end': justifyEnd,
-        'gm-flex-justify-center': justifyCenter,
-        'gm-flex-justify-between': justifyBetween,
-        'gm-flex-justify-around': justifyAround,
-
-        'gm-flex-align-start': alignStart,
-        'gm-flex-align-end': alignEnd,
-        'gm-flex-align-center': alignCenter,
-        'gm-flex-align-baseline': alignBaseline,
-        'gm-flex-align-stretch': alignStretch,
-
-        'gm-flex-align-content-start': alignContentStart,
-        'gm-flex-align-content-end': alignContentEnd,
-        'gm-flex-align-content-center': alignContentCenter,
-        'gm-flex-align-content-between': alignContentBetween,
-        'gm-flex-align-content-around': alignContentAround,
-        'gm-flex-align-content-stretch': alignContentStretch
-      },
-      className
-    )
+    const cn = classNames({
+      'gm-flex': true,
+
+      'gm-flex-flex': flex,
+      'gm-flex-auto': auto,
+      'gm-flex-none': none || width || height,
+
+      'gm-flex-row': row,
+      'gm-flex-column': column,
+
+      'gm-flex-wrap': wrap,
+      'gm-flex-nowrap': nowrap,
+
+      'gm-flex-justify-start': justifyStart,
+      'gm-flex-justify-end': justifyEnd,
+      'gm-flex-justify-center': justifyCenter,
+      'gm-flex-justify-between': justifyBetween,
+      'gm-flex-justify-around': justifyAround,
+
+      'gm-flex-align-start': alignStart,
+      'gm-flex-align-end': alignEnd,
+      'gm-flex-align-center': alignCenter,
+      'gm-flex-align-baseline': alignBaseline,
+      'gm-flex-align-stretch': alignStretch,
+
+      'gm-flex-align-content-start': alignContentStart,
+      'gm-flex-align-content-end': alignContentEnd,
+      'gm-flex-align-content-center': alignContentCenter,
+      'gm-flex-align-content-between': alignContentBetween,
+      'gm-flex-align-content-around': alignContentAround,
+      'gm-flex-align-content-stretch': alignContentStretch
+    }, className)
 
     let s = Object.assign({}, style)
     if (flex) {
-      s.flex = typeof flex === 'boolean' ? 1 : flex
-      s.WebKitFlex = typeof flex === 'boolean' ? 1 : flex
+      s.flex = (typeof flex === 'boolean') ? 1 : flex
+      s.WebKitFlex = (typeof flex === 'boolean') ? 1 : flex
     }
     if (height) {
       s.height = height
@@ -92,11 +68,7 @@ class Flex extends React.Component {
       s.width = width
     }
 
-    return (
-      <div {...rest} className={cn} style={s}>
-        {this.props.children}
-      </div>
-    )
+    return <div {...rest} className={cn} style={s}>{this.props.children}</div>
   }
 }
 
@@ -109,7 +81,6 @@ Flex.propTypes = {
   row: PropTypes.bool,
   column: PropTypes.bool,
   wrap: PropTypes.bool,
-  flexGrow: PropTypes.bool,
   nowrap: PropTypes.bool,
   justifyStart: PropTypes.bool,
   justifyEnd: PropTypes.bool,

package/src/components/flex/style.less

@@ -19,10 +19,6 @@
   align-items: stretch;
   box-sizing: border-box;
 
-  &.gm-flex-grow {
-    flex-grow: 1;
-  }
-
   &.gm-flex-wrap {
     flex-wrap: wrap;
   }
@@ -102,4 +98,4 @@
   &.gm-flex-align-content-stretch {
     align-content: stretch;
   }
-}
+}

package/src/editor/context_menu.js

@@ -61,6 +61,7 @@ class ContextMenu extends React.Component {
 
   handleSubtotal = name => {
     const { editStore } = this.props
+
     editStore.setSubtotalShow(name)
   }
 
@@ -69,11 +70,6 @@ class ContextMenu extends React.Component {
     editStore.handleChangeTableData(isAutoFilling)
   }
 
-  handleOverallOrder = name => {
-    const { editStore } = this.props
-    editStore.setOverallOrderShow(name)
-  }
-
   renderOrderActionBtn = name => {
     if (!this.hasSubtotalBtn(name)) {
       return null
@@ -88,18 +84,13 @@ class ContextMenu extends React.Component {
       }
     } = this.props
     const arr = name.split('.')
-    const {
-      dataKey,
-      subtotal,
-      overallOrder
-    } = this.props.editStore.config.contents[arr[2]]
+    const { dataKey, subtotal } = this.props.editStore.config.contents[arr[2]]
     const keyArr = dataKey.split('_')
 
     const isMultiActive = keyArr.includes('multi')
     const isThreeActive = keyArr.includes('multi3')
     const isCategoryActive = keyArr.includes('category')
     const isSubtotalActive = subtotal.show
-    const isOverallOrder = overallOrder?.show
 
     return (
       <>
@@ -136,12 +127,6 @@ class ContextMenu extends React.Component {
         >
           {i18next.t('行数填充')}
         </div>
-        <div
-          onClick={this.handleOverallOrder.bind(this, name)}
-          className={isOverallOrder ? 'active' : ''}
-        >
-          {i18next.t('整单合计')}
-        </div>
       </>
     )
   }
@@ -162,7 +147,6 @@ class ContextMenu extends React.Component {
           config={editStore.config}
           data={editStore.mockData}
           getremainpageHeight={editStore.setRemainPageHeight}
-          overallorder={editStore.overallOrderShow}
         />
       </CommonContextMenu>
     )

package/src/editor_settle/editor.js

@@ -23,7 +23,7 @@ const tableDataKeyList = [
 @observer
 class Editor extends React.Component {
   render() {
-    const { onSave, showEditor, addFields, isSomeSubtotalTr } = this.props
+    const { onSave, showEditor, addFields } = this.props
 
     return (
       <div className='gm-printer-edit'>
@@ -46,10 +46,7 @@ class Editor extends React.Component {
             <Gap height='10px' />
             <EditorSelect />
             <Gap height='5px' />
-            <EditorField
-              tableDataKeyList={tableDataKeyList}
-              isSomeSubtotalTr={isSomeSubtotalTr}
-            />
+            <EditorField tableDataKeyList={tableDataKeyList} />
             <Gap height='5px' />
             <EditorAddField addFields={addFields} />
 
@@ -72,8 +69,7 @@ Editor.propTypes = {
   onSave: PropTypes.func,
   showEditor: PropTypes.bool,
   mockData: PropTypes.object.isRequired,
-  addFields: PropTypes.object.isRequired,
-  isSomeSubtotalTr: PropTypes.bool
+  addFields: PropTypes.object.isRequired
 }
 
 Editor.defaultProps = {

package/src/printer/printer.js

@@ -81,9 +81,6 @@ class Printer extends React.Component {
         this.props.printerStore.remainPageHeight
       )
     }
-    if (nextProps.overallorder !== this.props.overallorder) {
-      this.props.printerStore.setOverallOrder(nextProps.config)
-    }
   }
 
   componentDidMount() {
@@ -327,8 +324,7 @@ Printer.propTypes = {
   config: PropTypes.object.isRequired,
   onReady: PropTypes.func,
   isSomeSubtotalTr: PropTypes.bool,
-  getremainpageHeight: PropTypes.func,
-  overallorder: PropTypes.bool
+  getremainpageHeight: PropTypes.func
 }
 
 Printer.defaultProps = {

package/src/printer/store.js

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

package/src/printer/style.lesss

@@ -166,15 +166,3 @@
   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,7 +16,6 @@ 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
@@ -117,14 +116,17 @@ class Table extends React.Component {
               /{{(price\()?列\.([^{{]+)}}/g,
               (s, s1, s2) => {
                 if (s1) {
-                  // 有price函数插进来
-                  const mix_suffix = s2.replace(/\*/, () => `${MULTI_SUFFIX}*`)
-                  return `{{${s1}列.${mix_suffix}${colNum}}}`
+                  // 有price函数插进来， 匹配‘ _基本单位 ’类似的字符串并添加后缀，生成三栏或者双栏数据
+                  const _s = s.replace(
+                    /_[\u4e00-\u9fa5]*/g,
+                    match => `${match}${MULTI_SUFFIX}${colNum}`
+                  )
+                  return _s
                 } else {
                   return `{{列.${s2}${MULTI_SUFFIX}${colNum}}}`
                 }
               }
-            ) // {{列.xx}} => {{列.xxMULTI_SUFFIXi}}
+            )
           }
           // 多栏商品的明细取 __details_MULTI_SUFFIX
           if (val.specialDetailsKey)
@@ -291,11 +293,6 @@ 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_subtotal_tr.js

@@ -7,18 +7,11 @@ 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: {
@@ -32,7 +25,7 @@ const SubtotalTr = props => {
         style,
         fields = [
           {
-            name: i18next.t('每页合计：'),
+            name: i18next.t('出库金额'),
             valueField: 'real_item_price'
           }
         ],
@@ -43,6 +36,7 @@ const SubtotalTr = props => {
     printerStore,
     isSomeSubtotalTr
   } = props
+
   const tableData = printerStore.data._table[getDataKey(dataKey, arrange)] || []
   // 计算合计
   const sumData = (list, field) => {
@@ -73,14 +67,18 @@ const SubtotalTr = props => {
   if (show && printerStore.ready) {
     const list = tableData.slice(range.begin, range.end)
 
-    // 针对结款单的
-    if (isSomeSubtotalTr) {
-      const sum = {}
+    const sum = {}
+
+    _.each(fields, v => {
+      sum[v.name] = sumData(list, v.valueField)
+    })
 
-      _.each(fields, v => {
-        sum[v.name] = sumData(list, v.valueField)
-      })
-      let subtotalStr = ''
+    // 定义每页小记的左右两侧内容
+    let subtotalLeftContent
+    let subtotalRightContent
+    let subtotalStr = ''
+    // 结款单
+    if (isSomeSubtotalTr) {
       for (const name in sum) {
         const price = sum[name]
         const priceUpperCase = get(subtotal, 'needUpperCase') // needUpperCase在初始模板中undefined,所以必须用这个方法
@@ -105,49 +103,61 @@ 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>
-          {_.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>
-            )
-          })}
+          <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>
         </tr>
       )
     }

package/src/util.js

@@ -108,14 +108,6 @@ 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)) {
@@ -282,17 +274,6 @@ 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,
@@ -310,7 +291,5 @@ export {
   isMultiTable,
   getMultiNumber,
   caclSingleDetailsPageHeight,
-  getArrayMid,
-  getColSpanLength,
-  getOverallOrderTrHeight
+  getArrayMid
 }

package/src/printer/table_overallOrder_tr.js

@@ -1,65 +0,0 @@
-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)