| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { DndProvider, DragSource, DropTarget } from 'react-dnd' |
| | | import { Table, Input, InputNumber, Popconfirm, Form, Icon, Select, Radio, Cascader, notification, message, Modal } from 'antd' |
| | | import { Table, Input, InputNumber, Popconfirm, Form, Icon, Select, Radio, Cascader, notification, message, Modal, Typography } from 'antd' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import ColorSketch from '@/mob/colorsketch' |
| | |
| | | let eTDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS |
| | | const EditableContext = React.createContext() |
| | | let dragingIndex = -1 |
| | | const { Paragraph } = Typography |
| | | |
| | | class BodyRow extends React.Component { |
| | | render() { |
| | |
| | | UNSAFE_componentWillMount () { |
| | | const { data, actions } = this.props |
| | | let columns = fromJS(this.props.columns).toJS() |
| | | let operation = null |
| | | |
| | | if (actions && (actions.includes('edit') || actions.includes('copy') || actions.includes('del'))) { |
| | | let _operation = null |
| | |
| | | return item.dataIndex !== 'operation' |
| | | }) |
| | | |
| | | let operation = { |
| | | operation = { |
| | | title: (<div> |
| | | {eTDict['model.operation']} |
| | | {actions.includes('copy') ? ( |
| | |
| | | |
| | | this.setState({ |
| | | data: data || [], |
| | | oricolumns: fromJS(this.props.columns).toJS(), |
| | | operation, |
| | | columns |
| | | }) |
| | | } |
| | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | if (!is(fromJS(this.state.data), fromJS(nextProps.data))) { |
| | | this.setState({data: nextProps.data, editingKey: ''}) |
| | | } else if (!is(fromJS(this.state.oricolumns), fromJS(nextProps.columns))) { |
| | | let cols = {} |
| | | nextProps.columns.forEach(col => {cols[col.dataIndex] = col}) |
| | | |
| | | this.setState({ |
| | | oricolumns: fromJS(nextProps.columns).toJS(), |
| | | columns: this.state.columns.map(col => { |
| | | if (cols[col.dataIndex]) { |
| | | return cols[col.dataIndex] |
| | | } |
| | | return col |
| | | } else if (!is(fromJS(this.props.columns), fromJS(nextProps.columns))) { |
| | | if (nextProps.columns.length === this.props.columns.length) { |
| | | let cols = {} |
| | | nextProps.columns.forEach(col => {cols[col.dataIndex] = col}) |
| | | |
| | | this.setState({ |
| | | columns: this.state.columns.map(col => { |
| | | if (cols[col.dataIndex]) { |
| | | return cols[col.dataIndex] |
| | | } |
| | | return col |
| | | }) |
| | | }) |
| | | }) |
| | | } else { |
| | | let columns = fromJS(nextProps.columns).toJS() |
| | | if (this.state.operation) { |
| | | columns.push(this.state.operation) |
| | | } |
| | | this.setState({columns}) |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | if (!unique) return |
| | | |
| | | data.unshift(cell) |
| | | data.push(cell) |
| | | }) |
| | | |
| | | this.setState({ data, editingKey: '', visible: false }, () => { |
| | |
| | | moveprops.moveRow = this.moveRow |
| | | } |
| | | |
| | | const columns = this.state.columns.map(col => { |
| | | let columns = this.state.columns.map(col => { |
| | | if (col.copy) { |
| | | col.render = (text) => (<Paragraph copyable>{text}</Paragraph>) |
| | | } |
| | | if (!col.editable) return col |
| | | return { |
| | | ...col, |
| | |
| | | } |
| | | }) |
| | | |
| | | columns.unshift({ |
| | | title: '序号', |
| | | dataIndex: '$index', |
| | | className: 'mk-index', |
| | | width: '60px', |
| | | }) |
| | | |
| | | const data = this.state.data.map((item, index) => { |
| | | item.$index = index + 1 |
| | | |
| | | return item |
| | | }) |
| | | |
| | | return ( |
| | | <EditableContext.Provider value={this.props.form}> |
| | | <div className="modal-edit-table"> |
| | |
| | | bordered |
| | | rowKey="uuid" |
| | | components={components} |
| | | dataSource={this.state.data} |
| | | dataSource={data} |
| | | columns={columns} |
| | | rowClassName="editable-row" |
| | | pagination={false} |