| | |
| | | import { useDrop } from 'react-dnd' |
| | | import { is, fromJS } from 'immutable' |
| | | import update from 'immutability-helper' |
| | | import { Col } from 'antd' |
| | | import { Col, message } from 'antd' |
| | | import Utils from '@/utils/utils.js' |
| | | import Card from './card' |
| | | import './index.scss' |
| | | |
| | | const Container = ({list, group, setting, placeholder, handleList, handleForm, closeForm }) => { |
| | | const Container = ({list, setting, handleList, handleForm, closeForm, showField }) => { |
| | | const [cards, setCards] = useState(list) |
| | | const moveCard = (id, atIndex) => { |
| | | const { card, index } = findCard(id) |
| | |
| | | |
| | | const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] }) |
| | | |
| | | if (!group) { |
| | | handleList(_cards) |
| | | } else { |
| | | handleList(_cards, group) |
| | | } |
| | | handleList(_cards) |
| | | } |
| | | |
| | | if (!is(fromJS(cards), fromJS(list))) { |
| | |
| | | |
| | | const editCard = id => { |
| | | const { card } = findCard(id) |
| | | delete card.focus |
| | | handleForm(card) |
| | | } |
| | | |
| | | const setStyle = (style, id) => { |
| | | const { card, index } = findCard(id) |
| | | |
| | | const _cards = update(cards, { $splice: [[index, 1, {...card, style}]] }) |
| | | |
| | | handleList(_cards) |
| | | } |
| | | |
| | | const closeCard = id => { |
| | |
| | | let val = JSON.parse(JSON.stringify(_card)) |
| | | val.copyType = 'form' |
| | | |
| | | _card.$copy = true |
| | | |
| | | oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val))) |
| | | document.body.appendChild(oInput) |
| | | oInput.select() |
| | |
| | | oInput.style.display = 'none' |
| | | document.body.removeChild(oInput) |
| | | |
| | | const _cards = update(cards, { $splice: [[overIndex + 1, 0, _card]] }) |
| | | |
| | | setCards(_cards) |
| | | |
| | | if (!group) { |
| | | handleList(_cards, null, null, _card) |
| | | if (window.GLOB.CopyOnly) { |
| | | message.success('复制成功。') |
| | | } else { |
| | | handleList(_cards, group, null, _card) |
| | | const _cards = update(cards, { $splice: [[overIndex + 1, 0, _card]] }) |
| | | |
| | | setCards(_cards) |
| | | |
| | | handleList(_cards, _card) |
| | | } |
| | | } |
| | | |
| | | const [, drop] = useDrop({ |
| | | accept: 'form', |
| | | drop(item) { |
| | | if (item.hasOwnProperty('originalIndex') && group) { |
| | | const { card } = findCard(item.id) |
| | | if (!card) { |
| | | handleList(cards, group, item.id) |
| | | } |
| | | } |
| | | if (item.hasOwnProperty('originalIndex')) { |
| | | return |
| | | } |
| | |
| | | newcard.options = [] |
| | | newcard.readonly = 'false' |
| | | newcard.required = 'true' |
| | | newcard.readin = 'top' |
| | | newcard.focus = true |
| | | |
| | | if (item.subType === 'linkMain') { |
| | | newcard.hidden = 'true' |
| | | newcard.verifyVal = 'true' |
| | | } else if (item.subType === 'textarea') { |
| | | newcard.required = 'false' |
| | | } |
| | | |
| | | let targetId = '' |
| | | |
| | |
| | | targetId = cards[cards.length - 1].uuid |
| | | } |
| | | |
| | | const { index: overIndex } = findCard(`${targetId}`) // cards为空时 overIndex 为 -1 |
| | | const { index: overIndex, card } = findCard(`${targetId}`) // cards为空时 overIndex 为 -1 |
| | | |
| | | if (card) { |
| | | newcard.span = card.span || 12 |
| | | newcard.labelwidth = card.labelwidth || 33.3 |
| | | } |
| | | |
| | | const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] }) |
| | | |
| | | setCards(_cards) |
| | | |
| | | if (!group) { |
| | | handleList(_cards, null, null, newcard) |
| | | } else { |
| | | handleList(_cards, group, null, newcard) |
| | | } |
| | | handleList(_cards, newcard) |
| | | } |
| | | }) |
| | | |
| | | let _cols = 24 / (setting.cols || 2) |
| | | |
| | | return ( |
| | | <div ref={drop} className="ant-row modal-fields-row"> |
| | | <div ref={drop} className={'ant-row modal-fields-row ' + (setting.align || 'left_right') + ' space-' + (setting.verticalSpace || 'normal')} > |
| | | {cards.map(card => { |
| | | let isEntireLine = false |
| | | |
| | | if (card.entireLine === 'true' || ['textarea', 'hint', 'checkcard'].includes(card.type)) { |
| | | isEntireLine = true |
| | | } |
| | | |
| | | return <Col key={card.uuid} className={isEntireLine ? 'textarea' + setting.cols : ''} span={isEntireLine ? 24 : _cols}> |
| | | return <Col key={card.uuid} span={card.type === 'split' ? 24 : (card.span || 24)}> |
| | | <Card |
| | | id={card.uuid} |
| | | cols={setting.cols} |
| | | card={card} |
| | | showField={showField} |
| | | moveCard={moveCard} |
| | | setStyle={setStyle} |
| | | editCard={editCard} |
| | | closeCard={closeCard} |
| | | copyCard={copyCard} |
| | |
| | | })} |
| | | {cards.length === 0 && |
| | | <div className="modal-drawarea-placeholder"> |
| | | {placeholder} |
| | | 请添加表单 |
| | | </div> |
| | | } |
| | | </div> |