import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Select, Input, Radio, Tooltip, InputNumber } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
const { TextArea } = Input
|
|
class NodeForm extends Component {
|
static propTpyes = {
|
node: PropTypes.any,
|
data: PropTypes.any,
|
rolelist: PropTypes.array
|
}
|
|
state = {
|
ctrlType: this.props.data.ctrlType || 'role'
|
}
|
|
handleConfirm = () => {
|
const { rolelist } = this.props
|
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
if (values.roleId) {
|
values.roleName = ''
|
rolelist.forEach(item => {
|
if (item.RoleID === values.roleId) {
|
values.roleName = item.RoleName
|
}
|
})
|
}
|
if (values.depId) {
|
values.depName = ''
|
rolelist.forEach(item => {
|
if (item.RoleID === values.depId) {
|
values.depName = item.RoleName
|
}
|
})
|
}
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
render() {
|
const { node, rolelist } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { ctrlType } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
let data = this.props.data || {}
|
|
return (
|
<Form {...formItemLayout} className="normal-node-form">
|
<Row gutter={24}>
|
<Col span={12}>
|
<Form.Item label="状态值">
|
{getFieldDecorator('status', {
|
initialValue: data.status || 0,
|
rules: [
|
{
|
required: true,
|
message: '请输入状态值!'
|
}
|
]
|
})(
|
<InputNumber precision={0}/>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="状态名">
|
{getFieldDecorator('statusName', {
|
initialValue: data.statusName || ''
|
})(
|
<Input placeholder="" autoComplete="off"/>
|
)}
|
</Form.Item>
|
</Col>
|
{node.shape !== 'edge' ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="标记将作为节点ID">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
标记
|
</Tooltip>
|
}>
|
{getFieldDecorator('sign', {
|
initialValue: data.sign || ''
|
})(
|
<Input placeholder="" autoComplete="off"/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={12}>
|
<Form.Item label="类型">
|
{getFieldDecorator('ctrlType', {
|
initialValue: data.ctrlType || 'role'
|
})(
|
<Radio.Group onChange={(e) => this.setState({ctrlType: e.target.value})}>
|
<Radio value="role">角色</Radio>
|
<Radio value="department">部门</Radio>
|
<Radio value="none">无</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
{ctrlType === 'role' ? <Col span={12}>
|
<Form.Item label="角色">
|
{getFieldDecorator('roleId', {
|
initialValue: data.roleId || '',
|
rules: [
|
{
|
required: true,
|
message: '请选择角色!'
|
}
|
]
|
})(
|
<Select showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
|
{rolelist.map(item => (<Select.Option key={item.RoleID} value={item.RoleID}>{item.RoleName}</Select.Option>))}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{ctrlType === 'department' ? <Col span={12}>
|
<Form.Item label="部门">
|
{getFieldDecorator('depId', {
|
initialValue: data.depId || '',
|
rules: [
|
{
|
required: true,
|
message: '请选择部门!'
|
}
|
]
|
})(
|
<Select showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
|
{rolelist.map(item => (<Select.Option key={item.RoleID} value={item.RoleID}>{item.RoleName}</Select.Option>))}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={24}>
|
<Form.Item label="备注">
|
{getFieldDecorator('remark', {
|
initialValue: data.remark || ''
|
})(
|
<TextArea rows={2}/>
|
)}
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(NodeForm)
|
