Merge branch 'feature/20230315_take_out_goods' into feature/20230327_public_takeaway

config/env.config.js

 const isProduction = process.env.NODE_ENV === 'production';
 const isPre = process.env.PRE_ENV === 'pre';
-const environment = 'xyqb';
+const environment = 'sc1';
 const envAPi = {
   api: `https://security-${environment}.liangkebang.net`, //'https://security-xyqb.liangkebang.net',
   kdspOpApi: `https://sc-merchant-api-${environment}.liangkebang.net`,

src/pages/GoodsManage/index.jsx

@@ -369,6 +369,13 @@ class goodsManage extends Component {
     const canAddService = permissions[GOOD_MANAGE.ADD_SERVICE_GOODS];
     const canAddNormal = permissions[GOOD_MANAGE.ADD_NORMAL_GOODS];
     this.canEditable = permissions[GOOD_MANAGE.EDITABLE];
+    // console.log('serviceData', this.state.serviceData);
+    // console.log('shopList', this.shopList);
+    // console.log('treeData', this.state.treeData);
+    // console.log('treeData', this.state.treeData);
+    // console.log('treeData', this.state.treeData);
+    // console.log('3333333', permissions);
+
     return (
       <PageHeaderWrapper>
         {canAddNormal || canAddService

src/pages/GoodsManage/service.js

@@ -289,3 +289,11 @@ export async function apiDraftList(data) {
     data,
   });
 }
+
+// 新增外卖商品
+export async function addTakeOutGoods(params) {
+  return request.post('/v1/channels/products/add', {
+    prefix: goodsApi,
+    data: params,
+  });
+}

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;
@@ -186,3 +196,108 @@
   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;
+      margin-left: 40px;
+    }
+  }
+}
+.itemInlineModal {
+  :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;
+}
+.specsBetween {
+  display: flex;
+  flex-flow: row nowrap;
+}
+.specRepertory {
+  background-color: #319bfe;
+  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 {
+    .ant-form-item-control-input-content {
+      display: flex;
+      align-items: center;
+    }
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
+}
+.conBg {
+  background: #f8f8f8;
+  min-width: 100%;
+  width: fit-content;
+  :global {
+    .ant-input {
+      margin: 10px 0;
+    }
+    .ant-form-item {
+      margin-bottom: 8px;
+    }
+  }
+}
+.nameWidth {
+  width: 300px;
+}
+.colRow {
+  display: flex;
+  flex: none;
+  max-width: none;
+}
+.rowWarp {
+  display: flex;
+  flex-flow: row wrap;
+  background: #f8f8f8;
+}

src/pages/ServiceGoods/components/AddMenusModal.jsx

+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Button, Modal, Form, Switch, Input, Select } from 'antd';
+import styles from '../common.less';
+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 {
+  //   queryShopList,
+  // } = props;
+  useImperativeHandle(ref, () => ({
+    // changeVal 就是暴露给父组件的方法
+    setOpen: newVal => {
+      setOpen(newVal);
+    },
+  }));
+  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);
+      });
+  };
+
+  const handleCancel = () => {
+    console.log('Clicked cancel button');
+    setOpen(false);
+  };
+  const onChange = () => {
+    if (menusSwitch === 0) {
+      setMenusSwitch(1);
+      return false;
+    }
+    setMenusSwitch(0);
+    return false;
+  };
+  useEffect(() => {
+    console.log('open', open);
+  }, [open]);
+  return (
+    <>
+      {open && (
+        <Modal
+          title="添加分组"
+          visible={open}
+          onOk={handleOk}
+          confirmLoading={confirmLoading}
+          initialValues={{
+            menusSwitch: 0,
+          }}
+          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>
+          </Form>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default forwardRef(AddMenusModal);

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';
+import { debounce } from '@/utils/utils';
+
+const AddRepertoryModal = (props, ref) => {
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [openRepertory, setOpenRepertory] = useState(false);
+  const [form] = Form.useForm();
+  const [repertoryState, setRepertoryState] = useState('');
+  const [initialValues, setInitialValues] = useState({
+    productStock: 0,
+    maxStock: 0,
+    autoStock: false,
+  });
+
+  const { modifiedInventory, intactData, repertoryModel } = props;
+  const { type, idx, item } = repertoryModel;
+  useImperativeHandle(ref, () => ({
+    // changeVal 就是暴露给父组件的方法
+    setOpenRepertory: newVal => {
+      setOpenRepertory(newVal);
+    },
+  }));
+  // 自动补全
+  const onChangeAutoStock = e => {
+    form.setFieldsValue({
+      autoStock: e ? 1 : 0,
+    });
+  };
+  // 勾选库存设置
+  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 getFormValues = debounce(() => {
+    const values = form.getFieldsValue();
+  }, 400);
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    values.autoStock = values.autoStock ? 1 : 0;
+    // 回调库存
+    modifiedInventory(type, idx, values);
+    setConfirmLoading(true);
+    setTimeout(() => {
+      setOpenRepertory(false);
+      setConfirmLoading(false);
+    }, 1000);
+  };
+
+  const handleCancel = () => {
+    setOpenRepertory(false);
+  };
+  useEffect(() => {
+    if (item?.serviceItem) {
+      const { productStock = 1, autoStock = 0, maxStock = 2 } = item?.serviceItem;
+      const params = {
+        productStock,
+        autoStock: +autoStock === 1,
+        maxStock,
+      };
+      switch (type) {
+        case 'all': // 统一设置
+          form.setFieldsValue(params);
+          break;
+        case 'multi': // 多规格设置
+          form.setFieldsValue(params);
+          break;
+        case 'singular': // 单规格设置
+          // setInitialValues(params);
+          form.setFieldsValue(params);
+          break;
+        default:
+          break;
+      }
+    }
+  }, [openRepertory, item]);
+  return (
+    <>
+      {openRepertory && (
+        <Modal
+          title="修改库存"
+          visible={openRepertory}
+          onOk={handleOk}
+          confirmLoading={confirmLoading}
+          onCancel={handleCancel}
+        >
+          <Form form={form} initialValues={initialValues} onValuesChange={getFormValues}>
+            <Form.Item className={styles.itemInlineModal}>
+              <Form.Item
+                name="productStock"
+                label="剩余库存"
+                style={{
+                  display: 'flex',
+                  marginRight: '8px',
+                }}
+                rules={[{ required: true, message: '请填写剩余库存' }]}
+              >
+                <InputNumber
+                  min={0}
+                  style={{ width: 200, display: 'inline-block' }}
+                  placeholder="请输入"
+                />
+              </Form.Item>
+              <Form.Item style={{ width: 200, display: 'inline-block' }}>
+                <Radio.Group value={repertoryState} onChange={onChangeSetRepertory}>
+                  <Radio.Button value="0">清空</Radio.Button>
+                  <Radio.Button value="1">最大</Radio.Button>
+                </Radio.Group>
+              </Form.Item>
+            </Form.Item>
+            <Form.Item
+              name="maxStock"
+              label="最大库存"
+              rules={[{ required: true, message: '请填写最大库存' }]}
+            >
+              <InputNumber
+                min={0}
+                style={{ width: 200 }}
+                placeholder="请输入"
+                onChange={onChangeMaxStock}
+              />
+            </Form.Item>
+            <Form.Item name="autoStock" label="自动补足" valuePropName="checked">
+              <Switch
+                checkedChildren="开启"
+                unCheckedChildren="关闭"
+                // defaultChecked
+                onChange={onChangeAutoStock}
+              />
+            </Form.Item>
+          </Form>
+          <div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default forwardRef(AddRepertoryModal);

src/pages/ServiceGoods/components/AddSellTimeModal.jsx

+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+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 { saleDates, setSaleDates } = props;
+  useImperativeHandle(ref, () => ({
+    // changeVal 就是暴露给父组件的方法
+    setOpen: newVal => {
+      setOpen(newVal);
+    },
+  }));
+  const handleOk = () => {
+    formProject.validateFields().then(async values => {
+      console.log('valuse', values);
+      setConfirmLoading(true);
+      setSaleDates(values);
+      setTimeout(() => {
+        setOpen(false);
+        setConfirmLoading(false);
+      }, 1000);
+    });
+  };
+
+  const handleCancel = () => {
+    console.log('Clicked cancel button');
+    setOpen(false);
+  };
+  useEffect(() => {
+    console.log('open', open);
+    console.log('sss/', formProject);
+    // formProject.setFieldsValue({ saleTimes: [['12:00', '13:00']] })
+  }, [open]);
+  const onChange = () => {};
+  return (
+    <>
+      {open && (
+        <Modal
+          title="售卖时段"
+          visible={open}
+          onOk={handleOk}
+          confirmLoading={confirmLoading}
+          onCancel={handleCancel}
+          width={1050}
+        >
+          <Form
+            name="sellTime"
+            form={formProject}
+            // {...formItemLayout}
+            // onFinish={onFinish}
+            initialValues={saleDates}
+          >
+            <Form.Item name="unavailableDate" 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 label="售卖时段">
+              <Form.List
+                name="saleTimes"
+                initialValue={[[]]}
+                // rules={[
+                //   {
+                //     validator: async (_, times) => {
+                //       if (!times || times.length < 2) {
+                //         return Promise.reject(new Error('At least 2 passengers'));
+                //       }
+                //     },
+                //   },
+                // ]}
+              >
+                {(fields, { add, remove }) => (
+                  <>
+                    {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,
+                              message: '请输入售卖时间',
+                            },
+                          ]}
+                        >
+                          <RangePicker picker="time" format={format} 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

-import React, { useState, useContext, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Cascader, Form, Input, Select, Popover, Button, Checkbox } from 'antd';
+import React, {
+  useState,
+  useContext,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+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';
+import { apiShopIds, apiQueryShopList } from '../service';
 
 const CreateSelectOption = optionList =>
   optionList.map(brandItem => (
@@ -23,13 +33,16 @@ const FormInformationBasic = forwardRef((props, ref) => {
     categoryList,
     virtualCategoryList,
     brandList,
-    shopList,
     afterAddressList,
     specListData,
   } = props;
   const [form] = Form.useForm();
   const [noreBrandList, setNoreBrandList] = useState([]);
   const customer = useContext(ServiceContext);
+  const childAddMenusModalRef = useRef(null);
+  const [takeawayImageList, setTakeawayImageList] = useState([]);
+  const [shopIds, setShopIds] = useState([]);
+  const [shopList, setShopList] = useState([]);
 
   const onCheck = async () => {
     try {
@@ -53,12 +66,61 @@ const FormInformationBasic = forwardRef((props, ref) => {
       return null;
     }
   };
-
+  // 自定义加入菜单
+  const showModal = () => {
+    childAddMenusModalRef.current.setOpen(true);
+  };
+  // 自定义菜单下拉
+  const dropdownRender = menus => (
+    <div>
+      {menus}
+      <Divider
+        style={{
+          margin: 0,
+        }}
+      />
+      <div
+        style={{
+          padding: 8,
+          background: '#1890ff',
+          color: '#fff',
+          textAlign: 'center',
+        }}
+        onClick={showModal}
+      >
+        添加自定义分组
+      </div>
+    </div>
+  );
+  const onTakeawayImageList = imgList => {
+    setTakeawayImageList(imgList);
+    form.setFieldsValue({
+      commonImageList: imgList,
+    });
+  };
   const getFormValues = debounce(() => {
     const values = form.getFieldsValue();
     props.onValuesChange({ infoMation: values });
   }, 400);
-
+  // 查询shopIds
+  const queryShopIds = async () => {
+    if (!shopIds.length) {
+      const result = await apiShopIds();
+      setShopIds(result.data || []);
+    }
+  };
+  // 查询分组列表
+  const queryShopList = async params => {
+    if (!shopList.length) {
+      const result = await apiQueryShopList(params);
+      setShopList(result.data || []);
+    }
+  };
+  const onChangeShopId = async e => {
+    if (e) {
+      queryShopList({ shopId: e }); // 分组列表
+    }
+  };
   useImperativeHandle(ref, () => ({
     onCheck,
     reset: form.resetFields,
@@ -74,6 +136,12 @@ const FormInformationBasic = forwardRef((props, ref) => {
     form.setFieldsValue(editData);
   }, [customer.isEdit, editData]);
 
+  useEffect(() => {
+    console.log('!customer.isTakeawayService', customer);
+    console.log('newCategoryList[customer.productType]', newCategoryList[customer.productType]);
+    console.log('newCategoryList[customer.productType]', shopList);
+    queryShopIds()
+  }, [customer.productType]);
   return (
     <Form
       {...formItemLayout}
@@ -88,13 +156,61 @@ const FormInformationBasic = forwardRef((props, ref) => {
       scrollToFirstError
       onValuesChange={getFormValues}
     >
+      <Popover content={form.getFieldValue('name')} trigger="hover">
+        <Form.Item
+          key="name"
+          name="name"
+          label="商品名称"
+          rules={[
+            { required: true, min: 2, message: '请输入最少两个字符的商品名称', whitespace: true },
+          ]}
+        >
+          <Input placeholder="请输入商品名称" disabled={customer.isDisabled} />
+        </Form.Item>
+      </Popover>
+      {customer.isTakeawayService && (
+        <Form.Item
+          name="productRefShopId"
+          key="productRefShopId"
+          label="所属门店"
+          rules={[{ required: true, message: '请选择所属门店' }]}
+        >
+          <Select
+            fieldNames={{ label: 'name', value: 'id' }}
+            placeholder="请选择所属门店"
+            options={shopIds}
+            onChange={onChangeShopId}
+          ></Select>
+        </Form.Item>
+      )}
+      {/* 菜单分组 */}
+      {customer.isTakeawayService && (
+        <Form.Item
+          name="storageRackIds"
+          label="菜单分组"
+          rules={[{ type: 'array', required: true, message: '请输入菜单分组' }]}
+        >
+          <Cascader
+            placeholder="请选择菜单分组"
+            disabled={customer.isEdit && customer.isNormal}
+            showSearch={{ filter: filterCategoryOptions }}
+            fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+            onChange={props.onCategoryChange}
+            options={shopList}
+            dropdownRender={dropdownRender}
+          />
+        </Form.Item>
+      )}
+      {/* 新增菜单分组弹框 */}
+      <AddMenusModal ref={childAddMenusModalRef} queryShopList={queryShopList} />
       <Form.Item
         name="categoryId"
+        key="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' }}
@@ -102,11 +218,35 @@ const FormInformationBasic = forwardRef((props, ref) => {
           options={newCategoryList[customer.productType]}
         />
       </Form.Item>
-      {!customer.isCard && (
+      {/* 外卖-商品图片 */}
+      {customer.isTakeawayService && (
+        <Form.Item
+          name="commonImageList"
+          label="商品图片"
+          extra="支持.jpg/png格式图片，建议单张比例1:1，大小200kb左右，最多可以上传5张"
+          rules={[
+            {
+              required: true,
+              type: 'array',
+              message: '请上传商品图片',
+            },
+          ]}
+        >
+          <UploadImage
+            name="takeawayImageList"
+            limit={5}
+            disabled={customer.isDisabled}
+            pictures={takeawayImageList}
+            setPictureList={list => onTakeawayImageList(list)}
+          />
+        </Form.Item>
+      )}
+
+      {!customer.isTakeawayService && !customer.isCard && (
         <Form.Item
           name="brandId"
           label="商品品牌"
-          rules={[{ required: true, message: '请选择商品品牌!' }]}
+          rules={[{ required: true, message: '请选择商品品牌' }]}
           extra="若需新增品牌请联系业务员"
         >
           <Select
@@ -121,19 +261,8 @@ const FormInformationBasic = forwardRef((props, ref) => {
           </Select>
         </Form.Item>
       )}
-      <Popover content={form.getFieldValue('name')} trigger="hover">
-        <Form.Item
-          key="name"
-          name="name"
-          label="商品名称"
-          rules={[
-            { required: true, min: 2, message: '请输入最少两个字符的商品名称!', whitespace: true },
-          ]}
-        >
-          <Input placeholder="请输入商品名称" disabled={customer.isDisabled} />
-        </Form.Item>
-      </Popover>
-      {!customer.isCard && (
+
+      {!customer.isTakeawayService && !customer.isCard && (
         <Form.Item
           name="character"
           label="商品卖点"
@@ -146,7 +275,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
         </Form.Item>
       )}
 
-      {!customer.isCard && (
+      {!customer.isTakeawayService && !customer.isCard && (
         <Form.Item name="afterAddressId" label="售后地址">
           <Select showSearch placeholder="请选择售后地址" filterOption={fileterBrandOptions}>
             {(afterAddressList || []).map(item => (
@@ -158,7 +287,8 @@ const FormInformationBasic = forwardRef((props, ref) => {
         </Form.Item>
       )}
 
-      {!customer.isCard &&
+      {!customer.isTakeawayService &&
+        !customer.isCard &&
         specListData.map((item, index) => (
           <Form.Item name={item.specId} key={item.specId} label={item.specName}>
             <Checkbox.Group options={item.specValues} />
@@ -180,9 +310,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/components/TaskTypeSelect.jsx

@@ -5,7 +5,11 @@ import commonStyle from '../common.less';
 
 export const TaskTypeSelect = props => {
   const customer = useContext(ServiceContext);
-  const typeConfig = TaskList(customer.canAddService, customer.canAddNormal);
+  const typeConfig = TaskList(
+    customer.canAddService,
+    customer.canAddNormal,
+    customer.canTakeawayService,
+  );
   const selectTabs = task => {
     if (!customer.isEdit) {
       props.onChange(task);
@@ -25,6 +29,7 @@ export const TaskTypeSelect = props => {
           >
             <dd className="prodcut-name">{task.name}</dd>
             <dd className="prodcut-desc">({task.desc})</dd>
+            <dd className="prodcut-desc">({task.type})</dd>
           </dl>
         );
       })}

src/pages/ServiceGoods/config.js

@@ -90,6 +90,38 @@ export const TaskList = (canAddService, canAddNormal) => [
       },
     },
   },
+  {
+    name: '外卖商品',
+    type: 5,
+    desc: '无需物流',
+    // hide: !canAddService,
+    imgConfig: {
+      commonImageList: {
+        title: '封面图片',
+        rule: true,
+        limit: 1,
+        renderExtra(leng) {
+          return `建议尺寸: ##宽##高 (${leng} / 1) 封面图第一张 `;
+        },
+      },
+      cardImageList: {
+        title: '商品图片',
+        rule: true,
+        limit: 11,
+        renderExtra(leng) {
+          return `建议尺寸: ##宽##高,sku商品轮播图(${leng} / 11)`;
+        },
+      },
+      detailImageList: {
+        title: '商品详情图',
+        // rule: true,
+        limit: 30,
+        renderExtra() {
+          return '最多上传30张';
+        },
+      },
+    },
+  },
 ];
 
 export const WeeksList = [
@@ -291,3 +323,18 @@ export const StaticColumns = customer => [
     disabeldRender: () => customer.isDisabled,
   },
 ];
+export const ENUM_REPERTORY = [{ label: '单规格', value: '1' }, { label: '多规格', value: '2' }];
+export const ENUM_SET_REPERTORY = [
+  { label: '清零', value: '0' },
+  { label: '最大', value: '1' },
+];
+export const ENUM_WEEK = [
+  { value: 1, label: '周一' },
+  { value: 2, label: '周二' },
+  { value: 3, label: '周三' },
+  { value: 4, label: '周四' },
+  { value: 5, label: '周五' },
+  { value: 6, label: '周六' },
+  { value: 7, label: '周日' },
+  { value: 8, label: '法定假日' },
+];

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,
@@ -21,6 +22,7 @@ import {
   getByProductType,
   apiCreateDraft,
   apiEditDraft,
+  apiAddTakeawayProducts,
 } from './service';
 import { isUrl, filterSendData, clearCurrent, onAutoSaveValue, localAutoSaveKey } from './utils';
 import { ServiceContext } from './context';
@@ -36,6 +38,8 @@ const ServiceGoods = options => {
   const { SourceData, categoryList, virtualCategoryList, specListData, permissions } = options;
   const canAddService = permissions[GOOD_MANAGE.ADD_SERVICE_GOODS];
   const canAddNormal = permissions[GOOD_MANAGE.ADD_NORMAL_GOODS];
+  // const canTakeawayService = permissions[GOOD_MANAGE.ADD_TAKEAWAY_GOODS];
+  // const canTakeawayService = true
 
   const basicRef = useRef(null);
   const stockRef = useRef(null);
@@ -43,6 +47,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
@@ -57,6 +62,7 @@ const ServiceGoods = options => {
   const [specList, setSpecList] = useState([]); // 规格列表
   const [editData, setEditData] = useState({}); // 编辑保存数据
   const [newCategoryList, setNewCategoryList] = useState({});
+
   const [visibleCacheEdit, setVisibleCacheEdit] = useState(false); // 显示有缓存未保存提示
   const [checkFormList] = useState([
     basicRef,
@@ -65,6 +71,7 @@ const ServiceGoods = options => {
     settingRef,
     settleOtrRef,
     picturesRef,
+    takeawayRef,
   ]);
 
   const [specKeyList, setSpecKeyList] = useState([]); // 记录一级规格key字段
@@ -72,6 +79,7 @@ const ServiceGoods = options => {
   const resetForm = () => clearCurrent(checkFormList).forEach(({ current }) => current.reset());
 
   const onValuesChange = e => {
+    console.log('e======', e, !isEdit, visibleCacheEdit);
     if (!isEdit) {
       if (visibleCacheEdit) {
         setVisibleCacheEdit(false);
@@ -146,7 +154,6 @@ const ServiceGoods = options => {
       setSpecList(result.data || []);
     }
   };
-
   const getAfterSalesAddrsPage = async () => {
     if (!afterAddressList.length) {
       const result = await afterSalesAddrsPage();
@@ -196,10 +203,18 @@ const ServiceGoods = options => {
     console.log('resuslt :>> ', resuslt);
     if (!resuslt.includes(null)) {
       const params = resuslt.reduce((origin, item) => {
+        console.log('origin', origin, item);
         const { temp, ...other } = item;
         origin[temp] = other;
         return origin;
       }, {});
+      // 外卖商品创建
+      if (+productType === 5) {
+        console.log('parmas', params);
+        const res = await sendMerchantProductHttpRequest(params?.takeawayItem?.intactData);
+
+        return false;
+      }
       const sendData = filterSendData(productType, params);
       if (isEdit) {
         sendData.id = pageId;
@@ -396,14 +411,16 @@ const ServiceGoods = options => {
       },
     });
   };
-
+  console.log('productType', productType);
   const providerValue = {
     pageId,
     isEdit,
     productType,
     canAddService, // 是否可以添加服务商品(电子卡券)
     canAddNormal, // 是否可以添加实物商品
+    // canTakeawayService, // 是否可以添加外卖商品
     isCard: productType === 4,
+    isTakeawayService: productType === 5,
     // 0, "商品删除" 1, "新建" 2, "提交审核" 3, "待审核" 4, "驳回" 5, "未上架" 6, "已上架" 7, "已下架"
     isNormal: SourceData.state && SourceData.state !== 4, // 商品不是驳回状态
     // 当商品进行编辑 & 类型不为电子卡券 & 商品状态不为驳回 禁用当前功能
@@ -460,6 +477,7 @@ const ServiceGoods = options => {
               specListData={specListData}
               onCategoryChange={onCategoryChange}
               onValuesChange={onValuesChange}
+              // queryShopList={queryShopList}
             />
 
             {[1, 2].includes(productType) && [
@@ -472,32 +490,43 @@ const ServiceGoods = options => {
                 onValuesChange={onValuesChange}
               />,
             ]}
-
-            <Title title="价格与库存" />
-            <FormPriceOrStock
-              ref={stockRef}
-              specList={specList}
-              onSpecChange={onSpecCommonImgEvent}
-              editData={editData.infoSpecData}
-              skuList={editData.skuList}
-              onValuesChange={onValuesChange}
-            />
-            <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}
+                />
+              </>
             )}
 
-            <FormRuleVPictures
-              ref={picturesRef}
-              specKeyItem={specKeyList}
-              editData={editData.infoImageData}
-              onValuesChange={onValuesChange}
-            />
             {productType === 4 && (
               <FormSettlementOthers
                 ref={settleOtrRef}
@@ -505,6 +534,17 @@ const ServiceGoods = options => {
                 onValuesChange={onValuesChange}
               />
             )}
+            {productType === 5 && (
+              <>
+                <FormTakeaway
+                  ref={takeawayRef}
+                  editData={editData.takeawayItem}
+                  infoMation={editData.infoMation}
+                  supplierIdList={supplierIdList}
+                  onValuesChange={onValuesChange}
+                />
+              </>
+            )}
           </ServiceContext.Provider>
         </WrapperContainer>
       </Spin>

src/pages/ServiceGoods/service.js

@@ -117,3 +117,53 @@ export const apiEditDraft = data =>
     prefix: goodsApi,
     data,
   });
+
+// 菜单分组 http://yapi.quantgroups.com/project/389/interface/api/64044
+export const apiQueryShopList = data =>
+  request.post('/api/merchants/products/storageRack/listByShopIdAndStorageRackIds', {
+    prefix: goodsApi,
+    data: stringify(_.omitBy(data, v => !v)),
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  });
+// 新建分组
+export const apiCreateShop = data =>
+  request.post('/api/merchants/products/storageRack/create', {
+    prefix: goodsApi,
+    data,
+  });
+// 新增外卖商品  http://yapi.quantgroups.com/project/389/interface/api/57324
+export const apiAddTakeawayProducts = 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('/api/merchants/products/tag/getAll', {
+    prefix: goodsApi,
+    data,
+  });
+// 单位列表 http://yapi.quantgroups.com/project/389/interface/api/57179
+export const apiUnits = data =>
+  request.get('/api/merchants/products/units', {
+    prefix: goodsApi,
+    data,
+  });
+// 获取shopids http://yapi.quantgroups.com/project/389/interface/api/38056
+export const apiShopIds = data =>
+  request.get('/api/merchants/shops/getBySupplierId?state=1', {
+    prefix: goodsApi,
+    data,
+  });
+
+// 获取店铺详情 http://yapi.quantgroups.com/project/389/interface/api/57589
+export const apiGetShopDetail = data =>
+  request.post('/product/api/merchant/detail', {
+    prefix: goodsApi,
+    data: stringify(_.omitBy(data, v => !v)),
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  });