gm-printer 10.38.7 → 10.38.8-beta.2

package/package.json

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

package/src/common/component.js

@@ -72,12 +72,13 @@ class Text extends React.Component {
   }
 
   render() {
-    const { value, placeholder, style, className, ...rest } = this.props
+    const { value, placeholder, style, className, onChange, ...rest } =
+      this.props
     return (
       <input
         className={classNames('gm-printer-edit-input', className)}
         type='text'
-        value={value}
+        value={value == null || typeof value === 'object' ? '' : value}
         placeholder={placeholder}
         onChange={this.handleChange}
         style={style}

package/src/common/editor_edit_field.js

@@ -22,6 +22,7 @@ import PropTypes from 'prop-types'
 import { subtotalRadioList } from './util'
 import { LONG_PRINT } from '../config'
 import _ from 'lodash'
+import EditorPageBorder from './editor_page_border'
 
 @inject('editStore')
 @observer
@@ -247,7 +248,7 @@ class EditorField extends React.Component {
       false
     // 每页合计样式
     const overallOrderStyle =
-      (overallOrder && overallOrder?.fields[0].style) || {}
+      (overallOrder && overallOrder?.fields?.[0]?.style) || {}
     // 每页合计自定义单元格
     const subtotalUpperCustomCell =
       (editStore.computedTableSpecialConfig?.subtotal &&
@@ -282,7 +283,7 @@ class EditorField extends React.Component {
       false
     // 自定义整单合计样式
     const diyOverallOrderStyle =
-      (diyOverallOrder && diyOverallOrder?.fields[0].style) || {}
+      (diyOverallOrder && diyOverallOrder?.fields?.[0]?.style) || {}
 
     //  自定义整单合计是否大写
     const diyOverallOrderNeedUpperCase =
@@ -303,7 +304,7 @@ class EditorField extends React.Component {
 
     const diyOverallOrderValueField =
       editStore.computedTableSpecialConfig?.diyOverallOrder?.fields?.[0]
-        .valueField
+        ?.valueField
 
     // 分类/标签小计 是否需要大写
     const classificationAndLabelTallyNeedUpperCase =
@@ -532,12 +533,12 @@ class EditorField extends React.Component {
             <Flex style={{ marginLeft: 57 }}>
               {subtotalRadioList.map(fields => {
                 // 兼容
-                let subtotalFields = subtotal?.fields?.[0].valueField
+                let subtotalFields = subtotal?.fields?.[0]?.valueField
                 if (subtotalFields === 'total_item_price')
                   subtotalFields = '下单金额'
                 if (
                   subtotalFields === 'real_item_price' ||
-                  !subtotal?.fields?.[0].valueField
+                  !subtotal?.fields?.[0]?.valueField
                 )
                   subtotalFields = '出库金额'
                 return (
@@ -597,8 +598,8 @@ class EditorField extends React.Component {
               // 只有自定义单元格的valueField值是空的，以后自每页合计，记得加type，之前没加，都无法区分
               value={
                 subtotal && subtotal?.fields?.length > 1
-                  ? _.find(subtotal?.fields, item => !item.valueField)?.name ??
-                    ''
+                  ? _.find(subtotal?.fields, item => item && !item.valueField)
+                      ?.name ?? ''
                   : ''
               }
               onChange={editStore.setSubtotalFields}
@@ -971,7 +972,12 @@ class EditorField extends React.Component {
     const { editStore } = this.props
 
     let content = null
-    if (editStore.computedIsSelectBlock) {
+    if (
+      editStore.enablePageBorder &&
+      editStore.selectedRegion === 'border'
+    ) {
+      content = <EditorPageBorder />
+    } else if (editStore.computedIsSelectBlock) {
       content = this.renderBlocks()
     } else if (editStore.computedIsSelectTable) {
       content = this.renderTable()

package/src/common/editor_page_border.js

@@ -0,0 +1,84 @@
+import i18next from '../../locales'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { observer, inject } from 'mobx-react'
+import { Gap, Title } from './component'
+import { Flex } from '../components'
+
+@inject('editStore')
+@observer
+class EditorPageBorder extends React.Component {
+  handleSelect = id => {
+    this.props.editStore.setPageBorderId(id)
+  }
+
+  render() {
+    const { editStore } = this.props
+    const { borderId } = editStore.config.page || {}
+    const list = editStore.computedAvailablePageBorders
+
+    return (
+      <div>
+        <Title title={i18next.t('编辑边框')} />
+        <Gap />
+        {!list.length ? (
+          <div className='gm-text-desc'>{i18next.t('暂无可用边框')}</div>
+        ) : (
+          <Flex wrap>
+            {list.map(item => {
+              const active = borderId === item.id
+              return (
+                <div
+                  key={item.id}
+                  onClick={() => this.handleSelect(item.id)}
+                  style={{
+                    width: 88,
+                    margin: '0 8px 8px 0',
+                    padding: 4,
+                    cursor: 'pointer',
+                    border: active ? '2px solid #56a3f2' : '1px solid #eee',
+                    textAlign: 'center'
+                  }}
+                >
+                  <img
+                    src={item.imageUrl}
+                    alt={item.name}
+                    style={{
+                      width: '100%',
+                      height: 64,
+                      objectFit: 'contain',
+                      display: 'block'
+                    }}
+                  />
+                  <div style={{ marginTop: 4, fontSize: 12 }}>{item.name}</div>
+                </div>
+              )
+            })}
+            <div
+              onClick={() => this.handleSelect(null)}
+              style={{
+                width: 88,
+                margin: '0 8px 8px 0',
+                padding: 4,
+                cursor: 'pointer',
+                border: !borderId ? '2px solid #56a3f2' : '1px dashed #ccc',
+                textAlign: 'center',
+                lineHeight: '64px',
+                fontSize: 12,
+                color: '#999'
+              }}
+            >
+              {i18next.t('无边框')}
+            </div>
+          </Flex>
+        )}
+      </div>
+    )
+  }
+}
+
+EditorPageBorder.propTypes = {
+  editStore: PropTypes.object
+}
+
+export default EditorPageBorder

package/src/common/editor_store.js

@@ -6,6 +6,12 @@ import { dispatchMsg, getBlockName, exchange, getColSpanLength } from '../util'
 import { accountRadioList } from './util'
 import React from 'react'
 import { createDiySummaryStoreMethods } from './diy_summary_helper'
+import {
+  filterPageBorderTypes,
+  isPageBorderCompatible,
+  resolvePageGapForBorder,
+  getPageBorderGap
+} from './page_border'
 
 class EditorStore {
   @observable
@@ -47,6 +53,9 @@ class EditorStore {
   @observable
   selectedRegion = null
 
+  @observable
+  enablePageBorder = false
+
   @observable
   insertPanel = 'header'
 
@@ -99,20 +108,27 @@ class EditorStore {
 
     const colSpanLength = getColSpanLength(table)
     if (!table.subtotal.fields?.length) {
-      set(table.subtotal, {
-        fields: [
-          {
-            name: '每页合计：',
-            valueField: 'real_item_price',
-            colSpan: colSpanLength
-          }
-        ]
-      })
+      const fields = [
+        {
+          name: '每页合计：',
+          valueField: 'real_item_price',
+          colSpan: colSpanLength
+        }
+      ]
+      if (table.subtotal.isCustomCells) {
+        const customCellField = { ...this.subtotalConfigFields }
+        fields[0].colSpan = colSpanLength - customCellField.colSpan
+        fields.push(customCellField)
+      }
+      set(table.subtotal, { fields })
       return
     }
 
     const subtotalLength = table.subtotal.fields.length
-    table.subtotal.fields[subtotalLength - 1].colSpan += 1
+    const lastField = table.subtotal.fields[subtotalLength - 1]
+    if (lastField) {
+      lastField.colSpan += 1
+    }
   }
 
   @action
@@ -292,7 +308,7 @@ class EditorStore {
   }
 
   @action
-  init(config, data) {
+  init(config, data, options = {}) {
     // batchPrintConfig: 1 不连续打印（一张采购单不出现多供应商）2 连续打印（一张采购单可能出现多个供应商）
     this.config = Object.assign(
       { batchPrintConfig: 1, isFixLastFooter: true },
@@ -310,6 +326,7 @@ class EditorStore {
 
     this.taxFreeProductRateDisplay =
       config?.specialControlConfig?.taxFreeProductRateDisplay || ''
+    this.enablePageBorder = !!options.enablePageBorder
   }
 
   @action
@@ -358,18 +375,50 @@ class EditorStore {
     const contentRegions = this.config.contents.map((v, i) => {
       if (v.type === 'table') {
         return { value: `contents.table.${i}`, text: i18next.t('区域') + i }
-      } else {
-        return { value: `contents.panel.${i}`, text: i18next.t('区域') + i }
       }
+      return { value: `contents.panel.${i}`, text: i18next.t('区域') + i }
     })
 
-    return [
+    const list = [
       { value: 'all', text: i18next.t('请选择区域') },
       { value: 'header', text: i18next.t('页眉') },
       ...contentRegions,
       { value: 'sign', text: i18next.t('签名') },
       { value: 'footer', text: i18next.t('页脚') }
     ]
+    if (this.enablePageBorder) {
+      list.push({ value: 'border', text: i18next.t('边框') })
+    }
+    return list
+  }
+
+  @computed
+  get computedAvailablePageBorders() {
+    const types = this.config?.pageBorderTypes
+    const pageType = this.config?.page?.type
+    return filterPageBorderTypes(types, pageType)
+  }
+
+  @action
+  setEnablePageBorder(enable) {
+    this.enablePageBorder = !!enable
+  }
+
+  @action
+  setPageBorderId(borderId) {
+    if (!this.config?.page) return
+    const nextBorderId = borderId || null
+    const nextGap = resolvePageGapForBorder({
+      pageBorderTypes: this.config.pageBorderTypes,
+      borderId: nextBorderId,
+      pageType: this.config.page.type,
+      currentGap: this.config.page.gap
+    })
+    const patch = { borderId: nextBorderId }
+    if (nextGap) {
+      patch.gap = nextGap
+    }
+    set(this.config.page, patch)
   }
 
   @action
@@ -431,6 +480,23 @@ class EditorStore {
       gap,
       name
     }
+
+    const borderId = this.config.page.borderId
+    if (
+      borderId &&
+      !isPageBorderCompatible(this.config.pageBorderTypes, borderId, type)
+    ) {
+      set(this.config.page, { borderId: null })
+    } else if (borderId) {
+      // 纸张切换后仍匹配：仅当边框配置了 gap 时覆盖
+      const borderGap = getPageBorderGap(
+        this.config.pageBorderTypes,
+        borderId
+      )
+      if (borderGap) {
+        set(this.config.page, { gap: borderGap })
+      }
+    }
   }
 
   @action
@@ -442,6 +508,9 @@ class EditorStore {
   @computed
   get computedSelectedRegionTip() {
     if (!this.selectedRegion) return ''
+    if (this.selectedRegion === 'border') {
+      return i18next.t('说明：边框铺满整页，内容区仍保留页边距')
+    }
     return /(contents)|(sign)/g.test(this.selectedRegion) ? (
       <>
         <div>{i18next.t('说明：所选区域的内容仅打印一次')}</div>
@@ -1659,8 +1728,8 @@ class EditorStore {
           // fields添加自定义单元格
           subtotalConfig.fields = [
             subtotalConfig.fields[0],
-            this.subtotalAccountConfigFields,
-            subtotalConfig.fields[1]
+            { ...this.subtotalAccountConfigFields },
+            { ...subtotalConfig.fields[1] }
           ]
           // 重新计算合并单元格的个数
           subtotalConfig.fields[0].colSpan = Math.floor(colSpanLength / 3)
@@ -1673,7 +1742,7 @@ class EditorStore {
           // fields添加自定义单元格
           subtotalConfig.fields = [
             subtotalConfig.fields[0],
-            this.subtotalAccountConfigFields
+            { ...this.subtotalAccountConfigFields }
           ]
           // 重新计算合并单元格的个数
           subtotalConfig.fields[0].colSpan =
@@ -1685,7 +1754,7 @@ class EditorStore {
         if (subtotalConfig?.fields?.length === 3) {
           subtotalConfig.fields = [
             subtotalConfig.fields[0],
-            this.subtotalConfigFields
+            { ...this.subtotalConfigFields }
           ]
           // 重新计算合并单元格的个数
           subtotalConfig.fields[0].colSpan =
@@ -1719,7 +1788,7 @@ class EditorStore {
         isCustomCells: !oldCustomCells
       })
       // 兼容已经存在后端的模板，每页合计直接是显示的，导致每页合计配置没有fields,isCustomCells，手动添加上
-      if (oldCustomCells === undefined && !subtotalConfig.fields) {
+      if (!subtotalConfig.fields?.length) {
         set(subtotalConfig, {
           fields: [
             {
@@ -1730,15 +1799,16 @@ class EditorStore {
           ]
         })
       }
-      // 开启自定义单元格
+      // 开启自定义单元格（必须拷贝，禁止共用 store 上的模板对象，否则 toJS/多次开关后 fields 会错乱）
       if (subtotalConfig?.isCustomCells) {
-        // 同时还开启了自定义单元格选项
+        const customCellField = { ...this.subtotalConfigFields }
+        // 同时还开启了打印账户总计金额
         if (subtotalConfig?.fields?.length === 2) {
-          // fields添加自定义单元格
+          const accountField = { ...this.subtotalAccountConfigFields }
           subtotalConfig.fields = [
             subtotalConfig.fields[0],
-            this.subtotalAccountConfigFields,
-            this.subtotalConfigFields
+            accountField,
+            customCellField
           ]
           // 重新计算合并单元格的个数
           subtotalConfig.fields[0].colSpan = Math.floor(colSpanLength / 3)
@@ -1748,11 +1818,7 @@ class EditorStore {
             subtotalConfig.fields[0].colSpan -
             subtotalConfig.fields[1].colSpan
         } else {
-          // fields添加自定义单元格
-          subtotalConfig.fields = [
-            subtotalConfig.fields[0],
-            this.subtotalConfigFields
-          ]
+          subtotalConfig.fields = [subtotalConfig.fields[0], customCellField]
           // 重新计算合并单元格的个数
           subtotalConfig.fields[0].colSpan =
             colSpanLength - subtotalConfig.fields[1].colSpan
@@ -1763,7 +1829,7 @@ class EditorStore {
         if (subtotalConfig?.fields?.length === 3) {
           subtotalConfig.fields = [
             subtotalConfig.fields[0],
-            this.subtotalAccountConfigFields
+            { ...this.subtotalAccountConfigFields }
           ]
           // 重新计算合并单元格的个数
           subtotalConfig.fields[0].colSpan =
@@ -1781,17 +1847,30 @@ class EditorStore {
   // 每页合计自定义单元格文本输入
   @action.bound
   setSubtotalFields(value) {
-    if (this.selectedRegion) {
-      const arr = this.selectedRegion.split('.')
-      const table = this.config.contents[arr[2]]
-      const subtotalConfig = table?.subtotal
+    if (!this.selectedRegion) return
+    // Text 组件应传入 string；防护误传 React 事件对象
+    if (typeof value !== 'string') return
 
-      if (subtotalConfig.isCustomCells) {
-        const subtotalConfig = table?.subtotal.fields
-        subtotalConfig.length === 3
-          ? (subtotalConfig[2].name = value)
-          : (subtotalConfig[1].name = value)
-      }
+    const arr = this.selectedRegion.split('.')
+    const table = this.config.contents[arr[2]]
+    const subtotalConfig = table?.subtotal
+    if (!subtotalConfig?.isCustomCells) return
+
+    const fields = subtotalConfig.fields
+    if (!fields?.length) return
+
+    // 自定义单元格的 valueField 为空（与编辑面板展示逻辑一致）
+    const customField = _.find(fields, item => item && !item.valueField)
+    if (customField) {
+      customField.name = value
+      return
+    }
+
+    // 兼容：按位置写入（开启打印账户时自定义单元格在末位）
+    const target =
+      fields.length >= 3 ? fields[2] : fields.length >= 2 ? fields[1] : null
+    if (target) {
+      target.name = value
     }
   }
 
@@ -1927,13 +2006,16 @@ class EditorStore {
   // 整单合计自定义单元格文本输入
   @action.bound
   setOverallOrderFields(value) {
-    if (this.selectedRegion) {
-      const arr = this.selectedRegion.split('.')
-      const table = this.config.contents[arr[2]]
-      const overallOrderConfig = table?.overallOrder
+    if (!this.selectedRegion) return
+    if (typeof value !== 'string') return
+
+    const arr = this.selectedRegion.split('.')
+    const table = this.config.contents[arr[2]]
+    const overallOrderConfig = table?.overallOrder
 
-      if (overallOrderConfig.isCustomCells) {
-        const overallOrderConfigFields = table?.overallOrder.fields
+    if (overallOrderConfig?.isCustomCells) {
+      const overallOrderConfigFields = table?.overallOrder.fields
+      if (overallOrderConfigFields?.[1]) {
         overallOrderConfigFields[1].name = value
       }
     }

package/src/common/hoc_with_store.js

@@ -7,7 +7,15 @@ const withStore = store => WrapComponent =>
     constructor(props) {
       super(props)
       this.store = store
-      this.store.init(props.config, props.mockData)
+      this.store.init(props.config, props.mockData, {
+        enablePageBorder: props.enablePageBorder
+      })
+    }
+
+    componentDidUpdate(prevProps) {
+      if (prevProps.enablePageBorder !== this.props.enablePageBorder) {
+        this.store.setEnablePageBorder(this.props.enablePageBorder)
+      }
     }
 
     componentDidMount() {

package/src/common/page_border.js

@@ -0,0 +1,102 @@
+import _ from 'lodash'
+import { pageTypeMap } from '../config'
+
+/**
+ * @param {Array<{id:string,name:string,imageUrl:string,pageTypes:string[],gap?:object}>} types
+ * @param {string} pageType
+ */
+export function filterPageBorderTypes(types, pageType) {
+  if (!types || !types.length || !pageType) return []
+  return types.filter(
+    item => item && _.includes(item.pageTypes || [], pageType)
+  )
+}
+
+export function findPageBorderType(types, borderId) {
+  if (!borderId || !types) return null
+  return types.find(item => item && item.id === borderId) || null
+}
+
+/**
+ * 当前 borderId 是否仍适用于 pageType；不适用则应清空
+ */
+export function isPageBorderCompatible(types, borderId, pageType) {
+  if (!borderId) return true
+  return !!filterPageBorderTypes(types, pageType).find(
+    item => item.id === borderId
+  )
+}
+
+/**
+ * 取边框自带边距；无配置则返回 null（表示不覆盖 page.gap）
+ */
+export function getPageBorderGap(types, borderId) {
+  const item = findPageBorderType(types, borderId)
+  if (!item || !item.gap) return null
+  const { paddingTop, paddingRight, paddingBottom, paddingLeft } = item.gap
+  if (
+    paddingTop == null &&
+    paddingRight == null &&
+    paddingBottom == null &&
+    paddingLeft == null
+  ) {
+    return null
+  }
+  return {
+    paddingTop: paddingTop || '0mm',
+    paddingRight: paddingRight || '0mm',
+    paddingBottom: paddingBottom || '0mm',
+    paddingLeft: paddingLeft || '0mm'
+  }
+}
+
+/**
+ * 选中边框：有 gap 则用边框 gap，无 gap 则保持 currentGap
+ * 清空边框：回退纸张默认 gap
+ */
+export function resolvePageGapForBorder({
+  pageBorderTypes,
+  borderId,
+  pageType,
+  currentGap
+}) {
+  if (borderId) {
+    const borderGap = getPageBorderGap(pageBorderTypes, borderId)
+    if (borderGap) return borderGap
+    return currentGap ? { ...currentGap } : null
+  }
+  const defaultGap = pageTypeMap[pageType]?.gap
+  if (defaultGap) {
+    return { ...defaultGap }
+  }
+  return currentGap ? { ...currentGap } : null
+}
+
+/**
+ * 生成要合并进 .gm-printer-page 的边框背景 style
+ * 不满足条件时返回 {}
+ */
+export function getPageBorderBackgroundStyle({
+  enablePageBorder,
+  borderId,
+  pageBorderTypes
+}) {
+  if (!enablePageBorder || !borderId) return {}
+  const item = findPageBorderType(pageBorderTypes, borderId)
+  if (!item || !item.imageUrl) return {}
+  return {
+    backgroundImage: `url(${item.imageUrl})`,
+    backgroundSize: '100% 100%',
+    backgroundRepeat: 'no-repeat'
+  }
+}
+
+/**
+ * pageStyle 在前，边框 background* 覆盖其上
+ */
+export function mergePageStyleWithBorder(pageStyle, borderStyle) {
+  return {
+    ...(pageStyle || {}),
+    ...(borderStyle || {})
+  }
+}

package/src/editor/context_menu.js

@@ -292,6 +292,7 @@ class ContextMenu extends React.Component {
           key={editStore.computedPrinterKey}
           selected={editStore.selected}
           selectedRegion={editStore.selectedRegion}
+          enablePageBorder={editStore.enablePageBorder}
           isAutoFilling={editStore.isAutoFilling}
           fillIndex={editStore.fillIndex}
           lineheight={editStore.computedTableCustomerRowHeight}

package/src/editor/context_menu_config.js

@@ -311,6 +311,7 @@ class ContextMenu extends React.Component {
           key={editStore.computedPrinterKey}
           selected={editStore.selected}
           selectedRegion={editStore.selectedRegion}
+          enablePageBorder={editStore.enablePageBorder}
           isAutoFilling={editStore.isAutoFilling}
           fillIndex={editStore.fillIndex}
           lineheight={editStore.computedTableCustomerRowHeight}

package/src/editor/editor.js

@@ -115,6 +115,7 @@ class Editor extends React.Component {
 }
 
 Editor.propTypes = {
+  enablePageBorder: PropTypes.bool,
   config: PropTypes.object.isRequired,
   onSave: PropTypes.func,
   showEditor: PropTypes.bool,
@@ -126,6 +127,7 @@ Editor.propTypes = {
 }
 
 Editor.defaultProps = {
+  enablePageBorder: false,
   onSave: _.noop,
   showNewDate: false
 }

package/src/editor/editor_menu_config.js

@@ -118,6 +118,7 @@ class Editor extends React.Component {
 }
 
 Editor.propTypes = {
+  enablePageBorder: PropTypes.bool,
   config: PropTypes.object.isRequired,
   onSave: PropTypes.func,
   showEditor: PropTypes.bool,
@@ -133,6 +134,7 @@ Editor.propTypes = {
 }
 
 Editor.defaultProps = {
+  enablePageBorder: false,
   onSave: _.noop,
   showNewDate: false
 }

package/src/editor_account/context_menu.js

@@ -136,6 +136,7 @@ class ContextMenu extends React.Component {
           key={editStore.computedPrinterKey}
           selected={editStore.selected}
           selectedRegion={editStore.selectedRegion}
+          enablePageBorder={editStore.enablePageBorder}
           isAutoFilling={editStore.isAutoFilling}
           config={editStore.config}
           data={editStore.mockData}

package/src/editor_account/editor.js

@@ -77,6 +77,7 @@ class Editor extends React.Component {
 }
 
 Editor.propTypes = {
+  enablePageBorder: PropTypes.bool,
   config: PropTypes.object.isRequired,
   onSave: PropTypes.func,
   showEditor: PropTypes.bool,
@@ -86,6 +87,7 @@ Editor.propTypes = {
 }
 
 Editor.defaultProps = {
+  enablePageBorder: false,
   onSave: _.noop,
   showNewDate: false
 }