gm-printer 10.11.4-beta1 → 10.11.5

package/src/printer/table.js

@@ -36,6 +36,7 @@ class Table extends React.Component {
       const tHead = $table.querySelector('thead')
       const ths = tHead.querySelectorAll('th') || []
       const trs = $table.querySelectorAll('tbody tr') || []
+      const detailsDiv = $table.querySelectorAll('tr td .b-table-details')
 
       printerStore.setHeight(name, getHeight($table))
 
@@ -45,7 +46,8 @@ class Table extends React.Component {
           widths: _.map(ths, th => getWidth(th))
         },
         body: {
-          heights: _.map(trs, tr => getHeight(tr))
+          heights: _.map(trs, tr => getHeight(tr)),
+          children: _.map(detailsDiv, div => getHeight(div))
         }
       })
     }
@@ -107,14 +109,27 @@ class Table extends React.Component {
       for (let i = 2; i <= colNumber; i++) {
         const colNum = i > 2 ? i : '' // 栏数
         const columnsI = columns.map((val, index) => {
-          return {
+          const data = {
             ...val,
             index,
             text: val.text.replace(
-              /{{列\.([^{{]+)}}/g,
-              (s, s1) => `{{列.${s1}${MULTI_SUFFIX}${colNum}}}`
+              /{{(price\()?列\.([^{{]+)}}/g,
+              (s, s1, s2) => {
+                if (s1) {
+                  // 有price函数插进来
+                  const mix_suffix = s2.replace(/\*/, () => `${MULTI_SUFFIX}*`)
+                  return `{{${s1}列.${mix_suffix}${colNum}}}`
+                } else {
+                  return `{{列.${s2}${MULTI_SUFFIX}${colNum}}}`
+                }
+              }
             ) // {{列.xx}} => {{列.xxMULTI_SUFFIXi}}
           }
+          // 多栏商品的明细取 __details_MULTI_SUFFIX
+          if (val.specialDetailsKey)
+            data.specialDetailsKey =
+              val.specialDetailsKey + `${MULTI_SUFFIX}${colNum}`
+          return data
         })
         res = res.concat(columnsI)
       }
@@ -140,9 +155,34 @@ class Table extends React.Component {
 
     // 列
     const columns = this.getColumns()
-
     // 列宽固定(避免跳页bug)
     const thWidths = printerStore.tablesInfo[name]?.head.widths || []
+    // 每页合计在前
+    const subtotalTrPageSummary = () => {
+      return (
+        <>
+          <SubtotalTr
+            range={range}
+            config={config}
+            printerStore={printerStore}
+          />
+          <PageSummary {...this.props} />
+        </>
+      )
+    }
+    // 合计在前
+    const PageSummarySubtotalTr = () => {
+      return (
+        <>
+          <PageSummary {...this.props} />
+          <SubtotalTr
+            range={range}
+            config={config}
+            printerStore={printerStore}
+          />
+        </>
+      )
+    }
 
     return (
       <table>
@@ -155,7 +195,7 @@ class Table extends React.Component {
                 data-name={getTableColumnName(name, col.index)}
                 draggable
                 style={{
-                  minWidth: thWidths[i],
+                  maxWidth: thWidths[i],
                   ...col.headStyle
                 }}
                 className={classNames({
@@ -178,7 +218,6 @@ class Table extends React.Component {
             const _special = tableData[i] && tableData[i]._special
             if (_special)
               return <SpecialTr key={i} config={config} data={_special} />
-
             // 如果项为空对象展现一个占满一行的td
             const isItemNone = !_.keys(tableData[i]).length
 
@@ -192,7 +231,11 @@ class Table extends React.Component {
                       <td
                         key={j}
                         data-name={getTableColumnName(name, col.index)}
-                        style={col.style}
+                        style={{
+                          minWidth: '24px',
+                          maxWidth: thWidths[j],
+                          ...col.style
+                        }}
                         className={classNames({
                           active:
                             getTableColumnName(name, col.index) ===
@@ -205,12 +248,9 @@ class Table extends React.Component {
                                 dataKey,
                                 i
                               )
-                            : printerStore.templateTable(
-                                col.text,
-                                dataKey,
-                                i,
-                                pageIndex
-                              )
+                            : printerStore
+                                .templateTable(col.text, dataKey, i, pageIndex)
+                                .replace(/\(\)/g, '')
                         }}
                       />
                     )
@@ -219,8 +259,9 @@ class Table extends React.Component {
               </tr>
             )
           })}
-          <SubtotalTr {...this.props} />
-          <PageSummary {...this.props} />
+          {this.props.config.subtotal.isCommutationPlace
+            ? PageSummarySubtotalTr()
+            : subtotalTrPageSummary()}
         </tbody>
       </table>
     )

package/src/printer/table_special_tr.js

@@ -25,6 +25,7 @@ const SpecialTr = ({ data, config }) => {
 
   switch (type) {
     case 'flex':
+      // eslint-disable-next-line no-case-declarations
       const row = list.map((d, i) => {
         let text = ''
         try {

package/src/printer/table_subtotal_tr.js

@@ -7,6 +7,7 @@ import Big from 'big.js'
 import { coverDigit2Uppercase, getDataKey } from '../util'
 import { observer } from 'mobx-react'
 import { get } from 'mobx'
+import { Flex } from '../components'
 
 /**
  * 每页合计组件,分页计算后,根据range来统计每页合计数据
@@ -21,6 +22,8 @@ const SubtotalTr = props => {
       subtotal,
       subtotal: {
         show,
+        isUpperCaseBefore, // 决定小写金额是否在前
+        isUpperLowerCaseSeparate, // 决定大小写金额是否分开在两端
         style,
         fields = [
           {
@@ -62,21 +65,37 @@ const SubtotalTr = props => {
     const list = tableData.slice(range.begin, range.end)
 
     const sum = {}
-    let subtotalStr = ''
 
     _.each(fields, v => {
       sum[v.name] = sumData(list, v.valueField)
     })
 
+    // 定义每页小记的左右两侧内容
+    let subtotalLeftContent
+    let subtotalRightContent
+
     for (const name in sum) {
       const price = sum[name]
       const priceUpperCase = get(subtotal, 'needUpperCase') // needUpperCase在初始模板中undefined,所以必须用这个方法
         ? '大写：' + coverDigit2Uppercase(price)
         : ''
       if (displayName) {
-        subtotalStr += `${name} ${price}   ${priceUpperCase}    `
+        // 大写金额是否在前
+        if (isUpperCaseBefore) {
+          subtotalLeftContent = `${name}${priceUpperCase}`
+          subtotalRightContent = `${price}`
+        } else {
+          subtotalLeftContent = `${price}`
+          subtotalRightContent = `${name} ${priceUpperCase}`
+        }
       } else {
-        subtotalStr += `${price}   ${priceUpperCase}    `
+        if (isUpperCaseBefore) {
+          subtotalLeftContent = `${priceUpperCase}`
+          subtotalRightContent = `${price}`
+        } else {
+          subtotalLeftContent = `${price}`
+          subtotalRightContent = `${priceUpperCase}`
+        }
       }
     }
 
@@ -85,10 +104,31 @@ const SubtotalTr = props => {
         <td
           colSpan={99}
           style={{ fontWeight: 'bold', ...style }}
-          dangerouslySetInnerHTML={{
-            __html: `${i18next.t('每页合计')}：${subtotalStr}`
-          }}
-        />
+          // dangerouslySetInnerHTML={{
+          //   __html: `${i18next.t('每页合计')}：${subtotalStr}`
+          // }}flex-grow: 1
+        >
+          {/* 大写金额和小写金额分开在表格的两侧，通过控制类名实现，添加类名后，覆盖原来的居中、靠右靠左 */}
+          <div
+            className={
+              isUpperLowerCaseSeparate
+                ? 'gm-printer-subtotal-UpperLowerCaseSeparate-outer'
+                : ''
+            }
+          >
+            {i18next.t('每页合计')}：
+            <span
+              className={
+                isUpperLowerCaseSeparate
+                  ? 'gm-printer-subtotal-UpperLowerCaseSeparate-inter'
+                  : ''
+              }
+            >
+              <span>&nbsp;&nbsp;{subtotalLeftContent}&nbsp;&nbsp;</span>
+              <span>&nbsp;&nbsp;{subtotalRightContent}&nbsp;&nbsp;</span>
+            </span>
+          </div>
+        </td>
       </tr>
     )
   } else {

package/src/util.js

@@ -15,7 +15,7 @@ function getHeight(el) {
 
 function getWidth(el) {
   const styles = window.getComputedStyle(el)
-  const width = el.offsetWidth
+  const width = Math.ceil(el.offsetWidth)
   const borderLeftWidth = parseFloat(styles.borderLeftWidth)
   const borderRightWidth = parseFloat(styles.borderRightWidth)
   const paddingLeft = parseFloat(styles.paddingLeft)
@@ -178,6 +178,56 @@ const getDataKey = (dataKey, arrange) =>
     ? `${dataKey}_vertical`
     : dataKey
 
+/**
+ * @param {*} table 当前单据的高度信息
+ * @param {*} detailsData 当前所有tablelist
+ * @param {*} currentPageMinimumHeight 当前page最小高度
+ * @param {*} pageHeight page的高度
+ * @returns {ranges, detailsPageHeight} detailsPageHeight 每页高度合集
+ */
+const caclSingleDetailsPageHeight = (
+  indexEnd,
+  table,
+  detailsData,
+  heightParams
+) => {
+  let end = 0
+  let begin = 0
+  let index = 0
+  let currentDetailsMiniHeight = 0
+  const ranges = []
+  const detailsPageHeight = []
+  const { calcHeight, pageHeight, currentPageMinimumHeight } = heightParams
+
+  while (end < detailsData.length) {
+    currentDetailsMiniHeight += table.body.children[end]
+
+    const _calcHeight = !index && indexEnd === 0 ? calcHeight : pageHeight
+    // 如果当前明细高度综合大于页面高度，到此为止进行分页
+    if (currentDetailsMiniHeight + currentPageMinimumHeight > _calcHeight) {
+      detailsPageHeight.push(
+        currentDetailsMiniHeight - table.body.children[end]
+      )
+      ranges.push([begin, end])
+      end++
+      index++
+      begin = end
+      currentDetailsMiniHeight = 0
+    } else {
+      end++
+      if (end === detailsData.length) {
+        ranges.push([begin, end])
+        detailsPageHeight.push(currentDetailsMiniHeight)
+      }
+    }
+  }
+
+  return {
+    ranges,
+    detailsPageHeight
+  }
+}
+
 export {
   getHeight,
   getWidth,
@@ -193,5 +243,6 @@ export {
   coverDigit2Uppercase,
   getDataKey,
   isMultiTable,
-  getMultiNumber
+  getMultiNumber,
+  caclSingleDetailsPageHeight
 }

package/webpack.config.js

@@ -36,6 +36,24 @@ module.exports = {
             }
           }
         ]
+      },
+      {
+        test: /\/svg\/(\w|\W)+\.svg$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              icon: true,
+              expandProps: 'start',
+              svgProps: {
+                fill: 'currentColor',
+                // className 冗余
+                className:
+                  "{'gm-svg-icon t-svg-icon m-svg-icon ' + (props.className || '')}"
+              }
+            }
+          }
+        ]
       }
     ]
   },
@@ -45,7 +63,7 @@ module.exports = {
   devServer: {
     compress: true,
     host: '0.0.0.0',
-    port: 8081,
+    port: 5678,
     inline: false,
     disableHostCheck: true,
     proxy: {

package/global.d.ts

@@ -1,69 +0,0 @@
-declare module 'gm-printer' {
-  import { CSSProperties } from 'react'
-  interface EditorProps {
-    config: any
-    mockData: any
-    onSave: (config: any, isSaveAs?: boolean) => void
-    showEditor: boolean
-    addFields: any
-  }
-  interface PrinterProps {
-    data: any
-    config: any
-    className?: string
-    style?: CSSProperties
-    selected?: string
-    selectedRegion?: string
-    onReady?: () => void
-  }
-  interface BatchPrinterProps {
-    list: any[]
-    onReady?: () => void
-  }
-  // function Editor<P extends EditorProps>(props: P): React.ComponentType<P>
-  class Editor<T extends EditorProps> extends React.Component<T, any> {}
-  class EditorStockIn<T extends EditorProps> extends React.Component<T, any> {}
-  class EditorStockOut<T extends EditorProps> extends React.Component<T, any> {}
-  class EditorPurchase<T extends EditorProps> extends React.Component<T, any> {}
-  class EditorSettle<T extends EditorProps> extends React.Component<T, any> {}
-  class EditorCannibalize<T extends EditorProps> extends React.Component<T, any> {}
-  class EditorStatement<T extends EditorProps> extends React.Component<
-    T,
-    any
-  > {}
-  class EditorAccoutStatement<T extends EditorProps> extends React.Component<
-    T,
-    any
-  > {}
-  class EditorAccount<T extends EditorProps> extends React.Component<T, any> {}
-  class EditorBoxLabel<T extends EditorProps> extends React.Component<T, any> {}
-  class Printer<T extends PrinterProps> extends React.Component<T, any> {}
-  class BatchPrinter<T extends BatchPrinterProps> extends React.Component<T, any> {}
-  const MULTI_SUFFIX: string
-  function getCSS(): string
-  function insertCSS(cssString: string, target?: HTMLElement | ShadowRoot): void
-  function doPrint(
-    obj: { data: any; config: any },
-    isTest?: boolean
-  ): (obj: { data: any; config: any }) => Promise<any>
-  function doBatchPrint(list: any [], isTest?: boolean): (list: []) => Promise<any>
-  export {
-    Editor,
-    EditorStockIn,
-    EditorStockOut,
-    EditorPurchase,
-    EditorSettle,
-    EditorCannibalize,
-    EditorStatement,
-    EditorAccoutStatement,
-    EditorAccount,
-    EditorBoxLabel,
-    Printer,
-    BatchPrinter,
-    MULTI_SUFFIX,
-    insertCSS,
-    getCSS,
-    doPrint,
-    doBatchPrint
-  }
-}

package/src/editor_cannibalize/context_menu.js

@@ -1,77 +0,0 @@
-import i18next from '../../locales'
-import React from 'react'
-import CommonContextMenu from '../common/common_context_menu'
-import { inject, observer } from 'mobx-react'
-import { Printer } from '../printer'
-
-const blockTypeList = [
-  { value: '', text: i18next.t('插入文本') },
-  { value: 'line', text: i18next.t('插入线条') },
-  { value: 'image', text: i18next.t('插入图片') }
-]
-
-@inject(stores => ({
-  editStore: stores.editStore,
-  mockData: stores.mockData
-}))
-@observer
-class ContextMenu extends React.Component {
-  handleChangeTableDataKey = (key, name) => {
-    const { editStore } = this.props
-
-    editStore.changeTableDataKeyStockout(name, key)
-  }
-
-  renderOrderActionBtn = name => {
-    const arr = name.split('.')
-    const { dataKey } = this.props.editStore.config.contents[arr[2]]
-    const keyArr = dataKey.split('_')
-
-    const isQuantityActive = keyArr.includes('quantity')
-    // const isMoneyActive = keyArr.includes('money')
-    const isMultiActive = keyArr.includes('multi')
-
-    return (
-      <>
-        <div
-          onClick={this.handleChangeTableDataKey.bind(this, 'multi', name)}
-          className={isMultiActive ? 'active' : ''}
-        >
-          {i18next.t('双栏商品')}
-        </div>
-        <div
-          onClick={this.handleChangeTableDataKey.bind(this, 'quantity', name)}
-          className={isQuantityActive ? 'active' : ''}
-        >
-          {i18next.t('调拨数小计')}
-        </div>
-        {/* <div
-          onClick={this.handleChangeTableDataKey.bind(this, 'money', name)}
-          className={isMoneyActive ? 'active' : ''}
-        >
-          {i18next.t('调拨金额小计')}
-        </div> */}
-      </>
-    )
-  }
-
-  render() {
-    const { editStore, mockData } = this.props
-    return (
-      <CommonContextMenu
-        renderTableAction={this.renderOrderActionBtn}
-        insertBlockList={blockTypeList}
-      >
-        <Printer
-          key={editStore.computedPrinterKey}
-          selected={editStore.selected}
-          selectedRegion={editStore.selectedRegion}
-          config={editStore.config}
-          data={mockData}
-        />
-      </CommonContextMenu>
-    )
-  }
-}
-
-export default ContextMenu

package/src/editor_cannibalize/editor.js

@@ -1,76 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import { Flex } 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 EditorField from '../common/editor_edit_field'
-import EditorAddField from '../common/editor_add_field'
-import ContextMenu from './context_menu'
-import i18next from '../../locales'
-import withStore from '../common/hoc_with_store'
-
-const tableDataKeyList = [{ value: 'orders', text: i18next.t('全部商品') }]
-
-@withStore(editStore)
-@inject('editStore')
-@observer
-class Editor extends React.Component {
-  render() {
-    const { onSave, showEditor, addFields } = this.props
-    // console.log('挑拨单数据',this.props)
-    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(
-                  '说明：选中内容进行编辑，可拖动字段移动位置，右键使用更多功能'
-                )}
-              </span>
-            }
-          />
-        </Flex>
-
-        {showEditor && (
-          <div className='gm-printer-edit-zone'>
-            <EditorTitle onSave={onSave} />
-            <Gap height='10px' />
-            <EditorSelect />
-            <Gap height='5px' />
-            <EditorField tableDataKeyList={tableDataKeyList} />
-            <Gap height='5px' />
-            <EditorAddField addFields={addFields} />
-
-            <div id='gm-printer-tip' />
-
-            <div id='gm-printer-modal' />
-          </div>
-        )}
-
-        <div className='gm-printer-edit-wrap'>
-          <ContextMenu />
-        </div>
-      </div>
-    )
-  }
-}
-
-Editor.propTypes = {
-  config: PropTypes.object.isRequired,
-  onSave: PropTypes.func,
-  showEditor: PropTypes.bool,
-  mockData: PropTypes.object.isRequired,
-  addFields: PropTypes.object.isRequired
-}
-
-Editor.deaultProps = {
-  onSave: _.noop
-}
-
-export default Editor

package/src/editor_cannibalize/index.js

@@ -1,4 +0,0 @@
-import withShadowDom from '../common/hoc_with_shadow_dom'
-import Editor from './editor'
-
-export default withShadowDom(Editor)

package/src/editor_cannibalize/store.js

@@ -1,29 +0,0 @@
-import EditorStore from '../common/editor_store'
-import { action } from 'mobx'
-import _ from 'lodash'
-
-class Store extends EditorStore {
-  @action
-  changeTableDataKeyStockout(name, key) {
-    const arr = name.split('.')
-    const { dataKey } = this.config.contents[arr[2]]
-    const keyArr = dataKey.split('_')
-    let newDataKey
-    // 当前有这个key则去掉
-    if (keyArr.includes(key)) {
-      newDataKey = _.without(keyArr, key)
-    } else {
-      newDataKey = _.concat(keyArr, key)
-    }
-    newDataKey = _.sortBy(newDataKey, [
-      o => o === 'money',
-      o => o === 'quantity',
-      o => o === 'multi',
-      o => o === 'orders'
-    ])
-
-    this.config.contents[arr[2]].dataKey = newDataKey.join('_')
-  }
-}
-
-export default new Store()