| | |
| | | } |
| | | |
| | | 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 |
| | | } |
| | | |
| | |
| | | }) |
| | | } |
| | | |
| | | 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, |