WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Flow/AuditNodeModal.js

import React, { useEffect } from 'react';
import { Modal, Input, Table, Select, Form, Radio } from 'antd';
const { Option } = Select;

// 审批意见
function AuditModal(props) {
  const { visible, onCancel, onOk, userList = [], data = {}, loading } = props;
  const [form] = Form.useForm();
  const formLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 } };

  const handleOk = async () => {
    let fieldsValue = await form.validateFields();
    const { label, value } = fieldsValue.auditUser;
    fieldsValue.AuditorUser = {
      CName: label,
    };
    fieldsValue.auditor = value;
    // 如果id不存在则使用时间戳作为id
    fieldsValue.id = data?.id || new Date() * 1;
    onOk(fieldsValue);
  };

  useEffect(() => {
    if (visible) form.resetFields();
  }, [visible]);

  return (
    <Modal
      confirmLoading={loading}
      title="审批节点"
      visible={visible}
      onCancel={onCancel}
      onOk={handleOk}
    >
      <Form {...formLayout} form={form} initialValues={data}>
        <Form.Item label="节点名" name="node">
          <Input />
        </Form.Item>
        <Form.Item label="审批级别" name="seq">
          <Select style={{ width: '100%' }}>
            <Option value={1}>一级</Option>
            <Option value={2}>二级</Option>
            <Option value={3}>三级</Option>
            {/* <Option value={1}>流程1</Option> */}
          </Select>
        </Form.Item>
        <Form.Item label="审批人" initialValue={data?.auditor} name="auditUser">
          <Select
            showSearch
            labelInValue
            style={{ width: '100%' }}
            filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
          >
            {userList.map(item => (
              <Option key={item.ID} value={item.ID}>
                {item.CName}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item initialValue={data?.seq_relate || 1} label="审批关系" name="seq_relate">
          <Radio.Group>
            <Radio value={1}>或</Radio>
            <Radio value={2}>并</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default AuditModal;