diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/api.ts b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/api.ts index 82ed6ff9..aabbc041 100644 --- a/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/api.ts +++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/api.ts @@ -1,9 +1,13 @@ import request from "@/api/request"; export const getAiSettings = () => { - return request("/v1/kefu/ai/settings/get", "GET"); + return request("/v1/kefu/ai/friend/get", "GET"); }; -export const setAiSettings = (data: any) => { - return request("/v1/kefu/ai/settings/set", "POST", data); +export const setAiSettings = (params: { + isUpdata: string; + packageId: string[]; + type: number; +}) => { + return request("/v1/kefu/ai/friend/setAll", params, "POST"); }; diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.module.scss b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.module.scss index eff73214..bdf212f2 100644 --- a/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.module.scss @@ -62,6 +62,26 @@ color: #586069; } } + + .emptyState { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 200px; + text-align: center; + + .emptyText { + font-size: 16px; + color: #999; + margin-bottom: 8px; + } + + .emptyDesc { + font-size: 14px; + color: #ccc; + } + } } // 响应式设计 diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.tsx b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.tsx index 8faa9da1..c0f419e2 100644 --- a/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.tsx @@ -1,21 +1,110 @@ import React, { useState } from "react"; -import { Card, Select, Button, Space, Tag, List } from "antd"; -import { DatabaseOutlined } from "@ant-design/icons"; +import { Card, Select, Button, Space, Tag, List, message, Modal } from "antd"; +import { DatabaseOutlined, ExclamationCircleOutlined } from "@ant-design/icons"; +import PoolSelection from "@/components/PoolSelection"; +import { PoolSelectionItem } from "@/components/PoolSelection/data"; +import { setAiSettings } from "./api"; import styles from "./index.module.scss"; const { Option } = Select; const ReceptionSettings: React.FC = () => { - const [pool, setPool] = useState(); - const [mode, setMode] = useState("人工接待"); + const [selectedPools, setSelectedPools] = useState([]); + const [mode, setMode] = useState(0); + const [loading, setLoading] = useState(false); - const pools = ["官网咨询", "朋友推荐", "展会获客"]; const typeOptions = [ { value: 0, label: "人工接待" }, { value: 1, label: "AI辅助" }, { value: 2, label: "AI接管" }, ]; - const [currentConfig, setCurrentConfig] = useState(null); + + // 处理流量池选择 + const handlePoolSelect = (pools: PoolSelectionItem[]) => { + setSelectedPools(pools); + }; + + // 处理接待模式选择 + const handleModeChange = (value: number) => { + setMode(value); + }; + + // 处理批量设置 + const handleBatchSet = async () => { + if (selectedPools.length === 0) { + message.warning("请先选择流量池"); + return; + } + + const selectedModeLabel = + typeOptions.find(opt => opt.value === mode)?.label || "人工接待"; + const poolNames = selectedPools + .map(pool => pool.name || pool.nickname) + .join("、"); + + Modal.confirm({ + title: "确认批量设置", + icon: , + content: ( +
+

您即将对以下流量池进行批量设置:

+
+ 流量池: + {poolNames} +
+
+ 接待模式: + {selectedModeLabel} +
+

+ 此操作将影响 {selectedPools.length}{" "} + 个流量池的接待设置,确定要继续吗? +

+
+ ), + okText: "确认设置", + cancelText: "取消", + okType: "primary", + onOk: async () => { + setLoading(true); + try { + const packageIds = selectedPools.map(pool => pool.id); + const params = { + isUpdata: "1", // 1表示更新,0表示新增 + packageId: packageIds, + type: mode, + }; + + const response = await setAiSettings(params); + if (response) { + message.success( + `成功为 ${selectedPools.length} 个流量池设置接待模式为"${selectedModeLabel}"`, + ); + // 可以在这里刷新流量池状态列表 + } + } catch (error) { + console.error("批量设置失败:", error); + message.error("批量设置失败,请重试"); + } finally { + setLoading(false); + } + }, + }); + }; return (
@@ -34,25 +123,20 @@ const ReceptionSettings: React.FC = () => {
选择流量池
- + showSelectedList={true} + selectedListMaxHeight={200} + />
接待模式
- {JSON.stringify(currentConfig)} - @@ -78,33 +168,31 @@ const ReceptionSettings: React.FC = () => { } > - ( - - - - {index % 3 === 0 - ? "AI辅助" - : index % 3 === 1 - ? "人工接待" - : "AI接管"} - - - )} - /> + {selectedPools.length > 0 ? ( + ( + + + + {typeOptions.find(opt => opt.value === mode)?.label || + "人工接待"} + + + )} + /> + ) : ( +
+
请先选择流量池
+
+ 选择流量池后将显示其状态信息 +
+
+ )}