From 89a58758f2045daf62383dc993178d857f3bbc39 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 10 七月 2023 15:07:50 +0800 Subject: [PATCH] 2023-07-10 --- src/menu/components/card/cardcellcomponent/dragaction/card.jsx | 62 ++++++++++++++++++++++++------- 1 files changed, 48 insertions(+), 14 deletions(-) diff --git a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx index 0410a0b..34fbe37 100644 --- a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx +++ b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx @@ -1,7 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' import { Popover } from 'antd' -import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined } from '@ant-design/icons' +import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons' import MkIcon from '@/components/mk-icon' import moment from 'moment' @@ -57,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) { @@ -85,11 +85,17 @@ let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight} val = <><span style={_s}>{card.prefix || ''}</span>{`${card.datatype === 'static' ? (card.value || '') : (card.field || '')}`}<span style={_s}>{card.postfix || ''}</span></> } + if (card.sortField) { + val = <><span>{val}</span><span className="sort-wrap"><CaretUpOutlined /><CaretDownOutlined /></span></> + } return ( <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> ) } else if (card.eleType === 'icon') { - return (<MkIcon style={{height: card.innerHeight || 'auto'}} className="ant-mk-icon" type={card.icon}/>) + if (card.tipType === 'text') { + return <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{card.value || card.field || ''}</div> + } + 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}/> @@ -101,21 +107,23 @@ // </div> // ) } else if (card.eleType === 'picture') { - let _imagestyle = {} + let _imagestyle = { + backgroundSize: card.style.backgroundSize || 'cover', + backgroundPosition: card.style.backgroundPosition || 'center', + backgroundRepeat: card.style.backgroundRepeat || 'no-repeat', + borderRadius: card.style.borderRadius || 0 + } let url = card.url !== '@icon@' ? card.url : sessionStorage.getItem('CloudAvatar') if (url) { - _imagestyle = {backgroundImage: `url('${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 let demos = [demo1, demo2, demo3, demo4, demo5] - _imagestyle = {backgroundImage: `url('${demos[index]}')`} - } - - if (card.style && card.style.borderRadius) { - _imagestyle.borderRadius = card.style.borderRadius + _imagestyle.backgroundImage = `url('${demos[index]}')` } if (PicRadio[card.lenWidRadio]) { @@ -175,6 +183,19 @@ {val} </div> ) + } else if (card.eleType === 'color') { + _style.overflow = 'hidden' + let _bgstyle = {backgroundColor: card.value || '#1890ff'} + + if (PicRadio[card.lenWidRadio]) { + _bgstyle.paddingTop = PicRadio[card.lenWidRadio] + } else { + _bgstyle.paddingTop = '100%' + } + + return ( + <div style={_bgstyle}></div> + ) } } @@ -186,8 +207,21 @@ } let able = true - if ((appType === 'mob' || appType === 'pc') && (parent.setting.click === 'menu' || parent.setting.click === 'menus')) { + if ((appType === 'mob' || appType === 'pc') && parent.setting && (parent.setting.click === 'menu' || parent.setting.click === 'menus')) { able = false + } + + let _style_ = null + + if (card.style && card.style.clear === 'left') { + _style_ = {clear: 'left'} + } else if (card.style && card.style.clear === 'right') { + _style_ = {float: 'right'} + } + + let tableHCell = false + if (parent.setting && parent.setting.cardRole === 'header') { + tableHCell = true } return ( @@ -197,10 +231,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 field={card.field || ''} columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } + {['text', 'number', 'slider', 'sequence', 'formula'].includes(card.eleType) && !tableHCell ? <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