运维平台: 任务计划创建功能开发(一)

/* 添加计划任务 注意:被遮罩变成灰色，加shade：0属性 */ $('#addScheduler').on('click',function (){ layer.open({ title: "新建任务" ,type: 1 ,area: ['65%','70%'] ,content: $('#htmlScheduler') ,shade:0 ,success: function (layero, index){ console.log("success") } }) });

定义一个隐藏div，id为htmlScheduler,为创建任务的表单

{% block task %}

触发提交按钮的JS函数，分别在上述相关元素中的onchange事件，引用下列函数

/* 间隔时间触发提交按钮 */ function validateParamTxt(){ timeInterval = layui.jquery('#cronInterval').val(); if (timeInterval !== null || timeInterval !== ""){ layui.jquery('#taskSubmit').css('pointer-events','auto') layui.jquery('#taskSubmit').removeClass('layui-btn-disabled').attr("disabled",false) return false; } else { console.log("为空") layui.jquery('#taskSubmit').addClass('layui-btn-disabled') return false; } return false; } /* 一次性执行时间 触发提交按钮 */ function execDateFunction(){ execDate = layui.jquery('#execDate').val(); if (execDate !== null || execDate !== ""){ layui.jquery('#taskSubmit').css('pointer-events','auto') layui.jquery('#taskSubmit').removeClass('layui-btn-disabled').attr("disabled",false) return false; } else{ console.log("为空") layui.jquery('#taskSubmit').addClass('layui-btn-disabled') return false; } return false; } /* 执行规则触发提交按钮 */ function execFunction(){ cronInterval = layui.jquery('#cronInterval').val(); if (cronInterval !== null || cronInterval !== ""){ layui.jquery('#taskSubmit').css('pointer-events','auto') layui.jquery('#taskSubmit').removeClass('layui-btn-disabled').attr("disabled",false) return false; } else { console.log("为空") layui.jquery('#taskSubmit').addClass('layui-btn-disabled') return false; } return false; }

时间选择器

/* 一次性时间选择器 */ laydate.render({ elem: '#execDate' ,type: 'datetime' }); laydate.render({ elem: '#startTime' ,type: 'datetime' }); laydate.render({ elem: '#endtTime' ,type: 'datetime' });

渲染step 有几步下面写几个 关联上html的表单

/* 渲染step 有几步下面写几个 关联上html的表单*/step.render({ elem: '#stepForm', filter: 'stepForm', width: '100%', //设置容器宽度 stepWidth: '750px', height: '480px', stepItems: [{ title: '任务内容' }, { title: '执行节点' }, { title: '设置触发器' }]});

表单数据提交

/* 第一步*/$('.pre').click(function () { step.pre('#stepForm');});/* 下一步*/$('.next').click(function () { step.next('#stepForm');});

效果

更多文章请扫一扫