From e8edfdadb561cd83bf6e1c3e00d55b8cc2aee6d5 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 17 十月 2022 17:57:34 +0800 Subject: [PATCH] 2022-10-17 --- src/menu/components/card/cardcellcomponent/index.jsx | 471 ++++++++++++++++++++++++++++++++++------------------------ 1 files changed, 274 insertions(+), 197 deletions(-) diff --git a/src/menu/components/card/cardcellcomponent/index.jsx b/src/menu/components/card/cardcellcomponent/index.jsx index a012409..2cb20e5 100644 --- a/src/menu/components/card/cardcellcomponent/index.jsx +++ b/src/menu/components/card/cardcellcomponent/index.jsx @@ -3,8 +3,6 @@ import { is, fromJS } from 'immutable' import { Modal, Button } from 'antd' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import asyncComponent from '@/utils/asyncComponent' import { getCardCellForm } from './formconfig' import { getActionForm } from '@/menu/components/share/actioncomponent/formconfig' @@ -12,6 +10,7 @@ import MKEmitter from '@/utils/events.js' import MenuUtils from '@/utils/utils-custom.js' import ElementForm from './elementform' +import CreateFunc from '@/templates/zshare/createfunc' import DragElement from './dragaction' import './index.scss' @@ -33,13 +32,14 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + appType: sessionStorage.getItem('appType'), card: null, // 缂栬緫涓厓绱� formlist: null, // 琛ㄥ崟淇℃伅 elements: null, // 鎸夐挳缁� visible: false, // 妯℃�佹鎺у埗 actvisible: false, // 鎸夐挳缂栬緫妯℃�佹 profVisible: false, // 楠岃瘉淇℃伅缂栬緫 + record: null } /** @@ -63,22 +63,18 @@ } componentDidMount () { - MKEmitter.addListener('cardAddElement', this.cardAddElement) - MKEmitter.addListener('submitStyle', this.getStyle) MKEmitter.addListener('submitModal', this.handleSave) + MKEmitter.addListener('cardAddElement', this.cardAddElement) + MKEmitter.addListener('cardDelElement', this.cardDelElement) MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) } shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.props.cards), fromJS(nextProps.cards)) || !is(fromJS(this.state), fromJS(nextState)) + return !is(fromJS(this.state), fromJS(nextState)) || !is(fromJS(this.props.cards), fromJS(nextProps.cards)) } UNSAFE_componentWillReceiveProps(nextProps) { if (this.props.side !== nextProps.side) { - this.setState({ - elements: fromJS(nextProps.elements).toJS() - }) - } else if (!is(fromJS(this.props.elements), fromJS(nextProps.elements)) && nextProps.elements.length !== this.state.elements.length) { this.setState({ elements: fromJS(nextProps.elements).toJS() }) @@ -92,16 +88,16 @@ this.setState = () => { return } - MKEmitter.removeListener('cardAddElement', this.cardAddElement) - MKEmitter.removeListener('submitStyle', this.getStyle) MKEmitter.removeListener('submitModal', this.handleSave) + MKEmitter.removeListener('cardAddElement', this.cardAddElement) + MKEmitter.removeListener('cardDelElement', this.cardDelElement) MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) } updateComponentStyle = (parentId, keys, style) => { const { cardCell } = this.props - if (!cardCell || cardCell.uuid !== parentId) return + if (cardCell.uuid !== parentId) return const { elements } = this.state @@ -119,10 +115,24 @@ }) } - cardAddElement = (ids, element) => { - const { cards, cardCell } = this.props + cardDelElement = (id, eleId) => { + const { cardCell } = this.props - if (!ids || ids.length !== 2 || ids[0] !== cards.uuid || ids[1] !== cardCell.uuid) return + if (id !== cardCell.uuid) return + + this.setState({elements: this.state.elements.filter(item => item.uuid !== eleId)}) + } + + cardAddElement = (id, element) => { + const { cardCell } = this.props + + if (id !== cardCell.uuid) return + if (window.GLOB.$lock) return + + window.GLOB.$lock = true + setTimeout(() => { + window.GLOB.$lock = false + }, 200) const { elements } = this.state @@ -132,15 +142,22 @@ } handleStyle = (element) => { - const { cards, cardCell } = this.props - let _style = element.style ? fromJS(element.style).toJS() : {} - let options = ['font', 'border', 'padding', 'margin', 'backgroundColor'] + let options = ['font', 'border', 'padding', 'margin', 'background'] if (element.eleType === 'button') { - options.push('width') + if (element.OpenType === 'form' && element.formType !== 'scan') { + options = ['margin', 'float'] + } else { + options.push('width', 'minHeight', 'float') + } + if (element.wrapStyle) { + _style.float = element.wrapStyle.textAlign || 'left' + } } else if (element.eleType === 'picture') { options = ['border', 'margin'] + } else if (element.eleType === 'text') { + options[0] = 'font2' } else if (element.eleType === 'slider') { options = ['padding', 'margin'] } else if (element.eleType === 'splitline') { @@ -151,14 +168,17 @@ card: element }) - MKEmitter.emit('changeStyle', [cards.uuid, cardCell.uuid, element.uuid], options, _style) + MKEmitter.emit('changeStyle', options, _style, this.getStyle) } - getStyle = (comIds, style) => { - const { cards, cardCell } = this.props + getStyle = (style) => { const { card, elements } = this.state - if (comIds.length !== 3 || comIds[0] !== cards.uuid || comIds[1] !== cardCell.uuid || !card) return + // if (card.eleType === 'button') { + // if ((style.paddingLeft || style.paddingRight) && !style.width) { + // style.width = 'auto' + // } + // } let _card = this.resetCardStyle(card, style) @@ -176,35 +196,30 @@ resetCardStyle = (card, style) => { let _card = fromJS(card).toJS() - - if (_card.eleType === 'text' || _card.eleType === 'number') { - _card.style = style - let fontSize = 14 - let lineHeight = 1.5 + if (['text', 'number', 'formula', 'currentDate', 'sequence', 'icon'].includes(_card.eleType)) { + _card.style = style let line = _card.height || null - if (_card.style.fontSize) { - fontSize = parseInt(_card.style.fontSize) - } - if (_card.style.lineHeight) { - lineHeight = parseFloat(_card.style.lineHeight) + if (['currentDate', 'sequence', 'icon'].includes(_card.eleType)) { + line = 1 } if (line) { + let fontSize = 14 + let lineHeight = 1.5 + + if (_card.style.fontSize) { + fontSize = parseInt(_card.style.fontSize) + } + if (_card.style.lineHeight) { + lineHeight = parseFloat(_card.style.lineHeight) + } + _card.innerHeight = fontSize * lineHeight * line + } else { + _card.innerHeight = 'auto' } - } else if (_card.eleType === 'sequence') { - _card.style = style - - let fontSize = 14 - let lineHeight = 1.5 - - if (_card.style.fontSize) { - fontSize = parseInt(_card.style.fontSize) - } - - _card.innerHeight = fontSize * lineHeight } else if (_card.eleType === 'barcode') { _card.style = style @@ -216,7 +231,12 @@ _card.innerHeight = _card.barHeight + (_card.displayValue === 'true' ? fontSize + 2 : 0) } else if (_card.eleType === 'button') { // 鎷嗗垎style - _card.style = style + _card.style = fromJS(style).toJS() + + if (style.float) { + _card.wrapStyle = {textAlign: style.float} + delete _card.style.float + } } else { _card.style = style } @@ -242,10 +262,12 @@ if (card.eleType === 'button') { this.handleAction(card) } else { + let anchors = MenuUtils.getAnchors(window.GLOB.customMenu.components, cards.uuid) || [] + this.setState({ visible: true, card: card, - formlist: getCardCellForm(card, cards.type, cards.subtype, cardCell) + formlist: getCardCellForm(card, cards.type, cards.subtype, cardCell, anchors) }) } } @@ -260,7 +282,7 @@ if (usefulFields) { try { usefulFields = JSON.parse(usefulFields) - } catch { + } catch (e) { usefulFields = [] } } else { @@ -268,27 +290,28 @@ } let ableField = usefulFields.join(', ') + let msg = `鍑芥暟鍚嶇О闇�浠�${ableField}绛夊瓧绗﹀紑濮�;` let functip = <div> - <p style={{marginBottom: '5px'}}>{this.state.dict['model.tooltip.func.innerface'].replace('@ableField', ableField)}</p> + <p style={{marginBottom: '5px'}}>{msg}</p> </div> - let menulist = sessionStorage.getItem('fstMenuList') - if (menulist) { - try { - menulist = JSON.parse(menulist) - } catch { - menulist = [] + let supId = '' + if (cards.setting && cards.setting.supModule) { + let pid = cards.setting.supModule[cards.setting.supModule.length - 1] + if (pid && pid !== 'empty') { + supId = pid + } else { + supId = '' } - } else { - menulist = [] } - let modules = MenuUtils.getSubModules(window.GLOB.customMenu.components, cards.uuid) + let modules = MenuUtils.getSubModules(window.GLOB.customMenu.components, cards.uuid, supId) || [] + let anchors = MenuUtils.getAnchors(window.GLOB.customMenu.components, cards.uuid) || [] this.setState({ actvisible: true, card: card, - formlist: getActionForm(card, functip, cards, usefulFields, 'card', menulist, modules) + formlist: getActionForm(card, functip, cards, usefulFields, modules, anchors) }) } @@ -296,11 +319,15 @@ * @description 鍙栨秷淇濆瓨锛屽鏋滃厓绱犱负鏂版坊鍏冪礌锛屽垯浠庡簭鍒椾腑鍒犻櫎 */ editModalCancel = () => { - const { card, elements } = this.state + const { card, elements, appType } = this.state let _elements = null if (card.focus) { _elements = elements.filter(item => item.uuid !== card.uuid) + + if (card.OpenType === 'popview' && appType !== 'mob') { // 寮圭獥鏍囩鎸夐挳锛屼粠澶嶅埗鍒楄〃涓垹闄� + MKEmitter.emit('delButtons', [card.uuid]) + } } else { _elements = elements } @@ -310,6 +337,8 @@ elements: _elements, visible: false, actvisible: false + }, () => { + this.props.updateElement(_elements) }) } @@ -323,24 +352,30 @@ let _elements = elements.map(cell => { if (cell.uuid === res.uuid) { res.style = cell.style || {} - res.$type = cell.$type || '' - if (res.eleType === 'splitline' && cell.eleType !== 'splitline') { + if (res.eleType === 'splitline' && (cell.eleType !== 'splitline' || cell.focus)) { res.style.paddingTop = '5px' res.style.paddingBottom = '5px' - } else if (res.eleType === 'text' || res.eleType === 'number') { - let fontSize = 14 - let lineHeight = 1.5 + } else if (['text', 'number', 'formula', 'currentDate', 'sequence', 'icon'].includes(res.eleType)) { let line = res.height || null - - if (res.style && res.style.fontSize) { - fontSize = parseInt(res.style.fontSize) - } - if (res.style && res.style.lineHeight) { - lineHeight = parseFloat(res.style.lineHeight) + + if (['currentDate', 'sequence', 'icon'].includes(res.eleType)) { + line = 1 } if (line) { + let fontSize = 14 + let lineHeight = 1.5 + + if (res.style && res.style.fontSize) { + fontSize = parseInt(res.style.fontSize) + } + if (res.style && res.style.lineHeight) { + lineHeight = parseFloat(res.style.lineHeight) + } + res.innerHeight = fontSize * lineHeight * line + } else { + res.innerHeight = 'auto' } if (res.eleType === 'text' && res.link && !res.style.color) { @@ -380,11 +415,25 @@ this.actionFormRef.handleConfirm().then(res => { let _elements = elements.map(cell => { if (cell.uuid === res.uuid) { - res = {...cell, ...res} - delete res.focus - let style = {} + res.eleType = cell.eleType || null + res.style = cell.style || null + res.modal = cell.modal || null + res.wrapStyle = cell.wrapStyle || null + // res = {...cell, ...res} - if (res.class !== cell.class || res.show !== cell.show || !res.style) { + // if (!res.control) { + // delete res.controlField + // delete res.controlVal + // } + + // delete res.focus + + if (res.OpenType === 'form') { + if (cell.OpenType !== 'form') { + res.style = {} + } + } else if (res.class !== cell.class || res.show !== cell.show || !res.style) { + let style = {} if (res.show === 'link' || res.show === 'icon') { style.color = color[res.class] style.backgroundColor = 'transparent' @@ -392,8 +441,8 @@ style.color = '#ffffff' style.backgroundColor = color[res.class] } + res.style = {...res.style, ...style} } - res.style = {...res.style, ...style} return res } @@ -413,23 +462,18 @@ * @description 鎸夐挳鍒犻櫎 */ deleteElement = (card) => { - const { cards, cardCell, side } = this.props - const { dict, elements } = this.state + const { cardCell, side } = this.props + const { elements, appType } = this.state let _this = this confirm({ - content: dict['model.confirm'] + dict['model.delete'] + '鍏冪礌鍚楋紵', + content: '纭畾鍒犻櫎鍏冪礌鍚楋紵', onOk() { let _elements = elements.filter(item => item.uuid !== card.uuid) - - if (card.eleType === 'button') { - MKEmitter.emit('delButtons', [card.uuid]) - } + if (card.OpenType === 'popview' || card.verify || card.modal) { card.$parentId = cardCell.uuid card.$side = side || '' - - MKEmitter.emit('logButton', cards.uuid, card) } _this.setState({ @@ -437,6 +481,11 @@ }, () => { _this.props.updateElement(_elements) }) + + if (card.eleType !== 'button') return + if (appType === 'mob' || (appType === 'pc' && card.OpenType !== 'popview')) return + + MKEmitter.emit('delButtons', [card.uuid]) }, onCancel() {} }) @@ -450,6 +499,7 @@ profVisible: true, card: element }) + MKEmitter.emit('modalStatus', '楠岃瘉淇℃伅') } /** @@ -473,6 +523,8 @@ }, () => { this.props.updateElement(_elements) }) + + MKEmitter.emit('modalStatus', false) }) } @@ -483,31 +535,25 @@ if ((sessionStorage.getItem('style-control') && sessionStorage.getItem('style-control') === 'true')) return - if (btn.eleType === 'button') { - if (btn.OpenType === 'pop') { - if (!btn.modal) { - btn.modal = { - setting: { title: btn.label, width: appType === 'mob' ? 100 : 60, cols: '2', container: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, - tables: [], - groups: [], - fields: [] - } + if (btn.OpenType === 'pop' || btn.execMode === 'pop') { + if (!btn.modal) { + btn.modal = { + setting: { title: btn.label, width: appType === 'mob' ? 100 : 60, cols: '2', container: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, + tables: [], + groups: [], + fields: [] } - - MKEmitter.emit('changeModal', cards, btn) - } else if (btn.OpenType === 'popview') { - MKEmitter.emit('changePopview', cards, btn) - } else if (btn.OpenType === 'innerpage' && btn.pageTemplate === 'page') { - MKEmitter.emit('changeEditMenu', {MenuID: btn.uuid, copyMenuId: btn.copyMenuId}) - } else if (btn.OpenType === 'innerpage' && btn.pageTemplate === 'linkpage') { - MKEmitter.emit('changeEditMenu', {MenuID: btn.linkmenu}) } + + MKEmitter.emit('changeModal', cards, btn) + } else if (btn.OpenType === 'popview') { + MKEmitter.emit('changePopview', cards, btn) + } else if (btn.OpenType === 'innerpage' && btn.pageTemplate === 'linkpage') { + MKEmitter.emit('changeEditMenu', {MenuID: btn.linkmenu}) + } else if (btn.OpenType === 'funcbutton' && (btn.funcType === 'copyurl' || btn.funcType === 'scan') && btn.linkmenu) { + MKEmitter.emit('changeEditMenu', {MenuID: btn.linkmenu}) } else { - if (btn.link === 'page') { - MKEmitter.emit('changeEditMenu', {MenuID: btn.uuid, copyMenuId: btn.copyMenuId}) - } else if (btn.link === 'linkpage') { - MKEmitter.emit('changeEditMenu', {MenuID: btn.linkmenu}) - } + this.handleElement(item) } } @@ -552,9 +598,10 @@ } dropButton = (id) => { - const { cards } = this.props + const { cards, cardCell } = this.props if (!cards.action) return + if (cardCell.type === 'custom') return let index = cards.action.findIndex(item => item.uuid === id) @@ -563,25 +610,76 @@ let btn = cards.action[index] btn.eleType = 'button' + if (!btn.width) { + btn.width = 12 + } + if (btn.color) { + btn.style = btn.style || {} + btn.style.color = '#ffffff' + if (btn.color === 'primary') { + btn.style.backgroundColor = '#1677ff' + } else if (btn.color === 'danger') { + btn.style.backgroundColor = '#ff3141' + } else if (btn.color === 'warning') { + btn.style.backgroundColor = '#ff8f1f' + } else if (btn.color === 'success') { + btn.style.backgroundColor = '#00b578' + } else if (btn.color === 'light') { + btn.style.backgroundColor = '#cccccc' + } + } + let _elements = [...this.state.elements, btn] - let _action = cards.action.filter(item => item.uuid !== id) this.setState({ elements: _elements }, () => { - this.props.updateElement(_elements, _action) + this.props.updateElement(_elements, btn) }) + } + + getVerify = (card) => { + const { cards } = this.props + + if (!card) return null + + if (['pop', 'prompt', 'exec', 'form'].includes(card.OpenType)) { + return <VerifyCard + card={card} + config={cards} + columns={cards.columns} + wrappedComponentRef={(inst) => this.verifyRef = inst} + /> + } else if (card.OpenType === 'excelIn') { + return <VerifyExcelIn + card={card} + columns={cards.columns} + wrappedComponentRef={(inst) => this.verifyRef = inst} + /> + } else if (card.OpenType === 'excelOut') { + return <VerifyExcelOut + card={card} + config={cards} + wrappedComponentRef={(inst) => this.verifyRef = inst} + /> + } else if (card.OpenType === 'funcbutton' && card.funcType === 'print') { + return <VerifyPrint + card={card} + columns={cards.columns} + wrappedComponentRef={(inst) => this.verifyRef = inst} + /> + } } render() { const { cards, cardCell } = this.props - const { elements, visible, actvisible, profVisible, card, dict } = this.state + const { elements, visible, actvisible, profVisible, card, record } = this.state return ( <div className="model-menu-card-cell-list"> <DragElement list={elements} - parent={{...cardCell, components: elements}} + parent={cardCell} fields={cards.columns} updateMarks={this.updateMarks} handleList={this.handleList} @@ -592,94 +690,73 @@ handleSubConfig={this.handleSubConfig} deleteMenu={this.deleteElement} /> - {/* 缂栬緫鎸夐挳锛氬鍒躲�佺紪杈� */} - <Modal - title={'缂栬緫鍏冪礌'} - visible={visible} - width={800} - maskClosable={false} - onCancel={this.editModalCancel} - onOk={this.handleSubmit} - destroyOnClose - > - <ElementForm - dict={dict} - card={card} - formlist={this.state.formlist} - inputSubmit={this.handleSubmit} - config={cards} - wrappedComponentRef={(inst) => this.elementFormRef = inst} - /> - </Modal> - {/* 缂栬緫鎸夐挳锛氬鍒躲�佺紪杈� */} - <Modal - title={dict['model.action'] + '-' + (card && card.copyType === 'action' ? dict['model.copy'] : dict['model.edit'])} - visible={actvisible} - width={800} - maskClosable={false} - onCancel={this.editModalCancel} - footer={[ - <Button key="cancel" onClick={this.editModalCancel}>{dict['model.cancel']}</Button>, - <Button key="confirm" type="primary" onClick={this.handleActionSubmit}>{dict['model.confirm']}</Button> - ]} - destroyOnClose - > - <ActionForm - dict={dict} - type="card" - card={card} - formlist={this.state.formlist} - inputSubmit={this.handleActionSubmit} - setting={cards.setting} - wrappedComponentRef={(inst) => this.actionFormRef = inst} - /> - </Modal> - {/* 鎸夐挳浣跨敤绯荤粺瀛樺偍杩囩▼鏃讹紝楠岃瘉淇℃伅妯℃�佹 */} - <Modal - wrapClassName="model-table-action-verify-modal" - title={'楠岃瘉淇℃伅'} - visible={profVisible} - width={'75vw'} - maskClosable={false} - okText={dict['model.submit']} - onOk={this.verifySubmit} - onCancel={() => { this.setState({ profVisible: false }) }} - destroyOnClose - > - {card && !card.execMode && card.OpenType !== 'excelIn' && card.OpenType !== 'excelOut' ? - <VerifyCard + <div onDoubleClick={(e) => e.stopPropagation()}> + {/* 缂栬緫鎸夐挳锛氬鍒躲�佺紪杈� */} + <Modal + title="缂栬緫鍏冪礌" + visible={visible} + width={850} + maskClosable={false} + onCancel={this.editModalCancel} + onOk={this.handleSubmit} + destroyOnClose + > + <ElementForm card={card} - dict={dict} + formlist={this.state.formlist} + inputSubmit={this.handleSubmit} config={cards} - columns={cards.columns} - wrappedComponentRef={(inst) => this.verifyRef = inst} - /> : null - } - {card && card.execMode ? - <VerifyPrint + wrappedComponentRef={(inst) => this.elementFormRef = inst} + /> + </Modal> + {/* 缂栬緫鎸夐挳锛氬鍒躲�佺紪杈� */} + <Modal + title="鎸夐挳路缂栬緫" + visible={actvisible} + width={920} + maskClosable={false} + onCancel={this.editModalCancel} + footer={[ + record && record.intertype === 'inner' ? <CreateFunc key="create" ref="btnCreatFunc" trigger={this.creatFunc}/> : null, + <Button key="cancel" onClick={this.editModalCancel}>鍙栨秷</Button>, + <Button key="confirm" type="primary" onClick={this.handleActionSubmit}>纭畾</Button> + ]} + destroyOnClose + > + <ActionForm + type={cards.type === 'balcony' ? '' : 'card'} card={card} - dict={dict} - columns={cards.columns} - wrappedComponentRef={(inst) => this.verifyRef = inst} - /> : null - } - {card && card.OpenType === 'excelIn' ? - <VerifyExcelIn - card={card} - dict={dict} - columns={cards.columns} - wrappedComponentRef={(inst) => this.verifyRef = inst} - /> : null - } - {card && card.OpenType === 'excelOut' ? - <VerifyExcelOut - card={card} - dict={dict} - config={cards} - wrappedComponentRef={(inst) => this.verifyRef = inst} - /> : null - } - </Modal> + formlist={this.state.formlist} + inputSubmit={this.handleActionSubmit} + setting={cards.setting} + updRecord={(record) => this.setState({record: fromJS(record).toJS()})} + wrappedComponentRef={(inst) => this.actionFormRef = inst} + /> + </Modal> + {/* 鎸夐挳浣跨敤绯荤粺瀛樺偍杩囩▼鏃讹紝楠岃瘉淇℃伅妯℃�佹 */} + <Modal + wrapClassName="mk-pop-modal" + visible={profVisible} + width={'90vw'} + maskClosable={false} + okText="鎻愪氦" + onOk={this.verifySubmit} + onCancel={() => { + if (this.verifyRef.handleCancel) { + this.verifyRef.handleCancel().then(() => { + this.setState({ profVisible: false }) + MKEmitter.emit('modalStatus', false) + }) + } else { + this.setState({ profVisible: false }) + MKEmitter.emit('modalStatus', false) + } + }} + destroyOnClose + > + {this.getVerify(card)} + </Modal> + </div> </div> ) } -- Gitblit v1.8.0