Skip to content

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

feat: 新增份量表单

parent 16e5208e
Expand all 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/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