Skip to content

Commit dd76301

Browse files
kongsiyukongsiyu
committed
refactor: 重构定时任务模块
1.修改crud写法 2.修复dropdown组件与v-hasPermi冲突问题 3.优化详情页后续执行时间
1 parent a422300 commit dd76301

File tree

8 files changed

+790
-456
lines changed

8 files changed

+790
-456
lines changed

‎src/views/infra/job/JobLog.vue

Lines changed: 167 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,179 @@
11
<template>
2-
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<template #toolbar_buttons>
6-
<XButton
7-
type="warning"
8-
preIcon="ep:download"
9-
:title="t('action.export')"
10-
v-hasPermi="['infra:job:export']"
11-
@click="exportList('定时任务详情.xls')"
2+
<content-wrap>
3+
<!-- 搜索栏 -->
4+
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="120px">
5+
<el-form-item label="处理器的名字" prop="handlerName">
6+
<el-input
7+
v-model="queryParams.handlerName"
8+
placeholder="请输入处理器的名字"
9+
clearable
10+
@keyup.enter="handleQuery"
11+
/>
12+
</el-form-item>
13+
<el-form-item label="开始执行时间" prop="beginTime">
14+
<el-date-picker
15+
clearable
16+
v-model="queryParams.beginTime"
17+
type="date"
18+
value-format="YYYY-MM-DD"
19+
placeholder="选择开始执行时间"
1220
/>
13-
</template>
14-
<template #beginTime_default="{ row }">
15-
<span>{{
16-
dayjs(row.beginTime).format('YYYY-MM-DD HH:mm:ss') +
17-
' ~ ' +
18-
dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss')
19-
}}</span>
20-
</template>
21-
<template #duration_default="{ row }">
22-
<span>{{ row.duration + ' 毫秒' }}</span>
23-
</template>
24-
<template #actionbtns_default="{ row }">
25-
<XTextButton
26-
preIcon="ep:view"
27-
:title="t('action.detail')"
28-
v-hasPermi="['infra:job:query']"
29-
@click="handleDetail(row)"
21+
</el-form-item>
22+
<el-form-item label="结束执行时间" prop="endTime">
23+
<el-date-picker
24+
clearable
25+
v-model="queryParams.endTime"
26+
type="date"
27+
value-format="YYYY-MM-DD"
28+
placeholder="选择结束执行时间"
3029
/>
31-
</template>
32-
</XTable>
33-
</ContentWrap>
34-
<XModal v-model="dialogVisible" :title="dialogTitle">
35-
<!-- 对话框(详情) -->
36-
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
37-
<template #retryInterval="{ row }">
38-
<span>{{ row.retryInterval + '毫秒' }} </span>
39-
</template>
40-
<template #monitorTimeout="{ row }">
41-
<span>{{ row.monitorTimeout > 0 ? row.monitorTimeout + ' 毫秒' : '未开启' }}</span>
42-
</template>
43-
</Descriptions>
44-
<!-- 操作按钮 -->
45-
<template #footer>
46-
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
47-
</template>
48-
</XModal>
30+
</el-form-item>
31+
<el-form-item label="任务状态" prop="status">
32+
<el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
33+
<el-option
34+
v-for="dict in getDictOptions(DICT_TYPE.INFRA_JOB_LOG_STATUS)"
35+
:key="dict.value"
36+
:label="dict.label"
37+
:value="dict.value"
38+
/>
39+
</el-select>
40+
</el-form-item>
41+
<el-form-item>
42+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
43+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
44+
<el-button
45+
type="success"
46+
plain
47+
@click="handleExport"
48+
:loading="exportLoading"
49+
v-hasPermi="['infra:job:export']"
50+
>
51+
<Icon icon="ep:download" class="mr-5px" /> 导出
52+
</el-button>
53+
</el-form-item>
54+
</el-form>
55+
56+
<el-table v-loading="loading" :data="list">
57+
<el-table-column label="日志编号" align="center" prop="id" />
58+
<el-table-column label="任务编号" align="center" prop="jobId" />
59+
<el-table-column label="处理器的名字" align="center" prop="handlerName" />
60+
<el-table-column label="处理器的参数" align="center" prop="handlerParam" />
61+
<el-table-column label="第几次执行" align="center" prop="executeIndex" />
62+
<el-table-column label="执行时间" align="center" width="180">
63+
<template #default="scope">
64+
<span>{{ parseTime(scope.row.beginTime) + ' ~ ' + parseTime(scope.row.endTime) }}</span>
65+
</template>
66+
</el-table-column>
67+
<el-table-column label="执行时长" align="center" prop="duration">
68+
<template #default="scope">
69+
<span>{{ scope.row.duration + ' 毫秒' }}</span>
70+
</template>
71+
</el-table-column>
72+
<el-table-column label="任务状态" align="center" prop="status">
73+
<template #default="scope">
74+
<dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="scope.row.status" />
75+
</template>
76+
</el-table-column>
77+
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
78+
<template #default="scope">
79+
<el-button
80+
link
81+
icon="el-icon-view"
82+
@click="handleView(scope.row.id)"
83+
:loading="exportLoading"
84+
v-hasPermi="['infra:job:query']"
85+
>详细
86+
</el-button>
87+
</template>
88+
</el-table-column>
89+
</el-table>
90+
91+
<pagination
92+
v-show="total > 0"
93+
:total="total"
94+
v-model:page="queryParams.pageNo"
95+
v-model:limit="queryParams.pageSize"
96+
@pagination="getList"
97+
/>
98+
</content-wrap>
99+
<!-- 表单弹窗：查看 -->
100+
<log-view ref="viewModalRef" @success="getList" />
49101
</template>
50-
<script setup lang="ts" name="JobLog">
51-
import dayjs from 'dayjs'
52102

103+
<script setup lang="ts" name="JobLog">
104+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
105+
import download from '@/utils/download'
106+
import LogView from './JobLogView.vue'
53107
import * as JobLogApi from '@/api/infra/jobLog'
54-
import { allSchemas } from './jobLog.data'
108+
import { parseTime } from './utils'
55109
56-
const { t } = useI18n() // 国际化
57-
// 列表相关的变量
58-
const [registerTable, { exportList }] = useXTable({
59-
allSchemas: allSchemas,
60-
getListApi: JobLogApi.getJobLogPageApi,
61-
exportListApi: JobLogApi.exportJobLogApi
110+
const message = useMessage() // 消息弹窗
111+
112+
const loading = ref(true) // 列表的加载中
113+
const total = ref(0) // 列表的总页数
114+
const list = ref([]) // 列表的数据
115+
const queryParams = reactive({
116+
pageNo: 1,
117+
pageSize: 10,
118+
handlerName: undefined,
119+
beginTime: undefined,
120+
endTime: undefined,
121+
status: undefined
62122
})
63-
// ========== CRUD 相关 ==========
64-
const dialogVisible = ref(false) // 是否显示弹出层
65-
const dialogTitle = ref('') // 弹出层标题
123+
const queryFormRef = ref() // 搜索的表单
124+
const exportLoading = ref(false) // 导出的加载中
66125
67-
// ========== 详情相关 ==========
68-
const detailData = ref() // 详情 Ref
126+
/** 查询参数列表 */
127+
const getList = async () => {
128+
loading.value = true
129+
try {
130+
const data = await JobLogApi.getJobLogPageApi({
131+
...queryParams,
132+
beginTime: queryParams.beginTime ? queryParams.beginTime + ' 00:00:00' : undefined,
133+
endTime: queryParams.endTime ? queryParams.endTime + ' 23:59:59' : undefined
134+
})
135+
list.value = data.list
136+
total.value = data.total
137+
} finally {
138+
loading.value = false
139+
}
140+
}
69141
70-
// 详情操作
71-
const handleDetail = async (row: JobLogApi.JobLogVO) => {
72-
// 设置数据
73-
const res = await JobLogApi.getJobLogApi(row.id)
74-
detailData.value = res
75-
dialogTitle.value = t('action.detail')
76-
dialogVisible.value = true
142+
/** 搜索按钮操作 */
143+
const handleQuery = () => {
144+
queryParams.pageNo = 1
145+
getList()
77146
}
147+
148+
/** 重置按钮操作 */
149+
const resetQuery = () => {
150+
queryFormRef.value.resetFields()
151+
handleQuery()
152+
}
153+
154+
/** 查看操作 */
155+
const viewModalRef = ref()
156+
const handleView = (rowId?: number) => {
157+
viewModalRef.value.openModal(rowId)
158+
}
159+
160+
/** 导出按钮操作 */
161+
const handleExport = async () => {
162+
try {
163+
// 导出的二次确认
164+
await message.exportConfirm()
165+
// 发起导出
166+
exportLoading.value = true
167+
const data = await JobLogApi.exportJobLogApi(queryParams)
168+
download.excel(data, '定时任务执行日志.xls')
169+
} catch {
170+
} finally {
171+
exportLoading.value = false
172+
}
173+
}
174+
175+
/** 初始化 **/
176+
onMounted(() => {
177+
getList()
178+
})
78179
</script>

‎src/views/infra/job/JobLogView.vue

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<!-- 调度日志详细 -->
3+
<Dialog title="调度日志详细" v-model="modelVisible" width="700px" append-to-body>
4+
<el-form ref="form" :model="formData" label-width="120px" size="mini">
5+
<el-row>
6+
<el-col :span="12">
7+
<el-form-item label="日志编号：">{{ formData.id }}</el-form-item>
8+
<el-form-item label="任务编号：">{{ formData.jobId }}</el-form-item>
9+
<el-form-item label="处理器的名字：">{{ formData.handlerName }}</el-form-item>
10+
<el-form-item label="处理器的参数：">{{ formData.handlerParam }}</el-form-item>
11+
<el-form-item label="第几次执行：">{{ formData.executeIndex }}</el-form-item>
12+
<el-form-item label="执行时间：">{{
13+
parseTime(formData.beginTime) + ' ~ ' + parseTime(formData.endTime)
14+
}}</el-form-item>
15+
<el-form-item label="执行时长：">{{ formData.duration + ' 毫秒' }}</el-form-item>
16+
<el-form-item label="任务状态：">
17+
<dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="formData.status" />
18+
</el-form-item>
19+
<el-form-item label="执行结果：">{{ formData.result }}</el-form-item>
20+
</el-col>
21+
</el-row>
22+
</el-form>
23+
<template #footer>
24+
<div class="dialog-footer">
25+
<el-button @click="close">关 闭</el-button>
26+
</div>
27+
</template>
28+
</Dialog>
29+
</template>
30+
<script setup lang="ts" name="JobView">
31+
import * as JobLogApi from '@/api/infra/jobLog'
32+
import { DICT_TYPE } from '@/utils/dict'
33+
import { parseTime } from './utils'
34+
35+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
36+
37+
const { t } = useI18n() // 国际化
38+
39+
const modelVisible = ref(false) // 弹窗的是否展示
40+
const modelTitle = ref('') // 弹窗的标题
41+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
42+
const formData = ref({
43+
id: undefined,
44+
jobId: undefined,
45+
handlerParam: '',
46+
handlerName: '',
47+
executeIndex: '',
48+
beginTime: undefined,
49+
endTime: undefined,
50+
duration: true,
51+
result: '',
52+
status: undefined
53+
})
54+
55+
/** 打开弹窗 */
56+
const openModal = async (id?: number) => {
57+
modelVisible.value = true
58+
modelTitle.value = t('action.detail')
59+
// 查看，设置数据
60+
if (id) {
61+
formLoading.value = true
62+
try {
63+
formData.value = await JobLogApi.getJobLogApi(id)
64+
} finally {
65+
formLoading.value = false
66+
}
67+
}
68+
}
69+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
70+
71+
const close = () => {
72+
emit('success')
73+
}
74+
</script>

0 commit comments

Comments
 (0)