ADD 计划任务

This commit is contained in:
sc 2021-07-07 13:30:21 +08:00
parent 6cbd9ad726
commit 47d40670ee
3 changed files with 352 additions and 0 deletions

View File

@ -0,0 +1,166 @@
<!--
* @Descripttion: 系统计划任务配置
* @version: 1.0
* @Author: sakuya
* @Date: 2021年7月7日09:28:32
* @LastEditors:
* @LastEditTime:
-->
<template>
<el-main>
<el-row :gutter="15">
<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.id">
<el-card class="task task-item" shadow="hover">
<h2>{{item.title}}</h2>
<ul>
<li>
<h4>执行类</h4>
<p>{{item.handler}}</p>
</li>
<li>
<h4>定时规则</h4>
<p>{{item.cron}}</p>
</li>
</ul>
<div class="bottom">
<div class="state">
<el-tag v-if="item.state=='1'" size="mini">准备就绪</el-tag>
<el-tag v-if="item.state=='-1'" size="mini" type="info">停用</el-tag>
</div>
<div class="handler">
<el-popconfirm title="确定立即执行吗?" @confirm="run(item)">
<template #reference>
<el-button type="primary" icon="el-icon-caret-right" size="mini" circle></el-button>
</template>
</el-popconfirm>
<el-dropdown trigger="click">
<el-button type="primary" icon="el-icon-more" size="mini" circle plain></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="edit(item)">编辑</el-dropdown-item>
<el-dropdown-item @click="logs(item)">日志</el-dropdown-item>
<el-dropdown-item @click="del(item)" divided>删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
<el-card class="task task-add" shadow="none" @click="add">
<i class="el-icon-plus"></i>
<p>添加计划任务</p>
</el-card>
</el-col>
</el-row>
</el-main>
<el-dialog title="计划任务" v-model="saveDialogVisible" :width="400" destroy-on-close>
<save-dialog ref="saveDialog"></save-dialog>
<template #footer>
<el-button @click="saveDialogVisible=false" > </el-button>
<el-button type="primary" @click="saveForm()" :loading="isSaveing"> </el-button>
</template>
</el-dialog>
<el-drawer title="计划任务日志" v-model="logsVisible" :size="600" direction="rtl" destroy-on-close>
<logs></logs>
</el-drawer>
</template>
<script>
import saveDialog from './save'
import logs from './logs'
export default {
name: 'task',
components: {
saveDialog,
logs
},
data() {
return {
saveDialogVisible: false,
logsVisible: false,
isSaveing: false,
list: [
{
id: "1",
title: "清理服务器缓存",
handler: "cleanUpCacheHandler",
cron: "59 59 23 * * ? *",
state: "1"
},
{
id: "2",
title: "自动审核",
handler: "automaticAuditHandler",
cron: "0 0 * * * ? *",
state: "1"
},
{
id: "3",
title: "清理未实名用户",
handler: "deleteUserHandler",
cron: "0 0 0 * * ? *",
state: "-1"
}
]
}
},
mounted() {
},
methods: {
add(){
this.saveDialogVisible = true;
},
edit(task){
this.saveDialogVisible = true;
this.$nextTick(() => {
this.$refs.saveDialog.setData(task)
})
},
del(task){
this.$confirm(`确认删除 ${task.title} 计划任务吗?`,'提示', {
type: 'warning',
confirmButtonText: '删除',
confirmButtonClass: 'el-button--danger'
}).then(() => {
this.list.splice(this.list.findIndex(item => item.id === task.id), 1)
}).catch(() => {
//
})
},
logs(){
this.logsVisible = true
},
run(task){
this.$message.success(`已成功执行计划任务:${task.title}`)
},
saveForm(){
this.$refs.saveDialog.submit((formData) => {
console.log(formData)
this.$message.success("操作成功")
this.saveDialogVisible = false;
})
}
}
}
</script>
<style scoped>
.task {height: 210px;}
.task-item h2 {font-size: 15px;color: #3c4a54;padding-bottom:15px;}
.task-item li {list-style-type:none;margin-bottom: 10px;}
.task-item li h4 {font-size: 12px;font-weight: normal;color: #999;}
.task-item li p {margin-top: 5px;}
.task-item .bottom {border-top: 1px solid #EBEEF5;text-align: right;padding-top:10px;display: flex;justify-content: space-between;align-items: center;}
.task-add {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;cursor: pointer;color: #999;}
.task-add:hover {color: #409EFF;}
.task-add i {font-size: 30px;}
.task-add p {font-size: 12px;margin-top: 20px;}
</style>

View File

@ -0,0 +1,108 @@
<!--
* @Descripttion: 系统计划任务配置
* @version: 1.0
* @Author: sakuya
* @Date: 2021年7月7日09:28:32
* @LastEditors:
* @LastEditTime:
-->
<template>
<el-container>
<el-main style="padding:0 20px;">
<scTable ref="table" :data="data" stripe>
<el-table-column label="执行时间" prop="time" width="200"></el-table-column>
<el-table-column label="执行结果" prop="state" width="100">
<template #default="scope">
<span v-if="scope.row.state==200" style="color: #67C23A;"><i class="el-icon-success"></i> 成功</span>
<span v-else style="color: #F56C6C;"><i class="el-icon-error"></i> 异常</span>
</template>
</el-table-column>
<el-table-column label="执行日志" prop="logs" width="100" fixed="right">
<template #default="scope">
<el-button size="mini" @click="show(scope.row)" type="text">日志</el-button>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-drawer title="日志" v-model="logsVisible" :size="500" direction="rtl" destroy-on-close>
<el-main style="padding:0 20px 20px 20px;">
<pre style="font-size: 12px;color: #999;padding:20px;background: #333;font-family: consolas;line-height: 1.5;overflow: auto;">{{demoLog}}</pre>
</el-main>
</el-drawer>
</template>
<script>
export default {
data() {
return {
logsVisible: false,
demoLog: `2021-07-07 12:35:00 [com.xxl.job.core.thread.JobThread#run]-[124]-[Thread-308]
----------- xxl-job job execute start -----------
----------- Param:
2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[31]-[Thread-308] aqshMasterDataSendHandler start
2021-07-07 12:35:00 [com.heronshn.reservation.data.service.impl.AqshVehicleServiceImpl#send]-[42]-[Thread-308] send 45
2021-07-07 12:35:00 [com.heronshn.reservation.data.service.impl.AqshVehicleServiceImpl#send]-[45]-[Thread-308] webapi http://127.0.0.1:48080
2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[33]-[Thread-308] aqshMasterDataSendHandler vehicle end
2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[35]-[Thread-308] aqshMasterDataSendHandler stop
2021-07-07 12:35:00 [com.xxl.job.core.thread.JobThread#run]-[158]-[Thread-308]
----------- xxl-job job execute end(finish) -----------
----------- ReturnT:ReturnT [code=200, msg=null, content=null]
2021-07-07 12:35:00 [com.xxl.job.core.thread.TriggerCallbackThread#callbackLog]-[176]-[Thread-10]
----------- xxl-job job callback finish.
[Load Log Finish]`,
data: [
{
time: "2021-07-07 00:00:00",
state: "500",
logs: ""
},
{
time: "2021-07-06 00:00:00",
state: "200",
logs: ""
},
{
time: "2021-07-05 00:00:00",
state: "200",
logs: ""
},
{
time: "2021-07-04 00:00:00",
state: "200",
logs: ""
},
{
time: "2021-07-03 00:00:00",
state: "200",
logs: ""
},
{
time: "2021-07-02 00:00:00",
state: "200",
logs: ""
},
{
time: "2021-07-01 00:00:00",
state: "200",
logs: ""
}
]
}
},
mounted() {
},
methods: {
show(){
this.logsVisible = true;
}
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,78 @@
<!--
* @Descripttion: 系统计划任务配置
* @version: 1.0
* @Author: sakuya
* @Date: 2021年7月7日09:28:32
* @LastEditors:
* @LastEditTime:
-->
<template>
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
<el-form-item label="描述" prop="title">
<el-input v-model="form.title" clearable></el-input>
</el-form-item>
<el-form-item label="执行类" prop="handler">
<el-input v-model="form.handler" clearable></el-input>
</el-form-item>
<el-form-item label="定时规则" prop="cron">
<el-input v-model="form.cron" clearable></el-input>
</el-form-item>
<el-form-item label="状态" prop="state">
<el-switch v-model="form.state" active-value="1" inactive-value="-1"></el-switch>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
id:"",
title: "",
handler: "",
cron: "",
state: "1"
},
rules: {
title:[
{required: true, message: '请填写标题'}
],
handler:[
{required: true, message: '请填写执行类'}
],
cron:[
{required: true, message: '请填写定时规则'}
]
}
}
},
mounted() {
},
methods: {
//
submit(callback){
this.$refs.dialogForm.validate((valid) => {
if (valid) {
callback(this.form)
}else{
return false;
}
})
},
//
setData(data){
this.form.id = data.id
this.form.title = data.title
this.form.handler = data.handler
this.form.cron = data.cron
this.form.state = data.state
}
}
}
</script>
<style>
</style>