feat: 打印增加标签功能

gmfe · Jan 9, 2024 · aa11238 · aa11238
1 parent 63eec4c
commit aa11238
Show file tree

Hide file tree

Showing 8 changed files with 281 additions and 44 deletions.
diff --git a/src/common/editor_select.js b/src/common/editor_select.js
@@ -1,7 +1,7 @@
 import i18next from '../../locales'
 import React from 'react'
-import { observer, inject } from 'mobx-react'
-import { Flex, Option, Select } from '../components'
+import { observer, inject, Observer } from 'mobx-react'
+import { Flex, Option, Select, TagSelect } from '../components'
 import { InputWithUnit } from '../common/component'
 import { pageTypeMap, printDirectionList } from '../config'
 import _ from 'lodash'
@@ -40,13 +40,21 @@ class EditorSelector extends React.Component {
     this.props.editStore.setTemplateType(type)
   }
 
+  handleSetTags = tags => {
+    console.log(tags)
+    this.props.editStore.setTags(tags)
+  }
+
   render() {
     const {
       config: { name, page, batchPrintConfig, templateType },
       computedRegionList,
       computedSelectedRegionTip,
-      selectedRegion
+      selectedRegion,
+      templateTags,
+      tags
     } = this.props.editStore
+    console.log(tags)
     const isDIY = page.type === 'DIY'
     return (
       <div>
@@ -128,7 +136,20 @@ class EditorSelector extends React.Component {
             ))}
           </Select>
         </Flex>
-
+        {templateTags && (
+          <Flex alignCenter className='gm-padding-top-5'>
+            <div>{i18next.t('编辑标签')}：</div>
+            <Observer>
+              {() => (
+                <TagSelect
+                  value={tags}
+                  onChange={this.handleSetTags}
+                  options={templateTags}
+                />
+              )}
+            </Observer>
+          </Flex>
+        )}
         {this.props.isPurchase ||
           (this.props.type === 'picking' && (
             <>

diff --git a/src/common/editor_store.js b/src/common/editor_store.js
@@ -84,16 +84,51 @@ class EditorStore {
   @observable
   order_big = '大写：'
 
+  // 当前模板已有的标签
+  @observable
+  templateTags = null
+
+  @observable
+  tags = []
+
   // 默认table的dataKey
   setTableDataKeyEffect() {} // 改变dataKey后,做的副作用操作
 
   defaultTableSubtotal = { show: false }
 
+  @action
+  init(config, data, templateTags) {
+    console.log(this.config)
+    // batchPrintConfig: 1 不连续打印（一张采购单不出现多供应商）2 连续打印（一张采购单可能出现多个供应商）
+    this.config = Object.assign(
+      { batchPrintConfig: 1, templateType: 1 },
+      config
+    )
+    this.originConfig = config
+    this.selected = null
+    this.selectedRegion = null
+    this.insertPanel = 'header'
+    this.mockData = data
+    this.isAutoFilling = false
+    this.templateTags = templateTags
+    console.log(this.config)
+    if (this.config.tags) {
+      this.tags = this.config.tags.split(',')
+    } else {
+      this.tags = []
+    }
+  }
+
   @action
   setAutoFillingConfig(bol) {
     this.isAutoFilling = bol
   }
 
+  @action
+  setTemplateTags(tags) {
+    this.templateTags = tags
+  }
+
   /** 切换自适应 */
   @action
   toggleIsAdaptive(isAdaptive) {
@@ -217,19 +252,9 @@ class EditorStore {
   }
 
   @action
-  init(config, data) {
-    // batchPrintConfig: 1 不连续打印（一张采购单不出现多供应商）2 连续打印（一张采购单可能出现多个供应商）
-    this.config = Object.assign(
-      { batchPrintConfig: 1, templateType: 1 },
-      config
-    )
-    console.log(config)
-    this.originConfig = config
-    this.selected = null
-    this.selectedRegion = null
-    this.insertPanel = 'header'
-    this.mockData = data
-    this.isAutoFilling = false
+  setTags(tags) {
+    this.tags = tags
+    this.config.tags = tags.join(',')
   }
 
   @action

diff --git a/src/common/hoc_with_store.js b/src/common/hoc_with_store.js
@@ -4,29 +4,65 @@ import { getStyleWithDiff } from '../util'
 
 const withStore = store => WrapComponent =>
   class extends React.Component {
-    constructor (props) {
+    constructor(props) {
       super(props)
       this.store = store
-      this.store.init(props.config, props.mockData)
+      this.store.init(props.config, props.mockData, props.templateTags)
     }
 
-    componentDidMount () {
-      window.document.addEventListener('gm-printer-select', this.handlePrinterSelect)
-      window.document.addEventListener('gm-printer-select-region', this.handleSelectedRegion)
-      window.document.addEventListener('gm-printer-panel-style-set', this.handlePrinterPanelStyleSet)
-      window.document.addEventListener('gm-printer-block-style-set', this.handlePrinterBlockStyleSet)
-      window.document.addEventListener('gm-printer-block-text-set', this.handlePrinterBlockTextSet)
-      window.document.addEventListener('gm-printer-table-drag', this.handlePrinterTableDrag)
+    componentDidMount() {
+      window.document.addEventListener(
+        'gm-printer-select',
+        this.handlePrinterSelect
+      )
+      window.document.addEventListener(
+        'gm-printer-select-region',
+        this.handleSelectedRegion
+      )
+      window.document.addEventListener(
+        'gm-printer-panel-style-set',
+        this.handlePrinterPanelStyleSet
+      )
+      window.document.addEventListener(
+        'gm-printer-block-style-set',
+        this.handlePrinterBlockStyleSet
+      )
+      window.document.addEventListener(
+        'gm-printer-block-text-set',
+        this.handlePrinterBlockTextSet
+      )
+      window.document.addEventListener(
+        'gm-printer-table-drag',
+        this.handlePrinterTableDrag
+      )
       window.document.addEventListener('keydown', this.handleKeyDown)
     }
 
-    componentWillUnmount () {
-      window.document.removeEventListener('gm-printer-select', this.handlePrinterSelect)
-      window.document.removeEventListener('gm-printer-select-region', this.handleSelectedRegion)
-      window.document.removeEventListener('gm-printer-panel-style-set', this.handlePrinterPanelStyleSet)
-      window.document.removeEventListener('gm-printer-block-style-set', this.handlePrinterBlockStyleSet)
-      window.document.removeEventListener('gm-printer-block-text-set', this.handlePrinterBlockTextSet)
-      window.document.removeEventListener('gm-printer-table-drag', this.handlePrinterTableDrag)
+    componentWillUnmount() {
+      window.document.removeEventListener(
+        'gm-printer-select',
+        this.handlePrinterSelect
+      )
+      window.document.removeEventListener(
+        'gm-printer-select-region',
+        this.handleSelectedRegion
+      )
+      window.document.removeEventListener(
+        'gm-printer-panel-style-set',
+        this.handlePrinterPanelStyleSet
+      )
+      window.document.removeEventListener(
+        'gm-printer-block-style-set',
+        this.handlePrinterBlockStyleSet
+      )
+      window.document.removeEventListener(
+        'gm-printer-block-text-set',
+        this.handlePrinterBlockTextSet
+      )
+      window.document.removeEventListener(
+        'gm-printer-table-drag',
+        this.handlePrinterTableDrag
+      )
       window.document.removeEventListener('keydown', this.handleKeyDown)
     }
 
@@ -35,33 +71,33 @@ const withStore = store => WrapComponent =>
       this.store.setSelectedRegion(selected)
     }
 
-    handlePrinterSelect = (e) => {
+    handlePrinterSelect = e => {
       const { selected } = e.detail
       this.store.setSelected(selected)
     }
 
-    handlePrinterPanelStyleSet = (e) => {
+    handlePrinterPanelStyleSet = e => {
       const { name, style } = e.detail
       // 配送单，清空空白数据
       !!this.store.clearAllTableEmptyData && this.store.clearAllTableEmptyData()
       this.store.setConfigPanelStyle(name, style)
     }
 
-    handlePrinterBlockStyleSet = (e) => {
+    handlePrinterBlockStyleSet = e => {
       const { style } = e.detail
       this.store.setConfigBlockBy('style', style)
     }
 
-    handlePrinterBlockTextSet = (e) => {
+    handlePrinterBlockTextSet = e => {
       const { text } = e.detail
       this.store.setConfigBlockBy('text', text)
     }
 
-    handlePrinterTableDrag = (e) => {
+    handlePrinterTableDrag = e => {
       this.store.exchangeTableColumn(e.detail.target, e.detail.source)
     }
 
-    handleKeyDown = (e) => {
+    handleKeyDown = e => {
       if (e.target !== window.document.body) {
         return
       }
@@ -83,7 +119,11 @@ const withStore = store => WrapComponent =>
             diffY += 1
           }
 
-          const newStyle = getStyleWithDiff(this.store.computedSelectedInfo.style, diffX, diffY)
+          const newStyle = getStyleWithDiff(
+            this.store.computedSelectedInfo.style,
+            diffX,
+            diffY
+          )
 
           this.store.setConfigBlockBy('style', newStyle)
         } else if (this.store.computedIsSelectTable) {
@@ -102,10 +142,10 @@ const withStore = store => WrapComponent =>
       }
     }
 
-    render () {
+    render() {
       return (
         <Provider editStore={this.store} mockData={this.props.mockData}>
-          <WrapComponent {...this.props}/>
+          <WrapComponent {...this.props} />
         </Provider>
       )
     }

diff --git a/src/components/index.js b/src/components/index.js
@@ -6,6 +6,7 @@ import Dialog from './dialog'
 import Switch from './switch'
 import ToolTip from './tooltip'
 import Radio from './radio'
+import TagSelect from './tag_select'
 
 export {
   Flex,
@@ -18,5 +19,6 @@ export {
   Dialog,
   Switch,
   ToolTip,
-  Radio
+  Radio,
+  TagSelect
 }
diff --git a/src/components/index.less b/src/components/index.less
@@ -11,3 +11,4 @@
 @import './css/text.less';
 @import './css/button.less';
 @import './tooltip/style.less';
+@import './tag_select/style.less';