| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Button, Input, InputNumber } from 'antd' |
| | | import { Form, Row, Col, Button, Input, InputNumber, Radio } from 'antd' |
| | | import './index.scss' |
| | | |
| | | class UniqueForm extends Component { |
| | | class ExcelOutColumn extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.object, // 字典项 |
| | | columns: PropTypes.array, // 列名集合 |
| | | columnChange: PropTypes.func // 修改函数 |
| | | } |
| | | |
| | | state = { |
| | | editItem: null // 编辑元素 |
| | | } |
| | | |
| | | edit = (record) => { |
| | | this.setState({ |
| | | editItem: record |
| | | }) |
| | | |
| | | this.props.form.setFieldsValue({ |
| | | Column: record.Column, |
| | | Text: record.Text, |
| | | Width: record.Width, |
| | | }) |
| | | } |
| | | |
| | | |
| | | handleConfirm = () => { |
| | | // 表单提交时检查输入值是否正确 |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | | values.uuid = this.state.editItem ? this.state.editItem.uuid : '' |
| | | |
| | | this.props.columnChange(values) |
| | | this.setState({ |
| | | editItem: null |
| | | }) |
| | | this.props.form.setFieldsValue({ |
| | | Column: '', |
| | | Text: '', |
| | | Width: 20, |
| | | Width: 20 |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | render() { |
| | | const { dict } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const formItemLayout = { |
| | | labelCol: { |
| | |
| | | return ( |
| | | <Form {...formItemLayout} className="verify-form"> |
| | | <Row gutter={24}> |
| | | <Col span={7}> |
| | | <Form.Item label={'Column'}> |
| | | <Col span={5}> |
| | | <Form.Item label={dict['model.form.field']}> |
| | | {getFieldDecorator('Column', { |
| | | initialValue: '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + 'Column!' |
| | | message: dict['form.required.input'] + dict['model.form.field'] + '!' |
| | | } |
| | | ] |
| | | })(<Input placeholder="" autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={7}> |
| | | <Form.Item label={'Text'}> |
| | | <Col span={5}> |
| | | <Form.Item label={dict['model.name']}> |
| | | {getFieldDecorator('Text', { |
| | | initialValue: '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + 'Text!' |
| | | message: dict['form.required.input'] + dict['model.name'] + '!' |
| | | } |
| | | ] |
| | | })(<Input placeholder="" autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={7}> |
| | | <Form.Item label={'Width'}> |
| | | <Col span={5}> |
| | | <Form.Item label={dict['model.form.columnWidth']}> |
| | | {getFieldDecorator('Width', { |
| | | initialValue: 20, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + 'Width!' |
| | | message: this.props.dict['form.required.input'] + dict['model.form.columnWidth'] + '!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={5} max={200} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={3} className="add"> |
| | | <Button onClick={this.handleConfirm} type="primary" className="mk-green"> |
| | | 保存 |
| | | </Button> |
| | | </Col> |
| | | {/* <Col span={7}> |
| | | <Form.Item label={'类型'}> |
| | | <Col span={6}> |
| | | <Form.Item label="类型"> |
| | | {getFieldDecorator('type', { |
| | | initialValue: 'text' |
| | | })( |
| | | <Select onChange={this.typeChange}> |
| | | <Select.Option value="text"> text </Select.Option> |
| | | <Select.Option value="number"> number </Select.Option> |
| | | </Select> |
| | | <Radio.Group style={{whiteSpace: 'nowrap'}}> |
| | | <Radio value="text">文本</Radio> |
| | | <Radio value="number">数值</Radio> |
| | | <Radio value="image">图片</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> */} |
| | | </Col> |
| | | <Col span={3} className="add"> |
| | | <Button onClick={this.handleConfirm} type="primary" className="mk-green"> |
| | | 添加 |
| | | </Button> |
| | | </Col> |
| | | </Row> |
| | | </Form> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | export default Form.create()(UniqueForm) |
| | | export default Form.create()(ExcelOutColumn) |