DSWMS/Quartz.NetUI/Quartz.NET.Web/wwwroot/js/task-index.js


var $taskVue = new Vue({
    el: "#task-container",
    data: {
        select: {
            currentRow: [],
            rows: {}
        },
        selectCom: {
            model: 'post',
            data: [{ value: 'post', label: 'post' }, { value: 'get', label: 'get' }]
        },
        log: {
            index: 0,
            model: false,
            title: '日志记录',
            group: '',
            closable: true,
            footerHide: true,
            spin: false,
            page: 0,
            data: []
        },
        isAdd: true,
        closable: false,
        footerHide: true,
        model: false,
        modelMessage: '任务管理',
        activedIndex: 0,
        taskValidate: {
            taskName: '', groupName: '', interval: '', apiUrl: '', authKey: '', authValue:
                '', describe: '', requestType: ''
        },
        ruleValidate: {
            taskName: [{ required: true, message: '作业名称必填', trigger: 'blur' }],
            groupName: [{ required: true, message: '分组名称必填', trigger: 'blur' }],
            interval: [{ required: true, message: '间隔(Cron)必填', trigger: 'blur' }],
            requestType: [{ required: true, message: '请选择请求方式', trigger: 'change' }],
            apiUrl: [{ required: true, message: 'ApiUrl必填', trigger: 'blur' }]
        },
        taskForm: [
            { name: 'taskName', text: '作业名称', value: '', placeholder: '作业名称与触发器名称默认相同', readOnly: false },
            { name: 'groupName', text: '分组', value: '', placeholder: '分组名称与分组名称默认相同', readOnly: false },
            { name: 'interval', text: '间隔(Cron)', value: '', placeholder: '如10分钟执行一次：0/0 0/10 * * * ? ' },
            { name: 'apiUrl', text: 'ApiUrl', value: '', placeholder: "远程调用接口URL" },
            { name: 'authKey', text: 'header(key)', value: '', placeholder: '请求header验证的Key' },
            { name: 'authValue', text: 'header(value)', value: '', placeholder: '请求header验证的Key' },
            {
                name: 'requestType', text: '请求方式', value: '', onChange: (data,value) => {
                }, placeholder: 'post/get', type: 'select'
            },
            { name: 'describe', text: '描述', value: '', type: 'textarea' }
        ],
        columns: [
            {
                hidden:true,
                title: '测试',
                key: 'id',
                width: 120
            },
            {
                type: 'selection',
                width: 60,
                align: 'center'
            },
            {
                title: '作业名称',
                key: 'taskName',
                width: 150
            }, {
                title: '分组',
                key: 'groupName',
                width: 120
            },
            {
                title: '最后执行时间',
                key: 'lastRunTime',
                width: 170
            }, {
                title: '间隔(Cron)',
                key: 'interval',
                width: 140
            },
            {
                title: '状态',
                key: 'status',
                width: 80,
                render: (h, params) => {
                    var style = { color: 'white', background: 'red', padding: '3px 10px', borderRadius: '4px' };
                    var text = '';
                    switch (params.row.status) {
                        case 0:
                            style.background = '#0acb0a';
                            text = '正常';
                            break;
                        case 1:
                            style.background = '#ed4014';
                            text = '暂停';
                            break;
                        case 2:
                            style.background = '#fc2f2f';
                            text = '完成';
                            break;
                        case 3:
                            style.background = '#607D8B';
                            text = '异常';
                            break;
                        case 4:
                            style.background = '#607D8B';
                            text = '阻塞';
                            break;
                        case 5:
                            style.background = '#607D8B';
                            text = '停止';
                            break;
                        default:
                            style.background = '#f90';
                            text = '不存在';
                            break;
                    }
                    return h('div', [
                        h('Button', {
                            props: {
                                //type: 'error',
                                size: 'small'
                            }, style: style,
                            on: {
                                click: function () {
                                }
                            }
                        }, text)
                    ]);
                }
            },
            {
                title: '描述',
                key: 'describe',
                minWidth:200
            },
            {
                title: 'ApiUrl',
                key: 'apiUrl',
                width: 180
            },
            {
                title: '请求方式',
                key: 'requestType',
                width: 95
            },
            {
                title: '操作',
                key: 'operat',
                width: 100,
                render: (h, params) => {
                    var style = { 'font-size': '12px' };

                    return h('div', [
                        h('i-button', {
                            props: {
                                //type: 'error',
                                size: 'small'

                            }, style: style,
                            on: {
                                click: function () {
                                    $taskVue.getJobRunLog(params);
                                }
                            }
                        }, '执行记录')
                    ]);
                }
            }
        ],
        rows: []
    }, methods: {
        onChange(item, value) {
            if (item.onChange && typeof item.onChange == "function") {
                item.onChange(value, item);
            }
        },
        getColumns: function () {
            var columns = [];
            this.columns.forEach(function (item) {
                if (!item.hidden) {
                    columns.push(item);
                }
            })
            return columns;
        },
        selectRow: function (selection, row) {
            this.select.currentRow = row;
            this.select.rows = selection;
        },
        first: function () {
            $taskVue.log.index = 0;
            $taskVue.log.page = 0;
            $taskVue.log.data = [];
            this.getJobRunLog(null, true);
        },
        next: function () {
            this.getJobRunLog(null, true);
        },
        getJobRunLog: function (params, next) {
            if (!next) {
                //if (!(params.row.taskName === $taskVue.log.title
                //    && params.row.groupName === $taskVue.log.groupName)) {
                $taskVue.log.page = 0;
                $taskVue.log.index = 0;
                $taskVue.log.title = params.row.taskName;
                $taskVue.log.groupName = params.row.groupName;
                $taskVue.log.data = [];
                //  }
            }
            $taskVue.log.model = true;
            //  $taskVue.log.spin = true;
            $taskVue.log.page++;
            $taskVue.ajax("/TaskBackGround/GetRunLog", {
                taskName: $taskVue.log.title, groupName: $taskVue.log.groupName, page: $taskVue.log.page
            }, function (data) {
                if (data.length === 0) {
                    if ($taskVue.log.page >= 1) {
                        $taskVue.log.page--;
                    }
                    if (next) {
                        $taskVue.$Message.success('未查到数据!');
                    }
                    return;
                }
                //  $taskVue.log.spin = false;
                if (next) {
                    $taskVue.log.data = data;
                    // $taskVue.log.data.push(...data);
                } else {
                    $taskVue.log.data = data;
                }
                $taskVue.log.index += $taskVue.log.index ? data.length: 1;
            });
        },
        getTaskValidate: function () {
        },
        add: function () {
            for (var key in this.taskValidate) {
                this.taskValidate[key] = '';
            }
            this.setFormClass(false);
            this.model = true;
        },
        tiggerAction: function (action) {
            if (!this.select.rows.length)
                return $taskVue.$Message.success('请选择作业!');
            this.ajax('/TaskBackGround/' + action,
                this.select.rows[0], function (data) {
                    if (data.status) {
                        $taskVue.refresh(true);
                    }
                    return $taskVue.$Message.success(data.msg);
                });
        },
        update: function () {
            //   this.tiggerAction('update');
            if (!this.select.rows.length)
                return $taskVue.$Message.success('请选择作业!');
            this.model = true;
            //this.taskValidate = this.select.rows.slice(0, 1)[0];
            for (var key in this.select.rows[0]) {
                this.taskValidate[key] = this.select.rows[0][key];
            }
            this.setFormClass(true);
            //this.taskForm[0]
        },
        refresh: function (_init) {
            this.select.currentRow = [];
            this.select.rows = {};
            this.ajax("/TaskBackGround/GetJobs", {}, function (data) {
                data.forEach(function (row) {
                    row.cellClassName = { operat: 'view-log' };
                });
                $taskVue.rows = data;
                if (!_init) {
                    return $taskVue.$Message.success('刷新成功!');
                }
            });
        },
        handleSelectAll(status) {
            this.$refs.selection.selectAll(status);
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (!valid) {
                    return this.$Message.error('数据填写不完整!');
                }
                this.ajax("/TaskBackGround/" + (this.isAdd ? 'add' : 'update'), this.taskValidate, function (data) {
                    $taskVue.$Message.success(data.msg || '保存成功');
                    if (data.status) {
                        $taskVue.model = false;
                        $taskVue.refresh(true);
                    }
                });
            });

        },
        setFormClass: function (readOnly) {
            this.isAdd = !readOnly;
            this.modelMessage = !readOnly ? '新建任务' : '修改任务';
            this.taskForm.forEach(x => {
                if (x.name === "taskName" || x.name === "groupName") {
                    x.readOnly = readOnly;
                }
            });
        },
        ajax: function (url, params, fun) {
            axios({
                method: 'post',
                url: url,
                params: params,
                headers: { 'X-Requested-With':'XMLHttpRequest'}
            }).then(function (response) {
                fun && fun(response.data);
                }).catch(function (error) {
                    if (error.response.status === 401) {
                        return window.location.href = '/home/index';
                    }
                $taskVue.$Message.success('出错啦!');
                console.log(error);
            });
        }
    }, created: function () {
        this.refresh(true);
    }, mounted: function () {
        //$headerVue.activedIndex = 0;
    }
});