wujian
2024-02-22 268beb4ebc1e5b8d4ad715b71cd64a0944073a87
提交 | 用户 | 时间
268beb 1 <template>
W 2   <div class="app-container">
3     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4       <el-form-item label="任务名称" prop="jobName">
5         <el-input
6           v-model="queryParams.jobName"
7           placeholder="请输入任务名称"
8           clearable
9           style="width: 240px"
10           @keyup.enter.native="handleQuery"
11         />
12       </el-form-item>
13       <el-form-item label="任务组名" prop="jobGroup">
14         <el-select
15           v-model="queryParams.jobGroup"
16           placeholder="请选择任务组名"
17           clearable
18           style="width: 240px"
19         >
20           <el-option
21             v-for="dict in dict.type.sys_job_group"
22             :key="dict.value"
23             :label="dict.label"
24             :value="dict.value"
25           />
26         </el-select>
27       </el-form-item>
28       <el-form-item label="执行状态" prop="status">
29         <el-select
30           v-model="queryParams.status"
31           placeholder="请选择执行状态"
32           clearable
33           style="width: 240px"
34         >
35           <el-option
36             v-for="dict in dict.type.sys_common_status"
37             :key="dict.value"
38             :label="dict.label"
39             :value="dict.value"
40           />
41         </el-select>
42       </el-form-item>
43       <el-form-item label="执行时间">
44         <el-date-picker
45           v-model="dateRange"
46           style="width: 240px"
47           value-format="yyyy-MM-dd"
48           type="daterange"
49           range-separator="-"
50           start-placeholder="开始日期"
51           end-placeholder="结束日期"
52         ></el-date-picker>
53       </el-form-item>
54       <el-form-item>
55         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
56         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
57       </el-form-item>
58     </el-form>
59
60     <el-row :gutter="10" class="mb8">
61       <el-col :span="1.5">
62         <el-button
63           type="danger"
64           plain
65           icon="el-icon-delete"
66           size="mini"
67           :disabled="multiple"
68           @click="handleDelete"
69           v-hasPermi="['monitor:job:remove']"
70         >删除</el-button>
71       </el-col>
72       <el-col :span="1.5">
73         <el-button
74           type="danger"
75           plain
76           icon="el-icon-delete"
77           size="mini"
78           @click="handleClean"
79           v-hasPermi="['monitor:job:remove']"
80         >清空</el-button>
81       </el-col>
82       <el-col :span="1.5">
83         <el-button
84           type="warning"
85           plain
86           icon="el-icon-download"
87           size="mini"
88           @click="handleExport"
89           v-hasPermi="['monitor:job:export']"
90         >导出</el-button>
91       </el-col>
92       <el-col :span="1.5">
93         <el-button
94           type="warning"
95           plain
96           icon="el-icon-close"
97           size="mini"
98           @click="handleClose"
99         >关闭</el-button>
100       </el-col>
101       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
102     </el-row>
103
104     <el-table v-loading="loading" :data="jobLogList" @selection-change="handleSelectionChange">
105       <el-table-column type="selection" width="55" align="center" />
106       <el-table-column label="日志编号" width="80" align="center" prop="jobLogId" />
107       <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
108       <el-table-column label="任务组名" align="center" prop="jobGroup" :show-overflow-tooltip="true">
109         <template slot-scope="scope">
110           <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup"/>
111         </template>
112       </el-table-column>
113       <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
114       <el-table-column label="日志信息" align="center" prop="jobMessage" :show-overflow-tooltip="true" />
115       <el-table-column label="执行状态" align="center" prop="status">
116         <template slot-scope="scope">
117           <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
118         </template>
119       </el-table-column>
120       <el-table-column label="执行时间" align="center" prop="createTime" width="180">
121         <template slot-scope="scope">
122           <span>{{ parseTime(scope.row.createTime) }}</span>
123         </template>
124       </el-table-column>
125       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
126         <template slot-scope="scope">
127           <el-button
128             size="mini"
129             type="text"
130             icon="el-icon-view"
131             @click="handleView(scope.row)"
132             v-hasPermi="['monitor:job:query']"
133           >详细</el-button>
134         </template>
135       </el-table-column>
136     </el-table>
137
138     <pagination
139       v-show="total>0"
140       :total="total"
141       :page.sync="queryParams.pageNum"
142       :limit.sync="queryParams.pageSize"
143       @pagination="getList"
144     />
145
146     <!-- 调度日志详细 -->
147     <el-dialog title="调度日志详细" :visible.sync="open" width="700px" append-to-body>
148       <el-form ref="form" :model="form" label-width="100px" size="mini">
149         <el-row>
150           <el-col :span="12">
151             <el-form-item label="日志序号:">{{ form.jobLogId }}</el-form-item>
152             <el-form-item label="任务名称:">{{ form.jobName }}</el-form-item>
153           </el-col>
154           <el-col :span="12">
155             <el-form-item label="任务分组:">{{ form.jobGroup }}</el-form-item>
156             <el-form-item label="执行时间:">{{ form.createTime }}</el-form-item>
157           </el-col>
158           <el-col :span="24">
159             <el-form-item label="调用方法:">{{ form.invokeTarget }}</el-form-item>
160           </el-col>
161           <el-col :span="24">
162             <el-form-item label="日志信息:">{{ form.jobMessage }}</el-form-item>
163           </el-col>
164           <el-col :span="24">
165             <el-form-item label="执行状态:">
166               <div v-if="form.status == 0">正常</div>
167               <div v-else-if="form.status == 1">失败</div>
168             </el-form-item>
169           </el-col>
170           <el-col :span="24">
171             <el-form-item label="异常信息:" v-if="form.status == 1">{{ form.exceptionInfo }}</el-form-item>
172           </el-col>
173         </el-row>
174       </el-form>
175       <div slot="footer" class="dialog-footer">
176         <el-button @click="open = false">关 闭</el-button>
177       </div>
178     </el-dialog>
179   </div>
180 </template>
181
182 <script>
183 import { getJob} from "@/api/monitor/job";
184 import { listJobLog, delJobLog, cleanJobLog } from "@/api/monitor/jobLog";
185
186 export default {
187   name: "JobLog",
188   dicts: ['sys_common_status', 'sys_job_group'],
189   data() {
190     return {
191       // 遮罩层
192       loading: true,
193       // 选中数组
194       ids: [],
195       // 非多个禁用
196       multiple: true,
197       // 显示搜索条件
198       showSearch: true,
199       // 总条数
200       total: 0,
201       // 调度日志表格数据
202       jobLogList: [],
203       // 是否显示弹出层
204       open: false,
205       // 日期范围
206       dateRange: [],
207       // 表单参数
208       form: {},
209       // 查询参数
210       queryParams: {
211         pageNum: 1,
212         pageSize: 10,
213         jobName: undefined,
214         jobGroup: undefined,
215         status: undefined
216       }
217     };
218   },
219   created() {
220     const jobId = this.$route.params && this.$route.params.jobId;
221     if (jobId !== undefined && jobId != 0) {
222       getJob(jobId).then(response => {
223         this.queryParams.jobName = response.data.jobName;
224         this.queryParams.jobGroup = response.data.jobGroup;
225         this.getList();
226       });
227     } else {
228       this.getList();
229     }
230   },
231   methods: {
232     /** 查询调度日志列表 */
233     getList() {
234       this.loading = true;
235       listJobLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
236           this.jobLogList = response.rows;
237           this.total = response.total;
238           this.loading = false;
239         }
240       );
241     },
242     // 返回按钮
243     handleClose() {
244       const obj = { path: "/monitor/job" };
245       this.$tab.closeOpenPage(obj);
246     },
247     /** 搜索按钮操作 */
248     handleQuery() {
249       this.queryParams.pageNum = 1;
250       this.getList();
251     },
252     /** 重置按钮操作 */
253     resetQuery() {
254       this.dateRange = [];
255       this.resetForm("queryForm");
256       this.handleQuery();
257     },
258     // 多选框选中数据
259     handleSelectionChange(selection) {
260       this.ids = selection.map(item => item.jobLogId);
261       this.multiple = !selection.length;
262     },
263     /** 详细按钮操作 */
264     handleView(row) {
265       this.open = true;
266       this.form = row;
267     },
268     /** 删除按钮操作 */
269     handleDelete(row) {
270       const jobLogIds = this.ids;
271       this.$modal.confirm('是否确认删除调度日志编号为"' + jobLogIds + '"的数据项?').then(function() {
272         return delJobLog(jobLogIds);
273       }).then(() => {
274         this.getList();
275         this.$modal.msgSuccess("删除成功");
276       }).catch(() => {});
277     },
278     /** 清空按钮操作 */
279     handleClean() {
280       this.$modal.confirm('是否确认清空所有调度日志数据项?').then(function() {
281         return cleanJobLog();
282       }).then(() => {
283         this.getList();
284         this.$modal.msgSuccess("清空成功");
285       }).catch(() => {});
286     },
287     /** 导出按钮操作 */
288     handleExport() {
289       this.download('/monitor/jobLog/export', {
290         ...this.queryParams
291       }, `log_${new Date().getTime()}.xlsx`)
292     }
293   }
294 };
295 </script>