feat: 新增份量单位

5b5381e5 · 陈万宝 · 2e5a3edf · 5b5381e5 · 5b5381e5 · 5b5381e5
Commit 5b5381e5 authored Mar 14, 2023 by 陈万宝
9 changed files
--- a/src/pages/ServiceGoods/common.less
+++ b/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;
+  
+}
--- a/src/pages/ServiceGoods/components/AddMenusModal.jsx
+++ b/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);
--- a/src/pages/ServiceGoods/components/AddMultiSpecModal.jsx
+++ b/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);
--- a/src/pages/ServiceGoods/components/AddRepertoryModal.jsx
+++ b/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);
--- a/src/pages/ServiceGoods/components/AddSellTimeModal.jsx
+++ b/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);
--- a/src/pages/ServiceGoods/components/FormInformationBasic.jsx
+++ b/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

--- a/src/pages/ServiceGoods/components/FormTakeaway.jsx
+++ b/src/pages/ServiceGoods/components/FormTakeaway.jsx
--- a/src/pages/ServiceGoods/config.js
+++ b/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: '最大' },
+]
--- a/src/pages/ServiceGoods/index.jsx
+++ b/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>