From a9b02f6862522b54d0824152017bf2acfec2af7b Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 21 三月 2024 10:29:50 +0800 Subject: [PATCH] 2024-03-21 --- src/menu/components/card/cardcellcomponent/dragaction/action.jsx | 100 ++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 72 insertions(+), 28 deletions(-) diff --git a/src/menu/components/card/cardcellcomponent/dragaction/action.jsx b/src/menu/components/card/cardcellcomponent/dragaction/action.jsx index a4bed7a..4db573b 100644 --- a/src/menu/components/card/cardcellcomponent/dragaction/action.jsx +++ b/src/menu/components/card/cardcellcomponent/dragaction/action.jsx @@ -1,9 +1,13 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover, Button } from 'antd' +import { Popover, Button, Switch, Checkbox } from 'antd' +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' import './index.scss' -const Card = ({ id, cardIds, card, moveCard, findCard, editCard, delCard, profileCard, changeStyle, doubleClickCard }) => { +const Card = ({ id, card, moveCard, findCard, editCard, copyCard, delCard, profileCard, changeStyle, doubleClickCard }) => { const originalIndex = findCard(id).index const [{ isDragging }, drag] = useDrag({ item: { type: 'action', id, originalIndex }, @@ -14,54 +18,94 @@ const [, drop] = useDrop({ accept: 'action', canDrop: () => true, - drop({ id: draggedId }) { - if (!draggedId) return - if (!cardIds.includes(draggedId)) return + drop(item) { + const { id: draggedId } = item - if (draggedId !== id) { - const { index: overIndex } = findCard(id) - moveCard(draggedId, overIndex) + if (item.$init) { + item.overIndex = id } + + if (!draggedId || draggedId === id) return + + const { index: originIndex } = findCard(draggedId) + if (originIndex === -1) return + + const { index: overIndex } = findCard(id) + moveCard(draggedId, overIndex) }, }) - let _style = {opacity: isDragging ? 0 : 1} - - if (card.style) { - _style = {...card.style, opacity: isDragging ? 0 : 1} - } - let hasProfile = false - if (['pop', 'prompt', 'exec'].includes(card.OpenType)) { + 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') { hasProfile = true + } else if (card.OpenType === 'innerpage' && !card.pageTemplate) { + warning = <WarningOutlined style={{color: 'orange', marginLeft: '5px'}}/> } let btnElement = null - if (card.show === 'icon') { - btnElement = (<Button style={card.btnstyle} type="link"><Icon type={card.icon}/></Button>) + let _style = resetStyle(card.style) + + 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 { + 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}/>{warning}</Button>) } else if (card.show === 'link') { - btnElement = (<Button style={card.btnstyle} type="link">{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>) + btnElement = (<Button style={_style} type="link">{card.showName || card.label}{card.icon ? <MkIcon type={card.icon}/> : null}{warning}</Button>) } else { - btnElement = (<Button icon={card.icon} style={card.btnstyle}> {card.label} </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 ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ - <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => editCard(id)} /> - <Icon className="close" title="鍒犻櫎" type="close" onClick={() => delCard(id)} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)} type="font-colors" /> - {hasProfile ? <Icon className="profile" title="setting" type="profile" onClick={() => profileCard(id)} /> : null} + <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> + <EditOutlined className="edit" title="缂栬緫" onClick={() => editCard(id)} /> + <CopyOutlined className="copy" title="澶嶅埗" onClick={() => copyCard(id)} /> + <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} onDoubleClick={() => doubleClickCard(id)}> - <div style={_style}> - {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> ) -- Gitblit v1.8.0