From cb9ade2afd2a367ad767bc605ab7086c695dd010 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 09 十二月 2022 15:53:32 +0800 Subject: [PATCH] 2022-12-09 --- src/menu/components/card/cardcellcomponent/dragaction/card.jsx | 52 +++++++++++++++++++++++++++++++++++----------------- 1 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx index 480b17c..66b04b5 100644 --- a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx +++ b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx @@ -40,7 +40,13 @@ 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) @@ -51,10 +57,10 @@ }, }) - let _style = {opacity: isDragging ? 0 : 1} + let _style = {opacity: isDragging ? 0.3 : 1} if (card.style) { - _style = {...card.style, opacity: isDragging ? 0 : 1} + _style = {...card.style, opacity: isDragging ? 0.3 : 1} _style = resetStyle(_style) } if (card.eleType === 'picture' && card.maxWidth) { @@ -71,7 +77,7 @@ const getContent = () => { if (card.eleType === 'sequence') { return ( - <div className={'ant-mk-text'}>1</div> + <div style={{height: card.innerHeight || 'auto'}} className="ant-mk-text">1</div> ) } else if (card.eleType === 'text' || card.eleType === 'number') { let val = `${card.prefix || ''}${card.datatype === 'static' ? (card.value || '') : (card.field || '')}${card.postfix || ''}` @@ -83,7 +89,7 @@ <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> ) } else if (card.eleType === 'icon') { - return (<MkIcon type={card.icon}/>) + return (<MkIcon style={{height: card.innerHeight || 'auto'}} className="ant-mk-icon" type={card.icon || 'bell'}/>) } else if (card.eleType === 'slider') { let val = card.value ? (card.value / card.maxValue) * 100 : 30 return <MkProgress value={val} config={card}/> @@ -96,9 +102,11 @@ // ) } else if (card.eleType === 'picture') { let _imagestyle = {} + let url = card.url !== '@icon@' ? card.url : sessionStorage.getItem('CloudAvatar') - if (card.url) { - _imagestyle = {backgroundImage: `url('${card.url}')`} + if (url) { + url = url.replace(/@mywebsite@\//ig, window.GLOB.baseurl) + _imagestyle = {backgroundImage: `url('${url}')`} } else { let index = card.uuid.match(/\d{1}/g) index = index.slice(-1)[0] % 5 @@ -117,13 +125,17 @@ _imagestyle.paddingTop = '100%' } + if (card.backgroundSize) { + _imagestyle.backgroundSize = card.backgroundSize + } + return ( <div className="ant-mk-picture" style={_imagestyle}></div> ) } else if (card.eleType === 'splitline') { let _borderWidth = card.borderWidth === undefined ? 1 : card.borderWidth return ( - <div style={{paddingTop: '1px'}}> + <div style={{paddingTop: _borderWidth ? '1px' : '10px'}}> <div className="ant-mk-splitline" style={{borderColor: card.color, borderWidth: _borderWidth}}></div> </div> ) @@ -140,9 +152,10 @@ </div> ) } else if (card.eleType === 'video') { + _style.overflow = 'hidden' return ( - <div> - <Video card={card} value={card.url || 'http://qingqiumarket.cn/mkwms/Content/images/upload/20210104/trailer.mp4'}/> + <div className="video-wrap"> + <Video card={card} poster={card.posterUrl || ''} value={card.url || 'http://qingqiumarket.cn/mkwms/Content/images/upload/20210104/trailer.mp4'}/> </div> ) } else if (card.eleType === 'currentDate') { @@ -152,7 +165,7 @@ val = <><span style={_s}>{card.prefix || ''}</span>{moment().format(card.dateFormat)}<span style={_s}>{card.postfix || ''}</span></> } return ( - <div className="ant-mk-date"> + <div className="ant-mk-text line1" style={{height: card.innerHeight || 'auto'}}> {val} </div> ) @@ -163,7 +176,7 @@ val = <><span style={_s}>{card.prefix || ''}</span>{card.formula}<span style={_s}>{card.postfix || ''}</span></> } return ( - <div className="ant-mk-date"> + <div className="ant-mk-text" style={{height: card.innerHeight || 'auto'}}> {val} </div> ) @@ -173,14 +186,19 @@ const clickComponent = (e) => { if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'cardcell') { e.stopPropagation() - MKEmitter.emit('clickComponent', card, parent, 'cardcell') + MKEmitter.emit('clickComponent', card.uuid, parent.uuid) } } let able = true - if ((appType === 'mob' || appType === 'pc') && parent && (parent.setting.click === 'menu' || parent.setting.click === 'menus')) { - // if ((appType === 'mob' || appType === 'pc') && parent && parent.setting.click === 'menu') { + if ((appType === 'mob' || appType === 'pc') && (parent.setting.click === 'menu' || parent.setting.click === 'menus')) { able = false + } + + let _style_ = null + + if (card.style && card.style.clear === 'left') { + _style_ = {clear: 'left'} } return ( @@ -190,10 +208,10 @@ <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) ? <MarkColumn columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } + {['text', 'number', 'slider', 'sequence', 'formula'].includes(card.eleType) ? <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))} className={'ant-col card-cell ant-col-' + card.width}> + <div ref={node => drag(drop(node))} style={_style_} className={'ant-col card-cell ant-col-' + card.width}> <div style={_style} onClick={clickComponent} onDoubleClick={() => able && editCard(id)} id={card.uuid}> {getContent()} </div> -- Gitblit v1.8.0