| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Modal, Button } from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import { getCardCellForm } from './formconfig' |
| | | import { getActionForm, getBaseTableActionForm } from '@/menu/components/share/actioncomponent/formconfig' |
| | | |
| | | import Utils, { FuncUtils } from '@/utils/utils.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import MenuUtils from '@/utils/utils-custom.js' |
| | | import ElementForm from './elementform' |
| | |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (this.props.side !== nextProps.side) { |
| | | if (this.props.side !== nextProps.side && nextProps.side) { |
| | | this.setState({ |
| | | elements: fromJS(nextProps.elements).toJS() |
| | | }) |
| | |
| | | this.setState({elements: this.state.elements.filter(item => item.uuid !== eleId)}) |
| | | } |
| | | |
| | | cardAddElement = (id, element) => { |
| | | const { cardCell } = this.props |
| | | cardAddElement = (id, element, type) => { |
| | | const { cardCell, side } = this.props |
| | | |
| | | if (id !== cardCell.uuid) return |
| | | if (window.GLOB.$lock) return |
| | | if (type && side !== type) return |
| | | |
| | | window.GLOB.$lock = true |
| | | setTimeout(() => { |
| | |
| | | options = ['margin', 'float'] |
| | | } else { |
| | | options.push('width', 'minHeight', 'float') |
| | | _style.minHeight = _style.minHeight || '28px' |
| | | } |
| | | if (element.wrapStyle) { |
| | | _style.float = element.wrapStyle.textAlign || 'left' |
| | | } |
| | | } else if (element.eleType === 'picture') { |
| | | options = ['border', 'margin'] |
| | | options = ['background', 'border', 'margin'] |
| | | } else if (element.eleType === 'color') { |
| | | options = ['border', 'margin', 'padding'] |
| | | } else if (element.eleType === 'number' || element.eleType === 'icon') { |
| | | options.push('display') |
| | | } else if (element.eleType === 'text') { |
| | | options[0] = 'font2' |
| | | options.push('display') |
| | | } else if (element.eleType === 'slider') { |
| | | options = ['padding', 'margin'] |
| | | } else if (element.eleType === 'splitline') { |
| | | options = ['padding', 'margin'] |
| | | } |
| | | |
| | | if (element.eleType !== 'button') { |
| | | options.push('position') |
| | | } |
| | | |
| | | options.push('clear') |
| | |
| | | card: element |
| | | }) |
| | | |
| | | MKEmitter.emit('changeStyle', options, _style, this.getStyle) |
| | | MKEmitter.emit('changeStyle', options, _style, this.getStyle, 'mk-' + element.eleType) |
| | | } |
| | | |
| | | getStyle = (style) => { |
| | | const { card, elements } = this.state |
| | | |
| | | // if (card.eleType === 'button') { |
| | | // if ((style.paddingLeft || style.paddingRight) && !style.width) { |
| | | // style.width = 'auto' |
| | | // } |
| | | // } |
| | | |
| | | let _card = this.resetCardStyle(card, style) |
| | | |
| | |
| | | _card.style = style |
| | | let line = _card.height || null |
| | | |
| | | if (['currentDate', 'sequence', 'icon'].includes(_card.eleType)) { |
| | | if (['currentDate', 'sequence'].includes(_card.eleType) || (_card.eleType === 'icon' && _card.tipType !== 'text')) { |
| | | line = 1 |
| | | } |
| | | |
| | |
| | | _card.wrapStyle = {textAlign: style.float} |
| | | delete _card.style.float |
| | | } |
| | | } else if (_card.eleType === 'picture') { |
| | | _card.style = style |
| | | delete _card.style.backgroundImage |
| | | } else { |
| | | _card.style = style |
| | | } |
| | |
| | | * @description 按钮编辑,获取按钮表单信息 |
| | | */ |
| | | handleAction = (card) => { |
| | | const { cards } = this.props |
| | | const { cards, side } = this.props |
| | | |
| | | let usefulFields = sessionStorage.getItem('permFuncField') |
| | | if (usefulFields) { |
| | |
| | | }) |
| | | } 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) |
| | | formlist: getActionForm(card, functip, cards, usefulFields, modules, anchors, side) |
| | | }) |
| | | } |
| | | } |
| | |
| | | const { elements } = this.state |
| | | |
| | | this.elementFormRef.handleConfirm().then(res => { |
| | | if (res.width % 0.5) { |
| | | res.width = parseInt(res.width / 0.5) * 0.5 |
| | | } |
| | | if (res.width % 1) { |
| | | res.width = (res.width + '').replace(/.5/, 'x') |
| | | } |
| | | |
| | | let _elements = elements.map(cell => { |
| | | if (cell.uuid === res.uuid) { |
| | | res.style = cell.style || {} |
| | | |
| | | if (!['text', 'number', 'icon'].includes(res.eleType)) { |
| | | delete res.style.display |
| | | } |
| | | |
| | | if (res.eleType === 'splitline' && (cell.eleType !== 'splitline' || cell.focus)) { |
| | | res.style.paddingTop = '5px' |
| | | res.style.paddingBottom = '5px' |
| | | } else if (['text', 'number', 'formula', 'currentDate', 'sequence', 'icon'].includes(res.eleType)) { |
| | | let line = res.height || null |
| | | |
| | | if (['currentDate', 'sequence', 'icon'].includes(res.eleType)) { |
| | | if (['currentDate', 'sequence'].includes(res.eleType) || (res.eleType === 'icon' && res.tipType !== 'text')) { |
| | | line = 1 |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | res.innerHeight = res.barHeight + (res.displayValue === 'true' ? fontSize + 2 : 0) |
| | | } else if (res.eleType === 'picture') { |
| | | delete res.style.backgroundImage |
| | | } |
| | | |
| | | return res |
| | |
| | | if (cell.uuid === res.uuid) { |
| | | res.eleType = cell.eleType || null |
| | | res.style = cell.style || null |
| | | // res.modal = cell.modal || null |
| | | // res.config = cell.config || null |
| | | res.wrapStyle = cell.wrapStyle || null |
| | | // res = {...cell, ...res} |
| | | |
| | | // if (!res.control) { |
| | | // delete res.controlField |
| | | // delete res.controlVal |
| | | // } |
| | | |
| | | // delete res.focus |
| | | |
| | | if (res.OpenType === 'form') { |
| | | if (cell.OpenType !== 'form') { |
| | |
| | | if (res.show === 'link' || res.show === 'icon') { |
| | | style.color = color[cl] |
| | | style.backgroundColor = 'transparent' |
| | | } else if (res.class === 'default') { |
| | | style.color = 'rgba(0, 0, 0, 0.65)' |
| | | style.backgroundColor = '#fff' |
| | | style.borderColor = '#d9d9d9' |
| | | } else if (res.class.indexOf('border') > -1) { |
| | | style.color = color[cl] |
| | | style.backgroundColor = '#fff' |
| | | style.borderColor = color[cl] |
| | | } else { |
| | | style.color = '#ffffff' |
| | | style.backgroundColor = color[cl] |
| | | } |
| | | res.style = {...res.style, ...style} |
| | | } |
| | | |
| | | res.updateTime = moment().format('YYYY-MM-DD HH:mm') |
| | | |
| | | return res |
| | | } |
| | |
| | | let _elements = elements.map(cell => { |
| | | if (cell.uuid === card.uuid) { |
| | | cell.verify = res |
| | | cell.updateTime = moment().format('YYYY-MM-DD HH:mm') |
| | | } |
| | | |
| | | return cell |
| | |
| | | } |
| | | |
| | | handleSubConfig = (item) => { |
| | | const { cards } = this.props |
| | | const { cards, side } = this.props |
| | | const { appType } = this.state |
| | | let btn = fromJS(item).toJS() |
| | | |
| | | if (side === 'sub') { |
| | | btn.$sub = true |
| | | } |
| | | |
| | | if ((sessionStorage.getItem('style-control') && sessionStorage.getItem('style-control') === 'true')) return |
| | | |
| | |
| | | } |
| | | |
| | | dropButton = (id) => { |
| | | const { cards, cardCell } = this.props |
| | | const { cards } = this.props |
| | | |
| | | if (!cards.action) return |
| | | if (cardCell.type === 'custom') return |
| | | |
| | | let index = cards.action.findIndex(item => item.uuid === id) |
| | | |
| | |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 创建按钮存储过程 |
| | | */ |
| | | creatFunc = () => { |
| | | const menu = window.GLOB.customMenu |
| | | let _config = fromJS(this.props.cards).toJS() |
| | | |
| | | this.actionFormRef.handleConfirm().then(res => { |
| | | let btn = res // 按钮信息 |
| | | let newLText = '' // 创建存储过程sql |
| | | let DelText = '' // 删除存储过程sql |
| | | |
| | | if (btn.intertype !== 'inner') return |
| | | |
| | | if (btn.OpenType === 'pop') { |
| | | let _param = { |
| | | funcName: btn.innerFunc, |
| | | name: _config.setting.tableName || '', |
| | | fields: btn.modal ? btn.modal.fields : [], |
| | | menuNo: menu.MenuNo |
| | | } |
| | | newLText = Utils.formatOptions(FuncUtils.getfunc(_param, btn, menu, _config)) |
| | | DelText = Utils.formatOptions(FuncUtils.dropfunc(btn.innerFunc)) |
| | | } else if (btn.OpenType === 'excelIn') { |
| | | let _param = { |
| | | funcName: btn.innerFunc, |
| | | menuNo: menu.MenuNo |
| | | } |
| | | newLText = Utils.formatOptions(FuncUtils.getexcelInfunc(_param, btn, menu)) |
| | | DelText = Utils.formatOptions(FuncUtils.dropfunc(btn.innerFunc)) |
| | | } else if (btn.OpenType === 'excelOut') { |
| | | newLText = Utils.formatOptions(FuncUtils.getTableFunc(btn.innerFunc, menu, _config)) // 创建存储过程sql |
| | | DelText = Utils.formatOptions(FuncUtils.dropfunc(btn.innerFunc)) |
| | | } else { |
| | | let _param = { |
| | | funcName: btn.innerFunc, |
| | | name: _config.setting.tableName || '', |
| | | fields: '', |
| | | menuNo: menu.MenuNo |
| | | } |
| | | newLText = Utils.formatOptions(FuncUtils.getfunc(_param, btn, menu, _config)) |
| | | DelText = Utils.formatOptions(FuncUtils.dropfunc(btn.innerFunc)) |
| | | } |
| | | |
| | | this.refs.btnCreatFunc.exec(btn.innerFunc, newLText, DelText) |
| | | }) |
| | | } |
| | | |
| | | getVerify = (card) => { |
| | | const { cards } = this.props |
| | | const { cards, side } = this.props |
| | | |
| | | if (!card) return null |
| | | |
| | |
| | | return <VerifyCard |
| | | card={card} |
| | | config={cards} |
| | | columns={cards.columns} |
| | | side={side || ''} |
| | | columns={side === 'sub' ? cards.subColumns : cards.columns} |
| | | wrappedComponentRef={(inst) => this.verifyRef = inst} |
| | | /> |
| | | } else if (card.OpenType === 'excelIn') { |
| | | return <VerifyExcelIn |
| | | card={card} |
| | | columns={cards.columns} |
| | | columns={side === 'sub' ? cards.subColumns : cards.columns} |
| | | wrappedComponentRef={(inst) => this.verifyRef = inst} |
| | | /> |
| | | } else if (card.OpenType === 'excelOut') { |
| | |
| | | } else if (card.OpenType === 'funcbutton' && card.funcType === 'print') { |
| | | return <VerifyPrint |
| | | card={card} |
| | | columns={cards.columns} |
| | | columns={side === 'sub' ? cards.subColumns : cards.columns} |
| | | wrappedComponentRef={(inst) => this.verifyRef = inst} |
| | | /> |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { cards, cardCell } = this.props |
| | | const { cards, cardCell, side } = this.props |
| | | const { elements, visible, actvisible, profVisible, card, record } = this.state |
| | | |
| | | return ( |
| | | <div className="model-menu-card-cell-list"> |
| | | <div className={'model-menu-card-cell-list ' + (cardCell && cardCell.setting && cardCell.setting.layout === 'flex' ? 'mk-flex' : '') }> |
| | | <DragElement |
| | | list={elements} |
| | | parent={cardCell} |
| | | fields={cards.columns} |
| | | fields={side === 'sub' ? cards.subColumns : cards.columns} |
| | | updateMarks={this.updateMarks} |
| | | handleList={this.handleList} |
| | | handleMenu={this.handleElement} |
| | |
| | | {/* 编辑按钮:复制、编辑 */} |
| | | <Modal |
| | | title="编辑元素" |
| | | wrapClassName="mk-scroll-modal" |
| | | visible={visible} |
| | | width={850} |
| | | maskClosable={false} |
| | |
| | | > |
| | | <ElementForm |
| | | card={card} |
| | | side={side} |
| | | formlist={this.state.formlist} |
| | | inputSubmit={this.handleSubmit} |
| | | config={cards} |
| | |
| | | {/* 编辑按钮:复制、编辑 */} |
| | | <Modal |
| | | title="按钮·编辑" |
| | | wrapClassName="mk-scroll-modal" |
| | | visible={actvisible} |
| | | width={920} |
| | | maskClosable={false} |
| | | onCancel={this.editModalCancel} |
| | | footer={[ |
| | | record && record.intertype === 'inner' ? <CreateFunc key="create" ref="btnCreatFunc" trigger={this.creatFunc}/> : null, |
| | | record && record.intertype === 'inner' && cards.subtype === 'dualdatacard' ? <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'} |
| | | type={cards.type === 'balcony' || cardCell.$cardType === 'extendCard' ? '' : 'card'} |
| | | card={card} |
| | | formlist={this.state.formlist} |
| | | inputSubmit={this.handleActionSubmit} |