|
|
<style type="text/css">
|
|
|
.task-add {
|
|
|
padding-top: 20px;
|
|
|
}
|
|
|
.task-add ul {
|
|
|
list-style: none;
|
|
|
}
|
|
|
.task-add ul li {
|
|
|
height: 40px;
|
|
|
}
|
|
|
.task-add select,
|
|
|
.task-add input {
|
|
|
width: 70%;
|
|
|
height: 30px;
|
|
|
padding: 5px;
|
|
|
}
|
|
|
.task-add .job-select {
|
|
|
margin-left: -3px;
|
|
|
}
|
|
|
|
|
|
.task-log {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
.task-log table, .task-log table tr th,.task-log table tr td {
|
|
|
border: none;
|
|
|
}
|
|
|
.task-log tbody tr {
|
|
|
height: 40px;
|
|
|
}
|
|
|
.task-log table {
|
|
|
border-collapse: separate;
|
|
|
border-spacing: 0 4px;
|
|
|
}
|
|
|
.task-log tbody tr:nth-child(odd) td:first-child {
|
|
|
border-left: 2px solid #00C656;
|
|
|
}
|
|
|
.task-log tbody tr:nth-child(even) td:first-child {
|
|
|
border-left: 2px solid #4F95E8;
|
|
|
}
|
|
|
.task-log tbody tr.empty td {
|
|
|
border: none !important;
|
|
|
}
|
|
|
</style>
|
|
|
<div class="pageheader">
|
|
|
<div class="media">
|
|
|
<div class="pageicon pull-left">
|
|
|
<i class="fa fa-th-list"></i>
|
|
|
</div>
|
|
|
<div class="media-body">
|
|
|
<ul class="breadcrumb">
|
|
|
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
|
|
<li>{{title}}</li>
|
|
|
</ul>
|
|
|
<h4>{{title}}</h4>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- media -->
|
|
|
</div>
|
|
|
<!-- pageheader -->
|
|
|
|
|
|
<div class="contentpanel task-panel" style="padding-bottom:0;">
|
|
|
<div class="panel panel-default">
|
|
|
<div class="panel-body">
|
|
|
<button class="btn btn-default btn-add" >增加</button>
|
|
|
<button class="btn btn-default delete-all" type="submit">删除</button>
|
|
|
</div>
|
|
|
</div><!--/panel-default-->
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
<div class="panel-body">
|
|
|
<table class="table table-striped table-bordered tab-task">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th width="10%">
|
|
|
<label><input type="checkbox" style="vertical-align: text-bottom;" onclick="javascript:$('.tab-task input[type=checkbox]').attr('checked', this.checked);" /> 全选</label>
|
|
|
</th>
|
|
|
<th class="text-center" width="20%">任务名称</th>
|
|
|
<th class="text-center" width="30%">链接</th>
|
|
|
<th class="text-center" width="10%">延迟时间</th>
|
|
|
<th class="text-center" width="15%">执行频率</th>
|
|
|
<th class="text-center" width="15%">操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
|
|
|
<tbody>
|
|
|
{{#each tasks}}
|
|
|
<tr data-code="{{code}}" data-type="{{type}}">
|
|
|
<td> <input type="checkbox" /></td>
|
|
|
<td class="text-center td-name" >{{name}}</td>
|
|
|
<td class="text-center" >{{url}}</td>
|
|
|
<td class="text-center" >{{time}}</td>
|
|
|
<td class="text-center" >{{job_name}}</td>
|
|
|
<td class="text-center">
|
|
|
<a href="javascript:;" class="log-btn">执行日志</a>
|
|
|
<a href="javascript:;" class="del-btn">删除</a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
{{/each}}
|
|
|
{{#unless tasks}}
|
|
|
<tr>
|
|
|
<td class="text-center" colspan="6">暂无数据</td>
|
|
|
</tr>
|
|
|
{{/unless}}
|
|
|
</tbody>
|
|
|
</table>
|
|
|
{{# pager}}
|
|
|
<div class="text-right">
|
|
|
{{#if pages}}
|
|
|
<ul class="pagination">
|
|
|
{{# prePage}}
|
|
|
<li><a href="{{url}}">上一页</a></li>
|
|
|
{{/ prePage}}
|
|
|
{{# pages}}
|
|
|
<li class="{{#unless url}}disabled {{/unless}}{{#if cur}}active{{/if}}"><a {{#if url}}href="{{url}}"{{^}}href="javascript:;"{{/if}}>{{num}}</a></li>
|
|
|
{{/ pages}}
|
|
|
{{# nextPage}}
|
|
|
<li><a href="{{url}}">下一页</a></li>
|
|
|
{{/ nextPage}}
|
|
|
</ul>
|
|
|
{{/if}}
|
|
|
</div>
|
|
|
{{/ pager}}
|
|
|
</div>
|
|
|
</div><!--/panel-default-->
|
|
|
</div><!--/contentpanel-->
|
|
|
|
|
|
<script id="task-add-tpl" type="text/tmpl">
|
|
|
<div class="task-add">
|
|
|
<ul>
|
|
|
<li>
|
|
|
执行频率:
|
|
|
<select class="job-select" data-placeholder="请选择..." >
|
|
|
<option value="-1">请选择...</option>
|
|
|
{{#each job}}
|
|
|
<option value="{{@index}}">{{info}}</option>
|
|
|
{{/each}}
|
|
|
</select>
|
|
|
</li>
|
|
|
<li>任务名称:<input type="text" class="job-name" placeholder='请输入任务名称...'></li>
|
|
|
<li>执行链接:<input type="text" class="job-link" placeholder='请输入执行链接...'></li>
|
|
|
<li>延迟时间:<input type="text" class="job-time" placeholder='请输入延迟时间...'></li>
|
|
|
</ul>
|
|
|
<p><span class="err-tip"></span></p>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="task-log-tpl" type="text/tmpl">
|
|
|
<div class="task-log">
|
|
|
<table class="table table-striped table-bordered">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th class="text-center" width="20%">执行时间</th>
|
|
|
<th class="text-center" width="20%">状态码</th>
|
|
|
<th class="text-center" width="50%">执行结果</th>
|
|
|
<th class="text-right" width="10%">
|
|
|
<a href="javascript:;" class="btn btn-default btn-refresh-log">刷新</a>
|
|
|
</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody></tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
var tasks = {
|
|
|
init: function() {
|
|
|
var that = this;
|
|
|
var taskData = {};
|
|
|
|
|
|
this.$base = $('.contentpanel');
|
|
|
|
|
|
this.$base.on('click', '.btn-add', function() {
|
|
|
that.add();
|
|
|
});
|
|
|
|
|
|
// 单个删除
|
|
|
this.$base.on('click', '.del-btn', function() {
|
|
|
let $tr = $(this).closest('tr');
|
|
|
that.del([$tr.data()], () => $tr.remove());
|
|
|
});
|
|
|
|
|
|
// 日志
|
|
|
this.$base.on('click', '.log-btn', function() {
|
|
|
let $tr = $(this).closest('tr');
|
|
|
|
|
|
taskData = $tr.data();
|
|
|
|
|
|
return that.getTaskLog(taskData).then(rdata => {
|
|
|
layer.open({
|
|
|
type: 1,
|
|
|
area: ['800px', '500px'],
|
|
|
title: '《' + $tr.find('.td-name').text() + '》执行明细',
|
|
|
content: that.taskLogTpl
|
|
|
});
|
|
|
|
|
|
that.rendLog(rdata.data);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 日志刷新
|
|
|
$('body').on('click', '.btn-refresh-log', function() {
|
|
|
var layerIndex = layer.load(1);
|
|
|
|
|
|
return that.getTaskLog(taskData).then(rdata => {
|
|
|
setTimeout(function() {
|
|
|
layer.close(layerIndex);
|
|
|
that.rendLog(rdata.data);
|
|
|
}, 2000);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 删除全部
|
|
|
this.$base.on('click', '.delete-all', function() {
|
|
|
let arr = [];
|
|
|
|
|
|
$('.tab-task input[type=checkbox]:checked').each(function(){
|
|
|
arr.push($(this).closest('tr').data());
|
|
|
});
|
|
|
|
|
|
that.del(arr, () => history.go(0));
|
|
|
});
|
|
|
|
|
|
this.taskAddTpl = $('#task-add-tpl').html();
|
|
|
this.taskLogTpl = $('#task-log-tpl').html();
|
|
|
},
|
|
|
add: function() {
|
|
|
var that = this;
|
|
|
var layerIndex = layer.open({
|
|
|
type: 1,
|
|
|
area: ['450px'],
|
|
|
title: '任务添加',
|
|
|
content: that.taskAddTpl,
|
|
|
btn: '添加',
|
|
|
yes: function() {
|
|
|
var data = {
|
|
|
type: parseInt($('.job-select').val(), 10),
|
|
|
name: $('.job-name').val(),
|
|
|
url: $('.job-link').val(),
|
|
|
time: parseInt($('.job-time').val() || 0),
|
|
|
};
|
|
|
|
|
|
if (data.type < 0) {
|
|
|
return that.tips('请选择执行频率...', '.job-select');
|
|
|
} else if (data.name === '') {
|
|
|
return that.tips('任务名称必填...', '.job-name');
|
|
|
} else if (data.url === '' || data.url.indexOf('http') === -1) {
|
|
|
return that.tips('请输入正确的执行链接...', '.job-link');
|
|
|
}
|
|
|
|
|
|
return that.ajax({
|
|
|
url: '/seo/task/add',
|
|
|
type: 'POST',
|
|
|
data: data,
|
|
|
}).then(rdata => {
|
|
|
if (rdata.code !== 200) {
|
|
|
return alert(rdata.message);
|
|
|
}
|
|
|
|
|
|
layer.close(layerIndex);
|
|
|
|
|
|
history.go(0)
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
del: function(data, callback) {
|
|
|
if (data.length <= 0) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
var that = this;
|
|
|
var layerIndex = layer.confirm('您确定要删除吗!!!', {
|
|
|
btn: ['确定', '取消']
|
|
|
}, function() {
|
|
|
return that.ajax({
|
|
|
url: '/seo/task/del',
|
|
|
type: 'POST',
|
|
|
data: {data: JSON.stringify(data)},
|
|
|
}).then(res => {
|
|
|
callback();
|
|
|
layer.close(layerIndex);
|
|
|
return res;
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
rendLog: function(rdata) {
|
|
|
var $tbody = $('.task-log tbody');
|
|
|
$tbody.empty();
|
|
|
|
|
|
if (rdata.length <= 0) {
|
|
|
$tbody.append(`<tr class="empty">
|
|
|
<td class="text-center" colspan="4">暂无数据</td>
|
|
|
</tr>`);
|
|
|
} else {
|
|
|
$.each(rdata, (key, item)=> {
|
|
|
$tbody.append(`<tr>
|
|
|
<td class="text-center" >${item.time}</td>
|
|
|
<td class="text-center" >${item.code}</td>
|
|
|
<td class="text-center" colspan="2">${item.message}</td>
|
|
|
</tr>`);
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
getTaskLog: function(data) {
|
|
|
return this.ajax({
|
|
|
url: '/seo/task/log',
|
|
|
type: 'POST',
|
|
|
data: data,
|
|
|
});
|
|
|
},
|
|
|
ajax: function(options) {
|
|
|
return Promise.resolve($.ajax(options));
|
|
|
},
|
|
|
tips: function(tip, dom) {
|
|
|
return layer.tips(tip, dom, {
|
|
|
tips: [1, '#000'],
|
|
|
time: 2000
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
|
|
|
$(function() {
|
|
|
tasks.init();
|
|
|
});
|
|
|
</script> |
...
|
...
|
|