gm-printer 10.42.4-beta.0 → 10.42.4-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/locales/en.json CHANGED
@@ -16,6 +16,9 @@
16
16
  "粗细": "",
17
17
  "高": "",
18
18
  "图片大小不能超过500Kb": "",
19
+ "图片大小不能超过2M": "Image size cannot exceed 2M",
20
+ "仅支持jpg、jpeg、png格式的图片": "Only JPG, JPEG, and PNG images are supported",
21
+ "支持插入2M以内的jpg、jpeg、png格式图片": "Support inserting JPG, JPEG, or PNG images within 2M",
19
22
  "配送单特殊控制": "",
20
23
  "添加字段": "",
21
24
  "编辑字段": "",
package/locales/th.json CHANGED
@@ -16,6 +16,9 @@
16
16
  "粗细": "",
17
17
  "高": "",
18
18
  "图片大小不能超过500Kb": "",
19
+ "图片大小不能超过2M": "ขนาดรูปภาพต้องไม่เกิน 2M",
20
+ "仅支持jpg、jpeg、png格式的图片": "รองรับเฉพาะรูปภาพรูปแบบ jpg, jpeg, png",
21
+ "支持插入2M以内的jpg、jpeg、png格式图片": "รองรับการแทรกรูปภาพ jpg, jpeg, png ขนาดไม่เกิน 2M",
19
22
  "配送单特殊控制": "",
20
23
  "添加字段": "",
21
24
  "编辑字段": "",
@@ -16,6 +16,9 @@
16
16
  "粗细": "粗細",
17
17
  "高": "高",
18
18
  "图片大小不能超过500Kb": "圖片大小不能超過500Kb",
19
+ "图片大小不能超过2M": "圖片大小不能超過2M",
20
+ "仅支持jpg、jpeg、png格式的图片": "僅支持jpg、jpeg、png格式的圖片",
21
+ "支持插入2M以内的jpg、jpeg、png格式图片": "支持插入2M以內的jpg、jpeg、png格式圖片",
19
22
  "添加字段": "添加字段",
20
23
  "编辑字段": "編輯字段",
21
24
  "配送单特殊控制": "配送单特殊控制",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gm-printer",
3
- "version": "10.42.4-beta.0",
3
+ "version": "10.42.4-beta.2",
4
4
  "description": "diy printer",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
@@ -109,7 +109,7 @@ class CommonContextMenu extends React.Component {
109
109
  })
110
110
  }
111
111
 
112
- handleInsertBlock = (type, link) => {
112
+ handleInsertBlock = (type, link, ratio) => {
113
113
  const { editStore } = this.props
114
114
  const { name, block } = this.state
115
115
 
@@ -120,7 +120,8 @@ class CommonContextMenu extends React.Component {
120
120
  left: block.left + 'px',
121
121
  top: block.top + 'px'
122
122
  },
123
- link
123
+ link,
124
+ ratio
124
125
  )
125
126
 
126
127
  this.setState({
@@ -160,8 +161,8 @@ class CommonContextMenu extends React.Component {
160
161
  })
161
162
  }
162
163
 
163
- handleInsertImage = imgURL => {
164
- this.handleInsertBlock('image', imgURL)
164
+ handleInsertImage = (imgURL, ratio) => {
165
+ this.handleInsertBlock('image', imgURL, ratio)
165
166
  }
166
167
 
167
168
  handleRemove = () => {
@@ -327,6 +328,7 @@ class CommonContextMenu extends React.Component {
327
328
  onSuccess={this.handleInsertImage}
328
329
  key={v.value}
329
330
  text={v.text}
331
+ imageConfig={this.props.editStore.imageConfig}
330
332
  />
331
333
  ) : (
332
334
  <div
@@ -391,12 +391,26 @@ Line.propTypes = {
391
391
 
392
392
  class Size extends React.Component {
393
393
  handleChange = (type, value) => {
394
- const { onChange, style } = this.props
394
+ const { onChange, style, ratio } = this.props
395
395
 
396
- onChange({
396
+ const next = {
397
397
  ...style,
398
398
  [type]: value
399
- })
399
+ }
400
+
401
+ // 电子签章:有原始比例时宽高联动,不允许拉变形
402
+ if (ratio && value !== '' && !value.endsWith('%')) {
403
+ const num = parseFloat(value)
404
+ if (!_.isNaN(num) && num > 0) {
405
+ if (type === 'width') {
406
+ next.height = Math.round(num / ratio) + 'px'
407
+ } else {
408
+ next.width = Math.round(num * ratio) + 'px'
409
+ }
410
+ }
411
+ }
412
+
413
+ onChange(next)
400
414
  }
401
415
 
402
416
  render() {
@@ -420,7 +434,8 @@ class Size extends React.Component {
420
434
 
421
435
  Size.propTypes = {
422
436
  style: PropTypes.object.isRequired,
423
- onChange: PropTypes.func.isRequired
437
+ onChange: PropTypes.func.isRequired,
438
+ ratio: PropTypes.number
424
439
  }
425
440
 
426
441
  class ImageUploader extends React.Component {
@@ -437,7 +452,26 @@ class ImageUploader extends React.Component {
437
452
  : event.target.files
438
453
  const file = droppedFiles[0]
439
454
 
440
- if (file.size > 512 * 1024) {
455
+ if (!file) return
456
+
457
+ const { imageConfig } = this.props
458
+
459
+ if (imageConfig) {
460
+ // 增强模式(电子签章):校验类型与大小,提示文案由配置方给出
461
+ const acceptTypes = imageConfig.acceptTypes || [
462
+ 'image/jpeg',
463
+ 'image/jpg',
464
+ 'image/png'
465
+ ]
466
+ if (!_.includes(acceptTypes, file.type)) {
467
+ Tip.warning(imageConfig.wrongTypeTip)
468
+ return
469
+ }
470
+ if (file.size > imageConfig.maxSize) {
471
+ Tip.warning(imageConfig.overSizeTip)
472
+ return
473
+ }
474
+ } else if (file.size > 512 * 1024) {
441
475
  Tip.warning(i18next.t('图片大小不能超过500Kb'))
442
476
  return
443
477
  }
@@ -463,7 +497,21 @@ class ImageUploader extends React.Component {
463
497
  .post()
464
498
  .then(json => {
465
499
  const imgURL = `${url.imgUrl}/${json.data.img_path_id}`
466
- this.props.onSuccess(imgURL)
500
+
501
+ // 增强模式下加载原图尺寸,记录原始比例供锁比例使用
502
+ if (imageConfig) {
503
+ const img = document.createElement('img')
504
+ img.onload = () => {
505
+ this.props.onSuccess(imgURL, img.naturalWidth / img.naturalHeight)
506
+ }
507
+ img.onerror = () => {
508
+ // 拿不到尺寸时降级:只插入不锁比例
509
+ this.props.onSuccess(imgURL)
510
+ }
511
+ img.src = imgURL
512
+ } else {
513
+ this.props.onSuccess(imgURL)
514
+ }
467
515
  })
468
516
  }
469
517
 
@@ -473,16 +521,23 @@ class ImageUploader extends React.Component {
473
521
  }
474
522
 
475
523
  render() {
524
+ const { imageConfig } = this.props
525
+
476
526
  return (
477
527
  <>
478
528
  <div onClick={this.handleClick} onDrop={this.handleUpload}>
479
529
  {this.props.text}
530
+ {imageConfig && imageConfig.acceptHint && (
531
+ <div className='gm-printer-contextmenu-hint'>
532
+ {imageConfig.acceptHint}
533
+ </div>
534
+ )}
480
535
  </div>
481
536
  <input
482
537
  style={{ display: 'none' }}
483
538
  type='file'
484
539
  ref={this.input}
485
- accept='image/*'
540
+ accept={(imageConfig && imageConfig.accept) || 'image/*'}
486
541
  onChange={this.handleUpload}
487
542
  />
488
543
  </>
@@ -492,7 +547,8 @@ class ImageUploader extends React.Component {
492
547
 
493
548
  ImageUploader.propTypes = {
494
549
  onSuccess: PropTypes.func.isRequired,
495
- text: PropTypes.string.isRequired
550
+ text: PropTypes.string.isRequired,
551
+ imageConfig: PropTypes.object
496
552
  }
497
553
 
498
554
  class InputWithUnit extends React.Component {
@@ -100,7 +100,7 @@ class EditorField extends React.Component {
100
100
 
101
101
  renderBlocks() {
102
102
  const { editStore, showNewDate } = this.props
103
- const { type, text, style, link } = editStore.computedSelectedInfo
103
+ const { type, text, style, link, ratio } = editStore.computedSelectedInfo
104
104
 
105
105
  return (
106
106
  <div>
@@ -149,6 +149,11 @@ class EditorField extends React.Component {
149
149
  <Size
150
150
  style={style}
151
151
  onChange={this.handleChangeBlock.bind(this, 'style')}
152
+ ratio={
153
+ editStore.imageConfig && editStore.imageConfig.resizable
154
+ ? ratio
155
+ : undefined
156
+ }
152
157
  />
153
158
  <Gap />
154
159
 
@@ -7,12 +7,12 @@ import { Flex, Select, Option } from '../components'
7
7
  import { Title, Gap, Radio } from './component'
8
8
 
9
9
  // 排序方式常量,与宿主 sort_setting_util / 后端 parse_sort_setting 对齐
10
- // product_row_sort.field:'' 不排序 / tax_rate 税率 / box_num 箱号 / custom 行号(自定义字段)
10
+ // product_row_sort.field:'' 不排序 / tax_rate 税率 / box_num 箱号 / sort_num 行号
11
11
  const SORT_FIELD_LIST = [
12
12
  { value: '', text: i18next.t('不排序') },
13
13
  { value: 'tax_rate', text: i18next.t('税率') },
14
14
  { value: 'box_num', text: i18next.t('箱号') },
15
- { value: 'custom', text: i18next.t('行号') }
15
+ { value: 'sort_num', text: i18next.t('行号') }
16
16
  ]
17
17
 
18
18
  const SORT_DIRECTION_LIST = [
@@ -49,15 +49,6 @@ class SortSettingField extends React.Component {
49
49
 
50
50
  handleFieldChange = field => {
51
51
  const productRowSort = { ...this.getProductRowSort(), field }
52
- if (field !== 'custom') {
53
- // 切离行号排序时清掉脏数据
54
- delete productRowSort.custom_field_key
55
- } else if (!productRowSort.custom_field_key) {
56
- // 选中「行号」默认取第一个自定义字段(行号 1)
57
- const customFields =
58
- (this.props.addFields && this.props.addFields.sortCustomFields) || []
59
- productRowSort.custom_field_key = customFields[0] && customFields[0].id
60
- }
61
52
  this.setSortSetting({
62
53
  ...this.props.editStore.config.sort_setting,
63
54
  product_row_sort: {
@@ -141,7 +132,6 @@ class SortSettingField extends React.Component {
141
132
  }
142
133
 
143
134
  SortSettingField.propTypes = {
144
- addFields: PropTypes.object.isRequired,
145
135
  showOrderSort: PropTypes.bool,
146
136
  editStore: PropTypes.object
147
137
  }
@@ -38,6 +38,10 @@ class EditorStore {
38
38
  @observable
39
39
  tableCustomStyle = 'default'
40
40
 
41
+ // 插入图片增强配置(电子签章),null 时保持旧行为(500Kb/image/*)
42
+ // { maxSize, maxSizeLabel, accept, acceptHint, resizable }
43
+ imageConfig = null
44
+
41
45
  @observable
42
46
  emptyTableData = []
43
47
 
@@ -259,24 +263,6 @@ class EditorStore {
259
263
  this.remainPageHeihgt = remainHeight
260
264
  }
261
265
 
262
- @action
263
- getFilledTableData(tableData) {
264
- const { autoFillConfig } = this.config
265
- if (!this.selectedRegion && !autoFillConfig?.checked) return []
266
- let tr_count = 0
267
-
268
- tr_count = Math.floor(
269
- this.remainPageHeihgt / this.computedTableCustomerRowHeight
270
- )
271
- if (tr_count <= 0) return []
272
-
273
- const sample = (tableData || []).find(item => item && !item._isEmptyData)
274
- const dataKey =
275
- this.computedTableSpecialConfig?.dataKey || autoFillConfig?.dataKey
276
- const colNumber = detectColNumber(dataKey, tableData)
277
- return createEmptyRows(tr_count, sample, colNumber)
278
- }
279
-
280
266
  /** 多栏表缺失时(如双栏切三栏),从单栏/双栏源表现场打包到 mockData */
281
267
  @action
282
268
  ensureMockMultiTable(dataKey) {
@@ -341,18 +327,14 @@ class EditorStore {
341
327
  this.ensureMockMultiTable(getDataKey(dataKey, 'vertical'))
342
328
  }
343
329
 
330
+ // 开启时不在编辑器侧预推空行:预推依赖挂载时上报的剩余高度,布局(纸张/表格/
331
+ // 排列)变化后会过期,第一次开启填充会按旧基准多推,把已渲染完的表格撑到下一页。
332
+ // 空行统一由 Printer 侧「先分页拿基准 → 补空 → 重分页」写入(见 printer.js)
344
333
  const syncEmptyRows = key => {
345
334
  if (!this.mockData._table?.[key]) return
346
- const list = this.mockData._table[key]
347
- const hasHadEmptyData = _.some(list, data => data?._isEmptyData)
348
- if (isAutoFilling && !hasHadEmptyData) {
349
- list.push(...this.getFilledTableData(list))
350
- }
351
335
  if (!isAutoFilling) {
352
336
  this.clearExtraTableData(key)
353
- return
354
337
  }
355
- this.mockData._table[key] = list
356
338
  }
357
339
 
358
340
  const numberEmptyRows = key => {
@@ -381,13 +363,12 @@ class EditorStore {
381
363
  const baseRowCount = sourceItems.length
382
364
  ? Math.max(1, Math.ceil(sourceItems.length / colNumber))
383
365
  : 0
384
- // 钉死总行:repack 后 _isEmptyData 会变少,不能再用 emptyTable.length
366
+ // 钉死总行:repack 后 _isEmptyData 会变少,不能再用 emptyTable.length;
367
+ // 无空行时不预推,交由 Printer 按当前分页基准补
385
368
  const emptyCount = resolveVerticalEmptyCount(
386
369
  list.length,
387
370
  baseRowCount,
388
- emptyTable.length > 0
389
- ? emptyTable.length
390
- : this.getFilledTableData(list).length,
371
+ emptyTable.length,
391
372
  emptyTable.length > 0
392
373
  )
393
374
  const dataRows = baseRowCount
@@ -493,6 +474,11 @@ class EditorStore {
493
474
  @action.bound
494
475
  setPageSize(field, value) {
495
476
  this.config.page.size[field] = value
477
+ // 页面几何变化会让预览 Printer 重挂载;行数填充开启时清掉按旧页高算出的空行,
478
+ // 重挂载后按新几何重补(对齐切换商品排列时的处理,见 setTableDataKeyEffect)
479
+ if (this.isAutoFilling || this.config?.autoFillConfig?.checked) {
480
+ this.clearAllTableEmptyData()
481
+ }
496
482
  }
497
483
 
498
484
  @computed
@@ -544,6 +530,10 @@ class EditorStore {
544
530
  height: size.width
545
531
  }
546
532
  }
533
+ // 可用页高变了,行数填充开启时清掉按旧方向算出的空行,重挂载后重补
534
+ if (this.isAutoFilling || this.config?.autoFillConfig?.checked) {
535
+ this.clearAllTableEmptyData()
536
+ }
547
537
  }
548
538
  }
549
539
 
@@ -584,6 +574,12 @@ class EditorStore {
584
574
  gap,
585
575
  name
586
576
  }
577
+ // 纸张类型/内边距变了,可用页高随之变化;行数填充开启时清掉按旧纸张算出的
578
+ // 空行(fillTableEmptyIndex 对已有空行沿用旧数量不重算,旧数量会把同页后续
579
+ // 表格挤到下一页),交给 Printer 重挂载后按新页高重补
580
+ if (this.isAutoFilling || this.config?.autoFillConfig?.checked) {
581
+ this.clearAllTableEmptyData()
582
+ }
587
583
  }
588
584
 
589
585
  @action
@@ -730,7 +726,7 @@ class EditorStore {
730
726
  }
731
727
 
732
728
  @action
733
- addConfigBlock(name, type, pos = {}, link = '') {
729
+ addConfigBlock(name, type, pos = {}, link = '', ratio) {
734
730
  let blocks
735
731
  const arr = name.split('.')
736
732
 
@@ -770,19 +766,25 @@ class EditorStore {
770
766
  }
771
767
  })
772
768
  break
773
- case 'image':
769
+ case 'image': {
770
+ // 有原始比例时按比例初始化高度,避免插入即变形;无 ratio(降级/旧链路)保持 100x100
771
+ const w = 100
772
+ const h = ratio ? Math.round(w / ratio) : w
774
773
  blocks.push({
775
774
  type: 'image',
776
775
  link: link,
776
+ // 电子签章:记录原图宽高比,锁比例用;旧数据无此字段则不锁
777
+ ratio: ratio,
777
778
  style: {
778
779
  position: 'absolute',
779
780
  left: pos.left || '0px',
780
781
  top: pos.top || '0px',
781
- width: '100px',
782
- height: '100px'
782
+ width: w + 'px',
783
+ height: h + 'px'
783
784
  }
784
785
  })
785
786
  break
787
+ }
786
788
  case 'counter':
787
789
  blocks.push({
788
790
  type: 'counter',
@@ -1,13 +1,22 @@
1
1
  import React from 'react'
2
+ import PropTypes from 'prop-types'
2
3
  import { Provider } from 'mobx-react'
3
4
  import { getStyleWithDiff } from '../util'
4
5
 
5
6
  const withStore = store => WrapComponent =>
6
7
  class extends React.Component {
8
+ static propTypes = {
9
+ config: PropTypes.object,
10
+ mockData: PropTypes.object,
11
+ imageConfig: PropTypes.object
12
+ }
13
+
7
14
  constructor(props) {
8
15
  super(props)
9
16
  this.store = store
10
17
  this.store.init(props.config, props.mockData)
18
+ // 插入图片增强配置(电子签章):由业务侧 props 传入,不传为 null 保持旧行为
19
+ this.store.imageConfig = props.imageConfig || null
11
20
  }
12
21
 
13
22
  componentDidMount() {
@@ -166,6 +166,18 @@
166
166
  color: white;
167
167
  background: rgb(82, 146, 247);
168
168
  }
169
+
170
+ // 电子签章:插入图片菜单项下的格式提示小字
171
+ .gm-printer-contextmenu-hint {
172
+ font-size: 10px;
173
+ color: #f5222d;
174
+ line-height: 1.4;
175
+ padding: 0;
176
+ &:hover {
177
+ color: #f5222d;
178
+ background: transparent;
179
+ }
180
+ }
169
181
  }
170
182
  }
171
183
 
@@ -244,6 +256,37 @@
244
256
  outline: 1px solid rgb(82, 146, 247);
245
257
  z-index: 11;
246
258
  }
259
+
260
+ // 电子签章:图片四角黑色加粗拖拽手柄
261
+ .gm-printer-resize-handle {
262
+ position: absolute;
263
+ width: 10px;
264
+ height: 10px;
265
+ background: #000;
266
+ border: 2px solid #fff;
267
+ z-index: 12;
268
+
269
+ &.gm-printer-resize-lt {
270
+ left: -6px;
271
+ top: -6px;
272
+ cursor: nwse-resize;
273
+ }
274
+ &.gm-printer-resize-rt {
275
+ right: -6px;
276
+ top: -6px;
277
+ cursor: nesw-resize;
278
+ }
279
+ &.gm-printer-resize-lb {
280
+ left: -6px;
281
+ bottom: -6px;
282
+ cursor: nesw-resize;
283
+ }
284
+ &.gm-printer-resize-rb {
285
+ right: -6px;
286
+ bottom: -6px;
287
+ cursor: nwse-resize;
288
+ }
289
+ }
247
290
  }
248
291
 
249
292
  .gm-printer-table {
@@ -90,7 +90,7 @@ class Editor extends React.Component {
90
90
  <SpecialField addFields={addFields} mockData={mockData} />
91
91
  <SpecialOtherField addFields={addFields} mockData={mockData} />
92
92
  <Gap height='5px' />
93
- <SortSettingField addFields={addFields} showOrderSort />
93
+ <SortSettingField showOrderSort />
94
94
  <EditorCutomizedConfig />
95
95
  <Gap height='5px' />
96
96
  <EditorField
@@ -1,6 +1,19 @@
1
1
  import EditorStore from '../common/editor_store'
2
2
  import i18next from '../../locales'
3
3
 
4
+ // 配送单"电子签章"插入图片增强预设(1056076):2M/指定格式/锁比例/四角拖拽
5
+ // 由业务侧显式传入 <Editor imageConfig={imageConfigDelivery} /> 才生效,不传保持旧行为
6
+ export const imageConfigDelivery = {
7
+ maxSize: 2 * 1024 * 1024,
8
+ maxSizeLabel: '2M',
9
+ accept: 'image/jpeg,image/jpg,image/png',
10
+ acceptTypes: ['image/jpeg', 'image/jpg', 'image/png'],
11
+ acceptHint: i18next.t('支持插入2M以内的jpg、jpeg、png格式图片'),
12
+ overSizeTip: i18next.t('图片大小不能超过2M'),
13
+ wrongTypeTip: i18next.t('仅支持jpg、jpeg、png格式的图片'),
14
+ resizable: true
15
+ }
16
+
4
17
  class Store extends EditorStore {
5
18
  // 复写父类方法
6
19
  setTableDataKeyEffect(target, dataKey) {
@@ -56,7 +56,7 @@ class Editor extends React.Component {
56
56
  <Gap height='10px' />
57
57
  <EditorSelect />
58
58
  <Gap height='5px' />
59
- <SortSettingField addFields={addFields} />
59
+ <SortSettingField />
60
60
  <EditorCutomizedConfig />
61
61
  <Gap height='5px' />
62
62
  <EditorField showNewDate={showNewDate} />
@@ -3,8 +3,7 @@ import i18next from '../../../locales'
3
3
  import PropTypes from 'prop-types'
4
4
  import _ from 'lodash'
5
5
  import { MULTI_SUFFIX } from '../../config'
6
- import Big from 'big.js'
7
- import { coverDigit2Uppercase, getDataKey } from '../../util'
6
+ import { coverDigit2Uppercase, getDataKey, maskedSum } from '../../util'
8
7
  import { observer } from 'mobx-react'
9
8
  import { get } from 'mobx'
10
9
 
@@ -47,22 +46,17 @@ const SubtotalTr = props => {
47
46
  const tableData = printerStore.data._table[getDataKey(dataKey, arrange)] || []
48
47
  // 计算合计
49
48
  const sumData = (list, field) => {
50
- return _.reduce(
51
- list,
52
- (a, b) => {
53
- let result = a
54
-
55
- const _origin = b._origin || {}
56
- const _origin2 = b['_origin' + MULTI_SUFFIX] || {}
57
-
58
- result = a.plus(_origin[field] || 0)
59
- if (_origin2[field]) {
60
- result = result.plus(_origin2[field])
61
- }
62
- return result
63
- },
64
- Big(0)
65
- ).toFixed(2)
49
+ // 收集本列所有值(含多栏 _origin),任一脱敏 '***' 则合计显 '***',否则 Big('***') 会崩溃
50
+ const values = []
51
+ _.each(list, b => {
52
+ const _origin = b._origin || {}
53
+ const _origin2 = b['_origin' + MULTI_SUFFIX] || {}
54
+ values.push(_origin[field])
55
+ if (_origin2[field]) {
56
+ values.push(_origin2[field])
57
+ }
58
+ })
59
+ return maskedSum(values)
66
60
  }
67
61
 
68
62
  // 每页小计
package/src/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  // ‼️优先初始化语言设置(必须先初始化语言)
2
2
  import '../locales'
3
3
  import Editor, { Editor2 } from './editor'
4
+ import { imageConfigDelivery } from './editor/store'
4
5
 
5
6
  import EditorPurchase from './editor_purchase'
6
7
  import EditorExaminingReport from './examining_report_editor'
@@ -31,6 +32,7 @@ export { setLocale } from '../locales'
31
32
  export {
32
33
  Editor,
33
34
  Editor2,
35
+ imageConfigDelivery,
34
36
  EditorStockIn,
35
37
  EditorStockOut,
36
38
  EditorPurchase,