import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Button, Cascader, notification } from 'antd'
|
// import './index.scss'
|
|
class MenusColumn extends Component {
|
static propTpyes = {
|
supNodes: PropTypes.array,
|
modules: PropTypes.array,
|
columnChange: PropTypes.func
|
}
|
|
state = {options: []}
|
|
handleConfirm = () => {
|
const { supNodes } = this.props
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.componentId = values.nodes[values.nodes.length - 1]
|
if (supNodes.filter(item => item.componentId === values.componentId).length > 0) {
|
notification.warning({
|
top: 92,
|
message: '组件已添加！',
|
duration: 2
|
})
|
return
|
}
|
|
values.label = this.state.options.map(item => item.label).join(' / ')
|
|
this.props.columnChange(values)
|
}
|
})
|
}
|
|
onChange = (values, options) => {
|
this.setState({options: options})
|
}
|
|
render() {
|
const { modules } = this.props
|
const { getFieldDecorator } = this.props.form
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
<Col span={16}>
|
<Form.Item label="组件">
|
{getFieldDecorator('nodes', {
|
initialValue: [],
|
rules: [
|
{
|
required: true,
|
message: '请选择组件!'
|
}
|
]
|
})(<Cascader options={modules} onChange={this.onChange} placeholder=""/>)}
|
</Form.Item>
|
</Col>
|
<Col span={6} offset={2} style={{paddingTop: '4px'}}>
|
<Button onClick={this.handleConfirm} type="primary" className="mk-green">
|
添加
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MenusColumn)
|
