Commit a0b4cced1264f957f2bffeb1629f22b5e187cac0
1 parent
079a6524
活动变更记录报名、签到、抽奖详情展示
Showing
11 changed files
with
670 additions
and
32 deletions
config/routers/mkt.ts
@@ -25,7 +25,7 @@ export default [ | @@ -25,7 +25,7 @@ export default [ | ||
25 | }, | 25 | }, |
26 | /**活动变更查询记录 */ | 26 | /**活动变更查询记录 */ |
27 | { | 27 | { |
28 | - path: '/mkt/prize/record/changes', | 28 | + path: '/mkt/prize/record/changes/:activityNo?', |
29 | component: './mkt/ActivityChanges', | 29 | component: './mkt/ActivityChanges', |
30 | }, | 30 | }, |
31 | /**查询活动发放奖品列表-运维 */ | 31 | /**查询活动发放奖品列表-运维 */ |
src/pages/mkt/ActivityChanges/components/AwardConfigs/CouponGifts.tsx
0 → 100644
1 | +import React, { useEffect, useState } from 'react'; | ||
2 | +import { Button, Card, Table } from 'antd'; | ||
3 | +import UpsertCoupon from "@/pages/coupon/CouponConfig"; | ||
4 | + | ||
5 | +const { Column } = Table; | ||
6 | + | ||
7 | +// 门店范围 | ||
8 | +enum ShopLimit { | ||
9 | + "发券门店" = 1, | ||
10 | + "自定义门店", | ||
11 | +} | ||
12 | + | ||
13 | +interface Props { | ||
14 | + value?: ExternalPromotion.Gifts, | ||
15 | + onChange?: Function, | ||
16 | + disabled?: boolean, | ||
17 | +} | ||
18 | +interface Coupon { | ||
19 | + visible: boolean; | ||
20 | + index?: number; | ||
21 | + confNo?: string; | ||
22 | + giftItemId?: number; | ||
23 | +} | ||
24 | +function SignupGifts({ value, onChange, disabled }: Props) { | ||
25 | + const [giftList, setGiftList] = useState<ExternalPromotion.giftItems[]>([]); | ||
26 | + const [coupon, setCoupon] = useState<Coupon>({ visible: false, index: undefined, confNo: undefined }); | ||
27 | + useEffect(() => { | ||
28 | + value && value[0].giftItems && setGiftList(value[0].giftItems); | ||
29 | + }, [value]); | ||
30 | + | ||
31 | + return ( | ||
32 | + <div> | ||
33 | + <Card | ||
34 | + style={{ display: "block" }} | ||
35 | + > | ||
36 | + <Table | ||
37 | + bordered | ||
38 | + dataSource={giftList} | ||
39 | + rowKey={(record: ExternalPromotion.giftItems, index?: number) => record.classifyCode || record.couponCode} | ||
40 | + > | ||
41 | + <Column | ||
42 | + title="优惠券类型" | ||
43 | + dataIndex="giftName" | ||
44 | + key="giftType" | ||
45 | + width="6%" | ||
46 | + /> | ||
47 | + <Column | ||
48 | + title="优惠券别名" | ||
49 | + dataIndex="aliasName" | ||
50 | + key="orgType" | ||
51 | + width="10%" | ||
52 | + render={(text: string) => <span>{text || "--"}</span>} | ||
53 | + /> | ||
54 | + <Column | ||
55 | + title="金额" | ||
56 | + dataIndex="discountsAmount" | ||
57 | + key="discountsAmount" | ||
58 | + width="4%" | ||
59 | + /> | ||
60 | + <Column | ||
61 | + title="使用条件" | ||
62 | + dataIndex="orgType" | ||
63 | + key="orgType" | ||
64 | + width="10%" | ||
65 | + render={(text: number) => ( | ||
66 | + <span>{text ? ShopLimit[text] : "--"}</span> | ||
67 | + )} | ||
68 | + /> | ||
69 | + <Column | ||
70 | + title="操作" | ||
71 | + width="4%" | ||
72 | + render={( | ||
73 | + text, | ||
74 | + record: ExternalPromotion.giftItems, | ||
75 | + index: number | ||
76 | + ) => ( | ||
77 | + <Button type="link" onClick={() => setCoupon({ ...coupon, visible: true, confNo: record.couponCode })}>查看</Button> | ||
78 | + )} | ||
79 | + /> | ||
80 | + </Table> | ||
81 | + </Card> | ||
82 | + <UpsertCoupon | ||
83 | + visible={coupon.visible} | ||
84 | + onCancel={() => setCoupon({ ...coupon, visible: false, confNo: undefined, giftItemId: undefined })} | ||
85 | + disabled | ||
86 | + // onSave={} | ||
87 | + remark="市场活动" | ||
88 | + confNo={coupon.confNo} | ||
89 | + // carSelectApi={bizType == 1 ? getACarList : undefined} | ||
90 | + // changeEditKeys={couponStatus ? ["aliasName", "schemeList"] : undefined} | ||
91 | + // getCouponDetailsApi={couponStatus ? (v: string) => getCouponChangeDetails({ activityNo, confNo: v }) : undefined} | ||
92 | + // saveChangeCouponApi={couponStatus ? (values: any) => saveChangeCoupon({ ...values, activityNo }) : undefined} | ||
93 | + /> | ||
94 | + </div> | ||
95 | + ); | ||
96 | +} | ||
97 | + | ||
98 | +export default React.memo(SignupGifts); | ||
0 | \ No newline at end of file | 99 | \ No newline at end of file |
src/pages/mkt/ActivityChanges/components/AwardConfigs/Coupons.tsx
0 → 100644
1 | +import React, { useState, useEffect } from "react"; | ||
2 | +import { | ||
3 | + Table, | ||
4 | + Form, | ||
5 | + Button, | ||
6 | + Modal, | ||
7 | + Input, | ||
8 | + InputNumber, | ||
9 | + Space, | ||
10 | + message, | ||
11 | + Card, | ||
12 | + Popconfirm, | ||
13 | +} from "antd"; | ||
14 | +import UpsertCoupon from "@/pages/coupon/CouponConfig"; | ||
15 | + | ||
16 | +const { Column } = Table; | ||
17 | +interface Props { | ||
18 | + //按概率/固定奖项人数 | ||
19 | + awardWay?: number; | ||
20 | + mulLottery?: boolean; //是否多轮抽奖 | ||
21 | + onChange?: Function; | ||
22 | + value?: any[]; | ||
23 | + remove?: Function; | ||
24 | + name?: number; | ||
25 | + disabled?: boolean; | ||
26 | +} | ||
27 | +interface Coupon { | ||
28 | + visible: boolean; | ||
29 | + index?: number; | ||
30 | + itemIndex?: number; | ||
31 | + confNo?: string; | ||
32 | + giftItemId?: number; | ||
33 | +} | ||
34 | + | ||
35 | +export default function Coupons({ | ||
36 | + awardWay, | ||
37 | + mulLottery, | ||
38 | + value, | ||
39 | + onChange, | ||
40 | + remove, | ||
41 | + name, | ||
42 | + disabled | ||
43 | +}: Props) { | ||
44 | + const [form] = Form.useForm(); | ||
45 | + // 保存表格中的数据 | ||
46 | + const [savaList, setSaveList] = useState<any[]>([]); | ||
47 | + /** 是否点击过无奖占位 */ | ||
48 | + const [noReward, setNoRewad] = useState(false); | ||
49 | + /** 无奖占位按钮能否点击 */ | ||
50 | + const [noRewardDisable, setNoRewadDisable] = useState(false); | ||
51 | + //保存索引 | ||
52 | + const [itemIndex, setItemIndex] = useState<number>(); | ||
53 | + //奖项名称Modal显示 | ||
54 | + const [visible, setVisible] = useState(false); | ||
55 | + //优惠券Modal | ||
56 | + const [coupon, setCoupon] = useState<Coupon>({ | ||
57 | + visible: false, | ||
58 | + index: undefined, | ||
59 | + confNo: undefined, | ||
60 | + }); | ||
61 | + // 保存当前选中的奖项 | ||
62 | + const [currentItem, SetCurrentItem] = useState({ | ||
63 | + awardName: undefined, | ||
64 | + winningNum: undefined, | ||
65 | + }); | ||
66 | + const pattern1 = /^([1-9]\d?|100)$/; //(0,100]之间百分数 | ||
67 | + const pattern2 = /^\+?[1-9]\d*$/; // 大于0的整数 | ||
68 | + | ||
69 | + useEffect(() => { | ||
70 | + if (visible && currentItem.awardName) { | ||
71 | + //编辑 | ||
72 | + form.setFieldsValue({ | ||
73 | + ...currentItem, | ||
74 | + }); | ||
75 | + } | ||
76 | + }, [visible, currentItem]); | ||
77 | + | ||
78 | + useEffect(() => { | ||
79 | + if (value && value.length) { | ||
80 | + setSaveList([...value]); | ||
81 | + } | ||
82 | + }, [value]); | ||
83 | + | ||
84 | + return ( | ||
85 | + <> | ||
86 | + <Card | ||
87 | + style={{ display: "block" }} | ||
88 | + > | ||
89 | + <Table | ||
90 | + dataSource={value} | ||
91 | + rowKey={(record) => record.awardName} | ||
92 | + bordered | ||
93 | + > | ||
94 | + <Column | ||
95 | + title="奖项名称" | ||
96 | + dataIndex="awardName" | ||
97 | + key="awardName" | ||
98 | + width="4%" | ||
99 | + render={(text, record: any, index) => { | ||
100 | + if (text === "谢谢惠顾") { | ||
101 | + return <span>{text}</span>; | ||
102 | + } else { | ||
103 | + return ( | ||
104 | + <Button | ||
105 | + type="link" | ||
106 | + // onClick={changeEnable ? () => { | ||
107 | + // // setVisible(true); | ||
108 | + // setNoRewad(false); | ||
109 | + // SetCurrentItem(record); | ||
110 | + // setItemIndex(index); | ||
111 | + // setVisible(true); | ||
112 | + // } : undefined} | ||
113 | + > | ||
114 | + {text || "--"} | ||
115 | + </Button> | ||
116 | + ); | ||
117 | + } | ||
118 | + }} | ||
119 | + /> | ||
120 | + <Column | ||
121 | + title={awardWay === 1 ? "中奖概率" : "中奖名额"} | ||
122 | + dataIndex="winningNum" | ||
123 | + width="4%" | ||
124 | + render={(text) => (awardWay === 1 ? `${text}%` : text)} | ||
125 | + /> | ||
126 | + | ||
127 | + <Column | ||
128 | + title="奖品" | ||
129 | + dataIndex="giftItems" | ||
130 | + key="prize" | ||
131 | + width="10%" | ||
132 | + render={( | ||
133 | + text: ExternalPromotion.giftItems[], | ||
134 | + record, | ||
135 | + index: number | ||
136 | + ) => text && | ||
137 | + text.length > 0 && | ||
138 | + text.map((item, itemIndex: number) => ( | ||
139 | + <div key={item.couponCode}> | ||
140 | + <Space key={item.couponCode}> | ||
141 | + <Button | ||
142 | + type="link" | ||
143 | + style={{ padding: 0 }} | ||
144 | + onClick={() => { | ||
145 | + setCoupon({ | ||
146 | + ...coupon, | ||
147 | + visible: true, | ||
148 | + confNo: item.couponCode, | ||
149 | + index, | ||
150 | + itemIndex, | ||
151 | + }); | ||
152 | + }} | ||
153 | + > | ||
154 | + <span style={{ whiteSpace: 'pre-wrap' }}>{itemIndex + 1}.{item.aliasName}</span> | ||
155 | + </Button> | ||
156 | + </Space> | ||
157 | + </div> | ||
158 | + ))} | ||
159 | + /> | ||
160 | + </Table> | ||
161 | + </Card> | ||
162 | + | ||
163 | + <Modal | ||
164 | + title={`${currentItem.awardName ? "编辑" : "新增"}奖品`} | ||
165 | + visible={visible} | ||
166 | + afterClose={() => { | ||
167 | + form.resetFields(); | ||
168 | + SetCurrentItem({}); | ||
169 | + }} | ||
170 | + // onOk={_onOk} | ||
171 | + onCancel={() => { | ||
172 | + setVisible(false); | ||
173 | + form.resetFields(); | ||
174 | + SetCurrentItem({}); | ||
175 | + }} | ||
176 | + > | ||
177 | + <Form | ||
178 | + form={form} | ||
179 | + name="basic" | ||
180 | + labelCol={{ span: 6 }} | ||
181 | + wrapperCol={{ span: 16 }} | ||
182 | + // onFinish={_onOk} | ||
183 | + autoComplete="off" | ||
184 | + // initialValues={{ | ||
185 | + // awardName: (awardWay === 2 && noReward) ? "谢谢惠顾" : "", | ||
186 | + // }} | ||
187 | + > | ||
188 | + <Form.Item | ||
189 | + label="奖项名称:" | ||
190 | + name="awardName" | ||
191 | + rules={[{ required: true, message: "请输入奖项名称" }]} | ||
192 | + // initialValue={(awardWay === 2 && noReward) ? "谢谢惠顾" : ""} | ||
193 | + > | ||
194 | + <Input | ||
195 | + // disabled={(awardWay === 2 && noReward) || !!currentItem.awardName} | ||
196 | + disabled={currentItem.awardName === "谢谢惠顾"} | ||
197 | + style={{ marginLeft: 40 }} | ||
198 | + /> | ||
199 | + </Form.Item> | ||
200 | + <Form.Item | ||
201 | + label={ | ||
202 | + // !mulLottery | ||
203 | + // ? "中奖概率(%)": | ||
204 | + awardWay === 1 | ||
205 | + ? "中奖概率(%)" | ||
206 | + : "中奖名额" | ||
207 | + } | ||
208 | + name="winningNum" | ||
209 | + > | ||
210 | + <InputNumber disabled={!!currentItem.awardName && disabled} style={{ width: "100%", marginLeft: 40 }} /> | ||
211 | + </Form.Item> | ||
212 | + </Form> | ||
213 | + </Modal> | ||
214 | + | ||
215 | + {/* 优惠券配置 */} | ||
216 | + <UpsertCoupon | ||
217 | + visible={coupon.visible} | ||
218 | + disabled | ||
219 | + onCancel={() => setCoupon({ ...coupon, visible: false, confNo: undefined })} | ||
220 | + // onSave={_onSava} | ||
221 | + remark="市场活动" | ||
222 | + confNo={coupon.confNo} | ||
223 | + // carSelectApi={bizType == 1 ? getACarList : undefined} | ||
224 | + // changeEditKeys={couponStatus ? ["aliasName", "schemeList"] : undefined} | ||
225 | + // getCouponDetailsApi={couponStatus ? (v: string) => getCouponChangeDetails({ activityNo, confNo: v }) : undefined} | ||
226 | + // saveChangeCouponApi={couponStatus ? (values: any) => saveChangeCoupon({ ...values, activityNo }) : undefined} | ||
227 | + /> | ||
228 | + </> | ||
229 | + ); | ||
230 | +} |
src/pages/mkt/ActivityChanges/components/AwardConfigs/index.tsx
0 → 100644
1 | +import React, { useState, useEffect } from "react"; | ||
2 | +import { Button, Form, InputNumber, Space, Popconfirm, Spin, Divider, Radio, Row } from "antd"; | ||
3 | +// import SignupGifts from "./CouponGifts"; | ||
4 | +import SignupGifts from "./Coupons"; | ||
5 | + | ||
6 | +interface Props { | ||
7 | + data: any; | ||
8 | + mulLottery: boolean; | ||
9 | +} | ||
10 | +export default function Index({ data, mulLottery }: Props) { | ||
11 | + // const { baseInfo, readOnly, getFlowConfig, getACarList } = useStore(); | ||
12 | + // const { activityNo, bizType, changeEnable } = baseInfo; | ||
13 | + // const { data, errMsg, loading } = useInitial(getSignUpDetail, {}, { activityNo, change: changeEnable }); | ||
14 | + const [form] = Form.useForm(); | ||
15 | + const [saveLoading, setSaveLoading] = useState<boolean>(false); | ||
16 | + | ||
17 | + useEffect(() => { | ||
18 | + form.setFieldsValue({ | ||
19 | + ...data, | ||
20 | + // ladderReward: data.ladderReward != null ? Number(data.ladderReward) : 0, | ||
21 | + // awardConfigs: data.awardConfigs ? data.awardConfigs : [{ sortOrder: 1, lotteryMinLimit: 1, awardWay: 1, gifts: [{ parcelType: 2, awardName: "报名有礼", winningNum: 100, giftItems: [] }] }] | ||
22 | + }); | ||
23 | + }, [data]); | ||
24 | + | ||
25 | + return ( | ||
26 | + <> | ||
27 | + <Form form={form}> | ||
28 | + {/* 优惠券部分 */} | ||
29 | + <Divider orientation="left">赠送奖品详情</Divider> | ||
30 | + {/* <Form.Item | ||
31 | + style={{ width: "100%" }} | ||
32 | + label="发券方式" | ||
33 | + name="ladderReward" | ||
34 | + rules={[{ required: true }]} | ||
35 | + > | ||
36 | + <Radio.Group> | ||
37 | + <Radio value={0}>报名成功则送相同优惠券</Radio> | ||
38 | + <Radio value={1}>按报名顺序不同赠送不同优惠券</Radio> | ||
39 | + </Radio.Group> | ||
40 | + </Form.Item> */} | ||
41 | + <Form.Item | ||
42 | + noStyle | ||
43 | + shouldUpdate={(prevValues, currentValues) => prevValues.ladderReward !== currentValues.ladderReward} | ||
44 | + > | ||
45 | + {({ getFieldValue }) => { | ||
46 | + return ( | ||
47 | + <Form.List name="awardConfigs"> | ||
48 | + {(fields, { add, remove }) => { | ||
49 | + const _Limit = data.awardConfigs && data.awardConfigs[0].lotteryMaxLimit; | ||
50 | + return ( | ||
51 | + <> | ||
52 | + {fields.map(({ key, name, ...restField }, index) => { | ||
53 | + return ( | ||
54 | + <Space | ||
55 | + key={key} | ||
56 | + style={{ display: "flex", marginBottom: 8 }} | ||
57 | + direction="vertical" | ||
58 | + > | ||
59 | + <> | ||
60 | + {!!_Limit && mulLottery && ( | ||
61 | + <> | ||
62 | + <Divider>第{index + 1}轮</Divider> | ||
63 | + <Space key={key} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, height: 35 }} align="baseline"> | ||
64 | + <Row style={{ alignItems: 'baseline' }}> | ||
65 | + <span><span style={{ color: 'red' }}>* </span>参与名额:</span> | ||
66 | + <Form.Item | ||
67 | + {...restField} | ||
68 | + name={[name, 'lotteryMinLimit']} | ||
69 | + > | ||
70 | + <InputNumber placeholder="请输入" disabled precision={0} min={1} /> | ||
71 | + </Form.Item> | ||
72 | + <span>~</span> | ||
73 | + <Form.Item | ||
74 | + {...restField} | ||
75 | + name={[name, 'lotteryMaxLimit']} | ||
76 | + > | ||
77 | + <InputNumber disabled precision={0} min={0} /> | ||
78 | + </Form.Item> | ||
79 | + <span>名</span> | ||
80 | + </Row> | ||
81 | + {/* {!editDisabled(index) && <MinusCircleOutlined onClick={() => remove(name)} style={{ color: 'red' }} />} */} | ||
82 | + </Space> | ||
83 | + </> | ||
84 | + )} | ||
85 | + <Form.Item | ||
86 | + {...restField} | ||
87 | + noStyle | ||
88 | + shouldUpdate={(prevValues, currentValues) => prevValues.awardConfigs !== currentValues.awardConfigs} | ||
89 | + > | ||
90 | + {({ getFieldValue }) => { | ||
91 | + let _awardWay = getFieldValue("awardConfigs")[index]; | ||
92 | + return ( | ||
93 | + <Form.Item name={[name, "gifts"]}> | ||
94 | + <SignupGifts disabled awardWay={_awardWay.awardWay} /> | ||
95 | + </Form.Item> | ||
96 | + ); | ||
97 | + }} | ||
98 | + </Form.Item> | ||
99 | + </> | ||
100 | + </Space> | ||
101 | + ); | ||
102 | + // )} | ||
103 | + })} | ||
104 | + {/* {!!_mulLottery && ( | ||
105 | + <Button | ||
106 | + type="dashed" | ||
107 | + onClick={() => addRewardTimes()} | ||
108 | + block | ||
109 | + icon={<PlusOutlined />} | ||
110 | + disabled={readOnly && !changeEnable} | ||
111 | + > | ||
112 | + 增加名额配置 | ||
113 | + </Button> | ||
114 | + )} */} | ||
115 | + </> | ||
116 | + ); | ||
117 | + }} | ||
118 | + </Form.List> | ||
119 | + ); | ||
120 | + }} | ||
121 | + </Form.Item> | ||
122 | + </Form> | ||
123 | + </> | ||
124 | + ); | ||
125 | +} |
src/pages/mkt/ActivityChanges/components/BaseChangeInfo.tsx
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | +import moment from 'moment'; | ||
3 | +import { Image } from "antd"; | ||
4 | +import IMGURL from '@/utils/IMGURL'; | ||
2 | 5 | ||
3 | -export default function BaseChangeInfo() { | 6 | +export default function BaseChangeInfo({data}: Props) { |
4 | return ( | 7 | return ( |
5 | - <div /> | 8 | + <div> |
9 | + {data.activityName && <div>活动名称:{data.activityName}</div>} | ||
10 | + {data.endTime && <div>活动结束时间:{data.endTime && moment(data.endTime).format('YYYY.MM.DD HH:mm')}</div>} | ||
11 | + {data.couponInvalidTime && <div>优惠券到期时间:{data.couponInvalidTime && moment(data.couponInvalidTime).format('YYYY.MM.DD HH:mm')}</div>} | ||
12 | + {data.bannerId && ( | ||
13 | + <div> 活动轮播图: | ||
14 | + <Image | ||
15 | + width={50} | ||
16 | + height={50} | ||
17 | + placeholder | ||
18 | + src={IMGURL.showImage(data.bannerId)} | ||
19 | + /> | ||
20 | + </div> | ||
21 | + )} | ||
22 | + {data.bgId && ( | ||
23 | + <div> 活动轮播图: | ||
24 | + <Image | ||
25 | + width={50} | ||
26 | + height={50} | ||
27 | + placeholder | ||
28 | + src={IMGURL.showImage(data.bgId)} | ||
29 | + /> | ||
30 | + </div> | ||
31 | + )} | ||
32 | + </div> | ||
6 | ); | 33 | ); |
7 | } | 34 | } |
8 | \ No newline at end of file | 35 | \ No newline at end of file |
src/pages/mkt/ActivityChanges/components/ChangesDetail.tsx
1 | import React, { useEffect, useState } from 'react'; | 1 | import React, { useEffect, useState } from 'react'; |
2 | -import { Table, Modal, Tag, Space, Radio, Spin, Tabs } from 'antd'; | 2 | +import { Table, Modal, Space, Radio, Spin, Tabs } from 'antd'; |
3 | import { getChangeDetail, ChangeInfoVO } from '../api'; | 3 | import { getChangeDetail, ChangeInfoVO } from '../api'; |
4 | -import moment from 'moment'; | ||
5 | import useInitial from '@/hooks/useInitail'; | 4 | import useInitial from '@/hooks/useInitail'; |
5 | +import BaseChangeInfo from './BaseChangeInfo'; | ||
6 | +import ContentItems from './ContentItems'; | ||
7 | +import ScopeDetail from './ScopeDetail'; | ||
8 | +// import SignInDetail from './SignInDetail'; | ||
6 | 9 | ||
7 | const Column = Table.Column; | 10 | const Column = Table.Column; |
8 | interface Props { | 11 | interface Props { |
@@ -24,33 +27,34 @@ function ChangesDetail(props: Props) { | @@ -24,33 +27,34 @@ function ChangesDetail(props: Props) { | ||
24 | } | 27 | } |
25 | }, [id]); | 28 | }, [id]); |
26 | 29 | ||
30 | + const currentTabsList = (key: string) => { | ||
31 | + return isBefore ? data[key]?.changeData : data[key]?.originData; | ||
32 | + }; | ||
33 | + | ||
27 | const renderTabs = (items: ChangeInfoVO) => { | 34 | const renderTabs = (items: ChangeInfoVO) => { |
28 | const resultList = []; | 35 | const resultList = []; |
29 | for (let key in items) { | 36 | for (let key in items) { |
30 | if (Object.prototype.hasOwnProperty.call(items, key)) { | 37 | if (Object.prototype.hasOwnProperty.call(items, key)) { |
31 | - console.log(Object.prototype.hasOwnProperty.call(items, key), key); | ||
32 | if (key === "baseChangeVo") { | 38 | if (key === "baseChangeVo") { |
33 | - resultList.push({ label: "基础信息变更", key, children: `Content of Tab ${id}` }); | 39 | + resultList.push({ label: "基础信息变更", key, children: <BaseChangeInfo data={currentTabsList(key)} /> }); |
40 | + } | ||
41 | + if (key === "scopeChangeApproveVo") { | ||
42 | + resultList.push({ label: "活动范围变更", key, children: <ScopeDetail data={currentTabsList(key)} /> }); | ||
34 | } | 43 | } |
35 | if (key === "signUpChangeVo") { | 44 | if (key === "signUpChangeVo") { |
36 | - resultList.push({ label: "报名变更", key, children: `Content of Tab ${id}` }); | 45 | + resultList.push({ label: "报名变更", key, children: <ContentItems type="报名" data={currentTabsList(key)} /> }); |
37 | } | 46 | } |
38 | if (key === "signInChangeVo") { | 47 | if (key === "signInChangeVo") { |
39 | - resultList.push({ label: "签到变更", key, children: `Content of Tab ${id}` }); | 48 | + resultList.push({ label: "签到变更", key, children: <ContentItems type="签到" data={currentTabsList(key)} /> }); |
40 | } | 49 | } |
41 | if (key === "mulChangeVo") { | 50 | if (key === "mulChangeVo") { |
42 | - resultList.push({ label: "多轮抽奖变更", key, children: `Content of Tab ${id}` }); | 51 | + resultList.push({ label: "多轮抽奖变更", key, children: <ContentItems type="多轮抽奖" data={currentTabsList(key)} /> }); |
43 | } | 52 | } |
44 | if (key === "outsideChangeVo") { | 53 | if (key === "outsideChangeVo") { |
45 | resultList.push({ | 54 | resultList.push({ |
46 | label: "外拓变更", key, children: `Content of Tab ${id}` | 55 | label: "外拓变更", key, children: `Content of Tab ${id}` |
47 | }); | 56 | }); |
48 | } | 57 | } |
49 | - if (key === "scopeChangeApproveVo") { | ||
50 | - resultList.push({ | ||
51 | - label: "活动范围变更", key, children: `Content of Tab ${id}` | ||
52 | - }); | ||
53 | - } | ||
54 | } | 58 | } |
55 | } | 59 | } |
56 | return resultList; | 60 | return resultList; |
src/pages/mkt/ActivityChanges/components/ContentItems.tsx
0 → 100644
1 | +import React from 'react'; | ||
2 | +import moment from 'moment'; | ||
3 | +import { Image } from "antd"; | ||
4 | +import IMGURL from '@/utils/IMGURL'; | ||
5 | +import SignupGifts from '@/pages/mkt/ActivityCreate/ExternalPromotion/components/ActivityFlow/SignupGifts'; | ||
6 | +import AwardConfigs from '../components/AwardConfigs'; | ||
7 | + | ||
8 | +interface Props { | ||
9 | + data: any; | ||
10 | + type: string; | ||
11 | +} | ||
12 | +export default function ContentItems({ data, type }: Props) { | ||
13 | + return ( | ||
14 | + <> | ||
15 | + <div> | ||
16 | + {(type === "报名") && ( | ||
17 | + <div> | ||
18 | + {data.joinLimitNum && <div> 报名人数限制:{data.joinLimitNum}人</div>} | ||
19 | + {data.signUpPrice && <div> 报名费:{data.signUpPrice}元</div>} | ||
20 | + {data.saleOrderAmount && <div> 活动期间售后工单金额:{data.saleOrderAmount}元</div>} | ||
21 | + </div> | ||
22 | + )} | ||
23 | + {(type === "签到") && ( | ||
24 | + <div> | ||
25 | + {data.startTime && <div>签到开始时间:{data.startTime && moment(data.startTime).format('YYYY.MM.DD HH:mm')}</div>} | ||
26 | + {data.endTime && <div>签到结束时间:{data.endTime && moment(data.endTime).format('YYYY.MM.DD HH:mm')}</div>} | ||
27 | + </div> | ||
28 | + )} | ||
29 | + {(type === "多轮抽奖") && ( | ||
30 | + <div> | ||
31 | + {!!data.lotteryNumTotal && <div>抽奖总名额限制:{data.lotteryNumTotal}人</div>} | ||
32 | + {!!data.lotteryAmount && <div>抽奖资金要求:{data.lotteryAmount}元</div>} | ||
33 | + {data.startTime && <div>抽奖开始时间:{data.startTime && moment(data.startTime).format('YYYY.MM.DD HH:mm')}</div>} | ||
34 | + {data.endTime && <div>抽奖结束时间:{data.endTime && moment(data.endTime).format('YYYY.MM.DD HH:mm')}</div>} | ||
35 | + </div> | ||
36 | + )} | ||
37 | + </div> | ||
38 | + {data.awardConfigs && <AwardConfigs data={data} mulLottery={type !== "签到"} />} | ||
39 | + </> | ||
40 | + ); | ||
41 | +} | ||
0 | \ No newline at end of file | 42 | \ No newline at end of file |
src/pages/mkt/ActivityChanges/components/ScopeDetail.tsx
0 → 100644
1 | +import React, { useState, useEffect } from "react"; | ||
2 | +import { CheckCircleOutlined } from '@ant-design/icons'; | ||
3 | +import { | ||
4 | + Checkbox, | ||
5 | + Form, | ||
6 | + Select, | ||
7 | + Divider, | ||
8 | + Typography, | ||
9 | + Space, | ||
10 | +} from "antd"; | ||
11 | +import useInitial from "@/hooks/useInitail"; | ||
12 | +import { getShopApi } from "@/common/api"; | ||
13 | +import CarSelect from "@/pages/mkt/ActivityCreate/ExternalPromotion/components/ActivityScope/CarSelect"; | ||
14 | +import _ from "lodash"; | ||
15 | + | ||
16 | +const { Option } = Select; | ||
17 | + | ||
18 | +export default function Index({ data }: Props) { | ||
19 | + const [form] = Form.useForm(); | ||
20 | + const { data: shopsList, loading } = useInitial(getShopApi, [], {}); | ||
21 | + | ||
22 | + useEffect(() => { | ||
23 | + const result = data.authShops.map((item: { shopId?: number; shopName?: string; }) => ({ label: item.shopName, value: item.shopId, key: item.shopId })); | ||
24 | + form.setFieldsValue({ | ||
25 | + ...data, | ||
26 | + authShops: result, | ||
27 | + }); | ||
28 | + }, [data]); | ||
29 | + | ||
30 | + return ( | ||
31 | + <Form form={form}> | ||
32 | + {data.authCars && ( | ||
33 | + <Form.Item | ||
34 | + label="参与门店:" | ||
35 | + name="authShops" | ||
36 | + rules={[{ required: true, message: "请选择门店" }]} | ||
37 | + > | ||
38 | + <Select | ||
39 | + mode="multiple" | ||
40 | + disabled | ||
41 | + optionFilterProp="children" | ||
42 | + loading={loading} | ||
43 | + showSearch | ||
44 | + labelInValue | ||
45 | + > | ||
46 | + {shopsList.map((item) => ( | ||
47 | + <Option key={item.id} value={item.id}> | ||
48 | + {item.name} | ||
49 | + </Option> | ||
50 | + ))} | ||
51 | + </Select> | ||
52 | + </Form.Item> | ||
53 | + )} | ||
54 | + {/* 部分车辆*/} | ||
55 | + {data.authCars && ( | ||
56 | + <Form.Item | ||
57 | + label="车辆" | ||
58 | + name="authCars" | ||
59 | + rules={[{ required: true, message: "选择车辆信息" }]} | ||
60 | + > | ||
61 | + <CarSelect disabled /> | ||
62 | + </Form.Item> | ||
63 | + )} | ||
64 | + <div style={{ marginTop: 30, marginBottom: 15 }}>*活动报名资格:</div> | ||
65 | + {/* 滚动进池客户可享受外促政策 */} | ||
66 | + {data.nonGoalJoin != null && ( | ||
67 | + <Form.Item name="nonGoalJoin" valuePropName="checked"> | ||
68 | + <Checkbox disabled> | ||
69 | + 非目标客户可享受外促政策 | ||
70 | + </Checkbox> | ||
71 | + </Form.Item> | ||
72 | + )} | ||
73 | + {data.publicity != null && ( | ||
74 | + <> | ||
75 | + <div style={{ marginTop: 35, color: '#666' }}>*活动页面展示(C端---{'>'}霏车车小程序)</div> | ||
76 | + <Form.Item name="publicity" valuePropName="checked"> | ||
77 | + <Checkbox | ||
78 | + disabled | ||
79 | + > | ||
80 | + 在广告区展示 | ||
81 | + </Checkbox> | ||
82 | + </Form.Item> | ||
83 | + </> | ||
84 | + )} | ||
85 | + {data.nonGoalBrowse != null && ( | ||
86 | + <> | ||
87 | + <div style={{ marginTop: 30, color: '#666' }}>*车系详情中"查看优惠"页面展示活动信息</div> | ||
88 | + <Form.Item name="nonGoalBrowse" valuePropName="checked"> | ||
89 | + <Checkbox disabled> 非目标客户可查看</Checkbox> | ||
90 | + </Form.Item> | ||
91 | + </> | ||
92 | + )} | ||
93 | + </Form> | ||
94 | + ); | ||
95 | +} |
src/pages/mkt/ActivityChanges/index.tsx
1 | -import React, { useState } from 'react'; | 1 | +import React, { useEffect, useState } from 'react'; |
2 | import { Input, Card, Row, Table, Select, Tag, message } from 'antd'; | 2 | import { Input, Card, Row, Table, Select, Tag, message } from 'antd'; |
3 | import { PageHeaderWrapper } from '@ant-design/pro-layout'; | 3 | import { PageHeaderWrapper } from '@ant-design/pro-layout'; |
4 | import { getActivityChangeLog, getEvaluateWinListApi, ListVO, PrizeItemList } from './api'; | 4 | import { getActivityChangeLog, getEvaluateWinListApi, ListVO, PrizeItemList } from './api'; |
5 | import moment from 'moment'; | 5 | import moment from 'moment'; |
6 | import { debounce } from 'lodash'; | 6 | import { debounce } from 'lodash'; |
7 | +import * as common from '@/typing/common'; | ||
7 | import ChangesDetail from './components/ChangesDetail'; | 8 | import ChangesDetail from './components/ChangesDetail'; |
8 | import useInitial from '@/hooks/useInitail'; | 9 | import useInitial from '@/hooks/useInitail'; |
9 | 10 | ||
11 | +interface Props extends common.ConnectProps { } | ||
12 | + | ||
10 | const Search = Input.Search; | 13 | const Search = Input.Search; |
11 | const Column = Table.Column; | 14 | const Column = Table.Column; |
12 | 15 | ||
@@ -15,12 +18,13 @@ interface ModalParams { | @@ -15,12 +18,13 @@ interface ModalParams { | ||
15 | id?: number; | 18 | id?: number; |
16 | } | 19 | } |
17 | const AssistManage = (props: any) => { | 20 | const AssistManage = (props: any) => { |
18 | - const [delay, setDelay] = useState(true); | ||
19 | - | 21 | + const { match } = props; |
22 | + const { activityNo } = match.params; | ||
23 | + const [delay, setDelay] = useState(true); | ||
20 | const { loading, data, params, setData, setParams } = useInitial(getActivityChangeLog, [], {}, delay); | 24 | const { loading, data, params, setData, setParams } = useInitial(getActivityChangeLog, [], {}, delay); |
21 | const [modalValue, setModaValue] = useState<ModalParams>({ visible: false }); | 25 | const [modalValue, setModaValue] = useState<ModalParams>({ visible: false }); |
22 | 26 | ||
23 | - const _onSearch = debounce((pa: any) => { | 27 | + const _onSearch = debounce((pa: any) => { |
24 | if (!pa.activityNo && !params.activityNo) { | 28 | if (!pa.activityNo && !params.activityNo) { |
25 | message.info("请先输入活动编码查询"); | 29 | message.info("请先输入活动编码查询"); |
26 | setData([]); | 30 | setData([]); |
@@ -30,12 +34,19 @@ const AssistManage = (props: any) => { | @@ -30,12 +34,19 @@ const AssistManage = (props: any) => { | ||
30 | setDelay(false); | 34 | setDelay(false); |
31 | }, 500); | 35 | }, 500); |
32 | 36 | ||
37 | + useEffect(() => { | ||
38 | + if (activityNo) { | ||
39 | + setParams({ activityNo }, true); | ||
40 | + setDelay(false); | ||
41 | + } | ||
42 | + }, [activityNo]); | ||
33 | return ( | 43 | return ( |
34 | <PageHeaderWrapper title="活动变更记录"> | 44 | <PageHeaderWrapper title="活动变更记录"> |
35 | <Card> | 45 | <Card> |
36 | <Row style={{ justifyContent: "start", marginBottom: 20 }}> | 46 | <Row style={{ justifyContent: "start", marginBottom: 20 }}> |
37 | <Search | 47 | <Search |
38 | allowClear | 48 | allowClear |
49 | + value={params.activityNo} | ||
39 | onChange={e => (e.target.value ? _onSearch({ activityNo: e.target.value }) : setParams({ ...params, activityNo: undefined }))} | 50 | onChange={e => (e.target.value ? _onSearch({ activityNo: e.target.value }) : setParams({ ...params, activityNo: undefined }))} |
40 | onSearch={v => v && _onSearch({ activityNo: v })} | 51 | onSearch={v => v && _onSearch({ activityNo: v })} |
41 | style={{ maxWidth: 230, marginRight: 30 }} | 52 | style={{ maxWidth: 230, marginRight: 30 }} |
@@ -66,17 +77,17 @@ const AssistManage = (props: any) => { | @@ -66,17 +77,17 @@ const AssistManage = (props: any) => { | ||
66 | <Column | 77 | <Column |
67 | title="申请时间" | 78 | title="申请时间" |
68 | dataIndex="applyTime" | 79 | dataIndex="applyTime" |
69 | - render={(t) => t&&moment(t).format("YYYY-MM-DD HH:mm")} | 80 | + render={(t) => t && moment(t).format("YYYY-MM-DD HH:mm")} |
70 | /> | 81 | /> |
71 | <Column | 82 | <Column |
72 | title="审批时间" | 83 | title="审批时间" |
73 | dataIndex="approvalTime" | 84 | dataIndex="approvalTime" |
74 | - render={(t) => t&&moment(t).format("YYYY-MM-DD HH:mm")} | 85 | + render={(t) => t && moment(t).format("YYYY-MM-DD HH:mm")} |
75 | /> | 86 | /> |
76 | <Column | 87 | <Column |
77 | title="审批结果" | 88 | title="审批结果" |
78 | dataIndex="approvalResult" | 89 | dataIndex="approvalResult" |
79 | - render={t => (t?"通过":"拒绝")} | 90 | + render={t => (t ? "通过" : "拒绝")} |
80 | /> | 91 | /> |
81 | <Column | 92 | <Column |
82 | title="变更详情" | 93 | title="变更详情" |
src/pages/mkt/ActivityCreate/ExternalPromotion/components/ActivityScope/CarSelect.tsx
@@ -120,16 +120,18 @@ export default function index({ onChange, value, disabled }: Props) { | @@ -120,16 +120,18 @@ export default function index({ onChange, value, disabled }: Props) { | ||
120 | <> | 120 | <> |
121 | <Card> | 121 | <Card> |
122 | <div style={{ display: "flex", justifyContent: "flex-end" }}> | 122 | <div style={{ display: "flex", justifyContent: "flex-end" }}> |
123 | - <Button | ||
124 | - type="link" | ||
125 | - disabled={disabled} | ||
126 | - onClick={() => { | ||
127 | - setVisible(true); | ||
128 | - form.resetFields(); | ||
129 | - }} | ||
130 | - > | ||
131 | - 新增 | ||
132 | - </Button> | 123 | + {!disabled && ( |
124 | + <Button | ||
125 | + type="link" | ||
126 | + disabled={disabled} | ||
127 | + onClick={() => { | ||
128 | + setVisible(true); | ||
129 | + form.resetFields(); | ||
130 | + }} | ||
131 | + > | ||
132 | + 新增 | ||
133 | + </Button> | ||
134 | + )} | ||
133 | </div> | 135 | </div> |
134 | 136 | ||
135 | <Table | 137 | <Table |
src/pages/mkt/ActivityManage/components/Operation.tsx
@@ -43,6 +43,10 @@ export default function Oparetion(props: Props) { | @@ -43,6 +43,10 @@ export default function Oparetion(props: Props) { | ||
43 | function changeBaseInfo() { | 43 | function changeBaseInfo() { |
44 | history.push(`/mkt/manage/create/${record.activityNo}/${record.status}/change`); | 44 | history.push(`/mkt/manage/create/${record.activityNo}/${record.status}/change`); |
45 | } | 45 | } |
46 | + /** 变更记录 */ | ||
47 | + function changeRecords() { | ||
48 | + history.push(`/mkt/prize/record/changes/${record.activityNo}`); | ||
49 | + } | ||
46 | 50 | ||
47 | /** 删除 */ | 51 | /** 删除 */ |
48 | function deleteItem(row: MarketingManage.Item) { | 52 | function deleteItem(row: MarketingManage.Item) { |
@@ -105,6 +109,7 @@ export default function Oparetion(props: Props) { | @@ -105,6 +109,7 @@ export default function Oparetion(props: Props) { | ||
105 | if ([4, 5].includes(status) && record.changeStatus !== 2) { | 109 | if ([4, 5].includes(status) && record.changeStatus !== 2) { |
106 | menus = [ | 110 | menus = [ |
107 | <Button type="primary" ghost size="small" onClick={changeBaseInfo}>变更信息</Button>, | 111 | <Button type="primary" ghost size="small" onClick={changeBaseInfo}>变更信息</Button>, |
112 | + <Button type="primary" ghost size="small" onClick={changeRecords}>变更记录</Button>, | ||
108 | // <Button danger ghost size="small" onClick={endActivity}>终止</Button>, | 113 | // <Button danger ghost size="small" onClick={endActivity}>终止</Button>, |
109 | ]; | 114 | ]; |
110 | } | 115 | } |