houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <ContentWrap>
3     <!-- 搜索工作栏 -->
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="120px"
10     >
11       <el-form-item label="处理器的名字" prop="handlerName">
12         <el-input
13           v-model="queryParams.handlerName"
14           placeholder="请输入处理器的名字"
15           clearable
16           @keyup.enter="handleQuery"
17           class="!w-240px"
18         />
19       </el-form-item>
20       <el-form-item label="开始执行时间" prop="beginTime">
21         <el-date-picker
22           v-model="queryParams.beginTime"
23           type="date"
24           value-format="YYYY-MM-DD HH:mm:ss"
25           placeholder="选择开始执行时间"
26           clearable
27           class="!w-240px"
28         />
29       </el-form-item>
30       <el-form-item label="结束执行时间" prop="endTime">
31         <el-date-picker
32           v-model="queryParams.endTime"
33           type="date"
34           value-format="YYYY-MM-DD HH:mm:ss"
35           placeholder="选择结束执行时间"
36           clearable
37           :default-time="new Date('1 23:59:59')"
38           class="!w-240px"
39         />
40       </el-form-item>
41       <el-form-item label="任务状态" prop="status">
42         <el-select
43           v-model="queryParams.status"
44           placeholder="请选择任务状态"
45           clearable
46           class="!w-240px"
47         >
48           <el-option
49             v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_JOB_LOG_STATUS)"
50             :key="dict.value"
51             :label="dict.label"
52             :value="dict.value"
53           />
54         </el-select>
55       </el-form-item>
56       <el-form-item>
57         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
58         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
59         <el-button
60           type="success"
61           plain
62           @click="handleExport"
63           :loading="exportLoading"
64           v-hasPermi="['infra:job:export']"
65         >
66           <Icon icon="ep:download" class="mr-5px" /> 导出
67         </el-button>
68       </el-form-item>
69     </el-form>
70   </ContentWrap>
71
72   <!-- 列表 -->
73   <ContentWrap>
74     <el-table v-loading="loading" :data="list">
75       <el-table-column label="日志编号" align="center" prop="id" />
76       <el-table-column label="任务编号" align="center" prop="jobId" />
77       <el-table-column label="处理器的名字" align="center" prop="handlerName" />
78       <el-table-column label="处理器的参数" align="center" prop="handlerParam" />
79       <el-table-column label="第几次执行" align="center" prop="executeIndex" />
80       <el-table-column label="执行时间" align="center" width="170s">
81         <template #default="scope">
82           <span>{{ formatDate(scope.row.beginTime) + ' ~ ' + formatDate(scope.row.endTime) }}</span>
83         </template>
84       </el-table-column>
85       <el-table-column label="执行时长" align="center" prop="duration">
86         <template #default="scope">
87           <span>{{ scope.row.duration + ' 毫秒' }}</span>
88         </template>
89       </el-table-column>
90       <el-table-column label="任务状态" align="center" prop="status">
91         <template #default="scope">
92           <dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="scope.row.status" />
93         </template>
94       </el-table-column>
95       <el-table-column label="操作" align="center">
96         <template #default="scope">
97           <el-button
98             type="primary"
99             link
100             @click="openDetail(scope.row.id)"
101             v-hasPermi="['infra:job:query']"
102           >
103             详细
104           </el-button>
105         </template>
106       </el-table-column>
107     </el-table>
108     <!-- 分页组件 -->
109     <Pagination
110       :total="total"
111       v-model:page="queryParams.pageNo"
112       v-model:limit="queryParams.pageSize"
113       @pagination="getList"
114     />
115   </ContentWrap>
116
117   <!-- 表单弹窗:查看 -->
118   <JobLogDetail ref="detailRef" />
119 </template>
120 <script lang="ts" setup>
121 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
122 import { formatDate } from '@/utils/formatTime'
123 import download from '@/utils/download'
124 import JobLogDetail from './JobLogDetail.vue'
125 import * as JobLogApi from '@/api/infra/jobLog'
126
127 defineOptions({ name: 'InfraJobLog' })
128
129 const message = useMessage() // 消息弹窗
130 const { query } = useRoute() // 查询参数
131
132 const loading = ref(true) // 列表的加载中
133 const total = ref(0) // 列表的总页数
134 const list = ref([]) // 列表的数据
135 const queryParams = reactive({
136   pageNo: 1,
137   pageSize: 10,
138   jobId: query.id,
139   handlerName: undefined,
140   beginTime: undefined,
141   endTime: undefined,
142   status: undefined
143 })
144 const queryFormRef = ref() // 搜索的表单
145 const exportLoading = ref(false) // 导出的加载中
146
147 /** 查询列表 */
148 const getList = async () => {
149   loading.value = true
150   try {
151     const data = await JobLogApi.getJobLogPage(queryParams)
152     list.value = data.list
153     total.value = data.total
154   } finally {
155     loading.value = false
156   }
157 }
158
159 /** 搜索按钮操作 */
160 const handleQuery = () => {
161   queryParams.pageNo = 1
162   getList()
163 }
164
165 /** 重置按钮操作 */
166 const resetQuery = () => {
167   queryFormRef.value.resetFields()
168   handleQuery()
169 }
170
171 /** 查看操作 */
172 const detailRef = ref()
173 const openDetail = (rowId?: number) => {
174   detailRef.value.open(rowId)
175 }
176
177 /** 导出按钮操作 */
178 const handleExport = async () => {
179   try {
180     // 导出的二次确认
181     await message.exportConfirm()
182     // 发起导出
183     exportLoading.value = true
184     const data = await JobLogApi.exportJobLog(queryParams)
185     download.excel(data, '定时任务执行日志.xls')
186   } catch {
187   } finally {
188     exportLoading.value = false
189   }
190 }
191
192 /** 初始化 **/
193 onMounted(() => {
194   getList()
195 })
196 </script>