| | |
| | | import React, { useState } from 'react' |
| | | 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 ItemTypes from './itemtypes' |
| | | import './index.scss' |
| | | |
| | | const Container = ({list, group, setting, placeholder, handleList, handleForm, closeForm }) => { |
| | | let target = null |
| | | |
| | | const Container = ({list, setting, handleList, handleForm, closeForm, showField }) => { |
| | | const [cards, setCards] = useState(list) |
| | | const moveCard = (id, atIndex) => { |
| | | const { card, index } = findCard(id) |
| | |
| | | if (!card) return |
| | | |
| | | const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] }) |
| | | setCards(_cards) |
| | | if (!group) { |
| | | handleList(_cards) |
| | | } else { |
| | | handleList(_cards, group) |
| | | } |
| | | |
| | | handleList(_cards) |
| | | } |
| | | |
| | | if (!is(fromJS(cards), fromJS(list))) { |
| | | setCards(list) |
| | | } |
| | | |
| | | const findCard = id => { |
| | |
| | | |
| | | 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 => { |
| | | const { card } = findCard(id) |
| | | closeForm(card) |
| | | } |
| | | |
| | | const copyCard = id => { |
| | | const { card, index: overIndex } = findCard(id) |
| | | |
| | | let _card = fromJS(card).toJS() |
| | | _card.uuid = Utils.getuuid() |
| | | _card.focus = true |
| | | |
| | | // 复制到剪切板 |
| | | let oInput = document.createElement('input') |
| | | 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() |
| | | document.execCommand('Copy') |
| | | oInput.className = 'oInput' |
| | | oInput.style.display = 'none' |
| | | document.body.removeChild(oInput) |
| | | |
| | | if (window.GLOB.CopyOnly) { |
| | | message.success('复制成功。') |
| | | } else { |
| | | const _cards = update(cards, { $splice: [[overIndex + 1, 0, _card]] }) |
| | | |
| | | const hasDrop = (item) => { |
| | | target = item |
| | | setCards(_cards) |
| | | |
| | | handleList(_cards, _card) |
| | | } |
| | | } |
| | | |
| | | const [, drop] = useDrop({ |
| | | accept: ItemTypes.form, |
| | | 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 |
| | | } |
| | |
| | | let newcard = {} |
| | | newcard.uuid = Utils.getuuid() |
| | | newcard.label = 'label' |
| | | newcard.field = '' |
| | | newcard.initval = '' |
| | | newcard.type = item.subType |
| | | newcard.resourceType = '0' |
| | | newcard.options = [] |
| | | newcard.dataSource = '' |
| | | newcard.setAll = 'false' |
| | | newcard.linkField = '' |
| | | newcard.valueField = '' |
| | | newcard.valueText = '' |
| | | newcard.orderBy = '' |
| | | newcard.orderType = 'asc' |
| | | newcard.decimal = 0 |
| | | newcard.min = '' |
| | | newcard.max = '' |
| | | newcard.readonly = 'false' |
| | | newcard.required = 'true' |
| | | newcard.readin = 'top' |
| | | newcard.focus = true |
| | | |
| | | let targetId = cards.length > 0 ? cards[cards.length - 1].uuid : 0 |
| | | if (target) { |
| | | targetId = target.uuid |
| | | if (item.subType === 'linkMain') { |
| | | newcard.hidden = 'true' |
| | | newcard.verifyVal = 'true' |
| | | } else if (item.subType === 'textarea') { |
| | | newcard.required = 'false' |
| | | } |
| | | |
| | | const { index: overIndex } = findCard(`${targetId}`) |
| | | let targetIndex = overIndex |
| | | let targetId = '' |
| | | |
| | | targetIndex++ |
| | | if (item.dropTargetId) { |
| | | targetId = item.dropTargetId |
| | | delete item.dropTargetId |
| | | } else if (cards.length > 0) { |
| | | targetId = cards[cards.length - 1].uuid |
| | | } |
| | | |
| | | const _cards = update(cards, { $splice: [[targetIndex, 0, newcard]] }) |
| | | 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) |
| | | } |
| | | |
| | | target = null |
| | | handleList(_cards, newcard) |
| | | } |
| | | }) |
| | | |
| | | let _cols = 24 / (setting.cols || 2) |
| | | |
| | | return ( |
| | | <div ref={drop} className="ant-row modal-fields-row"> |
| | | {cards.map(card => ( |
| | | <Col key={card.uuid} className={card.type === 'textarea' ? 'textarea' + setting.cols : ''} span={card.type !== 'textarea' ? _cols : 24}> |
| | | <div ref={drop} className={'ant-row modal-fields-row ' + (setting.align || 'left_right') + ' space-' + (setting.verticalSpace || 'normal')} > |
| | | {cards.map(card => { |
| | | 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} |
| | | findCard={findCard} |
| | | hasDrop={hasDrop} |
| | | /> |
| | | </Col> |
| | | ))} |
| | | })} |
| | | {cards.length === 0 && |
| | | <div className="modal-drawarea-placeholder"> |
| | | {placeholder} |
| | | 请添加表单 |
| | | </div> |
| | | } |
| | | </div> |