gm-printer 10.14.2-alpha.1 → 10.14.2-alpha.2

package/package.json

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

package/src/common/editor_edit_field.js

@@ -184,7 +184,7 @@ class EditorField extends React.Component {
   }
 
   renderTable() {
-    const { tableDataKeyList, editStore } = this.props
+    const { tableDataKeyList, editStore, isSomeSubtotalTr } = this.props
     const { head, headStyle, text, style } = editStore.computedSelectedInfo
 
     const {
@@ -219,6 +219,11 @@ class EditorField extends React.Component {
     // 每页合计样式
     const overallOrderStyle =
       (overallOrder && overallOrder?.fields[0].style) || {}
+    // 每页合计自定义单元格
+    const subtotalUpperCustomCell =
+      (editStore.computedTableSpecialConfig?.subtotal &&
+        get(subtotal, 'isCustomCells')) ||
+      false
     //  整单合计是否大写
     const overallOrderNeedUpperCase =
       (editStore.computedTableSpecialConfig?.overallOrder &&
@@ -411,18 +416,38 @@ class EditorField extends React.Component {
           subtotalCheckOnChange={editStore.setSubtotalUpperCase}
           subtotalCheckText='显示大写金额'
         />
-        <EditorSubtotalCheck
-          subtotalCheckDisabled={subtotalNeedUpperCase}
-          subtotalChecked={subtotalUpperCaseBefore}
-          subtotalCheckOnChange={editStore.setSubtotalUpperCaseBefore}
-          subtotalCheckText='大写金额在前'
-        />
-        <EditorSubtotalCheck
-          subtotalCheckDisabled={subtotalNeedUpperCase}
-          subtotalChecked={subtotalUpperLowerCaseSeparate}
-          subtotalCheckOnChange={editStore.setSubtotalUpperLowerCaseSeparate}
-          subtotalCheckText='大、小写金额分左右两边展示'
-        />
+        {/* 结款单不需要这些配置 */}
+        {!isSomeSubtotalTr && (
+          <>
+            <EditorSubtotalCheck
+              subtotalCheckDisabled={subtotalNeedUpperCase}
+              subtotalChecked={subtotalUpperCaseBefore}
+              subtotalCheckOnChange={editStore.setSubtotalUpperCaseBefore}
+              subtotalCheckText='大写金额在前'
+            />
+            <EditorSubtotalCheck
+              subtotalCheckDisabled={subtotalNeedUpperCase}
+              subtotalChecked={subtotalUpperLowerCaseSeparate}
+              subtotalCheckOnChange={
+                editStore.setSubtotalUpperLowerCaseSeparate
+              }
+              subtotalCheckText='大、小写金额分左右两边展示'
+            />
+            <EditorSubtotalCheck
+              subtotalCheckDisabled
+              subtotalChecked={subtotalUpperCustomCell}
+              subtotalCheckOnChange={editStore.setSubtotalCustomCells}
+              subtotalCheckText='开启自定义单元格'
+            />
+            <Text
+              value={
+                subtotal && subtotal?.fields?.[1] ? subtotal.fields[1].name : ''
+              }
+              onChange={editStore.setSubtotalFields}
+              style={{ width: '65px', margin: '5px 0 5px 80px' }}
+            />
+          </>
+        )}
         <Flex>
           <Flex>{i18next.t('整单合计')}：</Flex>
           <Fonter
@@ -490,7 +515,8 @@ class EditorField extends React.Component {
 EditorField.propTypes = {
   editStore: PropTypes.object,
   tableDataKeyList: PropTypes.array,
-  showNewDate: PropTypes.bool
+  showNewDate: PropTypes.bool,
+  isSomeSubtotalTr: PropTypes.bool
 }
 EditorField.defaultProps = {
   showNewDate: false

package/src/common/editor_store.js

@@ -74,7 +74,15 @@ class EditorStore {
       fontWeight: 'bold'
     }
   }
-  
+
+  // 每页合计自定义合并单元格
+  @observable
+  subtotalConfigFields = {
+    name: '',
+    valueField: '',
+    colSpan: 3 // 产品说3个,开启自定义单元格
+  }
+
   @computed
   get computedPrinterKey() {
     return _.map(this.config, (v, k) => {
@@ -525,11 +533,28 @@ class EditorStore {
   setSubtotalShow(name) {
     const arr = name.split('.')
     const table = this.config.contents[arr[2]]
-
+    this.overallOrderShow = !this.overallOrderShow
     // 切换的时候，要把对应table的多余空数据清掉
     this.clearExtraTableData(table.dataKey)
-    table.subtotal.show = !table.subtotal.show
+
     this.setAutoFillingConfig(!this.isAutoFilling)
+    // 获取td的colSpan
+    const colSpanLength = getColSpanLength(table)
+    set(table.subtotal, {
+      show: !table.subtotal.show
+    })
+    // 兼容存在后端的模板，subtotal配置没有fields
+    if (!table.subtotal?.fields) {
+      set(table.subtotal, {
+        fields: [
+          {
+            name: '每页合计：',
+            valueField: 'real_item_price',
+            colSpan: colSpanLength
+          }
+        ]
+      })
+    }
   }
 
   @action
@@ -577,7 +602,7 @@ class EditorStore {
   @action
   changeTableDataKey(name, key) {
     const arr = name.split('.')
-    const { dataKey, overallOrder } = this.config.contents[arr[2]]
+    const { dataKey, overallOrder, subtotal } = this.config.contents[arr[2]]
     const keyArr = dataKey.split('_')
     let newDataKey
     // 当前有这个key则去掉
@@ -601,10 +626,10 @@ class EditorStore {
     ])
 
     this.config.contents[arr[2]].dataKey = newDataKey.join('_')
-    // 整单合计的单元格要修改
-    if (overallOrder?.show) {
-      overallOrder.show = false
-    }
+    // 整单合计不显示
+    if (overallOrder?.show) overallOrder.show = false
+    // 每页合计不显示
+    if (subtotal?.show) subtotal.show = false
   }
 
   @action
@@ -992,6 +1017,7 @@ class EditorStore {
   @action.bound
   setSubtotalUpperCase() {
     if (this.selectedRegion) {
+      this.overallOrderShow = !this.overallOrderShow
       const arr = this.selectedRegion.split('.')
       const subtotalConfig = this.config.contents[arr[2]].subtotal
 
@@ -1011,6 +1037,7 @@ class EditorStore {
   @action.bound
   setSubtotalUpperCaseBefore() {
     if (this.selectedRegion) {
+      this.overallOrderShow = !this.overallOrderShow
       const arr = this.selectedRegion.split('.')
       const subtotalConfig = this.config.contents[arr[2]].subtotal
 
@@ -1023,6 +1050,7 @@ class EditorStore {
   @action.bound
   setSubtotalUpperLowerCaseSeparate() {
     if (this.selectedRegion) {
+      this.overallOrderShow = !this.overallOrderShow
       const arr = this.selectedRegion.split('.')
       const subtotalConfig = this.config.contents[arr[2]].subtotal
 
@@ -1033,6 +1061,72 @@ class EditorStore {
     }
   }
 
+  // 每页合计开启自定义单元格
+  @action.bound
+  setSubtotalCustomCells() {
+    if (this.selectedRegion) {
+      // 作用：触发组件的更新
+      this.overallOrderShow = !this.overallOrderShow
+      const arr = this.selectedRegion.split('.')
+      const table = this.config.contents[arr[2]]
+      const subtotalConfig = table?.subtotal
+      // 没有显示每页合计的时候不可以设置自定义单元格
+      if (!subtotalConfig?.show) return
+      // 多栏表格情况，计算colSpan
+      const colSpanLength = getColSpanLength(table)
+      const oldCustomCells = subtotalConfig?.isCustomCells
+
+      set(subtotalConfig, {
+        isCustomCells: !oldCustomCells
+      })
+      // 兼容已经存在后端的模板，每页合计直接是显示的，导致每页合计配置没有fields,isCustomCells，手动添加上
+      if (oldCustomCells === undefined && !subtotalConfig.fields) {
+        set(subtotalConfig, {
+          fields: [
+            {
+              name: '每页合计：',
+              valueField: 'real_item_price',
+              colSpan: colSpanLength
+            }
+          ]
+        })
+      }
+      // 开启自定义单元格
+      if (subtotalConfig?.isCustomCells) {
+        // fields添加自定义单元格
+        subtotalConfig.fields = [
+          subtotalConfig.fields[0],
+          {
+            ...this.subtotalConfigFields
+          }
+        ]
+        // 重新计算合并单元格的个数
+        subtotalConfig.fields[0].colSpan =
+          colSpanLength - subtotalConfig.fields[1].colSpan
+      } else {
+        // 关闭自定义单元格，fields只有一个
+        subtotalConfig.fields = [subtotalConfig.fields[0]]
+        // 重新计算合并单元格的个数
+        subtotalConfig.fields[0].colSpan = colSpanLength
+      }
+    }
+  }
+
+  // 每页合计自定义单元格文本输入
+  @action.bound
+  setSubtotalFields(value) {
+    if (this.selectedRegion) {
+      const arr = this.selectedRegion.split('.')
+      const table = this.config.contents[arr[2]]
+      const subtotalConfig = table?.subtotal
+
+      if (subtotalConfig.isCustomCells) {
+        const subtotalConfig = table?.subtotal.fields
+        subtotalConfig[1].name = value
+      }
+    }
+  }
+
   // 整单合计设置大写金额
   @action.bound
   setOverallOrderUpperCase() {

package/src/editor_settle/editor.js

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

package/src/printer/table_overallOrder_tr.js

@@ -9,7 +9,6 @@ import classNames from 'classnames'
 const OverallOrder = props => {
   const {
     config: { overallOrder },
-    // range,
     printerStore,
     printerStore: {
       data: { common }

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'
           }
         ],
@@ -66,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,所以必须用这个方法
@@ -102,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>
       )
     }