import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Input, Select } from 'antd'
|
import './index.scss'
|
|
const { TextArea } = Input
|
|
class MainSearch extends Component {
|
static propTpyes = {
|
menu: PropTypes.object, // 菜单信息
|
inputSubmit: PropTypes.func // 回车提交
|
}
|
|
state = {
|
supMenuList: []
|
}
|
|
UNSAFE_componentWillMount () {
|
this.setState({
|
supMenuList: this.props.menu.supMenuList
|
})
|
}
|
|
changeMenu = (val) => {
|
const { menu } = this.state
|
|
let submenu = menu.fstMenuList.filter(item => item.MenuID === val)[0]
|
|
if (submenu) {
|
this.setState({
|
supMenuList: submenu.children
|
}, () => {
|
this.props.form.setFieldsValue({ParentID: submenu.children[0] ? submenu.children[0].MenuID : ''})
|
})
|
} else {
|
this.setState({
|
supMenuList: []
|
}, () => {
|
this.props.form.setFieldsValue({ParentID: ''})
|
})
|
}
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
onEnterSubmit = (e) => {
|
// 表单回车提交
|
if (e.key !== 'Enter') return
|
|
this.props.inputSubmit && this.props.inputSubmit()
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { menu } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} style={{paddingRight: '20px'}} onKeyDown={this.onEnterSubmit}>
|
<Row gutter={24}>
|
<Col span={22}>
|
<Form.Item label={'一级菜单'}>
|
{getFieldDecorator('fstMenuId', {
|
initialValue: menu.fstMenuId,
|
rules: [
|
{
|
required: true,
|
message: '请选择上级菜单!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={this.changeMenu}
|
>
|
{menu.fstMenuList.map(option =>
|
<Select.Option key={option.MenuID} value={option.MenuID}>{option.text || option.MenuName}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={22}>
|
<Form.Item label={'二级菜单'}>
|
{getFieldDecorator('ParentID', {
|
initialValue: menu.ParentId,
|
rules: [
|
{
|
required: true,
|
message: '请选择上级菜单!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
>
|
{menu.supMenuList.map(option =>
|
<Select.Option key={option.MenuID} value={option.MenuID}>{option.text || option.MenuName}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={22}>
|
<Form.Item label={'菜单名称'}>
|
{getFieldDecorator('MenuName', {
|
initialValue: menu.MenuName || '',
|
rules: [
|
{
|
required: true,
|
message: '请输入菜单名称!'
|
}
|
]
|
})(<Input placeholder="" autoFocus autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
<Col span={22}>
|
<Form.Item label={'菜单参数'}>
|
{getFieldDecorator('MenuNo', {
|
initialValue: menu.MenuNo || '',
|
rules: [
|
{
|
required: true,
|
message: '请输入菜单参数!'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
{menu.Template === 'NewPage' ? <Col span={22}>
|
<Form.Item label={'链接地址'}>
|
{getFieldDecorator('url', {
|
initialValue: menu.url || '',
|
rules: [
|
{
|
required: true,
|
message: '请输入页面地址!'
|
},
|
{
|
max: 1024,
|
message: '地址最长为1024个字符!'
|
}
|
]
|
})(<TextArea rows={2} />)}
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
