npm - gm-printer - Versions diffs - 10.28.2 → 10.28.4-beta.4 - Mend

gm-printer 10.28.2 → 10.28.4-beta.4

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 (18) 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 +47 -2
package/src/common/editor_select.js +1 -2
package/src/common/editor_store.js +63 -5
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 +2 -0
package/src/printer/printer.js +47 -15
package/src/printer/store.js +62 -18
package/src/printer/style.lesss +5 -8
package/src/printer/table.js +8 -6
package/.eslintcache +0 -1

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.2",
+  "version": "10.28.4-beta.4",
   "description": "diy printer",
   "main": "src/index.js",
   "scripts": {

package/src/common/editor_customize_config.js CHANGED Viewed

@@ -2,13 +2,25 @@ import i18next from '../../locales'
 import { inject, observer } from 'mobx-react'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Flex, Switch } from '../components'
+import { Flex, Switch, Select, Option } from '../components'
+import _ from 'lodash'
+const initOptionsList = [
+  { name: i18next.t('自适应'), value: 0 },
+  { name: i18next.t('20行'), value: 20 },
+  { name: i18next.t('30行'), value: 30 },
+  { name: i18next.t('40行'), value: 40 }
+]
 @inject('editStore')
 @observer
 class EditorCutomizedConfig extends React.Component {
   handleAutoFilling = value => {
     const { editStore } = this.props
+    editStore.setFillRowValue(0)
+    if (!value) {
+      editStore.setFillIndex(false)
+    }
     editStore.handleChangeTableData(value)
   }
@@ -17,10 +29,21 @@ class EditorCutomizedConfig extends React.Component {
     editStore.setMultiDigitDecimal(value)
   }
+  handleFillRowValue = value => {
+    const { editStore } = this.props
+    editStore.setFillRowValue(value)
+    editStore.handleChangeTableData(true)
+  }
+  handleFillIndex = value => {
+    const { editStore } = this.props
+    editStore.setFillIndex(value)
+  }
   render() {
     const {
       editStore,
-      editStore: { isAutoFilling, isMultiDigitDecimal }
+      editStore: { isAutoFilling, isMultiDigitDecimal, fillRowValue, fillIndex }
     } = this.props
     // 是table
     if (editStore.computedRegionIsTable) {
@@ -29,7 +52,29 @@ class EditorCutomizedConfig extends React.Component {
           <Flex alignCenter className='gm-padding-top-5'>
             <div>{i18next.t('行数是否自动填充')}：</div>
             <Switch checked={isAutoFilling} onChange={this.handleAutoFilling} />
+            {isAutoFilling && (
+              <Select
+                value={fillRowValue}
+                onChange={this.handleFillRowValue}
+                options={initOptionsList}
+              >
+                {_.map(initOptionsList, (v, k) => (
+                  <Option key={k} value={v.value}>
+                    {v.name}
+                  </Option>
+                ))}
+              </Select>
+            )}
+          </Flex>
+          <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,12 @@ class EditorStore {
   @observable
   remainPageHeihgt = 0
+  @observable
+  fillRowValue = 0
+  @observable
+  fillIndex = 0
   // 初始模板
   originConfig = null
@@ -59,6 +65,44 @@ class EditorStore {
   // 默认table的dataKey
   setTableDataKeyEffect() {} // 改变dataKey后,做的副作用操作
+  @action
+  setFillRowValue(value) {
+    const { autoFillConfig } = this.config
+    if (!this.selectedRegion && !autoFillConfig?.checked) return
+    this.fillRowValue = value
+    const dataKey =
+      this.computedTableSpecialConfig?.dataKey || autoFillConfig?.dataKey
+    set(this.config, {
+      autoFillConfig: {
+        region: this.selectedRegion || autoFillConfig?.region,
+        dataKey,
+        checked: this.isAutoFilling,
+        // 填充行数字段
+        fillRowValue: this.fillRowValue,
+        fillIndex: this.fillIndex
+      }
+    })
+  }
+  @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,
+        // 填充行数字段
+        fillRowValue: this.fillRowValue,
+        fillIndex: value
+      }
+    })
+  }
   defaultTableSubtotal = { show: false }
   @action
@@ -165,9 +209,14 @@ class EditorStore {
   getFilledTableData(tableData) {
     const { autoFillConfig } = this.config
     if (!this.selectedRegion && !autoFillConfig?.checked) return []
-    const tr_count = Math.floor(
-      this.remainPageHeihgt / this.computedTableCustomerRowHeight
-    )
+    let tr_count = 0
+    if (this.fillRowValue === 0) {
+      tr_count = Math.floor(
+        this.remainPageHeihgt / this.computedTableCustomerRowHeight
+      )
+    } else {
+      tr_count = this.fillRowValue
+    }
     const filledData = {
       _isEmptyData: true // 表示是填充的空白数据
@@ -184,20 +233,27 @@ 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.setFillRowValue(autoFillConfig?.fillRowValue || 0)
+    this.setFillIndex(autoFillConfig?.fillIndex || false)
     set(this.config, {
       autoFillConfig: {
         region: this.selectedRegion || autoFillConfig?.region,
         dataKey,
-        checked: isAutoFilling
+        checked: isAutoFilling,
+        // 填充行数字段
+        fillRowValue: this.fillRowValue,
+        fillIndex: this.fillIndex
       }
     })
     const hasHadEmptyData = _.some(table, data => data?._isEmptyData)
     // 开关打开，且之前数组不包含空数据，再进行填充
     if (isAutoFilling && !hasHadEmptyData) {
       table.push(...this.getFilledTableData(table))
     }
@@ -227,6 +283,8 @@ class EditorStore {
     this.insertPanel = 'header'
     this.mockData = data
     this.isAutoFilling = false
+    this.fillRowValue = 0
+    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,8 @@ class ContextMenu extends React.Component {
           selected={editStore.selected}
           selectedRegion={editStore.selectedRegion}
           isAutoFilling={editStore.isAutoFilling}
+          fillRowValue={editStore.fillRowValue}
+          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,26 @@ 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.fillRowValue !== this.props.printerStore.fillRowValue ||
+      nextProps.fillIndex !== this.props.printerStore.fillIndex
+    ) {
       await this.props.printerStore.setAutofillConfig(nextProps.isAutoFilling)
+      await this.props.printerStore.setFillRowValue(nextProps.fillRowValue)
+      await this.props.printerStore.setFillIndex(nextProps.fillIndex)
       await this.props.printerStore.setData(nextProps.data)
       await this.props.printerStore.setReady(true)
+      if (nextProps.fillRowValue === 0) {
+        // 自适应要先reset一下 在计算高度
+        await this.props.printerStore.resetTableData()
+        await this.props.printerStore.computedPages()
+      }
+      await this.props.printerStore.changeTableData()
       await this.props.printerStore.computedPages()
     }
     if (nextProps.lineheight !== this.props.lineheight) {
       await this.props.getremainpageHeight(
         this.props.printerStore.remainPageHeight
@@ -96,19 +111,30 @@ class Printer extends React.Component {
       // 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.setFillRowValue(
+          config.autoFillConfig?.fillRowValue || 0
+        )
+        this.props.printerStore.setFillIndex(
+          config.autoFillConfig?.fillIndex || false
+        )
+      }
+      // 开始计算，获取各种数据
+      // 如果是自适应要先计算高度，在算出行数 不是自适应就先计算行数 在计算高度
+      if (config.autoFillConfig?.fillRowValue === 0) {
+        printerStore.computedPages()
+        printerStore.changeTableData()
+      } else {
+        printerStore.changeTableData()
+        printerStore.computedPages()
       }
       // 获取剩余空白高度，传到editor
       getremainpageHeight && getremainpageHeight(printerStore.remainPageHeight)
     }
     // Printer 不是立马就呈现出最终样式，有个过程。这个过程需要时间，什么 ready，不太清楚，估借 setState 来获取过程结束时刻
     this.setState({}, () => {
       this.props.onReady()
@@ -220,16 +246,19 @@ class Printer extends React.Component {
   renderPage() {
     const { printerStore, isSomeSubtotalTr } = this.props
-    const { config, remainPageHeight, isAutoFilling } = printerStore
+    const {
+      config,
+      remainPageHeight,
+      isAutoFilling,
+      fillRowValue
+    } = printerStore
     return (
       <>
         {_.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 || {}
@@ -237,15 +266,16 @@ class Printer extends React.Component {
                   isLastPage &&
                   isAutoFilling &&
                   panel.end &&
-                  content?.dataKey === autoFillConfig?.dataKey
-                const end = isAutofillConfig
-                  ? panel.end +
-                    Math.floor(
+                  content?.dataKey === autoFillConfig?.dataKey &&
+                  fillRowValue === 0
+                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 +421,8 @@ Printer.propTypes = {
   selected: PropTypes.string,
   selectedRegion: PropTypes.string,
   isAutoFilling: PropTypes.bool,
+  fillRowValue: PropTypes.number,
+  fillIndex: PropTypes.number,
   lineheight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   data: PropTypes.object.isRequired,
   config: PropTypes.object.isRequired,