showjobs.html 10.5 KB
<div id="jobInfoDiv">
	<div id="jobInfoListTable"></div>
	<div id="jobCreateJobBtm">
		<button id="crtbtn" onclick="showCreatePage()">创建任务</button>
	</div>
	<div id="jobCreateJobDiv"></div>
</div>
<meta charset="utf-8">
<link href="../css/bootstrap.css" rel="stylesheet">
<script src="../js/jquery-1.12.0.min.js" charset="UTF-8"
	type="text/javascript"></script>
<script src="../js/bootstrap.table.js" charset="UTF-8"
	type="text/javascript"></script>
<script src="../js/bootstrap.dialog.js" charset="UTF-8"
	type="text/javascript"></script>
<script src="../js/bootstrap.pagination.js" charset="UTF-8"
	type="text/javascript"></script>
<script src="../js/bootstrap.js" charset="UTF-8" type="text/javascript"></script>
<script src="../js/bootstrap.panel.js" charset="UTF-8"
	type="text/javascript"></script>
<script>
	$(function() {
		//设置路径导航
		//全局用来html传递参数使用
		//var paramObj = {};
		$("#jobCreateJobDiv").hide();
		var currentPage = 1;
		//全局的panel的样式
		var panelStyle = "panel-primary";
		$("#jobInfoDiv #jobInfoListTable").table(
				{
					url : "/jobs/jobmanager/showalljob.do",
					queryParams : {

					},
					currentPage : currentPage,
					title : "任务列表",
					panelClass : panelStyle,
					striped : true,
					pagination : true,
					pageSize : 10,
					loadFilter : function(data) {
						return data.data;
					},
					columns : [
							{
								title : "任务名称",
								field : "jobName"

							},
							{
								title : "任务所属组",
								field : "jobGroup"
							},
							{
								title : "任务所属模块",
								field : "module"
							},
							{
								title : "任务执行表达式",
								field : "cronExpression"
							},
							{
								title : "任务执行器",
								field : "processor"
							},
							{
								title : "任务执行入参",
								field : "context"
							},

							{
								title : "方式",
								field : "activeMode",
								formatter : function(value, rowData, rowIndex) {
									if (value == 0)
										return "单次";
									else if (value == 1)
										return "循环";
									else
										return "";
								}
							},
							{
								title : "执行IP",
								field : "processIp"
							},
							{
								title : "执行状态",
								field : "status",
								formatter : function(value, rowData, RowIndex) {
									if (value == 1)
										return "执行中";
									else if (value == 0)
										return "停止";
									else
										return "";
								}
							},
							{
								title : "操作",
								formatter : function(value, rowData, rowIndex) {
									var div = $("<div>");

									if (rowData.status == 0) {//已暂停,可以开启
										var openBtn = $("<button>").addClass(
												"btn btn-xs btn-success").html(
												"开启").appendTo(div);
										div.append("&nbsp;");
										openBtn.click(function() {//开启变为待执行状态
											changeState(rowData, 1, this,
													"确定开启吗", "确定开启改任务么");
										});

										var editBtn = $("<button>").addClass(
												"btn btn-xs btn-success").html(
												"编辑").appendTo(div);
										editBtn.click(function() {
											editJob(rowData);
										});
										div.append("&nbsp;");

										div.append("&nbsp;");
									}
									if (rowData.status == 1) {//执行状态,可以停止
										var stopBtn = $("<button>").addClass(
												"btn btn-xs btn-success").html(
												"停止").appendTo(div);
										stopBtn.click(function() {
											changeState(rowData, 0, this,
													"确定停止吗", "确认停止该任务么");
										});
										div.append("&nbsp;");
									}

									var editBtn = $("<button>").addClass(
											"btn btn-xs btn-success")
											.html("查看").appendTo(div);
									editBtn.click(function() {

										showDetailJob(rowData);
									});
									return div;
								}
							} ]
				});

		//加载创建
		$("#jobInfoDiv #jobCreateJobDiv").panel({
			className : panelStyle,
			title : "创建任务",
			url : "/jobs/html/createjob.html",
			showFooter : false
		});

	});

	function changeState(job, newstate, obj, title, meg) {

		var dialog = $("<div>").appendTo($("body"));
		dialog.dialog({
			title : title,
			backdrop : "static",
			content : meg,
			buttons : [ {
				text : "否",
				className : "btn-danger",
				onclick : function() {
					$(dialog).dialog("hide");
				}
			}, {
				text : "是",
				className : "btn-success",
				onclick : function() {
					$(dialog).dialog("hide");
					$.ajax({
						url : geturl(),
						type : 'post',
						contentType : "application/json; charset=utf-8",
						data : JSON.stringify(job),
						dataType : "json",
						success : function(data) {

							if (!data || data.code != 200) {
								var dialog = $("<div>").appendTo($("body"));
								dialog.dialog({
									title : "开启失败",
									backdrop : "static",
									content : "该活动已过期",
									buttons : [ {
										text : "确定",
										className : "btn-danger",
										onclick : function() {
											$(dialog).dialog("hide");
										}
									} ]
								});
							}
							$("#jobInfoDiv #jobInfoListTable").table("load");
						}
					});
				}
			} ]
		});
		function geturl() {
			if (newstate == 0) {
				return "/jobs/jobmanager/stopjob.do";
			} else if (newstate == 1) {
				return "/jobs/jobmanager/startjob.do";
			}
		}
	}

	function showCreatePage() {
		$("#jobCreateJobDiv").show();
	}

	function editJob(job) {
		var dialog = $("<div>").appendTo($("body"));
		dialog.dialog({
			title : "创建任务",
			backdrop : "static",
			content : buildCnt(job)
		});

		function buildCnt(job) {
			var cnt = "<form  class=\"form col-md-12 center-block\" name=\"form\" id=\"editjobinfo\">";
			cnt += "<div class=\"form-group\">";
			cnt = cnt
					+ "任务名称:<input type=\"text\"  class=\"form-control input-lg\" id=\"editjobName\" name=\"editjobName\" placeholder=\"任务名称\" value=";
			cnt =cnt+job.jobName;
			cnt += " disabled=\"true\">";
			cnt += "</div>";

			cnt += "<div class=\"form-group\">";
			cnt = cnt
					+ "任务分组:<input type=\"text\"  class=\"form-control input-lg\" id=\"editjobGroup\" name=\"editjobGroup\" placeholder=\"分组名称\" value=";
			cnt =cnt+job.jobGroup;
			cnt += " disabled=\"true\">";
			cnt += "</div>";

			cnt += "<div class=\"form-group\">";
			cnt = cnt
					+ "所属模块:<input type=\"text\"  class=\"form-control input-lg\" id=\"editmodule\" name=\"editmodule\" placeholder=\"所属模块\" value=";
			cnt =cnt+job.module;
			cnt += " disabled=\"true\">";
			cnt += "</div>";

			cnt += "<div class=\"form-group\">";
			cnt = cnt
					+ "任务执行器:<input type=\"text\"  class=\"form-control input-lg\" id=\"editprocessor\" name=\"editprocessor\" placeholder=\"任务执行器\" value=";
			cnt =cnt+job.processor;
			cnt += ">";
			cnt += "</div>";

			cnt += "<div class=\"form-group\">";
			cnt = cnt
					+ "任务执行IP:<input type=\"text\"  class=\"form-control input-lg\" id=\"editprocessip\" name=\"editprocessip\" placeholder=\"任务执行IP\" value=";
			cnt =cnt+job.processIp;
			cnt += ">";
			cnt += "</div>";

			cnt += "<div class=\"form-group\">";
			cnt = cnt + "任务类型:<select name=\"editjobtype\" id=\"editjobtype\">";
			var tmp = "<option value=\"0\" selected = \"selected\">单节点执行</option>";
			var tmpsec = "<option value=\"1\" >多节点执行</option>";
			if (job.jobType == 1) {
				tmp = "<option value=\"0\" >单节点执行</option>";
				tmpsec = "<option value=\"1\" selected = \"selected\">多节点执行</option>";
			}
			cnt = cnt + tmp;
			cnt = cnt + tmpsec;
			cnt += "</select>";
			cnt += "</div>";

			cnt += "<div class=\"form-group\">";
			cnt = cnt
					+ "执行周期:<input type=\"text\"  class=\"form-control input-lg\" id=\"editcronexception\" name=\"editcronexception\" placeholder=\"任务执行周期\" value=\"";
			cnt =cnt+job.cronExpression;
			cnt += "\">";
			cnt += "</div>";

			cnt += "<div class=\"form-group\">";
			cnt = cnt
					+ "任务入参:<input type=\"text\"  class=\"form-control input-lg\" id=\"editcontext\" name=\"editcontext\" placeholder=\"任务入参\" value=";

			if (typeof (job.context) == "undefined") {
				cnt = cnt + "";
			} else {
				cnt = cnt + job.context;
			}
			cnt += ">";
			cnt += "</div>";

			cnt += "<div class=\"form-group\">";
			cnt = cnt
					+ "任务触发类型:<select name=\"editactivemode\" id=\"editactivemode\">";
			var tmp = "<option value=\"0\" selected = \"selected\">单次任务</option>";
			var tmpsec = "<option value=\"1\" >周期任务</option>";
			if (job.activeMode == 1) {
				tmp = "<option value=\"0\" >单次任务</option>";
				tmpsec = "<option value=\"1\" selected = \"selected\">周期任务</option>";
			}
			cnt = cnt + tmp;
			cnt = cnt + tmpsec;
			cnt += "</select>";
			cnt += "</div>";

			cnt += "<div class=\"form-group\">";
			cnt += "<input type=\"button\" value=\"更新\" id=\"editJobBtn\" class=\"btn btn-primary btn-lg btn-block\" name=\"editJobBtn\" onclick=\"updatejob()\" />";
			cnt += "</div>";
			cnt += "</form>";
			return cnt;
		}

	}
	function updatejob() {
		var jobName = $("#editjobName");
		var jobGroup = $("#editjobGroup");
		var module = $("#editmodule");
		var processor = $("#editprocessor");
		var processip = $("#editprocessip");
		var jobtype = $("#editjobtype");
		var cronexception = $("#editcronexception");
		var context = $("#editcontext");
		var activemode = $("#editactivemode");
		var jobinfo = {
			"activeMode" : activemode.val(),
			"cronExpression" : cronexception.val(),
			"jobGroup" : jobGroup.val(),
			"jobName" : jobName.val(),
			"jobType" : jobtype.val(),
			"module" : module.val(),
			"processIp" : processip.val(),
			"processor" : processor.val(),
			"context" : context.val()
		};
		$.ajax({
			url : "/jobs/jobmanager/updatejob.do",
			contentType : "application/json; charset=utf-8",
			data : JSON.stringify(jobinfo),
			dataType : "json",
			type : "POST",
			success : function(data) {
				if (!data) {
					$("#messageAlert").alerts({
						content : "创建任务失败",
						type : "danger"
					});
					$("#createJobBtn").removeAttr("disabled");
					return;
				}
				if (data.code != 200) {
					$("#messageAlert").alerts({
						content : data.message,
						type : "danger"
					});
					$("#createJobBtn").removeAttr("disabled");
					return;
				}
				location.href = "/jobs/html/showjobs.html";
			}
		});
	}

	function showDetailJob(job) {
		window.open("/jobs/html/showdetailjob.html?jobname=" + job.jobName
				+ "&module=" + job.module);
	}
</script>