feat: 更新外卖商品

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/components/AddMenusModal.jsx

+import React, { useState, useEffect, forwardRef } from 'react';
+import { Button, Modal } from 'antd';
+
+const AddMenusModal = props => {
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [modalText, setModalText] = useState('Content of the modal');
+  const { open, setOpen } = props;
+  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 && 222}
+      {open && (
+        <Modal
+          title="Title"
+          open={open}
+          onOk={handleOk}
+          confirmLoading={confirmLoading}
+          onCancel={handleCancel}
+        >
+          <p>{modalText}</p>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default forwardRef(AddMenusModal);

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 } from 'antd';
 import { formItemLayout } from '../config';
 import { ServiceContext } from '../context';
 import { debounce } from '@/utils/utils';
+import AddMenusModal from './AddMenusModal';
 
 const CreateSelectOption = optionList =>
   optionList.map(brandItem => (
@@ -30,7 +38,8 @@ const FormInformationBasic = forwardRef((props, ref) => {
   const [form] = Form.useForm();
   const [noreBrandList, setNoreBrandList] = useState([]);
   const customer = useContext(ServiceContext);
-
+  const childAddMenusModalRef = useRef(null);
+  const [open, setOpen] = useState(false);
   const onCheck = async () => {
     try {
       const values = await form.validateFields();
@@ -54,6 +63,32 @@ const FormInformationBasic = forwardRef((props, ref) => {
     }
   };
 
+  const showModal = () => {
+    setOpen(true);
+    console.log('3333', open);
+  };
+  // 自定义下拉
+  const dropdownRender = menus => (
+    <div>
+      {menus}
+      <Divider
+        style={{
+          margin: 0,
+        }}
+      />
+      <div
+        style={{
+          padding: 8,
+          background: '#1890ff',
+          color: '#fff',
+          textAlign: 'center',
+        }}
+        onClick={showModal}
+      >
+        添加自定义分组
+      </div>
+    </div>
+  );
   const getFormValues = debounce(() => {
     const values = form.getFieldsValue();
     props.onValuesChange({ infoMation: values });
@@ -74,6 +109,9 @@ const FormInformationBasic = forwardRef((props, ref) => {
     form.setFieldsValue(editData);
   }, [customer.isEdit, editData]);
 
+  useEffect(() => {
+    console.log('!customer.isTakeawayService', customer);
+  }, [customer.productType]);
   return (
     <Form
       {...formItemLayout}
@@ -88,6 +126,39 @@ 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="categoryId"
+          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={newCategoryList[customer.productType]}
+            dropdownRender={dropdownRender}
+          />
+        </Form.Item>
+      )}
+      {/* 新增菜单分组弹框 */}
+      <AddMenusModal open={open} ref={childAddMenusModalRef} />
       <Form.Item
         name="categoryId"
         label="商品类目"
@@ -102,7 +173,8 @@ const FormInformationBasic = forwardRef((props, ref) => {
           options={newCategoryList[customer.productType]}
         />
       </Form.Item>
-      {!customer.isCard && (
+
+      {!customer.isTakeawayService && !customer.isCard && (
         <Form.Item
           name="brandId"
           label="商品品牌"
@@ -121,19 +193,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 +207,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 +219,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} />

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 = [

src/pages/ServiceGoods/index.jsx

@@ -36,6 +36,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);
@@ -396,14 +398,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, // 商品不是驳回状态
     // 当商品进行编辑 & 类型不为电子卡券 & 商品状态不为驳回 禁用当前功能