From 54d57b72985a530b879f56c6a36a7c5b7eb64e82 Mon Sep 17 00:00:00 2001 From: Zhou-Bill <735051883@qq.com> Date: Mon, 30 Sep 2024 15:04:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=87=E8=B4=AD=E9=9C=80=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- global.d.ts | 3 + src/common/editor_edit_field.js | 56 ++++---- src/common/editor_store.js | 4 +- src/components/checkbox/group.js | 66 +++++++++ src/components/checkbox/index.js | 54 ++++++++ src/components/checkbox/index.less | 23 ++++ src/components/index.js | 6 +- src/components/index.less | 1 + src/editor_purchase_demand/context_menu.js | 55 ++++++++ src/editor_purchase_demand/editor.js | 151 +++++++++++++++++++++ src/editor_purchase_demand/index.js | 4 + src/editor_purchase_demand/store.js | 21 +++ src/index.js | 2 + 13 files changed, 420 insertions(+), 26 deletions(-) create mode 100644 src/components/checkbox/group.js create mode 100644 src/components/checkbox/index.js create mode 100644 src/components/checkbox/index.less create mode 100644 src/editor_purchase_demand/context_menu.js create mode 100644 src/editor_purchase_demand/editor.js create mode 100644 src/editor_purchase_demand/index.js create mode 100644 src/editor_purchase_demand/store.js diff --git a/global.d.ts b/global.d.ts index 3df15dc4..f5f42443 100644 --- a/global.d.ts +++ b/global.d.ts @@ -59,6 +59,8 @@ declare module 'gm-x-printer' { class EditorManage extends React.Component {} class EditorBoxLabel extends React.Component {} class EditEshopOrder extends React.Component {} + class EditorPurchaseDemand extends React.Component {} + class Printer extends React.Component {} class BatchPrinter extends React.Component< T, @@ -92,6 +94,7 @@ declare module 'gm-x-printer' { EditorBoxLabel, EditorManage, EditEshopOrder, + EditorPurchaseDemand, Printer, BatchPrinter, EditorMaterialRequisition, diff --git a/src/common/editor_edit_field.js b/src/common/editor_edit_field.js index 9d056c07..d0718a72 100644 --- a/src/common/editor_edit_field.js +++ b/src/common/editor_edit_field.js @@ -115,9 +115,7 @@ class EditorField extends React.Component { onChange={this.handleChangeBlock.bind(this, 'style')} /> )} - {(type === 'image' || - type === 'qrcode' || - type === 'qrcode_trace' ) && ( + {(type === 'image' || type === 'qrcode' || type === 'qrcode_trace') && (
px + {showProductPermutation && ( + <> + + + {i18next.t('商品排列')}： + + - - - - {i18next.t('商品排列')}： - - - - - {i18next.t('商品排列仅适用于双栏商品设置')} - - + + {i18next.t('商品排列仅适用于双栏商品设置')} + + + )} + {renderExtra && renderExtra()} {type === 'OUT_STOCK' && showMergeOption && ( @@ -329,7 +336,10 @@ EditorField.propTypes = { editStore: PropTypes.object, tableDataKeyList: PropTypes.array, type: PropTypes.string, - showMergeOption: PropTypes.bool + showMergeOption: PropTypes.bool, + /** 是否显示商品排列 */ + showProductPermutation: PropTypes.bool, + renderExtra: PropTypes.func } export default EditorField diff --git a/src/common/editor_store.js b/src/common/editor_store.js index c303ea0e..afb1f7ad 100644 --- a/src/common/editor_store.js +++ b/src/common/editor_store.js @@ -180,7 +180,7 @@ class EditorStore { } }).join('/') } else { - return v.style ? v.style.height : '' + return v?.style ? v.style.height : '' } }).join('_') } @@ -596,7 +596,7 @@ class EditorStore { text: `{{qrcode_trace}}` }) break - + // 备注单元格 case 'remark': blocks.push({ diff --git a/src/components/checkbox/group.js b/src/components/checkbox/group.js new file mode 100644 index 00000000..3ac27179 --- /dev/null +++ b/src/components/checkbox/group.js @@ -0,0 +1,66 @@ +import React, { useEffect, useRef } from 'react' +import { Flex, Checkbox } from '../index' +import PropTypes from 'prop-types' + +const CheckboxGroup = props => { + const { options = [], value, onChange } = props + + const [innerValue, setInnerValue] = React.useState(() => { + if (value !== undefined) { + return value + } else { + return [] + } + }) + + const isFirstRender = useRef(true) + + useEffect(() => { + if (value === undefined && !isFirstRender.current) { + setInnerValue(value) + } + isFirstRender.current = false + }, [value]) + + const mergedValue = value === undefined ? innerValue : value + + const handleChange = (val, isChecked) => { + let res = [...mergedValue] + if (isChecked) { + res = [...res, val] + } else { + res = mergedValue.filter(item => item !== val) + } + if (value === undefined) { + setInnerValue(res) + } + onChange && onChange(res) + } + + return ( + + {options.map(_item => { + const isChecked = mergedValue.includes(_item.value) + return ( + handleChange(_item.value, !isChecked)} + checked={isChecked} + > + + {_item.label} {isChecked} + + + ) + })} + + ) +} + +CheckboxGroup.propTypes = { + options: PropTypes.array, + value: PropTypes.any, + onChange: PropTypes.func +} + +export default CheckboxGroup diff --git a/src/components/checkbox/index.js b/src/components/checkbox/index.js new file mode 100644 index 00000000..4c4556ee --- /dev/null +++ b/src/components/checkbox/index.js @@ -0,0 +1,54 @@ +import React, { useEffect, useRef, useState } from 'react' +import Flex from '../flex' +import classNames from 'classnames' +import PropTypes from 'prop-types' + +const Checkbox = props => { + const { checked, onChange, children } = props + const [innerChecked, setInnerChecked] = useState(() => { + if (checked !== undefined) { + return checked + } else { + return false + } + }) + + const isFirstRender = useRef(true) + + const mergedValue = checked === undefined ? innerChecked : checked + + useEffect(() => { + if (checked === undefined && !isFirstRender.current) { + setInnerChecked(checked) + } + isFirstRender.current = false + }, [checked]) + + const handleChange = isChecked => { + console.log(isChecked) + if (checked === undefined) { + setInnerChecked(isChecked) + } + onChange && onChange(isChecked) + } + + return ( +
handleChange(!mergedValue)}> + +
+ <>{children} + +
+ ) +} + +Checkbox.propTypes = { + checked: PropTypes.bool, + onChange: PropTypes.func +} + +export default Checkbox diff --git a/src/components/checkbox/index.less b/src/components/checkbox/index.less new file mode 100644 index 00000000..8971eea2 --- /dev/null +++ b/src/components/checkbox/index.less @@ -0,0 +1,23 @@ +.checkbox { + margin-right: 8px; + .checkbox__inner { + width: 16px; + height: 16px; + border: 1px solid #ccc; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-right: 8px; + } + + .checkbox__inner--checked { + &::after { + content: ''; + display: block; + width: 10px; + height: 10px; + background-color: #56a3f2; + } + } +} diff --git a/src/components/index.js b/src/components/index.js index 766a3973..7ed27ad8 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -7,6 +7,8 @@ import Switch from './switch' import ToolTip from './tooltip' import Radio from './radio' import TagSelect from './tag_select' +import Checkbox from './checkbox' +import CheckboxGroup from './checkbox/group' export { Flex, @@ -20,7 +22,9 @@ export { Switch, ToolTip, Radio, - TagSelect + TagSelect, + Checkbox, + CheckboxGroup } export * from './svg' diff --git a/src/components/index.less b/src/components/index.less index ccbc723b..5a7c58a1 100644 --- a/src/components/index.less +++ b/src/components/index.less @@ -12,3 +12,4 @@ @import './css/button.less'; @import './tooltip/style.less'; @import './tag_select/style.less'; +@import './checkbox/index.less'; \ No newline at end of file diff --git a/src/editor_purchase_demand/context_menu.js b/src/editor_purchase_demand/context_menu.js new file mode 100644 index 00000000..003ed157 --- /dev/null +++ b/src/editor_purchase_demand/context_menu.js @@ -0,0 +1,55 @@ +import React from 'react' +import PropTypes from 'prop-types' +import CommonContextMenu from '../common/common_context_menu' +import { inject, observer } from 'mobx-react' +import { Printer } from '../printer' + +const blockTypeList = [] + +@inject('editStore') +@observer +class ContextMenu extends React.Component { + handleChangeTableDataKey = (key, name) => { + const { editStore } = this.props + + editStore.changeTableDataKey(name, key) + } + + handleChangeTableData = isAutoFilling => { + const { editStore } = this.props + editStore.handleChangeTableData(isAutoFilling) + } + + /** 右键table */ + renderOrderActionBtn = name => { + return <> + } + + render() { + const { editStore, uploadQiniuImage } = this.props + return ( + + + + ) + } +} +ContextMenu.propTypes = { + editStore: PropTypes.object, + uploadQiniuImage: PropTypes.func +} +export default ContextMenu diff --git a/src/editor_purchase_demand/editor.js b/src/editor_purchase_demand/editor.js new file mode 100644 index 00000000..46057c01 --- /dev/null +++ b/src/editor_purchase_demand/editor.js @@ -0,0 +1,151 @@ +import React from 'react' +import PropTypes from 'prop-types' +import _ from 'lodash' +import { Flex, CheckboxGroup } from '../components' +import { Gap, Title } from '../common/component' +import editStore, { StatisticsSettingEnum } from './store' +import { observer, inject } from 'mobx-react' +import EditorTitle from '../common/editor_title' +import EditorSelect from '../common/editor_select' +import EditorField from '../common/editor_edit_field' +import EditorAddField from '../common/editor_add_field' +import ContextMenu from './context_menu' +import i18next from '../../locales' +import withStore from '../common/hoc_with_store' +import classNames from 'classnames' + +// ‼️‼️🚸🚸 注意: value的命名不要用下划线! 原因是 computedTableDataKeyOfSelectedRegion 会split('_')下划线做一些事情‼️ +// 📚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: 'allprod', text: i18next.t('全部商品'), hasSubtotalBtn: false } +] + +export const noSubtotalBtnTableDataKeySet = new Set( + tableDataKeyList.filter(v => !v.hasSubtotalBtn).map(o => o.value) +) + +@withStore(editStore) +@inject('editStore') +@observer +class Editor extends React.Component { + render() { + const { + onSave, + showEditor, + addFields, + className, + showNewDate, + uploadQiniuImage + } = this.props + + const options = [ + { + label: i18next.t('显示合计'), + value: StatisticsSettingEnum.LIST + }, + { + label: i18next.t('显示小计'), + value: StatisticsSettingEnum.LIST_SUBTOTAL + } + ] + + return ( +
+ + + {i18next.t( + '说明：选中内容进行编辑，可拖动字段移动位置，右键使用更多功能' + )} + {/* <a + href='https://v.qq.com/x/page/t08044292dd.html' + target='_blank' + className='btn-link' + rel='noopener noreferrer' + > + {i18next.t('查看视频教程')} + </a> */} + </span> + } + /> + </Flex> + + {showEditor && ( + <div className='gm-printer-edit-zone'> + <EditorTitle onSave={onSave} /> + <Gap height='10px' /> + <Gap height='5px' /> + <EditorSelect /> + {/* <SpecialField addFields={addFields} mockData={mockData} /> */} + <Gap height='5px' /> + <Flex alignCenter> + <Flex alignCenter>{i18next.t('统计设置')}：</Flex> + <CheckboxGroup + value={editStore.config.statisticsSetting} + options={options} + onChange={value => { + editStore.setStatisticsSetting(value) + }} + /> + </Flex> + <Gap height='5px' /> + <EditorField + tableDataKeyList={tableDataKeyList} + showNewDate={showNewDate} + showProductPermutation={false} + /> + <Gap height='5px' /> + <EditorAddField addFields={addFields} /> + <Gap height='5px' /> + <div id='gm-printer-tip' /> + + <div id='gm-printer-modal' /> + </div> + )} + + <div className='gm-printer-edit-wrap'> + <ContextMenu uploadQiniuImage={uploadQiniuImage} /> + </div> + </div> + ) + } +} + +Editor.propTypes = { + config: PropTypes.object.isRequired, + onSave: PropTypes.func, + showEditor: PropTypes.bool, + mockData: PropTypes.object.isRequired, + addFields: PropTypes.object.isRequired, + showNewDate: PropTypes.bool, + uploadQiniuImage: PropTypes.func, + templateTags: PropTypes.array, + className: PropTypes.string +} + +Editor.deaultProps = { + onSave: _.noop, + showNewDate: false +} + +export default Editor diff --git a/src/editor_purchase_demand/index.js b/src/editor_purchase_demand/index.js new file mode 100644 index 00000000..9b220f1e --- /dev/null +++ b/src/editor_purchase_demand/index.js @@ -0,0 +1,4 @@ +import withShadowDom from '../common/hoc_with_shadow_dom' +import Editor from './editor' + +export default withShadowDom(Editor) diff --git a/src/editor_purchase_demand/store.js b/src/editor_purchase_demand/store.js new file mode 100644 index 00000000..2389d236 --- /dev/null +++ b/src/editor_purchase_demand/store.js @@ -0,0 +1,21 @@ +import EditorStore from '../common/editor_store' +import { action } from 'mobx' + +export const StatisticsSettingEnum = { + /** 列表合计 */ + LIST: 1, + /** 列表小计 */ + LIST_SUBTOTAL: 2 +} + +class Store extends EditorStore { + @action + setStatisticsSetting(statisticsSetting) { + this.config = { + ...this.config, + statisticsSetting + } + } +} + +export default new Store() diff --git a/src/index.js b/src/index.js index 0121cfa5..94ef719d 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ import EditorMaterialRequisition from './editor_material_requisition' import EditorAfterSales from './editor_after_sales' import EditEshop from './editor_eshop' import EditorManage from './editor_manage' +import EditorPurchaseDemand from './editor_purchase_demand' import { BatchPrinter, @@ -50,6 +51,7 @@ export { EditorAfterSales, EditorManage, EditEshop, + EditorPurchaseDemand, Printer, BatchPrinter, doPrint,