gm-printer 11.0.1 → 11.0.2-beta.2

package/package.json

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

package/src/common/editor_store.js

@@ -94,13 +94,45 @@ class EditorStore {
 
   @action
   setSubtotalFieldsCol(arr) {
-    // this.overallOrderShow = !this.overallOrderShow
-    // 重新计算每页合计的单元格
     const table = this.config.contents[arr[2]]
+    if (!table?.subtotal?.show) return
+
+    const colSpanLength = getColSpanLength(table)
+    if (!table.subtotal.fields?.length) {
+      set(table.subtotal, {
+        fields: [
+          {
+            name: '每页合计：',
+            valueField: 'real_item_price',
+            colSpan: colSpanLength
+          }
+        ]
+      })
+      return
+    }
+
     const subtotalLength = table.subtotal.fields.length
     table.subtotal.fields[subtotalLength - 1].colSpan += 1
   }
 
+  @action
+  updateSelectedRegionAfterContentInsert(insertIndex) {
+    const updateNameIndex = name => {
+      if (!name) return name
+      const parts = name.split('.')
+      if (parts[0] !== 'contents') return name
+      const regionIndex = ~~parts[2]
+      if (regionIndex >= insertIndex) {
+        parts[2] = String(regionIndex + 1)
+        return parts.join('.')
+      }
+      return name
+    }
+
+    this.selectedRegion = updateNameIndex(this.selectedRegion)
+    this.selected = updateNameIndex(this.selected)
+  }
+
   @action
   setMultiDigitDecimal(bool) {
     this.isMultiDigitDecimal = bool
@@ -266,6 +298,7 @@ class EditorStore {
       { batchPrintConfig: 1, isFixLastFooter: true },
       config
     )
+    this.defaultTableDataKey = config.defaultTableDataKey || 'orders'
     this.originConfig = config
     this.selected = null
     this.selectedRegion = null
@@ -1205,6 +1238,8 @@ class EditorStore {
             }
           })
         }
+        this.updateSelectedRegionAfterContentInsert(index)
+        this.config = toJS(this.config)
       }
     }
   }

package/src/common/editor_title.js

@@ -72,13 +72,15 @@ class EditorTitle extends React.Component {
   }
 
   handleTestPrint = () => {
-    const { mockData, editStore } = this.props
+    // 新增结款单每页合计标识，测试打印时原样透传到打印入口
+    const { mockData, editStore, isSomeSubtotalTr } = this.props
     doPrint(
       {
         config: toJS(editStore.config),
         data: mockData
       },
-      true
+      true,
+      isSomeSubtotalTr
     )
   }
 
@@ -140,10 +142,14 @@ class EditorTitle extends React.Component {
 EditorTitle.propTypes = {
   onSave: PropTypes.func.isRequired,
   isPurchase: PropTypes.bool,
-  editStore: PropTypes.object
+  editStore: PropTypes.object,
+  // 标识是否为结款单每页合计场景
+  isSomeSubtotalTr: PropTypes.bool
 }
 EditorTitle.defaultProps = {
-  isPurchase: false
+  isPurchase: false,
+  // 默认按非结款单每页合计场景处理
+  isSomeSubtotalTr: false
 }
 
 EditorTitle.wrappedComponent.propTypes = {

package/src/editor/context_menu_config.js

@@ -0,0 +1,335 @@
+import i18next from '../../locales'
+import React from 'react'
+import PropTypes from 'prop-types'
+import CommonContextMenu from '../common/common_context_menu'
+import { inject, observer } from 'mobx-react'
+import _ from 'lodash'
+import { Printer } from '../printer'
+import { isMultiTable } from '../util'
+import { LONG_PRINT } from '../config'
+
+const blockTypeList = [
+  { value: '', text: i18next.t('插入文本') },
+  { value: 'line', text: i18next.t('插入线条') },
+  { value: 'image', text: i18next.t('插入图片') },
+  { value: 'counter', text: i18next.t('插入分类汇总') },
+  { value: 'tag', text: i18next.t('插入标签汇总') },
+  { value: 'barcode', text: i18next.t('插入订单条形码') },
+  { value: 'qrcode', text: i18next.t('插入订单溯源二维码') },
+  {
+    value: 'uniform_social_credit_code',
+    text: i18next.t('插入苏州安全监管平台二维码')
+  }
+]
+
+@inject('editStore')
+@observer
+class ContextMenu extends React.Component {
+  componentDidMount() {
+    const {
+      editStore,
+      editStore: {
+        config: { autoFillConfig, specialControlConfig }
+      }
+    } = this.props
+
+    if (autoFillConfig?.checked) {
+      editStore.handleChangeTableData(
+        autoFillConfig?.checked,
+        autoFillConfig?.dataKey
+      )
+    }
+    /** 初始化特殊控制的配置 */
+    if (specialControlConfig?.multiDigitDecimal) {
+      // 多位小数
+      editStore.setMultiDigitDecimal(specialControlConfig?.multiDigitDecimal)
+    }
+    if (specialControlConfig?.taxFreeProductRateDisplay !== undefined) {
+      // 免税产品税率显示
+      editStore.setTaxFreeProductRateDisplay(
+        specialControlConfig?.taxFreeProductRateDisplay || ''
+      )
+    }
+  }
+
+  isMenuItemEnabled = key => {
+    const { menuConfig } = this.props
+    if (!menuConfig) return true
+    if (Array.isArray(menuConfig)) return menuConfig.includes(key)
+    if (typeof menuConfig === 'object') return !!menuConfig[key]
+    return true
+  }
+
+  /**
+   * 是否存在每页合计按钮,非异常明细才有按钮
+   * @param name => ContextMenu 的 this.state.name
+   * @return {boolean}
+   */
+  hasSubtotalBtn = name => {
+    if (!name) return false
+    const noSubtotalList = ['abnormal', 'abnormalDetails']
+    const arr = name.split('.')
+    if (_.includes(arr, 'table')) {
+      const dataKey = this.props.editStore.config.contents[arr[2]].dataKey
+      return !_.includes(noSubtotalList, dataKey)
+    }
+  }
+
+  handleChangeTableDataKey = (key, name) => {
+    const { editStore } = this.props
+
+    editStore.changeTableDataKey(name, key)
+  }
+
+  handleSubtotal = name => {
+    const { editStore } = this.props
+    editStore.setSubtotalShow(name)
+  }
+
+  handleCategoryConfig = (key, name) => {
+    const { editStore } = this.props
+    editStore.changeTableDataKey(name, key)
+
+    editStore.setCategoryConfigShow(name)
+  }
+
+  handleChangeTableData = isAutoFilling => {
+    const { editStore } = this.props
+    editStore.handleChangeTableData(isAutoFilling)
+  }
+
+  handleOverallOrder = name => {
+    const { editStore } = this.props
+    editStore.setOverallOrderShow(name)
+  }
+
+  handleDiyOverallOrder = name => {
+    const { editStore } = this.props
+    editStore.setDiyOverallOrderShow(name)
+  }
+
+  // 通用的自定义合计菜单项处理
+  handleDiySummary = (name, configKey) => {
+    const { editStore } = this.props
+    const methodName = configKey
+      .split(/(?=[A-Z])/)
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('')
+
+    const method = editStore[`set${methodName}Show`]
+
+    if (configKey === 'diyCategorySubtotal') {
+      const arr = name.split('.')
+      const dataKey = editStore.config.contents[arr[2]].dataKey
+      console.log('dataKey==> handleDiySummary', dataKey)
+
+      if (!dataKey.split('_').includes('category')) {
+        editStore.changeTableDataKey(name, 'category', {
+          type: 'diyCategorySubtotal'
+        })
+      }
+    }
+    if (configKey === 'diyTagSubtotal') {
+      const arr = name.split('.')
+      const dataKey = editStore.config.contents[arr[2]].dataKey
+      console.log('dataKey==> handleDiySummary', dataKey)
+
+      if (!dataKey.split('_').includes('tag')) {
+        editStore.changeTableDataKey(name, 'tag', {
+          type: 'diyTagSubtotal'
+        })
+      }
+    }
+    if (method) {
+      method(name)
+    }
+  }
+
+  renderOrderActionBtn = name => {
+    if (!this.hasSubtotalBtn(name)) {
+      return null
+    }
+
+    const {
+      editStore: {
+        config: {
+          page: { type },
+          showDiyOverAllOrder
+        },
+        isAutoFilling
+      }
+    } = this.props
+    const arr = name.split('.')
+    const {
+      dataKey,
+      subtotal,
+      overallOrder,
+      diySubtotal,
+      diyTagSubtotal,
+      diyOverallOrder,
+      diyCategorySubtotal
+    } = 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 isTagActive = keyArr.includes('tag')
+    const isNewCategoryActive = keyArr.includes('newCategory')
+    const isSubtotalActive = subtotal.show
+    const isOverallOrder = overallOrder?.show
+    const isDiyOverallOrder = diyOverallOrder?.show
+    const isDiySubtotal = diySubtotal?.show
+    const isDiyTagSubtotal = diyTagSubtotal?.show
+    const isDiyCategorySubtotal = diyCategorySubtotal?.show
+
+    // 长条打印
+    const isLongPrint = type === LONG_PRINT
+
+    return (
+      <>
+        {this.isMenuItemEnabled('multi') && !isLongPrint && (
+          <div
+            onClick={this.handleChangeTableDataKey.bind(this, 'multi', name)}
+            className={isMultiActive ? 'active' : ''}
+          >
+            {i18next.t('双栏商品')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('multi3') && type !== 'A4/3' && !isLongPrint && (
+          <div
+            onClick={this.handleChangeTableDataKey.bind(this, 'multi3', name)}
+            className={isThreeActive ? 'active' : ''}
+          >
+            {i18next.t('三栏商品')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('category') && (
+          <div
+            onClick={this.handleChangeTableDataKey.bind(
+              this,
+              'category',
+              name,
+              isCategoryActive
+            )}
+            className={isCategoryActive ? 'active' : ''}
+          >
+            {i18next.t('分类小计')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('categoryDiy') && (
+          <div
+            onClick={this.handleChangeTableDataKey.bind(
+              this,
+              'categoryDiy',
+              name
+            )}
+            className={isDiyCategorySubtotal ? 'active' : ''}
+          >
+            {i18next.t('自定义分类小计')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('tag') && (
+          <div
+            onClick={this.handleChangeTableDataKey.bind(this, 'tag', name)}
+            className={isTagActive ? 'active' : ''}
+          >
+            {i18next.t('标签小计')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('tagDiy') && (
+          <div
+            onClick={this.handleChangeTableDataKey.bind(this, 'tagDiy', name)}
+            className={isDiyTagSubtotal ? 'active' : ''}
+          >
+            {i18next.t('自定义标签小计')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('newCategory') && (
+          <div
+            onClick={this.handleCategoryConfig.bind(this, 'newCategory', name)}
+            className={isNewCategoryActive ? 'active' : ''}
+          >
+            {i18next.t('商品分类')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('subtotal') && (
+          <div
+            onClick={this.handleSubtotal.bind(this, name)}
+            className={isSubtotalActive ? 'active' : ''}
+          >
+            {i18next.t('每页合计')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('diySubtotal') && (
+          <div
+            onClick={() => this.handleDiySummary(name, 'diySubtotal')}
+            className={isDiySubtotal ? 'active' : ''}
+          >
+            {i18next.t('自定义每页合计')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('autoFill') && (
+          <div
+            onClick={this.handleChangeTableData.bind(this, !isAutoFilling)}
+            className={isAutoFilling ? 'active' : ''}
+          >
+            {i18next.t('行数填充')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('overallOrder') && (
+          <div
+            onClick={this.handleOverallOrder.bind(this, name)}
+            className={isOverallOrder ? 'active' : ''}
+          >
+            {i18next.t('整单合计')}
+          </div>
+        )}
+        {this.isMenuItemEnabled('diyOverallOrder') &&
+          !isMultiTable(dataKey) &&
+          showDiyOverAllOrder && (
+            <div
+              onClick={this.handleDiyOverallOrder.bind(this, name)}
+              className={isDiyOverallOrder ? 'active' : ''}
+            >
+              {i18next.t('自定义整单合计')}
+            </div>
+          )}
+      </>
+    )
+  }
+
+  render() {
+    const { editStore, customTableConfigs } = this.props
+    return (
+      <CommonContextMenu
+        renderTableAction={this.renderOrderActionBtn}
+        insertBlockList={blockTypeList}
+        customTableConfigs={customTableConfigs}
+      >
+        <Printer
+          key={editStore.computedPrinterKey}
+          selected={editStore.selected}
+          selectedRegion={editStore.selectedRegion}
+          isAutoFilling={editStore.isAutoFilling}
+          fillIndex={editStore.fillIndex}
+          lineheight={editStore.computedTableCustomerRowHeight}
+          config={editStore.config}
+          data={editStore.mockData}
+          getremainpageHeight={editStore.setRemainPageHeight}
+          overallorder={editStore.overallOrderShow}
+        />
+      </CommonContextMenu>
+    )
+  }
+}
+ContextMenu.propTypes = {
+  editStore: PropTypes.object,
+  mockData: PropTypes.object,
+  customTableConfigs: PropTypes.array,
+  menuConfig: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.object
+  ])
+}
+export default ContextMenu

package/src/editor/editor_menu_config.js

@@ -0,0 +1,140 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import { Flex, ToolTip } from '../components'
+import { Gap, Title } from '../common/component'
+import editStore from './store'
+import { observer, inject } from 'mobx-react'
+import EditorTitle from '../common/editor_title'
+import EditorSelect from '../common/editor_select'
+import SpecialField from '../common/editor_special_field'
+import SpecialOtherField from '../common/editor_special_other_field'
+import EditorField from '../common/editor_edit_field'
+import EditorAddField from '../common/editor_add_field'
+import EditorPageSummary from '../common/editor_page_summary'
+import EditorCutomizedConfig from '../common/editor_customize_config'
+import ContextMenu from './context_menu_config'
+import i18next from '../../locales'
+import withStore from '../common/hoc_with_store'
+
+// ‼️‼️🚸🚸 注意: value的命名不要用下划线! 原因是 computedTableDataKeyOfSelectedRegion 会split('_')下划线做一些事情‼️
+// 📚hasSubtotalBtn 这种表格是否支持  双栏,分类,合计  功能
+const tableDataKeyList = [
+  { value: 'orders', text: i18next.t('全部商品'), hasSubtotalBtn: true },
+  { value: 'abnormal', text: i18next.t('异常商品'), hasSubtotalBtn: false },
+  {
+    value: 'abnormalDetails',
+    text: i18next.t('异常商品(明细)'),
+    hasSubtotalBtn: false
+  },
+  { value: 'reward', text: i18next.t('积分表格'), hasSubtotalBtn: false },
+  { value: 'combination', text: i18next.t('组合商品'), hasSubtotalBtn: false },
+  { value: 'turnover', text: i18next.t('周转物表格'), hasSubtotalBtn: false }
+]
+
+export const noSubtotalBtnTableDataKeySet = new Set(
+  tableDataKeyList.filter(v => !v.hasSubtotalBtn).map(o => o.value)
+)
+
+@withStore(editStore)
+@inject('editStore')
+@observer
+class Editor extends React.Component {
+  render() {
+    const {
+      onSave,
+      showEditor,
+      addFields,
+      showNewDate,
+      mockData,
+      mergeClassificationAndLabel,
+      customTableConfigs,
+      menuConfig
+    } = this.props
+    return (
+      <div className='gm-printer-edit'>
+        <Flex className='gm-printer-edit-title-fixed'>
+          <Title
+            title={i18next.t('模板预览')}
+            text={
+              <span className='gm-text-desc gm-padding-left-5'>
+                {i18next.t(
+                  '说明：选中内容进行编辑，可拖动字段移动位置，右键使用更多功能'
+                )}
+                {/* <a
+                  href='https://v.qq.com/x/page/t08044292dd.html'
+                  target='_blank'
+                  className='btn-link'
+                  rel='noopener noreferrer'
+                >
+                  {i18next.t('查看视频教程')}
+                </a> */}
+              </span>
+            }
+          />
+        </Flex>
+
+        {showEditor && (
+          <div className='gm-printer-edit-zone'>
+            <EditorTitle onSave={onSave} />
+            <Gap height='10px' />
+            <>
+              <>{i18next.t('模版类型')}</>
+              <ToolTip text='表示该模板是针对单一商户的配送单模板（商户配送单），或是账户合并打印配送单（账户配送单）的模板。' />
+              <span>{':' + i18next.t('商户配送单')}</span>
+            </>
+            <Gap height='10px' />
+            <EditorSelect />
+            <Gap height='5px' />
+            <SpecialField addFields={addFields} mockData={mockData} />
+            <SpecialOtherField addFields={addFields} mockData={mockData} />
+            <EditorCutomizedConfig />
+            <Gap height='5px' />
+            <EditorField
+              tableDataKeyList={tableDataKeyList}
+              showNewDate={showNewDate}
+              mergeClassificationAndLabel={mergeClassificationAndLabel}
+            />
+            <Gap height='5px' />
+            <EditorAddField addFields={addFields} />
+            <Gap height='5px' />
+            <EditorPageSummary summaryFields={addFields.summaryFields} />
+
+            <div id='gm-printer-tip' />
+
+            <div id='gm-printer-modal' />
+          </div>
+        )}
+
+        <div className='gm-printer-edit-wrap'>
+          <ContextMenu
+            customTableConfigs={customTableConfigs}
+            menuConfig={menuConfig}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+Editor.propTypes = {
+  config: PropTypes.object.isRequired,
+  onSave: PropTypes.func,
+  showEditor: PropTypes.bool,
+  mockData: PropTypes.object.isRequired,
+  addFields: PropTypes.object.isRequired,
+  showNewDate: PropTypes.bool,
+  mergeClassificationAndLabel: PropTypes.bool,
+  customTableConfigs: PropTypes.array,
+  menuConfig: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.object
+  ])
+}
+
+Editor.defaultProps = {
+  onSave: _.noop,
+  showNewDate: false
+}
+
+export default Editor

package/src/editor/index.js

@@ -1,4 +1,6 @@
 import withShadowDom from '../common/hoc_with_shadow_dom'
 import Editor from './editor'
+import EditorMenuConfig from './editor_menu_config'
 
 export default withShadowDom(Editor)
+export const Editor2 = withShadowDom(EditorMenuConfig)

package/src/editor_settle/editor.js

@@ -42,7 +42,8 @@ class Editor extends React.Component {
 
         {showEditor && (
           <div className='gm-printer-edit-zone'>
-            <EditorTitle onSave={onSave} />
+            {/* 透传结款单每页合计标识给标题区，用于测试打印时走对应逻辑 */}
+            <EditorTitle onSave={onSave} isSomeSubtotalTr={isSomeSubtotalTr} />
             <Gap height='10px' />
             <EditorSelect />
             <Gap height='5px' />

package/src/examining_report_editor/context_menu.js

@@ -0,0 +1,94 @@
+import i18next from '../../locales'
+import React from 'react'
+import PropTypes from 'prop-types'
+import CommonContextMenu from '../common/common_context_menu'
+import { inject, observer } from 'mobx-react'
+import _ from 'lodash'
+import { Printer } from '../printer'
+
+const blockTypeList = [
+  { value: '', text: i18next.t('插入文本') },
+  { value: 'line', text: i18next.t('插入线条') },
+  { value: 'image', text: i18next.t('插入图片') }
+]
+
+@inject(stores => ({
+  editStore: stores.editStore,
+  mockData: stores.mockData
+}))
+@observer
+class ContextMenu extends React.Component {
+  isMenuItemEnabled = key => {
+    const { menuConfig } = this.props
+    if (!menuConfig) return true
+    if (Array.isArray(menuConfig)) return menuConfig.includes(key)
+    if (typeof menuConfig === 'object') return !!menuConfig[key]
+    return true
+  }
+
+  hasSubtotalBtn = name => {
+    if (!name) return false
+    const arr = name.split('.')
+    if (!_.includes(arr, 'table')) return false
+    const dataKey = this.props.editStore.config.contents[arr[2]].dataKey
+    return dataKey === 'examiningDetail' || dataKey.startsWith('examiningDetail_')
+  }
+
+  handleChangeTableDataKey = (key, name) => {
+    const { editStore } = this.props
+    editStore.changeTableDataKey(name, key)
+  }
+
+  renderTableAction = name => {
+    if (!this.hasSubtotalBtn(name)) {
+      return null
+    }
+
+    const arr = name.split('.')
+    const { dataKey } = this.props.editStore.config.contents[arr[2]]
+    const keyArr = dataKey.split('_')
+    const isMultiActive = keyArr.includes('multi')
+
+    return (
+      <>
+        {this.isMenuItemEnabled('multi') && (
+          <div
+            onClick={this.handleChangeTableDataKey.bind(this, 'multi', name)}
+            className={isMultiActive ? 'active' : ''}
+          >
+            {i18next.t('双栏商品')}
+          </div>
+        )}
+      </>
+    )
+  }
+
+  render() {
+    const { editStore, mockData } = this.props
+    return (
+      <CommonContextMenu
+        renderTableAction={this.renderTableAction}
+        insertBlockList={blockTypeList}
+      >
+        <Printer
+          key={editStore.computedPrinterKey}
+          selected={editStore.selected}
+          selectedRegion={editStore.selectedRegion}
+          config={editStore.config}
+          data={mockData}
+        />
+      </CommonContextMenu>
+    )
+  }
+}
+
+ContextMenu.propTypes = {
+  editStore: PropTypes.object,
+  mockData: PropTypes.object,
+  menuConfig: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.object
+  ])
+}
+
+export default ContextMenu