| | |
| | | import { getTableSetting, getCarouselSetting } from './options' |
| | | import Utils from '@/utils/utils.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | // import './index.scss' |
| | | import './index.scss' |
| | | |
| | | const NormalForm = asyncIconComponent(() => import('@/components/normalform')) |
| | | const NodesWrap = asyncComponent(() => import('./node-wrap')) |
| | | const CardCellComponent = asyncComponent(() => import('../cardcellcomponent')) |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteController = asyncIconComponent(() => import('@/components/paste')) |
| | | |
| | | class CardBoxComponent extends Component { |
| | | static propTpyes = { |
| | |
| | | } |
| | | |
| | | addElement = () => { |
| | | const { cards } = this.props |
| | | const { card } = this.state |
| | | |
| | | let newcard = {} |
| | |
| | | window.GLOB.$lock = false |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', [cards.uuid, card.uuid], newcard) |
| | | MKEmitter.emit('cardAddElement', card.uuid, newcard) |
| | | } |
| | | |
| | | addButton = () => { |
| | | const { cards } = this.props |
| | | const { card } = this.state |
| | | |
| | | let newcard = {eleType: 'button', label: 'button', verify: null, show: 'link', sqlType: '', Ot: 'requiredSgl', OpenType: 'prompt', icon: '', class: 'primary', intertype: 'system', execSuccess: 'grid', execError: 'never', popClose: 'never'} |
| | |
| | | |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', [cards.uuid, card.uuid], newcard) |
| | | MKEmitter.emit('cardAddElement', card.uuid, newcard) |
| | | } |
| | | |
| | | changeStyle = () => { |
| | |
| | | this.props.updateElement(_card) |
| | | } |
| | | |
| | | paste = (element, resolve) => { |
| | | const { card } = this.state |
| | | |
| | | let _uuid = Utils.getuuid() |
| | | |
| | | if (element.copyType === 'action') { |
| | | element.eleType = 'button' |
| | | element.width = element.width || 12 |
| | | } |
| | | |
| | | element.uuid = _uuid |
| | | element.focus = true |
| | | |
| | | resolve({status: true}) |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', card.uuid, element) |
| | | } |
| | | |
| | | render() { |
| | | const { cards } = this.props |
| | | const { card } = this.state |
| | |
| | | let _style = {...card.style} |
| | | |
| | | if (cards.type === 'carousel') { |
| | | _style.height = cards.style.height |
| | | _style.height = cards.wrap.height |
| | | } |
| | | |
| | | let control = true |
| | |
| | | _style = resetStyle(_style) |
| | | |
| | | return ( |
| | | <div className="ant-col ant-col-24"> |
| | | <div className="card-item" style={_style}> |
| | | <CardCellComponent cards={cards} cardCell={card} elements={card.elements} updateElement={this.updateCard}/> |
| | | <div className="card-control"> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <PlusOutlined className="plus" title="添加元素" onClick={this.addElement}/> |
| | | <PlusSquareOutlined className="plus" title="添加按钮" onClick={this.addButton}/> |
| | | {cards.type !== 'timeline' ? <NormalForm title="卡片设置" width={800} update={this.updateSetting} getForms={this.getSettingForms}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> : <NodesWrap card={card} updateMenus={this.updateNodes}/>} |
| | | {cards.type !== 'timeline' ? <CopyComponent type="cardcell" card={card}/> : null} |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | {control ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <ArrowLeftOutlined className="plus" title="前移" onClick={() => this.props.move(card, 'left')} /> |
| | | <ArrowRightOutlined className="close" title="后移" onClick={() => this.props.move(card, 'right')} /> |
| | | </div> |
| | | } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}> |
| | | <SwapOutlined id={card.uuid + 'swap'}/> |
| | | </Popover> : null} |
| | | {control ? <DeleteOutlined className="close" title="删除卡片" onClick={() => this.props.deleteElement(card)} /> : null} |
| | | </div> |
| | | } trigger="hover"> |
| | | <ToolOutlined/> |
| | | </Popover> |
| | | </div> |
| | | <div className="card-item" style={_style}> |
| | | <CardCellComponent cards={cards} cardCell={card} elements={card.elements} updateElement={this.updateCard}/> |
| | | <div className="card-control"> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <PlusOutlined className="plus" title="添加元素" onClick={this.addElement}/> |
| | | <PlusSquareOutlined className="plus" title="添加按钮" onClick={this.addButton}/> |
| | | {cards.type !== 'timeline' ? <NormalForm title="卡片设置" width={800} update={this.updateSetting} getForms={this.getSettingForms}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> : <NodesWrap card={card} updateMenus={this.updateNodes}/>} |
| | | {cards.type !== 'timeline' ? <CopyComponent type="cardcell" card={card}/> : null} |
| | | <PasteController options={['action', 'customCardElement']} updateConfig={this.paste} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | {control ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <ArrowLeftOutlined className="plus" title="前移" onClick={() => this.props.move(card, 'left')} /> |
| | | <ArrowRightOutlined className="close" title="后移" onClick={() => this.props.move(card, 'right')} /> |
| | | </div> |
| | | } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}> |
| | | <SwapOutlined id={card.uuid + 'swap'}/> |
| | | </Popover> : null} |
| | | {control ? <DeleteOutlined className="close" title="删除卡片" onClick={() => this.props.deleteElement(card)} /> : null} |
| | | </div> |
| | | } trigger="hover"> |
| | | <ToolOutlined/> |
| | | </Popover> |
| | | </div> |
| | | </div> |
| | | ) |