feat: 新增份量表单

src/pages/ServiceGoods/common.less

@@ -28,7 +28,17 @@
     content: '';
   }
 }
-
+.week {
+  background: #f0f0f0;
+}
+.weekCon {
+  display: flex;
+  flex-flow: row nowrap;
+  color: #319bfe;
+}
+.weekText {
+  margin-right: 10px;
+}
 .prodcutContent {
   display: flex;
   padding-bottom: 10px;
@@ -188,33 +198,44 @@
 }
 .required {
   :global {
-  .ant-form-item-label > {
-    ::before {
-      display: inline-block;
-      margin-right: 4px;
-      color: #ff4d4f;
-      font-size: 14px;
-      font-family: SimSun, sans-serif;
-      line-height: 1;
-      content: '*';
+    .ant-form-item-label > {
+      ::before {
+        display: inline-block;
+        margin-right: 4px;
+        color: #ff4d4f;
+        font-size: 14px;
+        font-family: SimSun, sans-serif;
+        line-height: 1;
+        content: '*';
+      }
+    }
+    .ant-form-item {
+      margin-bottom: 0;
     }
-  }
-  .ant-form-item {
-    margin-bottom: 0;
   }
 }
-}
 .itemInline {
   :global {
     .ant-form-item-control-input-content {
-     display: flex;
+      display: flex;
     }
     .ant-form-item {
       margin-bottom: 0;
+      margin-left: 40px;
     }
   }
 }
-.textStyle{
+.itemInlineModal {
+  :global {
+    .ant-form-item-control-input-content {
+      display: flex;
+    }
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
+}
+.textStyle {
   color: red;
 }
 .multiSpecification {
@@ -233,19 +254,28 @@
 .deal {
   :global {
     .ant-form-item-control-input-content {
-     display: flex;
-     align-items: center;
+      display: flex;
+      align-items: center;
     }
     .ant-form-item {
       margin-bottom: 0;
     }
   }
 }
+.dealInput {
+  :global {
+    .ant-form-item-control-input-content {
+      .ant-input {
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
 .nameWidth {
   width: 300px;
 }
 .colRow {
   display: flex;
   flex: none;
-  max-width: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, Form, Switch, Input } from 'antd';
+import { Button, Modal, Form, Switch, Input, Select } from 'antd';
 import styles from '../common.less';
-import { apiCreateShop } from '../service'
+import { apiCreateShop } from '../service';
 
 const AddMenusModal = (props, ref) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [formProject] = Form.useForm();
-  const [menusSwitch, setMenusSwitch] = useState(0) // 分组开启状态
+  const [menusSwitch, setMenusSwitch] = useState(0); // 分组开启状态
 
   // const {
   //   queryShopList,
@@ -20,27 +20,27 @@ const AddMenusModal = (props, ref) => {
   }));
   const handleOk = () => {
     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);
-    });
+      .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 = () => {
@@ -49,12 +49,12 @@ const AddMenusModal = (props, ref) => {
   };
   const onChange = () => {
     if (menusSwitch === 0) {
-      setMenusSwitch(1)
-      return false
+      setMenusSwitch(1);
+      return false;
     }
-    setMenusSwitch(0)
-    return false
-  }
+    setMenusSwitch(0);
+    return false;
+  };
   useEffect(() => {
     console.log('open', open);
   }, [open]);
@@ -72,14 +72,26 @@ const AddMenusModal = (props, ref) => {
           onCancel={handleCancel}
         >
           <Form form={formProject}>
+            <Form.Item label="Select">
+              <Select>
+                <Select.Option value="shopId">Demo</Select.Option>
+              </Select>
+            </Form.Item>
             <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>
+              <Switch
+                defaultChecked={menusSwitch}
+                checkedChildren="开启"
+                unCheckedChildren="关闭"
+                onChange={onChange}
+              />
+              <div className={styles.textStyle}>
+                选中后，顾客下单需至少选择1个 “下单必须分组” 商品
+              </div>
+              <div className={styles.textStyle}>每店仅可设置1个必点分组</div>
+            </Form.Item>
           </Form>
         </Modal>
       )}

src/pages/ServiceGoods/components/AddRepertoryModal.jsx

@@ -47,7 +47,7 @@ const AddRepertoryModal = (props, ref) => {
           onCancel={handleCancel}
         >
           <Form>
-            <Form.Item className={styles.itemInline}>
+            <Form.Item className={styles.itemInlineModal}>
               <Form.Item
                 name="receptionVolume"
                 label="剩余库存"

src/pages/ServiceGoods/components/AddSellTimeModal.jsx

@@ -2,19 +2,19 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } f
 import { Button, Modal, Form, Checkbox, Row, Col, time, DatePicker } from 'antd';
 import { map } from 'lodash';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import moment from 'moment';
 import { ENUM_WEEK } from '../config';
 import styles from '../common.less';
 
+const format = 'HH:mm';
 const { RangePicker } = DatePicker;
 const AddSellTimeModal = (props, ref) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [modalText, setModalText] = useState('Content of the modal');
+  const [formProject] = Form.useForm();
   const [open, setOpen] = useState(false);
 
-  // const {
-  //   open,
-  //   setOpen,
-  // } = props;
+  const { saleDates, setSaleDates } = props;
   useImperativeHandle(ref, () => ({
     // changeVal 就是暴露给父组件的方法
     setOpen: newVal => {
@@ -22,12 +22,15 @@ const AddSellTimeModal = (props, ref) => {
     },
   }));
   const handleOk = () => {
-    setModalText('The modal will be closed after two seconds');
-    setConfirmLoading(true);
-    setTimeout(() => {
-      setOpen(false);
-      setConfirmLoading(false);
-    }, 2000);
+    formProject.validateFields().then(async values => {
+      console.log('valuse', values);
+      setConfirmLoading(true);
+      setSaleDates(values);
+      setTimeout(() => {
+        setOpen(false);
+        setConfirmLoading(false);
+      }, 1000);
+    });
   };
 
   const handleCancel = () => {
@@ -36,6 +39,8 @@ const AddSellTimeModal = (props, ref) => {
   };
   useEffect(() => {
     console.log('open', open);
+    console.log('sss/', formProject);
+    // formProject.setFieldsValue({ saleTimes: [['12:00', '13:00']] })
   }, [open]);
   const onChange = () => {};
   return (
@@ -50,16 +55,13 @@ const AddSellTimeModal = (props, ref) => {
           width={1050}
         >
           <Form
-            name="validate_other"
+            name="sellTime"
+            form={formProject}
             // {...formItemLayout}
             // onFinish={onFinish}
-            initialValues={{
-              'input-number': 3,
-              'checkbox-group': ['A', 'B'],
-              rate: 3.5,
-            }}
+            initialValues={saleDates}
           >
-            <Form.Item name="chec" label="售卖时期(可多选)">
+            <Form.Item name="unavailableDate" label="售卖时期(可多选)">
               <Checkbox.Group>
                 <Row>
                   <Col className={styles.colRow} span={8}>
@@ -71,20 +73,21 @@ const AddSellTimeModal = (props, ref) => {
               </Checkbox.Group>
             </Form.Item>
 
-            <Form.Item name="rate" label="售卖时段">
+            <Form.Item label="售卖时段">
               <Form.List
-                name="names"
-                rules={[
-                  {
-                    validator: async (_, names) => {
-                      if (!names || names.length < 2) {
-                        return Promise.reject(new Error('At least 2 passengers'));
-                      }
-                    },
-                  },
-                ]}
+                name="saleTimes"
+                initialValue={[[]]}
+                // rules={[
+                //   {
+                //     validator: async (_, times) => {
+                //       if (!times || times.length < 2) {
+                //         return Promise.reject(new Error('At least 2 passengers'));
+                //       }
+                //     },
+                //   },
+                // ]}
               >
-                {(fields, { add, remove }, { errors }) => (
+                {(fields, { add, remove }) => (
                   <>
                     {fields.map((field, index) => (
                       <Form.Item
@@ -92,21 +95,19 @@ const AddSellTimeModal = (props, ref) => {
                         required={false}
                         key={field.key}
                         className={styles.deal}
-
                       >
                         <Form.Item
-                        className={styles.deal}
+                          className={styles.deal}
                           {...field}
-                          validateTrigger={['onChange', 'onBlur']}
+                          // validateTrigger={['onChange', 'onBlur']}
                           rules={[
                             {
                               required: true,
-                              whitespace: true,
-                              message: "Please input passenger's name or delete this field.",
+                              message: '请输入售卖时间',
                             },
                           ]}
                         >
-                          <RangePicker picker="time" onChange={onChange} />
+                          <RangePicker picker="time" format={format} onChange={onChange} />
                         </Form.Item>
                         {fields.length > 1 ? (
                           <MinusCircleOutlined
@@ -123,7 +124,7 @@ const AddSellTimeModal = (props, ref) => {
                         style={{ width: '60%' }}
                         icon={<PlusOutlined />}
                       >
-                       新增时段
+                        新增时段
                       </Button>
                     </Form.Item>
                   </>

src/pages/ServiceGoods/components/FormInformationBasic.jsx

@@ -43,7 +43,6 @@ const FormInformationBasic = forwardRef((props, ref) => {
   const childAddMenusModalRef = useRef(null);
   const [takeawayImageList, setTakeawayImageList] = useState([]);
 
-
   const onCheck = async () => {
     try {
       const values = await form.validateFields();
@@ -66,7 +65,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
       return null;
     }
   };
-// 自定义加入菜单
+  // 自定义加入菜单
   const showModal = () => {
     childAddMenusModalRef.current.setOpen(true);
   };
@@ -143,7 +142,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
           name="name"
           label="商品名称"
           rules={[
-            { required: true, min: 2, message: '请输入最少两个字符的商品名称!', whitespace: true },
+            { required: true, min: 2, message: '请输入最少两个字符的商品名称', whitespace: true },
           ]}
         >
           <Input placeholder="请输入商品名称" disabled={customer.isDisabled} />
@@ -155,28 +154,28 @@ const FormInformationBasic = forwardRef((props, ref) => {
         <Form.Item
           name="categoryId"
           label="菜单分组"
-          rules={[{ type: 'array', required: true, message: '请输入菜单分组!' }]}
+          rules={[{ type: 'array', required: true, message: '请输入菜单分组' }]}
         >
           <Cascader
-            placeholder="请选择菜单分组！"
+            placeholder="请选择菜单分组"
             disabled={customer.isEdit && customer.isNormal}
             showSearch={{ filter: filterCategoryOptions }}
             fieldNames={{ label: 'name', value: 'id', children: 'children' }}
             onChange={props.onCategoryChange}
             options={shopList}
-            // dropdownRender={dropdownRender}
+            dropdownRender={dropdownRender}
           />
         </Form.Item>
       )}
       {/* 新增菜单分组弹框 */}
-      {/* <AddMenusModal ref={childAddMenusModalRef} queryShopList={queryShopList} /> */}
+      <AddMenusModal ref={childAddMenusModalRef} queryShopList={queryShopList} />
       <Form.Item
         name="storageRackIds"
         label="商品类目"
-        rules={[{ type: 'array', required: true, message: '请输入商品类目!' }]}
+        rules={[{ type: 'array', required: true, message: '请输入商品类目' }]}
       >
         <Cascader
-          placeholder="请选择商品类目！"
+          placeholder="请选择商品类目"
           disabled={customer.isEdit && customer.isNormal}
           showSearch={{ filter: filterCategoryOptions }}
           fieldNames={{ label: 'name', value: 'id', children: 'children' }}
@@ -194,7 +193,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
             {
               required: true,
               type: 'array',
-              message: '请上传商品图片！',
+              message: '请上传商品图片',
             },
           ]}
         >
@@ -212,7 +211,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
         <Form.Item
           name="brandId"
           label="商品品牌"
-          rules={[{ required: true, message: '请选择商品品牌!' }]}
+          rules={[{ required: true, message: '请选择商品品牌' }]}
           extra="若需新增品牌请联系业务员"
         >
           <Select
@@ -276,9 +275,9 @@ const FormInformationBasic = forwardRef((props, ref) => {
           key="description"
           name="description"
           label="描述"
-          rules={[{ required: true, message: '请输入描述,100字以内！' }]}
+          rules={[{ required: true, message: '请输入描述,100字以内' }]}
         >
-          <Input.TextArea showCount maxLength={100} placeholder="请输入描述, 100字以内！" />
+          <Input.TextArea showCount maxLength={100} placeholder="请输入描述, 100字以内" />
         </Form.Item>
       ) : null}
     </Form>

src/pages/ServiceGoods/config.js

@@ -323,20 +323,18 @@ export const StaticColumns = customer => [
     disabeldRender: () => customer.isDisabled,
   },
 ];
-export const ENUM_REPERTORY = [
-  { label: '单规格', value: '单规格' },
-  { label: '多规格', value: '多规格' },
-]
+export const ENUM_REPERTORY = [{ label: '单规格', value: '1' }, { label: '多规格', value: '2' }];
 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: '周日' },
-]
+  { value: 4, label: '周四' },
+  { value: 5, label: '周五' },
+  { value: 6, label: '周六' },
+  { value: 7, label: '周日' },
+  { value: 8, label: '法定假日' },
+];

src/pages/ServiceGoods/index.jsx

@@ -62,10 +62,7 @@ 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 [shopList, setShopList] = useState([{ id: 1, name: '分组1' }, { id: 2, name: '分组2' }]);
 
   const [visibleCacheEdit, setVisibleCacheEdit] = useState(false); // 显示有缓存未保存提示
   const [checkFormList] = useState([
@@ -75,6 +72,7 @@ const ServiceGoods = options => {
     settingRef,
     settleOtrRef,
     picturesRef,
+    takeawayRef,
   ]);
 
   const [specKeyList, setSpecKeyList] = useState([]); // 记录一级规格key字段
@@ -82,6 +80,7 @@ const ServiceGoods = options => {
   const resetForm = () => clearCurrent(checkFormList).forEach(({ current }) => current.reset());
 
   const onValuesChange = e => {
+    console.log('e======', e);
     if (!isEdit) {
       if (visibleCacheEdit) {
         setVisibleCacheEdit(false);
@@ -157,12 +156,12 @@ const ServiceGoods = options => {
     }
   };
   // 查询分组列表
-const queryShopList = async () => {
-  if (!shopList.length) {
-    const result = await apiQueryShopList()
-    setShopList(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();
@@ -208,6 +207,7 @@ const queryShopList = async () => {
   // 保存商品
   const submitEvent = async () => {
     const checkPromiseList = clearCurrent(checkFormList).map(({ current }) => current.onCheck());
+    console.log('333333333333', checkFormList);
     const resuslt = await Promise.all(checkPromiseList);
     console.log('resuslt :>> ', resuslt);
     if (!resuslt.includes(null)) {
@@ -492,36 +492,42 @@ const queryShopList = async () => {
                 onValuesChange={onValuesChange}
               />,
             ]}
-           { productType !== 5 && <>
-            <Title title="价格与库存" />
-            <FormPriceOrStock
-              ref={stockRef}
-              specList={specList}
-              onSpecChange={onSpecCommonImgEvent}
-              editData={editData.infoSpecData}
-              skuList={editData.skuList}
-              onValuesChange={onValuesChange}
-            />
-            </>}
-            { productType !== 5 && <>
-            <Title title="规则设置" />
-            {productType === 4 && (
-              <FormRuleSetting
-                ref={settingRef}
-                editData={editData.serviceItem}
-                supplierIdList={supplierIdList}
-                onValuesChange={onValuesChange}
-              />
+            {productType !== 5 && (
+              <>
+                <Title title="价格与库存" />
+                <FormPriceOrStock
+                  ref={stockRef}
+                  specList={specList}
+                  onSpecChange={onSpecCommonImgEvent}
+                  editData={editData.infoSpecData}
+                  skuList={editData.skuList}
+                  onValuesChange={onValuesChange}
+                />
+              </>
+            )}
+            {productType !== 5 && (
+              <>
+                <Title title="规则设置" />
+                {productType === 4 && (
+                  <FormRuleSetting
+                    ref={settingRef}
+                    editData={editData.serviceItem}
+                    supplierIdList={supplierIdList}
+                    onValuesChange={onValuesChange}
+                  />
+                )}
+              </>
+            )}
+            {productType !== 5 && (
+              <>
+                <FormRuleVPictures
+                  ref={picturesRef}
+                  specKeyItem={specKeyList}
+                  editData={editData.infoImageData}
+                  onValuesChange={onValuesChange}
+                />
+              </>
             )}
-            </>}
-            { productType !== 5 && <>
-            <FormRuleVPictures
-              ref={picturesRef}
-              specKeyItem={specKeyList}
-              editData={editData.infoImageData}
-              onValuesChange={onValuesChange}
-            />
-            </>}
 
             {productType === 4 && (
               <FormSettlementOthers
@@ -530,15 +536,16 @@ const queryShopList = async () => {
                 onValuesChange={onValuesChange}
               />
             )}
-            { productType === 5 && <>
-              <FormTakeaway
-                ref={takeawayRef}
-                editData={editData.serviceItem}
-                supplierIdList={supplierIdList}
-                onValuesChange={onValuesChange}
-              />
-            </>}
-
+            {productType === 5 && (
+              <>
+                <FormTakeaway
+                  ref={takeawayRef}
+                  editData={editData.serviceItem}
+                  supplierIdList={supplierIdList}
+                  onValuesChange={onValuesChange}
+                />
+              </>
+            )}
           </ServiceContext.Provider>
         </WrapperContainer>
       </Spin>

src/pages/ServiceGoods/service.js

@@ -130,3 +130,21 @@ export const apiCreateShop = data =>
     prefix: goodsApi,
     data,
   });
+// 新增外卖商品  http://yapi.quantgroups.com/project/389/interface/api/57324
+export const apiAddGoods = data =>
+  request.post('/v1/channels/products/add', {
+    prefix: goodsApi,
+    data,
+  });
+// 商品标签列表 http://yapi.quantgroups.com/project/389/interface/api/57979
+export const apiTagList = data =>
+  request.post('/v1/channels/products/tag/getAll', {
+    prefix: goodsApi,
+    data,
+  });
+// 单位列表 http://yapi.quantgroups.com/project/389/interface/api/57179
+export const apiUnits = data =>
+  request.get('/api/consoles/products/units', {
+    prefix: goodsApi,
+    data,
+  });