feat: 添加套餐功能

src/pages/GoodsManage/service.js

@@ -230,3 +230,12 @@ export const apiQueryLastChangeLog = skuId =>
   request.get(`/api/kdsp/sku/last/stockChange/record?skuId=${skuId}`, {
     prefix: goodsApi,
   });
+
+// 商品上下架
+export const apiChangeStateGoods = async params => {
+  const data = await request.post('/product/api/merchant/pushedOrOffline/batch', {
+    data: params,
+    prefix: goodsApi,
+  });
+  return data;
+};

src/pages/GoodsManage/staticdata.js

 import React from 'react';
-import { Button, Badge } from 'antd';
+import { Button, Badge, Switch } from 'antd';
 import styles from './style.less';
 import { resetTime } from '../../utils/utils';
+import { apiChangeStateGoods } from './service';
 
 export const productType = [
   {
@@ -31,6 +32,14 @@ export const productType = [
 ];
 
 export function column() {
+  const onChangeState = async ({ skuId, state }) => {
+    const res = await apiChangeStateGoods({
+      ids: skuId,
+      productState: +state === 6 ? 7 : 6, // 6：上架，7:下架
+    });
+    this.handleSearch();
+  };
+
   return [
     {
       title: 'SKU编码',
@@ -132,6 +141,29 @@ export function column() {
       width: 200,
       align: 'center',
     },
+    {
+      title: '上下架状态',
+      dataIndex: 'stateDesc', // 5:未上架 ,6 :上架,7:下架
+      width: 200,
+      align: 'center',
+      render: (_, row) => (
+        <div>
+          {row.state >= 5 ? (
+            <>
+              <Switch
+                checkedChildren="已上架"
+                checked={row.state === 6}
+                unCheckedChildren="已下架"
+                onClick={() => onChangeState(row)}
+                defaultChecked
+              />
+            </>
+          ) : (
+            '-'
+          )}
+        </div>
+      ),
+    },
     {
       title: '审核状态',
       dataIndex: 'stateDesc',

src/pages/ServiceGoods/common.less

@@ -112,3 +112,55 @@
   font-size: 16px;
   cursor: pointer;
 }
+
+.formPackageBox {
+  margin-bottom: 20px;
+  :global {
+    .ant-col {
+      text-align: center;
+    }
+    .ant-btn {
+      margin-left: 0;
+    }
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
+}
+.subTitle {
+  padding: 10px 0;
+  font-weight: bold;
+  font-size: 14px;
+  :global {
+    .ant-row {
+      display: flex;
+      align-items: center;
+    }
+    .ant-col {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+.groupHeader {
+  font-weight: bold;
+}
+.subTitleTxt {
+  justify-content: left !important;
+  padding-left: 45px !important;
+}
+.groupMargin {
+  margin-bottom: 20px;
+}
+.caiRow {
+  margin: 0;
+  :global {
+    .ant-row {
+      margin-bottom: 10px;
+    }
+    .ant-input {
+      text-align: center;
+    }
+  }
+}

src/pages/ServiceGoods/components/FormPackage.jsx

+import React, { useState, forwardRef, useEffect, useImperativeHandle } from 'react';
+import { Form, Button, Row, Col, Input, Select, Modal, notification } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import styles from '../common.less';
+import { isIntegerNotZero, isCheckNumberPrice } from '@/utils/validator';
+import UUID from '@/utils/uuid';
+
+const { Option } = Select;
+
+const getCaiJson = gname => ({
+  uuid: UUID.createUUID(),
+  gName: gname,
+  quantity: '',
+  dishName: '',
+  unit: '份',
+  price: '',
+  skuId: '',
+});
+
+const FormCai = forwardRef((props, ref) => {
+  const { gitem, groupName, groupkey, packageIndex } = props;
+
+  const onDel = (callback, name, key) => {
+    callback(name);
+    props.onDelCai(packageIndex, groupkey, key);
+  };
+
+  const onAdd = (callback, key) => {
+    if (props.onAddCai(packageIndex, groupkey)) {
+      callback(getCaiJson(groupName));
+    }
+  };
+
+  return (
+    <Form.List name={gitem}>
+      {(items, { add, remove }) => (
+        <>
+          {items.map(({ key, name }, caiIndex) => (
+            <Row gutter={24} key={`cai_${key}`} className={styles.caiRow}>
+              <Col span={5}>
+                <Form.Item name={[name, 'gName']}>
+                  <Input readOnly hidden />
+                  <span>{groupName}</span>
+                </Form.Item>
+              </Col>
+              <Col span={3}>
+                <Form.Item
+                  name={[name, 'quantity']}
+                  rules={[
+                    { required: true, message: '请输入数量.' },
+                    { validator: isIntegerNotZero, message: '请输入正确的数量' },
+                  ]}
+                >
+                  <Input maxLength={10} />
+                </Form.Item>
+              </Col>
+              <Col span={4}>
+                <Form.Item
+                  name={[name, 'dishName']}
+                  rules={[{ required: true, message: '请输入菜名.' }]}
+                >
+                  <Input maxLength={30} />
+                </Form.Item>
+              </Col>
+              <Col span={2}>
+                <Form.Item
+                  mame={[name, 'unit']}
+                  rules={[{ required: true, message: '请选择单位' }]}
+                >
+                  <Select defaultValue="份">
+                    <Option value="份">份</Option>
+                    <Option value="个">个</Option>
+                    <Option value="瓶">瓶</Option>
+                    <Option value="杯">杯</Option>
+                    <Option value="串">串</Option>
+                    <Option value="例">例</Option>
+                  </Select>
+                </Form.Item>
+              </Col>
+              <Col span={4}>
+                <Form.Item
+                  name={[name, 'price']}
+                  rules={[
+                    { required: true, message: '请输入价格.' },
+                    { validator: isCheckNumberPrice, message: '请输入正确的价格' },
+                  ]}
+                >
+                  <Input maxLength={10} />
+                </Form.Item>
+              </Col>
+              <Col span={3}>
+                <Button type="link" onClick={() => onDel(remove, name, key)}>
+                  删除
+                </Button>
+              </Col>
+              <Col span={3}>
+                {caiIndex === 0 && (
+                  <Button type="primary" icon={<PlusOutlined />} onClick={() => onAdd(add, key)}>
+                    添加
+                  </Button>
+                )}
+              </Col>
+            </Row>
+          ))}
+        </>
+      )}
+    </Form.List>
+  );
+});
+
+const FormGroup = forwardRef((props, ref) => {
+  const { item, form, packageIndex, onAddCai, onDelCai } = props;
+  const formInfo = form.getFieldsValue();
+  return (
+    <Form.List name={item}>
+      {(items, { add, remove }) => (
+        <>
+          {items.map(({ key, name }) => (
+            <div className={styles.groupMargin} key={`group_${key}`}>
+              <Row gutter={24} className={styles.groupHeader}>
+                <Col span={5}>组名</Col>
+                <Col span={3}>数量</Col>
+                <Col span={4}>菜名</Col>
+                <Col span={2}>单位</Col>
+                <Col span={4}>价格</Col>
+                <Col span={3}>操作</Col>
+                <Col span={3}>
+                  <div>
+                    <Form.Item name={[name, 'groupName']}>
+                      <Input hidden readOnly />
+                    </Form.Item>
+                  </div>
+                </Col>
+              </Row>
+              <FormCai
+                gitem={[name, 'dishes']}
+                packageIndex={packageIndex}
+                groupkey={key}
+                onAddCai={onAddCai}
+                onDelCai={onDelCai}
+                groupName={formInfo.lists[packageIndex].children[key].groupName}
+              />
+            </div>
+          ))}
+        </>
+      )}
+    </Form.List>
+  );
+});
+
+const FormPackage = forwardRef((props, ref) => {
+  const [visibleGroup, setVisibleGroup] = useState(false);
+  const [groupName, setGroupName] = useState('');
+  const [groupIndex, setGroupIndex] = useState(0);
+  const [list, setList] = useState([]);
+  const [form] = Form.useForm();
+
+  const { validateFields } = form;
+
+  const onCheck = async () => {
+    console.log('form :>> ', form);
+    try {
+      const values = await validateFields();
+      const arr = [];
+      console.log('package values :>> ', values);
+      if (values && values.lists) {
+        values.lists.forEach(item => {
+          arr.push({
+            setMealContent: [...item.children],
+          });
+        });
+      }
+      return arr;
+    } catch {
+      return null;
+    }
+  };
+
+  // 创建分组
+  const onCreateGroup = () => {
+    const str = groupName && groupName.trim();
+    if (str) {
+      const arr = [...list];
+      arr[groupIndex].children.push({
+        groupName: str,
+        uuid: UUID.createUUID(),
+        dishes: [getCaiJson(str)],
+      });
+      setList(arr);
+      form.setFieldsValue({
+        lists: arr,
+      });
+      setVisibleGroup(!1);
+    }
+  };
+
+  // 显示创建分组弹窗
+  const onCreate = index => {
+    setVisibleGroup(!0);
+    setGroupIndex(index);
+  };
+
+  // 新增菜品
+  const onAddCai = (i, j) => {
+    const arr = [...list];
+    const len = arr[i].children[j].dishes.length;
+    if (len < 50) {
+      arr[i].children[j].dishes.push(getCaiJson(arr[i].children[j].groupName));
+      setList(arr);
+      return true;
+    }
+    notification.error({
+      message: '最多添加50个菜品',
+    });
+    return false;
+  };
+  // 删除菜品
+  const onDelCai = (i, j, k) => {
+    const arr = [...list];
+    const arrList = props.form.getFieldsValue();
+    const len = arr[i].children[j].dishes.length;
+    if (len === 1) {
+      arr[i].children.splice(j, 1);
+    } else {
+      arr[i].children[j].dishes.splice(k, 1);
+    }
+    setList(arr);
+  };
+
+  useEffect(() => {
+    console.log('props.initData :>> ', props.initData);
+    if (props.initData && props.initData.length) {
+      if (props.initData.length !== list.length) {
+        const arr = [];
+        props.initData.forEach((item, i) => {
+          arr.push({
+            uuid: i,
+            specName: `套餐${i + 1}`,
+            children: [],
+          });
+        });
+        setList(arr);
+        form.setFieldsValue({
+          lists: arr,
+        });
+      }
+    } else {
+      setList([]);
+      form.setFieldsValue({
+        list: [],
+      });
+    }
+  }, [props.initData]);
+
+  useImperativeHandle(ref, () => ({
+    onCheck,
+  }));
+
+  return (
+    <div className={styles.formPackageBox}>
+      <Form style={{ marginBottom: 10 }} form={form}>
+        <Form.List name="lists">
+          {(fields, { add, remove }) => (
+            <>
+              {fields.map(({ name, key }, packageIndex) => (
+                <div key={key}>
+                  <div className={styles.subTitle}>
+                    <Row gutter={24}>
+                      <Col className={styles.subTitleTxt}>
+                        <Form.Item key={`specName_${key}`} name={[name, 'specName']}>
+                          <Input readOnly hidden />
+                          <span>套餐{packageIndex + 1}</span>
+                        </Form.Item>
+                      </Col>
+                      <Col span={3}>
+                        <Button type="primary" size="small" onClick={() => onCreate(key)}>
+                          新建分组
+                        </Button>
+                      </Col>
+                    </Row>
+                  </div>
+                  <FormGroup
+                    item={[name, 'children']}
+                    onAddCai={onAddCai}
+                    onDelCai={onDelCai}
+                    packageIndex={packageIndex}
+                    form={form}
+                  />
+                </div>
+              ))}
+            </>
+          )}
+        </Form.List>
+      </Form>
+      <Modal
+        title="新建分组"
+        visible={visibleGroup}
+        destroyOnClose
+        onOk={onCreateGroup}
+        onCancel={() => setVisibleGroup(false)}
+      >
+        <Input
+          placeholder="请输入分组名称，最多10个字"
+          maxLength={10}
+          onChange={e => setGroupName(e.target.value)}
+        />
+      </Modal>
+    </div>
+  );
+});
+
+export default FormPackage;

src/pages/ServiceGoods/components/FormPriceOrStock.jsx

@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import { formItemLayout, StaticColumns } from '../config';
 import EditFormTable from './EditFormTable';
+import FormPackage from './FormPackage';
 import {
   createProductData,
   cleanArray,
@@ -20,7 +21,7 @@ import {
 } from '../utils';
 
 import { ServiceContext } from '../context';
-import { SelectTemplate } from './CommonTemplate';
+import { SelectTemplate, Title } from './CommonTemplate';
 
 const initSpecReced = () => ({
   firstSpec: '',
@@ -214,6 +215,7 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu
 const FormPriceOrStock = forwardRef((props, ref) => {
   const { specList, editData, skuList = [], onSpecChange } = props;
   const editRef = useRef(null);
+  const packageRef = useRef(null);
   const customer = useContext(ServiceContext);
   const [form] = Form.useForm();
   const [specInitValue, setSpecInitValue] = useState(initSpecReced());
@@ -224,10 +226,13 @@ const FormPriceOrStock = forwardRef((props, ref) => {
 
   const onCheck = async () => {
     try {
+      console.log('11111 :>> ', 11111);
+      const setMealContent = await packageRef.current.onCheck();
+      console.log('222 :>> ', 222);
       const values = await form.validateFields();
       const items = await editRef.current.onCheck();
       if (items) {
-        return { ...values, items, temp: 'infoSpecData' };
+        return { ...values, items, setMealContent, temp: 'infoSpecData' };
       }
       notification.open({
         message: '提示',
@@ -407,6 +412,12 @@ const FormPriceOrStock = forwardRef((props, ref) => {
         defaultColumns={defaultColumns}
         initData={tableData}
       />
+      {customer.isCard && (
+        <>
+          <Title title="套餐内容" />
+          <FormPackage ref={packageRef} initData={tableData} />
+        </>
+      )}
     </>
   );
 });

src/pages/ServiceGoods/components/FormRuleSetting.jsx

 import { Form, Input, Select, Checkbox, DatePicker } from 'antd';
 import React, { useEffect, forwardRef, useImperativeHandle, useContext } from 'react';
+import moment from 'moment';
 import { WeeksList, formItemLayout } from '../config';
 import { ServiceContext } from '../context';
 import { formatTime } from '../../../utils/utils';
@@ -47,6 +48,9 @@ const FormRuleSetting = forwardRef((props, ref) => {
     }
   };
 
+  const nowDateTime = moment(moment().format('YYYY-MM-DD 00:00:00'));
+  const nowDateTimeEnd = moment(moment().format('YYYY-MM-DD 23:59:59'));
+
   useImperativeHandle(ref, () => ({
     onCheck,
     reset: form.resetFields,
@@ -73,15 +77,26 @@ const FormRuleSetting = forwardRef((props, ref) => {
         scrollToFirstError
       >
         <Form.Item name="purchaseTime" label="购买时间" {...rangeConfig}>
-          <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
+          <RangePicker
+            showTime={{
+              defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+            }}
+            format="YYYY-MM-DD HH:mm:ss"
+            defaultPickerValue={[nowDateTime, nowDateTimeEnd]}
+          />
         </Form.Item>
         <Form.Item name="useTime" label="有效期" {...rangeConfig}>
-          <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
+          <RangePicker
+            showTime={{
+              defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+            }}
+            format="YYYY-MM-DD HH:mm:ss"
+          />
         </Form.Item>
         <Form.Item
           name="shopIds"
           label="适用门店"
-          rules={[{ required: true, message: '请选择适用门店!', type: 'array' }]}
+          // rules={[{ required: true, message: '请选择适用门店!', type: 'array' }]}
         >
           <Select mode="multiple" placeholder="请选择适用门店">
             {(supplierIdList || []).map(item => (

src/pages/ServiceGoods/config.js

@@ -27,7 +27,7 @@ export const TaskList = [
       },
       detailImageList: {
         title: '详情图',
-        rule: true,
+        // rule: true,
         limit: null,
         renderExtra: () => '（图片最大上传2M）',
       },
@@ -109,7 +109,7 @@ export const TaskList = [
       },
       detailImageList: {
         title: '商品详情图',
-        rule: true,
+        // rule: true,
         limit: 30,
         renderExtra() {
           return '最多上传30张';

src/pages/ServiceGoods/index.jsx

@@ -149,7 +149,7 @@ const ServiceGoods = options => {
       if (isEdit) {
         sendData.id = pageId;
       }
-      sendMerchantProductHttpRequest(sendData);
+      // sendMerchantProductHttpRequest(sendData);
     }
   };
 
@@ -241,7 +241,7 @@ const ServiceGoods = options => {
       title={isEdit ? '修改商品' : '新增商品'}
       visible={options.visible}
       onCancel={() => handleCancel()}
-      width={1000}
+      width={1050}
       maskClosable={false}
       keyboard={false}
       footer={[

src/pages/ServiceGoods/utils.js

@@ -78,7 +78,8 @@ export const batchTableSourceData = ({ batchItem, tableData, bacthSecon, bacthFi
 const filterItems = (type, props) => {
   const { infoSpecData, serviceItem, infoImageData, infoMation, settlementItem } = props;
   const { imageList = {}, commonImageList, cardImageList } = infoImageData;
-  return infoSpecData.items.map(item => {
+  const { setMealContent } = infoSpecData;
+  return infoSpecData.items.map((item, i) => {
     if (type === 4) {
       // 如果为服务类商品，默认取cardImageList，cardImageList为必选项目
       item.imageList = [...commonImageList, ...cardImageList];
@@ -89,12 +90,16 @@ const filterItems = (type, props) => {
     }
     item.firstSpecId = infoSpecData.firstSpecId;
     item.secondSpecId = infoSpecData.secondSpecId || null;
+    console.log('setMealContent :>> ', setMealContent);
     if (type === 4) {
       item.serviceItem = {
         ...serviceItem,
         ...settlementItem,
         description: infoMation.description || '',
       };
+      if (setMealContent && setMealContent[i] && setMealContent[i].setMealContent) {
+        item.serviceItem.setMealContent = setMealContent[i].setMealContent;
+      }
     }
     return item;
   });

src/utils/validator.js

@@ -157,7 +157,7 @@ export function isInteger(rule, value, callback) {
 // 验证是否大于0的整数
 export const isIntegerNotZero = (rule, value, callback) => {
   if (!value) {
-    callback(new Error('输入不可以为空'));
+    callback();
   }
   if (!Number(value)) {
     callback(new Error('请输入大于0的正整数'));
@@ -389,3 +389,16 @@ export function isCheckNumberLine(rule, value, callback) {
     }
   }
 }
+
+// 验证数字价格
+export function isCheckNumberPrice(rule, value, callback) {
+  if (!value) {
+    callback();
+  } else if (Number.isNaN(+value)) {
+    callback(new Error('请输入数字'));
+  } else if (+value < 0) {
+    callback(new Error('请输入大于0的数字'));
+  } else {
+    callback();
+  }
+}