| | |
| | | import React from 'react' |
| | | import { useDrag, useDrop } from 'react-dnd' |
| | | import { Popover, Button, Switch, Checkbox } from 'antd' |
| | | import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined, ProfileOutlined } 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' |
| | |
| | | const [, drop] = useDrop({ |
| | | accept: 'action', |
| | | canDrop: () => true, |
| | | drop({ id: draggedId }) { |
| | | drop(item) { |
| | | const { id: draggedId } = item |
| | | |
| | | if (item.$init) { |
| | | item.overIndex = id |
| | | } |
| | | |
| | | if (!draggedId || draggedId === id) return |
| | | |
| | | const { index: originIndex } = findCard(draggedId) |
| | |
| | | }) |
| | | |
| | | let hasProfile = false |
| | | let warning = null |
| | | if (['pop', 'prompt', 'exec', 'form'].includes(card.OpenType)) { |
| | | hasProfile = true |
| | | } else if (card.OpenType === 'excelIn' || card.OpenType === 'excelOut') { |
| | | hasProfile = true |
| | | } else if (card.funcType === 'print') { |
| | | hasProfile = true |
| | | } else if (card.OpenType === 'innerpage' && !card.pageTemplate) { |
| | | warning = <WarningOutlined style={{color: 'orange', marginLeft: '5px'}}/> |
| | | } |
| | | |
| | | let btnElement = null |
| | |
| | | |
| | | if (card.OpenType === 'form') { |
| | | if (card.formType === 'switch') { |
| | | btnElement = (<Switch style={_style} size={card.size} checkedChildren={card.openText || ''} unCheckedChildren={card.closeText || ''}/>) |
| | | } else { |
| | | 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') { |
| | | 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 { |
| | | btnElement = (<Button style={_style} type="link"><MkIcon type="scan"/></Button>) |
| | | } |
| | | } else if (card.show === 'icon') { |
| | | btnElement = (<Button style={_style} type="link"><MkIcon type={card.icon}/></Button>) |
| | | 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}</Button>) |
| | | btnElement = (<Button style={_style} type="link">{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} </Button>) |
| | | btnElement = (<Button style={_style}>{card.icon ? <MkIcon type={card.icon}/> : null}{card.label}{warning}</Button>) |
| | | } |
| | | |
| | | let _style_ = null |
| | | |
| | | if (card.style && card.style.clear === 'left') { |
| | | _style_ = {clear: 'left'} |
| | | } |
| | | |
| | | let className = card.width || '' |
| | | if (card.hidden === 'true') { |
| | | className += ' mk-hidden' |
| | | } |
| | | if (card.checkType) { |
| | | className += ' ' + card.checkType |
| | | } |
| | | |
| | | return ( |
| | |
| | | {hasProfile ? <ProfileOutlined className="profile" title="setting" onClick={() => profileCard(id)} /> : null} |
| | | </div> |
| | | } trigger="hover"> |
| | | <div ref={node => drag(drop(node))} className={'ant-col card-button-cell ant-col-' + card.width} onDoubleClick={(e) => {e.stopPropagation(); doubleClickCard(id)}}> |
| | | <div style={{opacity: isDragging ? 0 : 1, ...card.wrapStyle}}> |
| | | <div ref={node => drag(drop(node))} style={_style_} className={'ant-col card-button-cell ant-col-' + className} onDoubleClick={(e) => {e.stopPropagation(); doubleClickCard(id)}}> |
| | | <div style={{opacity: isDragging ? 0.3 : 1, ...card.wrapStyle}}> |
| | | {btnElement} |
| | | </div> |
| | | </div> |