| | |
| | | import React, { Component } from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Table, Input, InputNumber, Popconfirm, Form, Icon, Select } from 'antd' |
| | | import { Table, Input, InputNumber, Popconfirm, Form, Icon, Select, Radio, Cascader } from 'antd' |
| | | |
| | | import ColorSketch from '@/mob/colorsketch' |
| | | // import Utils from '@/utils/utils.js' |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import './index.scss' |
| | | |
| | | let eTDict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS |
| | | const EditableContext = React.createContext() |
| | | |
| | | class EditableCell extends Component { |
| | |
| | | } else if (inputType === 'color') { |
| | | return <ColorSketch /> |
| | | } else if (inputType === 'select') { |
| | | return <Select> |
| | | {options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))} |
| | | </Select> |
| | | return ( |
| | | <Select> |
| | | {options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))} |
| | | </Select> |
| | | ) |
| | | } else if (inputType === 'cascader') { |
| | | return ( |
| | | <Cascader options={options} placeholder=""/> |
| | | ) |
| | | } else if (inputType === 'radio') { |
| | | return ( |
| | | <Radio.Group> |
| | | {options.map((item, i) => (<Radio key={i} value={item.field || item.value}> {item.label || item.text} </Radio>))} |
| | | </Radio.Group> |
| | | ) |
| | | } else { |
| | | return <Input onPressEnter={() => this.getValue(form)} /> |
| | | } |
| | |
| | | |
| | | renderCell = (form) => { |
| | | const { getFieldDecorator } = form |
| | | const { editing, dataIndex, title, record, children, className, required } = this.props |
| | | const { editing, dataIndex, title, record, children, className, required, inputType } = this.props |
| | | |
| | | return ( |
| | | <td className={className}> |
| | |
| | | rules: [ |
| | | { |
| | | required: required, |
| | | message: `Please Input ${title}!`, |
| | | message: ['number', 'text', 'input'].includes(inputType) ? `${eTDict['form.required.input']} ${title}!` : `${eTDict['form.required.select']} ${title}!`, |
| | | } |
| | | ], |
| | | initialValue: record[dataIndex], |
| | |
| | | |
| | | class EditTable extends Component { |
| | | static propTpyes = { |
| | | actions: PropTypes.any, // 操作项 |
| | | data: PropTypes.any, // 数据列表 |
| | | columns: PropTypes.array, // 显示列 |
| | | onChange: PropTypes.func // 数据变化 |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { data } = this.props |
| | | const { data, actions } = this.props |
| | | let columns = fromJS(this.props.columns).toJS() |
| | | let dict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS |
| | | |
| | | columns.push({ |
| | | title: dict['model.operation'], |
| | | title: eTDict['model.operation'], |
| | | dataIndex: 'operation', |
| | | width: '140px', |
| | | render: (text, record) => { |
| | | const { editingKey } = this.state |
| | | const editable = this.isEditing(record) |
| | | return editable ? ( |
| | | <span> |
| | | <span style={{textAlign: 'center', display: 'block'}}> |
| | | <EditableContext.Consumer> |
| | | {form => ( |
| | | <span onClick={() => this.save(form, record.uuid)} style={{ marginRight: 8 , color: '#1890ff', cursor: 'pointer'}}> |
| | | {dict['model.save']} |
| | | {eTDict['model.save']} |
| | | </span> |
| | | )} |
| | | </EditableContext.Consumer> |
| | | <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>{dict['model.cancel']}</span> |
| | | <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>{eTDict['model.cancel']}</span> |
| | | </span> |
| | | ) : ( |
| | | <div className={'operation-btn' + (editingKey !== '' ? ' disabled' : '')}> |
| | | <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> |
| | | <span className="primary" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'up')}}><Icon type="arrow-up" /></span> |
| | | <span className="danger" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'down')}}><Icon type="arrow-down" /></span> |
| | | {editingKey === '' ? <Popconfirm |
| | | {!actions || actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> : null} |
| | | {!actions || actions.includes('up') ? <span className="primary" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'up')}}><Icon type="arrow-up" /></span> : null} |
| | | {!actions || actions.includes('down') ? <span className="danger" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'down')}}><Icon type="arrow-down" /></span> : null} |
| | | {(!actions || actions.includes('del')) && editingKey === '' ? <Popconfirm |
| | | overlayClassName="popover-confirm" |
| | | title={dict['model.query.delete']} |
| | | title={eTDict['model.query.delete']} |
| | | onConfirm={() => this.handleDelete(record.uuid) |
| | | }> |
| | | <span className="danger"><Icon type="delete" /></span> |
| | | </Popconfirm> : null} |
| | | {editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null} |
| | | {(!actions || actions.includes('del')) && editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null} |
| | | </div> |
| | | ) |
| | | } |
| | |
| | | |
| | | this.setState({ |
| | | data: data || [], |
| | | columns, |
| | | dict |
| | | columns |
| | | }) |
| | | } |
| | | |