diff --git a/config/routers/mkt.ts b/config/routers/mkt.ts index 7dc15ad..871e5f4 100644 --- a/config/routers/mkt.ts +++ b/config/routers/mkt.ts @@ -25,7 +25,7 @@ export default [ }, /**活动变更查询记录 */ { - path: '/mkt/prize/record/changes', + path: '/mkt/prize/record/changes/:activityNo?', component: './mkt/ActivityChanges', }, /**查询活动发放奖品列表-运维 */ diff --git a/src/pages/mkt/ActivityChanges/components/AwardConfigs/CouponGifts.tsx b/src/pages/mkt/ActivityChanges/components/AwardConfigs/CouponGifts.tsx new file mode 100644 index 0000000..eca2bff --- /dev/null +++ b/src/pages/mkt/ActivityChanges/components/AwardConfigs/CouponGifts.tsx @@ -0,0 +1,98 @@ +import React, { useEffect, useState } from 'react'; +import { Button, Card, Table } from 'antd'; +import UpsertCoupon from "@/pages/coupon/CouponConfig"; + +const { Column } = Table; + +// 门店范围 +enum ShopLimit { + "发券门店" = 1, + "自定义门店", +} + +interface Props { + value?: ExternalPromotion.Gifts, + onChange?: Function, + disabled?: boolean, +} +interface Coupon { + visible: boolean; + index?: number; + confNo?: string; + giftItemId?: number; +} +function SignupGifts({ value, onChange, disabled }: Props) { + const [giftList, setGiftList] = useState([]); + const [coupon, setCoupon] = useState({ visible: false, index: undefined, confNo: undefined }); + useEffect(() => { + value && value[0].giftItems && setGiftList(value[0].giftItems); + }, [value]); + + return ( +
+ + record.classifyCode || record.couponCode} + > + + {text || "--"}} + /> + + ( + {text ? ShopLimit[text] : "--"} + )} + /> + ( + + )} + /> +
+ + setCoupon({ ...coupon, visible: false, confNo: undefined, giftItemId: undefined })} + disabled + // onSave={} + remark="市场活动" + confNo={coupon.confNo} + // carSelectApi={bizType == 1 ? getACarList : undefined} + // changeEditKeys={couponStatus ? ["aliasName", "schemeList"] : undefined} + // getCouponDetailsApi={couponStatus ? (v: string) => getCouponChangeDetails({ activityNo, confNo: v }) : undefined} + // saveChangeCouponApi={couponStatus ? (values: any) => saveChangeCoupon({ ...values, activityNo }) : undefined} + /> +
+ ); +} + +export default React.memo(SignupGifts); \ No newline at end of file diff --git a/src/pages/mkt/ActivityChanges/components/AwardConfigs/Coupons.tsx b/src/pages/mkt/ActivityChanges/components/AwardConfigs/Coupons.tsx new file mode 100644 index 0000000..90f1c77 --- /dev/null +++ b/src/pages/mkt/ActivityChanges/components/AwardConfigs/Coupons.tsx @@ -0,0 +1,230 @@ +import React, { useState, useEffect } from "react"; +import { + Table, + Form, + Button, + Modal, + Input, + InputNumber, + Space, + message, + Card, + Popconfirm, +} from "antd"; +import UpsertCoupon from "@/pages/coupon/CouponConfig"; + +const { Column } = Table; +interface Props { + //按概率/固定奖项人数 + awardWay?: number; + mulLottery?: boolean; //是否多轮抽奖 + onChange?: Function; + value?: any[]; + remove?: Function; + name?: number; + disabled?: boolean; +} +interface Coupon { + visible: boolean; + index?: number; + itemIndex?: number; + confNo?: string; + giftItemId?: number; +} + +export default function Coupons({ + awardWay, + mulLottery, + value, + onChange, + remove, + name, + disabled +}: Props) { + const [form] = Form.useForm(); + // 保存表格中的数据 + const [savaList, setSaveList] = useState([]); + /** 是否点击过无奖占位 */ + const [noReward, setNoRewad] = useState(false); + /** 无奖占位按钮能否点击 */ + const [noRewardDisable, setNoRewadDisable] = useState(false); + //保存索引 + const [itemIndex, setItemIndex] = useState(); + //奖项名称Modal显示 + const [visible, setVisible] = useState(false); + //优惠券Modal + const [coupon, setCoupon] = useState({ + visible: false, + index: undefined, + confNo: undefined, + }); + // 保存当前选中的奖项 + const [currentItem, SetCurrentItem] = useState({ + awardName: undefined, + winningNum: undefined, + }); + const pattern1 = /^([1-9]\d?|100)$/; //(0,100]之间百分数 + const pattern2 = /^\+?[1-9]\d*$/; // 大于0的整数 + + useEffect(() => { + if (visible && currentItem.awardName) { + //编辑 + form.setFieldsValue({ + ...currentItem, + }); + } + }, [visible, currentItem]); + + useEffect(() => { + if (value && value.length) { + setSaveList([...value]); + } + }, [value]); + + return ( + <> + + record.awardName} + bordered + > + { + if (text === "谢谢惠顾") { + return {text}; + } else { + return ( + + ); + } + }} + /> + (awardWay === 1 ? `${text}%` : text)} + /> + + text && + text.length > 0 && + text.map((item, itemIndex: number) => ( +
+ + + +
+ ))} + /> +
+ + + { + form.resetFields(); + SetCurrentItem({}); + }} + // onOk={_onOk} + onCancel={() => { + setVisible(false); + form.resetFields(); + SetCurrentItem({}); + }} + > +
+ + + + + + +
+ + + {/* 优惠券配置 */} + setCoupon({ ...coupon, visible: false, confNo: undefined })} + // onSave={_onSava} + remark="市场活动" + confNo={coupon.confNo} + // carSelectApi={bizType == 1 ? getACarList : undefined} + // changeEditKeys={couponStatus ? ["aliasName", "schemeList"] : undefined} + // getCouponDetailsApi={couponStatus ? (v: string) => getCouponChangeDetails({ activityNo, confNo: v }) : undefined} + // saveChangeCouponApi={couponStatus ? (values: any) => saveChangeCoupon({ ...values, activityNo }) : undefined} + /> + + ); +} diff --git a/src/pages/mkt/ActivityChanges/components/AwardConfigs/index.tsx b/src/pages/mkt/ActivityChanges/components/AwardConfigs/index.tsx new file mode 100644 index 0000000..67b3182 --- /dev/null +++ b/src/pages/mkt/ActivityChanges/components/AwardConfigs/index.tsx @@ -0,0 +1,125 @@ +import React, { useState, useEffect } from "react"; +import { Button, Form, InputNumber, Space, Popconfirm, Spin, Divider, Radio, Row } from "antd"; +// import SignupGifts from "./CouponGifts"; +import SignupGifts from "./Coupons"; + +interface Props { + data: any; + mulLottery: boolean; +} +export default function Index({ data, mulLottery }: Props) { + // const { baseInfo, readOnly, getFlowConfig, getACarList } = useStore(); + // const { activityNo, bizType, changeEnable } = baseInfo; + // const { data, errMsg, loading } = useInitial(getSignUpDetail, {}, { activityNo, change: changeEnable }); + const [form] = Form.useForm(); + const [saveLoading, setSaveLoading] = useState(false); + + useEffect(() => { + form.setFieldsValue({ + ...data, + // ladderReward: data.ladderReward != null ? Number(data.ladderReward) : 0, + // awardConfigs: data.awardConfigs ? data.awardConfigs : [{ sortOrder: 1, lotteryMinLimit: 1, awardWay: 1, gifts: [{ parcelType: 2, awardName: "报名有礼", winningNum: 100, giftItems: [] }] }] + }); + }, [data]); + + return ( + <> +
+ {/* 优惠券部分 */} + 赠送奖品详情 + {/* + + 报名成功则送相同优惠券 + 按报名顺序不同赠送不同优惠券 + + */} + prevValues.ladderReward !== currentValues.ladderReward} + > + {({ getFieldValue }) => { + return ( + + {(fields, { add, remove }) => { + const _Limit = data.awardConfigs && data.awardConfigs[0].lotteryMaxLimit; + return ( + <> + {fields.map(({ key, name, ...restField }, index) => { + return ( + + <> + {!!_Limit && mulLottery && ( + <> + 第{index + 1}轮 + + + * 参与名额： + + + + ~ + + + + 名 + + {/* {!editDisabled(index) && remove(name)} style={{ color: 'red' }} />} */} + + + )} + prevValues.awardConfigs !== currentValues.awardConfigs} + > + {({ getFieldValue }) => { + let _awardWay = getFieldValue("awardConfigs")[index]; + return ( + + + + ); + }} + + + + ); + // )} + })} + {/* {!!_mulLottery && ( + + )} */} + + ); + }} + + ); + }} + +
+ + ); +} diff --git a/src/pages/mkt/ActivityChanges/components/BaseChangeInfo.tsx b/src/pages/mkt/ActivityChanges/components/BaseChangeInfo.tsx index 17410ce..aa2f9dc 100644 --- a/src/pages/mkt/ActivityChanges/components/BaseChangeInfo.tsx +++ b/src/pages/mkt/ActivityChanges/components/BaseChangeInfo.tsx @@ -1,7 +1,34 @@ import React from 'react'; +import moment from 'moment'; +import { Image } from "antd"; +import IMGURL from '@/utils/IMGURL'; -export default function BaseChangeInfo() { +export default function BaseChangeInfo({data}: Props) { return ( -
+
+ {data.activityName &&
活动名称：{data.activityName}
} + {data.endTime &&
活动结束时间：{data.endTime && moment(data.endTime).format('YYYY.MM.DD HH:mm')}
} + {data.couponInvalidTime &&
优惠券到期时间：{data.couponInvalidTime && moment(data.couponInvalidTime).format('YYYY.MM.DD HH:mm')}
} + {data.bannerId && ( +
活动轮播图： + +
+ )} + {data.bgId && ( +
活动轮播图： + +
+ )} +
); } \ No newline at end of file diff --git a/src/pages/mkt/ActivityChanges/components/ChangesDetail.tsx b/src/pages/mkt/ActivityChanges/components/ChangesDetail.tsx index bd85e1a..496da98 100644 --- a/src/pages/mkt/ActivityChanges/components/ChangesDetail.tsx +++ b/src/pages/mkt/ActivityChanges/components/ChangesDetail.tsx @@ -1,8 +1,11 @@ import React, { useEffect, useState } from 'react'; -import { Table, Modal, Tag, Space, Radio, Spin, Tabs } from 'antd'; +import { Table, Modal, Space, Radio, Spin, Tabs } from 'antd'; import { getChangeDetail, ChangeInfoVO } from '../api'; -import moment from 'moment'; import useInitial from '@/hooks/useInitail'; +import BaseChangeInfo from './BaseChangeInfo'; +import ContentItems from './ContentItems'; +import ScopeDetail from './ScopeDetail'; +// import SignInDetail from './SignInDetail'; const Column = Table.Column; interface Props { @@ -24,33 +27,34 @@ function ChangesDetail(props: Props) { } }, [id]); + const currentTabsList = (key: string) => { + return isBefore ? data[key]?.changeData : data[key]?.originData; + }; + const renderTabs = (items: ChangeInfoVO) => { const resultList = []; for (let key in items) { if (Object.prototype.hasOwnProperty.call(items, key)) { - console.log(Object.prototype.hasOwnProperty.call(items, key), key); if (key === "baseChangeVo") { - resultList.push({ label: "基础信息变更", key, children: `Content of Tab ${id}` }); + resultList.push({ label: "基础信息变更", key, children: }); + } + if (key === "scopeChangeApproveVo") { + resultList.push({ label: "活动范围变更", key, children: }); } if (key === "signUpChangeVo") { - resultList.push({ label: "报名变更", key, children: `Content of Tab ${id}` }); + resultList.push({ label: "报名变更", key, children: }); } if (key === "signInChangeVo") { - resultList.push({ label: "签到变更", key, children: `Content of Tab ${id}` }); + resultList.push({ label: "签到变更", key, children: }); } if (key === "mulChangeVo") { - resultList.push({ label: "多轮抽奖变更", key, children: `Content of Tab ${id}` }); + resultList.push({ label: "多轮抽奖变更", key, children: }); } if (key === "outsideChangeVo") { resultList.push({ label: "外拓变更", key, children: `Content of Tab ${id}` }); } - if (key === "scopeChangeApproveVo") { - resultList.push({ - label: "活动范围变更", key, children: `Content of Tab ${id}` - }); - } } } return resultList; diff --git a/src/pages/mkt/ActivityChanges/components/ContentItems.tsx b/src/pages/mkt/ActivityChanges/components/ContentItems.tsx new file mode 100644 index 0000000..438e43c --- /dev/null +++ b/src/pages/mkt/ActivityChanges/components/ContentItems.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import moment from 'moment'; +import { Image } from "antd"; +import IMGURL from '@/utils/IMGURL'; +import SignupGifts from '@/pages/mkt/ActivityCreate/ExternalPromotion/components/ActivityFlow/SignupGifts'; +import AwardConfigs from '../components/AwardConfigs'; + +interface Props { + data: any; + type: string; +} +export default function ContentItems({ data, type }: Props) { + return ( + <> +
+ {(type === "报名") && ( +
+ {data.joinLimitNum &&
报名人数限制：{data.joinLimitNum}人
} + {data.signUpPrice &&
报名费：{data.signUpPrice}元
} + {data.saleOrderAmount &&
活动期间售后工单金额：{data.saleOrderAmount}元
} +
+ )} + {(type === "签到") && ( +
+ {data.startTime &&
签到开始时间：{data.startTime && moment(data.startTime).format('YYYY.MM.DD HH:mm')}
} + {data.endTime &&
签到结束时间：{data.endTime && moment(data.endTime).format('YYYY.MM.DD HH:mm')}
} +
+ )} + {(type === "多轮抽奖") && ( +
+ {!!data.lotteryNumTotal &&
抽奖总名额限制：{data.lotteryNumTotal}人
} + {!!data.lotteryAmount &&
抽奖资金要求：{data.lotteryAmount}元
} + {data.startTime &&
抽奖开始时间：{data.startTime && moment(data.startTime).format('YYYY.MM.DD HH:mm')}
} + {data.endTime &&
抽奖结束时间：{data.endTime && moment(data.endTime).format('YYYY.MM.DD HH:mm')}
} +
+ )} +
+ {data.awardConfigs && } + + ); +} \ No newline at end of file diff --git a/src/pages/mkt/ActivityChanges/components/ScopeDetail.tsx b/src/pages/mkt/ActivityChanges/components/ScopeDetail.tsx new file mode 100644 index 0000000..76ff43b --- /dev/null +++ b/src/pages/mkt/ActivityChanges/components/ScopeDetail.tsx @@ -0,0 +1,95 @@ +import React, { useState, useEffect } from "react"; +import { CheckCircleOutlined } from '@ant-design/icons'; +import { + Checkbox, + Form, + Select, + Divider, + Typography, + Space, +} from "antd"; +import useInitial from "@/hooks/useInitail"; +import { getShopApi } from "@/common/api"; +import CarSelect from "@/pages/mkt/ActivityCreate/ExternalPromotion/components/ActivityScope/CarSelect"; +import _ from "lodash"; + +const { Option } = Select; + +export default function Index({ data }: Props) { + const [form] = Form.useForm(); + const { data: shopsList, loading } = useInitial(getShopApi, [], {}); + + useEffect(() => { + const result = data.authShops.map((item: { shopId?: number; shopName?: string; }) => ({ label: item.shopName, value: item.shopId, key: item.shopId })); + form.setFieldsValue({ + ...data, + authShops: result, + }); + }, [data]); + + return ( +
+ {data.authCars && ( + + + + )} + {/* 部分车辆*/} + {data.authCars && ( + + + + )} +
*活动报名资格：
+ {/* 滚动进池客户可享受外促政策 */} + {data.nonGoalJoin != null && ( + + + 非目标客户可享受外促政策 + + + )} + {data.publicity != null && ( + <> +
*活动页面展示（C端---{'>'}霏车车小程序）
+ + + 在广告区展示 + + + + )} + {data.nonGoalBrowse != null && ( + <> +
*车系详情中＂查看优惠＂页面展示活动信息
+ + 非目标客户可查看 + + + )} +
+ ); +} diff --git a/src/pages/mkt/ActivityChanges/index.tsx b/src/pages/mkt/ActivityChanges/index.tsx index a1a2a48..c4c8966 100644 --- a/src/pages/mkt/ActivityChanges/index.tsx +++ b/src/pages/mkt/ActivityChanges/index.tsx @@ -1,12 +1,15 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Input, Card, Row, Table, Select, Tag, message } from 'antd'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { getActivityChangeLog, getEvaluateWinListApi, ListVO, PrizeItemList } from './api'; import moment from 'moment'; import { debounce } from 'lodash'; +import * as common from '@/typing/common'; import ChangesDetail from './components/ChangesDetail'; import useInitial from '@/hooks/useInitail'; +interface Props extends common.ConnectProps { } + const Search = Input.Search; const Column = Table.Column; @@ -15,12 +18,13 @@ interface ModalParams { id?: number; } const AssistManage = (props: any) => { - const [delay, setDelay] = useState(true); - + const { match } = props; + const { activityNo } = match.params; + const [delay, setDelay] = useState(true); const { loading, data, params, setData, setParams } = useInitial(getActivityChangeLog, [], {}, delay); const [modalValue, setModaValue] = useState({ visible: false }); - const _onSearch = debounce((pa: any) => { + const _onSearch = debounce((pa: any) => { if (!pa.activityNo && !params.activityNo) { message.info("请先输入活动编码查询"); setData([]); @@ -30,12 +34,19 @@ const AssistManage = (props: any) => { setDelay(false); }, 500); + useEffect(() => { + if (activityNo) { + setParams({ activityNo }, true); + setDelay(false); + } + }, [activityNo]); return ( (e.target.value ? _onSearch({ activityNo: e.target.value }) : setParams({ ...params, activityNo: undefined }))} onSearch={v => v && _onSearch({ activityNo: v })} style={{ maxWidth: 230, marginRight: 30 }} @@ -66,17 +77,17 @@ const AssistManage = (props: any) => { t&&moment(t).format("YYYY-MM-DD HH:mm")} + render={(t) => t && moment(t).format("YYYY-MM-DD HH:mm")} /> t&&moment(t).format("YYYY-MM-DD HH:mm")} + render={(t) => t && moment(t).format("YYYY-MM-DD HH:mm")} /> (t?"通过":"拒绝")} + render={t => (t ? "通过" : "拒绝")} />
- + {!disabled && ( + + )}
变更信息, + , // , ]; }