gm-printer 10.14.1-alpha.7 → 10.14.1-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gm-printer",
-  "version": "10.14.1-alpha.7",
+  "version": "10.14.1-alpha.8",
   "description": "diy printer",
   "main": "src/index.js",
   "scripts": {

package/src/finance_voucher/components/finance_batch_printer.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import Printer from '../finance_printer'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+
+class BatchPrinter extends React.Component {
+  constructor(props) {
+    super(props)
+    this.ready = 0
+  }
+
+  handleReady = () => {
+    this.ready++
+    if (this.ready === this.props.list.length) {
+      this.props.onReady()
+    }
+  }
+
+  render() {
+    const { list } = this.props
+    return _.map(list, ({ config, data }, i) => (
+      <Printer key={i} data={data} config={config} onReady={this.handleReady} />
+    ))
+  }
+}
+
+BatchPrinter.propTypes = {
+  list: PropTypes.array.isRequired,
+  onReady: PropTypes.func
+}
+
+BatchPrinter.defaultProps = {
+  onReady: _.noop
+}
+
+export default BatchPrinter

package/src/finance_voucher/components/table.js

@@ -0,0 +1,343 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import {
+  dispatchMsg,
+  getDataKey,
+  getHeight,
+  getMultiNumber,
+  getTableColumnName,
+  getWidth,
+  isMultiTable
+} from '../../util'
+import { inject, observer } from 'mobx-react'
+import classNames from 'classnames'
+import { MULTI_SUFFIX } from '../../config'
+import SpecialTr from '../../printer/table_special_tr'
+import SubtotalTr from './table_subtotal_tr'
+import PageSummary from '../../printer/page_summary'
+
+@inject('printerStore')
+@observer
+class Table extends React.Component {
+  constructor(props) {
+    super(props)
+    this.ref = React.createRef()
+    this.state = {
+      index: null
+    }
+  }
+
+  componentDidMount() {
+    const { name, printerStore } = this.props
+
+    if (!printerStore.ready) {
+      const $table = this.ref.current.querySelector('table')
+      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))
+
+      printerStore.setTable(name, {
+        head: {
+          height: getHeight(tHead),
+          widths: _.map(ths, th => getWidth(th))
+        },
+        body: {
+          heights: _.map(trs, tr => getHeight(tr)),
+          children: _.map(detailsDiv, div => getHeight(div))
+        }
+      })
+    }
+  }
+
+  handleClick = e => {
+    const { name } = this.props
+    const { index } = e.target.dataset
+
+    dispatchMsg('gm-printer-select', {
+      selected: getTableColumnName(name, index)
+    })
+  }
+
+  handleDragStart = e => {
+    const { name } = this.props
+    const { index } = e.target.dataset
+
+    this.setState({
+      index
+    })
+
+    dispatchMsg('gm-printer-select', {
+      selected: getTableColumnName(name, index)
+    })
+  }
+
+  handleSelectedRegion = () => {
+    const { name } = this.props
+
+    dispatchMsg('gm-printer-select-region', { selected: name })
+  }
+
+  handleDrop = e => {
+    const { index } = e.target.dataset
+
+    if (this.state.index !== index) {
+      dispatchMsg('gm-printer-table-drag', {
+        source: this.state.index,
+        target: index
+      })
+    }
+  }
+
+  handleDragOver = e => {
+    e.preventDefault()
+  }
+
+  getColumns = () => {
+    const {
+      config: { columns, dataKey }
+    } = this.props
+    const columns1 = columns.map((val, index) => ({ ...val, index }))
+    // 如果是多列表格
+    if (isMultiTable(dataKey)) {
+      // 多栏商品的第二列有点特殊,都带 _MULTI_SUFFIX 后缀
+      let res = columns1
+      const colNumber = getMultiNumber(dataKey)
+      for (let i = 2; i <= colNumber; i++) {
+        const colNum = i > 2 ? i : '' // 栏数
+        const columnsI = columns.map((val, index) => {
+          const data = {
+            ...val,
+            index,
+            text: val.text.replace(
+              /{{(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)
+      }
+      return res
+    } else {
+      return columns1
+    }
+  }
+
+  renderDefault() {
+    let {
+      config,
+      config: { dataKey, arrange, customerRowHeight = 23 },
+      name,
+      range,
+      pageIndex,
+      printerStore
+    } = this.props
+
+    // 数据
+    dataKey = getDataKey(dataKey, arrange)
+    const tableData = printerStore.data._table[dataKey] || []
+
+    // 列
+    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}
+          />
+        </>
+      )
+    }
+    const getTdStyle = (index, style = {}) => {
+      const width = thWidths[index]
+      const { fontSize } = style
+      let tdStyle = {}
+      let minWidth = 24
+
+      if (!width) return tdStyle
+      if (fontSize) minWidth = _.parseInt(fontSize) * 2
+      if (width >= 150) {
+        tdStyle = {
+          minWidth: width
+        }
+      } else {
+        tdStyle = {
+          minWidth,
+          width
+        }
+      }
+      return tdStyle
+    }
+
+    return (
+      <table>
+        <thead>
+          <tr style={{ height: `${customerRowHeight}px` }}>
+            {_.map(columns, (col, i) => (
+              <th
+                key={i}
+                data-index={col.index}
+                data-name={getTableColumnName(name, col.index)}
+                draggable
+                style={{
+                  ...getTdStyle(i, col.headStyle),
+                  ...col.headStyle
+                }}
+                className={classNames({
+                  active:
+                    getTableColumnName(name, col.index) ===
+                    printerStore.selected
+                })}
+                onClick={this.handleClick}
+                onDragStart={this.handleDragStart}
+                onDrop={this.handleDrop}
+                onDragOver={this.handleDragOver}
+              >
+                {col.head}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {_.map(_.range(range.begin, range.end), i => {
+            const _special = tableData[i] && tableData[i]._special
+            if (_special)
+              return <SpecialTr key={i} config={config} data={_special} />
+            // 如果项为空对象展现一个占满一行的td
+            const isItemNone = !_.keys(tableData[i]).length
+
+            return (
+              <tr style={{ height: `${customerRowHeight}px` }} key={i}>
+                {isItemNone ? (
+                  <td colSpan='99' />
+                ) : (
+                  _.map(columns, (col, j) => {
+                    return (
+                      <td
+                        key={j}
+                        data-name={getTableColumnName(name, col.index)}
+                        style={{
+                          ...getTdStyle(j, col.style),
+                          ...col.style
+                        }}
+                        className={classNames({
+                          active:
+                            getTableColumnName(name, col.index) ===
+                            printerStore.selected
+                        })}
+                        dangerouslySetInnerHTML={{
+                          __html: col.isSpecialColumn
+                            ? printerStore.templateSpecialDetails(
+                                col,
+                                dataKey,
+                                i
+                              )
+                            : printerStore
+                                .templateFinance(
+                                  col.text,
+                                  dataKey,
+                                  i,
+                                  pageIndex
+                                )
+                                .replace(/\(\)/g, '')
+                        }}
+                      />
+                    )
+                  })
+                )}
+              </tr>
+            )
+          })}
+          {this.props.config.subtotal.isCommutationPlace
+            ? PageSummarySubtotalTr()
+            : subtotalTrPageSummary()}
+        </tbody>
+      </table>
+    )
+  }
+
+  renderEmptyTable() {
+    return (
+      <table>
+        <thead />
+        <tbody>
+          <tr />
+        </tbody>
+      </table>
+    )
+  }
+
+  render() {
+    let {
+      config: { className, dataKey, arrange },
+      name,
+      placeholder,
+      printerStore
+    } = this.props
+    dataKey = getDataKey(dataKey, arrange)
+    const tableData = printerStore.data._table[dataKey] || []
+    const active = printerStore.selectedRegion === name
+
+    return (
+      <div
+        ref={this.ref}
+        className={classNames(
+          'gm-printer-table',
+          'gm-printer-table-classname-' + (className || 'default'),
+          { active }
+        )}
+        data-name={name}
+        data-placeholder={placeholder}
+        onClick={this.handleSelectedRegion}
+      >
+        {tableData.length ? this.renderDefault() : this.renderEmptyTable()}
+      </div>
+    )
+  }
+}
+
+Table.propTypes = {
+  config: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  range: PropTypes.object.isRequired,
+  pageIndex: PropTypes.number.isRequired,
+  placeholder: PropTypes.string,
+  printerStore: PropTypes.object
+}
+
+export default Table

package/src/finance_voucher/components/table_subtotal_tr.js

@@ -0,0 +1,147 @@
+import React from 'react'
+import i18next from '../../../locales'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import { MULTI_SUFFIX } from '../../config'
+import Big from 'big.js'
+import { coverDigit2Uppercase, getDataKey } from '../../util'
+import { observer } from 'mobx-react'
+import { get } from 'mobx'
+
+/**
+ * 每页合计组件,分页计算后,根据range来统计每页合计数据
+ * @param props
+ * @returns {*}
+ */
+const SubtotalTr = props => {
+  const {
+    config: {
+      dataKey,
+      arrange,
+      subtotal,
+      subtotal: {
+        show,
+        isUpperCaseBefore, // 决定小写金额是否在前
+        isUpperLowerCaseSeparate, // 决定大小写金额是否分开在两端
+        style,
+        fields = [
+          {
+            name: i18next.t('出库金额'),
+            valueField: 'real_item_price'
+          }
+        ],
+        displayName = false // 是否展示字段名
+      }
+    },
+    range,
+    printerStore: {
+      config: {
+        financeSpecialConfig: {
+          CapitalPrefix = '大写',
+          LowercasePrefix = '小写'
+        }
+      }
+    },
+    printerStore
+  } = props
+  const tableData = printerStore.data._table[getDataKey(dataKey, arrange)] || []
+  // 计算合计
+  const sumData = (list, field) => {
+    return _.reduce(
+      list,
+      (a, b) => {
+        let result = a
+
+        const _origin = b._origin || {}
+        const _origin2 = b['_origin' + MULTI_SUFFIX] || {}
+
+        result = a.plus(_origin[field] || 0)
+        if (_origin2[field]) {
+          result = result.plus(_origin2[field])
+        }
+        return result
+      },
+      Big(0)
+    ).toFixed(2)
+  }
+
+  // 每页小计
+  // show 是否展示小计，fields<Array> 合计的字段和展现的name，displayName 是否显示名字
+  if (show && printerStore.ready) {
+    const list = tableData.slice(range.begin, range.end)
+
+    const sum = {}
+
+    _.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) {
+        // 大写金额是否在前
+        if (isUpperCaseBefore) {
+          subtotalLeftContent = `${name}${priceUpperCase}`
+          subtotalRightContent = `（${LowercasePrefix || '小写'}：￥${price}）`
+        } else {
+          subtotalLeftContent = `（${LowercasePrefix || '小写'}：￥${price}）`
+          subtotalRightContent = `${name} ${priceUpperCase}`
+        }
+      } else {
+        if (isUpperCaseBefore) {
+          subtotalLeftContent = `${priceUpperCase}`
+          subtotalRightContent = `（${LowercasePrefix || '小写'}：￥${price}）`
+        } else {
+          subtotalLeftContent = `（${LowercasePrefix || '小写'}：￥${price}）`
+          subtotalRightContent = `${priceUpperCase}`
+        }
+      }
+    }
+
+    return (
+      <tr>
+        <td colSpan={99} style={{ ...style, height: '8mm' }}>
+          {/* 大写金额和小写金额分开在表格的两侧，通过控制类名实现，添加类名后，覆盖原来的居中、靠右靠左 */}
+          <div
+            className={
+              isUpperLowerCaseSeparate
+                ? 'gm-printer-subtotal-UpperLowerCaseSeparate-outer'
+                : ''
+            }
+            style={{ margin: '0 30px' }}
+          >
+            {i18next.t(`${CapitalPrefix || '大写'}：`)}
+            {/* {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 {
+    return null
+  }
+}
+
+SubtotalTr.propTypes = {
+  config: PropTypes.object.isRequired,
+  range: PropTypes.object.isRequired,
+  printStore: PropTypes.object
+}
+
+export default observer(SubtotalTr)

package/src/finance_voucher/finance_printer.js

@@ -0,0 +1,312 @@
+import i18next from '../../locales'
+import React from 'react'
+import classNames from 'classnames'
+import { inject, observer, Provider } from 'mobx-react'
+import PropTypes from 'prop-types'
+import PrinterStore from '../printer/store'
+import Page from '../printer/page'
+import _ from 'lodash'
+import Panel from '../printer/panel'
+import Table from './components/table'
+import MergePage from '../printer/merge_page'
+
+// Header Sign Footer 相对特殊，要单独处理
+const Header = props => (
+  <Panel {...props} name='header' placeholder={i18next.t('页眉')} />
+)
+
+const Sign = props => (
+  <Panel
+    {...props}
+    style={{
+      ...props.style,
+      position: 'absolute',
+      left: 0,
+      right: 0
+    }}
+    name='sign'
+    placeholder={i18next.t('签名')}
+  />
+)
+
+Sign.propTypes = {
+  style: PropTypes.object
+}
+
+const Footer = props => (
+  <Panel
+    {...props}
+    style={{
+      ...props.style,
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0
+    }}
+    name='footer'
+    placeholder={i18next.t('页脚')}
+  />
+)
+
+Footer.propTypes = {
+  style: PropTypes.object
+}
+
+@inject('printerStore')
+@observer
+class Printer extends React.Component {
+  constructor(props) {
+    super(props)
+
+    // 无实际意义，辅助 onReady，见 didMount
+    this.state = {}
+
+    props.printerStore.init(props.config, props.data)
+    props.printerStore.setSelected(props.selected)
+    props.printerStore.setSelectedRegion(props.selectedRegion)
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.selected !== this.props.selected) {
+      this.props.printerStore.setSelected(nextProps.selected)
+    }
+    if (nextProps.selectedRegion !== this.props.selectedRegion) {
+      this.props.printerStore.setSelectedRegion(nextProps.selectedRegion)
+    }
+  }
+
+  componentDidMount() {
+    const { printerStore, config } = this.props
+    const batchPrintConfig = config.batchPrintConfig
+
+    // 连续打印不需要计算
+    if (batchPrintConfig !== 2) {
+      // didMount 代表第一次渲染完成
+      printerStore.setReady(true)
+
+      // 开始计算，获取各种数据
+      // printerStore.computedPages()
+      printerStore.financeComputedPages()
+    }
+    // Printer 不是立马就呈现出最终样式，有个过程。这个过程需要时间，什么 ready，不太清楚，估借 setState 来获取过程结束时刻
+    this.setState({}, () => {
+      this.props.onReady()
+    })
+  }
+
+  renderBefore() {
+    const { printerStore } = this.props
+    const { config } = printerStore
+
+    return (
+      <Page isFontFamily>
+        <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 (
+                <Table
+                  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}`}
+                />
+              )
+          }
+        })}
+        <Sign config={config.sign} pageIndex={0} />
+        <Footer config={config.footer} pageIndex={0} />
+      </Page>
+    )
+  }
+
+  renderPage() {
+    const { printerStore } = this.props
+    const { config } = printerStore
+    return (
+      <>
+        {_.map(printerStore.pages, (page, i) => {
+          const isLastPage = i === printerStore.pages.length - 1
+
+          return (
+            <Page key={i} isFontFamily>
+              <Header config={config.header} pageIndex={i} />
+
+              {_.map(page, (panel, ii) => {
+                switch (panel.type) {
+                  case 'table':
+                    return (
+                      <Table
+                        key={`contents.table.${panel.index}.${ii}`}
+                        name={`contents.table.${panel.index}`}
+                        config={config.contents[panel.index]}
+                        range={{
+                          begin: panel.begin,
+                          end: panel.end
+                        }}
+                        placeholder={`${i18next.t('区域')} ${panel.index}`}
+                        pageIndex={i}
+                      />
+                    )
+
+                  default:
+                    return (
+                      <Panel
+                        key={`contents.panel.${panel.index}`}
+                        name={`contents.panel.${panel.index}`}
+                        config={config.contents[panel.index]}
+                        pageIndex={i}
+                        placeholder={`${i18next.t('区域')} ${panel.index}`}
+                      />
+                    )
+                }
+              })}
+              {isLastPage && (
+                <Sign
+                  config={config.sign}
+                  pageIndex={i}
+                  style={{ bottom: config.footer.style.height }}
+                />
+              )}
+              <Footer config={config.footer} pageIndex={i} />
+            </Page>
+          )
+        })}
+      </>
+    )
+  }
+
+  renderMerge() {
+    const { printerStore } = this.props
+    const { config } = printerStore
+
+    return (
+      <MergePage>
+        <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 (
+                <Table
+                  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}`}
+                />
+              )
+          }
+        })}
+        <Sign config={config.sign} pageIndex={0} />
+        <Footer config={config.footer} pageIndex={0} />
+      </MergePage>
+    )
+  }
+
+  doRender() {
+    const { printerStore, config } = this.props
+    // batchPrintConfig: 1 不连续打印（纸张会间断）2 连续打印（纸张连续打，不间断）
+    const batchPrintConfig = config.batchPrintConfig
+    if (batchPrintConfig === 2) {
+      return this.renderMerge()
+    } else {
+      // renderBefore ，拿到各种数据，哪些模块哪些内容放合适位置，切割表格
+      // renderPage，最终渲染打印的页面
+      return !printerStore.ready ? this.renderBefore() : this.renderPage()
+    }
+  }
+
+  render() {
+    const {
+      selected,
+      data,
+      config,
+      onReady,
+      selectedRegion,
+      printerStore,
+      ...rest
+    } = this.props
+
+    const {
+      size: { width },
+      className,
+      style
+    } = printerStore.config.page
+    // batchPrintConfig: 1 不连续打印（纸张会间断）2 连续打印（纸张连续打，不间断）
+    const batchPrintConfig = config.batchPrintConfig
+
+    return (
+      <div
+        {...rest}
+        className={classNames('gm-printer', className)}
+        style={Object.assign({}, style, {
+          width,
+          breakAfter: batchPrintConfig === 2 ? 'auto' : 'always'
+        })}
+      >
+        {this.doRender()}
+      </div>
+    )
+  }
+}
+
+Printer.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  style: PropTypes.object,
+  printerStore: PropTypes.object,
+  selected: PropTypes.string,
+  selectedRegion: PropTypes.string,
+  data: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
+  onReady: PropTypes.func
+}
+
+Printer.defaultProps = {
+  onReady: _.noop
+}
+
+class WithStorePrinter extends React.Component {
+  constructor(props) {
+    super(props)
+    this.printerStore = new PrinterStore()
+  }
+
+  render() {
+    return (
+      <Provider printerStore={this.printerStore}>
+        <Printer {...this.props} />
+      </Provider>
+    )
+  }
+}
+
+export default WithStorePrinter

package/src/index.js

@@ -16,7 +16,8 @@ import {
   doPrint,
   Printer,
   getCSS,
-  getPrintContainerHTML
+  getPrintContainerHTML,
+  doBatchFinancePrint
 } from './printer'
 import { MULTI_SUFFIX, MULTI_SUFFIX3 } from './config'
 
@@ -41,5 +42,6 @@ export {
   getCSS,
   MULTI_SUFFIX,
   MULTI_SUFFIX3,
-  getPrintContainerHTML
+  getPrintContainerHTML,
+  doBatchFinancePrint
 }

package/src/printer/do_print.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import Printer from './printer'
 import getCSS from './get_css'
 import BatchPrinter from './batch_printer'
+import BatchFinancePrinter from '../finance_voucher/components/finance_batch_printer'
 import { isZoom } from 'gm-util'
 import { afterImgAndSvgLoaded } from '../util'
 
@@ -92,6 +93,25 @@ function toDoPrintBatch(list, isPrint = true) {
   })
 }
 
+function toDoPrintFinanceBatch(list, isPrint = true) {
+  return new window.Promise(resolve => {
+    const $app = $printer.contentWindow.document.getElementById('appContainer')
+    ReactDOM.unmountComponentAtNode($app)
+    ReactDOM.render(
+      <BatchFinancePrinter
+        list={list}
+        onReady={() => {
+          afterImgAndSvgLoaded(() => {
+            isPrint && $printer.contentWindow.print()
+            resolve()
+          }, $app)
+        }}
+      />,
+      $app
+    )
+  })
+}
+
 function doPrint({ data, config }, isTest) {
   init({ isTest })
 
@@ -107,6 +127,16 @@ function doBatchPrint(
   return toDoPrintBatch(list, extraCofnig.isPrint)
 }
 
+function doBatchFinancePrint(
+  list,
+  isTest,
+  extraCofnig = { isPrint: true, isTipZoom: true }
+) {
+  init({ isTest, isTipZoom: extraCofnig.isTipZoom })
+
+  return toDoPrintFinanceBatch(list, extraCofnig.isPrint)
+}
+
 /**
  * @description: 获取打印的html
  */
@@ -114,4 +144,4 @@ function getPrintContainerHTML() {
   return $printer.contentWindow.document.getElementsByTagName('html')[0]
     .innerHTML
 }
-export { doPrint, doBatchPrint, getPrintContainerHTML }
+export { doPrint, doBatchPrint, getPrintContainerHTML, doBatchFinancePrint }

package/src/printer/index.js

@@ -1,6 +1,11 @@
 import Printer from './printer'
 import BatchPrinter from './batch_printer'
-import { doPrint, doBatchPrint, getPrintContainerHTML } from './do_print'
+import {
+  doPrint,
+  doBatchPrint,
+  getPrintContainerHTML,
+  doBatchFinancePrint
+} from './do_print'
 import getCSS from './get_css'
 
 export {
@@ -9,5 +14,6 @@ export {
   Printer,
   BatchPrinter,
   getCSS,
-  getPrintContainerHTML
+  getPrintContainerHTML,
+  doBatchFinancePrint
 }

package/src/printer/page.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { inject, observer } from 'mobx-react'
 import { getHeight } from '../util'
+import classNames from 'classnames'
 
 @inject('printerStore')
 @observer
@@ -18,13 +19,14 @@ class Page extends React.Component {
   }
 
   render() {
-    const { children, printerStore } = this.props
+    const { children, printerStore, isFontFamily } = this.props
     const {
       paddingTop,
       paddingRight,
       paddingBottom,
       paddingLeft
     } = printerStore.config.page.gap
+    console.log('isFontFamily', isFontFamily)
 
     const {
       size: { width, height },
@@ -36,7 +38,9 @@ class Page extends React.Component {
     return (
       <div
         ref={this.ref}
-        className='gm-printer-page'
+        className={classNames('gm-printer-page', {
+          'gm-printer-page-fontFamily': isFontFamily
+        })}
         style={{
           ...pageStyle,
           boxSizing: 'content-box',
@@ -60,7 +64,8 @@ class Page extends React.Component {
 }
 
 Page.propTypes = {
-  printerStore: PropTypes.number
+  printerStore: PropTypes.number,
+  isFontFamily: PropTypes.bool
 }
 
 export default Page

package/src/printer/store.js

@@ -397,6 +397,46 @@ class PrinterStore {
     this.remainPageHeight = +Big(this.pageHeight - currentPageHeight).toFixed(0)
   }
 
+  @action
+  financeComputedPages() {
+    // 当前在处理 contents 的索引
+    let index = 0
+    /** 一页承载的内容. [object, object, ...] */
+    let page = []
+    const pageFixLineNum = this.config.financeSpecialConfig.pageFixLineNum
+    while (index < this.config.contents.length) {
+      const content = this.config.contents[index]
+      // debugger
+      const table = this.tablesInfo[`contents.table.${index}`]
+      // 表格行的索引,用于table.slice(begin, end), 分割到不同页面中
+      let begin = 0
+      let end = 0
+
+      if (content.type === 'table') {
+        while (end < table.body.heights.length) {
+          end += pageFixLineNum
+          page.push({
+            type: 'table',
+            index,
+            begin,
+            end
+          })
+          this.pages.push(page)
+          page = []
+          begin = end
+        }
+        index++
+      } else {
+        page.push({
+          type: 'panel',
+          index
+        })
+        index++
+      }
+    }
+    // this.pages.push(page)
+  }
+
   template(text, pageIndex) {
     // 做好保护，出错就返回 text
     try {
@@ -432,6 +472,33 @@ class PrinterStore {
     }
   }
 
+  /**
+   * 配送单的定制化需求:限制表格里的字的个数,超出显示'...'
+   */
+  templateFinance(text, dataKey, index, pageIndex) {
+    // 做好保护，出错就返回 text
+    try {
+      const list = this.data._table[dataKey] || this.data._table.orders
+
+      let res = _.template(text, {
+        interpolate: /{{([\s\S]+?)}}/g
+      })({
+        ...this.data.common,
+        [i18next.t('列')]: list[index],
+        [i18next.t('当前页码')]: pageIndex + 1,
+        [i18next.t('页码总数')]: this.pages.length,
+        price: price // 提供一个价格处理函数
+      })
+      res =
+        text === '{{列.商品名}}' && res.length > 5
+          ? `${res.slice(0, 5)}...`
+          : res
+      return res
+    } catch (err) {
+      return text
+    }
+  }
+
   templateSpecialDetails(col, dataKey, index) {
     // 做好保护，出错就返回 text
     const { specialDetailsKey, text, detailLastColType, separator } = col

package/src/printer/style.lesss

@@ -28,6 +28,10 @@
   }
 }
 
+.gm-printer-page-fontFamily {
+  font-family:STSong
+}
+
 // panel
 .gm-printer-panel {
   position: relative;

package/src/util.js

@@ -141,9 +141,7 @@ const coverDigit2Uppercase = n => {
         )
       ] + fraction[i]
   }
-
-  right = right.replace(/(零分)/, '整').replace(/(零角整)/, '') || '整'
-
+  right = right.replace(/(零分)/, '').replace(/(零角)/, '零')
   n = Math.floor(n)
 
   for (i = 0; i < unit[0].length && n > 0; i++) {
@@ -157,10 +155,10 @@ const coverDigit2Uppercase = n => {
 
   return (
     head +
-    (left.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零') + right).replace(
-      /^整$/,
-      '零元整'
-    )
+    (
+      left.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零') +
+      (right === '零' ? '整' : right)
+    ).replace(/^整$/, '零元整')
   )
 }