| | |
| | | |
| | | let _style = {opacity: isDragging ? 0.3 : 1} |
| | | |
| | | if (card.style) { |
| | | if (card.style && card.eleType !== 'tag') { |
| | | _style = {...card.style, opacity: isDragging ? 0.3 : 1} |
| | | _style = resetStyle(_style) |
| | | } |
| | | if (card.eleType === 'picture' && card.maxWidth) { |
| | | _style.maxWidth = card.maxWidth |
| | | let left = _style.marginLeft && _style.marginLeft !== '0px' ? _style.marginLeft : 'auto' |
| | | let right = _style.marginRight && _style.marginRight !== '0px' ? _style.marginRight : 'auto' |
| | | let left = _style.marginLeft || 'auto' |
| | | let right = _style.marginRight || 'auto' |
| | | |
| | | if (_style.marginLeft === '0px' && _style.marginRight === '0px') { |
| | | left = 'auto' |
| | | right = 'auto' |
| | | } |
| | | |
| | | _style.margin = (_style.marginTop || 0) + ' ' + right + ' ' + (_style.marginBottom || 0) + ' ' + left |
| | | delete _style.marginLeft |
| | | delete _style.marginRight |
| | |
| | | const getContent = () => { |
| | | if (card.eleType === 'sequence') { |
| | | return ( |
| | | <div style={{height: card.innerHeight || 'auto'}} className="ant-mk-text">1</div> |
| | | <div style={{height: card.innerHeight || 'auto'}} className="ant-mk-text">{card.prefix || ''}1{card.postfix || ''}</div> |
| | | ) |
| | | } else if (card.eleType === 'text' || card.eleType === 'number') { |
| | | let val = `${card.prefix || ''}${card.datatype === 'static' ? (card.value || '') : (card.field || '')}${card.postfix || ''}` |
| | |
| | | let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight} |
| | | val = <><span style={_s}>{card.prefix || ''}</span>{card.formula}<span style={_s}>{card.postfix || ''}</span></> |
| | | } |
| | | |
| | | return ( |
| | | <div className="ant-mk-text" style={{height: card.innerHeight || 'auto'}}> |
| | | {val} |
| | | </div> |
| | | ) |
| | | } else if (card.eleType === 'tag') { |
| | | let vals = [] |
| | | if (card.datatype === 'static') { |
| | | vals = card.value.split(',').filter(Boolean) |
| | | } else { |
| | | vals = [card.field || ''] |
| | | } |
| | | |
| | | let _style = resetStyle(card.style) |
| | | |
| | | return ( |
| | | <div className="ant-mk-tag"> |
| | | {vals.map((val, index) => <span key={index} className="tag-item" style={_style}>{val}</span>)} |
| | | </div> |
| | | ) |
| | | } else if (card.eleType === 'color') { |
| | |
| | | _style_ = {float: 'right'} |
| | | } |
| | | |
| | | let tableHCell = false |
| | | let mark = ['text', 'number', 'slider', 'sequence', 'formula', 'icon'].includes(card.eleType) |
| | | if (parent.setting && parent.setting.cardRole === 'header') { |
| | | tableHCell = true |
| | | mark = false |
| | | } else if (card.eleType === 'formula' && card.eval === 'func') { |
| | | mark = false |
| | | } |
| | | |
| | | let className = 'ant-col card-cell ant-col-' + card.width |
| | | |
| | | if (card.noValue === 'hide') { |
| | | className += ' no-value-hide' |
| | | } |
| | | |
| | | return ( |
| | |
| | | <CopyOutlined className="copy" title="复制" onClick={() => copyCard(id)} /> |
| | | <CloseOutlined className="close" title="删除" onClick={() => delCard(id)} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={() => changeStyle(id)}/> |
| | | {['text', 'number', 'slider', 'sequence', 'formula'].includes(card.eleType) && !tableHCell ? <MarkColumn field={card.field || ''} columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } |
| | | {mark ? <MarkColumn field={card.field || ''} columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } |
| | | </div> |
| | | } trigger="hover"> |
| | | <div ref={node => drag(drop(node))} style={_style_} className={'ant-col card-cell ant-col-' + card.width}> |
| | | <div ref={node => drag(drop(node))} style={_style_} className={className}> |
| | | <div style={_style} onClick={clickComponent} onDoubleClick={() => able && editCard(id)} id={card.uuid}> |
| | | {getContent()} |
| | | </div> |