import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Row, Col, Input, Select, Switch } from 'antd'
|
import { formRule } from '@/utils/option.js'
|
import './index.scss'
|
|
const { TextArea } = Input
|
|
class MainSearch extends Component {
|
static propTpyes = {
|
menu: PropTypes.object,
|
config: PropTypes.object,
|
updatemenu: PropTypes.func
|
}
|
|
state = {
|
menulist: [],
|
submenulist: []
|
}
|
|
UNSAFE_componentWillMount () {
|
const { menu } = this.props
|
|
this.setState({
|
menulist: menu.fstMenuList || [],
|
submenulist: menu.supMenuList || []
|
})
|
}
|
|
selectChange = (key, value) => {
|
const { config } = this.props
|
const { menulist } = this.state
|
|
if (key === 'fstMenuId') {
|
let _menu = menulist.filter(cell => cell.MenuID === value)[0]
|
let options = _menu ? _menu.children : []
|
let ParentId = options[0] ? options[0].MenuID : ''
|
|
this.setState({
|
submenulist: options
|
}, () => {
|
this.props.form.setFieldsValue({ParentId: ParentId})
|
})
|
this.props.updatemenu({...config, fstMenuId: value, ParentId: ParentId})
|
} else if (key === 'ParentId') {
|
this.setState({}, () => {
|
this.props.updatemenu({...config, ParentId: value})
|
})
|
} else if (key === 'opentype') {
|
this.setState({}, () => {
|
this.props.updatemenu({...config, OpenType: value})
|
})
|
} else if (key === 'hidden') {
|
this.setState({}, () => {
|
this.props.updatemenu({...config, hidden: value})
|
})
|
}
|
}
|
|
changeName = (e) => {
|
let value = e.target.value || ''
|
if (value.length > 100) return
|
this.setState({}, () => {
|
this.props.updatemenu({...this.props.config, MenuName: value})
|
})
|
}
|
|
changeNo = (e) => {
|
let value = e.target.value || ''
|
if (value.length > 100) return
|
this.setState({}, () => {
|
this.props.updatemenu({...this.props.config, MenuNo: value})
|
})
|
}
|
|
changeEasyCode = (e) => {
|
let value = e.target.value || ''
|
if (value.length > 100) return
|
this.setState({}, () => {
|
this.props.updatemenu({...this.props.config, easyCode: value})
|
})
|
}
|
|
changeRemark = (e) => {
|
let value = e.target.value || ''
|
this.setState({}, () => {
|
this.props.updatemenu({...this.props.config, Remark: value})
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return is(fromJS(this.props), fromJS(nextProps))
|
}
|
|
render() {
|
const { menu, config } = this.props
|
const { getFieldDecorator } = this.props.form
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 24 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 24 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} className="comtable-menu-form" id="subqazxcvbn">
|
<Row gutter={24}>
|
<Col span={24}>
|
<Form.Item label="一级菜单">
|
{getFieldDecorator('fstMenuId', {
|
initialValue: menu.fstMenuId,
|
rules: [
|
{
|
required: true,
|
message: '请选择一级菜单!'
|
}
|
]
|
})(
|
<Select onChange={(value) => {this.selectChange('fstMenuId', value)}}>
|
{this.state.menulist.map(option =>
|
<Select.Option key={option.MenuID} value={option.MenuID}>
|
{option.text || option.MenuName}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="二级菜单">
|
{getFieldDecorator('ParentId', {
|
initialValue: menu.ParentId,
|
rules: [
|
{
|
required: true,
|
message: '请选择二级菜单!'
|
}
|
]
|
})(
|
<Select onChange={(value) => {this.selectChange('ParentId', value)}}>
|
{this.state.submenulist.map(option =>
|
<Select.Option key={option.MenuID} value={option.MenuID}>
|
{option.text || option.MenuName}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="菜单名称">
|
{getFieldDecorator('MenuName', {
|
initialValue: menu.MenuName,
|
rules: [
|
{
|
required: true,
|
message: '请输入菜单名称!'
|
},
|
{
|
max: formRule.input.max,
|
message: formRule.input.message
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" onChange={this.changeName}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="菜单参数">
|
{getFieldDecorator('MenuNo', {
|
initialValue: menu.MenuNo,
|
rules: [
|
{
|
required: true,
|
message: '请输入菜单参数!'
|
},
|
{
|
max: formRule.input.max,
|
message: formRule.input.message
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" onChange={this.changeNo}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="打开方式">
|
{getFieldDecorator('opentype', {
|
initialValue: menu.PageParam ? menu.PageParam.OpenType : 'newtab',
|
rules: [
|
{
|
required: true,
|
message: '请选择打开方式!'
|
}
|
]
|
})(
|
<Select onChange={(value) => {this.selectChange('opentype', value)}}>
|
<Select.Option value="newtab">标签页</Select.Option>
|
<Select.Option value="newpage">新页面</Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="助记码">
|
{getFieldDecorator('easyCode', {
|
initialValue: config.easyCode,
|
rules: [
|
{
|
max: formRule.input.max,
|
message: formRule.input.message
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" onChange={this.changeEasyCode}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item className="hidden-menu" labelCol={{span: 8}} wrapperCol={{span: 16}} label={'隐藏菜单'}>
|
<Switch checkedChildren={'是'} defaultChecked={menu.PageParam ? (menu.PageParam.hidden === 'true') : false} unCheckedChildren={'否'} onChange={(value) => {
|
this.selectChange('hidden', value + '')
|
}} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="备注">
|
{getFieldDecorator('Remark', {
|
initialValue: config.Remark || '',
|
rules: [
|
{
|
max: 512,
|
message: '备注最多512个字符！'
|
}
|
]
|
})(<TextArea rows={2} placeholder={''} onChange={this.changeRemark} />)}
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
