feat: 新增份量单位

src/pages/ServiceGoods/common.less

@@ -186,3 +186,48 @@
   color: #0e75fd;
   cursor: pointer;
 }
+.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 {
+    margin-bottom: 0;
+  }
+}
+}
+.itemInline {
+  :global {
+    .ant-form-item-control-input-content {
+     display: flex;
+    }
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
+}
+.textStyle{
+  color: red;
+}
+.multiSpecification {
+  display: flex;
+  flex-flow: row wrap;
+}
+.specRepertory {
+  width: 50px;
+  background-color: #319bfe;
+  border-radius: 25px;
+  color: #fff;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  
+}

src/pages/ServiceGoods/components/AddMenusModal.jsx

-import React, { useState, useEffect, forwardRef } from 'react';
+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
 import { Button, Modal } from 'antd';
 
-const AddMenusModal = props => {
+
+const AddMenusModal = (props, ref) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [modalText, setModalText] = useState('Content of the modal');
-  const { open, setOpen } = props;
+  const [open, setOpen] = useState(false);
+
+
+  // const {
+  //   open,
+  //   setOpen,
+  // } = props;
+  useImperativeHandle(ref, () => ({
+    // changeVal 就是暴露给父组件的方法
+    setOpen: newVal => {
+      setOpen(newVal)
+    },
+}));
   const handleOk = () => {
     setModalText('The modal will be closed after two seconds');
     setConfirmLoading(true);
@@ -18,25 +31,23 @@ const AddMenusModal = props => {
     console.log('Clicked cancel button');
     setOpen(false);
   };
-  useEffect(() => {
+useEffect(() => {
     console.log('open', open);
-  }, [open]);
+}, [open])
   return (
     <>
-      {open && 222}
-      {open && (
-        <Modal
-          title="Title"
-          open={open}
-          onOk={handleOk}
-          confirmLoading={confirmLoading}
-          onCancel={handleCancel}
-        >
-          <p>{modalText}</p>
-        </Modal>
-      )}
+     {open && <Modal
+        title="Title"
+        visible={open}
+        onOk={handleOk}
+        confirmLoading={confirmLoading}
+        onCancel={handleCancel}
+      >
+        <p>{modalText}</p>
+      </Modal>}
     </>
   );
 };
 
+
 export default forwardRef(AddMenusModal);

src/pages/ServiceGoods/components/AddMultiSpecModal.jsx

+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Button, Modal, Radio, Form, InputNumber, Switch } from 'antd';
+import styles from '../common.less';
+import { ENUM_SET_REPERTORY } from '../config';
+
+const AddRepertoryModal = (props, ref) => {
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [modalText, setModalText] = useState('Content of the modal');
+  const [openRepertory, setOpenRepertory] = useState(false);
+
+  // const {
+  //   open,
+  //   setOpen,
+  // } = 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 handleCancel = () => {
+    console.log('Clicked cancel button');
+    setOpenRepertory(false);
+  };
+  useEffect(() => {
+    console.log('open', openRepertory);
+  }, [openRepertory]);
+  return (
+    <>
+      {openRepertory && (
+        <Modal
+          title="修改库存"
+          visible={openRepertory}
+          onOk={handleOk}
+          confirmLoading={confirmLoading}
+          onCancel={handleCancel}
+        >
+          <Form>
+            <Form.Item className={styles.itemInline}>
+              <Form.Item
+                name="receptionVolume"
+                label="剩余库存"
+                style={{
+                  display: 'flex',
+                  marginRight: '8px',
+                }}
+                rules={[{ required: true, message: '请填写剩余库存' }]}
+              >
+                <InputNumber
+                  min={1}
+                  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>
+            </Form.Item>
+            <Form.Item
+              name="receptionVolume"
+              label="最大库存"
+              rules={[{ required: true, message: '请填写最大库存' }]}
+            >
+              <InputNumber min={1} style={{ width: 200 }} placeholder="请输入" />
+            </Form.Item>
+            <Form.Item name="receptionVolume" label="自动补足">
+              <Switch
+                checkedChildren="开启"
+                unCheckedChildren="关闭"
+                defaultChecked
+                onChange={onChange3}
+              />
+            </Form.Item>
+            <div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div>
+          </Form>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default forwardRef(AddRepertoryModal);

src/pages/ServiceGoods/components/AddRepertoryModal.jsx

+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Button, Modal, Radio, Form, InputNumber, Switch } from 'antd';
+import styles from '../common.less';
+import { ENUM_SET_REPERTORY } from '../config';
+
+const AddRepertoryModal = (props, ref) => {
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [modalText, setModalText] = useState('Content of the modal');
+  const [openRepertory, setOpenRepertory] = useState(false);
+
+  // const {
+  //   open,
+  //   setOpen,
+  // } = 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 handleCancel = () => {
+    console.log('Clicked cancel button');
+    setOpenRepertory(false);
+  };
+  useEffect(() => {
+    console.log('open', openRepertory);
+  }, [openRepertory]);
+  return (
+    <>
+      {openRepertory && (
+        <Modal
+          title="修改库存"
+          visible={openRepertory}
+          onOk={handleOk}
+          confirmLoading={confirmLoading}
+          onCancel={handleCancel}
+        >
+          <Form>
+            <Form.Item className={styles.itemInline}>
+              <Form.Item
+                name="receptionVolume"
+                label="剩余库存"
+                style={{
+                  display: 'flex',
+                  marginRight: '8px',
+                }}
+                rules={[{ required: true, message: '请填写剩余库存' }]}
+              >
+                <InputNumber
+                  min={1}
+                  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>
+            </Form.Item>
+            <Form.Item
+              name="receptionVolume"
+              label="最大库存"
+              rules={[{ required: true, message: '请填写最大库存' }]}
+            >
+              <InputNumber min={1} style={{ width: 200 }} placeholder="请输入" />
+            </Form.Item>
+            <Form.Item name="receptionVolume" label="自动补足">
+              <Switch
+                checkedChildren="开启"
+                unCheckedChildren="关闭"
+                defaultChecked
+                onChange={onChange3}
+              />
+            </Form.Item>
+            <div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div>
+          </Form>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default forwardRef(AddRepertoryModal);

src/pages/ServiceGoods/components/AddSellTimeModal.jsx

+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Button, Modal } from 'antd';
+
+
+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,
+  // } = props;
+  useImperativeHandle(ref, () => ({
+    // changeVal 就是暴露给父组件的方法
+    setOpen: newVal => {
+      setOpen(newVal)
+    },
+}));
+  const handleOk = () => {
+    setModalText('The modal will be closed after two seconds');
+    setConfirmLoading(true);
+    setTimeout(() => {
+      setOpen(false);
+      setConfirmLoading(false);
+    }, 2000);
+  };
+
+  const handleCancel = () => {
+    console.log('Clicked cancel button');
+    setOpen(false);
+  };
+useEffect(() => {
+    console.log('open', open);
+}, [open])
+  return (
+    <>
+     {open && <Modal
+        title="Title"
+        visible={open}
+        onOk={handleOk}
+        confirmLoading={confirmLoading}
+        onCancel={handleCancel}
+      >
+        <p>{modalText}</p>
+      </Modal>}
+    </>
+  );
+};
+
+
+export default forwardRef(AddSellTimeModal);

src/pages/ServiceGoods/components/FormInformationBasic.jsx

@@ -6,11 +6,12 @@ import React, {
   useImperativeHandle,
   useRef,
 } from 'react';
-import { Cascader, Form, Input, Select, Popover, Button, Checkbox, Divider } from 'antd';
+import { Cascader, Form, Input, Select, Popover, Button, Checkbox, Divider, Modal } from 'antd';
 import { formItemLayout } from '../config';
 import { ServiceContext } from '../context';
 import { debounce } from '@/utils/utils';
 import AddMenusModal from './AddMenusModal';
+import UploadImage from './UploadImage';
 
 const CreateSelectOption = optionList =>
   optionList.map(brandItem => (
@@ -39,7 +40,8 @@ const FormInformationBasic = forwardRef((props, ref) => {
   const [noreBrandList, setNoreBrandList] = useState([]);
   const customer = useContext(ServiceContext);
   const childAddMenusModalRef = useRef(null);
-  const [open, setOpen] = useState(false);
+  const [cardImageList, setCardImageList] = useState([]);
+
   const onCheck = async () => {
     try {
       const values = await form.validateFields();
@@ -62,12 +64,11 @@ const FormInformationBasic = forwardRef((props, ref) => {
       return null;
     }
   };
-
+// 自定义加入菜单
   const showModal = () => {
-    setOpen(true);
-    console.log('3333', open);
+    childAddMenusModalRef.current.setOpen(true);
   };
-  // 自定义下拉
+  // 自定义菜单下拉
   const dropdownRender = menus => (
     <div>
       {menus}
@@ -89,6 +90,12 @@ const FormInformationBasic = forwardRef((props, ref) => {
       </div>
     </div>
   );
+  const onCardSuccessImageList = imgList => {
+    setCardImageList(imgList);
+    form.setFieldsValue({
+      cardImageList: imgList,
+    });
+  };
   const getFormValues = debounce(() => {
     const values = form.getFieldsValue();
     props.onValuesChange({ infoMation: values });
@@ -158,7 +165,8 @@ const FormInformationBasic = forwardRef((props, ref) => {
         </Form.Item>
       )}
       {/* 新增菜单分组弹框 */}
-      <AddMenusModal open={open} ref={childAddMenusModalRef} />
+      <AddMenusModal ref={childAddMenusModalRef} />
+
       <Form.Item
         name="categoryId"
         label="商品类目"
@@ -173,6 +181,29 @@ const FormInformationBasic = forwardRef((props, ref) => {
           options={newCategoryList[customer.productType]}
         />
       </Form.Item>
+      {/* 外卖-商品图片 */}
+      {customer.isTakeawayService && (
+        <Form.Item
+          name="cardImageList"
+          label="商品图片"
+          extra="支持.jpg/png格式图片，建议单张比例1:1，大小200kb左右，最多可以上传5张"
+          rules={[
+            {
+              required: true,
+              type: 'array',
+              message: '请上传商品图片！',
+            },
+          ]}
+        >
+          <UploadImage
+            name="cardImageList"
+            limit={5}
+            disabled={customer.isDisabled}
+            pictures={cardImageList}
+            setPictureList={list => onCardSuccessImageList(list)}
+          />
+        </Form.Item>
+      )}
 
       {!customer.isTakeawayService && !customer.isCard && (
         <Form.Item

src/pages/ServiceGoods/config.js

@@ -323,3 +323,11 @@ export const StaticColumns = customer => [
     disabeldRender: () => customer.isDisabled,
   },
 ];
+export const ENUM_REPERTORY = [
+  { label: '单规格', value: '单规格' },
+  { label: '多规格', value: '多规格' },
+]
+export const ENUM_SET_REPERTORY = [
+  { label: '清零', value: '清零' },
+  { label: '最大', value: '最大' },
+]

src/pages/ServiceGoods/index.jsx

@@ -9,6 +9,7 @@ import FormRuleSetting from './components/FormRuleSetting';
 import FormRuleVPictures from './components/FormRuleVPictures';
 import FormSettlementOthers from './components/FormSettlementOthers';
 import FormAttr from './components/FormAttr';
+import FormTakeaway from './components/FormTakeaway';
 import localStorage from '@/utils/localStorage';
 import {
   merchantBrandList,
@@ -45,6 +46,7 @@ const ServiceGoods = options => {
   const picturesRef = useRef(null);
   const settleOtrRef = useRef(null);
   const attrRef = useRef(null);
+  const takeawayRef = useRef(null);
 
   const [pageId, setPageId] = useState(null);
   const [categoryIds, setCategoryIds] = useState([]); // 商品品类ID
@@ -476,7 +478,7 @@ const ServiceGoods = options => {
                 onValuesChange={onValuesChange}
               />,
             ]}
-
+           { productType !== 5 && <>
             <Title title="价格与库存" />
             <FormPriceOrStock
               ref={stockRef}
@@ -486,6 +488,8 @@ const ServiceGoods = options => {
               skuList={editData.skuList}
               onValuesChange={onValuesChange}
             />
+            </>}
+            { productType !== 5 && <>
             <Title title="规则设置" />
             {productType === 4 && (
               <FormRuleSetting
@@ -495,13 +499,16 @@ const ServiceGoods = options => {
                 onValuesChange={onValuesChange}
               />
             )}
-
+            </>}
+            { productType !== 5 && <>
             <FormRuleVPictures
               ref={picturesRef}
               specKeyItem={specKeyList}
               editData={editData.infoImageData}
               onValuesChange={onValuesChange}
             />
+            </>}
+
             {productType === 4 && (
               <FormSettlementOthers
                 ref={settleOtrRef}
@@ -509,6 +516,15 @@ const ServiceGoods = options => {
                 onValuesChange={onValuesChange}
               />
             )}
+            { productType === 5 && <>
+              <FormTakeaway
+                ref={takeawayRef}
+                editData={editData.serviceItem}
+                supplierIdList={supplierIdList}
+                onValuesChange={onValuesChange}
+              />
+            </>}
+
           </ServiceContext.Provider>
         </WrapperContainer>
       </Spin>