| | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | | import Utils from '@/utils/utils.js' |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | |
| | | } |
| | | |
| | | 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 |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | appType: sessionStorage.getItem('appType'), |
| | | tableId: '', |
| | | data: [{uuid: Utils.getuuid()}], |
| | |
| | | }) |
| | | } |
| | | |
| | | 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) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { fields, card, lineMarks, dict, tableId, visible } = this.state |
| | | const { fields, card, lineMarks, tableId, visible } = this.state |
| | | const components = { |
| | | header: { |
| | | cell: DragableHeaderCol |
| | |
| | | fields: fields, |
| | | align: col.Align, |
| | | moveCol: this.moveCol, |
| | | dropCol: this.dropCol, |
| | | updateCol: this.updateCol, |
| | | addElement: this.addElement, |
| | | editColumn: this.editColumn, |
| | |
| | | }} |
| | | /> |
| | | </DndProvider> |
| | | <EditColumn column={card} dict={dict} columns={this.state.columns} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/> |
| | | <EditColumn column={card} columns={this.state.columns} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/> |
| | | <Modal |
| | | wrapClassName="model-table-action-verify-modal" |
| | | title={'编辑'} |
| | |
| | | <TableVerify |
| | | card={config.submit} |
| | | setting={config.setting} |
| | | dict={dict} |
| | | cols={config.cols} |
| | | columns={config.columns} |
| | | wrappedComponentRef={(inst) => this.verifyRef = inst} |