import React, { useState } from 'react'
|
import { useDrop } from 'react-dnd'
|
import { is, fromJS } from 'immutable'
|
import update from 'immutability-helper'
|
import { Icon, Popover } from 'antd'
|
import Utils from '@/utils/utils.js'
|
import Card from './card'
|
import './index.scss'
|
|
const Container = ({list, setting, gridBtn, showfield, placeholder, handleList, handleMenu, handleGridBtn, deleteMenu, markMenu }) => {
|
const [cards, setCards] = useState(list)
|
const moveCard = (id, atIndex) => {
|
const { card, index } = findCard(id)
|
const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
|
handleList(_cards)
|
}
|
|
if (!is(fromJS(cards), fromJS(list))) {
|
setCards(list)
|
}
|
|
const findCard = id => {
|
const card = cards.filter(c => `${c.uuid}` === id)[0]
|
return {
|
card,
|
index: cards.indexOf(card),
|
}
|
}
|
|
const editCard = id => {
|
const { card } = findCard(id)
|
delete card.focus // 兼容早期的合并列
|
|
handleMenu(card)
|
}
|
|
|
const delCard = id => {
|
const { card } = findCard(id)
|
deleteMenu(card)
|
}
|
|
const markCard = id => {
|
const { card } = findCard(id)
|
markMenu(card)
|
}
|
|
const [, drop] = useDrop({
|
accept: 'columns',
|
drop(item) {
|
if (item.hasOwnProperty('originalIndex')) {
|
return
|
}
|
|
let newcard = {}
|
newcard.uuid = Utils.getuuid()
|
newcard.focus = true
|
|
newcard.Align = 'left'
|
newcard.label = 'label'
|
newcard.field = ''
|
newcard.Hide = 'false'
|
newcard.contrastType = 'static'
|
newcard.IsSort = 'true'
|
newcard.type = item.subType
|
newcard.Width = 120
|
if (item.subType === 'colspan') {
|
newcard.sublist = []
|
newcard.subfield = []
|
newcard.IsSort = 'false'
|
newcard.order = 'vertical'
|
}
|
|
let targetId = ''
|
|
if (item.dropTargetId) {
|
targetId = item.dropTargetId
|
delete item.dropTargetId
|
} else if (cards.length > 0) {
|
targetId = cards[cards.length - 1].uuid
|
}
|
|
const { index: overIndex } = findCard(`${targetId}`)
|
const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] })
|
|
handleList(_cards, newcard)
|
}
|
})
|
|
let columns = []
|
let _colCards = []
|
|
// 过滤合并列
|
let _hideCol = []
|
|
if (!showfield) {
|
cards.forEach(col => {
|
if (col.type === 'colspan' && col.sublist) {
|
_hideCol.push(...col.sublist)
|
}
|
})
|
}
|
cards.forEach(col => {
|
if (_hideCol.includes(col.uuid)) return
|
|
_colCards.push(col)
|
})
|
|
// 显示列分行
|
if (_colCards.length > 10) {
|
let number = Math.ceil(_colCards.length / Math.ceil(_colCards.length / 10))
|
for (let i = 0, len = _colCards.length; i < len; i += number) {
|
columns.push(_colCards.slice(i, i + number))
|
}
|
} else {
|
columns.push(_colCards)
|
}
|
|
return (
|
<div ref={drop} className="ant-row">
|
{columns.map((column, i) => (
|
<div key={i} className="column-box">
|
{/* 多选 */}
|
{i === 0 && column.length > 0 && setting.tableType === 'checkbox' ?
|
<div className="page-card" style={{flex: 60}}>
|
<span className="ant-checkbox-inner"></span>
|
</div> : null
|
}
|
{/* 单选 */}
|
{i === 0 && column.length > 0 && setting.tableType === 'radio' ?
|
<div className="page-card" style={{flex: 60}}></div> : null
|
}
|
{column.map(card => (
|
<Card
|
key={card.uuid}
|
id={card.uuid}
|
card={card}
|
showfield={showfield}
|
moveCard={moveCard}
|
editCard={editCard}
|
delCard={delCard}
|
markCard={markCard}
|
findCard={findCard}
|
/>
|
))}
|
{i === (columns.length - 1) && gridBtn && gridBtn.display ?
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<Icon className="edit" type="edit" onClick={handleGridBtn}/>
|
</div>
|
} trigger="hover">
|
<div className="page-card" style={{flex: gridBtn.Width}}>
|
<div style={{cursor: 'default'}}>
|
<span className="ant-table-header-column">
|
<div className="ant-table-column-sorters" title={gridBtn.label} style={{textAlign: gridBtn.Align}}>
|
<span className="ant-table-column-title">{gridBtn.label}</span>
|
</div>
|
</span>
|
</div>
|
</div>
|
</Popover> : null
|
}
|
</div>
|
))}
|
|
{cards.length === 0 ?
|
<div className="common-drawarea-placeholder">
|
{placeholder}
|
</div> : null
|
}
|
</div>
|
)
|
}
|
export default Container
|
