From 03a22ec6f9ad7303d10b4c65bb5bc6fa5cbd448a Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期六, 22 十月 2022 23:21:42 +0800 Subject: [PATCH] 2022-10-22 --- src/menu/components/card/cardcellcomponent/index.jsx | 498 ++++++++++++++++++++++++++++++++----------------------- 1 files changed, 291 insertions(+), 207 deletions(-) diff --git a/src/menu/components/card/cardcellcomponent/index.jsx b/src/menu/components/card/cardcellcomponent/index.jsx index ea7caee..520b227 100644 --- a/src/menu/components/card/cardcellcomponent/index.jsx +++ b/src/menu/components/card/cardcellcomponent/index.jsx @@ -3,15 +3,14 @@ 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' +import { getActionForm, getBaseTableActionForm } from '@/menu/components/share/actioncomponent/formconfig' 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,20 +88,18 @@ 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 - - let _elements = elements.map(item => { + let _elements = this.state.elements.map(item => { if (keys.includes(item.uuid)) { return this.resetCardStyle(item, {...item.style, ...style}) } @@ -119,10 +113,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 +140,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') { - + 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 +166,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 +194,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 +229,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 } @@ -245,7 +263,7 @@ this.setState({ visible: true, card: card, - formlist: getCardCellForm(card, cards.type, cards.subtype, cardCell) + formlist: getCardCellForm(card, cards, cardCell) }) } } @@ -260,7 +278,7 @@ if (usefulFields) { try { usefulFields = JSON.parse(usefulFields) - } catch { + } catch (e) { usefulFields = [] } } else { @@ -268,39 +286,53 @@ } 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) - this.setState({ - actvisible: true, - card: card, - formlist: getActionForm(card, functip, cards.setting, usefulFields, 'card', menulist, modules, cards.columns) - }) + if (cards.subtype === 'basetable') { + this.setState({ + actvisible: true, + card: card, + formlist: getBaseTableActionForm(card, functip, cards, usefulFields, modules) + }) + } else { + let anchors = MenuUtils.getAnchors(window.GLOB.customMenu.components, cards.uuid) || [] + + this.setState({ + actvisible: true, + card: card, + formlist: getActionForm(card, functip, cards, usefulFields, modules, anchors) + }) + } } /** * @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 +342,8 @@ elements: _elements, visible: false, actvisible: false + }, () => { + this.props.updateElement(_elements) }) } @@ -323,24 +357,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,20 +420,35 @@ 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 cl = res.class.replace('border-', '') + let style = {} if (res.show === 'link' || res.show === 'icon') { - style.color = color[res.class] + style.color = color[cl] style.backgroundColor = 'transparent' } else { style.color = '#ffffff' - style.backgroundColor = color[res.class] + style.backgroundColor = color[cl] } + res.style = {...res.style, ...style} } - res.style = {...res.style, ...style} return res } @@ -413,23 +468,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 +487,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 +505,7 @@ profVisible: true, card: element }) + MKEmitter.emit('modalStatus', '楠岃瘉淇℃伅') } /** @@ -473,40 +529,37 @@ }, () => { this.props.updateElement(_elements) }) + + MKEmitter.emit('modalStatus', false) }) } handleSubConfig = (item) => { const { cards } = this.props + const { appType } = this.state let btn = fromJS(item).toJS() 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: 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) } } @@ -551,9 +604,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) @@ -562,25 +616,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} @@ -591,94 +696,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