| | |
| | | import { is, fromJS } from 'immutable' |
| | | import { DndProvider, DragSource, DropTarget } from 'react-dnd' |
| | | import { Table, Popover, Modal, message, Typography } from 'antd' |
| | | import { PlusOutlined, FileSyncOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined } from '@ant-design/icons' |
| | | import { PlusOutlined, PlusSquareOutlined, FileSyncOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined } from '@ant-design/icons' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | |
| | | render() { |
| | | const { connectDragSource, connectDropTarget, moveCol, dropCol, addElement, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props |
| | | |
| | | if (index !== undefined) { |
| | | if (index !== undefined && column) { |
| | | let style = {cursor: 'move', textAlign: align} |
| | | if (column.Width) { |
| | | style.width = column.Width |
| | |
| | | } |
| | | |
| | | return connectDragSource( |
| | | connectDropTarget(<th {...restProps} index={index} style={style} onDoubleClick={() => column && this.props.editColumn(column)}> |
| | | connectDropTarget(<th {...restProps} index={index} style={style} onDoubleClick={() => this.props.editColumn(column)}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> |
| | | {column && ['custom', 'colspan', 'action'].includes(column.type) ? |
| | | <PlusOutlined className="plus" title="添加" onClick={() => this.props.addElement(column)} /> : null |
| | | } |
| | | {column.type === 'colspan' ? <PlusOutlined className="plus" title="添加列" onClick={() => this.props.addElement(column)} /> : null} |
| | | {column.type === 'custom' ? <PlusOutlined className="plus" title="添加元素" onClick={() => this.props.addElement(column)} /> : null} |
| | | {column.type === 'custom' ? <PlusSquareOutlined className="plus" title="添加按钮" onClick={() => this.props.addElement(column, 'button')} /> : null} |
| | | <EditOutlined className="edit" title="编辑" onClick={() => this.props.editColumn(column)} /> |
| | | {column && column.type === 'custom' ? <PasteComponent options={['customCardElement']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} |
| | | {column && column.type === 'action' ? <PasteComponent options={['action']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} |
| | | {column && (column.type === 'custom' || column.type === 'action') ? <FontColorsOutlined className="style" title="调整样式" onClick={() => this.props.changeStyle(column)}/> : null} |
| | | {column.type === 'custom' ? <PasteComponent options={['customCardElement', 'action']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} |
| | | {column.type === 'custom' ? <FontColorsOutlined className="style" title="调整样式" onClick={() => this.props.changeStyle(column)}/> : null} |
| | | <DeleteOutlined className="close" title="删除" onClick={this.deleteCol} /> |
| | | {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } |
| | | {['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } |
| | | </div> |
| | | } trigger="hover"> |
| | | {children} |
| | |
| | | <th {...restProps} style={style} key={column.uuid} onDoubleClick={() => this.props.editColumn(column)}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> |
| | | {column && ['custom', 'colspan'].includes(column.type) ? |
| | | <PlusOutlined className="plus" title="添加" onClick={() => this.props.addElement(column)} /> : null |
| | | } |
| | | {column.type === 'colspan' ? <PlusOutlined className="plus" title="添加列" onClick={() => this.props.addElement(column)} /> : null} |
| | | {column.type === 'custom' ? <PlusOutlined className="plus" title="添加元素" onClick={() => this.props.addElement(column)} /> : null} |
| | | {column.type === 'custom' ? <PlusSquareOutlined className="plus" title="添加按钮" onClick={() => this.props.addElement(column, 'button')} /> : null} |
| | | <EditOutlined className="edit" title="编辑" onClick={() => this.props.editColumn(column)} /> |
| | | {column.type === 'custom' ? <PasteComponent options={['customCardElement']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} |
| | | {column.type === 'custom' ? <PasteComponent options={['customCardElement', 'action']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} |
| | | <DeleteOutlined className="close" title="删除" onClick={this.deleteCol} /> |
| | | {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } |
| | | {['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } |
| | | </div> |
| | | } trigger="hover"> |
| | | {children} |
| | |
| | | if (column && column.type === 'custom') { |
| | | return ( |
| | | <td style={{padding: 0, ...(column.style || {})}} className={className}> |
| | | <CardCellComponent cards={config} cardCell={column} elements={column.elements} updateElement={this.updateCard}/> |
| | | </td> |
| | | ) |
| | | } else if (column && column.type === 'action') { |
| | | return ( |
| | | <td style={{padding: 0, textAlign: column.Align, ...(column.style || {})}} className={'action-column ' + className}> |
| | | <CardCellComponent cards={config} cardCell={column} elements={column.elements} updateElement={this.updateCard}/> |
| | | </td> |
| | | ) |
| | |
| | | let col = { focus: true, uuid: Utils.getuuid(), label: 'label', field: '', type: item.subType, elements: [] } |
| | | if (col.type === 'colspan') { |
| | | col.subcols = [] |
| | | } else if (col.type === 'action') { |
| | | col.label = '操作' |
| | | } else if (col.type === 'index') { |
| | | col.label = '序号' |
| | | } |
| | |
| | | |
| | | pasteCell = (col, cell, resolve) => { |
| | | resolve({status: true}) |
| | | if (cell.copyType === 'action') { |
| | | cell.eleType = 'button' |
| | | |
| | | cell.uuid = Utils.getuuid() |
| | | cell.focus = true |
| | | |
| | | if (!cell.eleType) { |
| | | if (cell.copyType === 'action') { |
| | | cell.eleType = 'button' |
| | | cell.width = cell.width || 12 |
| | | } else { |
| | | cell.eleType = 'text' |
| | | } |
| | | } |
| | | |
| | | delete cell.copyType |
| | | cell.uuid = Utils.getuuid() |
| | | cell.focus = true |
| | | |
| | | MKEmitter.emit('cardAddElement', col.uuid, cell) |
| | | } |
| | | |
| | | addElement = (col) => { |
| | | addElement = (col, type) => { |
| | | let column = fromJS(col).toJS() |
| | | |
| | | if (column.type === 'colspan') { |
| | |
| | | }) |
| | | this.updateCol(column) |
| | | } else if (column.type === 'custom') { |
| | | let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}} |
| | | if (type === 'button') { |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | | focus: true, |
| | | eleType: 'button', |
| | | label: 'button', |
| | | OpenType: 'prompt', |
| | | class: 'primary', |
| | | intertype: 'system', |
| | | execSuccess: 'grid', |
| | | execError: 'never', |
| | | show: 'link' |
| | | } |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', column.uuid, newcard) |
| | | } else if (column.type === 'action') { |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | | focus: true, |
| | | eleType: 'button', |
| | | label: 'button', |
| | | OpenType: 'prompt', |
| | | class: 'primary', |
| | | intertype: 'system', |
| | | execSuccess: 'grid', |
| | | execError: 'never', |
| | | show: 'link' |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', column.uuid, newcard) |
| | | } else { |
| | | let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}} |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', column.uuid, newcard) |
| | | } |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', column.uuid, newcard) |
| | | } |
| | | } |
| | | |
| | |
| | | } else if (col.type === 'custom') { |
| | | col.style = card.style || {} |
| | | col.elements = card.type === 'custom' ? (card.elements || []) : [] |
| | | } else if (col.type === 'action') { |
| | | col.style = card.style || {} |
| | | col.elements = card.type === 'action' ? (card.elements || []) : [] |
| | | } |
| | | |
| | | window.GLOB.precolumnId = window.GLOB.columnId || '' |