import React, { useEffect } from 'react'; import { CreateFlow } from '@/services/platform/workflow'; import { Form, Modal, Input, notification, Select } from 'antd'; const { Option } = Select; const FlowModal = props => { const { onSubumit, handleCancel, visible, msg, modalType, treeData } = props; const [form] = Form.useForm(); useEffect(() => { form.resetFields(); if (visible) { if (modalType === 'edit') { getFormData(); } else { form.setFieldsValue({ Type: msg.name }); } } }, [visible]); // 获取表单回显 const getFormData = () => { form.setFieldsValue({ ...msg }); }; // 提交表单 const onFinish = () => { form.validateFields().then(validate => { if (validate) { let obj = {}; if (modalType === 'add') { obj = validate; } else { obj = { ...validate, flowID: msg.FlowID }; } CreateFlow(obj) .then(res => { if (res.code === 0) { notification.success({ message: '提示', duration: 3, description: '编辑成功', }); onSubumit(); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(() => { notification.error({ message: '提示', duration: 3, description: '网络异常', }); }); } }); }; return ( <Modal title={`${modalType === 'edit' ? '编辑' : '创建'}流程`} visible={visible} onOk={onFinish} onCancel={handleCancel} maskClosable={false} destroyOnClose > <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}> <Form.Item label="流程名称" name="FlowName" rules={[{ required: true, message: '请输入流程名称' }]} > <Input placeholder="请输入流程名称" /> </Form.Item> <Form.Item label="分组信息" name="Type"> <Select> {treeData.map(item => ( <Option value={item.name} key={item.name}> {item.name} </Option> ))} </Select> </Form.Item> <Form.Item label="编码前缀" name="Prefix"> <Input placeholder="请输入编码前缀" /> </Form.Item> <Form.Item label="流程描述" name="Text"> <Input placeholder="请输入流程描述" /> </Form.Item> </Form> </Modal> ); }; export default FlowModal;