feat: 更新商品字段

src/pages/ServiceGoods/common.less

@@ -221,7 +221,7 @@
     }
     .ant-form-item {
       margin-bottom: 0;
-      margin-left: 20px;
+      margin-left: 40px;
     }
   }
 }
@@ -253,7 +253,7 @@
   line-height: 20px;
   text-align: center;
   margin: 0 10px;
-  padding:0 8px;
+  padding: 0 8px;
   border-radius: 8px;
 }
 .repertoryLimit {
@@ -276,7 +276,7 @@
   }
 }
 .conBg {
-  background:#f8f8f8 ;
+  background: #f8f8f8;
   min-width: 100%;
   width: fit-content;
   :global {
@@ -299,6 +299,5 @@
 .rowWarp {
   display: flex;
   flex-flow: row wrap;
-  background:#f8f8f8 ;
-
+  background: #f8f8f8;
 }

src/pages/ServiceGoods/components/AddRepertoryModal.jsx

@@ -2,40 +2,98 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } f
 import { Button, Modal, Radio, Form, InputNumber, Switch } from 'antd';
 import styles from '../common.less';
 import { ENUM_SET_REPERTORY } from '../config';
+import { debounce } from '@/utils/utils';
 
 const AddRepertoryModal = (props, ref) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
-  const [modalText, setModalText] = useState('Content of the modal');
   const [openRepertory, setOpenRepertory] = useState(false);
+  const [form] = Form.useForm();
+  const [repertoryState, setRepertoryState] = useState('');
+  const [initialValues, setInitialValues] = useState({
+    productStock: 0,
+    maxStock: 0,
+    autoStock: 0,
+  });
 
-  // const {
-  //   open,
-  //   setOpen,
-  // } = props;
+  const { modifiedInventory, intactData, repertoryModel } = props;
   useImperativeHandle(ref, () => ({
     // changeVal 就是暴露给父组件的方法
     setOpenRepertory: newVal => {
       setOpenRepertory(newVal);
     },
   }));
-  const onChange3 = () => {};
-
-  const handleOk = () => {
-    setModalText('The modal will be closed after two seconds');
-    setConfirmLoading(true);
-    setTimeout(() => {
-      setOpenRepertory(false);
-      setConfirmLoading(false);
-    }, 2000);
+  // 自动补全
+  const onChangeAutoStock = e => {
+    form.setFieldsValue({
+      autoStock: e ? 1 : 0,
+    });
+  };
+  // 勾选库存设置
+  const onChangeSetRepertory = e => {
+    console.log('form', form);
+    setRepertoryState(`${e.target.value}`);
+    if (+e.target.value === 0) {
+      form.setFieldsValue({
+        productStock: 0,
+      });
+    } else {
+      const { maxStock } = form.getFieldsValue(['maxStock']);
+      form.setFieldsValue({
+        productStock: maxStock,
+      });
+    }
+  };
+  // 最大库存设置
+  const onChangeMaxStock = e => {
+    // 已经勾选最大库存 自动更新剩余库存
+    if (+repertoryState === 1) {
+      form.setFieldsValue({
+        productStock: e,
+      });
+    }
+  };
+  const getFormValues = debounce(() => {
+    const values = form.getFieldsValue();
+    console.log('values========', values);
+  }, 400);
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    console.log('values', values);
+    // 回调库存
+    modifiedInventory(values);
+    // setConfirmLoading(true);
+    // setTimeout(() => {
+    //   setOpenRepertory(false);
+    //   setConfirmLoading(false);
+    // }, 2000);
   };
 
   const handleCancel = () => {
-    console.log('Clicked cancel button');
     setOpenRepertory(false);
   };
   useEffect(() => {
     console.log('open', openRepertory);
-  }, [openRepertory]);
+    const { productStock, serviceItem } = intactData?.items;
+    const { autoStock, maxStock } = serviceItem;
+    const params = {
+      productStock,
+      autoStock,
+      maxStock,
+    };
+    switch (repertoryModel) {
+      case 'all': // 统一设置
+        setInitialValues(params);
+        break;
+      case 'mlti': // 多规格设置
+        setInitialValues(params);
+        break;
+      case 'singular': // 单规格设置
+        setInitialValues(params);
+        break;
+      default:
+        break;
+    }
+  }, [openRepertory, intactData]);
   return (
     <>
       {openRepertory && (
@@ -46,10 +104,10 @@ const AddRepertoryModal = (props, ref) => {
           confirmLoading={confirmLoading}
           onCancel={handleCancel}
         >
-          <Form>
+          <Form form={form} initialValues={initialValues} onValuesChange={getFormValues}>
             <Form.Item className={styles.itemInlineModal}>
               <Form.Item
-                name="receptionVolume"
+                name="productStock"
                 label="剩余库存"
                 style={{
                   display: 'flex',
@@ -58,28 +116,36 @@ const AddRepertoryModal = (props, ref) => {
                 rules={[{ required: true, message: '请填写剩余库存' }]}
               >
                 <InputNumber
-                  min={1}
+                  min={0}
                   style={{ width: 200, display: 'inline-block' }}
                   placeholder="请输入"
                 />
               </Form.Item>
-              <Form.Item name="limitPurchase" style={{ width: 200, display: 'inline-block' }}>
-                <Radio.Group options={ENUM_SET_REPERTORY} onChange={onChange3} value={1} />
+              <Form.Item style={{ width: 200, display: 'inline-block' }}>
+                <Radio.Group value={repertoryState} onChange={onChangeSetRepertory}>
+                  <Radio.Button value="0">清空</Radio.Button>
+                  <Radio.Button value="1">最大</Radio.Button>
+                </Radio.Group>
               </Form.Item>
             </Form.Item>
             <Form.Item
-              name="receptionVolume"
+              name="maxStock"
               label="最大库存"
               rules={[{ required: true, message: '请填写最大库存' }]}
             >
-              <InputNumber min={1} style={{ width: 200 }} placeholder="请输入" />
+              <InputNumber
+                min={0}
+                style={{ width: 200 }}
+                placeholder="请输入"
+                onChange={onChangeMaxStock}
+              />
             </Form.Item>
-            <Form.Item name="receptionVolume" label="自动补足">
+            <Form.Item name="autoStock" label="自动补足">
               <Switch
                 checkedChildren="开启"
                 unCheckedChildren="关闭"
-                defaultChecked
-                onChange={onChange3}
+                // defaultChecked
+                onChange={onChangeAutoStock}
               />
             </Form.Item>
             <div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div>

src/pages/ServiceGoods/components/FormTakeaway.jsx

@@ -69,10 +69,13 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
   const [tagList, setTagList] = useState([]);
   const [unitsList, setUnitsList] = useState([]);
   const [takeawayData, setTakeawayData] = useState({});
-  const [specList, setSpecList] = useState([]);
-
-  const [takeawaySku, setTakeawaySku] = useState([]);
+  // const [multiSpecList, setMultiSpecList] = useState([]);
+  // const [singularSpecList, setSingularSpecList] = useState([]);
+  const [mltiSpu, setMultiSpu] = useState([]);
+  const [singularSpu, setSingularSpu] = useState([]);
+  const [intactData, setIntactData] = useState({});
   const [repertoryState, setRepertoryState] = useState('');
+  const [repertoryModel, setRepertoryModel] = useState('');
   const initialDealValue = [
     {
       specGroupName: '',
@@ -90,7 +93,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
       return {
         ...values,
         temp: 'takeawayItem',
-        limitPurchase: values.limitPurchase ? 1 : 0,
+        intactData,
       };
     } catch (errorInfo) {
       return null;
@@ -98,7 +101,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
   };
   const takeawayCalc = takeawayData => {
     // 商品基本信息编辑商品名称
-    const { infoMation: name, takeawayItem, saleTimeType, singleDelivery } = takeawayData;
+    const { infoMation: name, infoMation, takeawayItem, saleTimeType } = takeawayData;
     //  weight 份量  specs规格 生成sku规则 weight * specs
     const {
       specs = [],
@@ -111,11 +114,16 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
       maxStock,
       saleTimes,
       label,
+      unit,
+      quantity,
+      productStock,
+      singleDelivery,
     } = takeawayItem;
-    const takeawaySkuTemp = [];
-    const takeawaySpecList = [{ specGroupName: '份量', specs: [] }]
-    console.log('takeawayData', takeawayData);
-    if (name) {
+    const singularSpecList = [{ specGroupName: '份量', specs: [] }]; // 单规格
+    const multiSpecList = [{ specGroupName: '份量', specs: [] }]; // 多规格
+    const multiSpu = []; // 单库存spu
+    let singularSpu = []; // 多库存spu
+
     const temp = {
       salePrice: 1,
       productStock: 2,
@@ -132,16 +140,28 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
         saleTimes,
         autoStock: '', // 弹框设置---自动补足
       },
+    };
+
+    // 单规格
+    if (+repertoryType === 1) {
+      const sepcs = { maxStock, quantity, unit, productStock };
+      singularSpecList[0].specs = [sepcs];
+      singularSpu = [{ ...temp, sepcs: [sepcs] }];
+      setSingularSpu(singularSpu);
     }
+    // 多规格
+    if (+repertoryType === 2) {
+      console.log('222');
+      if (name) {
         if (weight.length) {
           weight.forEach((item, weightIndex) => {
-          takeawaySpecList[0].specs = weight
+            multiSpecList[0].specs = weight;
             // 循环一次 插入规则列表
-          let isFirstLoops = true
+            let isFirstLoops = true;
             if (specs.length) {
               specs.forEach((specsItem, specsIndex) => {
-              if (isFirstLoops) {
-                takeawaySpecList.push(specsItem)
+                if (isFirstLoops && multiSpecList.length < specs.length + 1) {
+                  multiSpecList.push(specsItem);
                 }
                 if (specsItem.specs.length > 1) {
                   specsItem.specs.forEach((itm, idx) => {
@@ -149,30 +169,57 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
                       ...temp,
                       specs: [{ ...item }, { ...specsItem.specs[idx] }],
                     };
-                  takeawaySkuTemp.push(params);
+                    multiSpu.push(params);
                   });
                 } else {
                   const params = {
                     ...temp,
                     specs: [{ ...item }, { ...specsItem.specs[0] }],
                   };
-                takeawaySkuTemp.push(params);
+                  multiSpu.push(params);
                 }
-              isFirstLoops = false
               });
+              isFirstLoops = false;
             } else {
               const params = {
                 ...temp,
                 specs: [{ ...item }],
               };
-            takeawaySkuTemp.push(params);
+              multiSpu.push(params);
             }
           });
         }
       }
-    console.log('takeawaySkuTemp', takeawaySkuTemp, takeawaySpecList);
-    setTakeawaySku(takeawaySkuTemp);
-    setSpecList(takeawaySpecList)
+      setMultiSpu(multiSpu);
+    }
+    // +repertoryType === 1 单规格 2多规格
+    const intactData = {
+      type: 5, // 外卖类型
+      ...infoMation,
+      label,
+      list,
+      description,
+      detailImageList,
+      singleDelivery,
+      specList: +repertoryType === 1 ? singularSpecList : multiSpecList, // 单库存和多库存specList
+      items: +repertoryType === 1 ? singularSpu : multiSpu,
+    };
+    console.log('intactData======>', intactData);
+    setIntactData(intactData);
+    return intactData;
+  };
+  // 设置库存
+  const modifiedInventory = params => {
+    const { productStock, maxStock, autoStock } = params;
+    if (intactData?.items.length) {
+      intactData.items.forEach(item => {
+        item.productStock = productStock;
+        item.serviceItem.autoStock = autoStock;
+        item.serviceItem.maxStock = maxStock;
+      });
+      setIntactData(intactData);
+    }
+    return false;
   };
   const onChange = () => {};
   const onDealFinish = values => {
@@ -249,12 +296,12 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
     if (+e.target.value === 0) {
       form.setFieldsValue({
         productStock: 0,
-      })
+      });
     } else {
-      const { maxStock } = form.getFieldsValue(['maxStock'])
+      const { maxStock } = form.getFieldsValue(['maxStock']);
       form.setFieldsValue({
         productStock: maxStock,
-      })
+      });
     }
   };
   // 最大库存设置
@@ -263,23 +310,27 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
     if (+repertoryState === 1) {
       form.setFieldsValue({
         productStock: e,
-      })
-    }
+      });
     }
+  };
   // 切换时间
   const onChangeTime = e => {
     setTimeType(e.target.value);
   };
+  // 自动补全
   const onChangeAutoStock = e => {
-    setTimeType(e.target.value);
+    form.setFieldsValue({
+      autoStock: e ? 1 : 0,
+    });
   };
   // 显示加入库存弹框
-  const showAddRepertoryModal = () => {
+  const showAddRepertoryModal = params => {
     AddRepertoryRef.current.setOpenRepertory(true);
+    setRepertoryModel(params);
+  };
+  const onFinish = values => {
+    console.log('Received values of form:', values);
   };
-  // const onFinish = values => {
-  //   console.log('Received values of form:', values);
-  // };
   // 拼接sku 名称
   const calcLabelName = (takeawayData, item) => {
     const tempName = `${takeawayData?.infoMation?.name || ''}`;
@@ -287,7 +338,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
     const tempQuantity = `(${item.specs[0]?.quantity || ''}`;
     const tempUnit = `${item.specs[0]?.unit || ''})`;
     const tempSecondSpecName = `${item.specs[1]?.specName || ''}`;
-    const isShow = tempQuantity && tempUnit && '+'
+    const isShow = tempQuantity && tempUnit && '+';
     return `${tempName} ${tempSpecName}  ${tempQuantity} ${isShow} ${tempUnit} ${tempSecondSpecName}`;
   };
   const init = async () => {
@@ -478,6 +529,28 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
           </Radio.Group>
         </Form.Item>
         <Title title="规格信息" />
+
+        {/* <Form.Item label="限购" name="limitPurchase" valuePropName="checked">
+        <Checkbox onChange={() => radioChangeEvent('limitPurchase')}>
+          <b style={{ marginLeft: 10 }}>启用限购</b>
+          <span style={{ marginLeft: 10 }} className="ant-form-text">
+            限制每人可购买数量
+          </span>
+        </Checkbox>
+      </Form.Item> */}
+
+        <Form.Item label="库存" name="stock">
+          <Radio.Group
+            options={ENUM_REPERTORY}
+            onChange={onChangeRepertory}
+            value="1"
+            buttonStyle="solid"
+            optionType="button"
+          />
+        </Form.Item>
+
+        {repertoryType === '1' && (
+          <>
             <Form.Item label="份量" className={styles.required}>
               <Form.Item
                 name="quantity"
@@ -488,7 +561,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
               >
                 <InputNumber min={1} style={{ width: 200 }} placeholder="请输入数字" />
               </Form.Item>
-          <Form.Item
+              {/* <Form.Item
                 name="unit"
                 rules={[{ type: 'array', required: true, message: '请选择单位' }]}
                 style={{
@@ -504,7 +577,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
                   onChange={props.onCategoryChange}
                   options={unitsList}
                 />
-          </Form.Item>
+              </Form.Item> */}
             </Form.Item>
             <Form.Item
               name="salePrice"
@@ -513,28 +586,6 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
             >
               <InputNumber min={0} style={{ width: 200 }} placeholder="元" />
             </Form.Item>
-
-        {/* <Form.Item label="限购" name="limitPurchase" valuePropName="checked">
-        <Checkbox onChange={() => radioChangeEvent('limitPurchase')}>
-          <b style={{ marginLeft: 10 }}>启用限购</b>
-          <span style={{ marginLeft: 10 }} className="ant-form-text">
-            限制每人可购买数量
-          </span>
-        </Checkbox>
-      </Form.Item> */}
-
-        <Form.Item label="库存" name="stock">
-          <Radio.Group
-            options={ENUM_REPERTORY}
-            onChange={onChangeRepertory}
-            value="1"
-            buttonStyle="solid"
-            optionType="button"
-          />
-        </Form.Item>
-
-        {repertoryType === '1' && (
-          <>
             <Form.Item className={styles.itemInline}>
               <Form.Item
                 name="productStock"
@@ -551,12 +602,11 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
                   placeholder="请输入"
                 />
               </Form.Item>
-              <Form.Item name="limitPurchase" style={{ width: 200, display: 'inline-block' }}>
-                <Radio.Group
-                  options={ENUM_SET_REPERTORY}
-                  onChange={onChangeSetRepertory}
-                  value={1}
-                />
+              <Form.Item style={{ width: 200, display: 'inline-block' }}>
+                <Radio.Group value={repertoryState} onChange={onChangeSetRepertory}>
+                  <Radio.Button value="0">清空</Radio.Button>
+                  <Radio.Button value="1">最大</Radio.Button>
+                </Radio.Group>
               </Form.Item>
             </Form.Item>
             <Form.Item
@@ -564,7 +614,12 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
               label="最大库存"
               rules={[{ required: true, message: '请填写最大库存' }]}
             >
-              <InputNumber min={0} style={{ width: 200 }} placeholder="请输入" onChange={onChangeMaxStock} />
+              <InputNumber
+                min={0}
+                style={{ width: 200 }}
+                placeholder="请输入"
+                onChange={onChangeMaxStock}
+              />
             </Form.Item>
             <Form.Item name="autoStock" label="自动补足">
               <Switch
@@ -575,6 +630,27 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
               />
               <div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div>
             </Form.Item>
+            <div className={styles.rowWarp}>
+              {singularSpu.length > 0 &&
+                takeawayData?.infoMation?.name &&
+                singularSpu.map((item, index) => (
+                  <div className={styles.specsBetween}>
+                    <Form.Item label={calcLabelName(takeawayData, item)}>
+                      <div className={styles.specsBetween}>
+                        <span className={styles.repertoryLimit}>1/1</span>
+                        <div
+                          className={styles.specRepertory}
+                          onClick={() => {
+                            showAddRepertoryModal('singular'); // 单规格库存
+                          }}
+                        >
+                          设置库存
+                        </div>
+                      </div>
+                    </Form.Item>
+                  </div>
+                ))}
+            </div>
           </>
         )}
         {repertoryType === '2' && (
@@ -728,6 +804,8 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
                 )}
               </Form.List> */}
             </Form.Item>
+            {takeawayData?.takeawayItem?.weight?.length > 0 && (
+              <>
                 <Form.Item>
                   <div>添加规格(如加料、甜度、辣度等)</div>
                   <Form.List name="specs">
@@ -843,16 +921,16 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
                     danger
                     style={{ marginBottom: '10px' }}
                     onClick={() => {
-                  showAddRepertoryModal(true);
+                      showAddRepertoryModal('all'); // 统一库存
                     }}
                     shape="round"
                   >
                     统一设置置库存
                   </Button>
                   <div className={styles.rowWarp}>
-                {takeawaySku.length > 0 &&
+                    {mltiSpu.length > 0 &&
                       takeawayData?.infoMation?.name &&
-                  takeawaySku.map((item, index) => (
+                      mltiSpu.map((item, index) => (
                         <div className={styles.specsBetween}>
                           <Form.Item label={calcLabelName(takeawayData, item)}>
                             <div className={styles.specsBetween}>
@@ -860,7 +938,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
                               <div
                                 className={styles.specRepertory}
                                 onClick={() => {
-                              showAddRepertoryModal(true);
+                                  showAddRepertoryModal('mlti'); // 多个库存
                                 }}
                               >
                                 设置库存
@@ -873,9 +951,16 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
                 </Form.Item>
               </>
             )}
+          </>
+        )}
       </Form>
       {/* 加入库存 */}
-      <AddRepertoryModal ref={AddRepertoryRef} />
+      <AddRepertoryModal
+        ref={AddRepertoryRef}
+        modifiedInventory={modifiedInventory}
+        intactData={intactData}
+        repertoryModel={repertoryModel}
+      />
       {/* 加入多规格 */}
       <AddMultiSpecModal ref={AddMultiSpecRef} />
     </>