ProcessConfig.jsx

import React, { useEffect, useState } from 'react';
import { CMFlowGet, CMFlowPost } from '@/services/flow/flow';
import { Form, Modal, Input, Radio, Select, notification } from 'antd';
const { Option } = Select;
const { TextArea } = Input;

const ProcessConfig = props => {
  const { onSubumit, handleCancel, visible, processMsg, allDisabled } = props;
  const [form] = Form.useForm();
  const [flag, setFlag] = useState(0);
  useEffect(() => {
    form.resetFields();
    if (visible) {
      getFormData();
    }
  }, [visible]);
  // 获取表单回显
  const getFormData = () => {
    CMFlowGet({ flowId: processMsg.ID }).then(res => {
      if (res.code === 0) {
        form.setFieldsValue(res.data);
        setFlag(flag + 1);
      }
    });
  };
  // 提交表单
  const onFinish = () => {
    form.validateFields().then(validate => {
      if (validate) {
        console.log(validate);
        CMFlowPost({ ...validate, flowId: processMsg.ID })
          .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={allDisabled ? '流程配置查看' : '流程配置'}
      visible={visible}
      onOk={onFinish}
      onCancel={handleCancel}
      maskClosable={false}
      footer={allDisabled ? null : true}
    >
      <Form
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 18 }}
        initialValues={{ remember: true }}
      >
        <Form.Item label="流程名称" name="name">
          <Input disabled />
        </Form.Item>
        <Form.Item label="流程结束" name="flowEndBehavior">
          <Radio.Group>
            <Radio value={0}>不做任何事情</Radio>
            <Radio value={1}>直接关闭事件</Radio>
            <Radio value={2}>事件转为待审核</Radio>
            <Radio value={3}>重新处理事件</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="办理样式"
          name="webPage"
          initialValue="多表显示"
          rules={[{ required: true, message: '请选择办理样式' }]}
        >
          <Select placeholder="请选择办理样式">
            <Option value="多表在办显示">多表在办显示</Option>
            <Option value="多表显示">多表显示</Option>
            <Option value="表堆叠显示">表堆叠显示</Option>
            {/* <Option value="分派节点显示">分派节点显示</Option> */}
          </Select>
        </Form.Item>
        <Form.Item label="编码样式" name="useFixedCodingRule">
          <Radio.Group>
            <Radio value={false}>{form.getFieldValue('codingDefaultText')}</Radio>
            <Radio value>{form.getFieldValue('coding12Text')}</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="接口配置" name="interfaceConfig">
          <TextArea placeholder="请填写接口配置" />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default ProcessConfig;