From 3b103caa6bfc9ed410e67156c3ca1785bf1cecc9 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 19 八月 2022 01:15:31 +0800 Subject: [PATCH] 2022-08-19 --- src/mob/components/formdragelement/card.jsx | 75 ++++++++++++++++++++++++++++++------- 1 files changed, 61 insertions(+), 14 deletions(-) diff --git a/src/mob/components/formdragelement/card.jsx b/src/mob/components/formdragelement/card.jsx index 4bfe3dd..2fc4c8f 100644 --- a/src/mob/components/formdragelement/card.jsx +++ b/src/mob/components/formdragelement/card.jsx @@ -1,16 +1,18 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' +import { fromJS } from 'immutable' import { Button, Popover, Switch, Checkbox, Form, Rate } from 'antd' -import { ScanOutlined, RightOutlined, PlusOutlined, StarFilled, EditOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons' +import { ScanOutlined, RightOutlined, PlusOutlined, StarFilled, EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined } from '@ant-design/icons' import moment from 'moment' import asyncComponent from '@/utils/asyncComponent' import MkIcon from '@/components/mk-icon' +import MKEmitter from '@/utils/events.js' import './index.scss' const CheckCard = asyncComponent(() => import('@/templates/modalconfig/checkCard')) -const Card = ({ id, card, moveCard, findCard, editCard, closeCard, copyCard, showField }) => { +const Card = ({ id, card, moveCard, findCard, editCard, closeCard, copyCard, showField, setStyle }) => { const originalIndex = findCard(id).index const [{ isDragging }, drag] = useDrag({ item: { type: 'form', id, originalIndex }, @@ -32,7 +34,7 @@ } } }) - const opacity = isDragging ? 0 : 1 + const opacity = isDragging ? 0.5 : 1 const edit = () => { editCard(id) @@ -44,6 +46,20 @@ const copy = () => { copyCard(id) + } + + const changeStyle = () => { + let options = ['font1', 'margin'] + let style = fromJS(card.style || {}).toJS() + + if (card.marginTop && !style.marginTop) { // 澶栬竟璺濊缃浆绉� + style.marginTop = card.marginTop + } + if (card.marginBottom && !style.marginBottom) { + style.marginBottom = card.marginBottom + } + + MKEmitter.emit('changeStyle', options, style, (s) => {setStyle(s, id)}) } let selectval = '' @@ -59,14 +75,24 @@ } let formItem = null - if (card.type === 'text' || card.type === 'number') { - formItem = (<div className={'am-list-item ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval ? card.initval : <span style={{color: '#bcbcbc'}}>{card.placeholder || ''}</span> }</div>{card.scan && card.scan !== 'false' ? <div className="am-list-extra"><ScanOutlined /></div> : null}</div></div>) + if (card.type === 'text' || card.type === 'linkMain') { + formItem = (<div className={'am-list-item input ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval ? card.initval : <span style={{color: '#bcbcbc'}}>{card.placeholder || <span style={{color: 'transparent'}}>input</span>}</span> }</div>{card.scan && card.scan !== 'false' ? <div className="am-list-extra"><ScanOutlined /></div> : null}</div></div>) } else if (card.type === 'number') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval}</div></div></div>) - } else if (card.type === 'select' || card.type === 'link') { + formItem = (<div className={'am-list-item input ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval ? card.initval : <span style={{color: '#bcbcbc'}}><span style={{color: 'transparent'}}>input</span></span> }</div>{card.placeholder ? <div className="am-list-extra" style={{color: '#999999', width: 'auto', lineHeight: 1.5}}>{card.placeholder}</div> : null}</div></div>) + } else if (card.type === 'number') { + formItem = (<div className="am-list-item input"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval || <span style={{color: 'transparent'}}>input</span>}</div></div></div>) + } else if (card.type === 'select' || card.type === 'link' || card.type === 'cascader') { formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{selectval || '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'date') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD') : '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) + let format = 'YYYY-MM-DD' + if (card.precision === 'hour') { + format = 'YYYY-MM-DD HH' + } else if (card.precision === 'minute') { + format = 'YYYY-MM-DD HH:mm' + } else if (card.precision === 'second') { + format = 'YYYY-MM-DD HH:mm:ss' + } + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format(format) : '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'datemonth') { formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'datetime') { @@ -166,6 +192,15 @@ </div> </div> </div> + } else if (card.type === 'formula') { + formItem = <div className="am-list-item formula"> + <div className="am-list-line"> + <div className="am-input-label">{card.label}</div> + <div className="am-input-control"> + {card.formula}{card.postfix || ''} + </div> + </div> + </div> } else if (card.type === 'split') { formItem = <div className="split-line">{card.label}</div> } else if (card.type === 'checkcard') { @@ -179,25 +214,37 @@ </div>) } + let style = {...card.style} + + if (card.marginTop && !style.marginTop) { // 澶栬竟璺濊缃浆绉� + style.marginTop = card.marginTop + } + if (card.marginBottom && !style.marginBottom) { + style.marginBottom = card.marginBottom + } + return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <EditOutlined className="edit" onClick={edit} /> <CopyOutlined className="copy" onClick={copy} /> + <FontColorsOutlined className="style" onClick={changeStyle} /> <CloseOutlined className="close" onClick={close} /> </div> } trigger="hover"> <div className="page-card" style={{ opacity: opacity}}> <div ref={node => drag(drop(node))} style={{ border: '0.5px solid transparent'}} onDoubleClick={edit}> - {card.type === 'split' ? formItem : <Form.Item - style={{marginTop: card.marginTop || 0, marginBottom: card.marginBottom || 0}} - className={'ant-form-item' + (card.required === 'true' ? ' required' : '') + (card.splitline === 'false' ? ' no-boder' : '')} + <Form.Item + style={style} + // style={{marginTop: card.marginTop || 0, marginBottom: card.marginBottom || 0}} + className={(card.required === 'true' ? ' required' : '') + (card.type === 'split' ? ' split-wrap' : '') + (card.splitline === 'false' ? ' no-boder' : '')} > {formItem} - {showField ? <div className="field-name" style={card.writein === 'false' ? {color: 'orange'} : {}}> - {card.field}{card.hidden === 'true' ? '锛堥殣钘忥級' : ''}{card.readonly === 'true' ? '锛堝彧璇伙級' : ''} + <div></div> + {showField && card.field ? <div className="field-name" style={card.writein === 'false' ? {color: 'orange'} : {}}> + {card.field}{card.hidden === 'true' || card.type === 'funcvar' ? '锛堥殣钘忥級' : ''}{card.readonly === 'true' ? '锛堝彧璇伙級' : ''}{card.linkField ? <span style={{color: '#1890ff'}}>{`锛堝叧鑱�${card.linkField}锛塦}</span> : ''}{card.supField ? <span style={{color: '#8E44AD'}}>{`锛堜笂绾�${card.supField}锛塦}</span> : ''} </div> : ''} - </Form.Item>} + </Form.Item> </div> </div> </Popover> -- Gitblit v1.8.0