qimall/backend/modules/admin/views/task/edit.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" class="box-card" body-style="background-color: #f3f3f3;padding: 20px 0 0;" class="box-card" v-loading="cardLoading">
        <div slot="header">
            <div flex="cross:center box:first">
                <div><span @click="$navigate({r:'admin/task/index'})" class="text">定时任务列表</span>/添加定时任务</div>
            </div>
        </div>

        <div class="form-body">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="mini" label-width="150px" class="demo-ruleForm">
                <el-form-item label="脚本类型" prop="type">
                    <el-radio v-model="ruleForm.type" :label="1">shell脚本</el-radio>
                    <el-radio v-model="ruleForm.type" :label="2">站内脚本</el-radio>
                    <el-radio v-model="ruleForm.type" :label="3">访问URL</el-radio>
                    <p class="tips-text">任务类型包含以下部分：Shell脚本、站内脚本、访问URL</p>
                </el-form-item>
                <el-form-item label="任务名称" prop="name">
                    <el-input style="width: 500px;" maxlength="40" show-word-limit v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="任务执行规则" prop="rule">
                    <el-input style="width: 500px;" v-model="ruleForm.rule"></el-input>
                    <p class="tips-text">crontab格式，支持秒、分、时、日、月、周时间定义</p>
<pre class="tips-text">
*  0     1    2    3    4    5
*  *     *    *    *    *    *
*  |     |    |    |    |    +----- day of week (0 - 6) (Sunday=0)
*  |     |    |    |    +----- month (1 - 12)
*  |     |    |    +------- day of month (1 - 31)
*  |     |    +--------- hour (0 - 23)
*  |     +----------- min (0 - 59)
*  +------------- sec (0-59)
</pre>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="是否报警" prop="is_warning">
                    <el-switch v-model="ruleForm.is_warning" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="执行命令" prop="command" v-if="ruleForm.type == 1 || ruleForm.type == 2">
                    <el-input type="textarea" style="width: 500px;" rows="4" v-model="ruleForm.command" maxlength="500" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="url地址" prop="command" v-if="ruleForm.type == 3">
                    <el-input style="width: 500px;" type="url" v-model="ruleForm.command"></el-input>
                    <p class="tips-text">地址以http或https开头</p>
                </el-form-item>
            </el-form>
            <div class="bottom-btns">
                <el-button size="mini" type="primary" @click="submit()">保存</el-button>
            </div>
        </div>
    </el-card>

   
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                btnLoading:false,
                cardLoading: false,
                ruleForm: {
                    id: 0,
                    name:'',
                    type:1,
                    status:1,
                    is_warning:0,
                    command:'',
                    rule:''
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入任务名称',
                        trigger: 'blur'
                    }, ],
                    rule: [{
                        required: true,
                        message: '任务执行规则不能为空',
                        trigger: 'blur'
                    }, ],
                    command: [{
                        required: true,
                        message: '执行命令不能为空',
                        trigger: 'blur'
                    }, ],
                }
            };
        },
        created() {
            
        },
        mounted: function() {
            let id = getQuery('id');
            if (id) {
                this.getCrontabInfo(id);
            }
        },
        methods: {
            submit() {
                this.$refs['ruleForm'].validate((valid) => {
                    let self = this;
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'admin/task/edit'
                            },
                            method: 'post',
                            data: self.ruleForm,
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'admin/task/index'
                                })
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getCrontabInfo(id) {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'admin/task/edit',
                        id:id,
                    },
                    method: 'get'
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        self.ruleForm = e.data.data;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.cardLoading = false;
                    self.$message.error(e);
                });
            }
        }
    });
</script>