| | |
| | | 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, type, placeholder, handleList, handleMenu }) => { |
| | | 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) |
| | | handleList({[type]: _cards}) |
| | | |
| | | handleList(_cards) |
| | | } |
| | | |
| | | if (!is(fromJS(cards), fromJS(list))) { |
| | | setCards(list) |
| | | } |
| | | |
| | | const findCard = id => { |
| | | const card = cards.filter(c => `${c.id}` === id)[0] |
| | | const card = cards.filter(c => `${c.uuid}` === id)[0] |
| | | return { |
| | | card, |
| | | index: cards.indexOf(card), |
| | |
| | | |
| | | const editCard = id => { |
| | | const { card } = findCard(id) |
| | | handleMenu(card) |
| | | 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[type], |
| | | accept: 'form', |
| | | drop(item) { |
| | | if (item.hasOwnProperty('originalIndex')) { |
| | | return |
| | | } |
| | | |
| | | let newcard = {} |
| | | if (item.type === 'search') { |
| | | newcard.uuid = Utils.getuuid() |
| | | newcard.label = 'fieldName' |
| | | 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.display = 'dropdown' |
| | | } |
| | | |
| | | let indexes = cards.map(car => {return car.id}) |
| | | let newid = 0 |
| | | while (indexes.includes(newid)) { |
| | | newid++ |
| | | } |
| | | newcard.id = newid |
| | | newcard.uuid = Utils.getuuid() |
| | | newcard.label = 'label' |
| | | newcard.type = item.subType |
| | | newcard.resourceType = '0' |
| | | newcard.options = [] |
| | | newcard.readonly = 'false' |
| | | newcard.required = 'true' |
| | | newcard.readin = 'top' |
| | | newcard.focus = true |
| | | |
| | | let targetId = indexes.length > 0 ? indexes[indexes.length - 1] : 0 |
| | | if (target) { |
| | | targetId = target.id |
| | | 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 |
| | | if (!target) { |
| | | targetIndex++ |
| | | } |
| | | if (targetIndex < 0) { |
| | | targetIndex = 0 |
| | | let targetId = '' |
| | | |
| | | 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) |
| | | handleList({[type]: _cards}) |
| | | target = null |
| | | |
| | | handleList(_cards, newcard) |
| | | } |
| | | }) |
| | | |
| | | |
| | | return ( |
| | | <div ref={drop} className="ant-row"> |
| | | {type === 'search' && cards.map(card => ( |
| | | <Col key={card.uuid} span={6}> |
| | | <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 |
| | | key={card.uuid} |
| | | id={`${card.id}`} |
| | | type={type} |
| | | id={card.uuid} |
| | | card={card} |
| | | showField={showField} |
| | | moveCard={moveCard} |
| | | setStyle={setStyle} |
| | | editCard={editCard} |
| | | closeCard={closeCard} |
| | | copyCard={copyCard} |
| | | findCard={findCard} |
| | | hasDrop={hasDrop} |
| | | /> |
| | | </Col> |
| | | ))} |
| | | })} |
| | | {cards.length === 0 && |
| | | <div className="common-drawarea-placeholder"> |
| | | {placeholder} |
| | | <div className="modal-drawarea-placeholder"> |
| | | 请添加表单 |
| | | </div> |
| | | } |
| | | </div> |