feat: 新增添加物流modal

src/pages/orderManage/pendingDeliveryOrder/components/MultiLogisticsModal.jsx

+import React, { forwardRef, useImperativeHandle, useState, useRef, useEffect } from 'react';
+import { Modal, Select, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import { userEnabled, userDisabled, userDelete } from '@/pages/systemManage/service';
+
+const FormComponent = props => {
+  const { record = {}, form } = props;
+  const { getFieldDecorator, setFieldsValue } = form;
+
+  const formLayout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 20 },
+  };
+  const formRules = {
+    status: [{ required: true, message: '' }],
+  };
+
+  useEffect(() => {
+    setFieldsValue(record);
+  }, [record]);
+
+  const rulesHandler = name => ({
+    rules: formRules[name],
+  });
+  return (
+    <Form {...formLayout}>
+      <Form.Item label="用户名">{record.name}</Form.Item>
+    </Form>
+  );
+};
+
+const FormWarpper = Form.create({})(forwardRef(FormComponent));
+
+const UpdateStatusModal = (props, ref) => {
+  const { reload } = props;
+  const formRef = useRef();
+  const [visible, setVisible] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [record, setRecord] = useState({});
+
+  const open = item => {
+    setVisible(true);
+    const { name, status, id } = item;
+    // 初始化数据,currentStatus 用来判断状态选项
+    setRecord({
+      name,
+      status: status.value,
+      id,
+      currentStatus: status.value,
+    });
+  };
+
+  const onCancel = () => {
+    setVisible(false);
+    setConfirmLoading(false);
+    formRef.current.resetFields();
+  };
+
+  const onOk = () => {
+    formRef.current.validateFields(async (err, fieldsValue) => {
+      console.log('fieldsValue :>>', fieldsValue);
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    open,
+  }));
+
+  const modalProps = {
+    title: 'xx',
+    visible,
+    confirmLoading,
+    onCancel,
+    onOk,
+  };
+
+  return (
+    <Modal {...modalProps}>
+      <FormWarpper ref={formRef} record={record} />
+    </Modal>
+  );
+};
+
+export default forwardRef(UpdateStatusModal);