gm-printer 10.14.3-alpha.1 → 10.14.4-alpha.1

package/package.json

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

package/src/common/editor_edit_field.js

@@ -13,7 +13,8 @@ import {
   ColumnWidth,
   Textarea,
   Title,
-  TipInfo
+  TipInfo,
+  Text
 } from '../common/component'
 import { get, toJS } from 'mobx'
 import PropTypes from 'prop-types'
@@ -73,6 +74,11 @@ class EditorField extends React.Component {
     editStore.setSubtotalStyle(value)
   }
 
+  handleOverallOrderStyleChange = value => {
+    const { editStore } = this.props
+    editStore.setOverallOrderStyle(value)
+  }
+
   renderBlocks() {
     const { editStore, showNewDate } = this.props
     const { type, text, style, link } = editStore.computedSelectedInfo
@@ -178,10 +184,15 @@ 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 { specialConfig, subtotal } = editStore.computedTableSpecialConfig
+    const {
+      specialConfig,
+      subtotal,
+      overallOrder
+    } = editStore.computedTableSpecialConfig
+
     // 小计样式,specialConfig可能是undefined
     const specialStyle =
       toJS(editStore.computedTableSpecialConfig)?.specialConfig?.style || {}
@@ -195,16 +206,45 @@ class EditorField extends React.Component {
       (editStore.computedTableSpecialConfig.subtotal &&
         get(subtotal, 'needUpperCase')) ||
       false
-    // 大写的金额是否在前
+    // 每页合计大写的金额是否在前
     const subtotalUpperCaseBefore =
       (editStore.computedTableSpecialConfig.subtotal &&
         get(subtotal, 'isUpperCaseBefore')) ||
       false
-    // 大写和小写的金额是否分开
+    // 每页合计大写和小写的金额是否分开
     const subtotalUpperLowerCaseSeparate =
       (editStore.computedTableSpecialConfig.subtotal &&
         get(subtotal, 'isUpperLowerCaseSeparate')) ||
       false
+    // 每页合计样式
+    const overallOrderStyle =
+      (overallOrder && overallOrder?.fields[0].style) || {}
+    // 每页合计自定义单元格
+    const subtotalUpperCustomCell =
+      (editStore.computedTableSpecialConfig?.subtotal &&
+        get(subtotal, 'isCustomCells')) ||
+      false
+    //  整单合计是否大写
+    const overallOrderNeedUpperCase =
+      (editStore.computedTableSpecialConfig?.overallOrder &&
+        get(overallOrder, 'needUpperCase')) ||
+      false
+    // 整单合计大写的金额是否在前
+    const overallOrderCaseBefore =
+      (editStore.computedTableSpecialConfig?.overallOrder &&
+        get(overallOrder, 'isUpperCaseBefore')) ||
+      false
+    // 整单合计大写和小写的金额是否分开
+    const overallOrderUpperLowerCaseSeparate =
+      (editStore.computedTableSpecialConfig?.overallOrder &&
+        get(overallOrder, 'isUpperLowerCaseSeparate')) ||
+      false
+    // 整单合计自定义单元格
+    const overallOrderUpperCustomCell =
+      (editStore.computedTableSpecialConfig?.overallOrder &&
+        get(overallOrder, 'isCustomCells')) ||
+      false
+
     return (
       <div>
         <Title title={i18next.t('编辑字段')} />
@@ -376,18 +416,85 @@ class EditorField extends React.Component {
           subtotalCheckOnChange={editStore.setSubtotalUpperCase}
           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
+            style={overallOrderStyle}
+            onChange={this.handleOverallOrderStyleChange}
+          />
+          <Separator />
+          <TextAlign
+            style={overallOrderStyle}
+            onChange={this.handleOverallOrderStyleChange}
+          />
+        </Flex>
+        <EditorSubtotalCheck
+          subtotalCheckDisabled
+          subtotalChecked={overallOrderNeedUpperCase}
+          subtotalCheckOnChange={editStore.setOverallOrderUpperCase}
+          subtotalCheckText='显示大写金额'
+        />
         <EditorSubtotalCheck
-          subtotalCheckDisabled={subtotalNeedUpperCase}
-          subtotalChecked={subtotalUpperCaseBefore}
-          subtotalCheckOnChange={editStore.setSubtotalUpperCaseBefore}
+          subtotalCheckDisabled={overallOrderNeedUpperCase}
+          subtotalChecked={overallOrderCaseBefore}
+          subtotalCheckOnChange={editStore.setOverallOrderUpperCaseBefore}
           subtotalCheckText='大写金额在前'
         />
         <EditorSubtotalCheck
-          subtotalCheckDisabled={subtotalNeedUpperCase}
-          subtotalChecked={subtotalUpperLowerCaseSeparate}
-          subtotalCheckOnChange={editStore.setSubtotalUpperLowerCaseSeparate}
+          subtotalCheckDisabled={overallOrderNeedUpperCase}
+          subtotalChecked={overallOrderUpperLowerCaseSeparate}
+          subtotalCheckOnChange={
+            editStore.setOverallOrderUpperLowerCaseSeparate
+          }
           subtotalCheckText='大、小写金额分左右两边展示'
         />
+        <EditorSubtotalCheck
+          subtotalCheckDisabled
+          subtotalChecked={overallOrderUpperCustomCell}
+          subtotalCheckOnChange={editStore.setOverallOrderCustomCells}
+          subtotalCheckText='开启自定义单元格'
+        />
+        <Text
+          value={
+            overallOrder && overallOrder?.fields?.[1]
+              ? overallOrder.fields[1].name
+              : ''
+          }
+          onChange={editStore.setOverallOrderFields}
+          style={{ width: '65px', margin: '5px 0 5px 80px' }}
+        />
       </div>
     )
   }
@@ -408,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

@@ -2,7 +2,7 @@ import i18next from '../../locales'
 import { action, computed, observable, set, toJS } from 'mobx'
 import { pageTypeMap } from '../config'
 import _ from 'lodash'
-import { dispatchMsg, getBlockName, exchange } from '../util'
+import { dispatchMsg, getBlockName, exchange, getColSpanLength } from '../util'
 import React from 'react'
 
 class EditorStore {
@@ -61,6 +61,28 @@ class EditorStore {
     this.isAutoFilling = bol
   }
 
+  @observable
+  overallOrderShow = false
+
+  // 整单合计自定义合并单元格
+  @observable
+  overallOrderConfigFields = {
+    name: '',
+    valueField: '',
+    colSpan: 3, // 产品说3个
+    style: {
+      fontWeight: 'bold'
+    }
+  }
+
+  // 每页合计自定义合并单元格
+  @observable
+  subtotalConfigFields = {
+    name: '',
+    valueField: '',
+    colSpan: 3 // 产品说3个,开启自定义单元格
+  }
+
   @computed
   get computedPrinterKey() {
     return _.map(this.config, (v, k) => {
@@ -134,14 +156,19 @@ class EditorStore {
 
     set(this.config, {
       autoFillConfig: {
-        region: this.selectedRegion,
+        region: this.selectedRegion || autoFillConfig?.region,
         dataKey,
         checked: isAutoFilling
       }
     })
-    if (isAutoFilling) {
+
+    const hasHadEmptyData = _.some(table, data => data?._isEmptyData)
+
+    // 开关打开，且之前数组不包含空数据，再进行填充
+    if (isAutoFilling && !hasHadEmptyData) {
       table.push(...this.getFilledTableData(table))
-    } else {
+    }
+    if (!isAutoFilling) {
       this.clearExtraTableData(dataKey)
       return
     }
@@ -511,11 +538,64 @@ 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
+          }
+        ]
+      })
+    } else {
+      table.subtotal.fields[0].colSpan =
+        colSpanLength - (table.subtotal.fields?.[1]?.colSpan ?? 0)
+    }
+  }
+
+  @action
+  setOverallOrderShow(name) {
+    const arr = name.split('.')
+    const table = this.config.contents[arr[2]]
+    this.overallOrderShow = !this.overallOrderShow
+    const colSpanLength = getColSpanLength(table)
+    if (table.overallOrder) {
+      set(table.overallOrder, {
+        show: !table.overallOrder.show
+      })
+      table.overallOrder.fields[0].colSpan =
+        colSpanLength - (table.overallOrder.fields?.[1]?.colSpan ?? 0)
+    } else {
+      // 兼容已经存在的配送单据，他们的配置存在后端的，没有overallOrder这个配置，给加上
+      set(table, {
+        overallOrder: {
+          show: true,
+          fields: [
+            {
+              name: '整单合计：',
+              valueField: '出库金额',
+              style: {
+                fontWeight: 'bold'
+              },
+              colSpan: colSpanLength
+            }
+          ]
+        }
+      })
+    }
+    this.config = toJS(this.config)
   }
 
   @action
@@ -530,7 +610,7 @@ class EditorStore {
   @action
   changeTableDataKey(name, key) {
     const arr = name.split('.')
-    const { dataKey } = this.config.contents[arr[2]]
+    const { dataKey, overallOrder, subtotal } = this.config.contents[arr[2]]
     const keyArr = dataKey.split('_')
     let newDataKey
     // 当前有这个key则去掉
@@ -554,6 +634,10 @@ class EditorStore {
     ])
 
     this.config.contents[arr[2]].dataKey = newDataKey.join('_')
+    // 整单合计不显示
+    if (overallOrder?.show) overallOrder.show = false
+    // 每页合计不显示
+    if (subtotal?.show) subtotal.show = false
   }
 
   @action
@@ -782,14 +866,17 @@ class EditorStore {
   // 获得表格自定义行高
   @computed
   get computedTableCustomerRowHeight() {
-    if (this.selectedRegion) {
-      const arr = this.selectedRegion.split('.')
+    const _defaultRegion = this.config?.autoFillConfig?.region
+    let resHeight = 23
+    if (this.selectedRegion || _defaultRegion) {
+      const _selectedRegion = this.selectedRegion || _defaultRegion
+      const arr = _selectedRegion.split('.')
       if (arr.includes('table')) {
         const height = this.config.contents[arr[2]].customerRowHeight
-        return height === undefined ? 23 : height
+        resHeight = height === undefined ? 23 : height
       }
     }
-    return 23
+    return resHeight
   }
 
   @action.bound
@@ -924,6 +1011,7 @@ class EditorStore {
   @action.bound
   setSubtotalStyle(value) {
     if (this.selectedRegion) {
+      this.overallOrderShow = !this.overallOrderShow
       const arr = this.selectedRegion.split('.')
       const subtotalConfig = this.config.contents[arr[2]].subtotal
 
@@ -937,10 +1025,11 @@ 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
 
@@ -956,10 +1045,11 @@ 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
 
@@ -968,10 +1058,11 @@ 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
 
@@ -982,7 +1073,210 @@ 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() {
+    if (this.selectedRegion) {
+      this.overallOrderShow = !this.overallOrderShow
+      const arr = this.selectedRegion.split('.')
+      const overallOrderConfig = this.config.contents[arr[2]]?.overallOrder
+
+      const oldNeedUpperCase = overallOrderConfig?.needUpperCase
+      this.config.contents[arr[2]]?.overallOrder &&
+        set(overallOrderConfig, { needUpperCase: !oldNeedUpperCase })
+      // 没有大写金额时，将大写在前和大小写分开的多选框设置为false
+      if (
+        this.config.contents[arr[2]]?.overallOrder &&
+        overallOrderConfig.needUpperCase === false
+      ) {
+        overallOrderConfig.isUpperCaseBefore &&
+          set(overallOrderConfig, { isUpperCaseBefore: false })
+        overallOrderConfig.isUpperLowerCaseSeparate &&
+          set(overallOrderConfig, { isUpperLowerCaseSeparate: false })
+      }
+    }
+  }
+
+  // 整单合计设置大写金额在前
+  @action.bound
+  setOverallOrderUpperCaseBefore() {
+    if (this.selectedRegion) {
+      this.overallOrderShow = !this.overallOrderShow
+      const arr = this.selectedRegion.split('.')
+      const overallOrderConfig = this.config.contents[arr[2]]?.overallOrder
+
+      const oldUpperCaseBefore = overallOrderConfig?.isUpperCaseBefore
+      this.config.contents[arr[2]]?.overallOrder &&
+        set(overallOrderConfig, { isUpperCaseBefore: !oldUpperCaseBefore })
+    }
+  }
+
+  // 整单合计设置大小写金额分开
+  @action.bound
+  setOverallOrderUpperLowerCaseSeparate() {
+    if (this.selectedRegion) {
+      this.overallOrderShow = !this.overallOrderShow
+      const arr = this.selectedRegion.split('.')
+      const overallOrderConfig = this.config.contents[arr[2]]?.overallOrder
+
+      const oldUpperLowerCaseSeparate =
+        overallOrderConfig.isUpperLowerCaseSeparate
+      set(overallOrderConfig, {
+        isUpperLowerCaseSeparate: !oldUpperLowerCaseSeparate
+      })
+    }
+  }
+
+  // 整单合计开启自定义单元格
+  @action.bound
+  setOverallOrderCustomCells() {
+    if (this.selectedRegion) {
+      // 作用：触发tableoverallordertr组件的更新
+      this.overallOrderShow = !this.overallOrderShow
+      const arr = this.selectedRegion.split('.')
+      const table = this.config.contents[arr[2]]
+      const overallOrderConfig = table?.overallOrder
+      if (!overallOrderConfig || !overallOrderConfig?.show) return
+      // 多栏表格情况
+      const colSpanLength = getColSpanLength(table)
+      const oldCustomCells = overallOrderConfig?.isCustomCells
+
+      set(overallOrderConfig, {
+        isCustomCells: !oldCustomCells
+      })
+
+      if (overallOrderConfig?.isCustomCells) {
+        // fields添加自定义单元格
+        overallOrderConfig.fields = [
+          overallOrderConfig.fields[0],
+          {
+            ...this.overallOrderConfigFields,
+            // 和之前保持一样的样式
+            style: { ...overallOrderConfig.fields[0].style }
+          }
+        ]
+        // 重新计算合并单元格的个数
+        overallOrderConfig.fields[0].colSpan =
+          colSpanLength - overallOrderConfig.fields[1].colSpan
+      } else {
+        // 关闭自定义单元格
+        overallOrderConfig.fields = [overallOrderConfig.fields[0]]
+        // 重新计算合并单元格的个数
+        overallOrderConfig.fields[0].colSpan = colSpanLength
+      }
+
+      this.config = toJS(this.config)
+    }
+  }
+
+  // 整单合计自定义单元格文本输入
+  @action.bound
+  setOverallOrderFields(value) {
+    if (this.selectedRegion) {
+      const arr = this.selectedRegion.split('.')
+      const table = this.config.contents[arr[2]]
+      const overallOrderConfig = table?.overallOrder
+
+      if (overallOrderConfig.isCustomCells) {
+        const overallOrderConfigFields = table?.overallOrder.fields
+        overallOrderConfigFields[1].name = value
+      }
+    }
+  }
+
+  // 整单合计样式设置
+  @action.bound
+  setOverallOrderStyle(value) {
+    if (this.selectedRegion) {
+      const flexStyle = {
+        left: 'flex-start',
+        center: 'center',
+        right: 'flex-end'
+      }
+      const arr = this.selectedRegion.split('.')
+      const overallOrderConfigFields = this.config.contents[arr[2]]
+        ?.overallOrder.fields
+      _.forEach(overallOrderConfigFields, item => {
+        const oldStyle = item.style || {}
+        set(item, {
+          style: {
+            ...oldStyle,
+            ...value,
+            // 整单合计里使用的flex布局，textAlign不生效
+            'justify-content': flexStyle[value.textAlign]
+          }
+        })
+      })
+    }
+  }
+
+  // 合计和每页合计设置交换位置
   @action.bound
   setSubtotalCommutationPlace() {
     if (this.selectedRegion) {