import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Input, Radio, Tooltip, InputNumber, Switch } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
import MemberForm from './memberform'
|
const { TextArea } = Input
|
|
class NodeForm extends Component {
|
static propTpyes = {
|
node: PropTypes.any,
|
data: PropTypes.any,
|
orgs: PropTypes.array
|
}
|
|
state = {
|
flowType: this.props.data.flowType || 'approval',
|
execCondition: this.props.data.execCondition === 'open',
|
}
|
|
handleConfirm = () => {
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
if (values.execCondition === true) {
|
values.execCondition = 'open'
|
} else if (values.execCondition === false) {
|
values.execCondition = 'close'
|
}
|
|
if (values.matchVal) {
|
values.matchVal = values.matchVal.replace(/\t+|\v+|\s+/g, '')
|
}
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
render() {
|
const { node, orgs } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { flowType, execCondition } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
let data = this.props.data || {}
|
let nodetype = node.shape !== 'edge' ? 'node' : 'edge'
|
if (node.mknode === 'start') {
|
nodetype = 'start'
|
} else if (node.mknode === 'end') {
|
nodetype = 'end'
|
} else if (node.mknode === 'endEdge') {
|
nodetype = 'endEdge'
|
} else if (node.mknode === 'startEdge') {
|
nodetype = 'startEdge'
|
}
|
|
return (
|
<Form {...formItemLayout} className="normal-node-form">
|
<Row gutter={24}>
|
<Col span={12}>
|
<Form.Item label="状态值">
|
{getFieldDecorator('status', {
|
initialValue: data.status,
|
rules: [
|
{
|
required: true,
|
message: '请输入状态值!'
|
}
|
]
|
})(
|
<InputNumber readOnly={nodetype !== 'node' && nodetype !== 'edge'} precision={0}/>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="状态名">
|
{getFieldDecorator('statusName', {
|
initialValue: data.statusName || ''
|
})(
|
<Input placeholder="" autoComplete="off"/>
|
)}
|
</Form.Item>
|
</Col>
|
{nodetype === 'node' ? <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}
|
{nodetype === 'edge' ? <Col span={12}>
|
<Form.Item label="操作类型">
|
{getFieldDecorator('flowType', {
|
initialValue: flowType
|
})(
|
<Radio.Group onChange={(e) => this.setState({flowType: e.target.value})}>
|
<Radio value="approval">审批</Radio>
|
<Radio value="reject">驳回</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{nodetype === 'edge' ? <Col span={12}>
|
<Form.Item label="设置审批人">
|
{getFieldDecorator('approver', {
|
initialValue: data.approver || 'member'
|
})(
|
<Radio.Group>
|
<Radio value="member">指定成员</Radio>
|
<Radio value="departmentManager">部门主管</Radio>
|
<Radio value="directManager">直属主管</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{nodetype === 'edge' && flowType !== 'reject' ? <Col span={12}>
|
<Form.Item label="审批方式">
|
{getFieldDecorator('approvalMethod', {
|
initialValue: data.approvalMethod || 'orsign'
|
})(
|
<Radio.Group>
|
<Radio value="countersign">会签</Radio>
|
<Radio value="orsign">或签</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{nodetype === 'edge' ? <Col span={12}>
|
<Form.Item label="审批人">
|
{getFieldDecorator('members', {
|
initialValue: data.members || [],
|
rules: [{
|
required: true,
|
message: '请添加审批人!'
|
}]
|
})(
|
<MemberForm orgs={orgs} title="审批人"/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{nodetype === 'edge' ? <Col span={12}>
|
<Form.Item label="抄送人">
|
{getFieldDecorator('copys', {
|
initialValue: data.copys || []
|
})(
|
<MemberForm orgs={orgs} title="抄送人"/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{nodetype === 'edge' && flowType !== 'reject' ? <Col span={12}>
|
<Form.Item label="执行条件">
|
{getFieldDecorator('execCondition', {
|
valuePropName: 'checked',
|
initialValue: execCondition
|
})(
|
<Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(val) => this.setState({execCondition: val})} />
|
)}
|
</Form.Item>
|
</Col> : null}
|
{nodetype === 'edge' && flowType !== 'reject' && execCondition ? <Col span={12}>
|
<Form.Item label="对比方式">
|
{getFieldDecorator('match', {
|
initialValue: data.match || '='
|
})(
|
<Radio.Group>
|
<Radio value="=">=</Radio>
|
<Radio value="<"><</Radio>
|
<Radio value=">">></Radio>
|
<Radio value="<="><=</Radio>
|
<Radio value=">=">>=</Radio>
|
<Radio value="!=">!=</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{nodetype === 'edge' && flowType !== 'reject' && execCondition ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="对比值中不可包含制表符、空格、换行符等。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
对比值
|
</Tooltip>
|
}>
|
{getFieldDecorator('matchVal', {
|
initialValue: data.matchVal || ''
|
})(
|
<Input placeholder="" autoComplete="off"/>
|
)}
|
</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)
|
