feat: 商品信息拼接

src/pages/ServiceGoods/common.less

@@ -221,7 +221,7 @@
     }
     .ant-form-item {
       margin-bottom: 0;
-      margin-left: 40px;
+      margin-left: 20px;
     }
   }
 }
@@ -242,14 +242,27 @@
   display: flex;
   flex-flow: row wrap;
 }
+.specsBetween {
+  display: flex;
+  flex-flow: row nowrap;
+}
 .specRepertory {
-  width: 50px;
   background-color: #319bfe;
-  border-radius: 25px;
   color: #fff;
   height: 20px;
   line-height: 20px;
   text-align: center;
+  margin: 0 10px;
+  padding:0 8px;
+  border-radius: 8px;
+}
+.repertoryLimit {
+  background-color: #88c0f5;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  color: #fff;
+  border-radius: 3px;
 }
 .deal {
   :global {
@@ -283,3 +296,9 @@
   flex: none;
   max-width: none;
 }
+.rowWarp {
+  display: flex;
+  flex-flow: row wrap;
+  background:#f8f8f8 ;
+
+}

src/pages/ServiceGoods/components/FormTakeaway.jsx

@@ -69,8 +69,10 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
   const [tagList, setTagList] = useState([]);
   const [unitsList, setUnitsList] = useState([]);
   const [takeawayData, setTakeawayData] = useState({});
-  const [takeawaySku, setTakeawaySku] = useState({});
+  const [specList, setSpecList] = useState([]);
 
+  const [takeawaySku, setTakeawaySku] = useState([]);
+  const [repertoryState, setRepertoryState] = useState('');
   const initialDealValue = [
     {
       specGroupName: '',
@@ -96,30 +98,29 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
   };
   const takeawayCalc = takeawayData => {
     // 商品基本信息编辑商品名称
+    const { infoMation: name, takeawayItem, saleTimeType, singleDelivery } = takeawayData;
+    //  weight 份量  specs规格 生成sku规则 weight * specs
     const {
-      infoMation: name,
-      takeawayItem,
-      minPurchaseNum,
-      saleTimeType,
-      singleDelivery,
+      specs = [],
+      weight = [],
+      description,
+      detailImageList,
       list,
-      label,
+      minPurchaseNum,
       saleDates,
-      description,
       maxStock,
       saleTimes,
-    } = takeawayData;
-    //  weight 份量  specs规格 生成sku规则 weight * specs
-    const { specs = [], weight = [] } = takeawayItem;
-    if (name) {
-      console.log('===', name);
-      if (weight.length) {
+      label,
+    } = takeawayItem;
     const takeawaySkuTemp = [];
-        weight.map((item, weightIndex) => {
-          item.salePrice = 1;
-          item.productStock = 2;
-          item.list = 1;
-          item.serviceItem = {
+    const takeawaySpecList = [{ specGroupName: '份量', specs: [] }]
+    console.log('takeawayData', takeawayData);
+    if (name) {
+      const temp = {
+        salePrice: 1,
+        productStock: 2,
+        list: 1,
+        serviceItem: {
           description, //  商品描述
           maxStock, // 最大库存
           minPurchaseNum, // 最少购买
@@ -130,13 +131,48 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
           saleDates, // 可售日期 1-8
           saleTimes,
           autoStock: '', // 弹框设置---自动补足
-
+        },
+      }
+      if (weight.length) {
+        weight.forEach((item, weightIndex) => {
+          takeawaySpecList[0].specs = weight
+          // 循环一次 插入规则列表
+          let isFirstLoops = true
+          if (specs.length) {
+            specs.forEach((specsItem, specsIndex) => {
+              if (isFirstLoops) {
+                takeawaySpecList.push(specsItem)
+              }
+              if (specsItem.specs.length > 1) {
+                specsItem.specs.forEach((itm, idx) => {
+                  const params = {
+                    ...temp,
+                    specs: [{ ...item }, { ...specsItem.specs[idx] }],
                   };
-          item.specs = {};
+                  takeawaySkuTemp.push(params);
                 });
-        console.log('3333', weight, takeawaySkuTemp);
+              } else {
+                const params = {
+                ...temp,
+                  specs: [{ ...item }, { ...specsItem.specs[0] }],
+                };
+                takeawaySkuTemp.push(params);
               }
+              isFirstLoops = false
+            });
+          } else {
+            const params = {
+             ...temp,
+              specs: [{ ...item }],
+            };
+            takeawaySkuTemp.push(params);
           }
+        });
+      }
+    }
+    console.log('takeawaySkuTemp', takeawaySkuTemp, takeawaySpecList);
+    setTakeawaySku(takeawaySkuTemp);
+    setSpecList(takeawaySpecList)
   };
   const onChange = () => {};
   const onDealFinish = values => {
@@ -207,6 +243,29 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
   const onChangeRepertory = e => {
     setRepertoryType(`${e.target.value}`);
   };
+  // 勾选库存设置
+  const onChangeSetRepertory = e => {
+    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 onChangeTime = e => {
     setTimeType(e.target.value);
@@ -221,6 +280,16 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
   // const onFinish = values => {
   //   console.log('Received values of form:', values);
   // };
+  // 拼接sku 名称
+  const calcLabelName = (takeawayData, item) => {
+    const tempName = `${takeawayData?.infoMation?.name || ''}`;
+    const tempSpecName = `${item?.specs[0]?.specName || ''}`;
+    const tempQuantity = `(${item.specs[0]?.quantity || ''}`;
+    const tempUnit = `${item.specs[0]?.unit || ''})`;
+    const tempSecondSpecName = `${item.specs[1]?.specName || ''}`;
+    const isShow = tempQuantity && tempUnit && '+'
+    return `${tempName} ${tempSpecName}  ${tempQuantity} ${isShow} ${tempUnit} ${tempSecondSpecName}`;
+  };
   const init = async () => {
     if (!tagList.length) {
       const res = await apiTagList();
@@ -468,7 +537,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
           <>
             <Form.Item className={styles.itemInline}>
               <Form.Item
-                name="receptionVolume"
+                name="productStock"
                 label="剩余库存"
                 style={{
                   display: 'flex',
@@ -477,13 +546,17 @@ const TakeawayGoodsInfo = forwardRef((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={onChangeRepertory} value={1} />
+                <Radio.Group
+                  options={ENUM_SET_REPERTORY}
+                  onChange={onChangeSetRepertory}
+                  value={1}
+                />
               </Form.Item>
             </Form.Item>
             <Form.Item
@@ -491,7 +564,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
               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="autoStock" label="自动补足">
               <Switch
@@ -559,7 +632,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
 
                         <Form.Item
                           {...weightField}
-                          name={[weightField.name, 'unit']}
+                          name={[weightField.name, 'quantity']}
                           rules={[
                             {
                               required: true,
@@ -572,7 +645,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
                         <span className="ant-form-text"> 约</span>
                         <Form.Item
                           {...weightField}
-                          name={[weightField.name, 'quantity']}
+                          name={[weightField.name, 'unit']}
                           rules={[
                             {
                               type: 'array',
@@ -776,9 +849,14 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
               >
                 统一设置置库存
               </Button>
-              {[1, 2, 3].map(item => (
+              <div className={styles.rowWarp}>
+                {takeawaySku.length > 0 &&
+                  takeawayData?.infoMation?.name &&
+                  takeawaySku.map((item, index) => (
+                    <div className={styles.specsBetween}>
+                      <Form.Item label={calcLabelName(takeawayData, item)}>
                         <div className={styles.specsBetween}>
-                  <Form.Item label="多规格1">
+                          <span className={styles.repertoryLimit}>1/1</span>
                           <div
                             className={styles.specRepertory}
                             onClick={() => {
@@ -787,9 +865,11 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
                           >
                             设置库存
                           </div>
+                        </div>
                       </Form.Item>
                     </div>
                   ))}
+              </div>
             </Form.Item>
           </>
         )}

src/pages/ServiceGoods/config.js

@@ -325,8 +325,8 @@ export const StaticColumns = customer => [
 ];
 export const ENUM_REPERTORY = [{ label: '单规格', value: '1' }, { label: '多规格', value: '2' }];
 export const ENUM_SET_REPERTORY = [
-  { label: '清零', value: '清零' },
-  { label: '最大', value: '最大' },
+  { label: '清零', value: '0' },
+  { label: '最大', value: '1' },
 ];
 export const ENUM_WEEK = [
   { value: 1, label: '周一' },