gm-printer 10.28.0-beta.1 → 10.28.0-beta.2

package/.eslintcache

@@ -0,0 +1 @@
+[{"/Users/joke/Desktop/gm-printer/src/printer/printer.js":"1","/Users/joke/Desktop/gm-printer/src/printer/page.js":"2","/Users/joke/Desktop/gm-printer/src/printer/long_print_table/index.js":"3","/Users/joke/Desktop/gm-printer/src/editor/context_menu.js":"4","/Users/joke/Desktop/gm-printer/src/config.js":"5","/Users/joke/Desktop/gm-printer/src/common/editor_select.js":"6","/Users/joke/Desktop/gm-printer/src/common/editor_edit_field.js":"7","/Users/joke/Desktop/gm-printer/src/common/common_context_menu.js":"8"},{"size":12305,"mtime":1728981026281},{"size":1899,"mtime":1728981006613},{"size":11905,"mtime":1728980840768,"results":"9","hashOfConfig":"10"},{"size":6329,"mtime":1728980977665},{"size":3185,"mtime":1728980903446},{"size":6042,"mtime":1728980953458,"results":"11","hashOfConfig":"10"},{"size":24316,"mtime":1728980939561},{"size":9821,"mtime":1728980917598,"results":"12","hashOfConfig":"10"},{"filePath":"13","messages":"14","errorCount":4,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1ho4xzn",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/joke/Desktop/gm-printer/src/printer/long_print_table/index.js",["19","20","21","22"],"/Users/joke/Desktop/gm-printer/src/common/editor_select.js",[],"/Users/joke/Desktop/gm-printer/src/common/common_context_menu.js",[],{"ruleId":"23","severity":2,"message":"24","line":100,"column":26,"nodeType":"25","endLine":100,"endColumn":33},{"ruleId":"26","severity":2,"message":"27","line":240,"column":5,"nodeType":"28","endLine":339,"endColumn":6},{"ruleId":"29","severity":2,"message":"30","line":257,"column":22,"nodeType":"25","messageId":"31","endLine":257,"endColumn":32},{"ruleId":"29","severity":2,"message":"30","line":297,"column":30,"nodeType":"25","messageId":"31","endLine":297,"endColumn":40},"no-unused-vars","'dataKey' is assigned a value but never used.","Identifier","no-unreachable","Unreachable code.","ReturnStatement","no-undef","'getTdStyle' is not defined.","undef"]

package/package.json

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

package/src/common/common_context_menu.js

@@ -1,7 +1,7 @@
 import i18next from '../../locales'
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { tableClassNameList } from '../config'
+import { tableClassNameList, LONG_PRINT } from '../config'
 import _ from 'lodash'
 import { Hr, ImageUploader } from '../common/component'
 import { observer, inject } from 'mobx-react'
@@ -192,7 +192,7 @@ class CommonContextMenu extends React.Component {
     const { className } = editStore.config.contents[arr[2]]
     const isActive = c => className === c
     const { config } = editStore
-    const isLongPrint = config?.page?.type === 'longPrint'
+    const isLongPrint = config?.page?.type === LONG_PRINT
     return (
       <>
         {renderTableAction && (
@@ -205,16 +205,21 @@ class CommonContextMenu extends React.Component {
         <div onClick={this.handleRemove}>{i18next.t('移除列')}</div>
         <Hr />
 
-        {!isLongPrint && <> {_.map(tableClassNameList, o => (
-          <div
-            onClick={this.handleSetTableConfig.bind(this, o.value)}
-            key={o.value}
-            className={isActive(o.value) ? 'active' : ''}
-          >
-            {o.text}
-          </div>
-        ))} <Hr /></>}
-
+        {!isLongPrint && (
+          <>
+            {' '}
+            {_.map(tableClassNameList, o => (
+              <div
+                onClick={this.handleSetTableConfig.bind(this, o.value)}
+                key={o.value}
+                className={isActive(o.value) ? 'active' : ''}
+              >
+                {o.text}
+              </div>
+            ))}{' '}
+            <Hr />
+          </>
+        )}
 
         <div onClick={this.handleAddContent.bind(this, 0, '')}>
           {i18next.t('向上插入区域块')}

package/src/common/editor_edit_field.js

@@ -20,6 +20,7 @@ import {
 import { get, toJS } from 'mobx'
 import PropTypes from 'prop-types'
 import { subtotalRadioList } from './util'
+import { LONG_PRINT } from '../config'
 import _ from 'lodash'
 
 @inject('editStore')
@@ -199,7 +200,8 @@ class EditorField extends React.Component {
   renderTable() {
     const { tableDataKeyList, editStore, isSomeSubtotalTr } = this.props
     const { head, headStyle, text, style } = editStore.computedSelectedInfo
-
+    const { config } = editStore
+    const isLongPrint = config?.page?.type === LONG_PRINT
     const {
       specialConfig,
       subtotal,
@@ -362,19 +364,21 @@ class EditorField extends React.Component {
 
         <Gap height='5px' />
 
-        <Flex alignCenter>
-          <Flex alignCenter>{i18next.t('表格样式')}：</Flex>
-          <Select
-            className='gm-printer-edit-select'
-            value={editStore.tableCustomStyle}
-            onChange={editStore.changeTableCustomStyle}
-          >
-            <Option value='default'>{i18next.t('默认样式')}</Option>
-            <Option value='className0'>{i18next.t('样式一')}</Option>
-            <Option value='className1'>{i18next.t('样式二')}</Option>
-            <Option value='className2'>{i18next.t('样式三')}</Option>
-          </Select>
-        </Flex>
+        {!isLongPrint && (
+          <Flex alignCenter>
+            <Flex alignCenter>{i18next.t('表格样式')}：</Flex>
+            <Select
+              className='gm-printer-edit-select'
+              value={editStore.tableCustomStyle}
+              onChange={editStore.changeTableCustomStyle}
+            >
+              <Option value='default'>{i18next.t('默认样式')}</Option>
+              <Option value='className0'>{i18next.t('样式一')}</Option>
+              <Option value='className1'>{i18next.t('样式二')}</Option>
+              <Option value='className2'>{i18next.t('样式三')}</Option>
+            </Select>
+          </Flex>
+        )}
 
         <Gap height='5px' />
 

package/src/common/editor_select.js

@@ -2,12 +2,9 @@ import i18next from '../../locales'
 import React from 'react'
 import { observer, inject } from 'mobx-react'
 import { Flex, Option, Select } from '../components'
-import {
-  RadioGroup,
-  Radio,
-} from '@gmfe/react'
+import { RadioGroup, Radio } from '@gmfe/react'
 import { InputWithUnit } from '../common/component'
-import { pageTypeMap, printDirectionList } from '../config'
+import { pageTypeMap, printDirectionList, LONG_PRINT } from '../config'
 import _ from 'lodash'
 import { dispatchMsg } from '../util'
 import PropTypes from 'prop-types'
@@ -19,7 +16,7 @@ class EditorSelector extends React.Component {
     this.props.editStore.setConfigName(e.target.value)
   }
 
-  handleConfigIsFixLastFooter = (_val) => {
+  handleConfigIsFixLastFooter = _val => {
     this.props.editStore.setConfigIsFixLastFooter(_val)
   }
 
@@ -45,13 +42,19 @@ class EditorSelector extends React.Component {
 
   render() {
     const {
-      config: { name, page, batchPrintConfig, isFixLastFooter, showDiyOverAllOrder },
+      config: {
+        name,
+        page,
+        batchPrintConfig,
+        isFixLastFooter,
+        showDiyOverAllOrder
+      },
       computedRegionList,
       computedSelectedRegionTip,
       selectedRegion
     } = this.props.editStore
     const isDIY = page.type === 'DIY'
-    const isLongPrint = page.type === 'longPrint'
+    const isLongPrint = page.type === LONG_PRINT
     return (
       <div>
         <Flex alignCenter>
@@ -102,20 +105,22 @@ class EditorSelector extends React.Component {
             />
           </Flex>
         )}
-        {!isLongPrint && <Flex alignCenter className='gm-padding-top-5'>
-          <div>{i18next.t('打印布局')}：</div>
-          <Select
-            className='gm-printer-edit-select'
-            value={page.printDirection}
-            onChange={this.handlePrintDirection}
-          >
-            {_.map(printDirectionList, v => (
-              <Option key={v.value} value={v.value}>
-                {v.text}
-              </Option>
-            ))}
-          </Select>
-        </Flex>}
+        {!isLongPrint && (
+          <Flex alignCenter className='gm-padding-top-5'>
+            <div>{i18next.t('打印布局')}：</div>
+            <Select
+              className='gm-printer-edit-select'
+              value={page.printDirection}
+              onChange={this.handlePrintDirection}
+            >
+              {_.map(printDirectionList, v => (
+                <Option key={v.value} value={v.value}>
+                  {v.text}
+                </Option>
+              ))}
+            </Select>
+          </Flex>
+        )}
 
         <Flex alignCenter className='gm-padding-top-5'>
           <div>{i18next.t('选择区域')}：</div>
@@ -156,21 +161,25 @@ class EditorSelector extends React.Component {
           </>
         )}
 
-        {
-          showDiyOverAllOrder !== undefined && <Flex alignCenter className='gm-padding-top-5'>
-            <label htmlFor={1}>{'是否固定末页签名和页脚区域：'}</label>
+        {showDiyOverAllOrder !== undefined && (
+          <Flex alignCenter className='gm-padding-top-5'>
+            <label htmlFor={1}>是否固定末页签名和页脚区域：</label>
             <RadioGroup
               name='isFixFooter'
               value={isFixLastFooter}
               inline
               onChange={this.handleConfigIsFixLastFooter}
-              className="gm-flex"
+              className='gm-flex'
             >
-              <Radio value={true} style={{ display: 'flex', marginRight: 10 }}><span style={{ marginLeft: 5 }}>是</span></Radio>
-              <Radio value={false} style={{ display: 'flex' }}><span style={{ marginLeft: 5 }}>否</span></Radio>
+              <Radio value style={{ display: 'flex', marginRight: 10 }}>
+                <span style={{ marginLeft: 5 }}>是</span>
+              </Radio>
+              <Radio value={false} style={{ display: 'flex' }}>
+                <span style={{ marginLeft: 5 }}>否</span>
+              </Radio>
             </RadioGroup>
           </Flex>
-        }
+        )}
 
         <Flex className='gm-padding-top-5 gm-text-red' column>
           {computedSelectedRegionTip}

package/src/config.js

@@ -1,4 +1,7 @@
 import i18next from '../locales'
+
+export const LONG_PRINT = 'longPrint'
+
 export const pageTypeMap = {
   A4: {
     name: 'A4',
@@ -79,7 +82,7 @@ export const pageTypeMap = {
     }
   },
   // 新增长条打印配置选项
-  'longPrint': {
+  [LONG_PRINT]: {
     name: i18next.t('长条打印'),
     size: {
       width: '80mm',
@@ -87,10 +90,10 @@ export const pageTypeMap = {
     },
     printDirection: 'vertical',
     gap: {
-      paddingTop: '5mm',
-      paddingRight: '5mm',
-      paddingBottom: '5mm',
-      paddingLeft: '5mm'
+      paddingTop: '2mm',
+      paddingRight: '2mm',
+      paddingBottom: '2mm',
+      paddingLeft: '2mm'
     }
   },
   DIY: {

package/src/editor/context_menu.js

@@ -6,6 +6,7 @@ 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('插入文本') },
@@ -123,16 +124,18 @@ class ContextMenu extends React.Component {
     const isOverallOrder = overallOrder?.show
     const isDiyOverallOrder = diyOverallOrder?.show
     // 长条打印
-    const isLongPrint = type === 'longPrint'
+    const isLongPrint = type === LONG_PRINT
 
     return (
       <>
-        {!isLongPrint && <div
-          onClick={this.handleChangeTableDataKey.bind(this, 'multi', name)}
-          className={isMultiActive ? 'active' : ''}
-        >
-          {i18next.t('双栏商品')}
-        </div>}
+        {!isLongPrint && (
+          <div
+            onClick={this.handleChangeTableDataKey.bind(this, 'multi', name)}
+            className={isMultiActive ? 'active' : ''}
+          >
+            {i18next.t('双栏商品')}
+          </div>
+        )}
         {/* 三分纸高度太小，做不了三栏，会死循环 */}
         {type !== 'A4/3' && !isLongPrint && (
           <div

package/src/printer/long_print_table/index.js

@@ -6,7 +6,7 @@ import {
   getDataKey,
   getHeight,
   getTableColumnName,
-  getWidth,
+  getWidth
 } from '../../util'
 import { inject, observer } from 'mobx-react'
 import classNames from 'classnames'
@@ -82,7 +82,7 @@ class Table extends React.Component {
 
   handleDrop = e => {
     const { index } = e.target.dataset
-    console.log(this.state.index, index);
+    console.log(this.state.index, index)
     if (this.state.index !== index) {
       dispatchMsg('gm-printer-table-drag', {
         source: this.state.index,
@@ -148,85 +148,94 @@ class Table extends React.Component {
       )
     }
 
-    return (<div style={{ tableLayout: 'inherit', wordBreak: 'break-all' }}>
-      {_.map(_.range(range.begin, range.end), i => {
-        const _special = tableData[i] && tableData[i]._special
-        const _specialText = tableData[i] && tableData[i]._specialText
-        if (_specialText)
-          return <CategoryTr key={i} config={config} data={_specialText} />
-        if (_special)
-          return <SpecialTr key={i} config={config} data={_special} />
-        // 如果项为空对象展现一个占满一行的td
-        const isItemNone = !_.keys(tableData[i]).length
-        console.log(columns, "columns");
-        return (
-          <div key={i} style={{ borderTop: '1px dashed black' }}>
-            {isItemNone ? (
-              null
-            ) : (
-              _.map(columns, (col, j) => {
-                return (
-                  <div
-                    key={j}
-                    data-name={getTableColumnName(name, col.index)}
-                    data-index={col.index}
-                    onClick={this.handleClick}
-                    draggable
-                    onDragStart={this.handleDragStart}
-                    onDrop={this.handleDrop}
-                    onDragOver={this.handleDragOver}
-                    style={{ padding: "2px 0" }}
-                    className={classNames("long_print_table_row", {
-                      active:
-                        getTableColumnName(name, col.index) ===
-                        printerStore.selected
-                    })}>
-                    <span
-                      data-name={getTableColumnName(name, col.index)}
-                      data-index={col.index}
-                      onClick={this.handleClick}
-                      style={{ ...col.headStyle }}>{col.head}：</span>
-                    <span
-                      style={{
-                        ...col.style
-                      }}
-                      data-name={getTableColumnName(name, col.index)}
-                      data-index={col.index}
-                      onClick={this.handleClick}
-                      dangerouslySetInnerHTML={{
-                        __html: col.isSpecialColumn
-                          ? printerStore.templateSpecialDetails(
-                            col,
-                            dataKey,
-                            i
-                          )
-                          : printerStore
-                            .templateTable(col.text, dataKey, i, pageIndex)
-                            .replace(/\(\)/g, '')
-                      }}
-                    />
-                  </div>
-                )
-              })
-            )}
-          </div>
-        )
-      })}
-      {this.props.config.subtotal.isCommutationPlace
-        ? PageSummarySubtotalTr()
-        : subtotalTrPageSummary()}
-      <OverallOrder
-        range={range}
-        config={config}
-        printerStore={printerStore}
-      />
-      <DiyOverallOrder
-        range={range}
-        config={config}
-        printerStore={printerStore}
-        pageIndex={pageIndex}
-      />
-    </div>)
+    return (
+      <div style={{ tableLayout: 'inherit', wordBreak: 'break-all' }}>
+        {_.map(_.range(range.begin, range.end), i => {
+          const _special = tableData[i] && tableData[i]._special
+          const _specialText = tableData[i] && tableData[i]._specialText
+          if (_specialText)
+            return <CategoryTr key={i} config={config} data={_specialText} />
+          if (_special)
+            return <SpecialTr key={i} config={config} data={_special} />
+          // 如果项为空对象展现一个占满一行的td
+          const isItemNone = !_.keys(tableData[i]).length
+          console.log(columns, 'columns')
+          return (
+            <div key={i} style={{ borderTop: '1px dashed black' }}>
+              {isItemNone
+                ? null
+                : _.map(columns, (col, j) => {
+                    return (
+                      <div
+                        key={j}
+                        data-name={getTableColumnName(name, col.index)}
+                        data-index={col.index}
+                        onClick={this.handleClick}
+                        draggable
+                        onDragStart={this.handleDragStart}
+                        onDrop={this.handleDrop}
+                        onDragOver={this.handleDragOver}
+                        style={{ padding: '2px 0' }}
+                        className={classNames('long_print_table_row', {
+                          active:
+                            getTableColumnName(name, col.index) ===
+                            printerStore.selected
+                        })}
+                      >
+                        <span
+                          data-name={getTableColumnName(name, col.index)}
+                          data-index={col.index}
+                          onClick={this.handleClick}
+                          style={{ ...col.headStyle }}
+                        >
+                          {col.head}：
+                        </span>
+                        <span
+                          style={{
+                            ...col.style
+                          }}
+                          data-name={getTableColumnName(name, col.index)}
+                          data-index={col.index}
+                          onClick={this.handleClick}
+                          dangerouslySetInnerHTML={{
+                            __html: col.isSpecialColumn
+                              ? printerStore.templateSpecialDetails(
+                                  col,
+                                  dataKey,
+                                  i
+                                )
+                              : printerStore
+                                  .templateTable(
+                                    col.text,
+                                    dataKey,
+                                    i,
+                                    pageIndex
+                                  )
+                                  .replace(/\(\)/g, '')
+                          }}
+                        />
+                      </div>
+                    )
+                  })}
+            </div>
+          )
+        })}
+        {this.props.config.subtotal.isCommutationPlace
+          ? PageSummarySubtotalTr()
+          : subtotalTrPageSummary()}
+        <OverallOrder
+          range={range}
+          config={config}
+          printerStore={printerStore}
+        />
+        <DiyOverallOrder
+          range={range}
+          config={config}
+          printerStore={printerStore}
+          pageIndex={pageIndex}
+        />
+      </div>
+    )
 
     return (
       <table
@@ -296,13 +305,13 @@ class Table extends React.Component {
                         dangerouslySetInnerHTML={{
                           __html: col.isSpecialColumn
                             ? printerStore.templateSpecialDetails(
-                              col,
-                              dataKey,
-                              i
-                            )
+                                col,
+                                dataKey,
+                                i
+                              )
                             : printerStore
-                              .templateTable(col.text, dataKey, i, pageIndex)
-                              .replace(/\(\)/g, '')
+                                .templateTable(col.text, dataKey, i, pageIndex)
+                                .replace(/\(\)/g, '')
                         }}
                       />
                     )

package/src/printer/page.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { inject, observer } from 'mobx-react'
 import { getHeight } from '../util'
 import classNames from 'classnames'
+import { LONG_PRINT } from '../config'
 
 @inject('printerStore')
 @observer
@@ -44,7 +45,9 @@ class Page extends React.Component {
           ...pageStyle,
           boxSizing: 'content-box',
           width: `calc(${width} - ${paddingLeft} - ${paddingRight})`,
-          [type == "longPrint" ? "minHeight" : "height"]: `calc(${height} - ${paddingTop} - ${paddingBottom} ${x})`,
+          [type === LONG_PRINT
+            ? 'minHeight'
+            : 'height']: `calc(${height} - ${paddingTop} - ${paddingBottom} ${x})`,
           padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`
         }}
       >
@@ -52,7 +55,9 @@ class Page extends React.Component {
           className='gm-printer-page-inner'
           style={{
             width: `calc(${width} - ${paddingLeft} - ${paddingRight})`,
-            [type == "longPrint" ? "minHeight" : "height"]: `calc(${height} - ${paddingTop} - ${paddingBottom} ${x})`
+            [type === LONG_PRINT
+              ? 'minHeight'
+              : 'height']: `calc(${height} - ${paddingTop} - ${paddingBottom} ${x})`
           }}
         >
           {children}

package/src/printer/printer.js

@@ -8,8 +8,9 @@ import Page from './page'
 import _ from 'lodash'
 import Panel from './panel'
 import Table from './table'
-import LongPrintTable from "./long_print_table"
+import LongPrintTable from './long_print_table'
 import MergePage from './merge_page'
+import { LONG_PRINT } from '../config'
 
 // Header Sign Footer 相对特殊，要单独处理
 const Header = props => (
@@ -165,37 +166,39 @@ class Printer extends React.Component {
   renderLongPage() {
     const { printerStore } = this.props
     const { config } = printerStore
-    return <Page>
-      <Header config={config.header} pageIndex={0} />
-      {_.map(config.contents, (content, index) => {
-        switch (content.type) {
-          case 'table':
-            // eslint-disable-next-line no-case-declarations
-            const list = printerStore.data._table[content.dataKey]
-            return (
-              <LongPrintTable
-                key={`contents.table.${index}`}
-                name={`contents.table.${index}`}
-                config={content}
-                range={{ begin: 0, end: list?.length || 0 }}
-                pageIndex={0}
-                placeholder={`${i18next.t('区域')} ${index}`}
-              />
-            )
-
-          default:
-            return (
-              <Panel
-                key={`contents.panel.${index}`}
-                name={`contents.panel.${index}`}
-                config={content}
-                pageIndex={0}
-                placeholder={`${i18next.t('区域')} ${index}`}
-              />
-            )
-        }
-      })}
-    </Page>
+    return (
+      <Page>
+        <Header config={config.header} pageIndex={0} />
+        {_.map(config.contents, (content, index) => {
+          switch (content.type) {
+            case 'table':
+              // eslint-disable-next-line no-case-declarations
+              const list = printerStore.data._table[content.dataKey]
+              return (
+                <LongPrintTable
+                  key={`contents.table.${index}`}
+                  name={`contents.table.${index}`}
+                  config={content}
+                  range={{ begin: 0, end: list?.length || 0 }}
+                  pageIndex={0}
+                  placeholder={`${i18next.t('区域')} ${index}`}
+                />
+              )
+
+            default:
+              return (
+                <Panel
+                  key={`contents.panel.${index}`}
+                  name={`contents.panel.${index}`}
+                  config={content}
+                  pageIndex={0}
+                  placeholder={`${i18next.t('区域')} ${index}`}
+                />
+              )
+          }
+        })}
+      </Page>
+    )
   }
 
   renderPage() {
@@ -221,10 +224,10 @@ class Printer extends React.Component {
 
                 const end = isAutofillConfig
                   ? panel.end +
-                  Math.floor(
-                    remainPageHeight /
-                    printerStore.computedTableCustomerRowHeight
-                  )
+                    Math.floor(
+                      remainPageHeight /
+                        printerStore.computedTableCustomerRowHeight
+                    )
                   : panel.end
                 switch (panel.type) {
                   case 'table':
@@ -320,7 +323,7 @@ class Printer extends React.Component {
     const { printerStore, config } = this.props
     // batchPrintConfig: 1 不连续打印（纸张会间断）2 连续打印（纸张连续打，不间断）
     const batchPrintConfig = config.batchPrintConfig
-    if (config.page.type === "longPrint") {
+    if (config.page.type === LONG_PRINT) {
       return !printerStore.ready ? this.renderBefore() : this.renderLongPage()
     }
     if (batchPrintConfig === 2) {