From f0bf8c399c354c22227f8f1a76ed806098db59c0 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 21 五月 2024 16:51:02 +0800 Subject: [PATCH] 2024-05-21 --- src/menu/components/card/cardsimplecomponent/index.jsx | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 101 insertions(+), 6 deletions(-) diff --git a/src/menu/components/card/cardsimplecomponent/index.jsx b/src/menu/components/card/cardsimplecomponent/index.jsx index 2eb816e..d7d2fe6 100644 --- a/src/menu/components/card/cardsimplecomponent/index.jsx +++ b/src/menu/components/card/cardsimplecomponent/index.jsx @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Popover } from 'antd' +import { Popover, Modal, Button } from 'antd' import { PlusOutlined, PlusSquareOutlined, EditOutlined, ArrowLeftOutlined, ArrowRightOutlined, SwapOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' @@ -11,6 +11,8 @@ import Utils from '@/utils/utils.js' import MKEmitter from '@/utils/events.js' import './index.scss' + +const { confirm } = Modal const NormalForm = asyncIconComponent(() => import('@/components/normalform')) const NodesWrap = asyncComponent(() => import('./node-wrap')) @@ -30,7 +32,8 @@ state = { card: null, // 鍗$墖淇℃伅 formlist: null, // 璁剧疆琛ㄥ崟淇℃伅 - appType: sessionStorage.getItem('appType') + appType: sessionStorage.getItem('appType'), + timestamp: '' } /** @@ -40,7 +43,8 @@ const { card } = this.props this.setState({ - card: fromJS(card).toJS() + card: fromJS(card).toJS(), + timestamp: new Date().getTime() + '' }) } @@ -187,8 +191,99 @@ this.props.updateElement(_card) } + updateFields = (elements, resolve, type) => { + const { card } = this.state + + let items = elements + + if (type === 'form') { + items = [] + + elements.forEach(item => { + let cell = { + uuid: Utils.getuuid(), + eleType: 'text', + height: 1, + innerHeight: 21, + prefix: item.label ? item.label + ': ' : '', + datatype: item.field ? 'dynamic' : 'static', + field: item.field || '', + width: item.span || 12, + value: '', + style: {marginBottom: '15px'} + } + + if (item.type === 'number') { + cell.eleType = 'number' + cell.decimal = typeof(item.decimal) === 'number' ? item.decimal : '' + } + + items.push(cell) + }) + } + + if (items.length === 0) { + resolve({status: false, message: '鍏冪礌涓嶅彲涓虹┖锛�'}) + return + } + + let _card = { ...card, elements: items } + let _card2 = { ...card, elements: [...card.elements, ...items] } + + if (card.elements.length === 0) { + this.setState({ + card: _card, + timestamp: new Date().getTime() + '' + }) + + this.props.updateElement(_card) + } else { + const that = this + const _modal = confirm({ + title: '鍗$墖涓凡瀛樺湪鍏冪礌锛岃閫夋嫨瑕佽繘琛岀殑鎿嶄綔銆�', + className: 'mk-confirm-modal', + content: <div className="footer"> + <Button key="cancel" onClick={() => _modal.destroy()}>鍙栨秷</Button> + <Button key="replace" className="mk-border-purple" onClick={() => { + that.setState({ + card: _card, + timestamp: new Date().getTime() + '' + }) + + that.props.updateElement(_card) + _modal.destroy() + }}>鏇挎崲</Button> + <Button key="confirm" className="mk-border-green" onClick={() => { + that.setState({ + card: _card2, + timestamp: new Date().getTime() + '' + }) + + that.props.updateElement(_card2) + _modal.destroy() + }}>娣诲姞</Button> + </div> + }) + } + + resolve({status: true}) + } + paste = (element, resolve) => { const { card } = this.state + + if (['simpleform', 'forms', 'formgroup', 'cardcell'].includes(element.copyType)) { + if (element.copyType === 'simpleform') { + this.updateFields(element.subcards[0].fields, resolve, 'form') + } else if (element.copyType === 'forms') { + this.updateFields(element.fields, resolve, 'form') + } else if (element.copyType === 'formgroup') { + this.updateFields(element.fields, resolve, 'form') + } else { + this.updateFields(element.elements, resolve) + } + return + } let _uuid = Utils.getuuid() @@ -208,7 +303,7 @@ render() { const { cards } = this.props - const { card } = this.state + const { card, timestamp } = this.state let _style = {...card.style} @@ -225,7 +320,7 @@ return ( <div className="card-item" style={_style}> - <CardCellComponent cards={cards} cardCell={card} elements={card.elements} updateElement={this.updateCard}/> + <CardCellComponent cards={cards} cardCell={card} timestamp={timestamp} elements={card.elements} updateElement={this.updateCard}/> <div className="card-control"> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> @@ -235,7 +330,7 @@ <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> : <NodesWrap card={card} updateMenus={this.updateNodes}/>} {cards.type !== 'timeline' ? <CopyComponent type="cardcell" card={card}/> : null} - <PasteController options={['action', 'customCardElement']} updateConfig={this.paste} /> + <PasteController options={['action', 'customCardElement', 'simpleform', 'forms', 'formgroup', 'cardcell']} updateConfig={this.paste} /> <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> {control ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> -- Gitblit v1.8.0