gm-printer 10.11.5-beta2 → 10.11.5

package/locales/en.json

@@ -102,6 +102,7 @@
   "入库金额小计": "",
   "双栏商品": "",
   "商品分类": "",
+  "积分表格": "",
   "查看视频教程": "",
   "积分商品名": "",
   "{{列.积分商品名}}": "",

package/locales/th.json

@@ -102,6 +102,7 @@
   "入库金额小计": "",
   "双栏商品": "",
   "商品分类": "",
+  "积分表格": "",
   "查看视频教程": "",
   "积分商品名": "",
   "{{列.积分商品名}}": "",

package/locales/zh-HK.json

@@ -102,6 +102,7 @@
   "入库金额小计": "入庫金額小計",
   "双栏商品": "雙欄商品",
   "商品分类": "商品分類",
+  "积分表格": "積分表格",
   "查看视频教程": "查看視頻教程",
   "积分商品名": "積分商品名",
   "{{列.积分商品名}}": "{{列.積分商品名}}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gm-printer",
-  "version": "10.11.5-beta2",
+  "version": "10.11.5",
   "description": "diy printer",
   "main": "src/index.js",
   "scripts": {
@@ -19,7 +19,6 @@
     "type": "git",
     "url": "git+https://github.com/gmfe/gm-printer.git"
   },
-  "types": "global.d.ts",
   "author": "",
   "license": "ISC",
   "bugs": {
@@ -29,9 +28,10 @@
     "parser": "babel-eslint"
   },
   "homepage": "https://github.com/gmfe/gm-printer#readme",
-  "dependencies": {
+  "peerDependencies": {
     "big.js": "^5.1.2",
     "classnames": "^2.2.6",
+    "gm-svg": "^0.3.0",
     "gm-util": "^5.12.2",
     "jsbarcode": "^3.11.0",
     "lodash": "^4.17.10",
@@ -46,11 +46,10 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@babel/runtime-corejs3": "^7.12.1",
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/runtime": "^7.11.2",
+    "@babel/cli": "^7.6.0",
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.4",
+    "@babel/runtime": "^7.5.5",
     "@svgr/webpack": "^4.3.2",
     "@types/react": "^16.9.16",
     "add-asset-html-webpack-plugin": "^3.1.3",
@@ -109,5 +108,8 @@
     "webpack": "^4.17.2",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.7"
+  },
+  "dependencies": {
+    "qrcode.react": "^0.9.2"
   }
 }

package/src/common/editor_edit_field.js

@@ -113,6 +113,12 @@ class EditorField extends React.Component {
             onChange={this.handleChangeBlock.bind(this, 'style')}
           />
         )}
+        {type === 'qrcode' && (
+          <Size
+            style={style}
+            onChange={this.handleChangeBlock.bind(this, 'style')}
+          />
+        )}
         {type === 'image' && (
           <div>
             <Size
@@ -189,6 +195,21 @@ class EditorField extends React.Component {
       (editStore.computedTableSpecialConfig.subtotal &&
         get(subtotal, 'needUpperCase')) ||
       false
+    // 大写的金额是否在前
+    const subtotalUpperCaseBefore =
+      (editStore.computedTableSpecialConfig.subtotal &&
+        get(subtotal, 'isUpperCaseBefore')) ||
+      false
+    // 大写和小写的金额是否分开
+    const subtotalUpperLowerCaseSeparate =
+      (editStore.computedTableSpecialConfig.subtotal &&
+        get(subtotal, 'isUpperLowerCaseSeparate')) ||
+      false
+    // 位置交换
+    const subtotalCommutationPlace =
+      (editStore.computedTableSpecialConfig.subtotal &&
+        get(subtotal, 'isCommutationPlace')) ||
+      false
 
     return (
       <div>
@@ -336,16 +357,12 @@ class EditorField extends React.Component {
           />
         </Flex>
 
-        <Flex style={{ margin: '5px 0 5px 62px' }}>
-          <Flex alignCenter>
-            <input
-              type='checkbox'
-              checked={specialTrNeedUpperCase}
-              onChange={editStore.setSpecialUpperCase}
-            />
-          </Flex>
-          <Flex>&nbsp;{i18next.t('显示大写金额')}</Flex>
-        </Flex>
+        <EditorSubtotalCheck
+          subtotalCheckDisabled
+          subtotalChecked={specialTrNeedUpperCase}
+          subtotalCheckOnChange={editStore.setSpecialUpperCase}
+          subtotalCheckText='显示大写金额'
+        />
 
         <Flex>
           <Flex>{i18next.t('合计设置')}：</Flex>
@@ -359,17 +376,34 @@ class EditorField extends React.Component {
             onChange={this.handleSubtotalStyleChange}
           />
         </Flex>
-
-        <Flex style={{ margin: '5px 0 5px 62px' }}>
+        {/* <Flex style={{ margin: '5px 0 5px 62px' }}>
           <Flex alignCenter>
             <input
               type='checkbox'
-              checked={subtotalNeedUpperCase}
-              onChange={editStore.setSubtotalUpperCase}
+              checked={subtotalCommutationPlace}
+              onChange={editStore.setSubtotalCommutationPlace}
             />
           </Flex>
-          <Flex>&nbsp;{i18next.t('显示大写金额')}</Flex>
-        </Flex>
+          <Flex>&nbsp;{i18next.t('合计、每页合计交换位置')}</Flex>
+        </Flex> */}
+        <EditorSubtotalCheck
+          subtotalCheckDisabled
+          subtotalChecked={subtotalNeedUpperCase}
+          subtotalCheckOnChange={editStore.setSubtotalUpperCase}
+          subtotalCheckText='显示大写金额'
+        />
+        <EditorSubtotalCheck
+          subtotalCheckDisabled={subtotalNeedUpperCase}
+          subtotalChecked={subtotalUpperCaseBefore}
+          subtotalCheckOnChange={editStore.setSubtotalUpperCaseBefore}
+          subtotalCheckText='大写金额在前'
+        />
+        <EditorSubtotalCheck
+          subtotalCheckDisabled={subtotalNeedUpperCase}
+          subtotalChecked={subtotalUpperLowerCaseSeparate}
+          subtotalCheckOnChange={editStore.setSubtotalUpperLowerCaseSeparate}
+          subtotalCheckText='大、小写金额分左右两边展示'
+        />
       </div>
     )
   }
@@ -396,4 +430,36 @@ EditorField.defaultProps = {
   showNewDate: false
 }
 
+class EditorSubtotalCheck extends React.Component {
+  render() {
+    const {
+      subtotalCheckDisabled,
+      subtotalChecked,
+      subtotalCheckOnChange,
+      subtotalCheckText
+    } = this.props
+
+    return (
+      <Flex style={{ margin: '5px 0 5px 62px' }}>
+        <Flex alignCenter>
+          <input
+            type='checkbox'
+            disabled={!subtotalCheckDisabled}
+            checked={subtotalChecked}
+            onChange={subtotalCheckOnChange}
+          />
+        </Flex>
+        <Flex>&nbsp;{i18next.t(`${subtotalCheckText}`)}</Flex>
+      </Flex>
+    )
+  }
+}
+
+EditorSubtotalCheck.propTypes = {
+  subtotalCheckDisabled: PropTypes.bool,
+  subtotalChecked: PropTypes.bool,
+  subtotalCheckOnChange: PropTypes.func,
+  subtotalCheckText: PropTypes.string
+}
+
 export default EditorField

package/src/common/editor_store.js

@@ -370,6 +370,18 @@ class EditorStore {
           text: `{{qrcode}}`
         })
         break
+      case 'uniform_social_credit_code':
+        blocks.push({
+          type: 'qrcode',
+          style: {
+            left: '0px',
+            top: '5px',
+            width: '75px',
+            height: '75px'
+          },
+          text: `{{uniform_social_credit_code}}`
+        })
+        break
       default:
         window.alert(i18next.t('出错啦，未识别类型，此信息不应该出现'))
     }
@@ -792,6 +804,7 @@ class EditorStore {
     }
   }
 
+  // 设置大写金额
   @action.bound
   setSubtotalUpperCase() {
     if (this.selectedRegion) {
@@ -800,6 +813,51 @@ class EditorStore {
 
       const oldNeedUpperCase = subtotalConfig.needUpperCase
       set(subtotalConfig, { needUpperCase: !oldNeedUpperCase })
+      // 没有大写金额时，将大写在前和大小写分开的多选框设置为false
+      if (subtotalConfig.needUpperCase === false) {
+        subtotalConfig.isUpperCaseBefore &&
+          set(subtotalConfig, { isUpperCaseBefore: false })
+        subtotalConfig.isUpperLowerCaseSeparate &&
+          set(subtotalConfig, { isUpperLowerCaseSeparate: false })
+      }
+    }
+  }
+
+  // 设置大写金额在前
+  @action.bound
+  setSubtotalUpperCaseBefore() {
+    if (this.selectedRegion) {
+      const arr = this.selectedRegion.split('.')
+      const subtotalConfig = this.config.contents[arr[2]].subtotal
+
+      const oldUpperCaseBefore = subtotalConfig.isUpperCaseBefore
+      set(subtotalConfig, { isUpperCaseBefore: !oldUpperCaseBefore })
+    }
+  }
+
+  // 设置大小写金额分开
+  @action.bound
+  setSubtotalUpperLowerCaseSeparate() {
+    if (this.selectedRegion) {
+      const arr = this.selectedRegion.split('.')
+      const subtotalConfig = this.config.contents[arr[2]].subtotal
+
+      const oldUpperLowerCaseSeparate = subtotalConfig.isUpperLowerCaseSeparate
+      set(subtotalConfig, {
+        isUpperLowerCaseSeparate: !oldUpperLowerCaseSeparate
+      })
+    }
+  }
+
+  // 设置交换位置
+  @action.bound
+  setSubtotalCommutationPlace() {
+    if (this.selectedRegion) {
+      const arr = this.selectedRegion.split('.')
+      const subtotalConfig = this.config.contents[arr[2]].subtotal
+
+      const oldCommutationPlace = subtotalConfig.isCommutationPlace
+      set(subtotalConfig, { isCommutationPlace: !oldCommutationPlace })
     }
   }
 

package/src/components/index.js

@@ -4,6 +4,7 @@ import Tip from './tip'
 import { DropDown, DropDownItem, DropDownItems } from './dropdown'
 import Dialog from './dialog'
 import Switch from './switch'
+import ToolTip from './tooltip'
 
 export {
   Flex,
@@ -14,5 +15,6 @@ export {
   DropDownItem,
   DropDownItems,
   Dialog,
-  Switch
+  Switch,
+  ToolTip
 }

package/src/components/index.less

@@ -10,3 +10,4 @@
 @import './css/distance.less';
 @import './css/text.less';
 @import './css/button.less';
+@import './tooltip/style.less';

package/src/components/tip/index.js

@@ -1,48 +1,32 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
+import { SvgInfoCircle } from 'gm-svg'
 import Flex from '../flex'
 import _ from 'lodash'
 
 const tips = []
 
-const Tip = props => {
+const Tip = (props) => {
   const { list } = props
 
-  return (
-    <React.Fragment>
-      {_.map(list, (item, index) => {
-        return (
-          <div
-            key={index}
-            className='gm-animated gm-animated-fade-in-right-100'
-          >
-            <Flex alignCenter className='gm-tip'>
-              <SvgInfoCircle className='gm-svg-info' />
-              <div style={{ paddingLeft: '10px' }}>
-                <div>{item}</div>
-              </div>
-            </Flex>
-          </div>
-        )
-      })}
-    </React.Fragment>
-  )
+  return <React.Fragment>
+    {_.map(list, (item, index) => {
+      return (
+        <div key={index} className='gm-animated gm-animated-fade-in-right-100'>
+          <Flex alignCenter className='gm-tip'>
+            <SvgInfoCircle className='gm-svg-info'/>
+            <div style={{ paddingLeft: '10px' }}>
+              <div>{item}</div>
+            </div>
+          </Flex>
+        </div>
+      )
+    })}
+  </React.Fragment>
 }
 
-const SvgInfoCircle = props => (
-  <svg
-    {...props}
-    width='1em'
-    height='1em'
-    viewBox='0 0 1024 1024'
-    fill='currentColor'
-    className={'gm-svg-icon ' + (props.className || '')}
-  >
-    <path d='M512 4.445c-276.763 0-501.095 224.331-501.095 501.094S235.237 1006.634 512 1006.634c276.763 0 501.095-224.331 501.095-501.095S788.763 4.445 512 4.445zM494.065 218.68c29.892 0 54.294 24.306 54.294 54.295s-24.305 54.197-54.295 54.197-54.295-24.305-54.295-54.295c.098-29.891 24.403-54.197 54.295-54.197zm89.479 573.716H440.458c-20.091 0-36.359-16.268-36.359-36.359s16.27-36.359 36.36-36.359h35.183V471.435H440.36c-19.993 0-36.359-16.269-36.359-36.359s16.268-36.359 36.36-36.359h72.13c19.798 0 35.772 16.073 35.772 35.771V719.68h35.282c20.091 0 36.359 16.27 36.359 36.36s-16.269 36.358-36.359 36.358z' />
-  </svg>
-)
-function getTipDOM(id) {
+function getTipDOM (id) {
   return window.shadowRoot.getElementById(id)
 }
 
@@ -51,10 +35,10 @@ Tip.warning = (message = '') => {
 
   setTimeout(() => {
     tips.shift()
-    ReactDOM.render(<Tip list={tips} />, getTipDOM('gm-printer-tip'))
+    ReactDOM.render(<Tip list={tips}/>, getTipDOM('gm-printer-tip'))
   }, 3000)
 
-  ReactDOM.render(<Tip list={tips} />, getTipDOM('gm-printer-tip'))
+  ReactDOM.render(<Tip list={tips}/>, getTipDOM('gm-printer-tip'))
 }
 
 Tip.propTypes = {

package/src/components/tooltip/index.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import SVGQuestionCircle from '../../svg/question-circle-o.svg'
+
+const ToolTip = ({ text }) => {
+  const [active, setActive] = useState(false)
+  return (
+    <span
+      onMouseEnter={() => {
+        setActive(true)
+      }}
+      onMouseLeave={() => {
+        setActive(false)
+      }}
+      className='b-editor-tooltip'
+    >
+      {active && <span className='b-editor-tooltip-text'>{text}</span>}
+      <SVGQuestionCircle />
+    </span>
+  )
+}
+ToolTip.PropTypes = {
+  text: PropTypes.string.isRequired
+}
+
+export default ToolTip

package/src/components/tooltip/style.less

@@ -0,0 +1,16 @@
+.b-editor-tooltip {
+  position: relative;
+  padding: 0px 3px;
+  .b-editor-tooltip-text {
+    width: 320px;
+    position: absolute;
+    top: 20px;
+    left: -65px;
+    color: #000;
+    border-radius: 2px;
+    background-color: white;
+    border: 1px solid #eee;
+    padding: 5px 5px;
+    z-index: 100;
+  }
+}

package/src/editor/context_menu.js

@@ -12,12 +12,16 @@ const blockTypeList = [
   { value: 'image', text: i18next.t('插入图片') },
   { value: 'counter', text: i18next.t('插入分类汇总') },
   { value: 'barcode', text: i18next.t('插入订单条形码') },
-  { value: 'qrcode', text: i18next.t('插入订单详情二维码') },
+  { value: 'qrcode', text: i18next.t('插入订单溯源二维码') },
+  {
+    value: 'uniform_social_credit_code',
+    text: i18next.t('插入苏州安全监管平台二维码')
+  }
 ]
 
-@inject((stores) => ({
+@inject(stores => ({
   editStore: stores.editStore,
-  mockData: stores.mockData,
+  mockData: stores.mockData
 }))
 @observer
 class ContextMenu extends React.Component {
@@ -26,7 +30,7 @@ class ContextMenu extends React.Component {
    * @param name => ContextMenu 的 this.state.name
    * @return {boolean}
    */
-  hasSubtotalBtn = (name) => {
+  hasSubtotalBtn = name => {
     if (!name) return false
     const noSubtotalList = ['abnormal', 'abnormalDetails']
     const arr = name.split('.')
@@ -42,13 +46,13 @@ class ContextMenu extends React.Component {
     editStore.changeTableDataKey(name, key)
   }
 
-  handleSubtotal = (name) => {
+  handleSubtotal = name => {
     const { editStore } = this.props
 
     editStore.setSubtotalShow(name)
   }
 
-  renderOrderActionBtn = (name) => {
+  renderOrderActionBtn = name => {
     if (!this.hasSubtotalBtn(name)) {
       return null
     }
@@ -60,7 +64,6 @@ class ContextMenu extends React.Component {
     const isMultiActive = keyArr.includes('multi')
     const isCategoryActive = keyArr.includes('category')
     const isSubtotalActive = subtotal.show
-    const isCombine = keyArr.includes('combination')
 
     return (
       <>
@@ -70,15 +73,12 @@ class ContextMenu extends React.Component {
         >
           {i18next.t('双栏商品')}
         </div>
-        {/* 组合商品没做商品分类 */}
-        {!isCombine && (
-          <div
-            onClick={this.handleChangeTableDataKey.bind(this, 'category', name)}
-            className={isCategoryActive ? 'active' : ''}
-          >
-            {i18next.t('商品分类')}
-          </div>
-        )}
+        <div
+          onClick={this.handleChangeTableDataKey.bind(this, 'category', name)}
+          className={isCategoryActive ? 'active' : ''}
+        >
+          {i18next.t('商品分类')}
+        </div>
         <div
           onClick={this.handleSubtotal.bind(this, name)}
           className={isSubtotalActive ? 'active' : ''}

package/src/editor/editor.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
-import { Flex } from '../components'
+import { Flex, ToolTip } from '../components'
 import { Gap, Title } from '../common/component'
 import editStore from './store'
 import { observer, inject } from 'mobx-react'
@@ -18,14 +18,15 @@ import withStore from '../common/hoc_with_store'
 // 📚hasSubtotalBtn 这种表格是否支持  双栏,分类,合计  功能
 const tableDataKeyList = [
   { value: 'orders', text: i18next.t('全部商品'), hasSubtotalBtn: true },
-  // { value: 'abnormal', text: i18next.t('异常商品'), hasSubtotalBtn: false },
-  // {
-  //   value: 'abnormalDetails',
-  //   text: i18next.t('异常商品(明细)'),
-  //   hasSubtotalBtn: false
-  // }
-
-  { value: 'combination', text: i18next.t('组合商品'), hasSubtotalBtn: false }
+  { value: 'abnormal', text: i18next.t('异常商品'), hasSubtotalBtn: false },
+  {
+    value: 'abnormalDetails',
+    text: i18next.t('异常商品(明细)'),
+    hasSubtotalBtn: false
+  },
+  { value: 'reward', text: i18next.t('积分表格'), hasSubtotalBtn: false },
+  { value: 'combination', text: i18next.t('组合商品'), hasSubtotalBtn: false },
+  { value: 'turnover', text: i18next.t('周转物表格'), hasSubtotalBtn: false }
 ]
 
 export const noSubtotalBtnTableDataKeySet = new Set(
@@ -66,6 +67,12 @@ class Editor extends React.Component {
           <div className='gm-printer-edit-zone'>
             <EditorTitle onSave={onSave} />
             <Gap height='10px' />
+            <>
+              <>{i18next.t('模版类型')}</>
+              <ToolTip text='表示该模板是针对单一商户的配送单模板（商户配送单），或是账户合并打印配送单（账户配送单）的模板。' />
+              <span>{':' + i18next.t('商户配送单')}</span>
+            </>
+            <Gap height='10px' />
             <EditorSelect />
             <Gap height='5px' />
             <EditorField