feat: 新增多物流发货modal

src/pages/GoodsManage/LogModal/index.jsx

@@ -97,13 +97,16 @@ const LogModal = props => {
 
   useEffect(() => {
     if (!props.id) return;
-    handleSearch();
+    // 20221108 临时隐藏商品详情，默认切换到审核详情 by liteng
+    // handleSearch();
+    bundleOnTabChange('1');
   }, [props.id]);
   const { visible } = props;
   return (
     <Modal title="日志详情" visible={visible} footer={null} onCancel={bundleOnCancel} width="800px">
       <Tabs type="card" onChange={bundleOnTabChange} activeKey={tabActiveKey}>
-        <Tabs.TabPane tab="商品详情" key="0">
+        {/* 20221108 临时隐藏商品详情 by liteng */}
+        {/* <Tabs.TabPane tab="商品详情" key="0">
           <Table
             dataSource={tableData.records}
             bordered
@@ -122,7 +125,7 @@ const LogModal = props => {
               className={styles.pagination}
             />
           )}
-        </Tabs.TabPane>
+        </Tabs.TabPane> */}
         <Tabs.TabPane tab="审核详情" key="1">
           <Table
             dataSource={merchantList}

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);

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

+import React, { forwardRef, useImperativeHandle, useState, useRef, useEffect } from 'react';
+import { Modal, Select, notification, Form, Input, Button, Checkbox } from 'antd';
+import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import { userEnabled, userDisabled, userDelete } from '@/pages/systemManage/service';
+import styles from './index.less';
+
+const FormComponent = (props, ref) => {
+  const { record = {}, companys = [] } = props;
+  const { mchOrderSkuVoList } = record;
+  const [form] = Form.useForm();
+  const [skuInfoList, setSkuInfoList] = useState(mchOrderSkuVoList.map(item => ({})));
+
+  const formLayout = {
+    labelCol: { span: 0 },
+    wrapperCol: { span: 24 },
+  };
+  const formRules = {
+    expressCompanyCode: [{ required: true, message: '请选择物流公司' }],
+    expressNo: [{ required: true, message: '请填写物流单号' }],
+    serialNumber: [{ required: true, message: '请填写序列号' }],
+  };
+
+  useEffect(() => {
+    console.log(companys, record.mchOrderSkuVoList);
+
+    // setSkuInfoList(mchOrderSkuVoList.map(item=>{
+    //   return {
+    //     skuId: item.orderSkuId,
+    //     quantity: 1
+    //   }
+    // }))
+  }, [record]);
+
+  useImperativeHandle(ref, () => ({
+    form,
+  }));
+
+  const getSkuOptions = (index, parentIndex) => {
+    const { skuId, skuName } = mchOrderSkuVoList[index];
+    const packageList = form.getFieldValue('packageList');
+    const updateFormValue = value => {
+      packageList[parentIndex].skuInfoList[index].skuId = value;
+      console.log(packageList);
+      // form.setFieldsValue({
+      //   packageList,
+      // })
+    };
+    return (
+      <Checkbox onChange={() => updateFormValue(skuId)} value={skuId}>
+        {skuName}
+      </Checkbox>
+    );
+  };
+
+  const SkuFormList = skuProps => {
+    const { skuFields, parentFields } = skuProps;
+    return skuFields.map(field => {
+      console.log(111111111, field, parentFields);
+      return (
+        <div className={styles['sku-list']}>
+          <Form.Item className={styles['sku-list__goods-name']} name={[field.name, 'skuId']}>
+            {getSkuOptions(field.name, parentFields.name)}
+          </Form.Item>
+          <Form.Item className={styles['sku-list__goods-count']} name={[field.name, 'quantity']}>
+            <Input type="number" placeholder="请输入数量" />
+          </Form.Item>
+        </div>
+      );
+    });
+  };
+
+  return (
+    <Form
+      form={form}
+      {...formLayout}
+      initialValues={{
+        packageList: [
+          {
+            skuInfoList,
+          },
+        ],
+      }}
+    >
+      <Form.List name="packageList" rules={[]}>
+        {(fields, { add, remove }, { errors }) => (
+          <>
+            {fields.map((field, index) => (
+              <>
+                <React.Fragment key={field.key}>
+                  <Form.List name={[field.name, 'skuInfoList']}>
+                    {skuFields => (
+                      <SkuFormList
+                        key={index.toString()}
+                        skuFields={skuFields}
+                        parentFields={field}
+                      />
+                    )}
+                  </Form.List>
+                  <Form.Item
+                    name={[field.name, 'expressCompanyCode']}
+                    rules={formRules.expressCompanyCode}
+                  >
+                    <Select
+                      placeholder="请选择物流公司"
+                      fieldNames={{ label: 'expressCompanyName', value: 'expressCompanyCode' }}
+                      options={companys}
+                    ></Select>
+                  </Form.Item>
+                  <Form.Item name={[field.name, 'expressNo']} rules={formRules.expressNo}>
+                    <Input placeholder="请填写物流单号" />
+                  </Form.Item>
+                  <Form.Item name={[field.name, 'serialNumber']} rules={formRules.serialNumber}>
+                    <Input placeholder="请填写序列号" />
+                  </Form.Item>
+                </React.Fragment>
+              </>
+            ))}
+
+            <div className={styles.operation}>
+              <PlusCircleOutlined
+                onClick={() => {
+                  const packageList = form.getFieldValue('packageList');
+                  console.log(packageList);
+                  form.setFieldsValue({
+                    packageList: [
+                      ...packageList,
+                      {
+                        expressCompanyCode: '',
+                        skuInfoList: [
+                          {
+                            skuId: '',
+                            quantity: 1,
+                          },
+                        ],
+                      },
+                    ],
+                  });
+                }}
+              />
+              <MinusCircleOutlined
+                onClick={() => {
+                  remove(fields[fields.length - 1].name);
+                }}
+              />
+            </div>
+          </>
+        )}
+      </Form.List>
+    </Form>
+  );
+};
+const FormWarpper = forwardRef(FormComponent);
+
+const UpdateStatusModal = (props, ref) => {
+  const { companys } = props;
+  const formRef = useRef();
+  const [visible, setVisible] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [record, setRecord] = useState();
+
+  const open = item => {
+    setVisible(true);
+    setRecord(item);
+  };
+
+  const onCancel = () => {
+    setVisible(false);
+    setConfirmLoading(false);
+    formRef.current.form.resetFields();
+  };
+
+  const onOk = () => {
+    formRef.current.form.validateFields().then(values => {
+      console.log('fieldsValue :>>', values);
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    open,
+  }));
+
+  const modalProps = {
+    title: '填写物流信息',
+    height: 500,
+    visible,
+    confirmLoading,
+    onCancel,
+    onOk,
+  };
+
+  return (
+    <Modal {...modalProps}>
+      {record ? <FormWarpper ref={formRef} record={record} companys={companys} /> : ''}
+    </Modal>
+  );
+};
+
+export default forwardRef(UpdateStatusModal);

src/pages/orderManage/pendingDeliveryOrder/components/MultiLogisticsModal/index.less

+.sku-list {
+  display: flex;
+  &__goods-name {
+    flex: 1;
+  }
+
+  &__goods-count {
+    width: 100px;
+  }
+}
+
+.operation {
+  font-size: 24px;
+  text-align: center;
+  > * {
+    margin: 0 10px;
+  }
+}

src/pages/orderManage/pendingDeliveryOrder/index.jsx

@@ -12,6 +12,8 @@ import LogisticsForm from './components/LogisticsForm';
 import PopoverDom from './components/PreviewImage';
 import LogisticsCom from './components/LogisticsCom';
 import DelayDeliverGoods from './components/DelayDeliverGoods';
+
+import MultiLogisticsModal from './components/MultiLogisticsModal';
 import {
   queryToSend,
   queryExpress,
@@ -58,6 +60,7 @@ const TableList = props => {
   // const endDisabledDate = current =>
   //   current && (current.diff(startTime, 'days') > 30 || current.diff(startTime, 'days') < 0);
 
+  const multiLogisticsModalRef = useRef();
   const actionRef = useRef();
   const ref = useRef(FormInstance);
   const handleCom = async (record, skuItem) => {
@@ -411,8 +414,9 @@ const TableList = props => {
                     : null,
                   orderNum: item?.deliveryNo,
                 }));
-                setLogisticsData(logisticsData);
-                handleModalVisible(true);
+                // setLogisticsData(logisticsData);
+                // handleModalVisible(true);
+                multiLogisticsModalRef.current.open(record);
               }}
             >
               {props.type === 2 ? '更新物流信息' : '填写物流信息'}
@@ -566,6 +570,8 @@ const TableList = props => {
         orderId={delayOrderIDs}
         onCancel={e => onCancelDelay(e)}
       />
+
+      <MultiLogisticsModal companys={companys} ref={multiLogisticsModalRef} />
     </PageHeaderWrapper>
   );
 };