From 9161ffccb37c3e707f746674b2bace107bb1014f Mon Sep 17 00:00:00 2001
From: tony.cheng <chengmingwei_1984122@126.com>
Date: Thu, 12 Feb 2026 18:06:49 +0800
Subject: [PATCH] feat: 实现通话状态变化时更新API并刷新页面
---
web-app/src/components/common/OutboundCallWidget.jsx | 80 +++++++++++++++++++++++++++++++++++++++-
1 files changed, 78 insertions(+), 2 deletions(-)
diff --git a/web-app/src/components/common/OutboundCallWidget.jsx b/web-app/src/components/common/OutboundCallWidget.jsx
index f5bdce5..33ed299 100644
--- a/web-app/src/components/common/OutboundCallWidget.jsx
+++ b/web-app/src/components/common/OutboundCallWidget.jsx
@@ -8,11 +8,17 @@
// 活跃状态列表
const ACTIVE_STATUSES = ['Scheduling', 'InProgress', 'Calling', 'Ringing', 'Answered'];
+// Scheduling 状态 - 此状态变化不需要调用更新API
+const SCHEDULING_STATUS = 'Scheduling';
+
/**
* 智能外呼通话显示组件
* 显示在页面右下角的气泡组件，支持多人通话
+ * @param {Object} props
+ * @param {Function} props.onSwitchTab - Tab切换回调
+ * @param {Function} props.onRefreshData - 数据刷新回调
*/
-const OutboundCallWidget = () => {
+const OutboundCallWidget = ({ onSwitchTab, onRefreshData }) => {
const { caseData } = useCaseData();
const [isVisible, setIsVisible] = useState(false); // 默认隐藏
const [isMinimized, setIsMinimized] = useState(true);
@@ -121,6 +127,55 @@
};
/**
+ * 批量更新通话状态到后端
+ * @param {Array} jobsToUpdate - 需要更新的任务列表
+ * @returns {Promise<boolean>} 是否有成功的更新
+ */
+ const updateCallStatusToBackend = async (jobsToUpdate) => {
+ if (!jobsToUpdate || jobsToUpdate.length === 0) return false;
+
+ try {
+ // 并行调用所有任务的更新API
+ const results = await Promise.all(
+ jobsToUpdate.map(async (job) => {
+ try {
+ await OutboundBotAPIService.updateCallStatus({
+ jobId: job.jobId,
+ callStatus: job.newStatus
+ });
+ console.log(`状态更新成功: ${job.jobId} -> ${job.newStatus}`);
+ return { success: true, job };
+ } catch (err) {
+ console.error(`状态更新失败: ${job.jobId}`, err);
+ return { success: false, job };
+ }
+ })
+ );
+
+ // 检查是否有成功的更新
+ const hasSuccess = results.some(r => r.success);
+ return hasSuccess;
+ } catch (err) {
+ console.error('批量更新状态失败:', err);
+ return false;
+ }
+ };
+
+ /**
+ * 触发页面更新（刷新数据 + 切换Tab）
+ */
+ const triggerPageUpdate = useCallback(() => {
+ // 刷新案件数据
+ if (onRefreshData) {
+ onRefreshData();
+ }
+ // 切换到AI调解实时看板
+ if (onSwitchTab) {
+ onSwitchTab('mediation-board');
+ }
+ }, [onRefreshData, onSwitchTab]);
+
+ /**
* 移除终态或超时的任务
* @param {Array} jobs - 当前任务数组
* @returns {Array} 清理后的任务数组
@@ -164,6 +219,9 @@
return;
}
+ // 收集需要更新到后端的任务（状态变化且原状态不是Scheduling）
+ const jobsNeedBackendUpdate = [];
+
// 并行查询所有任务的状态
const updatedJobs = await Promise.all(
successJobs.map(async (job) => {
@@ -180,6 +238,14 @@
// 如果状态发生变化，更新任务
if (newStatus !== job.callStatus) {
console.log(`任务 ${job.jobId} 状态更新: ${job.callStatus} -> ${newStatus}`);
+
+ // 检查是否需要调用后端更新API（排除Scheduling状态）
+ if (job.callStatus !== SCHEDULING_STATUS) {
+ jobsNeedBackendUpdate.push({
+ ...job,
+ newStatus
+ });
+ }
// 如果是终态，可以从轮询中移除
if (!ACTIVE_STATUSES.includes(newStatus)) {
@@ -224,6 +290,16 @@
// 清理超时任务
const cleanedJobs = cleanupJobs(filteredJobs);
+ // 如果有需要更新到后端的任务，批量调用更新API
+ if (jobsNeedBackendUpdate.length > 0) {
+ const hasUpdateSuccess = await updateCallStatusToBackend(jobsNeedBackendUpdate);
+
+ // 如果有成功的更新，触发页面更新
+ if (hasUpdateSuccess) {
+ triggerPageUpdate();
+ }
+ }
+
// 保存到 localStorage
saveJobsToStorage(cleanedJobs);
@@ -238,7 +314,7 @@
setIsVisible(true);
}
}
- }, [isVisible]);
+ }, [isVisible, triggerPageUpdate]);
// 定时轮询通话状态
useEffect(() => {
--
Gitblit v1.8.0