gm-printer 10.37.1 → 10.37.2

package/package.json

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

package/src/editor/context_menu2.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/editor2.js

@@ -0,0 +1,141 @@
+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_menu2'
+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
+    console.log('menuConfig', menuConfig)
+    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 Editor22 from './editor2'
 
 export default withShadowDom(Editor)
+export const Editor2 = withShadowDom(Editor22)

package/src/index.js

@@ -1,6 +1,7 @@
 // ‼️优先初始化语言设置(必须先初始化语言)
 import '../locales'
-import Editor from './editor'
+import Editor, { Editor2 } from './editor'
+
 import EditorPurchase from './editor_purchase'
 import EditorStockIn from './editor_stockin'
 import EditorStockOut from './editor_stockout'
@@ -27,6 +28,7 @@ export { setLocale } from '../locales'
 
 export {
   Editor,
+  Editor2,
   EditorStockIn,
   EditorStockOut,
   EditorPurchase,