gm-printer 10.26.0 → 10.27.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gm-printer",
-  "version": "10.26.0",
+  "version": "10.27.0-beta.0",
   "description": "diy printer",
   "main": "src/index.js",
   "scripts": {

package/src/common/editor_edit_field.js

@@ -72,6 +72,11 @@ class EditorField extends React.Component {
     editStore.setSpecialStyle(value)
   }
 
+  handleCategoryStyleChange = value => {
+    const { editStore } = this.props
+    editStore.setCategoryStyle(value)
+  }
+
   handleSubtotalStyleChange = value => {
     const { editStore } = this.props
     editStore.setSubtotalStyle(value)
@@ -202,6 +207,9 @@ class EditorField extends React.Component {
       diyOverallOrder
     } = editStore.computedTableSpecialConfig
 
+    // 新分类
+    const categoryStyle =
+      toJS(editStore.computedTableSpecialConfig)?.categoryConfig?.style || {}
     // 小计样式,specialConfig可能是undefined
     const specialStyle =
       toJS(editStore.computedTableSpecialConfig)?.specialConfig?.style || {}
@@ -417,6 +425,19 @@ class EditorField extends React.Component {
         />
         <Gap />
 
+        <Flex>
+          <Flex>{i18next.t('分类设置')}：</Flex>
+          <Fonter
+            style={categoryStyle}
+            onChange={this.handleCategoryStyleChange}
+          />
+          <Separator />
+          <TextAlign
+            style={categoryStyle}
+            onChange={this.handleCategoryStyleChange}
+          />
+        </Flex>
+
         <Flex>
           <Flex>{i18next.t('小计设置')}：</Flex>
           <Fonter

package/src/common/editor_store.js

@@ -602,6 +602,26 @@ class EditorStore {
     }
   }
 
+  @action
+  setCategoryConfigShow(name) {
+    const arr = name.split('.')
+    const table = this.config.contents[arr[2]]
+    this.overallOrderShow = !this.overallOrderShow
+    // 切换的时候，要把对应table的多余空数据清掉
+    this.clearExtraTableData(table.dataKey)
+
+    // 兼容存在后端的模板
+    if (!table?.categoryConfig) {
+      set(table, {
+        categoryConfig: {
+          show: true,
+          style: { fontWeight: 'bold' },
+          type: 'categoryConfig'
+        }
+      })
+    }
+  }
+
   @action
   subtotalRadioCheck(fields) {
     if (this.selectedRegion) {
@@ -740,6 +760,7 @@ class EditorStore {
     newDataKey = _.sortBy(newDataKey, [
       o => o === 'multi3',
       o => o === 'multi',
+      o => o === 'newCategory',
       o => o === 'category',
       o => o === 'orders'
     ])
@@ -1119,6 +1140,27 @@ class EditorStore {
     }
   }
 
+  // 设置新模版样式
+  @action.bound
+  setCategoryStyle(value) {
+    if (this.selectedRegion) {
+      this.overallOrderShow = !this.overallOrderShow
+      const arr = this.selectedRegion.split('.')
+      const tableConfig = this.config.contents[arr[2]]
+
+      const oldStyle = tableConfig?.categoryConfig
+        ? tableConfig.categoryConfig.style
+        : {}
+      set(tableConfig?.categoryConfig, {
+        ...(tableConfig?.categoryConfig ?? {}),
+        style: {
+          ...oldStyle,
+          ...value
+        }
+      })
+    }
+  }
+
   @action.bound
   setSpecialUpperCase() {
     if (this.selectedRegion) {

package/src/editor/context_menu.js

@@ -70,6 +70,13 @@ class ContextMenu extends React.Component {
     editStore.setSubtotalShow(name)
   }
 
+  handleCategoryConfig = (key, name) => {
+    const { editStore } = this.props
+    editStore.changeTableDataKey(name, key)
+
+    editStore.setCategoryConfigShow(name)
+  }
+
   handleChangeTableData = isAutoFilling => {
     const { editStore } = this.props
     editStore.handleChangeTableData(isAutoFilling)
@@ -111,6 +118,7 @@ class ContextMenu extends React.Component {
     const isMultiActive = keyArr.includes('multi')
     const isThreeActive = keyArr.includes('multi3')
     const isCategoryActive = keyArr.includes('category')
+    const isNewCategoryActive = keyArr.includes('newCategory')
     const isSubtotalActive = subtotal.show
     const isOverallOrder = overallOrder?.show
     const isDiyOverallOrder = diyOverallOrder?.show
@@ -135,6 +143,12 @@ class ContextMenu extends React.Component {
         <div
           onClick={this.handleChangeTableDataKey.bind(this, 'category', name)}
           className={isCategoryActive ? 'active' : ''}
+        >
+          {i18next.t('分类小计')}
+        </div>
+        <div
+          onClick={this.handleCategoryConfig.bind(this, 'newCategory', name)}
+          className={isNewCategoryActive ? 'active' : ''}
         >
           {i18next.t('商品分类')}
         </div>

package/src/printer/table.js

@@ -14,6 +14,7 @@ import { inject, observer } from 'mobx-react'
 import classNames from 'classnames'
 import { MULTI_SUFFIX } from '../config'
 import SpecialTr from './table_special_tr'
+import CategoryTr from './table_category_tr'
 import SubtotalTr from './table_subtotal_tr'
 import PageSummary from './page_summary'
 import OverallOrder from './table_overallOrder_tr'
@@ -114,11 +115,10 @@ class Table extends React.Component {
           const data = {
             ...val,
             index,
-            // 先匹配 {{ }}模版中的
             text: val.text.replace(/{{(.*?)}}/g, s => {
               // 再匹配 列.xxx 相关的
               s = s.replace(
-                /(列.[\u4e00-\u9fa5]*[0-9A-Za-z_]?[\u4e00-\u9fa5]*[A-Za-z_]*[\u4e00-\u9fa5]*)/g,
+                /(列.[\u4e00-\u9fa5]*[0-9A-Za-z_]*[\u4e00-\u9fa5]*[A-Za-z_]*[\u4e00-\u9fa5]*)/g,
                 m => m + `${MULTI_SUFFIX}${colNum}`
               )
               return s
@@ -264,6 +264,9 @@ class Table extends React.Component {
         <tbody>
           {_.map(_.range(range.begin, range.end), i => {
             const _special = tableData[i] && tableData[i]._special
+            const _specialText = tableData[i] && tableData[i]._specialText
+            if (_specialText)
+              return <CategoryTr key={i} config={config} data={_specialText} />
             if (_special)
               return <SpecialTr key={i} config={config} data={_special} />
             // 如果项为空对象展现一个占满一行的td
@@ -291,13 +294,13 @@ class Table extends React.Component {
                         dangerouslySetInnerHTML={{
                           __html: col.isSpecialColumn
                             ? printerStore.templateSpecialDetails(
-                              col,
-                              dataKey,
-                              i
-                            )
+                                col,
+                                dataKey,
+                                i
+                              )
                             : printerStore
-                              .templateTable(col.text, dataKey, i, pageIndex)
-                              .replace(/\(\)/g, '')
+                                .templateTable(col.text, dataKey, i, pageIndex)
+                                .replace(/\(\)/g, '')
                         }}
                       />
                     )

package/src/printer/table_category_tr.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { observer } from 'mobx-react'
+
+const CategoryTr = props => {
+  const {
+    config: { categoryConfig },
+    data
+  } = props
+  return (
+    <tr>
+      <td colSpan='99'>
+        <div style={{ ...categoryConfig?.style }}>{data?.text ?? '11'}</div>
+      </td>
+    </tr>
+  )
+}
+CategoryTr.propTypes = {
+  config: PropTypes.object.isRequired,
+  data: PropTypes.object
+}
+
+export default observer(CategoryTr)