Skip to content

Commit

Permalink
✨ spring-boot-demo-task-quartz 前端完成
Browse files Browse the repository at this point in the history
  • Loading branch information
@xkcoding
xkcoding committed Nov 26, 2018
1 parent 6a528e5 commit a2936f9
Showing 1 changed file with 259 additions and 0 deletions.
259 changes: 259 additions & 0 deletions spring-boot-demo-task-quartz/src/main/resources/static/job.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>spring-boot-demo-task-quartz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>

<style>
#top {
/*background: #20A0FF;*/
padding: 5px;
/*overflow: hidden*/
}
</style>

</head>
<body>
<div id="job">
<div id="top">
<el-button size="small" type="primary" plain @click="search" :loading="loading" icon="el-icon-search">查询
</el-button>
<el-button size="small" type="primary" plain @click="handleadd" icon="el-icon-plus">添加</el-button>
</div>
<br/>
<div>
<el-table ref="jobTable" :data="tableData" style="width:100%" border center>
<el-table-column prop="jobName" label="任务名称" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="jobGroup" label="任务所在组" sortable align="center"></el-table-column>
<el-table-column prop="jobClassName" label="任务类名" align="center"></el-table-column>
<el-table-column prop="triggerName" label="触发器名称" align="center"></el-table-column>
<el-table-column prop="triggerGroup" label="触发器所在组" sortable align="center"></el-table-column>
<el-table-column prop="cronExpression" label="表达式" align="center"></el-table-column>
<el-table-column prop="timeZoneId" label="时区" align="center"></el-table-column>
<el-table-column prop="triggerState" label="状态" align="center" :formatter="formatState"></el-table-column>
<el-table-column label="操作" width="300" align="center">
<template scope="scope">
<el-button size="small" type="warning" @click="handlePause(scope.$index, scope.row)">
暂停
</el-button>
<el-button size="small" type="info" @click="handleResume(scope.$index, scope.row)">
恢复
</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
删除
</el-button>
<el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">
修改
</el-button>
</template>
</el-table-column>
</el-table>

<div align="center">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</div>

<el-dialog title="添加任务" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="任务名称" label-width="100px" style="width:90%">
<el-input v-model="form.jobName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="任务分组" label-width="100px" style="width:90%">
<el-input v-model="form.jobGroup" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="表达式" label-width="100px" style="width:90%">
<el-input v-model="form.cronExpression" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="add">确 定</el-button>
</div>
</el-dialog>

<el-dialog title="修改任务" :visible.sync="updateFormVisible">
<el-form :model="updateform">
<el-form-item label="表达式" label-width="100px" style="width:90%">
<el-input v-model="updateform.cronExpression" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="updateFormVisible = false">取 消</el-button>
<el-button type="primary" @click="update">确 定</el-button>
</div>
</el-dialog>
</div>

<footer align="center">
<p>&copy; Quartz 定时任务管理</p>
</footer>

<script>
var vue = new Vue({
el: "#job",
data: {
//表格当前页数据
tableData: [],
//请求的URL
url: 'job',
//默认每页数据量
pagesize: 10,
//当前页码
currentPage: 1,
//查询的页码
start: 1,
//默认数据总数
totalCount: 1000,
//添加对话框默认可见性
dialogFormVisible: false,
//修改对话框默认可见性
updateFormVisible: false,
//提交的表单
form: {
jobName: '',
jobGroup: '',
cronExpression: ''
},
updateform: {
jobName: '',
jobGroup: '',
cronExpression: ''
},
loading: false
},
methods: {
// 格式化状态
formatState: function (row, column, cellValue, index) {
if (row.triggerState === 'WAITING' || row.triggerState === 'ACQUIRED') {
return "运行中";
} else if (row.triggerState === 'PAUSED') {
return "暂停";
} else {
return "未知状态";
}
},
// 从服务器读取数据
loadData: function (currentPage, pageSize) {
this.loading = true;
this.$http.get('job?' + 'currentPage=' + currentPage + '&pageSize=' + pageSize).then(function (res) {
console.log(res);
this.tableData = res.body.data.data;
this.totalCount = res.body.data.total;
this.loading = false;
}, function () {
console.log('failed');
});
},
// 删除任务
handleDelete: function (index, row) {
this.$http.delete('job', {
params: {
"jobClassName": row.jobName,
"jobGroupName": row.jobGroup
}
}, {emulateJSON: true}).then(function (res) {
this.loadData(this.currentPage, this.pagesize);
}, function () {
console.log('failed');
});
},
// 暂停任务
handlePause: function (index, row) {
this.$http.put('job?pause', {
"jobClassName": row.jobName,
"jobGroupName": row.jobGroup
}, {emulateJSON: true}).then(function (res) {
this.loadData(this.currentPage, this.pagesize);
}, function () {
console.log('failed');
});
},
// 恢复任务
handleResume: function (index, row) {
this.$http.put('job?resume', {
"jobClassName": row.jobName,
"jobGroupName": row.jobGroup
}, {emulateJSON: true}).then(function (res) {
this.loadData(this.currentPage, this.pagesize);
}, function () {
console.log('failed');
});
},
// 搜索
search: function () {
this.loadData(this.currentPage, this.pagesize);
},
// 弹出对话框
handleadd: function () {
this.dialogFormVisible = true;
},
// 添加
add: function () {
this.$http.post('job', {
"jobClassName": this.form.jobName,
"jobGroupName": this.form.jobGroup,
"cronExpression": this.form.cronExpression
}, {emulateJSON: true}).then(function (res) {
this.loadData(this.currentPage, this.pagesize);
this.dialogFormVisible = false;
}, function () {
console.log('failed');
});
},
// 更新
handleUpdate: function (index, row) {
console.log(row);
this.updateFormVisible = true;
this.updateform.jobName = row.jobName;
this.updateform.jobGroup = row.jobGroup;
},
// 更新任务
update: function () {
this.$http.put('job?cron',
{
"jobClassName": this.updateform.jobName,
"jobGroupName": this.updateform.jobGroup,
"cronExpression": this.updateform.cronExpression
}, {emulateJSON: true}
).then(function (res) {
this.loadData(this.currentPage, this.pagesize);
this.updateFormVisible = false;
}, function () {
console.log('failed');
});

},
// 每页显示数据量变更
handleSizeChange: function (val) {
this.pagesize = val;
this.loadData(this.currentPage, this.pagesize);
},
// 页码变更
handleCurrentChange: function (val) {
this.currentPage = val;
this.loadData(this.currentPage, this.pagesize);
},

},

});

//载入数据
vue.loadData(vue.currentPage, vue.pagesize);
</script>

</body>
</html>

0 comments on commit a2936f9

Please sign in to comment.