import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Row, Col, Input, Select, Tooltip } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
// 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: fromJS(this.props.menu.supMenuList).toJS()
|
})
|
}
|
|
changeMenu = (val) => {
|
const { menu } = this.props
|
|
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)
|
}
|
})
|
})
|
}
|
|
render() {
|
const { menu } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { supMenuList } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} style={{paddingRight: '20px'}}>
|
<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}
|
>
|
{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" onPressEnter={() => this.props.inputSubmit()}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={22}>
|
<Form.Item label="菜单参数">
|
{getFieldDecorator('MenuNo', {
|
initialValue: menu.MenuNo || '',
|
rules: [
|
{
|
required: true,
|
message: '请输入菜单参数!'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" onPressEnter={() => this.props.inputSubmit()}/>)}
|
</Form.Item>
|
</Col>
|
{menu.Template === 'NewPage' ? <Col span={22}>
|
<Form.Item label={
|
<Tooltip overlayStyle={{minWidth: 500}} placement="topLeft" title={<div onClick={(e) => e.stopPropagation()}>使用同一单点系统下的其他业务系统，链接格式为：http://<span style={{color: 'orange'}}>******</span>/admin/index.html#/iframe/<span style={{color: 'orange'}}>menuId</span>/<span style={{color: 'orange'}}>@loginuid@</span>/<span style={{color: 'orange'}}>BID</span>。注：******为域名+虚拟目录；menuId为菜单ID；@loginuid@为登录信息（系统自动替换）；BID是向菜单中的传参，可为空。</div>}><QuestionCircleOutlined className="mk-form-tip" />链接地址</Tooltip>
|
}>
|
{getFieldDecorator('url', {
|
initialValue: menu.url || '',
|
rules: [
|
{
|
required: true,
|
message: '请输入页面地址!'
|
},
|
{
|
max: 1024,
|
message: '地址最长为1024个字符!'
|
}
|
]
|
})(<TextArea rows={3} />)}
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
