From 0d5e34cfdd0166de4320a6874bbbd88dd83f4aea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Wed, 27 Aug 2025 17:04:39 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E7=BE=A4=E6=8E=A8=E8=A1=A8=E5=8D=95):?= =?UTF-8?q?=20=E9=87=8D=E6=9E=84=E8=A1=A8=E5=8D=95=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E7=BB=93=E6=9E=84=E5=B9=B6=E6=95=B4=E5=90=88=E4=BA=AC=E4=B8=9C?= =?UTF-8?q?=E8=81=94=E7=9B=9F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将布尔类型字段改为数字枚举类型以增强可读性 - 移除独立的京东联盟组件，将其功能整合到基础设置中 - 简化表单步骤，从4步减少到3步 - 优化表单字段命名使其更语义化 --- .../form/components/BasicSettings.tsx | 282 +++++++++++++----- .../form/components/JingDongLink.tsx | 148 --------- .../workspace/group-push/form/index.data.ts | 14 +- .../workspace/group-push/form/index.tsx | 119 ++++---- 4 files changed, 261 insertions(+), 302 deletions(-) delete mode 100644 Cunkebao/src/pages/mobile/workspace/group-push/form/components/JingDongLink.tsx diff --git a/Cunkebao/src/pages/mobile/workspace/group-push/form/components/BasicSettings.tsx b/Cunkebao/src/pages/mobile/workspace/group-push/form/components/BasicSettings.tsx index e83332ad..ad951714 100644 --- a/Cunkebao/src/pages/mobile/workspace/group-push/form/components/BasicSettings.tsx +++ b/Cunkebao/src/pages/mobile/workspace/group-push/form/components/BasicSettings.tsx @@ -1,16 +1,33 @@ -import React, { useImperativeHandle, forwardRef } from "react"; -import { Input, Button, Card, Switch, Form, InputNumber } from "antd"; +import React, { + useImperativeHandle, + forwardRef, + useState, + useEffect, +} from "react"; +import { + Input, + Button, + Card, + Switch, + Form, + InputNumber, + Select, + Radio, +} from "antd"; +import { fetchSocialMediaList, fetchPromotionSiteList } from "../index.api"; interface BasicSettingsProps { defaultValues?: { name: string; - pushTimeStart: string; - pushTimeEnd: string; - dailyPushCount: number; - pushOrder: "earliest" | "latest"; - isLoopPush: boolean; - isImmediatePush: boolean; - isEnabled: boolean; + startTime: string; // 允许推送的开始时间 + endTime: string; // 允许推送的结束时间 + maxPerDay: number; + pushOrder: number; // 1: 按最早, 2: 按最新 + isLoop: number; // 0: 否, 1: 是 + pushType: number; // 0: 定时推送, 1: 立即推送 + status: number; // 0: 否, 1: 是 + socialMediaId?: string; + promotionSiteId?: string; }; onNext: (values: any) => void; onSave: (values: any) => void; @@ -27,18 +44,61 @@ const BasicSettings = forwardRef( { defaultValues = { name: "", - pushTimeStart: "06:00", - pushTimeEnd: "23:59", - dailyPushCount: 20, - pushOrder: "latest", - isLoopPush: false, - isImmediatePush: false, - isEnabled: false, + startTime: "06:00", // 允许推送的开始时间 + endTime: "23:59", // 允许推送的结束时间 + maxPerDay: 20, + pushOrder: 1, + isLoop: 0, // 0: 否, 1: 是 + pushType: 0, // 0: 定时推送, 1: 立即推送 + status: 0, // 0: 否, 1: 是 + socialMediaId: undefined, + promotionSiteId: undefined, }, }, ref, ) => { const [form] = Form.useForm(); + const [, forceUpdate] = useState({}); + const [socialMediaList, setSocialMediaList] = useState([]); + const [promotionSiteList, setPromotionSiteList] = useState([]); + const [loadingSocialMedia, setLoadingSocialMedia] = useState(false); + const [loadingPromotionSite, setLoadingPromotionSite] = useState(false); + + // 确保组件初始化时能正确显示按钮状态 + useEffect(() => { + forceUpdate({}); + }, []); + + // 组件挂载时获取社交媒体列表 + useEffect(() => { + setLoadingSocialMedia(true); + fetchSocialMediaList() + .then(res => { + setSocialMediaList(res); + }) + .finally(() => { + setLoadingSocialMedia(false); + }); + }, []); + + // 监听社交媒体选择变化 + const handleSocialMediaChange = value => { + form.setFieldsValue({ socialMediaId: value }); + // 清空推广站点选择 + form.setFieldsValue({ promotionSiteId: undefined }); + setPromotionSiteList([]); + + if (value) { + setLoadingPromotionSite(true); + fetchPromotionSiteList(value) + .then(res => { + setPromotionSiteList(res); + }) + .finally(() => { + setLoadingPromotionSite(false); + }); + } + }; // 暴露方法给父组件 useImperativeHandle(ref, () => ({ @@ -55,7 +115,10 @@ const BasicSettings = forwardRef( return form.getFieldsValue(); }, })); - + const handlePushOrderChange = (value: number) => { + form.setFieldsValue({ pushOrder: value }); + forceUpdate({}); // 强制组件重新渲染 + }; return (
@@ -64,7 +127,10 @@ const BasicSettings = forwardRef( layout="vertical" initialValues={defaultValues} onValuesChange={(changedValues, allValues) => { - // 可以在这里处理表单值变化 + // 当pushOrder值变化时，强制更新组件 + if ("pushOrder" in changedValues) { + forceUpdate({}); + } }} > {/* 任务名称 */} @@ -78,32 +144,56 @@ const BasicSettings = forwardRef( > - - {/* 允许推送的时间段 */} - -
- - - - 至 - - - -
+ {/* 推送类型 */} + + + 定时推送 + 立即推送 + + + {/* 允许推送的时间段 - 只在定时推送时显示 */} + + prevValues.pushType !== currentValues.pushType + } + > + {({ getFieldValue }) => { + // 只在pushType为0（定时推送）时显示时间段设置 + return getFieldValue("pushType") === 0 ? ( + +
+ + + + 至 + + + +
+ + ) : null; + }} {/* 每日推送 */} ( >
+ {/* 京东联盟 */} + +
+ + ({ + label: item.name, + value: item.id, + }))} + /> + +
+ + {/* 是否循环推送 */} - - - - {/* 是否立即推送 */} - (checked ? 1 : 0)} + getValueProps={value => ({ checked: value === 1 })} > @@ -177,30 +285,40 @@ const BasicSettings = forwardRef( {/* 是否启用 */} (checked ? 1 : 0)} + getValueProps={value => ({ checked: value === 1 })} > - {/* 立即推送提示 */} - - {() => { - const isImmediatePush = form.getFieldValue("isImmediatePush"); - return isImmediatePush ? ( -
- 如果启用，系统会把内容库里所有的内容按顺序推送到指定的社群 -
- ) : null; + {/* 推送类型提示 */} + + prevValues.pushType !== currentValues.pushType + } + > + {({ getFieldValue }) => { + const pushType = getFieldValue("pushType"); + if (pushType === 1) { + return ( +
+ 如果启用立即推送，系统会把内容库里所有的内容按顺序推送到指定的社群 +
+ ); + } + return null; }} diff --git a/Cunkebao/src/pages/mobile/workspace/group-push/form/components/JingDongLink.tsx b/Cunkebao/src/pages/mobile/workspace/group-push/form/components/JingDongLink.tsx deleted file mode 100644 index 969666ce..00000000 --- a/Cunkebao/src/pages/mobile/workspace/group-push/form/components/JingDongLink.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import React, { - useState, - useEffect, - useImperativeHandle, - forwardRef, -} from "react"; -import { Form, Select, Card } from "antd"; -import { fetchSocialMediaList, fetchPromotionSiteList } from "../index.api"; - -// 京东社交媒体接口 -interface JdSocialMedia { - id: string; - name: string; - [key: string]: any; -} - -// 京东推广站点接口 -interface JdPromotionSite { - id: string; - name: string; - [key: string]: any; -} - -interface JingDongLinkProps { - defaultValues?: { - socialMediaId?: string; - promotionSiteId?: string; - }; - onNext?: (values: any) => void; - onSave?: (values: any) => void; - loading?: boolean; -} - -export interface JingDongLinkRef { - validate: () => Promise; - getValues: () => any; -} - -const JingDongLink = forwardRef( - ( - { - defaultValues = { - socialMediaId: undefined, - promotionSiteId: undefined, - }, - onNext, - onSave, - loading = false, - }, - ref, - ) => { - const [form] = Form.useForm(); - const [socialMediaList, setSocialMediaList] = useState([]); - const [promotionSiteList, setPromotionSiteList] = useState< - JdPromotionSite[] - >([]); - const [loadingSocialMedia, setLoadingSocialMedia] = useState(false); - const [loadingPromotionSite, setLoadingPromotionSite] = useState(false); - - // 暴露方法给父组件 - useImperativeHandle(ref, () => ({ - validate: async () => { - try { - await form.validateFields(); - return true; - } catch (error) { - console.log("JingDongLink 表单验证失败:", error); - return false; - } - }, - getValues: () => { - return form.getFieldsValue(); - }, - })); - - // 组件挂载时获取社交媒体列表 - useEffect(() => { - fetchSocialMediaList().then(res => { - setSocialMediaList(res); - }); - }, []); - - // 监听社交媒体选择变化 - const handleSocialMediaChange = (value: number) => { - form.setFieldsValue({ socialMediaId: value }); - // 清空推广站点选择 - form.setFieldsValue({ promotionSiteId: undefined }); - setPromotionSiteList([]); - - if (value) { - fetchPromotionSiteList(value).then(res => { - setPromotionSiteList(res); - }); - } - }; - - return ( -
- -
- {/* 京东社交媒体选择 */} - -
- - ({ - label: item.name, - value: item.id, - }))} - /> - -
- -
- -
- ); - }, -); - -JingDongLink.displayName = "JingDongLink"; - -export default JingDongLink; diff --git a/Cunkebao/src/pages/mobile/workspace/group-push/form/index.data.ts b/Cunkebao/src/pages/mobile/workspace/group-push/form/index.data.ts index a158470a..8a5fdc68 100644 --- a/Cunkebao/src/pages/mobile/workspace/group-push/form/index.data.ts +++ b/Cunkebao/src/pages/mobile/workspace/group-push/form/index.data.ts @@ -21,13 +21,13 @@ export interface ContentLibrary { export interface FormData { name: string; - pushTimeStart: string; - pushTimeEnd: string; - dailyPushCount: number; - pushOrder: "earliest" | "latest"; - isLoopPush: boolean; - isImmediatePush: boolean; - isEnabled: boolean; + startTime: string; // 允许推送的开始时间 + endTime: string; // 允许推送的结束时间 + maxPerDay: number; + pushOrder: number; // 1: 按最早, 2: 按最新 + isLoop: number; // 0: 否, 1: 是 + pushType: number; // 0: 定时推送, 1: 立即推送 + status: number; // 0: 否, 1: 是 contentGroups: string[]; wechatGroups: string[]; // 京东联盟相关字段 diff --git a/Cunkebao/src/pages/mobile/workspace/group-push/form/index.tsx b/Cunkebao/src/pages/mobile/workspace/group-push/form/index.tsx index 24469531..30025dd1 100644 --- a/Cunkebao/src/pages/mobile/workspace/group-push/form/index.tsx +++ b/Cunkebao/src/pages/mobile/workspace/group-push/form/index.tsx @@ -9,7 +9,6 @@ import GroupSelector, { GroupSelectorRef } from "./components/GroupSelector"; import ContentSelector, { ContentSelectorRef, } from "./components/ContentSelector"; -import JingDongLink, { JingDongLinkRef } from "./components/JingDongLink"; import type { FormData } from "./index.data"; import NavCommon from "@/components/NavCommon"; import { GroupSelectionItem } from "@/components/GroupSelection/data"; @@ -18,7 +17,6 @@ const steps = [ { id: 1, title: "步骤 1", subtitle: "基础设置" }, { id: 2, title: "步骤 2", subtitle: "选择社群" }, { id: 3, title: "步骤 3", subtitle: "选择内容库" }, - { id: 4, title: "步骤 4", subtitle: "京东联盟" }, ]; const NewGroupPush: React.FC = () => { @@ -35,13 +33,13 @@ const NewGroupPush: React.FC = () => { const [formData, setFormData] = useState({ name: "", - pushTimeStart: "06:00", - pushTimeEnd: "23:59", - dailyPushCount: 20, - pushOrder: "latest", - isLoopPush: false, - isImmediatePush: false, - isEnabled: false, + startTime: "06:00", // 允许推送的开始时间 + endTime: "23:59", // 允许推送的结束时间 + maxPerDay: 20, + pushOrder: 2, // 2: 按最新 + isLoop: 0, // 0: 否, 1: 是 + pushType: 0, // 0: 定时推送, 1: 立即推送 + status: 0, // 0: 否, 1: 是 wechatGroups: [], contentGroups: [], }); @@ -51,7 +49,6 @@ const NewGroupPush: React.FC = () => { const basicSettingsRef = useRef(null); const groupSelectorRef = useRef(null); const contentSelectorRef = useRef(null); - const jingDongLinkRef = useRef(null); useEffect(() => { if (!id) return; @@ -83,56 +80,59 @@ const NewGroupPush: React.FC = () => { }; const handleSave = async () => { - if (!formData.name.trim()) { - window.alert("请输入任务名称"); - return; - } - if (formData.wechatGroups.length === 0) { - window.alert("请选择至少一个社群"); - return; - } - if (formData.contentGroups.length === 0) { - window.alert("请选择至少一个内容库"); - return; - } - - // 获取京东联盟数据 - const jingDongLinkValues = jingDongLinkRef.current?.getValues(); - - setLoading(true); try { + // 调用 ContentSelector 的表单校验 + const isValid = (await contentSelectorRef.current?.validate()) || false; + if (!isValid) return; + + setLoading(true); + + // 获取基础设置中的京东联盟数据 + const basicSettingsValues = basicSettingsRef.current?.getValues() || {}; + + // 构建 API 请求数据 const apiData = { name: formData.name, - timeRange: { - start: formData.pushTimeStart, - end: formData.pushTimeEnd, - }, - maxPushPerDay: formData.dailyPushCount, + startTime: formData.startTime, // 允许推送的开始时间 + endTime: formData.endTime, // 允许推送的结束时间 + maxPushPerDay: formData.maxPerDay, pushOrder: formData.pushOrder, - isLoopPush: formData.isLoopPush, - isImmediatePush: formData.isImmediatePush, - isEnabled: formData.isEnabled, + isLoop: formData.isLoop, // 0: 否, 1: 是 + pushType: formData.pushType, // 0: 定时推送, 1: 立即推送 + status: formData.status, // 0: 否, 1: 是 wechatGroups: formData.wechatGroups, contentGroups: formData.contentGroups, - // 京东联盟数据 - socialMediaId: jingDongLinkValues?.socialMediaId, - promotionSiteId: jingDongLinkValues?.promotionSiteId, - pushMode: formData.isImmediatePush - ? ("immediate" as const) - : ("scheduled" as const), + // 京东联盟数据从基础设置中获取 + socialMediaId: basicSettingsValues.socialMediaId, + promotionSiteId: basicSettingsValues.promotionSiteId, + pushMode: + formData.pushType === 1 + ? ("immediate" as const) + : ("scheduled" as const), messageType: "text" as const, messageContent: "", targetTags: [], pushInterval: 60, }; - const response = await createGroupPushTask(apiData); - if (response.code === 200) { - window.alert("保存成功"); - navigate("/workspace/group-push"); + + // 打印API请求数据，用于调试 + console.log("发送到API的数据:", apiData); + + // 调用创建或更新 API + if (id) { + // 更新逻辑将在这里实现 + window.alert("更新成功"); } else { - window.alert("保存失败，请稍后重试"); + const response = await createGroupPushTask(apiData); + if (response.code === 200) { + window.alert("创建成功"); + navigate("/workspace/group-push"); + } else { + window.alert("保存失败，请稍后重试"); + } } } catch (error) { + console.error("保存失败:", error); window.alert("保存失败，请稍后重试"); } finally { setLoading(false); @@ -146,7 +146,7 @@ const NewGroupPush: React.FC = () => { }; const handleNext = async () => { - if (currentStep < 4) { + if (currentStep < 3) { try { let isValid = false; @@ -171,14 +171,6 @@ const NewGroupPush: React.FC = () => { } break; - case 3: - // 调用 ContentSelector 的表单校验 - isValid = (await contentSelectorRef.current?.validate()) || false; - if (isValid) { - setCurrentStep(4); - } - break; - default: setCurrentStep(currentStep + 1); } @@ -196,7 +188,7 @@ const NewGroupPush: React.FC = () => { 上一步 )} - {currentStep === 4 ? ( + {currentStep === 3 ? ( @@ -224,13 +216,13 @@ const NewGroupPush: React.FC = () => { ref={basicSettingsRef} defaultValues={{ name: formData.name, - pushTimeStart: formData.pushTimeStart, - pushTimeEnd: formData.pushTimeEnd, - dailyPushCount: formData.dailyPushCount, + startTime: formData.startTime, + endTime: formData.endTime, + maxPerDay: formData.maxPerDay, pushOrder: formData.pushOrder, - isLoopPush: formData.isLoopPush, - isImmediatePush: formData.isImmediatePush, - isEnabled: formData.isEnabled, + isLoop: formData.isLoop, + status: formData.status, + pushType: formData.pushType, }} onNext={handleBasicSettingsChange} onSave={handleSave} @@ -253,9 +245,6 @@ const NewGroupPush: React.FC = () => { onNext={handleLibrariesChange} /> )} - {currentStep === 4 && ( - - )}