gm-printer 10.34.0 → 10.35.0

package/package.json

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

package/src/common/diy_summary_helper.js

@@ -0,0 +1,223 @@
+import { set, toJS } from 'mobx'
+import _ from 'lodash'
+
+/**
+ * 创建自定义合计功能的通用方法体（不包含装饰器）
+ * @param {string} configKey - 配置键名，如 'diyOverallOrder', 'diySubtotal', 'diyTagSubtotal'
+ * @param {string} defaultName - 默认名称，如 '自定义整单合计', '自定义每页合计'
+ * @returns {Object} 包含所有方法体的对象
+ */
+export function createDiySummaryStoreMethods(configKey, defaultName) {
+  // 将 configKey 转换为方法名格式，如 'diyOverallOrder' -> 'DiyOverallOrder'
+  const methodName = configKey
+    .split(/(?=[A-Z])/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('')
+
+  return {
+    // 显示/隐藏
+    [`set${methodName}Show`]: function(name, show) {
+      const arr = name.split('.')
+      const table = this.config.contents[arr[2]]
+
+      this.overallOrderShow = !this.overallOrderShow
+      if (table[configKey]) {
+        set(table[configKey], {
+          show: show ?? !table[configKey].show
+        })
+      } else {
+        set(table, {
+          [configKey]: {
+            show: true,
+            fields: [
+              {
+                name: `${defaultName}：`,
+                valueField: '{{列.出库金额}}',
+                style: { fontWeight: 'bold' },
+                rightName: `${defaultName}：`
+              }
+            ]
+          }
+        })
+      }
+      this.config = toJS(this.config)
+    },
+
+    // 样式设置
+    [`set${methodName}Style`]: function(value) {
+      if (this.selectedRegion) {
+        const flexStyle = {
+          left: 'flex-start',
+          center: 'center',
+          right: 'flex-end'
+        }
+        const arr = this.selectedRegion.split('.')
+        const configFields = this.config.contents[arr[2]]?.[configKey].fields
+        _.forEach(configFields, item => {
+          const oldStyle = item.style || {}
+          set(item, {
+            style: {
+              ...oldStyle,
+              ...value,
+              'justify-content': flexStyle[value.textAlign]
+            }
+          })
+        })
+      }
+    },
+
+    // 设置大写金额
+    [`set${methodName}UpperCase`]: function() {
+      if (this.selectedRegion) {
+        this.overallOrderShow = !this.overallOrderShow
+        const arr = this.selectedRegion.split('.')
+        const config = this.config.contents[arr[2]]?.[configKey]
+
+        const oldNeedUpperCase = config?.needUpperCase
+        this.config.contents[arr[2]]?.[configKey] &&
+          set(config, { needUpperCase: !oldNeedUpperCase })
+        if (
+          this.config.contents[arr[2]]?.[configKey] &&
+          config.needUpperCase === false
+        ) {
+          config.isUpperCaseBefore && set(config, { isUpperCaseBefore: false })
+          config.isUpperLowerCaseSeparate &&
+            set(config, { isUpperLowerCaseSeparate: false })
+        }
+      }
+    },
+
+    // 设置大写金额在前
+    [`set${methodName}UpperCaseBefore`]: function() {
+      if (this.selectedRegion) {
+        this.overallOrderShow = !this.overallOrderShow
+        const arr = this.selectedRegion.split('.')
+        const config = this.config.contents[arr[2]]?.[configKey]
+
+        const oldUpperCaseBefore = config?.isUpperCaseBefore
+        this.config.contents[arr[2]]?.[configKey] &&
+          set(config, { isUpperCaseBefore: !oldUpperCaseBefore })
+      }
+    },
+
+    // 设置大小写金额分开
+    [`set${methodName}UpperLowerCaseSeparate`]: function() {
+      if (this.selectedRegion) {
+        this.overallOrderShow = !this.overallOrderShow
+        const arr = this.selectedRegion.split('.')
+        const config = this.config.contents[arr[2]]?.[configKey]
+
+        const oldUpperLowerCaseSeparate = config.isUpperLowerCaseSeparate
+        set(config, {
+          isUpperLowerCaseSeparate: !oldUpperLowerCaseSeparate
+        })
+      }
+    },
+
+    // 字段设置
+    [`set${methodName}ValueField`]: function(value) {
+      if (this.selectedRegion) {
+        this.overallOrderShow = !this.overallOrderShow
+        const arr = this.selectedRegion.split('.')
+        const config = this.config.contents[arr[2]]?.[configKey]
+
+        const oldValueField = config.fields?.[0]
+        set(oldValueField, {
+          valueField: value
+        })
+      }
+    },
+
+    // 文案设置
+    [`set${methodName}Fields`]: function(value, isModifyRightText) {
+      if (this.selectedRegion) {
+        this.overallOrderShow = !this.overallOrderShow
+        const arr = this.selectedRegion.split('.')
+        const table = this.config.contents[arr[2]]
+        const config = table?.[configKey]
+
+        if (!config.fields) {
+          config.fields = []
+        }
+        if (!config.fields[0]) {
+          config.fields = [
+            {
+              name: `${defaultName}：`,
+              valueField: '{{列.出库金额}}',
+              style: { fontWeight: 'bold' },
+              rightName: `${defaultName}：`
+            }
+          ]
+        }
+
+        const targetField = config.fields[0]
+        if (!isModifyRightText) {
+          set(targetField, { name: value })
+        } else {
+          set(targetField, { rightName: value })
+        }
+      }
+    }
+  }
+}
+
+/**
+ * 创建自定义合计功能的 UI 渲染函数（Editor 层）
+ * @param {Object} params - 配置参数
+ * @param {string} params.configKey - 配置键名
+ * @param {string} params.label - 显示标签
+ * @param {string} params.placeholder - 输入框占位符
+ * @param {string} params.showConfigKey - config 中控制显示的键名，如 'showDiyOverAllOrder'
+ * @returns {Function} 返回渲染函数
+ */
+export function createDiySummaryEditorRender({
+  configKey,
+  label,
+  placeholder,
+  showConfigKey
+}) {
+  return function(editStore, handleStyleChange) {
+    const diyConfig = editStore.computedTableSpecialConfig?.[configKey]
+    const style = (diyConfig && diyConfig?.fields?.[0]?.style) || {}
+    const needUpperCase =
+      (editStore.computedTableSpecialConfig?.[configKey] &&
+        diyConfig?.needUpperCase) ||
+      false
+    const caseBefore =
+      (editStore.computedTableSpecialConfig?.[configKey] &&
+        diyConfig?.isUpperCaseBefore) ||
+      false
+    const upperLowerCaseSeparate = diyConfig?.isUpperLowerCaseSeparate || false
+    const valueField =
+      editStore.computedTableSpecialConfig?.[configKey]?.fields?.[0]?.valueField
+
+    const methodName = configKey
+      .split(/(?=[A-Z])/)
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('')
+
+    const setStyleMethod = editStore[`set${methodName}Style`]
+    const setUpperCaseMethod = editStore[`set${methodName}UpperCase`]
+    const setUpperCaseBeforeMethod =
+      editStore[`set${methodName}UpperCaseBefore`]
+    const setUpperLowerCaseSeparateMethod =
+      editStore[`set${methodName}UpperLowerCaseSeparate`]
+    const setValueFieldMethod = editStore[`set${methodName}ValueField`]
+    const setFieldsMethod = editStore[`set${methodName}Fields`]
+
+    return {
+      diyConfig,
+      style,
+      needUpperCase,
+      caseBefore,
+      upperLowerCaseSeparate,
+      valueField,
+      setStyleMethod,
+      setUpperCaseMethod,
+      setUpperCaseBeforeMethod,
+      setUpperLowerCaseSeparateMethod,
+      setValueFieldMethod,
+      setFieldsMethod
+    }
+  }
+}

package/src/common/editor_edit_field.js

@@ -601,6 +601,15 @@ class EditorField extends React.Component {
             />
           </>
         )}
+
+        {this.renderDiySummaryEditor({
+          label: '自定义每页合计',
+          placeholder: '请输入要每页合计字段',
+          showConfigKey: 'showDiySubtotal',
+          configKey: 'diySubtotal',
+          editStore
+        })}
+
         <Flex>
           <Flex>{i18next.t('整单合计')}：</Flex>
           <Fonter
@@ -705,8 +714,8 @@ class EditorField extends React.Component {
                 subtotalCheckText='大、小写金额分左右两边展示'
                 marginLeft
               />
-              <Flex>
-                <Flex alignCenter>文案修改：</Flex>
+              {/* <Flex>
+                <Flex alignCenter>左侧文案修改：</Flex>
                 <Text
                   value={
                     diyOverallOrder && diyOverallOrder?.fields?.[0]
@@ -719,7 +728,28 @@ class EditorField extends React.Component {
                     margin: '5px 0 5px 0px'
                   }}
                 />
-              </Flex>
+              </Flex> */}
+              <EditorText
+                label={i18next.t('左侧文案修改')}
+                value={
+                  diyOverallOrder && diyOverallOrder?.fields?.[0]
+                    ? diyOverallOrder.fields[0].name
+                    : ''
+                }
+                onChange={e =>
+                  editStore.setDiyOverallOrderFields(e.target.value, 0)
+                }
+              />
+              {diyOverallOrder?.isUpperLowerCaseSeparate && (
+                <EditorText
+                  label={i18next.t('右侧文案修改')}
+                  value={diyOverallOrder?.fields?.[0]?.rightName || ''}
+                  onChange={e =>
+                    editStore.setDiyOverallOrderFields(e.target.value, 1)
+                  }
+                />
+              )}
+
               <Textarea
                 value={diyOverallOrderValueField}
                 placeholder={i18next.t('请输入要整单合计字段')}
@@ -802,12 +832,136 @@ class EditorField extends React.Component {
                 />
               </div>
             </Flex>
+
+            {(() => {
+              const { diyCategorySubtotal } =
+                editStore.computedTableSpecialConfig || {}
+
+              const activeConfig = diyCategorySubtotal?.show
+                ? {
+                    showConfigKey: 'showDiyCategorySubtotal',
+                    configKey: 'diyCategorySubtotal'
+                  }
+                : {
+                    showConfigKey: 'showDiyTagSubtotal',
+                    configKey: 'diyTagSubtotal'
+                  }
+
+              return this.renderDiySummaryEditor({
+                ...activeConfig,
+                label: i18next.t('自定义分类/标签小计'),
+                placeholder: '请输入要分类/标签小计字段',
+                editStore
+              })
+            })()}
           </>
         )}
       </div>
     )
   }
 
+  // 通用的自定义合计编辑界面渲染
+  renderDiySummaryEditor({
+    label,
+    placeholder,
+    showConfigKey,
+    configKey,
+    editStore
+  }) {
+    if (
+      showConfigKey &&
+      Object.prototype.hasOwnProperty.call(
+        editStore.config || {},
+        showConfigKey
+      ) &&
+      !editStore.config[showConfigKey]
+    ) {
+      return null
+    }
+
+    const diyConfig = editStore.computedTableSpecialConfig?.[configKey]
+    const style = (diyConfig && diyConfig?.fields?.[0]?.style) || {}
+    const needUpperCase =
+      (editStore.computedTableSpecialConfig?.[configKey] &&
+        diyConfig?.needUpperCase) ||
+      false
+    const caseBefore =
+      (editStore.computedTableSpecialConfig?.[configKey] &&
+        diyConfig?.isUpperCaseBefore) ||
+      false
+    const upperLowerCaseSeparate = diyConfig?.isUpperLowerCaseSeparate || false
+    const valueField =
+      editStore.computedTableSpecialConfig?.[configKey]?.fields?.[0]?.valueField
+
+    const methodName = configKey
+      .split(/(?=[A-Z])/)
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('')
+
+    const setStyleMethod = editStore[`set${methodName}Style`]
+    const setUpperCaseMethod = editStore[`set${methodName}UpperCase`]
+    const setUpperCaseBeforeMethod =
+      editStore[`set${methodName}UpperCaseBefore`]
+    const setUpperLowerCaseSeparateMethod =
+      editStore[`set${methodName}UpperLowerCaseSeparate`]
+    const setValueFieldMethod = editStore[`set${methodName}ValueField`]
+    const setFieldsMethod = editStore[`set${methodName}Fields`]
+
+    return (
+      <Flex>
+        <Flex>{label}：</Flex>
+        <div>
+          <Fonter style={style} onChange={setStyleMethod} />
+          <Separator />
+          <TextAlign style={style} onChange={setStyleMethod} />
+          <EditorSubtotalCheck
+            subtotalCheckDisabled
+            subtotalChecked={needUpperCase}
+            subtotalCheckOnChange={setUpperCaseMethod}
+            subtotalCheckText='显示大写金额'
+            marginLeft
+          />
+          <EditorSubtotalCheck
+            subtotalCheckDisabled={needUpperCase}
+            subtotalChecked={caseBefore}
+            subtotalCheckOnChange={setUpperCaseBeforeMethod}
+            subtotalCheckText='大写金额在前'
+            marginLeft
+          />
+          <EditorSubtotalCheck
+            subtotalCheckDisabled={needUpperCase}
+            subtotalChecked={upperLowerCaseSeparate}
+            subtotalCheckOnChange={setUpperLowerCaseSeparateMethod}
+            subtotalCheckText='大、小写金额分左右两边展示'
+            marginLeft
+          />
+          <EditorText
+            label={i18next.t('左侧文案修改')}
+            value={
+              diyConfig && diyConfig?.fields?.[0]
+                ? diyConfig.fields[0].name
+                : ''
+            }
+            onChange={e => setFieldsMethod(e.target.value, 0)}
+          />
+          {diyConfig?.isUpperLowerCaseSeparate && (
+            <EditorText
+              label={i18next.t('右侧文案修改')}
+              value={diyConfig?.fields?.[0]?.rightName || ''}
+              onChange={e => setFieldsMethod(e.target.value, 1)}
+            />
+          )}
+          <Textarea
+            value={valueField}
+            placeholder={placeholder}
+            onChange={value => setValueFieldMethod(value)}
+          />
+          <TipInfo text={i18next.t('不支持双栏和三栏模式')} />
+        </div>
+      </Flex>
+    )
+  }
+
   render() {
     const { editStore } = this.props
 
@@ -857,7 +1011,7 @@ class EditorSubtotalCheck extends React.Component {
             onChange={subtotalCheckOnChange}
           />
         </Flex>
-        <Flex>&nbsp;{i18next.t(`${subtotalCheckText}`)}</Flex>
+        <Flex>&nbsp;{subtotalCheckText}</Flex>
       </Flex>
     )
   }
@@ -871,4 +1025,26 @@ EditorSubtotalCheck.propTypes = {
   marginLeft: PropTypes.string
 }
 
+function EditorText({ label, value, onChange }) {
+  return (
+    <>
+      <Flex alignCenter>{label}：</Flex>
+      <Text
+        value={value}
+        onChange={onChange}
+        style={{
+          width: '100px',
+          margin: '5px 0 5px 0px'
+        }}
+      />
+    </>
+  )
+}
+
+EditorText.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
 export default EditorField