gm-printer 10.41.6-beta.1 → 10.41.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gm-printer",
-  "version": "10.41.6-beta.1",
+  "version": "10.41.7",
   "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 = num / ratio + 'px'
-        } else {
-          next.width = 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_store.js

@@ -17,10 +17,6 @@ class EditorStore {
   @observable
   tableCustomStyle = 'default'
 
-  // 插入图片增强配置(电子签章),null 时保持旧行为(500Kb/image/*)
-  // { maxSize, maxSizeLabel, accept, acceptHint, resizable }
-  imageConfig = null
-
   @observable
   emptyTableData = []
 
@@ -560,7 +556,7 @@ class EditorStore {
   }
 
   @action
-  addConfigBlock(name, type, pos = {}, link = '', ratio) {
+  addConfigBlock(name, type, pos = {}, link = '') {
     let blocks
     const arr = name.split('.')
 
@@ -604,8 +600,6 @@ class EditorStore {
         blocks.push({
           type: 'image',
           link: link,
-          // 电子签章:记录原图宽高比,锁比例用;旧数据无此字段则不锁
-          ratio: ratio,
           style: {
             position: 'absolute',
             left: pos.left || '0px',

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/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/index.js

@@ -1,7 +1,6 @@
 // ‼️优先初始化语言设置(必须先初始化语言)
 import '../locales'
 import Editor, { Editor2 } from './editor'
-import { imageConfigDelivery } from './editor/store'
 
 import EditorPurchase from './editor_purchase'
 import EditorExaminingReport from './examining_report_editor'
@@ -31,7 +30,6 @@ export { setLocale } from '../locales'
 export {
   Editor,
   Editor2,
-  imageConfigDelivery,
   EditorStockIn,
   EditorStockOut,
   EditorPurchase,

package/src/printer/block.js

@@ -8,7 +8,7 @@ import BarCode from './barcode'
 import QrCode from './qrcode'
 import Tag from './tag'
 
-@inject('printerStore', 'editStore')
+@inject('printerStore')
 @observer
 class Block extends React.Component {
   constructor(props) {
@@ -16,10 +16,8 @@ class Block extends React.Component {
     this.state = {
       clientX: null,
       clientY: null,
-      isEdit: false,
-      isResizing: false
+      isEdit: false
     }
-    this.resizeState = null
   }
 
   componentDidMount() {
@@ -34,7 +32,6 @@ class Block extends React.Component {
       'gm-printer-block-edit',
       this.handleBlockEdit
     )
-    this.teardownResize()
   }
 
   handleBlockEdit = e => {
@@ -115,116 +112,6 @@ class Block extends React.Component {
     })
   }
 
-  // 电子签章:图片四角等比例拖拽缩放
-  handleResizeStart = (direction, e) => {
-    // 阻止触发块的选中/拖动
-    e.stopPropagation()
-    e.preventDefault()
-
-    const {
-      config: { style, ratio }
-    } = this.props
-
-    const initW = parseFloat(style.width) || 0
-    const initH = parseFloat(style.height) || 0
-    // 旧模板无 ratio 时按当前显示宽高锁定
-    this.resizeState = {
-      direction,
-      startX: e.clientX,
-      startY: e.clientY,
-      initW,
-      initH,
-      initL: parseFloat(style.left) || 0,
-      initT: parseFloat(style.top) || 0,
-      // ratio = 原始宽/高
-      ratio: ratio || (initH > 0 ? initW / initH : 1),
-      baseStyle: style
-    }
-
-    this.setState({
-      isResizing: true
-    })
-
-    window.addEventListener('mousemove', this.handleResizeMove)
-    window.addEventListener('mouseup', this.handleResizeEnd)
-  }
-
-  handleResizeMove = e => {
-    if (!this.resizeState) return
-
-    // rAF 节流,避免高频 mousemove 打爆渲染
-    if (this.resizePending) return
-    this.resizePending = e
-    window.requestAnimationFrame(() => {
-      const evt = this.resizePending
-      this.resizePending = null
-      if (!evt || !this.resizeState) return
-      this.doResize(evt)
-    })
-  }
-
-  doResize = e => {
-    const {
-      direction,
-      startX,
-      initW,
-      initH,
-      initL,
-      initT,
-      ratio,
-      baseStyle
-    } = this.resizeState
-    const dx = e.clientX - startX
-
-    // 右侧角向右放大,左侧角向左放大
-    let width =
-      direction === 'rb' || direction === 'rt' ? initW + dx : initW - dx
-    // 最小尺寸兜底,防止翻转
-    width = Math.max(width, 10)
-    const height = Math.round(width / ratio)
-    width = Math.round(width)
-
-    // 锚定对角:左向角拖拽时右/下边不动,上向角拖拽时下边不动
-    let left = initL
-    let top = initT
-    if (direction === 'lb' || direction === 'lt') {
-      left = initL + initW - width
-    }
-    if (direction === 'rt' || direction === 'lt') {
-      top = initT + initH - height
-    }
-
-    dispatchMsg('gm-printer-block-style-set', {
-      style: {
-        ...baseStyle,
-        width: width + 'px',
-        height: height + 'px',
-        left: left + 'px',
-        top: top + 'px'
-      }
-    })
-  }
-
-  handleResizeEnd = () => {
-    // 先 flush 掉节流里排队中的最后一帧,避免松手回退
-    if (this.resizePending) {
-      const evt = this.resizePending
-      this.resizePending = null
-      this.doResize(evt)
-    }
-    this.teardownResize()
-    this.setState({
-      isResizing: false
-    })
-  }
-
-  teardownResize = () => {
-    window.removeEventListener('mousemove', this.handleResizeMove)
-    window.removeEventListener('mouseup', this.handleResizeEnd)
-    this.resizeState = null
-    this.resizePending = null
-  }
-
   render() {
     let {
       name,
@@ -232,7 +119,6 @@ class Block extends React.Component {
       pageIndex,
       className,
       printerStore,
-      editStore,
       ...rest
     } = this.props
     const { isEdit } = this.state
@@ -300,14 +186,6 @@ class Block extends React.Component {
     }
 
     const active = name === printerStore.selected
-    const { isResizing } = this.state
-    const showResizeHandles = !!(
-      active &&
-      type === 'image' &&
-      editStore &&
-      editStore.imageConfig &&
-      editStore.imageConfig.resizable
-    )
 
     return (
       <div
@@ -315,7 +193,7 @@ class Block extends React.Component {
         className={classNames('gm-printer-block', className, {
           active
         })}
-        draggable={!isResizing}
+        draggable
         onDragStart={this.handleDragStart}
         onDragEnd={this.handleDragEnd}
         onClick={this.handleClick}
@@ -343,26 +221,6 @@ class Block extends React.Component {
           />
         )}
         {content}
-        {showResizeHandles && (
-          <>
-            <div
-              className='gm-printer-resize-handle gm-printer-resize-lt'
-              onMouseDown={this.handleResizeStart.bind(this, 'lt')}
-            />
-            <div
-              className='gm-printer-resize-handle gm-printer-resize-rt'
-              onMouseDown={this.handleResizeStart.bind(this, 'rt')}
-            />
-            <div
-              className='gm-printer-resize-handle gm-printer-resize-lb'
-              onMouseDown={this.handleResizeStart.bind(this, 'lb')}
-            />
-            <div
-              className='gm-printer-resize-handle gm-printer-resize-rb'
-              onMouseDown={this.handleResizeStart.bind(this, 'rb')}
-            />
-          </>
-        )}
       </div>
     )
   }
@@ -373,8 +231,7 @@ Block.propTypes = {
   config: PropTypes.object.isRequired,
   pageIndex: PropTypes.number.isRequired,
   className: PropTypes.string,
-  printerStore: PropTypes.object,
-  editStore: PropTypes.object
+  printerStore: PropTypes.object
 }
 
 export default Block

package/src/printer/printer.js

@@ -333,7 +333,15 @@ class Printer extends React.Component {
 
     return (
       <MergePage>
-        <Header config={config.header} pageIndex={0} />
+        {/* 批量连续打印(不留白)模式下分页交给浏览器：表头区含绝对定位文字，
+            若表头自身或表头与表格的接缝骑在分页边界，Chrome 对 absolute 元素的
+            fragmentation 渲染会使表头文字错位/重复，叠到其他单据内容上。
+            故禁止表头跨页(breakInside)、并让表头与后续表格同页(breakAfter) */}
+        <Header
+          config={config.header}
+          pageIndex={0}
+          style={{ breakInside: 'avoid', breakAfter: 'avoid' }}
+        />
         {_.map(config.contents, (content, index) => {
           switch (content.type) {
             case 'table':