Skip to content

M
merchant-manage-ui
Commit 139bafe6 authored by 陈万宝's avatar 陈万宝
Browse files
Options

feat: 新增份量表单

parent 16e5208e
Hide whitespace changes
Inline Side-by-side
Showing with 735 additions and 264 deletions
src/pages/ServiceGoods/common.less
View file @ 139bafe6
......@@ -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;
......@@ -188,33 +198,44 @@
}
.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-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;
}
}
.ant-form-item {
margin-bottom: 0;
}
}
}
.itemInline {
:global {
.ant-form-item-control-input-content {
display: flex;
display: flex;
}
.ant-form-item {
margin-bottom: 0;
margin-left: 40px;
}
}
}
.textStyle{
.itemInlineModal {
:global {
.ant-form-item-control-input-content {
display: flex;
}
.ant-form-item {
margin-bottom: 0;
}
}
}
.textStyle {
color: red;
}
.multiSpecification {
......@@ -233,19 +254,28 @@
.deal {
:global {
.ant-form-item-control-input-content {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.ant-form-item {
margin-bottom: 0;
}
}
}
.dealInput {
:global {
.ant-form-item-control-input-content {
.ant-input {
margin-bottom: 8px;
}
}
}
}
.nameWidth {
width: 300px;
}
.colRow {
display: flex;
flex: none;
max-width:none;
}
\ No newline at end of file
max-width: none;
}
src/pages/ServiceGoods/components/AddMenusModal.jsx
View file @ 139bafe6
import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
import { Button, Modal, Form, Switch, Input } from 'antd';
import { Button, Modal, Form, Switch, Input, Select } from 'antd';
import styles from '../common.less';
import { apiCreateShop } from '../service'
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 [menusSwitch, setMenusSwitch] = useState(0); // 分组开启状态
// const {
// queryShopList,
......@@ -20,27 +20,27 @@ const AddMenusModal = (props, ref) => {
}));
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);
});
.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 = () => {
......@@ -49,12 +49,12 @@ const AddMenusModal = (props, ref) => {
};
const onChange = () => {
if (menusSwitch === 0) {
setMenusSwitch(1)
return false
setMenusSwitch(1);
return false;
}
setMenusSwitch(0)
return false
}
setMenusSwitch(0);
return false;
};
useEffect(() => {
console.log('open', open);
}, [open]);
......@@ -72,14 +72,26 @@ const AddMenusModal = (props, ref) => {
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>
<Switch
defaultChecked={menusSwitch}
checkedChildren="开启"
unCheckedChildren="关闭"
onChange={onChange}
/>
<div className={styles.textStyle}>
选中后，顾客下单需至少选择1个 “下单必须分组” 商品
</div>
<div className={styles.textStyle}>每店仅可设置1个必点分组</div>
</Form.Item>
</Form>
</Modal>
)}
......
src/pages/ServiceGoods/components/AddRepertoryModal.jsx
View file @ 139bafe6
......@@ -47,7 +47,7 @@ const AddRepertoryModal = (props, ref) => {
onCancel={handleCancel}
>
<Form>
<Form.Item className={styles.itemInline}>
<Form.Item className={styles.itemInlineModal}>
<Form.Item
name="receptionVolume"
label="剩余库存"
......
src/pages/ServiceGoods/components/AddSellTimeModal.jsx
View file @ 139bafe6
......@@ -2,19 +2,19 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } f
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 {
// open,
// setOpen,
// } = props;
const { saleDates, setSaleDates } = props;
useImperativeHandle(ref, () => ({
// changeVal 就是暴露给父组件的方法
setOpen: newVal => {
......@@ -22,12 +22,15 @@ const AddSellTimeModal = (props, ref) => {
},
}));
const handleOk = () => {
setModalText('The modal will be closed after two seconds');
setConfirmLoading(true);
setTimeout(() => {
setOpen(false);
setConfirmLoading(false);
}, 2000);
formProject.validateFields().then(async values => {
console.log('valuse', values);
setConfirmLoading(true);
setSaleDates(values);
setTimeout(() => {
setOpen(false);
setConfirmLoading(false);
}, 1000);
});
};
const handleCancel = () => {
......@@ -36,6 +39,8 @@ const AddSellTimeModal = (props, ref) => {
};
useEffect(() => {
console.log('open', open);
console.log('sss/', formProject);
// formProject.setFieldsValue({ saleTimes: [['12:00', '13:00']] })
}, [open]);
const onChange = () => {};
return (
......@@ -50,16 +55,13 @@ const AddSellTimeModal = (props, ref) => {
width={1050}
>
<Form
name="validate_other"
name="sellTime"
form={formProject}
// {...formItemLayout}
// onFinish={onFinish}
initialValues={{
'input-number': 3,
'checkbox-group': ['A', 'B'],
rate: 3.5,
}}
initialValues={saleDates}
>
<Form.Item name="chec" label="售卖时期(可多选)">
<Form.Item name="unavailableDate" label="售卖时期(可多选)">
<Checkbox.Group>
<Row>
<Col className={styles.colRow} span={8}>
......@@ -71,20 +73,21 @@ const AddSellTimeModal = (props, ref) => {
</Checkbox.Group>
</Form.Item>
<Form.Item name="rate" label="售卖时段">
<Form.Item label="售卖时段">
<Form.List
name="names"
rules={[
{
validator: async (_, names) => {
if (!names || names.length < 2) {
return Promise.reject(new Error('At least 2 passengers'));
}
},
},
]}
name="saleTimes"
initialValue={[[]]}
// rules={[
// {
// validator: async (_, times) => {
// if (!times || times.length < 2) {
// return Promise.reject(new Error('At least 2 passengers'));
// }
// },
// },
// ]}
>
{(fields, { add, remove }, { errors }) => (
{(fields, { add, remove }) => (
<>
{fields.map((field, index) => (
<Form.Item
......@@ -92,21 +95,19 @@ const AddSellTimeModal = (props, ref) => {
required={false}
key={field.key}
className={styles.deal}
>
<Form.Item
className={styles.deal}
className={styles.deal}
{...field}
validateTrigger={['onChange', 'onBlur']}
// validateTrigger={['onChange', 'onBlur']}
rules={[
{
required: true,
whitespace: true,
message: "Please input passenger's name or delete this field.",
message: '请输入售卖时间',
},
]}
>
<RangePicker picker="time" onChange={onChange} />
<RangePicker picker="time" format={format} onChange={onChange} />
</Form.Item>
{fields.length > 1 ? (
<MinusCircleOutlined
......@@ -123,7 +124,7 @@ const AddSellTimeModal = (props, ref) => {
style={{ width: '60%' }}
icon={<PlusOutlined />}
>
新增时段
新增时段
</Button>
</Form.Item>
</>
......
src/pages/ServiceGoods/components/FormInformationBasic.jsx
View file @ 139bafe6
......@@ -43,7 +43,6 @@ const FormInformationBasic = forwardRef((props, ref) => {
const childAddMenusModalRef = useRef(null);
const [takeawayImageList, setTakeawayImageList] = useState([]);
const onCheck = async () => {
try {
const values = await form.validateFields();
......@@ -66,7 +65,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
return null;
}
};
// 自定义加入菜单
// 自定义加入菜单
const showModal = () => {
childAddMenusModalRef.current.setOpen(true);
};
......@@ -143,7 +142,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
name="name"
label="商品名称"
rules={[
{ required: true, min: 2, message: '请输入最少两个字符的商品名称!', whitespace: true },
{ required: true, min: 2, message: '请输入最少两个字符的商品名称', whitespace: true },
]}
>
<Input placeholder="请输入商品名称" disabled={customer.isDisabled} />
......@@ -155,28 +154,28 @@ const FormInformationBasic = forwardRef((props, ref) => {
<Form.Item
name="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' }}
onChange={props.onCategoryChange}
options={shopList}
// dropdownRender={dropdownRender}
dropdownRender={dropdownRender}
/>
</Form.Item>
)}
{/* 新增菜单分组弹框 */}
{/* <AddMenusModal ref={childAddMenusModalRef} queryShopList={queryShopList} /> */}
<AddMenusModal ref={childAddMenusModalRef} queryShopList={queryShopList} />
<Form.Item
name="storageRackIds"
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' }}
......@@ -194,7 +193,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
{
required: true,
type: 'array',
message: '请上传商品图片！',
message: '请上传商品图片',
},
]}
>
......@@ -212,7 +211,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
<Form.Item
name="brandId"
label="商品品牌"
rules={[{ required: true, message: '请选择商品品牌!' }]}
rules={[{ required: true, message: '请选择商品品牌' }]}
extra="若需新增品牌请联系业务员"
>
<Select
......@@ -276,9 +275,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/FormTakeaway.jsx
View file @ 139bafe6
/* eslint-disable no-shadow */
import React, {
useContext,
useState,
......@@ -16,12 +17,17 @@ import {
Space,
Modal,
Switch,
Row,
Col,
InputNumber,
Cascader,
Divider,
DatePicker,
} from 'antd';
import moment from 'moment';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Title } from './CommonTemplate';
import { formItemLayout, ENUM_REPERTORY, ENUM_SET_REPERTORY } from '../config';
import { formItemLayout, ENUM_REPERTORY, ENUM_SET_REPERTORY, ENUM_WEEK } from '../config';
import { ServiceContext } from '../context';
import { debounce } from '@/utils/utils';
import UploadImage from './UploadImage';
......@@ -29,19 +35,15 @@ import AddSellTimeModal from './AddSellTimeModal';
import styles from '../common.less';
import AddRepertoryModal from './AddRepertoryModal';
import AddMultiSpecModal from './AddMultiSpecModal';
import { apiTagList, apiUnits } from '../service';
const createInitValues = () => ({
settlementMethod: 1,
limitPurchase: null, // 是否限购1:限购/0:不限购
limitPurchaseType: null, // 限购类型，如果限购必填1:长期限购/2:周期限购
limitPurchaseCycle: null, // 限购周期1：每天/7：7天/30：30天
limitPurchaseQuantity: null, // 限购数量
packageContent: '',
appointment: null, // 预约
receptionVolume: null,
description: 1, // 商品描述
detailImageList: [], // 商品图片
stock: '1', // 库存类型
});
const format = 'HH:mm';
const { RangePicker } = DatePicker;
const TakeawayGoodsInfo = forwardRef((props, ref) => {
const { editData } = props;
const [form] = Form.useForm();
......@@ -52,6 +54,20 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
const addSellTimeRef = useRef(null);
const AddRepertoryRef = useRef(null);
const AddMultiSpecRef = useRef(null);
const [saleDates, setSaleDates] = useState({
unavailableDate: [],
saleTimes: [],
// saleTimes: [[moment('22-02', 'HH:mm'), moment('23-02', 'HH:mm')]],
}); // 可售日期
const [timeType, setTimeType] = useState(0);
const [repertoryType, setRepertoryType] = useState('1');
const [tagList, setTagList] = useState([]);
const [unitsList, setUnitsList] = useState([]);
const initialDealValue = [
{
specGroupName: '',
},
];
// 自定义加入菜单
const showModal = () => {
......@@ -70,7 +86,10 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
return null;
}
};
const onChange = () => {};
const onDealFinish = values => {
console.log('Received values of form:', values);
};
const getFormValues = debounce(() => {
const values = form.getFieldsValue();
console.log('values========', values);
......@@ -83,14 +102,6 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
const filterCategoryOptions = (inputValue, path) =>
path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
useEffect(() => {
if (customer.isEdit || customer.isUseCache) {
if (!editData) return;
form.setFieldsValue(editData);
setInitValue({ ...editData });
}
}, [customer.isEdit, customer.isUseCache, editData]);
useImperativeHandle(ref, () => ({
onCheck,
reset: () => {
......@@ -135,18 +146,46 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
</div>
</div>
);
const onChange3 = () => {};
// 切换库存
const onChangeRepertory = e => {
setRepertoryType(`${e.target.value}`);
};
// 切换时间
const onChangeTime = e => {
setTimeType(e.target.value);
};
const onChangeAutoStock = e => {
setTimeType(e.target.value);
};
// 显示加入库存弹框
const showAddRepertoryModal = () => {
AddRepertoryRef.current.setOpenRepertory(true);
};
// 显示加入库存弹框
const showMultiRepertoryModal = () => {
AddMultiSpecRef.current.setMultiRepertory(true);
};
const onFinish = values => {
console.log('Received values of form:', values);
// const onFinish = values => {
// console.log('Received values of form:', values);
// };
const init = async () => {
if (!tagList.length) {
const res = await apiTagList();
setTagList(res.data || []);
}
if (!unitsList.length) {
// const res = await apiUnits();
// setUnitsList(res.data || []);
}
return false;
};
useEffect(() => {
if (customer.isEdit || customer.isUseCache) {
if (!editData) return;
form.setFieldsValue(editData);
setInitValue({ ...editData });
}
}, [customer.isEdit, customer.isUseCache, editData]);
useEffect(() => {
init();
}, []);
return (
<>
<Form
......@@ -158,7 +197,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
onValuesChange={getFormValues}
>
<Title title="商品详细信息" />
<Form.Item name="receptionVolume" label="商品描述">
<Form.Item name="description" label="商品描述">
<Input.TextArea
showCount
maxLength={200}
......@@ -182,63 +221,127 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
<Title title="商品售卖信息" />
<Form.Item
name="receptionVolume"
name="minPurchaseNum"
label="最少购买"
// rules={[{ required: true, message: '每日最低接待量' }]}
>
<InputNumber min={1} style={{ width: 200 }} placeholder="请输入购买量" />
</Form.Item>
<Form.Item
name="categoryId"
name="saleTimeType"
label="售卖时间"
// rules={[{ type: 'array', required: true, message: '请输入售卖时间!' }]}
>
<Select
placeholder="请选择售卖时间！"
style={{ width: 200 }}
disabled={customer.isEdit && customer.isNormal}
// showSearch={{ filter: filterCategoryOptions }}
// fieldNames={{ label: 'name', value: 'id', children: 'children' }}
// onChange={props.onCategoryChange}
options={[
{
value: '全时段',
label: '全时段',
},
]}
dropdownRender={dropdownRender}
/>
<Radio.Group onChange={onChangeTime}>
<Radio value={0}>全时段</Radio>
<Radio value={1}>自定义售卖时间</Radio>
</Radio.Group>
</Form.Item>
<AddSellTimeModal ref={addSellTimeRef}></AddSellTimeModal>
{timeType === 1 && (
<>
<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>
</>
)}
{/* <AddSellTimeModal
ref={addSellTimeRef}
saleDates={saleDates}
setSaleDates={setSaleDates}
></AddSellTimeModal> */}
<Form.Item
name="categoryId"
name="label"
label="商品标签"
// rules={[{ type: 'array', required: true, message: '请输入售卖时间!' }]}
>
<Select
placeholder="请选择售卖时间！"
style={{ width: 200 }}
mode="multiple"
allowClear
placeholder="请选择商品标签"
style={{ width: 400 }}
disabled={customer.isEdit && customer.isNormal}
// showSearch={{ filter: filterCategoryOptions }}
// fieldNames={{ label: 'name', value: 'id', children: 'children' }}
fieldNames={{ label: 'tagName', value: 'tagId' }}
// onChange={props.onCategoryChange}
options={[
{
value: '招牌',
label: '招牌',
},
]}
options={tagList}
/>
</Form.Item>
<Form.Item name="appointment" label="单点不送">
<Form.Item name="singleDelivery" label="单点不送">
<Radio.Group>
<Radio value={1}>是</Radio>
<Radio value={0}>否</Radio>
</Radio.Group>
开启后顾客点单则此商品不可下单
</Form.Item>
<Form.Item name="appointment" label="列出商品">
<Form.Item name="list" label="列出商品">
<Radio.Group>
<Radio value={1}>是</Radio>
<Radio value={0}>否</Radio>
......@@ -272,7 +375,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
showSearch={{ filter: filterCategoryOptions }}
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
onChange={props.onCategoryChange}
options={newCategoryList[customer.productType]}
options={unitsList}
/>
</Form.Item>
</Form.Item>
......@@ -293,64 +396,367 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
</Checkbox>
</Form.Item> */}
<Form.Item label="库存" name="limitPurchase">
<Form.Item label="库存" name="stock">
<Radio.Group
options={ENUM_REPERTORY}
onChange={onChange3}
value={1}
onChange={onChangeRepertory}
value="1"
buttonStyle="solid"
optionType="button"
/>
</Form.Item>
<Form.Item label="单规格">
<Button
type="primary"
size="small"
onClick={() => {
showAddRepertoryModal(true);
}}
shape="round"
>
添加规格
</Button>
</Form.Item>
{repertoryType === '1' && (
<>
<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={onChangeRepertory} 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="autoStock" label="自动补足">
<Switch
checkedChildren="开启"
unCheckedChildren="关闭"
// defaultUnChecked
onChange={onChangeAutoStock}
/>
<div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div>
</Form.Item>
</>
)}
{repertoryType === '2' && (
<>
<Form.Item>
<div>份量(如大小/小份、微辣/特辣等)</div>
<Form.List name="deal">
{(dealFields, { add, remove }) => (
<>
{dealFields.map((field, index) => (
<Form.Item key={field.key}>
<Form.Item
{...field}
validateTrigger={['onChange', 'onBlur']}
name={[field.name, 'specGroupName']}
className={styles.dealInput}
rules={[
{
required: true,
whitespace: true,
message: '请输入名称例如（份量）',
},
]}
noStyle
>
<Input
placeholder="请输入名称"
style={{
width: '60%',
}}
/>
</Form.Item>
{dealFields.length > 1 ? (
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => remove(field.name)}
/>
) : null}
<Form.List
{...field}
name={[field.name, 'specs']}
initialValue={[
{
specName: '',
},
]}
>
{(dealInfoFields, { add: dealAdd, remove: dealRemove }) => (
<>
{dealInfoFields.map(dealInfoField => (
<Space key={dealInfoField.key} align="baseline">
<Form.Item
{...dealInfoField}
name={[dealInfoField.name, 'specName']}
rules={[
{
required: true,
message: '请输入名称',
},
]}
>
<Input style={{ width: '200px' }} placeholder="名称" />
</Form.Item>
<Form.Item
{...dealInfoField}
name={[dealInfoField.name, 'quantity']}
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={unitsList}
/>
</Form.Item>
<Form.Item
{...dealInfoField}
name={[dealInfoField.name, 'unit']}
rules={[
{
required: true,
message: '份量',
},
]}
>
<Input
style={{ width: '200px' }}
placeholder="约 份量（数字）"
/>
</Form.Item>
<Form.Item
{...dealInfoField}
name={[dealInfoField.name, 'salePrice']}
rules={[
{
required: true,
message: '销售价',
},
]}
>
<Input style={{ width: '200px' }} placeholder="销售价（元）" />
</Form.Item>
<Form.Item
{...dealInfoField}
name={[dealInfoField.name, 'activityPrice']}
rules={[
{
required: true,
message: '活动价',
},
]}
>
<Input style={{ width: '200px' }} placeholder="活动价（元）" />
</Form.Item>
<MinusCircleOutlined
onClick={() => dealRemove(dealInfoField.name)}
/>
</Space>
))}
<Form.Item label="多规格">
<Button
type="primary"
size="small"
onClick={() => {
showMultiRepertoryModal(true);
}}
shape="round"
>
添加多规格
</Button>
<Form.Item
name="receptionVolume"
label="多规格库存"
className={styles.multiSpecification}
>
<Button size="small" style={{ marginBottom: '10px' }} shape="round">
统一设置置库存
</Button>
<Form.Item label="多规格1">
<Form.Item>
<Button
type="dashed"
onClick={() => dealAdd()}
block
style={{ width: '400px' }}
icon={<PlusOutlined />}
>
新增加价
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form.Item>
))}
<div
className={styles.specRepertory}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{
width: '400px',
}}
icon={<PlusOutlined />}
>
添加份量
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form.Item>
<Form.Item>
<div>添加规格(如加料、甜度、辣度等)</div>
<Form.Item>
<Form.List name="specs">
{(specsFields, { add, remove }) => (
<>
{specsFields.map((field, index) => (
<Form.Item
// {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
// label={index === 0 ? 'Passengers' : ''}
required={false}
key={field.key}
>
<Form.Item
{...field}
validateTrigger={['onChange', 'onBlur']}
className={styles.deal}
style={{ marginBottom: '8px' }}
rules={[
{
required: true,
whitespace: true,
message: '请输入规格名称',
},
]}
>
<Input placeholder="规格名称" className={styles.nameWidth} />
{specsFields.length > 1 ? (
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => remove(field.name)}
/>
) : null}
</Form.Item>
<Form.Item>
<Form.List name="sights">
{(sightsFields, { add, remove }) => (
<>
{sightsFields.map(field => (
<Space key={field.key} align="baseline">
<Form.Item
noStyle
shouldUpdate={(prevValues, curValues) =>
prevValues.area !== curValues.area ||
prevValues.sights !== curValues.sights
}
>
{() => (
<Form.Item
{...field}
// label="Sight"
name={[field.name, 'sight']}
rules={[
{
required: true,
message: 'Missing sight',
},
]}
>
<Input
style={{ width: '200px' }}
placeholder="加价名称"
/>
</Form.Item>
)}
</Form.Item>
<Form.Item
{...field}
// label="Price"
// name={[field.name, 'price']}
rules={[
{
required: true,
message: 'Missing price',
},
]}
>
<InputNumber
style={{ width: '200px' }}
placeholder="加价名称金额（元）"
/>
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
block
style={{ width: '400px' }}
icon={<PlusOutlined />}
>
新增加价
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form.Item>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{ width: '400px' }}
icon={<PlusOutlined />}
>
新增规格
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form.Item>
</Form.Item>
<Form.Item
name="receptionVolume"
label="多规格库存"
className={styles.multiSpecification}
>
<Button
size="small"
danger
style={{ marginBottom: '10px' }}
onClick={() => {
showAddRepertoryModal(true);
}}
shape="round"
>
去设置
</div>
统一设置置库存
</Button>
<Form.Item label="多规格1">
<div
className={styles.specRepertory}
onClick={() => {
showAddRepertoryModal(true);
}}
>
去设置
</div>
</Form.Item>
</Form.Item>
</Form.Item>
</Form.Item>
{/* 33333 */}
</>
)}
</Form>
{/* 加入库存 */}
<AddRepertoryModal ref={AddRepertoryRef} />
......
src/pages/ServiceGoods/config.js
View file @ 139bafe6
......@@ -323,20 +323,18 @@ export const StaticColumns = customer => [
disabeldRender: () => customer.isDisabled,
},
];
export const ENUM_REPERTORY = [
{ label: '单规格', value: '单规格' },
{ label: '多规格', value: '多规格' },
]
export const ENUM_REPERTORY = [{ label: '单规格', value: '1' }, { label: '多规格', value: '2' }];
export const ENUM_SET_REPERTORY = [
{ label: '清零', value: '清零' },
{ label: '最大', value: '最大' },
]
];
export const ENUM_WEEK = [
{ value: 1, label: '周一' },
{ value: 2, label: '周二' },
{ value: 3, label: '周三' },
{ value: 1, label: '周四' },
{ value: 1, label: '周五' },
{ value: 1, label: '周六' },
{ value: 1, label: '周日' },
]
{ value: 4, label: '周四' },
{ value: 5, label: '周五' },
{ value: 6, label: '周六' },
{ value: 7, label: '周日' },
{ value: 8, label: '法定假日' },
];
src/pages/ServiceGoods/index.jsx
View file @ 139bafe6
......@@ -62,10 +62,7 @@ const ServiceGoods = options => {
const [specList, setSpecList] = useState([]); // 规格列表
const [editData, setEditData] = useState({}); // 编辑保存数据
const [newCategoryList, setNewCategoryList] = useState({});
const [shopList, setShopList] = useState([
{ id: 1, name: '分组1' },
{ id: 2, name: '分组2' },
]);
const [shopList, setShopList] = useState([{ id: 1, name: '分组1' }, { id: 2, name: '分组2' }]);
const [visibleCacheEdit, setVisibleCacheEdit] = useState(false); // 显示有缓存未保存提示
const [checkFormList] = useState([
......@@ -75,6 +72,7 @@ const ServiceGoods = options => {
settingRef,
settleOtrRef,
picturesRef,
takeawayRef,
]);
const [specKeyList, setSpecKeyList] = useState([]); // 记录一级规格key字段
......@@ -82,6 +80,7 @@ const ServiceGoods = options => {
const resetForm = () => clearCurrent(checkFormList).forEach(({ current }) => current.reset());
const onValuesChange = e => {
console.log('e======', e);
if (!isEdit) {
if (visibleCacheEdit) {
setVisibleCacheEdit(false);
......@@ -157,12 +156,12 @@ const ServiceGoods = options => {
}
};
// 查询分组列表
const queryShopList = async () => {
if (!shopList.length) {
const result = await apiQueryShopList()
setShopList(result.data || []);
}
}
const queryShopList = async () => {
if (!shopList.length) {
const result = await apiQueryShopList();
setShopList(result.data || []);
}
};
const getAfterSalesAddrsPage = async () => {
if (!afterAddressList.length) {
const result = await afterSalesAddrsPage();
......@@ -208,6 +207,7 @@ const queryShopList = async () => {
// 保存商品
const submitEvent = async () => {
const checkPromiseList = clearCurrent(checkFormList).map(({ current }) => current.onCheck());
console.log('333333333333', checkFormList);
const resuslt = await Promise.all(checkPromiseList);
console.log('resuslt :>> ', resuslt);
if (!resuslt.includes(null)) {
......@@ -492,36 +492,42 @@ const queryShopList = async () => {
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 && (
<>
<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}
/>
</>
)}
</>}
{ productType !== 5 && <>
<FormRuleVPictures
ref={picturesRef}
specKeyItem={specKeyList}
editData={editData.infoImageData}
onValuesChange={onValuesChange}
/>
</>}
{productType === 4 && (
<FormSettlementOthers
......@@ -530,15 +536,16 @@ const queryShopList = async () => {
onValuesChange={onValuesChange}
/>
)}
{ productType === 5 && <>
<FormTakeaway
ref={takeawayRef}
editData={editData.serviceItem}
supplierIdList={supplierIdList}
onValuesChange={onValuesChange}
/>
</>}
{productType === 5 && (
<>
<FormTakeaway
ref={takeawayRef}
editData={editData.serviceItem}
supplierIdList={supplierIdList}
onValuesChange={onValuesChange}
/>
</>
)}
</ServiceContext.Provider>
</WrapperContainer>
</Spin>
......
src/pages/ServiceGoods/service.js
View file @ 139bafe6
......@@ -130,3 +130,21 @@ export const apiCreateShop = data =>
prefix: goodsApi,
data,
});
// 新增外卖商品 http://yapi.quantgroups.com/project/389/interface/api/57324
export const apiAddGoods = 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('/v1/channels/products/tag/getAll', {
prefix: goodsApi,
data,
});
// 单位列表 http://yapi.quantgroups.com/project/389/interface/api/57179
export const apiUnits = data =>
request.get('/api/consoles/products/units', {
prefix: goodsApi,
data,
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment