import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Input, Radio, Tooltip, InputNumber, Switch, notification } 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,
|
handleSubmit: PropTypes.func
|
}
|
|
state = {
|
flowType: 'approval',
|
execCondition: false,
|
approvalMethod: 'orsign',
|
readOnly: false,
|
options: []
|
}
|
|
UNSAFE_componentWillMount() {
|
const { node, data } = this.props
|
|
let options = []
|
let readOnly = false
|
|
if (node.mknode === 'start') {
|
readOnly = true
|
} else if (node.mknode === 'end') {
|
|
} else if (node.mknode === 'endEdge') {
|
options = ['approvalMethod', 'execCondition']
|
} else if (node.mknode === 'startEdge') {
|
readOnly = true
|
} else if (node.mknode === 'firstEdge') {
|
options = ['approver', 'members', 'copys']
|
} else if (node.shape !== 'edge') { // node
|
options = ['sign']
|
} else {
|
options = ['flowType', 'approvalMethod', 'approver', 'members', 'copys', 'execCondition']
|
}
|
|
this.setState({
|
flowType: data.flowType || 'approval',
|
execCondition: options.includes('execCondition') && data.execCondition === 'open',
|
approvalMethod: data.approvalMethod || 'orsign',
|
options,
|
readOnly
|
})
|
}
|
|
handleConfirm = () => {
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
if (values.approvalMethod === 'countersign' && values.members.length > 5) {
|
notification.warning({
|
top: 92,
|
message: '会签时审批人不可超过5人！',
|
duration: 10
|
})
|
return
|
}
|
|
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 { orgs } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { flowType, execCondition, approvalMethod, readOnly, options } = 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}>
|
{options.includes('approver') || options.includes('execCondition') ? <Col span={24}>
|
<p className="mk-split">按钮执行命令</p>
|
</Col> : null}
|
<Col span={12}>
|
<Form.Item label="状态值">
|
{getFieldDecorator('status', {
|
initialValue: data.status,
|
rules: [
|
{ required: true, message: '请输入状态值!' }
|
]
|
})(
|
<InputNumber readOnly={readOnly} precision={0} onPressEnter={() => this.props.handleSubmit()}/>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="状态名">
|
{getFieldDecorator('statusName', {
|
initialValue: data.statusName || ''
|
})(
|
<Input autoComplete="off" onPressEnter={() => this.props.handleSubmit()}/>
|
)}
|
</Form.Item>
|
</Col>
|
{options.includes('sign') ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="标记将作为节点ID">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
标记
|
</Tooltip>
|
}>
|
{getFieldDecorator('sign', {
|
initialValue: data.sign || ''
|
})(
|
<Input autoComplete="off" onPressEnter={() => this.props.handleSubmit()}/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{options.includes('flowType') ? <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}
|
{options.includes('approvalMethod') && flowType !== 'reject' ? <Col span={12}>
|
<Form.Item label="审批方式">
|
{getFieldDecorator('approvalMethod', {
|
initialValue: approvalMethod
|
})(
|
<Radio.Group onChange={(e) => this.setState({approvalMethod: e.target.value})}>
|
<Radio value="orsign">或签</Radio>
|
<Radio value="countersign">会签</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{options.includes('approvalMethod') && flowType !== 'reject' && approvalMethod === 'countersign' ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="示例：“财务经理张总已审核”，其中“已审核”为会签标记。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
会签标记
|
</Tooltip>
|
}>
|
{getFieldDecorator('mark', {
|
initialValue: data.mark || '已审核',
|
rules: [
|
{ required: true, message: '请输入会签标记!' }
|
]
|
})(
|
<Input autoComplete="off" onPressEnter={() => this.props.handleSubmit()}/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={24}>
|
<Form.Item label="备注">
|
{getFieldDecorator('remark', {
|
initialValue: data.remark || ''
|
})(
|
<TextArea rows={2}/>
|
)}
|
</Form.Item>
|
</Col>
|
{options.includes('approver') ? <Col span={24}>
|
<p className="mk-split">下一步审批权限</p>
|
</Col> : null}
|
{options.includes('approver') ? <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}
|
{options.includes('members') ? <Col span={12}>
|
<Form.Item label="审批人">
|
{getFieldDecorator('members', {
|
initialValue: data.members || [],
|
rules: [
|
{ required: true, message: '请添加审批人!' }
|
]
|
})(
|
<MemberForm orgs={orgs} title="审批人"/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{options.includes('copys') ? <Col span={12}>
|
<Form.Item label="抄送人">
|
{getFieldDecorator('copys', {
|
initialValue: data.copys || []
|
})(
|
<MemberForm orgs={orgs} title="抄送人"/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{options.includes('execCondition') && flowType !== 'reject' ? <Col span={24}>
|
<p className="mk-split">分支执行条件</p>
|
</Col> : null}
|
{options.includes('execCondition') && 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}
|
{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}
|
{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 autoComplete="off" onPressEnter={() => this.props.handleSubmit()}/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(NodeForm)
|
