feat: 计划任务记录增加定时刷新 (#529)

frontend/src/views/container/compose/create/index.vue

@@ -115,7 +115,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, reactive, ref, shallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
 import FileList from '@/components/file-list/index.vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
@@ -265,6 +265,11 @@ const loadDir = async (path: string) => {
     hasChecked.value = false;
 };
 
+onBeforeUnmount(() => {
+    clearInterval(Number(timer));
+    timer = null;
+});
+
 defineExpose({
     acceptParams,
 });

frontend/src/views/container/container/log/index.vue

@@ -44,7 +44,7 @@
 import { logContainer } from '@/api/modules/container';
 import i18n from '@/lang';
 import { dateFormatForName } from '@/utils/util';
-import { nextTick, reactive, ref, shallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
@@ -135,6 +135,11 @@ const acceptParams = (props: DialogProps): void => {
     }, 1000 * 5);
 };
 
+onBeforeUnmount(() => {
+    clearInterval(Number(timer));
+    timer = null;
+});
+
 defineExpose({
     acceptParams,
 });

frontend/src/views/container/image/build/index.vue

@@ -89,7 +89,7 @@ import FileList from '@/components/file-list/index.vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { nextTick, reactive, ref, shallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
@@ -180,6 +180,11 @@ const loadLogs = async (path: string) => {
     }, 1000 * 3);
 };
 
+onBeforeUnmount(() => {
+    clearInterval(Number(timer));
+    timer = null;
+});
+
 const loadBuildDir = async (path: string) => {
     form.dockerfile = path;
 };

frontend/src/views/container/image/pull/index.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, reactive, ref, shallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
@@ -166,6 +166,11 @@ function loadDetailInfo(id: number) {
     return '';
 }
 
+onBeforeUnmount(() => {
+    clearInterval(Number(timer));
+    timer = null;
+});
+
 defineExpose({
     acceptParams,
 });

frontend/src/views/container/image/push/index.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, reactive, ref, shallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
@@ -171,6 +171,11 @@ function loadDetailInfo(id: number) {
     return '';
 }
 
+onBeforeUnmount(() => {
+    clearInterval(Number(timer));
+    timer = null;
+});
+
 defineExpose({
     acceptParams,
 });

frontend/src/views/cronjob/record/index.vue

@@ -49,10 +49,6 @@
                          {{ $t('cronjob.handle') }}
                     </el-tag>
                     <span class="buttons">
-                        <el-button type="primary" @click="onRefresh" link>
-                            {{ $t('commons.button.refresh') }}
-                        </el-button>
-                        <el-divider direction="vertical" />
                         <el-button type="primary" @click="onHandle(dialogData.rowData)" link>
                             {{ $t('commons.button.handle') }}
                         </el-button>
@@ -290,7 +286,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { onBeforeUnmount, reactive, ref } from 'vue';
 import { Cronjob } from '@/api/interface/cronjob';
 import { loadZero } from '@/utils/util';
 import { searchRecords, download, handleOnce, updateStatus, cleanRecords } from '@/api/modules/cronjob';
@@ -307,6 +303,8 @@ import { MsgError, MsgInfo, MsgSuccess } from '@/utils/message';
 const loading = ref();
 const hasRecords = ref();
 
+let timer: NodeJS.Timer | null = null;
+
 const mymirror = ref();
 const extensions = [javascript(), oneDark];
 
@@ -324,6 +322,9 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
     dialogData.value = params;
     recordShow.value = true;
     search(true);
+    timer = setInterval(() => {
+        onRefresh();
+    }, 1000 * 10);
 };
 
 const shortcuts = [
@@ -462,11 +463,27 @@ const search = async (isInit: boolean) => {
     searchInfo.recordTotal = res.data.total;
 };
 
-const onRefresh = () => {
+const onRefresh = async () => {
     records.value = [];
     searchInfo.pageSize = searchInfo.pageSize * searchInfo.page;
     searchInfo.page = 1;
-    search(true);
+    if (timeRangeLoad.value && timeRangeLoad.value.length === 2) {
+        searchInfo.startTime = timeRangeLoad.value[0];
+        searchInfo.endTime = timeRangeLoad.value[1];
+    } else {
+        searchInfo.startTime = new Date(new Date().setHours(0, 0, 0, 0));
+        searchInfo.endTime = new Date();
+    }
+    let params = {
+        page: searchInfo.page,
+        pageSize: searchInfo.pageSize,
+        cronjobID: dialogData.value.rowData!.id,
+        startTime: searchInfo.startTime,
+        endTime: searchInfo.endTime,
+        status: searchInfo.status,
+    };
+    const res = await searchRecords(params);
+    records.value = res.data.items || [];
 };
 
 const onDownload = async (record: any, backupID: number) => {
@@ -551,6 +568,11 @@ function loadWeek(i: number) {
     return '';
 }
 
+onBeforeUnmount(() => {
+    clearInterval(Number(timer));
+    timer = null;
+});
+
 defineExpose({
     acceptParams,
 });