import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Button, Input, Select, Cascader, notification } from 'antd'
|
import './index.scss'
|
|
class MenusColumn extends Component {
|
static propTpyes = {
|
menus: PropTypes.array,
|
appType: PropTypes.string,
|
menulist: PropTypes.array,
|
columnChange: PropTypes.func
|
}
|
|
handleConfirm = () => {
|
const { appType, menus, menulist } = this.props
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
if (menus.filter(item => item.sign === values.sign).length > 0) {
|
notification.warning({
|
top: 92,
|
message: '标识已存在！',
|
duration: 2
|
})
|
return
|
}
|
|
if (!appType) {
|
let fId = values.menu[0] || ''
|
let sId = values.menu[1] || ''
|
let tId = values.menu[2] || ''
|
let label = ''
|
|
menulist.forEach(f => {
|
if (!fId || fId !== f.value) return
|
label = f.label
|
|
f.children.forEach(s => {
|
if (!sId || sId !== s.value) return
|
label += ' / ' + s.label
|
|
s.children.forEach(t => {
|
if (!tId || tId !== t.value) return
|
label += ' / ' + t.label
|
|
values.MenuID = t.MenuID
|
values.MenuName = t.MenuName
|
values.MenuNo = t.MenuNo
|
values.tabType = t.type
|
values.label = label
|
})
|
})
|
})
|
} else {
|
menulist.forEach(f => {
|
if (values.menu !== f.value) return
|
values.label = f.label
|
})
|
}
|
|
this.props.columnChange(values)
|
this.props.form.setFieldsValue({
|
sign: '',
|
menu: appType ? '' : []
|
})
|
}
|
})
|
}
|
|
render() {
|
const { appType, menulist } = 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} className="verify-form">
|
<Row gutter={24}>
|
<Col span={10}>
|
<Form.Item label="标识">
|
{getFieldDecorator('sign', {
|
initialValue: ''
|
})(<Input placeholder="" autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
<Col span={10}>
|
<Form.Item label="菜单">
|
{getFieldDecorator('menu', {
|
initialValue: appType ? '' : [],
|
rules: [
|
{
|
required: true,
|
message: '请选择菜单!'
|
}
|
]
|
})(appType ? <Select>
|
{menulist.map((item, i) => (<Select.Option key={i} value={item.value}> {item.label || item.text} </Select.Option>))}
|
</Select> : <Cascader options={menulist} placeholder=""/>)}
|
</Form.Item>
|
</Col>
|
<Col span={4} className="add">
|
<Button onClick={this.handleConfirm} type="primary" className="mk-green">
|
添加
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MenusColumn)
|
