| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { DndProvider, DragSource, DropTarget } from 'react-dnd' |
| | | import { Table, Popover, Modal, message, Button } from 'antd' |
| | | import { Table, Popover, Modal, message, Button, Typography } from 'antd' |
| | | import { PlusOutlined, FileSyncOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined } from '@ant-design/icons' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | |
| | | import './index.scss' |
| | | |
| | | const { confirm } = Modal |
| | | const { Paragraph } = Typography |
| | | const EditColumn = asyncComponent(() => import('./editColumn')) |
| | | const TableVerify = asyncComponent(() => import('./tableIn')) |
| | | const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { connectDragSource, connectDropTarget, moveCol, addElement, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props |
| | | const { connectDragSource, connectDropTarget, moveCol, dropCol, addElement, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props |
| | | |
| | | if (!column) return ( |
| | | <th {...restProps} index={index}> |
| | |
| | | |
| | | const ColTarget = { |
| | | drop(props, monitor) { |
| | | const dragIndex = monitor.getItem().index |
| | | const item = monitor.getItem() |
| | | const dragIndex = item.index |
| | | const hoverIndex = props.index |
| | | |
| | | if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) { |
| | | if (item.$init) { |
| | | props.dropCol(item, hoverIndex) |
| | | return |
| | | } else if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) { |
| | | return |
| | | } |
| | | |
| | |
| | | } |
| | | return ( |
| | | <td style={{...style, minWidth: column.Width || 100}} className={className}> |
| | | {val} |
| | | {column.Hide === 'true' ? <CloseCircleOutlined style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}}/> : null} |
| | | {column.field ? <Paragraph className="col-copy" copyable={{ text: column.field }}>{val}</Paragraph> : val} |
| | | {column.marks && column.marks.length ? <AntDesignOutlined className="profile"/> : null} |
| | | {column.Hide === 'true' ? <CloseCircleOutlined className="close-col"/> : null} |
| | | </td> |
| | | ) |
| | | } else { |
| | |
| | | }) |
| | | } |
| | | |
| | | dropCol = (item, hoverIndex) => { |
| | | let _columns = fromJS(this.state.columns).toJS() |
| | | let type = item.subType |
| | | |
| | | if (item.subType === 'link' || item.subType === 'colspan' || item.subType === 'picture') { |
| | | type = 'text' |
| | | } |
| | | |
| | | let col = { focus: true, uuid: Utils.getuuid(), label: 'label', field: '', type: type, elements: [] } |
| | | |
| | | _columns.splice(hoverIndex, 0, col) |
| | | |
| | | this.setState({ |
| | | columns: _columns |
| | | }, () => { |
| | | this.editColumn(col) |
| | | }) |
| | | } |
| | | |
| | | updateCol = (col, btn) => { |
| | | let _columns = fromJS(this.state.columns).toJS() |
| | | _columns = _columns.map(column => { |
| | |
| | | cell.uuid = Utils.getuuid() |
| | | cell.focus = true |
| | | |
| | | MKEmitter.emit('cardAddElement', [this.props.config.uuid, col.uuid], cell) |
| | | MKEmitter.emit('cardAddElement', col.uuid, cell) |
| | | } |
| | | |
| | | addElement = (col) => { |
| | | const { config } = this.props |
| | | let column = fromJS(col).toJS() |
| | | |
| | | if (column.type === 'custom') { |
| | | let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}} |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard) |
| | | MKEmitter.emit('cardAddElement', column.uuid, newcard) |
| | | } else if (column.type === 'action') { |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | |
| | | } |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard) |
| | | MKEmitter.emit('cardAddElement', column.uuid, newcard) |
| | | } |
| | | } |
| | | |
| | |
| | | fields: fields, |
| | | align: col.Align, |
| | | moveCol: this.moveCol, |
| | | dropCol: this.dropCol, |
| | | updateCol: this.updateCol, |
| | | addElement: this.addElement, |
| | | editColumn: this.editColumn, |