Skip to content

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

feat: 更新商品字段

parent 6f9f4424
Hide whitespace changes
Inline Side-by-side
Showing with 435 additions and 285 deletions
src/pages/ServiceGoods/common.less
View file @ 6095ba76
...@@ -221,7 +221,7 @@ ...@@ -221,7 +221,7 @@
} }
.ant-form-item { .ant-form-item {
margin-bottom: 0; margin-bottom: 0;
margin-left: 20px; margin-left: 40px;
} }
} }
} }
...@@ -253,7 +253,7 @@ ...@@ -253,7 +253,7 @@
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
margin: 0 10px; margin: 0 10px;
padding:0 8px; padding: 0 8px;
border-radius: 8px; border-radius: 8px;
} }
.repertoryLimit { .repertoryLimit {
...@@ -276,7 +276,7 @@ ...@@ -276,7 +276,7 @@
} }
} }
.conBg { .conBg {
background:#f8f8f8 ; background: #f8f8f8;
min-width: 100%; min-width: 100%;
width: fit-content; width: fit-content;
:global { :global {
...@@ -299,6 +299,5 @@ ...@@ -299,6 +299,5 @@
.rowWarp { .rowWarp {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
background:#f8f8f8 ; background: #f8f8f8;
} }
src/pages/ServiceGoods/components/AddRepertoryModal.jsx
View file @ 6095ba76
...@@ -2,40 +2,98 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } f ...@@ -2,40 +2,98 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } f
import { Button, Modal, Radio, Form, InputNumber, Switch } from 'antd'; import { Button, Modal, Radio, Form, InputNumber, Switch } from 'antd';
import styles from '../common.less'; import styles from '../common.less';
import { ENUM_SET_REPERTORY } from '../config'; import { ENUM_SET_REPERTORY } from '../config';
import { debounce } from '@/utils/utils';
const AddRepertoryModal = (props, ref) => { const AddRepertoryModal = (props, ref) => {
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [modalText, setModalText] = useState('Content of the modal');
const [openRepertory, setOpenRepertory] = useState(false); const [openRepertory, setOpenRepertory] = useState(false);
const [form] = Form.useForm();
const [repertoryState, setRepertoryState] = useState('');
const [initialValues, setInitialValues] = useState({
productStock: 0,
maxStock: 0,
autoStock: 0,
});
// const { const { modifiedInventory, intactData, repertoryModel } = props;
// open,
// setOpen,
// } = props;
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
// changeVal 就是暴露给父组件的方法 // changeVal 就是暴露给父组件的方法
setOpenRepertory: newVal => { setOpenRepertory: newVal => {
setOpenRepertory(newVal); setOpenRepertory(newVal);
}, },
})); }));
const onChange3 = () => {}; // 自动补全
const onChangeAutoStock = e => {
const handleOk = () => { form.setFieldsValue({
setModalText('The modal will be closed after two seconds'); autoStock: e ? 1 : 0,
setConfirmLoading(true); });
setTimeout(() => { };
setOpenRepertory(false); // 勾选库存设置
setConfirmLoading(false); const onChangeSetRepertory = e => {
}, 2000); console.log('form', form);
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();
console.log('values========', values);
}, 400);
const handleOk = async () => {
const values = await form.validateFields();
console.log('values', values);
// 回调库存
modifiedInventory(values);
// setConfirmLoading(true);
// setTimeout(() => {
// setOpenRepertory(false);
// setConfirmLoading(false);
// }, 2000);
}; };
const handleCancel = () => { const handleCancel = () => {
console.log('Clicked cancel button');
setOpenRepertory(false); setOpenRepertory(false);
}; };
useEffect(() => { useEffect(() => {
console.log('open', openRepertory); console.log('open', openRepertory);
}, [openRepertory]); const { productStock, serviceItem } = intactData?.items;
const { autoStock, maxStock } = serviceItem;
const params = {
productStock,
autoStock,
maxStock,
};
switch (repertoryModel) {
case 'all': // 统一设置
setInitialValues(params);
break;
case 'mlti': // 多规格设置
setInitialValues(params);
break;
case 'singular': // 单规格设置
setInitialValues(params);
break;
default:
break;
}
}, [openRepertory, intactData]);
return ( return (
<> <>
{openRepertory && ( {openRepertory && (
...@@ -46,10 +104,10 @@ const AddRepertoryModal = (props, ref) => { ...@@ -46,10 +104,10 @@ const AddRepertoryModal = (props, ref) => {
confirmLoading={confirmLoading} confirmLoading={confirmLoading}
onCancel={handleCancel} onCancel={handleCancel}
> >
<Form> <Form form={form} initialValues={initialValues} onValuesChange={getFormValues}>
<Form.Item className={styles.itemInlineModal}> <Form.Item className={styles.itemInlineModal}>
<Form.Item <Form.Item
name="receptionVolume" name="productStock"
label="剩余库存" label="剩余库存"
style={{ style={{
display: 'flex', display: 'flex',
...@@ -58,28 +116,36 @@ const AddRepertoryModal = (props, ref) => { ...@@ -58,28 +116,36 @@ const AddRepertoryModal = (props, ref) => {
rules={[{ required: true, message: '请填写剩余库存' }]} rules={[{ required: true, message: '请填写剩余库存' }]}
> >
<InputNumber <InputNumber
min={1} min={0}
style={{ width: 200, display: 'inline-block' }} style={{ width: 200, display: 'inline-block' }}
placeholder="请输入" placeholder="请输入"
/> />
</Form.Item> </Form.Item>
<Form.Item name="limitPurchase" style={{ width: 200, display: 'inline-block' }}> <Form.Item style={{ width: 200, display: 'inline-block' }}>
<Radio.Group options={ENUM_SET_REPERTORY} onChange={onChange3} value={1} /> <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> </Form.Item>
<Form.Item <Form.Item
name="receptionVolume" name="maxStock"
label="最大库存" label="最大库存"
rules={[{ required: true, message: '请填写最大库存' }]} rules={[{ required: true, message: '请填写最大库存' }]}
> >
<InputNumber min={1} style={{ width: 200 }} placeholder="请输入" /> <InputNumber
min={0}
style={{ width: 200 }}
placeholder="请输入"
onChange={onChangeMaxStock}
/>
</Form.Item> </Form.Item>
<Form.Item name="receptionVolume" label="自动补足"> <Form.Item name="autoStock" label="自动补足">
<Switch <Switch
checkedChildren="开启" checkedChildren="开启"
unCheckedChildren="关闭" unCheckedChildren="关闭"
defaultChecked // defaultChecked
onChange={onChange3} onChange={onChangeAutoStock}
/> />
</Form.Item> </Form.Item>
<div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div> <div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div>
......
src/pages/ServiceGoods/components/FormTakeaway.jsx
View file @ 6095ba76
...@@ -69,10 +69,13 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -69,10 +69,13 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
const [tagList, setTagList] = useState([]); const [tagList, setTagList] = useState([]);
const [unitsList, setUnitsList] = useState([]); const [unitsList, setUnitsList] = useState([]);
const [takeawayData, setTakeawayData] = useState({}); const [takeawayData, setTakeawayData] = useState({});
const [specList, setSpecList] = useState([]); // const [multiSpecList, setMultiSpecList] = useState([]);
// const [singularSpecList, setSingularSpecList] = useState([]);
const [takeawaySku, setTakeawaySku] = useState([]); const [mltiSpu, setMultiSpu] = useState([]);
const [singularSpu, setSingularSpu] = useState([]);
const [intactData, setIntactData] = useState({});
const [repertoryState, setRepertoryState] = useState(''); const [repertoryState, setRepertoryState] = useState('');
const [repertoryModel, setRepertoryModel] = useState('');
const initialDealValue = [ const initialDealValue = [
{ {
specGroupName: '', specGroupName: '',
...@@ -90,7 +93,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -90,7 +93,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
return { return {
...values, ...values,
temp: 'takeawayItem', temp: 'takeawayItem',
limitPurchase: values.limitPurchase ? 1 : 0, intactData,
}; };
} catch (errorInfo) { } catch (errorInfo) {
return null; return null;
...@@ -98,7 +101,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -98,7 +101,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
}; };
const takeawayCalc = takeawayData => { const takeawayCalc = takeawayData => {
// 商品基本信息编辑商品名称 // 商品基本信息编辑商品名称
const { infoMation: name, takeawayItem, saleTimeType, singleDelivery } = takeawayData; const { infoMation: name, infoMation, takeawayItem, saleTimeType } = takeawayData;
// weight 份量 specs规格 生成sku规则 weight * specs // weight 份量 specs规格 生成sku规则 weight * specs
const { const {
specs = [], specs = [],
...@@ -111,68 +114,112 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -111,68 +114,112 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
maxStock, maxStock,
saleTimes, saleTimes,
label, label,
unit,
quantity,
productStock,
singleDelivery,
} = takeawayItem; } = takeawayItem;
const takeawaySkuTemp = []; const singularSpecList = [{ specGroupName: '份量', specs: [] }]; // 单规格
const takeawaySpecList = [{ specGroupName: '份量', specs: [] }] const multiSpecList = [{ specGroupName: '份量', specs: [] }]; // 多规格
console.log('takeawayData', takeawayData); const multiSpu = []; // 单库存spu
if (name) { let singularSpu = []; // 多库存spu
const temp = {
salePrice: 1, const temp = {
productStock: 2, salePrice: 1,
list: 1, productStock: 2,
serviceItem: { list: 1,
description, // 商品描述 serviceItem: {
maxStock, // 最大库存 description, // 商品描述
minPurchaseNum, // 最少购买 maxStock, // 最大库存
saleTimeType, // 售卖时间 minPurchaseNum, // 最少购买
singleDelivery, // 单点不送 saleTimeType, // 售卖时间
list, // 是否列出 1 是 0 否（外卖商品必填） singleDelivery, // 单点不送
label, // 商品标签id list, // 是否列出 1 是 0 否（外卖商品必填）
saleDates, // 可售日期 1-8 label, // 商品标签id
saleTimes, saleDates, // 可售日期 1-8
autoStock: '', // 弹框设置---自动补足 saleTimes,
}, autoStock: '', // 弹框设置---自动补足
} },
if (weight.length) { };
weight.forEach((item, weightIndex) => {
takeawaySpecList[0].specs = weight // 单规格
// 循环一次 插入规则列表 if (+repertoryType === 1) {
let isFirstLoops = true const sepcs = { maxStock, quantity, unit, productStock };
if (specs.length) { singularSpecList[0].specs = [sepcs];
specs.forEach((specsItem, specsIndex) => { singularSpu = [{ ...temp, sepcs: [sepcs] }];
if (isFirstLoops) { setSingularSpu(singularSpu);
takeawaySpecList.push(specsItem) }
} // 多规格
if (specsItem.specs.length > 1) { if (+repertoryType === 2) {
specsItem.specs.forEach((itm, idx) => { console.log('222');
if (name) {
if (weight.length) {
weight.forEach((item, weightIndex) => {
multiSpecList[0].specs = weight;
// 循环一次 插入规则列表
let isFirstLoops = true;
if (specs.length) {
specs.forEach((specsItem, specsIndex) => {
if (isFirstLoops && multiSpecList.length < specs.length + 1) {
multiSpecList.push(specsItem);
}
if (specsItem.specs.length > 1) {
specsItem.specs.forEach((itm, idx) => {
const params = {
...temp,
specs: [{ ...item }, { ...specsItem.specs[idx] }],
};
multiSpu.push(params);
});
} else {
const params = { const params = {
...temp, ...temp,
specs: [{ ...item }, { ...specsItem.specs[idx] }], specs: [{ ...item }, { ...specsItem.specs[0] }],
}; };
takeawaySkuTemp.push(params); multiSpu.push(params);
}); }
} else { });
const params = { isFirstLoops = false;
} else {
const params = {
...temp, ...temp,
specs: [{ ...item }, { ...specsItem.specs[0] }], specs: [{ ...item }],
}; };
takeawaySkuTemp.push(params); multiSpu.push(params);
} }
isFirstLoops = false });
}); }
} else {
const params = {
...temp,
specs: [{ ...item }],
};
takeawaySkuTemp.push(params);
}
});
} }
setMultiSpu(multiSpu);
}
// +repertoryType === 1 单规格 2多规格
const intactData = {
type: 5, // 外卖类型
...infoMation,
label,
list,
description,
detailImageList,
singleDelivery,
specList: +repertoryType === 1 ? singularSpecList : multiSpecList, // 单库存和多库存specList
items: +repertoryType === 1 ? singularSpu : multiSpu,
};
console.log('intactData======>', intactData);
setIntactData(intactData);
return intactData;
};
// 设置库存
const modifiedInventory = params => {
const { productStock, maxStock, autoStock } = params;
if (intactData?.items.length) {
intactData.items.forEach(item => {
item.productStock = productStock;
item.serviceItem.autoStock = autoStock;
item.serviceItem.maxStock = maxStock;
});
setIntactData(intactData);
} }
console.log('takeawaySkuTemp', takeawaySkuTemp, takeawaySpecList); return false;
setTakeawaySku(takeawaySkuTemp);
setSpecList(takeawaySpecList)
}; };
const onChange = () => {}; const onChange = () => {};
const onDealFinish = values => { const onDealFinish = values => {
...@@ -249,12 +296,12 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -249,12 +296,12 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
if (+e.target.value === 0) { if (+e.target.value === 0) {
form.setFieldsValue({ form.setFieldsValue({
productStock: 0, productStock: 0,
}) });
} else { } else {
const { maxStock } = form.getFieldsValue(['maxStock']) const { maxStock } = form.getFieldsValue(['maxStock']);
form.setFieldsValue({ form.setFieldsValue({
productStock: maxStock, productStock: maxStock,
}) });
} }
}; };
// 最大库存设置 // 最大库存设置
...@@ -263,23 +310,27 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -263,23 +310,27 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
if (+repertoryState === 1) { if (+repertoryState === 1) {
form.setFieldsValue({ form.setFieldsValue({
productStock: e, productStock: e,
}) });
} }
} };
// 切换时间 // 切换时间
const onChangeTime = e => { const onChangeTime = e => {
setTimeType(e.target.value); setTimeType(e.target.value);
}; };
// 自动补全
const onChangeAutoStock = e => { const onChangeAutoStock = e => {
setTimeType(e.target.value); form.setFieldsValue({
autoStock: e ? 1 : 0,
});
}; };
// 显示加入库存弹框 // 显示加入库存弹框
const showAddRepertoryModal = () => { const showAddRepertoryModal = params => {
AddRepertoryRef.current.setOpenRepertory(true); AddRepertoryRef.current.setOpenRepertory(true);
setRepertoryModel(params);
};
const onFinish = values => {
console.log('Received values of form:', values);
}; };
// const onFinish = values => {
// console.log('Received values of form:', values);
// };
// 拼接sku 名称 // 拼接sku 名称
const calcLabelName = (takeawayData, item) => { const calcLabelName = (takeawayData, item) => {
const tempName = `${takeawayData?.infoMation?.name || ''}`; const tempName = `${takeawayData?.infoMation?.name || ''}`;
...@@ -287,7 +338,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -287,7 +338,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
const tempQuantity = `(${item.specs[0]?.quantity || ''}`; const tempQuantity = `(${item.specs[0]?.quantity || ''}`;
const tempUnit = `${item.specs[0]?.unit || ''})`; const tempUnit = `${item.specs[0]?.unit || ''})`;
const tempSecondSpecName = `${item.specs[1]?.specName || ''}`; const tempSecondSpecName = `${item.specs[1]?.specName || ''}`;
const isShow = tempQuantity && tempUnit && '+' const isShow = tempQuantity && tempUnit && '+';
return `${tempName} ${tempSpecName} ${tempQuantity} ${isShow} ${tempUnit} ${tempSecondSpecName}`; return `${tempName} ${tempSpecName} ${tempQuantity} ${isShow} ${tempUnit} ${tempSecondSpecName}`;
}; };
const init = async () => { const init = async () => {
...@@ -478,41 +529,6 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -478,41 +529,6 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Title title="规格信息" /> <Title title="规格信息" />
<Form.Item label="份量" className={styles.required}>
<Form.Item
name="quantity"
style={{
display: 'inline-block',
}}
rules={[{ required: true, message: '请输入分量' }]}
>
<InputNumber min={1} style={{ width: 200 }} placeholder="请输入数字" />
</Form.Item>
<Form.Item
name="unit"
rules={[{ type: 'array', required: true, message: '请选择单位' }]}
style={{
display: 'inline-block',
margin: '0 8px',
}}
>
<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>
<Form.Item
name="salePrice"
label="销售价格"
rules={[{ required: true, message: '请输入销售价格' }]}
>
<InputNumber min={0} style={{ width: 200 }} placeholder="元" />
</Form.Item>
{/* <Form.Item label="限购" name="limitPurchase" valuePropName="checked"> {/* <Form.Item label="限购" name="limitPurchase" valuePropName="checked">
<Checkbox onChange={() => radioChangeEvent('limitPurchase')}> <Checkbox onChange={() => radioChangeEvent('limitPurchase')}>
...@@ -535,6 +551,41 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -535,6 +551,41 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
{repertoryType === '1' && ( {repertoryType === '1' && (
<> <>
<Form.Item label="份量" className={styles.required}>
<Form.Item
name="quantity"
style={{
display: 'inline-block',
}}
rules={[{ required: true, message: '请输入分量' }]}
>
<InputNumber min={1} style={{ width: 200 }} placeholder="请输入数字" />
</Form.Item>
{/* <Form.Item
name="unit"
rules={[{ type: 'array', required: true, message: '请选择单位' }]}
style={{
display: 'inline-block',
margin: '0 8px',
}}
>
<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>
<Form.Item
name="salePrice"
label="销售价格"
rules={[{ required: true, message: '请输入销售价格' }]}
>
<InputNumber min={0} style={{ width: 200 }} placeholder="元" />
</Form.Item>
<Form.Item className={styles.itemInline}> <Form.Item className={styles.itemInline}>
<Form.Item <Form.Item
name="productStock" name="productStock"
...@@ -551,12 +602,11 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -551,12 +602,11 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
placeholder="请输入" placeholder="请输入"
/> />
</Form.Item> </Form.Item>
<Form.Item name="limitPurchase" style={{ width: 200, display: 'inline-block' }}> <Form.Item style={{ width: 200, display: 'inline-block' }}>
<Radio.Group <Radio.Group value={repertoryState} onChange={onChangeSetRepertory}>
options={ENUM_SET_REPERTORY} <Radio.Button value="0">清空</Radio.Button>
onChange={onChangeSetRepertory} <Radio.Button value="1">最大</Radio.Button>
value={1} </Radio.Group>
/>
</Form.Item> </Form.Item>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
...@@ -564,7 +614,12 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -564,7 +614,12 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
label="最大库存" label="最大库存"
rules={[{ required: true, message: '请填写最大库存' }]} rules={[{ required: true, message: '请填写最大库存' }]}
> >
<InputNumber min={0} style={{ width: 200 }} placeholder="请输入" onChange={onChangeMaxStock} /> <InputNumber
min={0}
style={{ width: 200 }}
placeholder="请输入"
onChange={onChangeMaxStock}
/>
</Form.Item> </Form.Item>
<Form.Item name="autoStock" label="自动补足"> <Form.Item name="autoStock" label="自动补足">
<Switch <Switch
...@@ -575,6 +630,27 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -575,6 +630,27 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
/> />
<div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div> <div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div>
</Form.Item> </Form.Item>
<div className={styles.rowWarp}>
{singularSpu.length > 0 &&
takeawayData?.infoMation?.name &&
singularSpu.map((item, index) => (
<div className={styles.specsBetween}>
<Form.Item label={calcLabelName(takeawayData, item)}>
<div className={styles.specsBetween}>
<span className={styles.repertoryLimit}>1/1</span>
<div
className={styles.specRepertory}
onClick={() => {
showAddRepertoryModal('singular'); // 单规格库存
}}
>
设置库存
</div>
</div>
</Form.Item>
</div>
))}
</div>
</> </>
)} )}
{repertoryType === '2' && ( {repertoryType === '2' && (
...@@ -728,154 +804,163 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => { ...@@ -728,154 +804,163 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
)} )}
</Form.List> */} </Form.List> */}
</Form.Item> </Form.Item>
<Form.Item> {takeawayData?.takeawayItem?.weight?.length > 0 && (
<div>添加规格(如加料、甜度、辣度等)</div> <>
<Form.List name="specs"> <Form.Item>
{(specsFields, { add, remove }) => ( <div>添加规格(如加料、甜度、辣度等)</div>
<> <Form.List name="specs">
{specsFields.map((field, index) => ( {(specsFields, { add, remove }) => (
<Form.Item key={field.key} className={styles.conBg}> <>
<Form.Item {specsFields.map((field, index) => (
{...field} <Form.Item key={field.key} className={styles.conBg}>
validateTrigger={['onChange', 'onBlur']} <Form.Item
name={[field.name, 'specGroupName']} {...field}
rules={[ validateTrigger={['onChange', 'onBlur']}
{ name={[field.name, 'specGroupName']}
required: true, rules={[
whitespace: true, {
message: '请输入规格名称', required: true,
}, whitespace: true,
]} message: '请输入规格名称',
noStyle },
> ]}
<Input placeholder="规格名称" className={styles.nameWidth} /> noStyle
</Form.Item> >
{specsFields.length > 1 ? ( <Input placeholder="规格名称" className={styles.nameWidth} />
<MinusCircleOutlined </Form.Item>
className="dynamic-delete-button" {specsFields.length > 1 ? (
onClick={() => remove(field.name)} <MinusCircleOutlined
/> className="dynamic-delete-button"
) : null} onClick={() => remove(field.name)}
<Form.List />
{...field} ) : null}
name={[field.name, 'specs']} <Form.List
initialValue={[ {...field}
{ name={[field.name, 'specs']}
specName: '', initialValue={[
salePrice: '', {
}, specName: '',
]} salePrice: '',
> },
{(specsInfoFields, { add: specsAdd, remove: specsRemove }) => ( ]}
<> >
{specsInfoFields.map(specsInfofield => ( {(specsInfoFields, { add: specsAdd, remove: specsRemove }) => (
<Space key={specsInfofield.key} align="baseline"> <>
<Form.Item {specsInfoFields.map(specsInfofield => (
{...specsInfofield} <Space key={specsInfofield.key} align="baseline">
name={[specsInfofield.name, 'specName']} <Form.Item
rules={[ {...specsInfofield}
{ name={[specsInfofield.name, 'specName']}
required: true, rules={[
message: '请输入加价名称', {
}, required: true,
]} message: '请输入加价名称',
> },
<Input style={{ width: '200px' }} placeholder="加价名称" /> ]}
</Form.Item> >
<Form.Item <Input style={{ width: '200px' }} placeholder="加价名称" />
{...specsInfofield} </Form.Item>
name={[specsInfofield.name, 'salePrice']} <Form.Item
rules={[ {...specsInfofield}
{ name={[specsInfofield.name, 'salePrice']}
required: true, rules={[
message: '请输入加价金额（元）', {
}, required: true,
]} message: '请输入加价金额（元）',
> },
<InputNumber ]}
style={{ width: '200px' }} >
placeholder="加价名称金额（元）" <InputNumber
/> style={{ width: '200px' }}
</Form.Item> placeholder="加价名称金额（元）"
/>
</Form.Item>
<MinusCircleOutlined <MinusCircleOutlined
onClick={() => specsRemove(specsInfofield.name)} onClick={() => specsRemove(specsInfofield.name)}
/> />
</Space> </Space>
))} ))}
<Form.Item> <Form.Item>
<Button <Button
type="dashed" type="dashed"
onClick={() => specsAdd()} onClick={() => specsAdd()}
block block
style={{ width: '400px' }} style={{ width: '400px' }}
icon={<PlusOutlined />} icon={<PlusOutlined />}
> >
新增加价 新增加价
</Button> </Button>
</Form.Item> </Form.Item>
</> </>
)} )}
</Form.List> </Form.List>
</Form.Item> </Form.Item>
))} ))}
<Form.Item> <Form.Item>
<Button <Button
type="primary" type="primary"
onClick={() => add()} onClick={() => add()}
style={{ width: '400px' }} style={{ width: '400px' }}
icon={<PlusOutlined />} icon={<PlusOutlined />}
>
新增规格
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form.Item>
<Form.Item
name="receptionVolume"
label="多规格库存"
className={styles.multiSpecification}
>
<Button
size="small"
danger
style={{ marginBottom: '10px' }}
onClick={() => {
showAddRepertoryModal(true);
}}
shape="round"
>
统一设置置库存
</Button>
<div className={styles.rowWarp}>
{takeawaySku.length > 0 &&
takeawayData?.infoMation?.name &&
takeawaySku.map((item, index) => (
<div className={styles.specsBetween}>
<Form.Item label={calcLabelName(takeawayData, item)}>
<div className={styles.specsBetween}>
<span className={styles.repertoryLimit}>1/1</span>
<div
className={styles.specRepertory}
onClick={() => {
showAddRepertoryModal(true);
}}
> >
设置库存 新增规格
</div> </Button>
</Form.Item>
</>
)}
</Form.List>
</Form.Item>
<Form.Item
name="receptionVolume"
label="多规格库存"
className={styles.multiSpecification}
>
<Button
size="small"
danger
style={{ marginBottom: '10px' }}
onClick={() => {
showAddRepertoryModal('all'); // 统一库存
}}
shape="round"
>
统一设置置库存
</Button>
<div className={styles.rowWarp}>
{mltiSpu.length > 0 &&
takeawayData?.infoMation?.name &&
mltiSpu.map((item, index) => (
<div className={styles.specsBetween}>
<Form.Item label={calcLabelName(takeawayData, item)}>
<div className={styles.specsBetween}>
<span className={styles.repertoryLimit}>1/1</span>
<div
className={styles.specRepertory}
onClick={() => {
showAddRepertoryModal('mlti'); // 多个库存
}}
>
设置库存
</div>
</div>
</Form.Item>
</div> </div>
</Form.Item> ))}
</div> </div>
))} </Form.Item>
</div> </>
</Form.Item> )}
</> </>
)} )}
</Form> </Form>
{/* 加入库存 */} {/* 加入库存 */}
<AddRepertoryModal ref={AddRepertoryRef} /> <AddRepertoryModal
ref={AddRepertoryRef}
modifiedInventory={modifiedInventory}
intactData={intactData}
repertoryModel={repertoryModel}
/>
{/* 加入多规格 */} {/* 加入多规格 */}
<AddMultiSpecModal ref={AddMultiSpecRef} /> <AddMultiSpecModal ref={AddMultiSpecRef} />
</> </>
......
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