npm - gm-printer - Versions diffs - 10.28.5 → 10.28.6 - Mend

gm-printer 10.28.5 → 10.28.6

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.

Files changed (16) hide show

package/.github/workflows/release.yml +5 -4
package/build/demo.js +54 -0
package/build/index.html +1 -0
package/package.json +1 -1
package/src/common/editor_customize_config.js +19 -1
package/src/common/editor_select.js +1 -2
package/src/common/editor_store.js +32 -3
package/src/components/index.js +3 -0
package/src/components/radio/Radio.js +76 -0
package/src/components/radio/RadioGroup.js +52 -0
package/src/components/radio/index.js +4 -0
package/src/components/radio/style.less +63 -0
package/src/editor/context_menu.js +1 -0
package/src/printer/printer.js +22 -13
package/src/printer/store.js +38 -15
package/src/printer/table.js +8 -6

package/build/index.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <!doctype html><html><head></head><body><div id="appContainer"></div><script src="/demo.js"></script><script src="/demo.js"></script></body></html>

package/package.json CHANGED Viewed

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

package/src/common/editor_customize_config.js CHANGED Viewed

@@ -9,6 +9,9 @@ import { Flex, Switch } from '../components'
 class EditorCutomizedConfig extends React.Component {
   handleAutoFilling = value => {
     const { editStore } = this.props
+    if (!value) {
+      editStore.setFillIndex(false)
+    }
     editStore.handleChangeTableData(value)
   }
@@ -17,10 +20,15 @@ class EditorCutomizedConfig extends React.Component {
     editStore.setMultiDigitDecimal(value)
   }
+  handleFillIndex = value => {
+    const { editStore } = this.props
+    editStore.setFillIndex(value)
+  }
   render() {
     const {
       editStore,
-      editStore: { isAutoFilling, isMultiDigitDecimal }
+      editStore: { isAutoFilling, isMultiDigitDecimal, fillIndex }
     } = this.props
     // 是table
     if (editStore.computedRegionIsTable) {
@@ -30,6 +38,16 @@ class EditorCutomizedConfig extends React.Component {
             <div>{i18next.t('行数是否自动填充')}：</div>
             <Switch checked={isAutoFilling} onChange={this.handleAutoFilling} />
           </Flex>
+          {isAutoFilling && (
+            <Flex className='gm-padding-top-5 '>
+              <div>{i18next.t('空白行是否填充序号')}：</div>
+              <Switch
+                checked={fillIndex || false}
+                onChange={this.handleFillIndex}
+              />
+            </Flex>
+          )}
           <Flex className='gm-padding-top-5 gm-text-red' column>
             {i18next.t('注意：填充仅支持单栏数据使用')}
           </Flex>

package/src/common/editor_select.js CHANGED Viewed

@@ -1,8 +1,7 @@
 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 { Flex, Option, Select, RadioGroup, Radio } from '../components'
 import { InputWithUnit } from '../common/component'
 import { pageTypeMap, printDirectionList, LONG_PRINT } from '../config'
 import _ from 'lodash'

package/src/common/editor_store.js CHANGED Viewed

@@ -22,6 +22,9 @@ class EditorStore {
   @observable
   remainPageHeihgt = 0
+  @observable
+  fillIndex = 0
   // 初始模板
   originConfig = null
@@ -59,6 +62,24 @@ class EditorStore {
   // 默认table的dataKey
   setTableDataKeyEffect() {} // 改变dataKey后,做的副作用操作
+  @action
+  setFillIndex(value) {
+    const { autoFillConfig } = this.config
+    if (!this.selectedRegion && !autoFillConfig?.checked) return
+    this.fillIndex = value
+    const dataKey =
+      this.computedTableSpecialConfig?.dataKey || autoFillConfig?.dataKey
+    set(this.config, {
+      autoFillConfig: {
+        region: this.selectedRegion || autoFillConfig?.region,
+        dataKey,
+        checked: this.isAutoFilling,
+        // 填充行数字段
+        fillIndex: value
+      }
+    })
+  }
   defaultTableSubtotal = { show: false }
   @action
@@ -165,7 +186,9 @@ class EditorStore {
   getFilledTableData(tableData) {
     const { autoFillConfig } = this.config
     if (!this.selectedRegion && !autoFillConfig?.checked) return []
-    const tr_count = Math.floor(
+    let tr_count = 0
+    tr_count = Math.floor(
       this.remainPageHeihgt / this.computedTableCustomerRowHeight
     )
@@ -184,20 +207,25 @@ class EditorStore {
     if (!this.selectedRegion && !autoFillConfig?.checked) return
     const dataKey =
       this.computedTableSpecialConfig?.dataKey || autoFillConfig?.dataKey
+    // 每次都更新一下？
     const table = this.mockData._table[dataKey]
+    // 赋值一下
     this.setAutoFillingConfig(isAutoFilling)
+    this.setFillIndex(autoFillConfig?.fillIndex || false)
     set(this.config, {
       autoFillConfig: {
         region: this.selectedRegion || autoFillConfig?.region,
         dataKey,
-        checked: isAutoFilling
+        checked: isAutoFilling,
+        // 填充行数字段
+        fillIndex: this.fillIndex
       }
     })
     const hasHadEmptyData = _.some(table, data => data?._isEmptyData)
     // 开关打开，且之前数组不包含空数据，再进行填充
     if (isAutoFilling && !hasHadEmptyData) {
       table.push(...this.getFilledTableData(table))
     }
@@ -227,6 +255,7 @@ class EditorStore {
     this.insertPanel = 'header'
     this.mockData = data
     this.isAutoFilling = false
+    this.fillIndex = false
     this.isMultiDigitDecimal = false
   }

package/src/components/index.js CHANGED Viewed

@@ -5,9 +5,12 @@ import { DropDown, DropDownItem, DropDownItems } from './dropdown'
 import Dialog from './dialog'
 import Switch from './switch'
 import ToolTip from './tooltip'
+import { RadioGroup, Radio } from './radio'
 export {
   Flex,
+  RadioGroup,
+  Radio,
   Select,
   Option,
   Tip,

package/src/components/radio/Radio.js ADDED Viewed

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import classNames from 'classnames'
+import './style.less'
+class Radio extends React.Component {
+  render() {
+    const {
+      value,
+      checked,
+      onChange,
+      onClick,
+      children,
+      inline,
+      block,
+      name,
+      disabled,
+      className,
+      ...rest
+    } = this.props
+    const inner = (
+      <label
+        {...rest}
+        className={classNames(
+          'gm-radio',
+          {
+            'gm-radio-inline': inline,
+            'gm-radio-block': block,
+            disabled
+          },
+          className
+        )}
+      >
+        <input
+          type='radio'
+          className='gm-radio-input'
+          name={name}
+          value={value}
+          checked={checked || false}
+          onChange={onChange}
+          onClick={onClick}
+          disabled={disabled}
+        />
+        <span className='gm-radio-span' />
+        {children}
+      </label>
+    )
+    if (!inline) {
+      return <div>{inner}</div>
+    }
+    return inner
+  }
+}
+Radio.propTypes = {
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  value: PropTypes.any,
+  children: PropTypes.any,
+  disabled: PropTypes.bool,
+  inline: PropTypes.bool,
+  block: PropTypes.bool,
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+Radio.defaultProps = {
+  onChange: _.noop,
+  onClick: _.noop
+}
+export default Radio

package/src/components/radio/RadioGroup.js ADDED Viewed

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import _ from 'lodash'
+import './style.less'
+class RadioGroup extends React.Component {
+  render() {
+    const {
+      onChange,
+      value,
+      inline,
+      className,
+      children,
+      name,
+      ...rest
+    } = this.props
+    return (
+      <div {...rest} className={classNames('gm-radio-group', className)}>
+        {_.map(React.Children.toArray(children), (child, i) => {
+          return React.cloneElement(child, {
+            key: i,
+            index: i,
+            checked: child.props.value === value,
+            inline,
+            onChange: () => {
+              onChange(child.props.value)
+            },
+            name
+          })
+        })}
+      </div>
+    )
+  }
+}
+RadioGroup.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  inline: PropTypes.bool,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+RadioGroup.defaultProps = {
+  onChange: _.noop
+}
+export default RadioGroup

package/src/components/radio/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+import RadioGroup from './RadioGroup'
+import Radio from './Radio'
+export { RadioGroup, Radio }

package/src/components/radio/style.less ADDED Viewed

@@ -0,0 +1,63 @@
+//cover bootstrap.style for radio
+.gm-radio {
+  cursor: pointer;
+  margin: 0;
+  &.gm-radio-block {
+    display: block;
+  }
+  &.gm-radio-inline {
+    display: inline-block;
+    padding-right: 10px;
+  }
+  .gm-radio-input {
+    display: none;
+  }
+  &.disabled {
+    cursor: not-allowed;
+    .gm-radio-input + .gm-radio-span {
+      cursor: not-allowed;
+      border: 1px solid #d4d8d8;
+      background: #eee;
+    }
+    .gm-radio-input:checked + .gm-radio-span {
+      border: 1px solid #d4d8d8;
+      &::after {
+        border: 3px solid #d4d8d8;
+      }
+    }
+  }
+  .gm-radio-input + .gm-radio-span {
+    margin-right: 5px;
+    top: 2px;
+    -webkit-appearance: none;
+    border: 1px solid #d4d8d8;
+    border-radius: 7px;
+    display: inline-block;
+    position: relative;
+    width: 14px;
+    height: 14px;
+  }
+  .gm-radio-input:checked + .gm-radio-span {
+    border: 1px solid #56a3f2;
+    &::after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
+      top: 2px;
+      left: 2px;
+      border-radius: 4px;
+      border: 4px solid #56a3f2;
+    }
+  }
+}

package/src/editor/context_menu.js CHANGED Viewed

@@ -199,6 +199,7 @@ class ContextMenu extends React.Component {
           selected={editStore.selected}
           selectedRegion={editStore.selectedRegion}
           isAutoFilling={editStore.isAutoFilling}
+          fillIndex={editStore.fillIndex}
           lineheight={editStore.computedTableCustomerRowHeight}
           config={editStore.config}
           data={editStore.mockData}

package/src/printer/printer.js CHANGED Viewed

@@ -11,6 +11,7 @@ import Table from './table'
 import LongPrintTable from './long_print_table'
 import MergePage from './merge_page'
 import { LONG_PRINT } from '../config'
+import Big from 'big.js'
 // Header Sign Footer 相对特殊，要单独处理
 const Header = props => (
@@ -72,12 +73,19 @@ class Printer extends React.Component {
     if (nextProps.selectedRegion !== this.props.selectedRegion) {
       this.props.printerStore.setSelectedRegion(nextProps.selectedRegion)
     }
-    if (nextProps.isAutoFilling !== this.props.isAutoFilling) {
+    if (
+      nextProps.isAutoFilling !== this.props.isAutoFilling ||
+      nextProps.fillIndex !== this.props.printerStore.fillIndex
+    ) {
       await this.props.printerStore.setAutofillConfig(nextProps.isAutoFilling)
+      await this.props.printerStore.setFillIndex(nextProps.fillIndex)
       await this.props.printerStore.setData(nextProps.data)
       await this.props.printerStore.setReady(true)
+      await this.props.printerStore.changeTableData()
       await this.props.printerStore.computedPages()
     }
     if (nextProps.lineheight !== this.props.lineheight) {
       await this.props.getremainpageHeight(
         this.props.printerStore.remainPageHeight
@@ -95,20 +103,22 @@ class Printer extends React.Component {
     if (batchPrintConfig !== 2) {
       // didMount 代表第一次渲染完成
       printerStore.setReady(true)
-      // 开始计算，获取各种数据
       printerStore.computedPages()
       if (config.autoFillConfig?.checked) {
         this.props.printerStore.setAutofillConfig(
           config.autoFillConfig?.checked || false
         )
-        this.props.printerStore.changeTableData()
+        this.props.printerStore.setFillIndex(
+          config.autoFillConfig?.fillIndex || false
+        )
+        printerStore.changeTableData()
       }
+      // 开始计算，获取各种数据
+      // 如果是自适应要先计算高度，在算出行数 不是自适应就先计算行数 在计算高度
       // 获取剩余空白高度，传到editor
       getremainpageHeight && getremainpageHeight(printerStore.remainPageHeight)
     }
     // Printer 不是立马就呈现出最终样式，有个过程。这个过程需要时间，什么 ready，不太清楚，估借 setState 来获取过程结束时刻
     this.setState({}, () => {
       this.props.onReady()
@@ -225,11 +235,9 @@ class Printer extends React.Component {
       <>
         {_.map(printerStore.pages, (page, i) => {
           const isLastPage = i === printerStore.pages.length - 1
           return (
             <Page key={i}>
               <Header config={config.header} pageIndex={i} />
               {_.map(page, (panel, ii) => {
                 const content = config.contents[panel.index]
                 const autoFillConfig = config?.autoFillConfig || {}
@@ -238,14 +246,14 @@ class Printer extends React.Component {
                   isAutoFilling &&
                   panel.end &&
                   content?.dataKey === autoFillConfig?.dataKey
-                const end = isAutofillConfig
-                  ? panel.end +
-                    Math.floor(
+                const endList = isAutofillConfig
+                  ? Math.floor(
                       remainPageHeight /
                         printerStore.computedTableCustomerRowHeight
                     )
-                  : panel.end
+                  : 0
+                const end = +Big(panel?.end || 0).add(endList)
                 switch (panel.type) {
                   case 'table':
                     return (
@@ -391,6 +399,7 @@ Printer.propTypes = {
   selected: PropTypes.string,
   selectedRegion: PropTypes.string,
   isAutoFilling: PropTypes.bool,
+  fillIndex: PropTypes.number,
   lineheight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   data: PropTypes.object.isRequired,
   config: PropTypes.object.isRequired,

package/src/printer/store.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import i18next from '../../locales'
-import { action, observable, computed } from 'mobx'
+import { action, observable, computed, toJS } from 'mobx'
 import {
   getSumTrHeight,
   isMultiTable,
@@ -48,6 +48,10 @@ class PrinterStore {
   @observable
   isAutoFilling = false
+  // 是否自动行数填充
+  @observable
+  fillIndex = false
   /** 是否开启多位小数，默认不开启，取两位 */
   @observable
   isMultiDigitDecimal = false
@@ -72,6 +76,14 @@ class PrinterStore {
   @action
   setAutofillConfig(bol) {
     this.isAutoFilling = bol
+    if (!bol) {
+      this.fillIndex = false
+    }
+  }
+  @action
+  setFillIndex(value) {
+    this.fillIndex = value
   }
   @action
@@ -110,11 +122,11 @@ class PrinterStore {
     return tableConfig
   }
+  @computed
   get tableData() {
     if (!this.tableConfig) return []
     const { autoFillConfig } = this.config
     const { dataKey } = this.tableConfig
     if (autoFillConfig?.region) {
       /** 当前数据 */
       return this.data._table[dataKey] || []
@@ -125,7 +137,7 @@ class PrinterStore {
     return this.data._table[dataKey] || []
   }
-  // 空数据的长度
+  @computed // 空数据的长度
   get filledTableLen() {
     const filledData = this.tableData.filter(x => x._isEmptyData)
     return filledData.length
@@ -158,15 +170,12 @@ class PrinterStore {
   getNormalTableBodyHeights(heights, dataKey) {
     if (!this.tableConfig) return heights
     const len = this.tableData.length
     // 如果是已经开了填充配置，回显的heights包括了填充的表格部分，关闭配置时，这种情况就要去掉填充的
     if (_.gt(heights.length, len)) return heights.slice(0, len)
     const hasEmptyData = this.tableData.some(x => x._isEmptyData)
     const isOrderCategroy = dataKey === this.config?.autoFillConfig?.dataKey
     const { customerRowHeight = TR_BASE_HEIGHT } = this.tableConfig
     if (hasEmptyData && !this.isAutoFilling && isOrderCategroy) {
       // 如果tableData有填充的空数据， 则去掉
       return heights.slice(0, -this.filledTableLen)
@@ -194,7 +203,6 @@ class PrinterStore {
   computedData(dataKey, table, end, currentRemainTableHeight) {
     /** 当前数据 */
     const tableData = this.data._table[dataKey] || []
     let count = 0
     _.forEach(Array(end).fill(1), (val, i) => {
       const details = tableData[i]?.__details || []
@@ -238,11 +246,9 @@ class PrinterStore {
         return _tableData
       }
     )
     // 插入原table数据中
     tableData.splice(end, 1, ...splitTableData)
     this.data._table[dataKey] = tableData
     return detailsPageHeight
   }
@@ -300,7 +306,6 @@ class PrinterStore {
         let pageAccomodateTableHeight = +new Big(this.pageHeight)
           .minus(currentPageHeight)
           .toFixed(2)
         const heights = this.getNormalTableBodyHeights(
           table.body.heights,
           dataKey
@@ -320,7 +325,6 @@ class PrinterStore {
           let currentRemainTableHeight = 0
           /** 去最小的tr高度，用于下面的计算compare,(避免特殊情况：一般来说最小tr——height = 23, 比23还小的不考虑计算) */
           const minHeight = Math.max(getArrayMid(heights), 23)
           /* 遍历表格每一行，填充表格内容 */
           while (end < heights.length) {
             currentTableHeight += heights[end]
@@ -416,6 +420,7 @@ class PrinterStore {
         if (index === this.config.contents.length - 1) {
           currentPageHeight += this.height?.sign
         }
         if (currentPageHeight <= this.pageHeight) {
           // 空间充足，把信息加入 page，并轮下一个contents
           page.push({
@@ -435,7 +440,6 @@ class PrinterStore {
       }
     }
     this.pages.push(page)
     this.remainPageHeight = +Big(this.pageHeight - currentPageHeight).toFixed(0)
   }
@@ -499,14 +503,17 @@ class PrinterStore {
     // 做好保护，出错就返回 text
     try {
       let list = this.data._table[dataKey] || this.data._table.orders
       // 采购任务打印存在两个表格，第二表格没有明细，数据需要做去重
       if (dataKey === 'purchase_no_detail') {
         list = _.uniqBy(list, '序号')
       }
       return _.template(text, {
         interpolate: /{{([\s\S]+?)}}/g
       })({
         ...this.data.common,
         [i18next.t('列')]: list[index],
         [i18next.t('当前页码')]: pageIndex + 1,
         [i18next.t('页码总数')]: this.pages.length,
@@ -590,6 +597,8 @@ class PrinterStore {
     _.map(tableData[0], (val, key) => {
       filledData[key] = ''
     })
+    console.log(tr_count, 'tr_count')
     return Array(tr_count).fill(filledData)
   }
@@ -598,9 +607,23 @@ class PrinterStore {
     const { autoFillConfig } = this.config
     if (!this.isAutoFilling) return
     const dataKey = autoFillConfig?.dataKey
-    const table = this.data._table[dataKey]
-    table.push(...this.getFilledTableData(table))
+    const table = this.data._table[dataKey]?.filter(item => !item._isEmptyData)
+    const emptyTable = this.data._table[dataKey]?.filter(
+      item => item._isEmptyData
+    )
+    const lastKey = _.findLast(table, item => item?.序号)?.序号 + 1
+    const fillList = _.map(
+      emptyTable?.length === 0 ? this.getFilledTableData(table) : emptyTable,
+      (item, index) => {
+        if (this.fillIndex) {
+          return { ...item, 序号: index + lastKey }
+        } else {
+          return { ...item, 序号: '' }
+        }
+      }
+    )
+    console.log(fillList, 'fillList')
+    table.push(...fillList)
     this.data._table[dataKey] = table
   }
 }

package/src/printer/table.js CHANGED Viewed

@@ -19,6 +19,7 @@ import SubtotalTr from './table_subtotal_tr'
 import PageSummary from './page_summary'
 import OverallOrder from './table_overallOrder_tr'
 import DiyOverallOrder from './table_diy_overallOrder_tr'
+import { toJS } from 'mobx'
 @inject('printerStore')
 @observer
@@ -40,7 +41,7 @@ class Table extends React.Component {
       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, {
@@ -168,11 +169,9 @@ class Table extends React.Component {
       printerStore,
       isSomeSubtotalTr
     } = this.props
     // 数据
     dataKey = getDataKey(dataKey, arrange)
     const tableData = printerStore.data._table[dataKey] || []
     // 列
     const columns = this.getColumns()
     // 列宽固定(避免跳页bug)
@@ -225,7 +224,6 @@ class Table extends React.Component {
       }
       return tdStyle
     }
     return (
       <table
         style={{
@@ -261,6 +259,7 @@ class Table extends React.Component {
             ))}
           </tr>
         </thead>
         <tbody>
           {_.map(_.range(range.begin, range.end), i => {
             const _special = tableData[i] && tableData[i]._special
@@ -271,11 +270,14 @@ class Table extends React.Component {
               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' />
+                  !printerStore?.isAutoFilling ? (
+                    <td colSpan='99' />
+                  ) : (
+                    <></>
+                  )
                 ) : (
                   _.map(columns, (col, j) => {
                     return (