Skip to content

J
jinfa-platform
Commit 01a889d4 authored by 卢均锐's avatar 卢均锐
Browse files
Options

feat: 营销能力-新增活动-部分判断逻辑&活动类型组件

parent d74978c0
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 71 deletions
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/add.tsx
View file @ 01a889d4
......@@ -36,11 +36,16 @@ const Add = () => {
setExtraType(1)
}, [ruleType])
const _handleSave = async () => {
const basicRef = await basicForm.current.get();
console.log(basicRef)
}
return (
<PeripheralLayout
no={<ProgressBar ratio={85} />}
tabLink={TABLINK}
effect={<Button type="primary" ><SaveOutlined /> 保存</Button>}
effect={<Button type="primary" onClick={_handleSave}><SaveOutlined /> 保存</Button>}
components={
<>
<AddFormBasicItem currentRef={basicForm} setRuleType={setRuleType} />
......
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/addFormBasic/index.tsx
View file @ 01a889d4
import React, { useEffect, useState, useMemo } from 'react';
import { Checkbox, Radio, Button, Form, Input, Row, Col, DatePicker, Select, Space } from 'antd';
import moment from 'moment';
import Card from '@/pages/transaction/components/card';
......@@ -47,6 +48,8 @@ const AddFormBasic: React.FC<AddFormBasicProps> = (props: any) => {
name: 'basic',
data: { ...res },
})
}).catch(err => {
console.log(err)
})
})
}
......@@ -62,7 +65,7 @@ const AddFormBasic: React.FC<AddFormBasicProps> = (props: any) => {
initialValues={{ type: 1 }}
className={formStyle.addForm}
onValuesChange={(changedValues, allValues) => {
if(Object.keys(changedValues).includes('type')){
if (Object.keys(changedValues).includes('type')) {
setRuleType(changedValues.type)
}
}}
......@@ -73,28 +76,64 @@ const AddFormBasic: React.FC<AddFormBasicProps> = (props: any) => {
name='name'
label="活动名称"
rules={[{ required: true, message: '请输入活动名称' }]}>
<Input placeholder="最长60个字符，30个汉字" maxLength={30} />
<Input placeholder="最长60个字符，30个汉字" maxLength={30} allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="活动时间"
required>
<Space style={{ display: 'flex' }}>
<Space style={{ display: 'flex' }} align='baseline'>
<Form.Item
name='startTime'
label="活动开始时间"
noStyle
rules={[{ required: true, message: '请选择活动开始时间！' }]}>
<DatePicker showTime />
rules={[
{ required: true, message: '请选择活动开始时间！' }, () => ({
async validator(_, value) {
let _exVal = await form.getFieldValue('endTime');
if (_exVal && moment(value).isAfter(_exVal)) {
return Promise.reject(new Error('活动开始时间需要早于活动结束时间'));
}
return Promise.resolve();
}
})
]}>
<DatePicker
showTime
allowClear
disabledDate={(current) => {
const _endTime = form.getFieldValue('endTime');
if (_endTime) {
return current && ((moment(current).diff(moment(_endTime), 'day') > 0) || current < moment().startOf('second'))
} else {
return current && current < moment().startOf('second')
}
}} />
</Form.Item>
~
<Form.Item
name='endTime'
label="活动结束时间"
noStyle
rules={[{ required: true, message: '请选择活动结束时间！' }]}>
<DatePicker showTime />
rules={[
{ required: true, message: '请选择活动结束时间！' }, () => ({
async validator(_, value) {
let _exVal = await form.getFieldValue('startTime');
if (_exVal && moment(value).isBefore(_exVal)) {
return Promise.reject(new Error('活动结束时间需要晚于活动开始时间'));
}
return Promise.resolve();
}
})
]}>
<DatePicker
showTime
allowClear
disabledDate={(current) => {
const _startTime = form.getFieldValue('startTime');
if (_startTime) {
return current && current < moment(_startTime).startOf('second')
} else {
return current && current < moment().startOf('second')
}
}} />
</Form.Item>
</Space>
</Form.Item>
......
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/addFormRule/activeTypeButton/index.tsx 0 → 100644
View file @ 01a889d4
import React, { useEffect, useState, useMemo } from 'react';
import { Checkbox, Radio, Button, Form, Input, Row, Col, DatePicker, Select, FormInstance, Space } from 'antd';
import styles from './index.less';
interface ActiveTypeButtonProps {
value?: any,
onChange?: any,
extra?: any
}
const ActiveTypeButton: React.FC<ActiveTypeButtonProps> = (props: any) => {
const { value, onChange, extra } = props;
const [activeType, setActiveType] = useState(value || []);
const [isFirst, setIsFirst] = useState<boolean>(true);
useEffect(() => {
if (!isFirst) {
onChange?.(activeType.length > 0 ? activeType : null);
}
}, [activeType, isFirst])
const _buttonsClick = (value: number) => {
let _activeType = [...activeType];
const _i = _activeType.indexOf(value)
if (_i >= 0) {
_activeType.splice(_i, 1);
} else {
_activeType.push(value);
}
setActiveType(_activeType);
isFirst && setIsFirst(false);
}
const _checkInList = (value: number) => {
return activeType.includes(value);
}
return (
<Row gutter={[8, 8]}>
{extra.enum.map((items) => {
return (
<Col key={`buttons_${items.value}`}>
<Button className={_checkInList(items.value) ? styles.buttonAct : ''} onClick={() => { _buttonsClick(items.value) }}>{items.label}</Button>
</Col>
)
})}
</Row>
);
}
export default ActiveTypeButton;
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/addFormRule/index.tsx
View file @ 01a889d4
......@@ -13,6 +13,7 @@ import SpaceInputField from './spaceInput';
import SeckillTimeField from './seckillTime';
import PreSaleTimeField from './preSaleTime';
import TrialTimeField from './trialTime';
import ActiveTypeButtonField from './activeTypeButton';
import formStyle from '../../style/add.less';
......@@ -46,12 +47,14 @@ const RULE_MAP = (type, extraType) => {
tooltip: '允许叠加活动类型表明在同一时间内允许同一个商品可以叠加的活动类型',
name: 'activeType',
rules: [{ required: true, message: '请选择叠加活动类型！' }],
enum: [
{ label: '满量促销', value: 1 },
{ label: '满额促销', value: 2 },
{ label: '赠送促销', value: 3 },
{ label: '换购', value: 4 },
]
extra: {
enum: [
{ label: '满量促销', value: 1 },
{ label: '满额促销', value: 2 },
{ label: '赠送促销', value: 3 },
{ label: '换购', value: 4 },
]
}
},
{
fieldType: 'checkbox',
......@@ -130,13 +133,15 @@ const RULE_MAP = (type, extraType) => {
tooltip: '允许叠加活动类型表明在同一时间内允许同一个商品可以叠加的活动类型',
name: 'activeType',
rules: [{ required: true, message: '请选择叠加活动类型！' }],
enum: [
{ label: '特价促销', value: 1 },
{ label: '直降促销', value: 2 },
{ label: '折扣促销', value: 3 },
{ label: '赠送促销', value: 4 },
{ label: '换购', value: 5 },
]
extra: {
enum: [
{ label: '特价促销', value: 1 },
{ label: '直降促销', value: 2 },
{ label: '折扣促销', value: 3 },
{ label: '赠送促销', value: 4 },
{ label: '换购', value: 5 },
]
}
},
{
fieldType: 'checkbox',
......@@ -201,16 +206,18 @@ const RULE_MAP = (type, extraType) => {
tooltip: '允许叠加活动类型表明在同一时间内允许同一个商品可以叠加的活动类型',
name: 'activeType',
rules: [{ required: true, message: '请选择叠加活动类型！' }],
enum: [
{ label: '特价促销', value: 1 },
{ label: '直降促销', value: 2 },
{ label: '折扣促销', value: 3 },
{ label: '满量促销', value: 4 },
{ label: '满额促销', value: 5 },
{ label: '多件促销', value: 6 },
{ label: '组合促销', value: 7 },
{ label: '换购', value: 8 },
]
extra: {
enum: [
{ label: '特价促销', value: 1 },
{ label: '直降促销', value: 2 },
{ label: '折扣促销', value: 3 },
{ label: '满量促销', value: 4 },
{ label: '满额促销', value: 5 },
{ label: '多件促销', value: 6 },
{ label: '组合促销', value: 7 },
{ label: '换购', value: 8 },
]
}
},
{
fieldType: 'checkbox',
......@@ -267,10 +274,12 @@ const RULE_MAP = (type, extraType) => {
tooltip: '允许叠加活动类型表明在同一时间内允许同一个商品可以叠加的活动类型',
name: 'activeType',
rules: [{ required: true, message: '请选择叠加活动类型！' }],
enum: [
{ label: '赠送促销', value: 1 },
{ label: '换购', value: 2 },
]
extra: {
enum: [
{ label: '赠送促销', value: 1 },
{ label: '换购', value: 2 },
]
}
},
{
fieldType: 'checkbox',
......@@ -326,10 +335,12 @@ const RULE_MAP = (type, extraType) => {
tooltip: '允许叠加活动类型表明在同一时间内允许同一个商品可以叠加的活动类型',
name: 'activeType',
rules: [{ required: true, message: '请选择叠加活动类型！' }],
enum: [
{ label: '赠送促销', value: 1 },
{ label: '换购', value: 2 },
]
extra: {
enum: [
{ label: '赠送促销', value: 1 },
{ label: '换购', value: 2 },
]
}
},
{
fieldType: 'checkbox',
......@@ -633,16 +644,18 @@ const RULE_MAP = (type, extraType) => {
tooltip: '允许叠加活动类型表明在同一时间内允许同一个商品可以叠加的活动类型',
name: 'button',
rules: [{ required: true, message: '请选择叠加活动类型！' }],
enum: [
{ label: '特价促销', value: 1 },
{ label: '直降促销', value: 2 },
{ label: '折扣促销', value: 3 },
{ label: '满量促销', value: 4 },
{ label: '满额促销', value: 5 },
{ label: '赠送促销', value: 6 },
{ label: '多件促销', value: 7 },
{ label: '组合促销', value: 8 },
]
extra: {
enum: [
{ label: '特价促销', value: 1 },
{ label: '直降促销', value: 2 },
{ label: '折扣促销', value: 3 },
{ label: '满量促销', value: 4 },
{ label: '满额促销', value: 5 },
{ label: '赠送促销', value: 6 },
{ label: '多件促销', value: 7 },
{ label: '组合促销', value: 8 },
]
}
},
{
fieldType: 'checkbox',
......@@ -826,17 +839,7 @@ const AddFormRule: React.FC<AddFormRuleProps> = (props: any) => {
const _renderFields = (field: any) => {
if (field.fieldType === 'button') {
return (
<Row gutter={[8, 8]}>
{field.enum.map((items) => {
return (
<Col key={`${field.name}_buttons_${items.value}`}>
<Button>{items.label}</Button>
</Col>
)
})}
</Row>
)
return <ActiveTypeButtonField extra={field.extra} />
} else if (field.fieldType === 'checkbox') {
return (<Checkbox>{field.enum[0].label}</Checkbox>)
} else if (field.fieldType === 'radio') {
......@@ -873,7 +876,7 @@ const AddFormRule: React.FC<AddFormRuleProps> = (props: any) => {
{field.extra[extraType].header}
<Form.Item
{...restField}
style={{margin: 0}}
style={{ margin: 0 }}
name={[name, 'first']}
fieldKey={[fieldKey, 'first']}
rules={[{ required: true, message: 'Missing first name' }]}
......@@ -883,7 +886,7 @@ const AddFormRule: React.FC<AddFormRuleProps> = (props: any) => {
{field.extra[extraType].middle}
<Form.Item
{...restField}
style={{margin: 0}}
style={{ margin: 0 }}
name={[name, 'last']}
fieldKey={[fieldKey, 'last']}
rules={[{ required: true, message: 'Missing last name' }]}
......@@ -894,7 +897,7 @@ const AddFormRule: React.FC<AddFormRuleProps> = (props: any) => {
</Space>
))}
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
新增
新增
</Button>
</>
)}
......@@ -905,7 +908,7 @@ const AddFormRule: React.FC<AddFormRuleProps> = (props: any) => {
<Space style={{ display: 'flex', marginBottom: 8 }} align="center">
{field.extra.header}
<Form.Item
style={{margin: 0}}
style={{ margin: 0 }}
name={'first'}
rules={[{ required: true, message: 'Missing first name' }]}
>
......@@ -913,7 +916,7 @@ const AddFormRule: React.FC<AddFormRuleProps> = (props: any) => {
</Form.Item>
{field.extra.middle}
<Form.Item
style={{margin: 0}}
style={{ margin: 0 }}
name={'last'}
rules={[{ required: true, message: 'Missing last name' }]}
>
......@@ -946,7 +949,7 @@ const AddFormRule: React.FC<AddFormRuleProps> = (props: any) => {
useEffect(() => {
form.resetFields();
},[ruleType])
}, [ruleType])
return (
<Card
......@@ -958,7 +961,7 @@ const AddFormRule: React.FC<AddFormRuleProps> = (props: any) => {
initialValues={{ promotionType: 1 }}
className={formStyle.addForm}
onValuesChange={(changedValues, allValues) => {
if(Object.keys(changedValues).includes('promotionType')){
if (Object.keys(changedValues).includes('promotionType')) {
setExtraType(changedValues.promotionType)
}
}}
......
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