jobAdd.vm 15.3 KB
<div class="row wrapper border-bottom white-bg page-heading" xmlns="http://www.w3.org/1999/html">
    <div class="col-lg-12">
        <h2>任务添加</h2>
        <ol class="breadcrumb">
            <li><a>任务队列管理</a></li>
            <li class="active"><b>任务添加</b></li>
        </ol>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h3><span class="text-navy">任务添加</span></h3>
                </div>
                <div class="ibox-content">
                    <form method="post" id="form" class="form-horizontal" onsubmit="return false">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">任务ID</label>

                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="taskId"
                                       placeholder="请输入任务ID(TaskId)【必填】">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">任务类型</label>

                            <div class="col-sm-2">
                                <select name="jobType" class="form-control">
                                    <option value="REAL_TIME_JOB">实时任务</option>
                                    <option value="TRIGGER_TIME_JOB">定时任务</option>
                                    <option value="CRON_JOB">Cron任务</option>
                                    <option value="REPEAT_JOB">Repeat任务</option>
                                </select>
                            </div>
                            <div class="col-sm-3 lts-cron-job-group" style="display:none;">
                                <input type="text" class="form-control" name="cronExpression"
                                       placeholder="请输入CronExpression">
                            </div>
                            <div class="col-sm-3 lts-cron-job-group" style="display:none;">
                                <button class="btn btn-primary" type="button" id="cronGeneratorBtn">
                                    工具生成
                                </button>
                            </div>
                            <div class="col-sm-2 lts-repeat-job-group lts-trigger-job-group" style="display:none;">
                                <input class="form-control datepicker" type="text" style="width:160px"
                                       id="triggerTime"
                                       name="triggerTime"
                                       date-format="yyyy-MM-dd HH:mm:ss"
                                       placeholder="请输入触发时间"/>
                            </div>
                            <div class="col-sm-2 lts-repeat-job-group" style="display:none;">
                                <input type="text" class="form-control" name="repeatInterval"
                                       placeholder="请输入触发时间间隔"/>
                            </div>
                            <div class="col-sm-2 lts-repeat-job-group" style="display:none;">
                                <input type="text" class="form-control" name="repeatCount"
                                       placeholder="请输入重复次数"/>
                            </div>
                        </div>
                        <div class="form-group lts-repeat-job-group lts-cron-job-group" style="display: none;">
                            <label class="col-sm-2 control-label">依赖上一周期</label>

                            <div class="col-sm-3">
                                <select name="relyOnPrevCycle" class="form-control">
                                    <option value="true" selected>是</option>
                                    <option value="false">否</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">反馈客户端</label>

                            <div class="col-sm-3">
                                <select name="needFeedback" class="form-control">
                                    <option value="true">需要</option>
                                    <option value="false" selected>不需要</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">优先级</label>

                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="priority" value="100"
                                       placeholder="必须为数字,数值越小,优先级越大【必填】">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">最大重试次数</label>

                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="maxRetryTimes" value="0"
                                       placeholder="最大重试次数, 必须为非负数【必填】">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">提交节点组</label>

                            <div class="col-sm-3">
                                <select name="submitNodeGroup" class="form-control">
                                    <option value="">-- 请选择提交节点组 --</option>
                                    #foreach($nodeGroup in $jobClientNodeGroups)
                                        <option value="$nodeGroup.name">$nodeGroup.name</option>
                                    #end
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">执行节点组</label>

                            <div class="col-sm-3">
                                <select name="taskTrackerNodeGroup" class="form-control">
                                    <option value="">-- 请选择执行节点组 --</option>
                                    #foreach($nodeGroup in $taskTrackerNodeGroups)
                                        <option value="$nodeGroup.name">$nodeGroup.name</option>
                                    #end
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户参数</label>

                            <div class="col-sm-4">
                                <textarea type="text" class="form-control" name="extParams"
                                          placeholder="请输入用户参数 JSON格式【非必填】"></textarea>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-1 col-sm-offset-2" style="width:70px;">
                                <button class="btn btn-primary" type="button" id="addBtn">
                                    添加
                                </button>
                            </div>
                            <div class="col-sm-1">
                                <button class="btn btn-warning" type="reset" id="resetBtn">
                                    重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    $(document).ready(function () {

        $(document).on("change", "select[name='jobType']", function () {
            var jobType = $(this).val();
            if (jobType == 'REAL_TIME_JOB') {
                $(".lts-cron-job-group").hide();
                $(".lts-trigger-job-group").hide();
                $(".lts-repeat-job-group").hide();
            } else if (jobType == 'TRIGGER_TIME_JOB') {
                $(".lts-cron-job-group").hide();
                $(".lts-repeat-job-group").hide();
                $(".lts-trigger-job-group").show();
            } else if (jobType == 'CRON_JOB') {
                $(".lts-trigger-job-group").hide();
                $(".lts-repeat-job-group").hide();
                $(".lts-cron-job-group").show();
            } else if (jobType == 'REPEAT_JOB') {
                $(".lts-cron-job-group").hide();
                $(".lts-trigger-job-group").hide();
                $(".lts-repeat-job-group").show();
            }
        });

        $(document).on("click", "#addBtn", function () {
            var params = {};
            $.each($('#form').parent().find(".form-control"), function () {
                var name = $(this).attr("name");
                var value = $(this).val().trim();
                params[name] = value;
            });

            var jobType = params['jobType'];
            if (jobType == 'REAL_TIME_JOB') {
                params['cronExpression'] = '';
                params['triggerTime'] = '';
            } else if (jobType == 'TRIGGER_TIME_JOB') {
                params['cronExpression'] = '';
                var triggerTime = params['triggerTime'];
                if (!triggerTime) {
                    sweetAlert("请输入任务触发时间", "", "error");
                    return;
                }
            } else if (jobType == 'CRON_JOB') {
                var cronExpression = params['cronExpression'];
                params['triggerTime'] = '';
                if (!cronExpression) {
                    sweetAlert("请输入Cron表达式", "", "error");
                    return;
                }
            } else if (jobType == 'REPEAT_JOB') {
                var repeatInterval = params['repeatInterval'];
                if (!repeatInterval) {
                    sweetAlert("请输入重复时间间隔", "必须为数字,毫秒数", "error");
                    return;
                }
                if (!LTS.ReExp.number.test(repeatInterval)) {
                    sweetAlert("重复时间间隔", "必须为数字,毫秒数", "error");
                    return;
                }
                var repeatCount = params['repeatCount'];
                if (!repeatCount) {
                    sweetAlert("请输入重复次数", "-1表示无限重复, 必须大于等于 -1", "error");
                    return;
                }
                if (repeatCount != -1 && !/^\d+$/.test(repeatCount)) {
                    sweetAlert("重复次数格式错误", "-1表示无限重复, 必须大于等于 -1", "error");
                    return;
                }
            }

            debugger;

            // check form
            if (!params['taskId']) {
                sweetAlert("请输入任务ID", "请输入任务ID(TaskId)【必填】", "error");
                return;
            }
            var priority = params['priority'];
            if (!priority) {
                sweetAlert("请输入优先级", "必须为数字,数值越小,优先级越大【必填】", "error");
                return;
            }
            if (!LTS.ReExp.number.test(priority)) {
                sweetAlert("优先级格式错误", "必须为数字,数值越小,优先级越大【必填】", "error");
                return;
            }
            if (!params['submitNodeGroup'] && params['needFeedback'] == 'true') {
                sweetAlert("请选择提交节点组", "需要反馈客户端必须选择提交节点组,如果列表中没有,请在节点组管理中添加,并启动改节点。", "error");
                return;
            }
            if (!params['taskTrackerNodeGroup']) {
                sweetAlert("请选择执行节点组", "如果列表中没有,请在节点组管理中添加,并启动改节点。", "error");
                return;
            }
            if (!params['maxRetryTimes'] || !/^\d+$/.test(params['maxRetryTimes'])) {
                sweetAlert("最大重试次数必须为非负整数", "最大重试次数必须为非负整数", "error");
                return;
            }

            var extParams = params['extParams'];
            if (extParams) {
                try {
                    JSON.parse(extParams)
                } catch (e) {
                    sweetAlert("用户参数格式错误", "必须为JSON格式", "error");
                    return;
                }
            }

            $.ajax({
                url: 'api/job-queue/job-add',
                type: 'POST',
                dataType: 'json',
                data: params,
                success: function (json) {
                    if (json && json.success) {
                        swal('添加成功');
                        $("#resetBtn").trigger("click");
                        $(".lts-cron-job-group").hide();
                        $(".lts-trigger-job-group").hide();
                        $(".lts-repeat-job-group").hide();
                    } else {
                        if (json) {
                            swal(json['msg']);
                        }
                    }
                }

            });
        });

        $(document).on("click", "#cronGeneratorBtn", function () {
            var cron = $("input[name='cronExpression']").val().trim();
            if (isCronExpress(cron)) {
                $(window.frames["cronGeneratorIframe"]).contents().find("#cron").val(cron);
                $(window.frames["cronGeneratorIframe"]).contents().find("#btnFan").click();
            }
            $("#cronGeneratorDialog").modal("show");
        });

        $('body').bind('Event_CronExpression_Generated', function (event, data) {
            $("input[name='cronExpression']").val(data['cron'].trim());
            $("#cronGeneratorDialog").modal("hide");
        });
    });
</script>
<script src="assets/js/cronValidate.js" type="text/javascript"></script>


<div class="modal inmodal" id="cronGeneratorDialog" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" style="width: 600px;">
        <div class="modal-content animated rubberBand">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">关闭</span></button>
                <h2 class="modal-title">Cron表达式生成工具</h2>
            </div>
            <div class="modal-body">
                <div class="row">
                    <iframe id="cronGeneratorIframe" src="cron_generator_iframe.htm" width="540" height="450"
                            style="border:0px;"
                            scrolling="no"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>