gm-printer 10.13.11 → 10.13.12-alpha.2

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

@@ -299,6 +299,46 @@ class PrinterStore {
     this.pages.push(page)
   }
 
+  @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 {
@@ -334,6 +374,30 @@ 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 = res.length > 9 ? `${res.slice(0, 9)}...` : 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;