1
+ <!DOCTYPE html>
2
+ < html >
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < title > QuartzDemo</ title >
6
+ < link rel ="
stylesheet "
href ="
https://unpkg.com/[email protected] /lib/theme-chalk/index.css "
>
7
+ < script src ="https://unpkg.com/vue/dist/vue.js "> </ script >
8
+ < script src ="http://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js "> </ script >
9
+ < script src ="
https://unpkg.com/[email protected] /lib/index.js "
> </ script >
10
+ < style >
11
+ # top {
12
+ background : # 20A0FF ;
13
+ padding : 5px ;
14
+ overflow : hidden
15
+ }
16
+ </ style >
17
+ </ head >
18
+ < body >
19
+ < div id ="test ">
20
+ < div id ="top ">
21
+ < el-button type ="text " @click ="search " style ="color:white "> 查询</ el-button >
22
+ < el-button type ="text " @click ="handleadd " style ="color:white "> 添加</ el-button >
23
+ </ span >
24
+ </ div >
25
+ < br />
26
+ < div style ="margin-top:15px ">
27
+ < el-table
28
+ ref ="testTable "
29
+ :data ="tableData "
30
+ style ="width:100% "
31
+ >
32
+ < el-table-column
33
+ prop ="jobName "
34
+ label ="任务名称 "
35
+ sortable
36
+ show-overflow-tooltip >
37
+ </ el-table-column >
38
+
39
+ < el-table-column
40
+ prop ="jobGroup "
41
+ label ="任务所在组 "
42
+ sortable
43
+ show-overflow-tooltip >
44
+ </ el-table-column >
45
+
46
+ < el-table-column
47
+ prop ="jobClassName "
48
+ label ="任务类名 "
49
+ sortable
50
+ show-overflow-tooltip >
51
+ </ el-table-column >
52
+
53
+ < el-table-column
54
+ prop ="triggerName "
55
+ label ="触发器名称 "
56
+ sortable
57
+ show-overflow-tooltip >
58
+ </ el-table-column >
59
+
60
+ < el-table-column
61
+ prop ="triggerGroup "
62
+ label ="触发器所在组 "
63
+ sortable
64
+ show-overflow-tooltip >
65
+ </ el-table-column >
66
+
67
+ < el-table-column
68
+ prop ="cronExpression "
69
+ label ="表达式 "
70
+ sortable >
71
+ </ el-table-column >
72
+
73
+ < el-table-column
74
+ prop ="timeZoneId "
75
+ label ="时区 "
76
+ sortable >
77
+ </ el-table-column >
78
+
79
+ < el-table-column label ="操作 " width ="300 ">
80
+ < template scope ="scope ">
81
+ < el-button
82
+ size ="small "
83
+ type ="warning "
84
+ @click ="handlePause(scope.$index, scope.row) "> 暂停
85
+ </ el-button >
86
+
87
+ < el-button
88
+ size ="small "
89
+ type ="info "
90
+ @click ="handleResume(scope.$index, scope.row) "> 恢复
91
+ </ el-button >
92
+
93
+ < el-button
94
+ size ="small "
95
+ type ="danger "
96
+ @click ="handleDelete(scope.$index, scope.row) "> 删除
97
+ </ el-button >
98
+
99
+ < el-button
100
+ size ="small "
101
+ type ="success "
102
+ @click ="handleUpdate(scope.$index, scope.row) "> 修改
103
+ </ el-button >
104
+ </ template >
105
+ </ el-table-column >
106
+ </ el-table >
107
+
108
+ < div align ="center ">
109
+ < el-pagination
110
+ @size-change ="handleSizeChange "
111
+ @current-change ="handleCurrentChange "
112
+ :current-page ="currentPage "
113
+ :page-sizes ="[10, 20, 30, 40] "
114
+ :page-size ="pagesize "
115
+ layout ="total, sizes, prev, pager, next, jumper "
116
+ :total ="totalCount ">
117
+ </ el-pagination >
118
+ </ div >
119
+ </ div >
120
+ < el-dialog title ="选择任务 " :visible.sync ="checkboxChange ">
121
+ < el-radio-group v-model ="ruleForm.resource ">
122
+ < el-radio :label ="3 "> Simple Trigger</ el-radio >
123
+ < el-radio :label ="6 "> Cron Trigger</ el-radio >
124
+ </ el-radio-group >
125
+ < div slot ="footer " class ="dialog-footer ">
126
+ < el-button @click ="checkboxChange = false "> 取 消</ el-button >
127
+ < el-button type ="primary " @click ="change "> 确 定</ el-button >
128
+ </ div >
129
+ </ el-dialog >
130
+ < el-dialog title ="添加任务 " :visible.sync ="dialogFormVisibleChange " v-if ="ruleForm.resource==3 ">
131
+ < el-form :model ="form ">
132
+ < el-form-item label ="任务名称 " label-width ="120px " style ="width:35% ">
133
+ < el-input v-model ="form.jobName " auto-complete ="off "> </ el-input >
134
+ </ el-form-item >
135
+ < el-form-item label ="任务分组 " label-width ="120px " style ="width:35% ">
136
+ < el-input v-model ="form.jobGroup " auto-complete ="off "> </ el-input >
137
+ </ el-form-item >
138
+ < el-form-item label ="多久之后执行 " label-width ="120px " style ="width:35% ">
139
+ < el-input v-model ="form.cronExpression " auto-complete ="off "> </ el-input >
140
+
141
+ < el-select v-model ="value4 " placeholder ="请选择 ">
142
+ < el-option
143
+ v-for ="item in options "
144
+ :key ="item.value "
145
+ :label ="item.label "
146
+ :value ="item.value ">
147
+ </ el-option >
148
+ </ el-select >
149
+ </ el-form-item >
150
+ </ el-form >
151
+ < div slot ="footer " class ="dialog-footer ">
152
+ < el-button @click ="dialogFormVisibleChange = false "> 取 消</ el-button >
153
+ < el-button type ="primary " @click ="addSimTir "> 确 定</ el-button >
154
+ </ div >
155
+ </ el-dialog >
156
+ < el-dialog title ="添加任务 " :visible.sync ="dialogFormVisibleChange " v-if ="ruleForm.resource==6 ">
157
+ < el-form :model ="form ">
158
+ < el-form-item label ="任务名称 " label-width ="120px " style ="width:35% ">
159
+ < el-input v-model ="form.jobName " auto-complete ="off "> </ el-input >
160
+ </ el-form-item >
161
+ < el-form-item label ="任务分组 " label-width ="120px " style ="width:35% ">
162
+ < el-input v-model ="form.jobGroup " auto-complete ="off "> </ el-input >
163
+ </ el-form-item >
164
+ < el-form-item label ="表达式 " label-width ="120px " style ="width:35% ">
165
+ < el-input v-model ="form.cronExpression " auto-complete ="off "> </ el-input >
166
+ </ el-form-item >
167
+ </ el-form >
168
+ < div slot ="footer " class ="dialog-footer ">
169
+ < el-button @click ="dialogFormVisibleChange = false "> 取 消</ el-button >
170
+ < el-button type ="primary " @click ="add "> 确 定</ el-button >
171
+ </ div >
172
+ </ el-dialog >
173
+
174
+ < el-dialog title ="修改任务 " :visible.sync ="updateFormVisible ">
175
+ < el-form :model ="updateform ">
176
+ < el-form-item label ="表达式 " label-width ="120px " style ="width:35% ">
177
+ < el-input v-model ="updateform.cronExpression " auto-complete ="off "> </ el-input >
178
+ </ el-form-item >
179
+ </ el-form >
180
+ < div slot ="footer " class ="dialog-footer ">
181
+ < el-button @click ="updateFormVisible = false "> 取 消</ el-button >
182
+ < el-button type ="primary " @click ="update "> 确 定</ el-button >
183
+ </ div >
184
+ </ el-dialog >
185
+
186
+ </ div >
187
+
188
+ < footer align ="center ">
189
+ < p > © Quartz 任务管理</ p >
190
+ </ footer >
191
+
192
+ < script >
193
+ var vue = new Vue ( {
194
+ el : "#test" ,
195
+ data : {
196
+ //表格当前页数据
197
+ tableData : [ ] ,
198
+ //请求的URL
199
+ url : 'job/queryjob' ,
200
+ //默认每页数据量
201
+ pagesize : 10 ,
202
+ //当前页码
203
+ currentPage : 1 ,
204
+ //查询的页码
205
+ start : 1 ,
206
+ //默认数据总数
207
+ totalCount : 1000 ,
208
+ //添加对话框默认可见性
209
+ dialogFormVisible : false ,
210
+ //修改对话框默认可见性
211
+ updateFormVisible : false ,
212
+ //选择对话框
213
+ dialogFormVisibleChange : false ,
214
+ checkboxChange : false ,
215
+ //提交的表单
216
+ form : {
217
+ jobName : '' ,
218
+ jobGroup : '' ,
219
+ cronExpression : '' ,
220
+ timeType : ''
221
+ } ,
222
+ ruleForm : {
223
+ resource : 3
224
+ } ,
225
+ updateform : {
226
+ jobName : '' ,
227
+ jobGroup : '' ,
228
+ cronExpression : ''
229
+ } ,
230
+ options : [ {
231
+ value : 1 ,
232
+ label : '年'
233
+ } , {
234
+ value : 2 ,
235
+ label : '月'
236
+ } , {
237
+ value : 3 ,
238
+ label : '周'
239
+ } , {
240
+ value : 4 ,
241
+ label : '天'
242
+ } , {
243
+ value : 5 ,
244
+ label : '小时'
245
+ } , {
246
+ value : 6 ,
247
+ label : '分钟'
248
+ } , {
249
+ value : 7 ,
250
+ label : '秒'
251
+ } ] ,
252
+ value4 : ''
253
+ } ,
254
+ methods : {
255
+ //从服务器读取数据
256
+ loadData : function ( pageNum , pageSize ) {
257
+ this . $http . get ( 'job/queryjob?' + 'pageNum=' + pageNum + '&pageSize=' + pageSize ) . then ( function ( res ) {
258
+ console . log ( res ) ;
259
+ this . tableData = res . body . JobAndTrigger . list ;
260
+ this . totalCount = res . body . number ;
261
+ } , function ( ) {
262
+ console . log ( 'failed' ) ;
263
+ } ) ;
264
+ } ,
265
+ //单行删除
266
+ handleDelete : function ( index , row ) {
267
+ this . $http . post ( 'job/deletejob' , {
268
+ "jobClassName" : row . jobName ,
269
+ "jobGroupName" : row . jobGroup
270
+ } , { emulateJSON : true } ) . then ( function ( res ) {
271
+ this . loadData ( this . currentPage , this . pagesize ) ;
272
+ } , function ( ) {
273
+ console . log ( 'failed' ) ;
274
+ } ) ;
275
+ } ,
276
+ //暂停任务
277
+ handlePause : function ( index , row ) {
278
+ this . $http . post ( 'job/pausejob' , {
279
+ "jobClassName" : row . jobName ,
280
+ "jobGroupName" : row . jobGroup
281
+ } , { emulateJSON : true } ) . then ( function ( res ) {
282
+ this . loadData ( this . currentPage , this . pagesize ) ;
283
+ } , function ( ) {
284
+ console . log ( 'failed' ) ;
285
+ } ) ;
286
+ } ,
287
+ //恢复任务
288
+ handleResume : function ( index , row ) {
289
+ this . $http . post ( 'job/resumejob' , {
290
+ "jobClassName" : row . jobName ,
291
+ "jobGroupName" : row . jobGroup
292
+ } , { emulateJSON : true } ) . then ( function ( res ) {
293
+ this . loadData ( this . currentPage , this . pagesize ) ;
294
+ } , function ( ) {
295
+ console . log ( 'failed' ) ;
296
+ } ) ;
297
+ } ,
298
+ //搜索
299
+ search : function ( ) {
300
+ this . loadData ( this . currentPage , this . pagesize ) ;
301
+ } ,
302
+ //弹出对话框
303
+ handleadd : function ( ) {
304
+ this . checkboxChange = true ;
305
+ } ,
306
+ change : function ( ) {
307
+ this . dialogFormVisibleChange = true ;
308
+ } ,
309
+ //添加
310
+ add : function ( ) {
311
+ this . $http . post ( 'job/addjob' , {
312
+ "jobClassName" : this . form . jobName ,
313
+ "jobGroupName" : this . form . jobGroup ,
314
+ "cronExpression" : this . form . cronExpression
315
+ } ) . then ( function ( res ) {
316
+ this . loadData ( this . currentPage , this . pagesize ) ;
317
+ this . dialogFormVisibleChange = false ;
318
+ this . checkboxChange = false ;
319
+ } , function ( ) {
320
+ console . log ( 'failed' ) ;
321
+ } ) ;
322
+ } ,
323
+ addSimTir : function ( ) {
324
+ console . log ( this . value4 ) ;
325
+ this . $http . post ( 'job/addjob' , {
326
+ "jobClassName" : this . form . jobName ,
327
+ "jobGroupName" : this . form . jobGroup ,
328
+ "cronExpression" : this . form . cronExpression ,
329
+ "timeType" : this . value4
330
+ } ) . then ( function ( res ) {
331
+ this . loadData ( this . currentPage , this . pagesize ) ;
332
+ this . dialogFormVisibleChange = false ;
333
+ this . checkboxChange = false ;
334
+ } , function ( ) {
335
+ console . log ( 'failed' ) ;
336
+ } ) ;
337
+ } ,
338
+ //更新
339
+ handleUpdate : function ( index , row ) {
340
+ console . log ( row ) ;
341
+ this . updateFormVisible = true ;
342
+ this . updateform . jobName = row . jobClassName ;
343
+ this . updateform . jobGroup = row . jobGroup ;
344
+ } ,
345
+ //更新任务
346
+ update : function ( ) {
347
+ this . $http . post
348
+ ( 'job/reschedulejob' ,
349
+ {
350
+ "jobClassName" : this . updateform . jobName ,
351
+ "jobGroupName" : this . updateform . jobGroup ,
352
+ "cronExpression" : this . updateform . cronExpression
353
+ } , { emulateJSON : true }
354
+ ) . then ( function ( res ) {
355
+ this . loadData ( this . currentPage , this . pagesize ) ;
356
+ this . updateFormVisible = false ;
357
+ } , function ( ) {
358
+ console . log ( 'failed' ) ;
359
+ } ) ;
360
+
361
+ } ,
362
+ //每页显示数据量变更
363
+ handleSizeChange : function ( val ) {
364
+ this . pagesize = val ;
365
+ this . loadData ( this . currentPage , this . pagesize ) ;
366
+ } ,
367
+ //页码变更
368
+ handleCurrentChange : function ( val ) {
369
+ this . currentPage = val ;
370
+ this . loadData ( this . currentPage , this . pagesize ) ;
371
+ }
372
+ }
373
+ } ) ;
374
+ //载入数据
375
+ vue . loadData ( vue . currentPage , vue . pagesize ) ;
376
+ </ script >
377
+ </ body >
378
+ </ html >
0 commit comments