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="100px"
10     >
11       <el-form-item label="任务名称" prop="name">
12         <el-input
13           v-model="queryParams.name"
14           placeholder="请输入任务名称"
15           clearable
16           @keyup.enter="handleQuery"
17           class="!w-240px"
18         />
19       </el-form-item>
20       <el-form-item label="任务状态" prop="status">
21         <el-select
22           v-model="queryParams.status"
23           placeholder="请选择任务状态"
24           clearable
25           class="!w-240px"
26         >
27           <el-option
28             v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_JOB_STATUS)"
29             :key="dict.value"
30             :label="dict.label"
31             :value="dict.value"
32           />
33         </el-select>
34       </el-form-item>
35       <el-form-item label="处理器的名字" prop="handlerName">
36         <el-input
37           v-model="queryParams.handlerName"
38           placeholder="请输入处理器的名字"
39           clearable
40           @keyup.enter="handleQuery"
41           class="!w-240px"
42         />
43       </el-form-item>
44       <el-form-item>
45         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
46         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
47         <el-button
48           type="primary"
49           plain
50           @click="openForm('create')"
51           v-hasPermi="['infra:job:create']"
52         >
53           <Icon icon="ep:plus" class="mr-5px" /> 新增
54         </el-button>
55         <el-button
56           type="success"
57           plain
58           @click="handleExport"
59           :loading="exportLoading"
60           v-hasPermi="['infra:job:export']"
61         >
62           <Icon icon="ep:download" class="mr-5px" /> 导出
63         </el-button>
64         <el-button type="info" plain @click="handleJobLog()" v-hasPermi="['infra:job:query']">
65           <Icon icon="ep:zoom-in" class="mr-5px" /> 执行日志
66         </el-button>
67       </el-form-item>
68     </el-form>
69   </ContentWrap>
70
71   <!-- 列表 -->
72   <ContentWrap>
73     <el-table v-loading="loading" :data="list">
74       <el-table-column label="任务编号" align="center" prop="id" />
75       <el-table-column label="任务名称" align="center" prop="name" />
76       <el-table-column label="任务状态" align="center" prop="status">
77         <template #default="scope">
78           <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="scope.row.status" />
79         </template>
80       </el-table-column>
81       <el-table-column label="处理器的名字" align="center" prop="handlerName" />
82       <el-table-column label="处理器的参数" align="center" prop="handlerParam" />
83       <el-table-column label="CRON 表达式" align="center" prop="cronExpression" />
84       <el-table-column label="操作" align="center" width="200">
85         <template #default="scope">
86           <el-button
87             type="primary"
88             link
89             @click="openForm('update', scope.row.id)"
90             v-hasPermi="['infra:job:update']"
91           >
92             修改
93           </el-button>
94           <el-button
95             type="primary"
96             link
97             @click="handleChangeStatus(scope.row)"
98             v-hasPermi="['infra:job:update']"
99           >
100             {{ scope.row.status === InfraJobStatusEnum.STOP ? '开启' : '暂停' }}
101           </el-button>
102           <el-button
103             type="danger"
104             link
105             @click="handleDelete(scope.row.id)"
106             v-hasPermi="['infra:job:delete']"
107           >
108             删除
109           </el-button>
110           <el-dropdown
111             @command="(command) => handleCommand(command, scope.row)"
112             v-hasPermi="['infra:job:trigger', 'infra:job:query']"
113           >
114             <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
115             <template #dropdown>
116               <el-dropdown-menu>
117                 <el-dropdown-item command="handleRun" v-if="checkPermi(['infra:job:trigger'])">
118                   执行一次
119                 </el-dropdown-item>
120                 <el-dropdown-item command="openDetail" v-if="checkPermi(['infra:job:query'])">
121                   任务详细
122                 </el-dropdown-item>
123                 <el-dropdown-item command="handleJobLog" v-if="checkPermi(['infra:job:query'])">
124                   调度日志
125                 </el-dropdown-item>
126               </el-dropdown-menu>
127             </template>
128           </el-dropdown>
129         </template>
130       </el-table-column>
131     </el-table>
132     <!-- 分页组件 -->
133     <Pagination
134       :total="total"
135       v-model:page="queryParams.pageNo"
136       v-model:limit="queryParams.pageSize"
137       @pagination="getList"
138     />
139   </ContentWrap>
140
141   <!-- 表单弹窗:添加/修改 -->
142   <JobForm ref="formRef" @success="getList" />
143   <!-- 表单弹窗:查看 -->
144   <JobDetail ref="detailRef" />
145 </template>
146 <script lang="ts" setup>
147 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
148 import { checkPermi } from '@/utils/permission'
149 import JobForm from './JobForm.vue'
150 import JobDetail from './JobDetail.vue'
151 import download from '@/utils/download'
152 import * as JobApi from '@/api/infra/job'
153 import { InfraJobStatusEnum } from '@/utils/constants'
154
155 defineOptions({ name: 'InfraJob' })
156
157 const { t } = useI18n() // 国际化
158 const message = useMessage() // 消息弹窗
159 const { push } = useRouter() // 路由
160
161 const loading = ref(true) // 列表的加载中
162 const total = ref(0) // 列表的总页数
163 const list = ref([]) // 列表的数据
164 const queryParams = reactive({
165   pageNo: 1,
166   pageSize: 10,
167   name: undefined,
168   status: undefined,
169   handlerName: undefined
170 })
171 const queryFormRef = ref() // 搜索的表单
172 const exportLoading = ref(false) // 导出的加载中
173
174 /** 查询列表 */
175 const getList = async () => {
176   loading.value = true
177   try {
178     const data = await JobApi.getJobPage(queryParams)
179     list.value = data.list
180     total.value = data.total
181   } finally {
182     loading.value = false
183   }
184 }
185
186 /** 搜索按钮操作 */
187 const handleQuery = () => {
188   queryParams.pageNo = 1
189   getList()
190 }
191
192 /** 重置按钮操作 */
193 const resetQuery = () => {
194   queryFormRef.value.resetFields()
195   handleQuery()
196 }
197
198 /** 导出按钮操作 */
199 const handleExport = async () => {
200   try {
201     // 导出的二次确认
202     await message.exportConfirm()
203     // 发起导出
204     exportLoading.value = true
205     const data = await JobApi.exportJob(queryParams)
206     download.excel(data, '定时任务.xls')
207   } catch {
208   } finally {
209     exportLoading.value = false
210   }
211 }
212
213 /** 添加/修改操作 */
214 const formRef = ref()
215 const openForm = (type: string, id?: number) => {
216   formRef.value.open(type, id)
217 }
218
219 /** 修改状态操作 */
220 const handleChangeStatus = async (row: JobApi.JobVO) => {
221   try {
222     // 修改状态的二次确认
223     const text = row.status === InfraJobStatusEnum.STOP ? '开启' : '关闭'
224     await message.confirm(
225       '确认要' + text + '定时任务编号为"' + row.id + '"的数据项?',
226       t('common.reminder')
227     )
228     const status =
229       row.status === InfraJobStatusEnum.STOP ? InfraJobStatusEnum.NORMAL : InfraJobStatusEnum.STOP
230     await JobApi.updateJobStatus(row.id, status)
231     message.success(text + '成功')
232     // 刷新列表
233     await getList()
234   } catch {}
235 }
236
237 /** 删除按钮操作 */
238 const handleDelete = async (id: number) => {
239   try {
240     // 删除的二次确认
241     await message.delConfirm()
242     // 发起删除
243     await JobApi.deleteJob(id)
244     message.success(t('common.delSuccess'))
245     // 刷新列表
246     await getList()
247   } catch {}
248 }
249
250 /** '更多'操作按钮 */
251 const handleCommand = (command, row) => {
252   switch (command) {
253     case 'handleRun':
254       handleRun(row)
255       break
256     case 'openDetail':
257       openDetail(row.id)
258       break
259     case 'handleJobLog':
260       handleJobLog(row?.id)
261       break
262     default:
263       break
264   }
265 }
266
267 /** 执行一次 */
268 const handleRun = async (row: JobApi.JobVO) => {
269   try {
270     // 二次确认
271     await message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder'))
272     // 提交执行
273     await JobApi.runJob(row.id)
274     message.success('执行成功')
275     // 刷新列表
276     await getList()
277   } catch {}
278 }
279
280 /** 查看操作 */
281 const detailRef = ref()
282 const openDetail = (id: number) => {
283   detailRef.value.open(id)
284 }
285
286 /** 跳转执行日志 */
287 const handleJobLog = (id?: number) => {
288   if (id && id > 0) {
289     push('/job/job-log?id=' + id)
290   } else {
291     push('/job/job-log')
292   }
293 }
294
295 /** 初始化 **/
296 onMounted(() => {
297   getList()
298 })
299 </script>