feat: add 商品信息

src/pages/ServiceGoods/common.less

@@ -229,5 +229,23 @@
   height: 20px;
   line-height: 20px;
   text-align: center;
-  
+}
+.deal {
+  :global {
+    .ant-form-item-control-input-content {
+     display: flex;
+     align-items: center;
+    }
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
+}
+.nameWidth {
+  width: 300px;
+}
+.colRow {
+  display: flex;
+  flex: none;
+  max-width:none;
 }
\ No newline at end of file

src/pages/ServiceGoods/components/AddMenusModal.jsx

 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
-import { Button, Modal } from 'antd';
-
+import { Button, Modal, Form, Switch, Input } from 'antd';
+import styles from '../common.less';
+import { apiCreateShop } from '../service'
 
 const AddMenusModal = (props, ref) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
-  const [modalText, setModalText] = useState('Content of the modal');
   const [open, setOpen] = useState(false);
-
+  const [formProject] = Form.useForm();
+  const [menusSwitch, setMenusSwitch] = useState(0) // 分组开启状态
 
   // const {
-  //   open,
-  //   setOpen,
+  //   queryShopList,
   // } = props;
   useImperativeHandle(ref, () => ({
     // changeVal 就是暴露给父组件的方法
     setOpen: newVal => {
-      setOpen(newVal)
+      setOpen(newVal);
     },
-}));
+  }));
   const handleOk = () => {
-    setModalText('The modal will be closed after two seconds');
+    formProject
+    .validateFields()
+    .then(async values => {
+      console.log('valuse', values, menusSwitch);
+      const params = {
+        name: values?.name,
+        necessary: menusSwitch,
+      }
+      const data = await apiCreateShop(params);
+      if (data.code === '0000') {
+        formProject.resetFields(); // 表单清除历史
         setConfirmLoading(true);
         setTimeout(() => {
           setOpen(false);
           setConfirmLoading(false);
         }, 2000);
+      }
+    })
+    .catch(info => {
+      // queryShopList()
+      console.log('保存异常', info);
+    });
   };
 
   const handleCancel = () => {
     console.log('Clicked cancel button');
     setOpen(false);
   };
-useEffect(() => {
+  const onChange = () => {
+    if (menusSwitch === 0) {
+      setMenusSwitch(1)
+      return false
+    }
+    setMenusSwitch(0)
+    return false
+  }
+  useEffect(() => {
     console.log('open', open);
-}, [open])
+  }, [open]);
   return (
     <>
-     {open && <Modal
-        title="Title"
+      {open && (
+        <Modal
+          title="添加分组"
           visible={open}
           onOk={handleOk}
           confirmLoading={confirmLoading}
+          initialValues={{
+            menusSwitch: 0,
+          }}
           onCancel={handleCancel}
         >
-        <p>{modalText}</p>
-      </Modal>}
+          <Form form={formProject}>
+            <Form.Item label="分组名称" name="name" rules={[{ required: true }]}>
+              <Input />
+            </Form.Item>
+            <Form.Item label="下单必选分组" name="necessary" valuePropName={menusSwitch}>
+                <Switch defaultChecked={menusSwitch} checkedChildren="开启" unCheckedChildren="关闭" onChange={onChange} />
+                <div className={styles.textStyle}>选中后，顾客下单需至少选择1个 “下单必须分组” 商品</div>
+                <div className={styles.textStyle}>每店仅可设置1个必点分组</div>
+              </Form.Item>
+          </Form>
+        </Modal>
+      )}
     </>
   );
 };
 
-
 export default forwardRef(AddMenusModal);

src/pages/ServiceGoods/components/AddSellTimeModal.jsx

 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
-import { Button, Modal } from 'antd';
-
+import { Button, Modal, Form, Checkbox, Row, Col, time, DatePicker } from 'antd';
+import { map } from 'lodash';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { ENUM_WEEK } from '../config';
+import styles from '../common.less';
 
+const { RangePicker } = DatePicker;
 const AddSellTimeModal = (props, ref) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [modalText, setModalText] = useState('Content of the modal');
   const [open, setOpen] = useState(false);
 
-
   // const {
   //   open,
   //   setOpen,
@@ -15,9 +18,9 @@ const AddSellTimeModal = (props, ref) => {
   useImperativeHandle(ref, () => ({
     // changeVal 就是暴露给父组件的方法
     setOpen: newVal => {
-      setOpen(newVal)
+      setOpen(newVal);
     },
-}));
+  }));
   const handleOk = () => {
     setModalText('The modal will be closed after two seconds');
     setConfirmLoading(true);
@@ -31,23 +34,107 @@ const AddSellTimeModal = (props, ref) => {
     console.log('Clicked cancel button');
     setOpen(false);
   };
-useEffect(() => {
+  useEffect(() => {
     console.log('open', open);
-}, [open])
+  }, [open]);
+  const onChange = () => {};
   return (
     <>
-     {open && <Modal
-        title="Title"
+      {open && (
+        <Modal
+          title="售卖时段"
           visible={open}
           onOk={handleOk}
           confirmLoading={confirmLoading}
           onCancel={handleCancel}
+          width={1050}
+        >
+          <Form
+            name="validate_other"
+            // {...formItemLayout}
+            // onFinish={onFinish}
+            initialValues={{
+              'input-number': 3,
+              'checkbox-group': ['A', 'B'],
+              rate: 3.5,
+            }}
+          >
+            <Form.Item name="chec" label="售卖时期(可多选)">
+              <Checkbox.Group>
+                <Row>
+                  <Col className={styles.colRow} span={8}>
+                    {ENUM_WEEK.map((item, index) => (
+                      <Checkbox value={item.value}>{item.label}</Checkbox>
+                    ))}
+                  </Col>
+                </Row>
+              </Checkbox.Group>
+            </Form.Item>
+
+            <Form.Item name="rate" label="售卖时段">
+              <Form.List
+                name="names"
+                rules={[
+                  {
+                    validator: async (_, names) => {
+                      if (!names || names.length < 2) {
+                        return Promise.reject(new Error('At least 2 passengers'));
+                      }
+                    },
+                  },
+                ]}
               >
-        <p>{modalText}</p>
-      </Modal>}
+                {(fields, { add, remove }, { errors }) => (
+                  <>
+                    {fields.map((field, index) => (
+                      <Form.Item
+                        // {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
+                        required={false}
+                        key={field.key}
+                        className={styles.deal}
+
+                      >
+                        <Form.Item
+                        className={styles.deal}
+                          {...field}
+                          validateTrigger={['onChange', 'onBlur']}
+                          rules={[
+                            {
+                              required: true,
+                              whitespace: true,
+                              message: "Please input passenger's name or delete this field.",
+                            },
+                          ]}
+                        >
+                          <RangePicker picker="time" onChange={onChange} />
+                        </Form.Item>
+                        {fields.length > 1 ? (
+                          <MinusCircleOutlined
+                            className="dynamic-delete-button"
+                            onClick={() => remove(field.name)}
+                          />
+                        ) : null}
+                      </Form.Item>
+                    ))}
+                    <Form.Item>
+                      <Button
+                        type="dashed"
+                        onClick={() => add()}
+                        style={{ width: '60%' }}
+                        icon={<PlusOutlined />}
+                      >
+                       新增时段
+                      </Button>
+                    </Form.Item>
+                  </>
+                )}
+              </Form.List>
+            </Form.Item>
+          </Form>
+        </Modal>
+      )}
     </>
   );
 };
 
-
 export default forwardRef(AddSellTimeModal);

src/pages/ServiceGoods/components/FormInformationBasic.jsx

@@ -35,12 +35,14 @@ const FormInformationBasic = forwardRef((props, ref) => {
     shopList,
     afterAddressList,
     specListData,
+    queryShopList,
   } = props;
   const [form] = Form.useForm();
   const [noreBrandList, setNoreBrandList] = useState([]);
   const customer = useContext(ServiceContext);
   const childAddMenusModalRef = useRef(null);
-  const [cardImageList, setCardImageList] = useState([]);
+  const [takeawayImageList, setTakeawayImageList] = useState([]);
+
 
   const onCheck = async () => {
     try {
@@ -90,10 +92,10 @@ const FormInformationBasic = forwardRef((props, ref) => {
       </div>
     </div>
   );
-  const onCardSuccessImageList = imgList => {
-    setCardImageList(imgList);
+  const onTakeawayImageList = imgList => {
+    setTakeawayImageList(imgList);
     form.setFieldsValue({
-      cardImageList: imgList,
+      commonImageList: imgList,
     });
   };
   const getFormValues = debounce(() => {
@@ -118,6 +120,8 @@ const FormInformationBasic = forwardRef((props, ref) => {
 
   useEffect(() => {
     console.log('!customer.isTakeawayService', customer);
+    console.log('newCategoryList[customer.productType]', newCategoryList[customer.productType]);
+    console.log('newCategoryList[customer.productType]', shopList);
   }, [customer.productType]);
   return (
     <Form
@@ -159,16 +163,15 @@ const FormInformationBasic = forwardRef((props, ref) => {
             showSearch={{ filter: filterCategoryOptions }}
             fieldNames={{ label: 'name', value: 'id', children: 'children' }}
             onChange={props.onCategoryChange}
-            options={newCategoryList[customer.productType]}
-            dropdownRender={dropdownRender}
+            options={shopList}
+            // dropdownRender={dropdownRender}
           />
         </Form.Item>
       )}
       {/* 新增菜单分组弹框 */}
-      <AddMenusModal ref={childAddMenusModalRef} />
-
+      {/* <AddMenusModal ref={childAddMenusModalRef} queryShopList={queryShopList} /> */}
       <Form.Item
-        name="categoryId"
+        name="storageRackIds"
         label="商品类目"
         rules={[{ type: 'array', required: true, message: '请输入商品类目!' }]}
       >
@@ -184,7 +187,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
       {/* 外卖-商品图片 */}
       {customer.isTakeawayService && (
         <Form.Item
-          name="cardImageList"
+          name="commonImageList"
           label="商品图片"
           extra="支持.jpg/png格式图片，建议单张比例1:1，大小200kb左右，最多可以上传5张"
           rules={[
@@ -196,11 +199,11 @@ const FormInformationBasic = forwardRef((props, ref) => {
           ]}
         >
           <UploadImage
-            name="cardImageList"
+            name="takeawayImageList"
             limit={5}
             disabled={customer.isDisabled}
-            pictures={cardImageList}
-            setPictureList={list => onCardSuccessImageList(list)}
+            pictures={takeawayImageList}
+            setPictureList={list => onTakeawayImageList(list)}
           />
         </Form.Item>
       )}

src/pages/ServiceGoods/components/FormTakeaway.jsx

@@ -20,7 +20,6 @@ import {
   Cascader,
   Divider,
 } from 'antd';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Title } from './CommonTemplate';
 import { formItemLayout, ENUM_REPERTORY, ENUM_SET_REPERTORY } from '../config';
 import { ServiceContext } from '../context';
@@ -48,7 +47,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
   const [form] = Form.useForm();
   const [initValue, setInitValue] = useState(createInitValues());
   const customer = useContext(ServiceContext);
-  const [cardImageList, setCardImageList] = useState([]);
+  const [detailImageList, setDetailImageList] = useState([]);
   const [newCategoryList, setNewCategoryList] = useState({});
   const addSellTimeRef = useRef(null);
   const AddRepertoryRef = useRef(null);
@@ -74,6 +73,8 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
 
   const getFormValues = debounce(() => {
     const values = form.getFieldsValue();
+    console.log('values========', values);
+
     props.onValuesChange({ settlementItem: values });
   }, 400);
 
@@ -100,9 +101,9 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
 
   // 上传图片
   const onCardSuccessImageList = imgList => {
-    setCardImageList(imgList);
+    setDetailImageList(imgList);
     form.setFieldsValue({
-      cardImageList: imgList,
+      detailImageList: imgList,
     });
   };
   const radioChangeEvent = key => {
@@ -139,6 +140,10 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
   const showAddRepertoryModal = () => {
     AddRepertoryRef.current.setOpenRepertory(true);
   };
+    // 显示加入库存弹框
+    const showMultiRepertoryModal = () => {
+      AddMultiSpecRef.current.setMultiRepertory(true);
+    };
   const onFinish = values => {
     console.log('Received values of form:', values);
   };
@@ -147,7 +152,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
       <Form
         {...formItemLayout}
         form={form}
-        name="register"
+        name="takeaway"
         initialValues={initValue}
         scrollToFirstError
         onValuesChange={getFormValues}
@@ -162,22 +167,15 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
           />
         </Form.Item>
         <Form.Item
-          name="cardImageList"
+          name="detailImageList"
           label="商品图片"
           extra="支持.jpg/png格式图片，建议单张切片宽750像素，大小200kb左右，您可以拖拽图片调整顺序，最多上传5张。"
-          // rules={[
-          //   {
-          //     required: true,
-          //     type: 'array',
-          //     message: '请上传商品图片！',
-          //   },
-          // ]}
         >
           <UploadImage
-            name="cardImageList"
+            name="detailImageList"
             limit={5}
             disabled={customer.isDisabled}
-            pictures={cardImageList}
+            pictures={detailImageList}
             setPictureList={list => onCardSuccessImageList(list)}
           />
         </Form.Item>
@@ -323,11 +321,11 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
             type="primary"
             size="small"
             onClick={() => {
-              showAddRepertoryModal(true);
+              showMultiRepertoryModal(true);
             }}
             shape="round"
           >
-            添加规格
+            添加多规格
           </Button>
           <Form.Item
             name="receptionVolume"
@@ -335,108 +333,24 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
             className={styles.multiSpecification}
           >
             <Button size="small" style={{ marginBottom: '10px' }} shape="round">
-              一键设置库存
+              统一设置置库存
             </Button>
             <Form.Item label="多规格1">
+
               <div
                 className={styles.specRepertory}
                 onClick={() => {
                   showAddRepertoryModal(true);
                 }}
               >
-                1/3
+               去设置
               </div>
             </Form.Item>
           </Form.Item>
         </Form.Item>
 
         {/* 33333 */}
-        <Form.Item>
-        <div>份量(如大小/小份、微辣/特辣)</div>
-          <Form.List name="users">
-            {(fields, { add, remove }) => (
-              <>
-                {fields.map(({ key, name, ...restField }) => (
-                  <Space
-                    key={key}
-                    style={{
-                      display: 'flex',
-                      marginBottom: 8,
-                    }}
-                    align="baseline"
-                  >
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'first']}
-                      rules={[
-                        {
-                          required: true,
-                          message: 'Missing first name',
-                        },
-                      ]}
-                    >
-                      <Input placeholder="名称" />
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'last']}
-                      rules={[
-                        {
-                          required: true,
-                          message: 'Missing last name',
-                        },
-                      ]}
-                    >
-                      <Input placeholder="约 份量（数字）" />
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'last']}
-                      rules={[
-                        {
-                          required: true,
-                          message: 'Missing last name',
-                        },
-                      ]}
-                    >
-                      <Input placeholder="约 份量（数字）" />
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'last']}
-                      rules={[
-                        {
-                          required: true,
-                          message: 'Missing last name',
-                        },
-                      ]}
-                    >
-                      <Input placeholder="销售价（元）" />
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'last']}
-                      rules={[
-                        {
-                          required: true,
-                          message: 'Missing last name',
-                        },
-                      ]}
-                    >
-                      <Input placeholder="活动价（元）" />
-                    </Form.Item>
-                    <MinusCircleOutlined onClick={() => remove(name)} />
-                  </Space>
-                ))}
-                <Form.Item>
-                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
-                    Add field
-                  </Button>
-                </Form.Item>
-              </>
-            )}
-          </Form.List>
-        </Form.Item>
+
       </Form>
       {/* 加入库存 */}
       <AddRepertoryModal ref={AddRepertoryRef} />

src/pages/ServiceGoods/config.js

@@ -331,3 +331,12 @@ export const ENUM_SET_REPERTORY = [
   { label: '清零', value: '清零' },
   { label: '最大', value: '最大' },
 ]
+export const ENUM_WEEK = [
+  { value: 1, label: '周一' },
+  { value: 2, label: '周二' },
+  { value: 3, label: '周三' },
+  { value: 1, label: '周四' },
+  { value: 1, label: '周五' },
+  { value: 1, label: '周六' },
+  { value: 1, label: '周日' },
+]

src/pages/ServiceGoods/index.jsx

@@ -22,6 +22,7 @@ import {
   getByProductType,
   apiCreateDraft,
   apiEditDraft,
+  apiQueryShopList,
 } from './service';
 import { isUrl, filterSendData, clearCurrent, onAutoSaveValue, localAutoSaveKey } from './utils';
 import { ServiceContext } from './context';
@@ -61,6 +62,11 @@ const ServiceGoods = options => {
   const [specList, setSpecList] = useState([]); // 规格列表
   const [editData, setEditData] = useState({}); // 编辑保存数据
   const [newCategoryList, setNewCategoryList] = useState({});
+  const [shopList, setShopList] = useState([
+    { id: 1, name: '分组1' },
+    { id: 2, name: '分组2' },
+  ]);
+
   const [visibleCacheEdit, setVisibleCacheEdit] = useState(false); // 显示有缓存未保存提示
   const [checkFormList] = useState([
     basicRef,
@@ -150,7 +156,13 @@ const ServiceGoods = options => {
       setSpecList(result.data || []);
     }
   };
-
+  // 查询分组列表
+const queryShopList = async () => {
+  if (!shopList.length) {
+    const result = await apiQueryShopList()
+    setShopList(result.data || []);
+  }
+}
   const getAfterSalesAddrsPage = async () => {
     if (!afterAddressList.length) {
       const result = await afterSalesAddrsPage();
@@ -212,7 +224,7 @@ const ServiceGoods = options => {
         sendData.productDraftId = SourceData.id;
       }
       console.log('sendData :>> ', sendData);
-      sendMerchantProductHttpRequest(sendData);
+      // sendMerchantProductHttpRequest(sendData);
     }
   };
 
@@ -459,6 +471,7 @@ const ServiceGoods = options => {
               ref={basicRef}
               editData={editData.infoMation}
               newCategoryList={newCategoryList}
+              shopList={shopList}
               categoryList={categoryList}
               virtualCategoryList={virtualCategoryList}
               brandList={brandList}
@@ -466,6 +479,7 @@ const ServiceGoods = options => {
               specListData={specListData}
               onCategoryChange={onCategoryChange}
               onValuesChange={onValuesChange}
+              // queryShopList={queryShopList}
             />
 
             {[1, 2].includes(productType) && [

src/pages/ServiceGoods/service.js

@@ -117,3 +117,16 @@ export const apiEditDraft = data =>
     prefix: goodsApi,
     data,
   });
+
+// 查询分组列表
+export const apiQueryShopList = data =>
+  request.post('/api/merchants/products/storageRack/listByShopIdAndStorageRackIds', {
+    prefix: goodsApi,
+    data,
+  });
+// 新建分组
+export const apiCreateShop = data =>
+  request.post('/api/merchants/products/storageRack/create', {
+    prefix: goodsApi,
+    data,
+  });