211211</template >
212212
213213<script setup>
214- import { useRouter } from " vue-router" ;
215- import { ref , onMounted } from " vue" ;
214+ import { useRouter , useRoute } from " vue-router" ;
215+ import { ref , onMounted , onBeforeUnmount , watch } from " vue" ;
216216import { ElMessage } from " element-plus" ;
217217import useFetchApi from " ../../../packs/useFetchApi" ;
218218import { convertUtcToLocalTime } from " ../../../packs/datetimeUtils" ;
219219import { useI18n } from " vue-i18n" ;
220220
221221const { t , locale } = useI18n ();
222222const tableLoading = ref (false );
223+ const refreshTimer = ref (null );
224+ const route = useRoute ();
223225
224226const form = ref ({
225227 searchStr: " " ,
@@ -244,11 +246,15 @@ const pagination = ref({
244246 pageSize: 10 ,
245247 total: 0 ,
246248 handleSizeChange : (size ) => {
249+ // 切换分页时先停止定时任务
250+ stopRefreshTimer ();
247251 pagination .value .pageSize = size;
248252 pagination .value .currentPage = 1 ; // 切换每页大小时回到第一页
249253 getDataFlowListFun ();
250254 },
251255 handleCurrentChange : (page ) => {
256+ // 切换分页时先停止定时任务
257+ stopRefreshTimer ();
252258 pagination .value .currentPage = page;
253259 getDataFlowListFun ();
254260 }
@@ -266,9 +272,51 @@ const getDataFlowListFun = async () => {
266272 pagination .value .total = data .value .total || 0 ;
267273 }
268274 tableLoading .value = false ;
275+
276+ // 数据更新后检查是否需要启动/停止定时任务
277+ checkAndManageTimer ();
278+ };
279+
280+ // 检查当前页是否存在 Processing 状态的任务
281+ const hasProcessingTask = () => {
282+ return tableData .value .some (item => item .status === ' Processing' );
283+ };
284+
285+ // 启动定时任务
286+ const startRefreshTimer = () => {
287+ // 如果定时器已存在,先清除,避免创建多个定时器
288+ if (refreshTimer .value ) {
289+ stopRefreshTimer ();
290+ }
291+
292+ // 确保定时器不存在后再创建新的
293+ if (! refreshTimer .value ) {
294+ refreshTimer .value = setInterval (() => {
295+ getDataFlowListFun ();
296+ }, 3000 ); // 3秒刷新一次
297+ }
298+ };
299+
300+ // 停止定时任务
301+ const stopRefreshTimer = () => {
302+ if (refreshTimer .value ) {
303+ clearInterval (refreshTimer .value );
304+ refreshTimer .value = null ;
305+ }
306+ };
307+
308+ // 检查并管理定时任务
309+ const checkAndManageTimer = () => {
310+ if (hasProcessingTask ()) {
311+ startRefreshTimer ();
312+ } else {
313+ stopRefreshTimer ();
314+ }
269315};
270316
271317const handleSearch = () => {
318+ // 搜索时先停止定时任务
319+ stopRefreshTimer ();
272320 pagination .value .currentPage = 1 ;
273321 getDataFlowListFun ();
274322};
@@ -345,9 +393,22 @@ const goToNewTask = (path) => {
345393 router .push (path);
346394};
347395
396+ // 监听路由变化,停止定时任务
397+ watch (
398+ () => route .path ,
399+ () => {
400+ stopRefreshTimer ();
401+ }
402+ );
403+
348404onMounted (() => {
349405 getDataFlowListFun ();
350406});
407+
408+ // 组件卸载时清理定时器
409+ onBeforeUnmount (() => {
410+ stopRefreshTimer ();
411+ });
351412 </script >
352413<style lang="less" scoped>
353414:deep(.settingsTableBtn ) {
0 commit comments