gm-printer 10.42.3-beta.4 → 10.42.4-beta.0

package/locales/en.json

@@ -16,9 +16,6 @@
   "粗细": "",
   "高": "",
   "图片大小不能超过500Kb": "",
-  "图片大小不能超过2M": "Image size cannot exceed 2M",
-  "仅支持jpg、jpeg、png格式的图片": "Only JPG, JPEG, and PNG images are supported",
-  "支持插入2M以内的jpg、jpeg、png格式图片": "Support inserting JPG, JPEG, or PNG images within 2M",
   "配送单特殊控制": "",
   "添加字段": "",
   "编辑字段": "",

package/locales/th.json

@@ -16,9 +16,6 @@
   "粗细": "",
   "高": "",
   "图片大小不能超过500Kb": "",
-  "图片大小不能超过2M": "ขนาดรูปภาพต้องไม่เกิน 2M",
-  "仅支持jpg、jpeg、png格式的图片": "รองรับเฉพาะรูปภาพรูปแบบ jpg, jpeg, png",
-  "支持插入2M以内的jpg、jpeg、png格式图片": "รองรับการแทรกรูปภาพ jpg, jpeg, png ขนาดไม่เกิน 2M",
   "配送单特殊控制": "",
   "添加字段": "",
   "编辑字段": "",

package/locales/zh-HK.json

@@ -16,9 +16,6 @@
   "粗细": "粗細",
   "高": "高",
   "图片大小不能超过500Kb": "圖片大小不能超過500Kb",
-  "图片大小不能超过2M": "圖片大小不能超過2M",
-  "仅支持jpg、jpeg、png格式的图片": "僅支持jpg、jpeg、png格式的圖片",
-  "支持插入2M以内的jpg、jpeg、png格式图片": "支持插入2M以內的jpg、jpeg、png格式圖片",
   "添加字段": "添加字段",
   "编辑字段": "編輯字段",
   "配送单特殊控制": "配送单特殊控制",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gm-printer",
-  "version": "10.42.3-beta.4",
+  "version": "10.42.4-beta.0",
   "description": "diy printer",
   "main": "src/index.js",
   "scripts": {

package/src/common/common_context_menu.js

@@ -109,7 +109,7 @@ class CommonContextMenu extends React.Component {
     })
   }
 
-  handleInsertBlock = (type, link, ratio) => {
+  handleInsertBlock = (type, link) => {
     const { editStore } = this.props
     const { name, block } = this.state
 
@@ -120,8 +120,7 @@ class CommonContextMenu extends React.Component {
         left: block.left + 'px',
         top: block.top + 'px'
       },
-      link,
-      ratio
+      link
     )
 
     this.setState({
@@ -161,8 +160,8 @@ class CommonContextMenu extends React.Component {
     })
   }
 
-  handleInsertImage = (imgURL, ratio) => {
-    this.handleInsertBlock('image', imgURL, ratio)
+  handleInsertImage = imgURL => {
+    this.handleInsertBlock('image', imgURL)
   }
 
   handleRemove = () => {
@@ -328,7 +327,6 @@ class CommonContextMenu extends React.Component {
               onSuccess={this.handleInsertImage}
               key={v.value}
               text={v.text}
-              imageConfig={this.props.editStore.imageConfig}
             />
           ) : (
             <div

package/src/common/component.js

@@ -391,26 +391,12 @@ Line.propTypes = {
 
 class Size extends React.Component {
   handleChange = (type, value) => {
-    const { onChange, style, ratio } = this.props
+    const { onChange, style } = this.props
 
-    const next = {
+    onChange({
       ...style,
       [type]: value
-    }
-
-    // 电子签章:有原始比例时宽高联动,不允许拉变形
-    if (ratio && value !== '' && !value.endsWith('%')) {
-      const num = parseFloat(value)
-      if (!_.isNaN(num) && num > 0) {
-        if (type === 'width') {
-          next.height = Math.round(num / ratio) + 'px'
-        } else {
-          next.width = Math.round(num * ratio) + 'px'
-        }
-      }
-    }
-
-    onChange(next)
+    })
   }
 
   render() {
@@ -434,8 +420,7 @@ class Size extends React.Component {
 
 Size.propTypes = {
   style: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-  ratio: PropTypes.number
+  onChange: PropTypes.func.isRequired
 }
 
 class ImageUploader extends React.Component {
@@ -452,26 +437,7 @@ class ImageUploader extends React.Component {
       : event.target.files
     const file = droppedFiles[0]
 
-    if (!file) return
-
-    const { imageConfig } = this.props
-
-    if (imageConfig) {
-      // 增强模式(电子签章):校验类型与大小,提示文案由配置方给出
-      const acceptTypes = imageConfig.acceptTypes || [
-        'image/jpeg',
-        'image/jpg',
-        'image/png'
-      ]
-      if (!_.includes(acceptTypes, file.type)) {
-        Tip.warning(imageConfig.wrongTypeTip)
-        return
-      }
-      if (file.size > imageConfig.maxSize) {
-        Tip.warning(imageConfig.overSizeTip)
-        return
-      }
-    } else if (file.size > 512 * 1024) {
+    if (file.size > 512 * 1024) {
       Tip.warning(i18next.t('图片大小不能超过500Kb'))
       return
     }
@@ -497,21 +463,7 @@ class ImageUploader extends React.Component {
       .post()
       .then(json => {
         const imgURL = `${url.imgUrl}/${json.data.img_path_id}`
-
-        // 增强模式下加载原图尺寸,记录原始比例供锁比例使用
-        if (imageConfig) {
-          const img = document.createElement('img')
-          img.onload = () => {
-            this.props.onSuccess(imgURL, img.naturalWidth / img.naturalHeight)
-          }
-          img.onerror = () => {
-            // 拿不到尺寸时降级:只插入不锁比例
-            this.props.onSuccess(imgURL)
-          }
-          img.src = imgURL
-        } else {
-          this.props.onSuccess(imgURL)
-        }
+        this.props.onSuccess(imgURL)
       })
   }
 
@@ -521,23 +473,16 @@ class ImageUploader extends React.Component {
   }
 
   render() {
-    const { imageConfig } = this.props
-
     return (
       <>
         <div onClick={this.handleClick} onDrop={this.handleUpload}>
           {this.props.text}
-          {imageConfig && imageConfig.acceptHint && (
-            <div className='gm-printer-contextmenu-hint'>
-              {imageConfig.acceptHint}
-            </div>
-          )}
         </div>
         <input
           style={{ display: 'none' }}
           type='file'
           ref={this.input}
-          accept={(imageConfig && imageConfig.accept) || 'image/*'}
+          accept='image/*'
           onChange={this.handleUpload}
         />
       </>
@@ -547,8 +492,7 @@ class ImageUploader extends React.Component {
 
 ImageUploader.propTypes = {
   onSuccess: PropTypes.func.isRequired,
-  text: PropTypes.string.isRequired,
-  imageConfig: PropTypes.object
+  text: PropTypes.string.isRequired
 }
 
 class InputWithUnit extends React.Component {

package/src/common/editor_edit_field.js

@@ -100,7 +100,7 @@ class EditorField extends React.Component {
 
   renderBlocks() {
     const { editStore, showNewDate } = this.props
-    const { type, text, style, link, ratio } = editStore.computedSelectedInfo
+    const { type, text, style, link } = editStore.computedSelectedInfo
 
     return (
       <div>
@@ -149,11 +149,6 @@ class EditorField extends React.Component {
             <Size
               style={style}
               onChange={this.handleChangeBlock.bind(this, 'style')}
-              ratio={
-                editStore.imageConfig && editStore.imageConfig.resizable
-                  ? ratio
-                  : undefined
-              }
             />
             <Gap />
 

package/src/common/editor_sort_setting.js

@@ -0,0 +1,153 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import { observer, inject } from 'mobx-react'
+import i18next from '../../locales'
+import { Flex, Select, Option } from '../components'
+import { Title, Gap, Radio } from './component'
+
+// 排序方式常量，与宿主 sort_setting_util / 后端 parse_sort_setting 对齐
+// product_row_sort.field：'' 不排序 / tax_rate 税率 / box_num 箱号 / custom 行号（自定义字段）
+const SORT_FIELD_LIST = [
+  { value: '', text: i18next.t('不排序') },
+  { value: 'tax_rate', text: i18next.t('税率') },
+  { value: 'box_num', text: i18next.t('箱号') },
+  { value: 'custom', text: i18next.t('行号') }
+]
+
+const SORT_DIRECTION_LIST = [
+  { value: 'asc', text: i18next.t('升序') },
+  { value: 'desc', text: i18next.t('降序') }
+]
+
+// order_sort.type：仅商户配送单模板提供（账户模板不渲染该组）
+const ORDER_SORT_LIST = [
+  { value: 'none', text: i18next.t('不排序') },
+  { value: 'asc', text: i18next.t('按订单时间升序') },
+  { value: 'desc', text: i18next.t('按订单时间降序') }
+]
+
+/**
+ * 「排序方式」配置类：归集「商品行排序」「单据内订单顺序」两组子配置
+ * 读写 editStore.config.sort_setting（mobx4 读取不存在的键不建立依赖，
+ * 宿主传入 config 前需保证 sort_setting 键存在，无配置时为 null）
+ */
+@inject('editStore')
+@observer
+class SortSettingField extends React.Component {
+  getProductRowSort() {
+    return this.props.editStore.config.sort_setting?.product_row_sort || {}
+  }
+
+  getOrderSortType() {
+    return this.props.editStore.config.sort_setting?.order_sort?.type || 'none'
+  }
+
+  setSortSetting(sortSetting) {
+    this.props.editStore.config.sort_setting = sortSetting
+  }
+
+  handleFieldChange = field => {
+    const productRowSort = { ...this.getProductRowSort(), field }
+    if (field !== 'custom') {
+      // 切离行号排序时清掉脏数据
+      delete productRowSort.custom_field_key
+    } else if (!productRowSort.custom_field_key) {
+      // 选中「行号」默认取第一个自定义字段（行号 1）
+      const customFields =
+        (this.props.addFields && this.props.addFields.sortCustomFields) || []
+      productRowSort.custom_field_key = customFields[0] && customFields[0].id
+    }
+    this.setSortSetting({
+      ...this.props.editStore.config.sort_setting,
+      product_row_sort: {
+        ...productRowSort,
+        direction: productRowSort.direction || 'asc'
+      }
+    })
+  }
+
+  handleDirectionChange = direction => {
+    this.setSortSetting({
+      ...this.props.editStore.config.sort_setting,
+      product_row_sort: { ...this.getProductRowSort(), direction }
+    })
+  }
+
+  handleOrderSortChange = type => {
+    this.setSortSetting({
+      ...this.props.editStore.config.sort_setting,
+      order_sort: { type }
+    })
+  }
+
+  render() {
+    const { showOrderSort } = this.props
+    const productRowSort = this.getProductRowSort()
+
+    return (
+      <div>
+        <Title title={i18next.t('排序方式')} />
+        <Gap height='5px' />
+        <Flex alignCenter className='gm-padding-top-5'>
+          <div>{i18next.t('商品行排序')}：</div>
+          <Select
+            className='gm-printer-edit-select'
+            value={productRowSort.field || ''}
+            onChange={this.handleFieldChange}
+          >
+            {_.map(SORT_FIELD_LIST, v => (
+              <Option key={v.value} value={v.value}>
+                {v.text}
+              </Option>
+            ))}
+          </Select>
+        </Flex>
+        <Flex alignCenter className='gm-padding-top-5'>
+          <div>{i18next.t('排序方向')}：</div>
+          <Select
+            className='gm-printer-edit-select'
+            value={productRowSort.direction || 'asc'}
+            onChange={this.handleDirectionChange}
+          >
+            {_.map(SORT_DIRECTION_LIST, v => (
+              <Option key={v.value} value={v.value}>
+                {v.text}
+              </Option>
+            ))}
+          </Select>
+        </Flex>
+        {showOrderSort && (
+          <>
+            <div className='gm-padding-top-5'>
+              {i18next.t('单据内订单顺序')}：
+            </div>
+            {_.map(ORDER_SORT_LIST, v => (
+              <Radio
+                key={v.value}
+                id={`sort_setting_order_${v.value}`}
+                value={v.text}
+                inputName='sort_setting_order_sort'
+                checked={this.getOrderSortType() === v.value}
+                radioChecked={this.handleOrderSortChange.bind(this, v.value)}
+              />
+            ))}
+          </>
+        )}
+        <Gap />
+      </div>
+    )
+  }
+}
+
+SortSettingField.propTypes = {
+  addFields: PropTypes.object.isRequired,
+  showOrderSort: PropTypes.bool,
+  editStore: PropTypes.object
+}
+
+SortSettingField.defaultProps = {
+  showOrderSort: false
+}
+
+export default SortSettingField

package/src/common/editor_store.js

@@ -38,10 +38,6 @@ class EditorStore {
   @observable
   tableCustomStyle = 'default'
 
-  // 插入图片增强配置(电子签章),null 时保持旧行为(500Kb/image/*)
-  // { maxSize, maxSizeLabel, accept, acceptHint, resizable }
-  imageConfig = null
-
   @observable
   emptyTableData = []
 
@@ -242,7 +238,7 @@ class EditorStore {
           }
         }).join('/')
       } else {
-        return v.style ? v.style.height : ''
+        return v && v.style ? v.style.height : ''
       }
     }).join('_')
   }
@@ -263,6 +259,24 @@ class EditorStore {
     this.remainPageHeihgt = remainHeight
   }
 
+  @action
+  getFilledTableData(tableData) {
+    const { autoFillConfig } = this.config
+    if (!this.selectedRegion && !autoFillConfig?.checked) return []
+    let tr_count = 0
+
+    tr_count = Math.floor(
+      this.remainPageHeihgt / this.computedTableCustomerRowHeight
+    )
+    if (tr_count <= 0) return []
+
+    const sample = (tableData || []).find(item => item && !item._isEmptyData)
+    const dataKey =
+      this.computedTableSpecialConfig?.dataKey || autoFillConfig?.dataKey
+    const colNumber = detectColNumber(dataKey, tableData)
+    return createEmptyRows(tr_count, sample, colNumber)
+  }
+
   /** 多栏表缺失时（如双栏切三栏），从单栏/双栏源表现场打包到 mockData */
   @action
   ensureMockMultiTable(dataKey) {
@@ -327,14 +341,18 @@ class EditorStore {
       this.ensureMockMultiTable(getDataKey(dataKey, 'vertical'))
     }
 
-    // 开启时不在编辑器侧预推空行：预推依赖挂载时上报的剩余高度，布局（纸张/表格/
-    // 排列）变化后会过期，第一次开启填充会按旧基准多推，把已渲染完的表格撑到下一页。
-    // 空行统一由 Printer 侧「先分页拿基准 → 补空 → 重分页」写入（见 printer.js）
     const syncEmptyRows = key => {
       if (!this.mockData._table?.[key]) return
+      const list = this.mockData._table[key]
+      const hasHadEmptyData = _.some(list, data => data?._isEmptyData)
+      if (isAutoFilling && !hasHadEmptyData) {
+        list.push(...this.getFilledTableData(list))
+      }
       if (!isAutoFilling) {
         this.clearExtraTableData(key)
+        return
       }
+      this.mockData._table[key] = list
     }
 
     const numberEmptyRows = key => {
@@ -363,12 +381,13 @@ class EditorStore {
         const baseRowCount = sourceItems.length
           ? Math.max(1, Math.ceil(sourceItems.length / colNumber))
           : 0
-        // 钉死总行：repack 后 _isEmptyData 会变少，不能再用 emptyTable.length；
-        // 无空行时不预推，交由 Printer 按当前分页基准补
+        // 钉死总行：repack 后 _isEmptyData 会变少，不能再用 emptyTable.length
         const emptyCount = resolveVerticalEmptyCount(
           list.length,
           baseRowCount,
-          emptyTable.length,
+          emptyTable.length > 0
+            ? emptyTable.length
+            : this.getFilledTableData(list).length,
           emptyTable.length > 0
         )
         const dataRows = baseRowCount
@@ -474,11 +493,6 @@ class EditorStore {
   @action.bound
   setPageSize(field, value) {
     this.config.page.size[field] = value
-    // 页面几何变化会让预览 Printer 重挂载；行数填充开启时清掉按旧页高算出的空行，
-    // 重挂载后按新几何重补（对齐切换商品排列时的处理，见 setTableDataKeyEffect）
-    if (this.isAutoFilling || this.config?.autoFillConfig?.checked) {
-      this.clearAllTableEmptyData()
-    }
   }
 
   @computed
@@ -530,10 +544,6 @@ class EditorStore {
           height: size.width
         }
       }
-      // 可用页高变了，行数填充开启时清掉按旧方向算出的空行，重挂载后重补
-      if (this.isAutoFilling || this.config?.autoFillConfig?.checked) {
-        this.clearAllTableEmptyData()
-      }
     }
   }
 
@@ -574,12 +584,6 @@ class EditorStore {
       gap,
       name
     }
-    // 纸张类型/内边距变了，可用页高随之变化；行数填充开启时清掉按旧纸张算出的
-    // 空行（fillTableEmptyIndex 对已有空行沿用旧数量不重算，旧数量会把同页后续
-    // 表格挤到下一页），交给 Printer 重挂载后按新页高重补
-    if (this.isAutoFilling || this.config?.autoFillConfig?.checked) {
-      this.clearAllTableEmptyData()
-    }
   }
 
   @action
@@ -726,7 +730,7 @@ class EditorStore {
   }
 
   @action
-  addConfigBlock(name, type, pos = {}, link = '', ratio) {
+  addConfigBlock(name, type, pos = {}, link = '') {
     let blocks
     const arr = name.split('.')
 
@@ -766,25 +770,19 @@ class EditorStore {
           }
         })
         break
-      case 'image': {
-        // 有原始比例时按比例初始化高度,避免插入即变形;无 ratio(降级/旧链路)保持 100x100
-        const w = 100
-        const h = ratio ? Math.round(w / ratio) : w
+      case 'image':
         blocks.push({
           type: 'image',
           link: link,
-          // 电子签章:记录原图宽高比,锁比例用;旧数据无此字段则不锁
-          ratio: ratio,
           style: {
             position: 'absolute',
             left: pos.left || '0px',
             top: pos.top || '0px',
-            width: w + 'px',
-            height: h + 'px'
+            width: '100px',
+            height: '100px'
           }
         })
         break
-      }
       case 'counter':
         blocks.push({
           type: 'counter',

package/src/common/hoc_with_store.js

@@ -1,22 +1,13 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Provider } from 'mobx-react'
 import { getStyleWithDiff } from '../util'
 
 const withStore = store => WrapComponent =>
   class extends React.Component {
-    static propTypes = {
-      config: PropTypes.object,
-      mockData: PropTypes.object,
-      imageConfig: PropTypes.object
-    }
-
     constructor(props) {
       super(props)
       this.store = store
       this.store.init(props.config, props.mockData)
-      // 插入图片增强配置(电子签章):由业务侧 props 传入,不传为 null 保持旧行为
-      this.store.imageConfig = props.imageConfig || null
     }
 
     componentDidMount() {

package/src/common/style.lesss

@@ -166,18 +166,6 @@
         color: white;
         background: rgb(82, 146, 247);
       }
-
-      // 电子签章:插入图片菜单项下的格式提示小字
-      .gm-printer-contextmenu-hint {
-        font-size: 10px;
-        color: #f5222d;
-        line-height: 1.4;
-        padding: 0;
-        &:hover {
-          color: #f5222d;
-          background: transparent;
-        }
-      }
     }
   }
 
@@ -256,37 +244,6 @@
         outline: 1px solid rgb(82, 146, 247);
         z-index: 11;
       }
-
-      // 电子签章:图片四角黑色加粗拖拽手柄
-      .gm-printer-resize-handle {
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        background: #000;
-        border: 2px solid #fff;
-        z-index: 12;
-
-        &.gm-printer-resize-lt {
-          left: -6px;
-          top: -6px;
-          cursor: nwse-resize;
-        }
-        &.gm-printer-resize-rt {
-          right: -6px;
-          top: -6px;
-          cursor: nesw-resize;
-        }
-        &.gm-printer-resize-lb {
-          left: -6px;
-          bottom: -6px;
-          cursor: nesw-resize;
-        }
-        &.gm-printer-resize-rb {
-          right: -6px;
-          bottom: -6px;
-          cursor: nwse-resize;
-        }
-      }
     }
 
     .gm-printer-table {

package/src/editor/editor.js

@@ -9,6 +9,7 @@ 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 SortSettingField from '../common/editor_sort_setting'
 import EditorField from '../common/editor_edit_field'
 import EditorAddField from '../common/editor_add_field'
 import EditorPageSummary from '../common/editor_page_summary'
@@ -88,6 +89,8 @@ class Editor extends React.Component {
             <Gap height='5px' />
             <SpecialField addFields={addFields} mockData={mockData} />
             <SpecialOtherField addFields={addFields} mockData={mockData} />
+            <Gap height='5px' />
+            <SortSettingField addFields={addFields} showOrderSort />
             <EditorCutomizedConfig />
             <Gap height='5px' />
             <EditorField

package/src/editor/store.js

@@ -1,19 +1,6 @@
 import EditorStore from '../common/editor_store'
 import i18next from '../../locales'
 
-// 配送单"电子签章"插入图片增强预设(1056076):2M/指定格式/锁比例/四角拖拽
-// 由业务侧显式传入 <Editor imageConfig={imageConfigDelivery} /> 才生效,不传保持旧行为
-export const imageConfigDelivery = {
-  maxSize: 2 * 1024 * 1024,
-  maxSizeLabel: '2M',
-  accept: 'image/jpeg,image/jpg,image/png',
-  acceptTypes: ['image/jpeg', 'image/jpg', 'image/png'],
-  acceptHint: i18next.t('支持插入2M以内的jpg、jpeg、png格式图片'),
-  overSizeTip: i18next.t('图片大小不能超过2M'),
-  wrongTypeTip: i18next.t('仅支持jpg、jpeg、png格式的图片'),
-  resizable: true
-}
-
 class Store extends EditorStore {
   // 复写父类方法
   setTableDataKeyEffect(target, dataKey) {

package/src/editor_account/editor.js

@@ -7,6 +7,7 @@ import editStore from './store'
 import { observer, inject } from 'mobx-react'
 import EditorTitle from '../common/editor_title'
 import EditorSelect from '../common/editor_select'
+import SortSettingField from '../common/editor_sort_setting'
 import EditorField from '../common/editor_edit_field'
 import EditorAddField from '../common/editor_add_field'
 import EditorCutomizedConfig from '../common/editor_customize_config'
@@ -55,6 +56,7 @@ class Editor extends React.Component {
             <Gap height='10px' />
             <EditorSelect />
             <Gap height='5px' />
+            <SortSettingField addFields={addFields} />
             <EditorCutomizedConfig />
             <Gap height='5px' />
             <EditorField showNewDate={showNewDate} />