diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/FilterModal.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/FilterModal.tsx index f1fb7d29..357cee53 100644 --- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/FilterModal.tsx +++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/FilterModal.tsx @@ -10,13 +10,21 @@ interface FilterModalProps { visible: boolean; onClose: () => void; onConfirm: (filters: { - deviceld: string[]; // 更新为 deviceld - packageld: string; // 更新为 packageld - taskId: string; // 更新为 taskId + selectedDevices: DeviceSelectionItem[]; // 更新为 deviceld + packageld: number; // 更新为 packageld + sceneId: number; // 更新为 sceneId userValue: number; addStatus: number; // 更新为 addStatus }) => void; scenarioOptions: ScenarioOption[]; + // 初始筛选值 + initialFilters?: { + selectedDevices: DeviceSelectionItem[]; + packageId: number; + scenarioId: number; + userValue: number; + userStatus: number; + }; } const valueLevelOptions = [ @@ -37,17 +45,35 @@ const FilterModal: React.FC = ({ visible, onClose, onConfirm, + initialFilters, }) => { const [selectedDevices, setSelectedDevices] = useState( - [], + initialFilters?.selectedDevices || [], + ); + const [packageId, setPackageId] = useState(initialFilters?.packageId); + const [scenarioId, setScenarioId] = useState( + initialFilters?.scenarioId, + ); + const [userValue, setUserValue] = useState( + initialFilters?.userValue || 0, + ); + const [userStatus, setUserStatus] = useState( + initialFilters?.userStatus || 0, ); - const [packageId, setPackageId] = useState(""); - const [scenarioId, setScenarioId] = useState(""); - const [userValue, setUserValue] = useState(0); - const [userStatus, setUserStatus] = useState(0); const [scenarioOptions, setScenarioOptions] = useState([]); const [packageOptions, setPackageOptions] = useState([]); + // 同步初始值变化 + useEffect(() => { + if (initialFilters) { + setSelectedDevices(initialFilters.selectedDevices || []); + setPackageId(initialFilters.packageId || 0); + setScenarioId(initialFilters.scenarioId || 0); + setUserValue(initialFilters.userValue || 0); + setUserStatus(initialFilters.userStatus || 0); + } + }, [initialFilters]); + useEffect(() => { if (visible) { fetchScenarioOptions() @@ -72,9 +98,9 @@ const FilterModal: React.FC = ({ const handleApply = () => { const params = { - deviceld: selectedDevices.map(d => d.id.toString()), // 更新为 deviceld + selectedDevices: selectedDevices, // 更新为 deviceld packageld: packageId, // 更新为 packageld - taskId: scenarioId, // 更新为 taskId + sceneId: scenarioId, // 更新为 sceneId userValue, addStatus: userStatus, // 更新为 addStatus }; @@ -119,7 +145,7 @@ const FilterModal: React.FC = ({ value={packageId} onChange={setPackageId} options={[ - { label: "全部流量池", value: "" }, + { label: "全部流量池", value: 0 }, ...packageOptions.map(p => ({ label: p.name, value: p.id })), ]} /> @@ -131,7 +157,7 @@ const FilterModal: React.FC = ({ value={scenarioId} onChange={setScenarioId} options={[ - { label: "全部场景", value: "" }, + { label: "全部场景", value: 0 }, ...scenarioOptions.map(s => ({ label: s.name, value: s.id })), ]} /> diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts index 5f1509e5..2116682b 100644 --- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts +++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts @@ -16,3 +16,20 @@ export async function fetchScenarioOptions() { export async function fetchPackageOptions() { return request("/v1/traffic/pool/getPackage", {}, "GET"); } + +export async function addPackage(params: { + type: string; // 类型 1搜索 2选择用户 3文件上传 + addPackageId?: string; + addStatus?: string; + deviceId?: string; + keyword?: string; + packageId?: string; + packageName?: string; // 添加的流量池名称 + tableFile?: string; + taskId?: string; // 任务id j及场景获客id + "userIds[]"?: string[]; + userValue?: string; + [property: string]: any; +}) { + return request("/v1/traffic/pool/addPackage", params, "POST"); +} diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx index d53bea0c..2a5c0b86 100644 --- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx +++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx @@ -15,7 +15,8 @@ import type { TrafficPoolUser, ScenarioOption } from "./data"; import DataAnalysisPanel from "./DataAnalysisPanel"; import FilterModal from "./FilterModal"; import BatchAddModal from "./BatchAddModal"; - +import { DeviceSelectionItem } from "@/components/DeviceSelection/data"; +import { join } from "path"; const defaultAvatar = "https://cdn.jsdelivr.net/gh/maokaka/static/avatar-default.png"; @@ -33,11 +34,15 @@ const TrafficPoolList: React.FC = () => { // 筛选相关 const [showFilter, setShowFilter] = useState(false); const [scenarioOptions, setScenarioOptions] = useState([]); - const [selectedDevices, setSelectedDevices] = useState([]); - const [packageId, setPackageId] = useState(0); - const [scenarioId, setScenarioId] = useState(0); - const [userValue, setUserValue] = useState(0); - const [userStatus, setUserStatus] = useState(0); + + // 公共筛选条件状态 + const [filterParams, setFilterParams] = useState({ + selectedDevices: [] as DeviceSelectionItem[], + packageId: 0, + scenarioId: 0, + userValue: 0, + userStatus: 0, + }); // 批量相关 const [selectedIds, setSelectedIds] = useState([]); @@ -47,23 +52,21 @@ const TrafficPoolList: React.FC = () => { const [showStats, setShowStats] = useState(false); // 获取列表 - const getList = async () => { + const getList = async (customParams?: any) => { setLoading(true); try { const params: any = { page, pageSize, keyword: search, - packageld: packageId, // 更新为 packageld - taskId: scenarioId, - userValue, - addStatus: userStatus, + packageld: filterParams.packageId, + sceneId: filterParams.scenarioId, + userValue: filterParams.userValue, + addStatus: filterParams.userStatus, + deviceld: filterParams.selectedDevices.map(d => d.id).join(), + ...customParams, // 允许传入自定义参数覆盖 }; - - // 添加筛选参数 - if (selectedDevices.length > 0) { - params.deviceld = selectedDevices.map(d => d.id).join(","); // 更新为 deviceld - } + console.log("搜索条件:", params); const res = await fetchTrafficPoolList(params); setList(res.list || []); @@ -85,20 +88,6 @@ const TrafficPoolList: React.FC = () => { }); }, []); - // 筛选条件变化时刷新列表 - useEffect(() => { - getList(); - // eslint-disable-next-line - }, [ - page, - search, - selectedDevices, - packageId, - scenarioId, - userValue, - userStatus, - ]); - // 全选/反选 const handleSelectAll = (checked: boolean) => { if (checked) { @@ -118,6 +107,7 @@ const TrafficPoolList: React.FC = () => { // 批量加入分组/流量池 const handleBatchAdd = options => { console.log("批量加入分组", options); + // TODO: 实现批量加入逻辑 setBatchModal(false); setSelectedIds([]); @@ -129,10 +119,13 @@ const TrafficPoolList: React.FC = () => { const debouncedSearch = useCallback(() => { const timer = setTimeout(() => { setSearch(searchInput); + // 搜索时重置到第一页并请求列表 + setPage(1); + getList({ keyword: searchInput, page: 1 }); }, 500); // 500ms 防抖延迟 return () => clearTimeout(timer); - }, [searchInput, setSearch]); + }, [searchInput]); useEffect(() => { const cleanup = debouncedSearch(); @@ -168,7 +161,7 @@ const TrafficPoolList: React.FC = () => { />