| | |
| | | import React from 'react' |
| | | import { useDrag, useDrop } from 'react-dnd' |
| | | import { Popover, Button, Switch, Checkbox } from 'antd' |
| | | import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined, ProfileOutlined, WarningOutlined } from '@ant-design/icons' |
| | | import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined, ProfileOutlined, WarningOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons' |
| | | |
| | | import { resetStyle } from '@/utils/utils-custom.js' |
| | | import MkIcon from '@/components/mk-icon' |
| | |
| | | let warning = null |
| | | if (['pop', 'prompt', 'exec', 'form'].includes(card.OpenType)) { |
| | | hasProfile = true |
| | | if (card.formType === 'count_line') { |
| | | hasProfile = false |
| | | } |
| | | } else if (card.OpenType === 'excelIn' || card.OpenType === 'excelOut') { |
| | | hasProfile = true |
| | | } else if (card.funcType === 'print') { |
| | |
| | | if (card.OpenType === 'form') { |
| | | if (card.formType === 'switch') { |
| | | btnElement = (<Switch style={_style} className={card.size === 'large' ? 'ant-switch-large' : ''} size={card.size} checkedChildren={card.openText || ''} unCheckedChildren={card.closeText || ''}/>) |
| | | } else if (card.formType === 'counter' || card.formType === 'count_line') { |
| | | btnElement = (<div style={_style} className={'mk-counter ' + card.size}><span><MinusOutlined /></span><span>1</span><span><PlusOutlined /></span></div>) |
| | | } else if (card.formType === 'radio') { |
| | | btnElement = (<Checkbox style={_style}></Checkbox>) |
| | | } else { |
| | |
| | | } else if (card.show === 'icon') { |
| | | btnElement = (<Button style={_style} type="link"><MkIcon type={card.icon}/>{warning}</Button>) |
| | | } else if (card.show === 'link') { |
| | | btnElement = (<Button style={_style} type="link">{card.label}{card.icon ? <MkIcon type={card.icon}/> : null}{warning}</Button>) |
| | | btnElement = (<Button style={_style} type="link">{card.showName || card.label}{card.icon ? <MkIcon type={card.icon}/> : null}{warning}</Button>) |
| | | } else { |
| | | btnElement = (<Button style={_style}>{card.icon ? <MkIcon type={card.icon}/> : null}{card.label}{warning}</Button>) |
| | | btnElement = (<Button style={_style}>{card.icon ? <MkIcon type={card.icon}/> : null}{card.showName || card.label}{warning}</Button>) |
| | | } |
| | | |
| | | let _style_ = {opacity: isDragging ? 0.3 : 1, ...card.wrapStyle} |
| | | |
| | | if (card.style && card.style.clear === 'left') { |
| | | _style_.clear = 'left' |
| | | } else if (card.style && card.style.clear === 'right') { |
| | | _style_.float = 'right' |
| | | } |
| | | |
| | | let className = card.width || 0 |
| | | if (card.hidden === 'true') { |
| | | className += ' mk-hidden' |
| | | } |
| | | if (card.checkType) { |
| | | className += ' ' + card.checkType |
| | | } |
| | | |
| | | let updateTime = null |
| | | |
| | | if (card.updateTime && card.updateTime.indexOf(window.GLOB.curDate) > -1) { |
| | | updateTime = card.updateTime.substr(11) |
| | | } |
| | | |
| | | return ( |
| | |
| | | <CloseOutlined className="close" title="删除" onClick={() => delCard(id)} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={() => changeStyle(id)} /> |
| | | {hasProfile ? <ProfileOutlined className="profile" title="setting" onClick={() => profileCard(id)} /> : null} |
| | | {updateTime} |
| | | </div> |
| | | } trigger="hover"> |
| | | <div ref={node => drag(drop(node))} className={'ant-col card-button-cell ant-col-' + card.width + (card.hidden === 'true' ? ' mk-hidden' : '')} onDoubleClick={(e) => {e.stopPropagation(); doubleClickCard(id)}}> |
| | | <div style={{opacity: isDragging ? 0 : 1, ...card.wrapStyle}}> |
| | | {btnElement} |
| | | </div> |
| | | <div ref={node => drag(drop(node))} style={_style_} className={'ant-col card-button-cell ant-col-' + className} onDoubleClick={(e) => {e.stopPropagation(); doubleClickCard(id)}}> |
| | | {btnElement} |
| | | </div> |
| | | </Popover> |
| | | ) |