Skip to content

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

feat: add 商品信息

parent 5b5381e5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 483 additions and 212 deletions
src/pages/ServiceGoods/common.less
View file @ 16e5208e
......@@ -229,5 +229,23 @@
height: 20px;
line-height: 20px;
text-align: center;
}
.deal {
:global {
.ant-form-item-control-input-content {
display: flex;
align-items: center;
}
.ant-form-item {
margin-bottom: 0;
}
}
}
.nameWidth {
width: 300px;
}
.colRow {
display: flex;
flex: none;
max-width:none;
}
\ No newline at end of file
src/pages/ServiceGoods/components/AddMenusModal.jsx
View file @ 16e5208e
import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
import { Button, Modal } from 'antd';
import { Button, Modal, Form, Switch, Input } from 'antd';
import styles from '../common.less';
import { apiCreateShop } from '../service'
const AddMenusModal = (props, ref) => {
const [confirmLoading, setConfirmLoading] = useState(false);
const [modalText, setModalText] = useState('Content of the modal');
const [open, setOpen] = useState(false);
const [formProject] = Form.useForm();
const [menusSwitch, setMenusSwitch] = useState(0) // 分组开启状态
// const {
// open,
// setOpen,
// queryShopList,
// } = props;
useImperativeHandle(ref, () => ({
// changeVal 就是暴露给父组件的方法
setOpen: newVal => {
setOpen(newVal)
setOpen(newVal);
},
}));
}));
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, 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);
};
useEffect(() => {
const onChange = () => {
if (menusSwitch === 0) {
setMenusSwitch(1)
return false
}
setMenusSwitch(0)
return false
}
useEffect(() => {
console.log('open', open);
}, [open])
}, [open]);
return (
<>
{open && <Modal
title="Title"
visible={open}
onOk={handleOk}
confirmLoading={confirmLoading}
onCancel={handleCancel}
>
<p>{modalText}</p>
</Modal>}
{open && (
<Modal
title="添加分组"
visible={open}
onOk={handleOk}
confirmLoading={confirmLoading}
initialValues={{
menusSwitch: 0,
}}
onCancel={handleCancel}
>
<Form form={formProject}>
<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/AddSellTimeModal.jsx
View file @ 16e5208e
import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
import { Button, Modal } from 'antd';
import { Button, Modal, Form, Checkbox, Row, Col, time, DatePicker } from 'antd';
import { map } from 'lodash';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { ENUM_WEEK } from '../config';
import styles from '../common.less';
const { RangePicker } = DatePicker;
const AddSellTimeModal = (props, ref) => {
const [confirmLoading, setConfirmLoading] = useState(false);
const [modalText, setModalText] = useState('Content of the modal');
const [open, setOpen] = useState(false);
// const {
// open,
// setOpen,
......@@ -15,9 +18,9 @@ const AddSellTimeModal = (props, ref) => {
useImperativeHandle(ref, () => ({
// changeVal 就是暴露给父组件的方法
setOpen: newVal => {
setOpen(newVal)
setOpen(newVal);
},
}));
}));
const handleOk = () => {
setModalText('The modal will be closed after two seconds');
setConfirmLoading(true);
......@@ -31,23 +34,107 @@ const AddSellTimeModal = (props, ref) => {
console.log('Clicked cancel button');
setOpen(false);
};
useEffect(() => {
useEffect(() => {
console.log('open', open);
}, [open])
}, [open]);
const onChange = () => {};
return (
<>
{open && <Modal
title="Title"
visible={open}
onOk={handleOk}
confirmLoading={confirmLoading}
onCancel={handleCancel}
>
<p>{modalText}</p>
</Modal>}
{open && (
<Modal
title="售卖时段"
visible={open}
onOk={handleOk}
confirmLoading={confirmLoading}
onCancel={handleCancel}
width={1050}
>
<Form
name="validate_other"
// {...formItemLayout}
// onFinish={onFinish}
initialValues={{
'input-number': 3,
'checkbox-group': ['A', 'B'],
rate: 3.5,
}}
>
<Form.Item name="chec" 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 name="rate" label="售卖时段">
<Form.List
name="names"
rules={[
{
validator: async (_, names) => {
if (!names || names.length < 2) {
return Promise.reject(new Error('At least 2 passengers'));
}
},
},
]}
>
{(fields, { add, remove }, { errors }) => (
<>
{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,
whitespace: true,
message: "Please input passenger's name or delete this field.",
},
]}
>
<RangePicker picker="time" 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
View file @ 16e5208e
......@@ -35,12 +35,14 @@ const FormInformationBasic = forwardRef((props, ref) => {
shopList,
afterAddressList,
specListData,
queryShopList,
} = props;
const [form] = Form.useForm();
const [noreBrandList, setNoreBrandList] = useState([]);
const customer = useContext(ServiceContext);
const childAddMenusModalRef = useRef(null);
const [cardImageList, setCardImageList] = useState([]);
const [takeawayImageList, setTakeawayImageList] = useState([]);
const onCheck = async () => {
try {
......@@ -90,10 +92,10 @@ const FormInformationBasic = forwardRef((props, ref) => {
</div>
</div>
);
const onCardSuccessImageList = imgList => {
setCardImageList(imgList);
const onTakeawayImageList = imgList => {
setTakeawayImageList(imgList);
form.setFieldsValue({
cardImageList: imgList,
commonImageList: imgList,
});
};
const getFormValues = debounce(() => {
......@@ -118,6 +120,8 @@ const FormInformationBasic = forwardRef((props, ref) => {
useEffect(() => {
console.log('!customer.isTakeawayService', customer);
console.log('newCategoryList[customer.productType]', newCategoryList[customer.productType]);
console.log('newCategoryList[customer.productType]', shopList);
}, [customer.productType]);
return (
<Form
......@@ -159,16 +163,15 @@ const FormInformationBasic = forwardRef((props, ref) => {
showSearch={{ filter: filterCategoryOptions }}
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
onChange={props.onCategoryChange}
options={newCategoryList[customer.productType]}
dropdownRender={dropdownRender}
options={shopList}
// dropdownRender={dropdownRender}
/>
</Form.Item>
)}
{/* 新增菜单分组弹框 */}
<AddMenusModal ref={childAddMenusModalRef} />
{/* <AddMenusModal ref={childAddMenusModalRef} queryShopList={queryShopList} /> */}
<Form.Item
name="categoryId"
name="storageRackIds"
label="商品类目"
rules={[{ type: 'array', required: true, message: '请输入商品类目!' }]}
>
......@@ -184,7 +187,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
{/* 外卖-商品图片 */}
{customer.isTakeawayService && (
<Form.Item
name="cardImageList"
name="commonImageList"
label="商品图片"
extra="支持.jpg/png格式图片，建议单张比例1:1，大小200kb左右，最多可以上传5张"
rules={[
......@@ -196,11 +199,11 @@ const FormInformationBasic = forwardRef((props, ref) => {
]}
>
<UploadImage
name="cardImageList"
name="takeawayImageList"
limit={5}
disabled={customer.isDisabled}
pictures={cardImageList}
setPictureList={list => onCardSuccessImageList(list)}
pictures={takeawayImageList}
setPictureList={list => onTakeawayImageList(list)}
/>
</Form.Item>
)}
......
src/pages/ServiceGoods/components/FormTakeaway.jsx
View file @ 16e5208e
......@@ -20,7 +20,6 @@ import {
Cascader,
Divider,
} from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Title } from './CommonTemplate';
import { formItemLayout, ENUM_REPERTORY, ENUM_SET_REPERTORY } from '../config';
import { ServiceContext } from '../context';
......@@ -48,7 +47,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
const [form] = Form.useForm();
const [initValue, setInitValue] = useState(createInitValues());
const customer = useContext(ServiceContext);
const [cardImageList, setCardImageList] = useState([]);
const [detailImageList, setDetailImageList] = useState([]);
const [newCategoryList, setNewCategoryList] = useState({});
const addSellTimeRef = useRef(null);
const AddRepertoryRef = useRef(null);
......@@ -74,6 +73,8 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
const getFormValues = debounce(() => {
const values = form.getFieldsValue();
console.log('values========', values);
props.onValuesChange({ settlementItem: values });
}, 400);
......@@ -100,9 +101,9 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
// 上传图片
const onCardSuccessImageList = imgList => {
setCardImageList(imgList);
setDetailImageList(imgList);
form.setFieldsValue({
cardImageList: imgList,
detailImageList: imgList,
});
};
const radioChangeEvent = key => {
......@@ -139,6 +140,10 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
const showAddRepertoryModal = () => {
AddRepertoryRef.current.setOpenRepertory(true);
};
// 显示加入库存弹框
const showMultiRepertoryModal = () => {
AddMultiSpecRef.current.setMultiRepertory(true);
};
const onFinish = values => {
console.log('Received values of form:', values);
};
......@@ -147,7 +152,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
<Form
{...formItemLayout}
form={form}
name="register"
name="takeaway"
initialValues={initValue}
scrollToFirstError
onValuesChange={getFormValues}
......@@ -162,22 +167,15 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
/>
</Form.Item>
<Form.Item
name="cardImageList"
name="detailImageList"
label="商品图片"
extra="支持.jpg/png格式图片，建议单张切片宽750像素，大小200kb左右，您可以拖拽图片调整顺序，最多上传5张。"
// rules={[
// {
// required: true,
// type: 'array',
// message: '请上传商品图片！',
// },
// ]}
>
<UploadImage
name="cardImageList"
name="detailImageList"
limit={5}
disabled={customer.isDisabled}
pictures={cardImageList}
pictures={detailImageList}
setPictureList={list => onCardSuccessImageList(list)}
/>
</Form.Item>
......@@ -323,11 +321,11 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
type="primary"
size="small"
onClick={() => {
showAddRepertoryModal(true);
showMultiRepertoryModal(true);
}}
shape="round"
>
添加规格
添加多规格
</Button>
<Form.Item
name="receptionVolume"
......@@ -335,108 +333,24 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
className={styles.multiSpecification}
>
<Button size="small" style={{ marginBottom: '10px' }} shape="round">
一键设置库存
统一设置置库存
</Button>
<Form.Item label="多规格1">
<div
className={styles.specRepertory}
onClick={() => {
showAddRepertoryModal(true);
}}
>
1/3
去设置
</div>
</Form.Item>
</Form.Item>
</Form.Item>
{/* 33333 */}
<Form.Item>
<div>份量(如大小/小份、微辣/特辣)</div>
<Form.List name="users">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<Space
key={key}
style={{
display: 'flex',
marginBottom: 8,
}}
align="baseline"
>
<Form.Item
{...restField}
name={[name, 'first']}
rules={[
{
required: true,
message: 'Missing first name',
},
]}
>
<Input placeholder="名称" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'last']}
rules={[
{
required: true,
message: 'Missing last name',
},
]}
>
<Input placeholder="约 份量（数字）" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'last']}
rules={[
{
required: true,
message: 'Missing last name',
},
]}
>
<Input placeholder="约 份量（数字）" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'last']}
rules={[
{
required: true,
message: 'Missing last name',
},
]}
>
<Input placeholder="销售价（元）" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'last']}
rules={[
{
required: true,
message: 'Missing last name',
},
]}
>
<Input placeholder="活动价（元）" />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form.Item>
</Form>
{/* 加入库存 */}
<AddRepertoryModal ref={AddRepertoryRef} />
......
src/pages/ServiceGoods/config.js
View file @ 16e5208e
......@@ -331,3 +331,12 @@ 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: '周日' },
]
src/pages/ServiceGoods/index.jsx
View file @ 16e5208e
......@@ -22,6 +22,7 @@ import {
getByProductType,
apiCreateDraft,
apiEditDraft,
apiQueryShopList,
} from './service';
import { isUrl, filterSendData, clearCurrent, onAutoSaveValue, localAutoSaveKey } from './utils';
import { ServiceContext } from './context';
......@@ -61,6 +62,11 @@ 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 [visibleCacheEdit, setVisibleCacheEdit] = useState(false); // 显示有缓存未保存提示
const [checkFormList] = useState([
basicRef,
......@@ -150,7 +156,13 @@ const ServiceGoods = options => {
setSpecList(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();
......@@ -212,7 +224,7 @@ const ServiceGoods = options => {
sendData.productDraftId = SourceData.id;
}
console.log('sendData :>> ', sendData);
sendMerchantProductHttpRequest(sendData);
// sendMerchantProductHttpRequest(sendData);
}
};
......@@ -459,6 +471,7 @@ const ServiceGoods = options => {
ref={basicRef}
editData={editData.infoMation}
newCategoryList={newCategoryList}
shopList={shopList}
categoryList={categoryList}
virtualCategoryList={virtualCategoryList}
brandList={brandList}
......@@ -466,6 +479,7 @@ const ServiceGoods = options => {
specListData={specListData}
onCategoryChange={onCategoryChange}
onValuesChange={onValuesChange}
// queryShopList={queryShopList}
/>
{[1, 2].includes(productType) && [
......
src/pages/ServiceGoods/service.js
View file @ 16e5208e
......@@ -117,3 +117,16 @@ export const apiEditDraft = data =>
prefix: goodsApi,
data,
});
// 查询分组列表
export const apiQueryShopList = data =>
request.post('/api/merchants/products/storageRack/listByShopIdAndStorageRackIds', {
prefix: goodsApi,
data,
});
// 新建分组
export const apiCreateShop = data =>
request.post('/api/merchants/products/storageRack/create', {
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