diff --git a/Cunkebao/src/pages/mobile/scenarios/plan/new/index.data.ts b/Cunkebao/src/pages/mobile/scenarios/plan/new/index.data.ts index 5d98f1909..d7c42eb75 100644 --- a/Cunkebao/src/pages/mobile/scenarios/plan/new/index.data.ts +++ b/Cunkebao/src/pages/mobile/scenarios/plan/new/index.data.ts @@ -24,11 +24,13 @@ export interface FormData { posters: any[]; // 后续可替换为具体Poster类型 device: string[]; customTags: string[]; + customTagsOptions: string[]; deveiceGroups: string[]; deveiceGroupsOptions: DeviceSelectionItem[]; wechatGroups: string[]; wechatGroupsOptions: GroupSelectionItem[]; messagePlans: any[]; + [key: string]: any; } export const defFormData: FormData = { name: "", @@ -46,6 +48,7 @@ export const defFormData: FormData = { posters: [], device: [], customTags: [], + customTagsOptions: [], messagePlans: [], deveiceGroups: [], deveiceGroupsOptions: [], diff --git a/Cunkebao/src/pages/mobile/scenarios/plan/new/index.tsx b/Cunkebao/src/pages/mobile/scenarios/plan/new/index.tsx index 4777e8d9a..708d29cbb 100644 --- a/Cunkebao/src/pages/mobile/scenarios/plan/new/index.tsx +++ b/Cunkebao/src/pages/mobile/scenarios/plan/new/index.tsx @@ -1,7 +1,6 @@ import { useState, useEffect } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { message, Button, Space } from "antd"; -import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons"; import NavCommon from "@/components/NavCommon"; import BasicSettings from "./steps/BasicSettings"; import FriendRequestSettings from "./steps/FriendRequestSettings"; @@ -53,6 +52,9 @@ export default function NewPlan() { ...prev, name: detail.name ?? "", scenario: Number(detail.scenario) || 1, + scenarioTags: detail.scenarioTags ?? [], + customTags: detail.customTags ?? [], + customTagsOptions: detail.customTags ?? [], posters: detail.posters ?? [], device: detail.device ?? [], remarkType: detail.remarkType ?? "phone", diff --git a/Cunkebao/src/pages/mobile/scenarios/plan/new/steps/BasicSettings.tsx b/Cunkebao/src/pages/mobile/scenarios/plan/new/steps/BasicSettings.tsx index 030501c0f..7590f6faa 100644 --- a/Cunkebao/src/pages/mobile/scenarios/plan/new/steps/BasicSettings.tsx +++ b/Cunkebao/src/pages/mobile/scenarios/plan/new/steps/BasicSettings.tsx @@ -38,7 +38,6 @@ const generatePosterMaterials = (): Material[] => { }; const BasicSettings: React.FC = ({ - isEdit, formData, onChange, sceneList, @@ -52,14 +51,16 @@ const BasicSettings: React.FC = ({ // 自定义标签相关状态 const [customTagInput, setCustomTagInput] = useState(""); - const [customTags, setCustomTags] = useState( - formData.customTags || [], + const [customTagsOptions, setCustomTagsOptions] = useState( + formData.customTagsOptions || [], ); const [tips, setTips] = useState(formData.tips || ""); const [selectedScenarioTags, setSelectedScenarioTags] = useState( formData.scenarioTags || [], ); - + const [selectedCustomTags, setSelectedCustomTags] = useState( + formData.customTags || [], + ); // 电话获客相关状态 const [phoneSettings, setPhoneSettings] = useState({ autoAdd: formData.phoneSettings?.autoAdd ?? true, @@ -81,6 +82,17 @@ const BasicSettings: React.FC = ({ } }, [formData, onChange]); + // 监听 formData 变化,同步自定义标签和获客标签状态 + useEffect(() => { + setCustomTagsOptions(formData.customTagsOptions || []); + setSelectedCustomTags(formData.customTags || []); + }, [formData.customTagsOptions, formData.customTags]); + + // 监听获客标签变化 + useEffect(() => { + setSelectedScenarioTags(formData.scenarioTags || []); + }, [formData.scenarioTags]); + useEffect(() => { setTips(formData.tips || ""); }, [formData.tips]); @@ -99,32 +111,58 @@ const BasicSettings: React.FC = ({ onChange({ ...formData, scenarioTags: newTags }); }; + const handleCustomTagToggle = (tag: string) => { + const newTags = selectedCustomTags.includes(tag) + ? selectedCustomTags.filter((t: string) => t !== tag) + : [...selectedCustomTags, tag]; + setSelectedCustomTags(newTags); + onChange({ ...formData, customTags: newTags }); + }; // 添加自定义标签 const handleAddCustomTag = () => { if (!customTagInput.trim()) return; const newTag = customTagInput.trim(); - const updatedCustomTags = [...customTags, newTag]; - setCustomTags(updatedCustomTags); + // 已存在则忽略 + if (customTagsOptions.includes(newTag)) { + // 若未选中则顺便选中 + const maybeSelected = selectedCustomTags.includes(newTag) + ? selectedCustomTags + : [...selectedCustomTags, newTag]; + setSelectedCustomTags(maybeSelected); + onChange({ ...formData, customTags: maybeSelected }); + setCustomTagInput(""); + return; + } + + const updatedOptions = [...customTagsOptions, newTag]; + const updatedSelected = [...selectedCustomTags, newTag]; + setCustomTagsOptions(updatedOptions); + setSelectedCustomTags(updatedSelected); setCustomTagInput(""); - onChange({ ...formData, customTags: updatedCustomTags }); + onChange({ + ...formData, + customTagsOptions: updatedOptions, + customTags: updatedSelected, + }); }; // 删除自定义标签 const handleRemoveCustomTag = (tagName: string) => { - const updatedCustomTags = customTags.filter( + const updatedOptions = customTagsOptions.filter( (tag: string) => tag !== tagName, ); - setCustomTags(updatedCustomTags); - onChange({ ...formData, customTags: updatedCustomTags }); - // 同时从选中标签中移除 - const updatedSelectedTags = selectedScenarioTags.filter( + setCustomTagsOptions(updatedOptions); + + // 同时从选中的自定义标签中移除 + const updatedSelectedCustom = selectedCustomTags.filter( (t: string) => t !== tagName, ); - setSelectedScenarioTags(updatedSelectedTags); + setSelectedCustomTags(updatedSelectedCustom); + onChange({ ...formData, - scenarioTags: updatedSelectedTags, - customTags: updatedCustomTags, + customTagsOptions: updatedOptions, + customTags: updatedSelectedCustom, }); }; @@ -248,11 +286,11 @@ const BasicSettings: React.FC = ({ ))} {/* 自定义标签 */} - {customTags.map((tag: string) => ( + {customTagsOptions.map((tag: string) => ( handleScenarioTagToggle(tag)} + color={selectedCustomTags.includes(tag) ? "blue" : "default"} + onClick={() => handleCustomTagToggle(tag)} closable onClose={() => handleRemoveCustomTag(tag)} className={styles["basic-tag-item"]} @@ -268,9 +306,14 @@ const BasicSettings: React.FC = ({ type="text" value={customTagInput} onChange={e => setCustomTagInput(e.target.value)} + onPressEnter={handleAddCustomTag} placeholder="添加自定义标签" /> -