HTML基于Vue实现Cron生成器

已于 2023-04-14 13:31:05 修改
阅读量1.4k 收藏 9
点赞数 1
文章标签： html vue.js javascript
于 2023-04-14 10:20:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Devil_Song/article/details/130147354
版权

效果图如下：

在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>CronDemo</title>
    <link rel="stylesheet" href="css/element-ui.css" />
    <script src="js/jquery.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element-ui-2.12.0.js"></script>
</head>
<style type="text/css">
.pop_btn {
    text-align: center;
    margin-top: 20px;
}

.popup-main {
    position: relative;
    margin: 10px auto;
    background: #fff;
    border-radius: 5px;
    font-size: 12px;
    overflow: hidden;
}

.popup-title {
    overflow: hidden;
    line-height: 34px;
    padding-top: 6px;
    background: #f2f2f2;
}

.popup-result {
    box-sizing: border-box;
    line-height: 24px;
    margin: 25px auto;
    padding: 15px 10px 10px;
    border: 1px solid #ccc;
    position: relative;
}

.popup-result .title {
    position: absolute;
    top: -28px;
    left: 50%;
    width: 140px;
    font-size: 14px;
    margin-left: -70px;
    text-align: center;
    line-height: 30px;
    background: #fff;
}

.popup-result table {
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.popup-result table span {
    display: block;
    width: 100%;
    font-family: arial;
    line-height: 30px;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #e8e8e8;
}

.popup-result-scroll {
    font-size: 12px;
    line-height: 24px;
    height: 10em;
    overflow-y: auto;
}
</style>

<body>
    <div id="app">
        <el-input placeholder="请输入内容" v-model="cronValue">
            <template slot="append">
                <button type="button" @click="openCronDialog" class="el-button el-button--primary el-button--medium">
                    <span> 生成表达式 <i class="el-icon-time el-icon--right"></i></span>
                </button>
            </template>
        </el-input>
        <el-dialog title="Cron表达式生成器" :visible="cronDialogVisible" @close="cronDialogVisible = false" top="5vh">
            <div>
                <el-tabs type="border-card" v-model="cronTabValue">
                    <el-tab-pane label="秒" name="second">
                        <el-form>
                            <el-form-item>
                                <el-radio v-model="cron.second.radioValue" :label="1">
                                    秒，允许的通配符[, - * /]
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.second.radioValue" :label="2">
                                    周期从
                                    <el-input-number v-model="cron.second.cycle01" :min="0" :max="58"></el-input-number> -
                                    <el-input-number v-model="cron.second.cycle02" :min="cron.second.cycle01 ? cron.second.cycle01 + 1 : 1" :max="59"></el-input-number>
                                    秒
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.second.radioValue" :label="3">
                                    从
                                    <el-input-number v-model="cron.second.average01" :min="0" :max="58"></el-input-number> 秒开始，每
                                    <el-input-number v-model="cron.second.average02" :min="1" :max="59 - cron.second.average01 || 0"></el-input-number>
                                    秒执行一次
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.second.radioValue" :label="4">
                                    指定
                                    <el-select clearable v-model="cron.second.checkboxList" placeholder="可多选" multiple style="width: 100%">
                                        <el-option v-for="item in 60" :key="item" :value="item - 1">{{
                                            item - 1
                                            }}</el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="分钟" name="min">
                        <el-form>
                            <el-form-item>
                                <el-radio v-model="cron.min.radioValue" :label="1">
                                    分钟，允许的通配符[, - * /]
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.min.radioValue" :label="2">
                                    周期从
                                    <el-input-number v-model="cron.min.cycle01" :min="0" :max="58"></el-input-number> -
                                    <el-input-number v-model="cron.min.cycle02" :min="cron.min.cycle01 ? cron.min.cycle01 + 1 : 1" :max="59"></el-input-number>
                                    分钟
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.min.radioValue" :label="3">
                                    从
                                    <el-input-number v-model="cron.min.average01" :min="0" :max="58"></el-input-number> 分钟开始，每
                                    <el-input-number v-model="cron.min.average02" :min="1" :max="59 - cron.min.average01 || 0"></el-input-number>
                                    分钟执行一次
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.min.radioValue" :label="4">
                                    指定
                                    <el-select clearable v-model="cron.min.checkboxList" placeholder="可多选" multiple style="width: 100%">
                                        <el-option v-for="item in 60" :key="item" :value="item - 1">{{
                                            item - 1
                                            }}</el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="小时" name="hour">
                        <el-form>
                            <el-form-item>
                                <el-radio v-model="cron.hour.radioValue" :label="1">
                                    小时，允许的通配符[, - * /]
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.hour.radioValue" :label="2">
                                    周期从
                                    <el-input-number v-model="cron.hour.cycle01" :min="0" :max="22"></el-input-number> -
                                    <el-input-number v-model="cron.hour.cycle02" :min="cron.hour.cycle01 ? cron.hour.cycle01 + 1 : 1" :max="23"></el-input-number>
                                    小时
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.hour.radioValue" :label="3">
                                    从
                                    <el-input-number v-model="cron.hour.average01" :min="0" :max="22"></el-input-number> 小时开始，每
                                    <el-input-number v-model="cron.hour.average02" :min="1" :max="23 - cron.hour.average01 || 0"></el-input-number>
                                    小时执行一次
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.hour.radioValue" :label="4">
                                    指定
                                    <el-select clearable v-model="cron.hour.checkboxList" placeholder="可多选" multiple style="width: 100%">
                                        <el-option v-for="item in 24" :key="item" :value="item - 1">{{
                                            item - 1
                                            }}</el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="日" name="day">
                        <el-form>
                            <el-form-item>
                                <el-radio v-model="cron.day.radioValue" :label="1">
                                    日，允许的通配符[, - * ? / L W]
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.day.radioValue" :label="2"> 不指定 </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.day.radioValue" :label="3">
                                    周期从
                                    <el-input-number v-model="cron.day.cycle01" :min="1" :max="30"></el-input-number> -
                                    <el-input-number v-model="cron.day.cycle02" :min="cron.day.cycle01 ? cron.day.cycle01 + 1 : 2" :max="31"></el-input-number>
                                    日
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.day.radioValue" :label="4">
                                    从
                                    <el-input-number v-model="cron.day.average01" :min="1" :max="30"></el-input-number> 号开始，每
                                    <el-input-number v-model="cron.day.average02" :min="1" :max="31 - cron.day.average01 || 1"></el-input-number>
                                    日执行一次
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.day.radioValue" :label="5">
                                    每月
                                    <el-input-number v-model="cron.day.workday" :min="1" :max="31"></el-input-number>
                                    号最近的那个工作日
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.day.radioValue" :label="6"> 本月最后一天 </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.day.radioValue" :label="7">
                                    指定
                                    <el-select clearable v-model="cron.day.checkboxList" placeholder="可多选" multiple style="width: 100%">
                                        <el-option v-for="item in 31" :key="item" :value="item">{{
                                            item
                                            }}</el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="月" name="month">
                        <el-form>
                            <el-form-item>
                                <el-radio v-model="cron.month.radioValue" :label="1">
                                    月，允许的通配符[, - * /]
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.month.radioValue" :label="2">
                                    周期从
                                    <el-input-number v-model="cron.month.cycle01" :min="1" :max="11"></el-input-number> -
                                    <el-input-number v-model="cron.month.cycle02" :min="cron.month.cycle01 ? cron.month.cycle01 + 1 : 2" :max="12"></el-input-number>
                                    月
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.month.radioValue" :label="3">
                                    从
                                    <el-input-number v-model="cron.month.average01" :min="1" :max="11"></el-input-number> 月开始，每
                                    <el-input-number v-model="cron.month.average02" :min="1" :max="12 - cron.month.average01 || 0"></el-input-number>
                                    月月执行一次
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.month.radioValue" :label="4">
                                    指定
                                    <el-select clearable v-model="cron.month.checkboxList" placeholder="可多选" multiple style="width: 100%">
                                        <el-option v-for="item in 12" :key="item" :value="item">{{
                                            item
                                            }}</el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="周" name="week">
                        <el-form>
                            <el-form-item>
                                <el-radio v-model="cron.week.radioValue" :label="1">
                                    周，允许的通配符[, - * ? / L #]
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.week.radioValue" :label="2"> 不指定 </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.week.radioValue" :label="3">
                                    周期从星期
                                    <el-select clearable v-model="cron.week.cycle01">
                                        <el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="item.key" :disabled="item.key === 1">{{ item.value }}</el-option>
                                    </el-select>
                                    -
                                    <el-select clearable v-model="cron.week.cycle02">
                                        <el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="item.key" :disabled="item.key < cron.week.cycle01 && item.key !== 1">{{ item.value }}</el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.week.radioValue" :label="4">
                                    第
                                    <el-input-number v-model="cron.week.average01" :min="1" :max="4"></el-input-number> 周的星期
                                    <el-select clearable v-model="cron.week.average02">
                                        <el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="item.key">{{ item.value }}</el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.week.radioValue" :label="5">
                                    本月最后一个星期
                                    <el-select clearable v-model="cron.week.weekday">
                                        <el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="item.key">{{ item.value }}</el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio v-model="cron.week.radioValue" :label="6">
                                    指定
                                    <el-select clearable v-model="cron.week.checkboxList" placeholder="可多选" multiple style="width: 100%">
                                        <el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="String(item.key)">{{ item.value }}</el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="年" name="year">
                        <el-form>
                            <el-form-item>
                                <el-radio :label="1" v-model="cron.year.radioValue">
                                    不填，允许的通配符[, - * /]
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio :label="2" v-model="cron.year.radioValue"> 每年 </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio :label="3" v-model="cron.year.radioValue">
                                    周期从
                                    <el-input-number v-model="cron.year.cycle01" :min="cron.year.fullYear" :max="2098"></el-input-number> -
                                    <el-input-number v-model="cron.year.cycle02" :min="cron.year.cycle01 ? cron.year.cycle01 + 1 : cron.year.fullYear + 1" :max="2099"></el-input-number>
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio :label="4" v-model="cron.year.radioValue">
                                    从
                                    <el-input-number v-model="cron.year.average01" :min="cron.year.fullYear" :max="2098"></el-input-number>
                                    年开始，每
                                    <el-input-number v-model="cron.year.average02" :min="1" :max="2099 - cron.year.average01 || cron.year.fullYear"></el-input-number>
                                    年执行一次
                                </el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-radio :label="5" v-model="cron.year.radioValue">
                                    指定
                                    <el-select clearable v-model="cron.year.checkboxList" placeholder="可多选" multiple>
                                        <el-option v-for="item in 9" :key="item" :value="item - 1 + cron.year.fullYear" :label="item - 1 + cron.year.fullYear"></el-option>
                                    </el-select>
                                </el-radio>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
                <div class="popup-main">
                    <div class="popup-result">
                        <p class="title">时间表达式</p>
                        <table>
                            <thead>
                                <th v-for="item of cron.cronTabTitles" width="40" :key="item">{{item}}</th>
                                <th>Cron 表达式</th>
                            </thead>
                            <tbody>
                                <td>
                                    <span>{{cron.cronValueObj.second}}</span>
                                </td>
                                <td>
                                    <span>{{cron.cronValueObj.min}}</span>
                                </td>
                                <td>
                                    <span>{{cron.cronValueObj.hour}}</span>
                                </td>
                                <td>
                                    <span>{{cron.cronValueObj.day}}</span>
                                </td>
                                <td>
                                    <span>{{cron.cronValueObj.month}}</span>
                                </td>
                                <td>
                                    <span>{{cron.cronValueObj.week}}</span>
                                </td>
                                <td>
                                    <span>{{cron.cronValueObj.year}}</span>
                                </td>
                                <td>
                                    <span>{{cronValueString}}</span>
                                </td>
                            </tbody>
                        </table>
                    </div>
                    <CrontabResult :ex="cronValueString"></CrontabResult>
                    <div class="pop_btn">
                        <el-button type="primary" @click="confirmCron">确定</el-button>
                        <el-button type="warning" @click="clearCron">重置</el-button>
                        <el-button @click="closeCronDialog">取消</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</body>
<script type="text/javascript">
new Vue({
    el: '#app',
    data() {
        return {
            cronDialogVisible: false,
            cronTabValue: 'second',
            cronValue: '0/15 4-11 5-10 6/8 4-7 * 2027-2034',
            cron: {
                cronTabTitles: ["秒", "分钟", "小时", "日", "月", "周", "年"],
                cronValueObj: {
                    second: "*",
                    min: "*",
                    hour: "*",
                    day: "*",
                    month: "*",
                    week: "?",
                    year: ""
                },
                second: {
                    radioValue: 1,
                    cycle01: 1,
                    cycle02: 2,
                    average01: 0,
                    average02: 1,
                    checkboxList: [],
                    checkNum: null,
                },
                min: {
                    radioValue: 1,
                    cycle01: 1,
                    cycle02: 2,
                    average01: 0,
                    average02: 1,
                    checkboxList: [],
                    checkNum: null,
                },
                hour: {
                    radioValue: 1,
                    cycle01: 0,
                    cycle02: 1,
                    average01: 0,
                    average02: 1,
                    checkboxList: [],
                    checkNum: null,
                },
                day: {
                    radioValue: 1,
                    workday: 1,
                    cycle01: 1,
                    cycle02: 2,
                    average01: 1,
                    average02: 1,
                    checkboxList: [],
                    checkNum: null,
                },
                month: {
                    radioValue: 1,
                    cycle01: 1,
                    cycle02: 2,
                    average01: 1,
                    average02: 1,
                    checkboxList: [],
                    checkNum: null,
                },
                week: {
                    radioValue: 2,
                    weekday: 2,
                    cycle01: 2,
                    cycle02: 3,
                    average01: 1,
                    average02: 2,
                    checkboxList: [],
                    weekList: [{
                            key: 2,
                            value: "星期一"
                        },
                        {
                            key: 3,
                            value: "星期二"
                        },
                        {
                            key: 4,
                            value: "星期三"
                        },
                        {
                            key: 5,
                            value: "星期四"
                        },
                        {
                            key: 6,
                            value: "星期五"
                        },
                        {
                            key: 7,
                            value: "星期六"
                        },
                        {
                            key: 1,
                            value: "星期日"
                        }
                    ],
                    checkNum: null,
                },
                year: {
                    fullYear: 0,
                    radioValue: 1,
                    cycle01: 0,
                    cycle02: 0,
                    average01: 0,
                    average02: 1,
                    checkboxList: [],
                    checkNum: null,
                },
            },
        }
    },
    created: function() {

    },
    mounted: function() {
        var that = this;
        that.cron.year.fullYear = Number(new Date().getFullYear());
        that.cron.year.cycle01 = that.cron.year.fullYear;
        that.cron.year.average01 = that.cron.year.fullYear;
    },
    computed: {
        cronValueString: function() {
            var that = this;
            let obj = that.cron.cronValueObj;
            let str =
                obj.second +
                " " +
                obj.min +
                " " +
                obj.hour +
                " " +
                obj.day +
                " " +
                obj.month +
                " " +
                obj.week +
                (obj.year == "" ? "" : " " + obj.year);
            return str;
        },
        //========================秒========================
        secondCycleTotal: function() {
            var that = this;
            const cycle01 = that.checkNumber(that.cron.second.cycle01, 0, 58);
            const cycle02 = that.checkNumber(
                that.cron.second.cycle02,
                cycle01 ? cycle01 + 1 : 1,
                59
            );
            return cycle01 + "-" + cycle02;
        },
        secondAverageTotal: function() {
            var that = this;
            const average01 = that.checkNumber(that.cron.second.average01, 0, 58);
            const average02 = that.checkNumber(that.cron.second.average02, 1, 59 - average01 || 0);
            return average01 + "/" + average02;
        },
        secondCheckboxString: function() {
            var that = this;
            let str = that.cron.second.checkboxList.join();
            return str == "" ? "*" : str;
        },
        //========================分========================
        minCycleTotal: function() {
            var that = this;
            const cycle01 = that.checkNumber(that.cron.min.cycle01, 0, 58);
            const cycle02 = that.checkNumber(
                that.cron.min.cycle02,
                cycle01 ? cycle01 + 1 : 1,
                59
            );
            return cycle01 + "-" + cycle02;
        },
        minAverageTotal: function() {
            var that = this;
            const average01 = that.checkNumber(that.cron.min.average01, 0, 58);
            const average02 = that.checkNumber(that.cron.min.average02, 1, 59 - average01 || 0);
            return average01 + "/" + average02;
        },
        minCheckboxString: function() {
            var that = this;
            let str = that.cron.min.checkboxList.join();
            return str == "" ? "*" : str;
        },
        //========================时========================
        hourCycleTotal: function() {
            var that = this;
            const cycle01 = that.checkNumber(that.cron.hour.cycle01, 0, 22);
            const cycle02 = that.checkNumber(
                that.cron.hour.cycle02,
                cycle01 ? cycle01 + 1 : 1,
                23
            );
            return cycle01 + "-" + cycle02;
        },
        hourAverageTotal: function() {
            var that = this;
            const average01 = that.checkNumber(that.cron.hour.average01, 0, 22);
            const average02 = that.checkNumber(that.cron.hour.average02, 1, 23 - average01 || 0);
            return average01 + "/" + average02;
        },
        hourCheckboxString: function() {
            var that = this;
            let str = that.cron.hour.checkboxList.join();
            return str == "" ? "*" : str;
        },
        //========================日========================
        dayCycleTotal: function() {
            var that = this;
            const cycle01 = that.checkNumber(that.cron.day.cycle01, 1, 30);
            const cycle02 = that.checkNumber(
                that.cron.day.cycle02,
                cycle01 ? cycle01 + 1 : 2,
                31,
                31
            );
            return cycle01 + "-" + cycle02;
        },
        dayAverageTotal: function() {
            var that = this;
            const average01 = that.checkNumber(that.cron.day.average01, 1, 30);
            const average02 = that.checkNumber(that.cron.day.average02, 1, 31 - average01 || 0);
            return average01 + "/" + average02;
        },
        dayWorkdayCheck: function() {
            var that = this;
            const workday = that.checkNumber(that.cron.day.workday, 1, 31);
            return workday;
        },
        dayCheckboxString: function() {
            var that = this;
            let str = that.cron.day.checkboxList.join();
            return str == "" ? "*" : str;
        },
        //========================月========================
        monthCycleTotal: function() {
            var that = this;
            const cycle01 = that.checkNumber(that.cron.month.cycle01, 1, 11);
            const cycle02 = that.checkNumber(
                that.cron.month.cycle02,
                cycle01 ? cycle01 + 1 : 2,
                12
            );
            return cycle01 + "-" + cycle02;
        },
        monthAverageTotal: function() {
            var that = this;
            const average01 = that.checkNumber(that.cron.month.average01, 1, 11);
            const average02 = that.checkNumber(that.cron.month.average02, 1, 12 - average01 || 0);
            return average01 + "/" + average02;
        },
        monthCheckboxString: function() {
            var that = this;
            let str = that.cron.month.checkboxList.join();
            return str == "" ? "*" : str;
        },
        //========================周========================
        weekCycleTotal: function() {
            var that = this;
            that.cron.week.cycle01 = that.checkNumber(that.cron.week.cycle01, 1, 7);
            that.cron.week.cycle02 = that.checkNumber(that.cron.week.cycle02, 1, 7);
            return that.cron.week.cycle01 + "-" + that.cron.week.cycle02;
        },
        weekAverageTotal: function() {
            var that = this;
            that.cron.week.average01 = that.checkNumber(that.cron.week.average01, 1, 4);
            that.cron.week.average02 = that.checkNumber(that.cron.week.average02, 1, 7);
            return that.cron.week.average02 + "#" + that.cron.week.average01;
        },
        weekWeekdayCheck: function() {
            var that = this;
            that.cron.week.weekday = that.checkNumber(that.cron.week.weekday, 1, 7);
            return that.cron.week.weekday;
        },
        weekCheckboxString: function() {
            var that = this;
            let str = that.cron.week.checkboxList.join();
            return str == "" ? "*" : str;
        },
        //========================年========================
        yearCycleTotal: function() {
            var that = this;
            const cycle01 = that.checkNumber(that.cron.year.cycle01, that.cron.year.fullYear, 2098);
            const cycle02 = that.checkNumber(
                that.cron.year.cycle02,
                cycle01 ? cycle01 + 1 : that.cron.year.fullYear + 1,
                2099
            );
            return cycle01 + "-" + cycle02;
        },
        yearAverageTotal: function() {
            var that = this;
            const average01 = that.checkNumber(that.cron.year.average01, that.cron.year.fullYear, 2098);
            const average02 = that.checkNumber(
                that.cron.year.average02,
                1,
                2099 - average01 || that.cron.year.fullYear
            );
            return average01 + "/" + average02;
        },
        yearCheckboxString: function() {
            var that = this;
            let str = that.cron.year.checkboxList.join();
            return str;
        }
    },
    watch: {
        //========================秒========================
        "$data.cron.second.radioValue": "secondRadioChange",
        secondCycleTotal: "secondCycleChange",
        secondAverageTotal: "secondAverageChange",
        secondCheckboxString: "secondCheckboxChange",
        //========================分========================
        "$data.cron.min.radioValue": "minRadioChange",
        minCycleTotal: "minCycleChange",
        minAverageTotal: "minAverageChange",
        minCheckboxString: "minCheckboxChange",
        //========================时========================
        "$data.cron.hour.radioValue": "hourRadioChange",
        hourCycleTotal: "hourCycleChange",
        hourAverageTotal: "hourAverageChange",
        hourCheckboxString: "hourCheckboxChange",
        //========================日========================
        "$data.cron.day.radioValue": "dayRadioChange",
        dayCycleTotal: "dayCycleChange",
        dayAverageTotal: "dayAverageChange",
        dayWorkdayCheck: "dayWorkdayChange",
        dayCheckboxString: "dayCheckboxChange",
        //========================月========================
        "$data.cron.month.radioValue": "monthRadioChange",
        monthCycleTotal: "monthCycleChange",
        monthAverageTotal: "monthAverageChange",
        monthCheckboxString: "monthCheckboxChange",
        //========================周========================
        "$data.cron.week.radioValue": "weekRadioChange",
        weekCycleTotal: "weekCycleChange",
        weekAverageTotal: "weekAverageChange",
        weekWeekdayCheck: "weekWeekdayChange",
        weekCheckboxString: "weekCheckboxChange",
        //========================年========================
        "$data.cron.year.radioValue": "yearRadioChange",
        yearCycleTotal: "yearCycleChange",
        yearAverageTotal: "yearAverageChange",
        yearCheckboxString: "yearCheckboxChange"
    },
    methods: {
        //========================秒========================
        secondRadioChange: function() {
            var that = this;
            switch (that.cron.second.radioValue) {
                case 1:
                    that.cron.cronValueObj.second = "*";
                    break;
                case 2:
                    that.cron.cronValueObj.second = that.secondCycleTotal;
                    break;
                case 3:
                    that.cron.cronValueObj.second = that.secondAverageTotal;
                    break;
                case 4:
                    that.cron.cronValueObj.second = that.secondCheckboxString;
                    break;
            }
        },
        secondCycleChange: function() {
            var that = this;
            if (that.cron.second.radioValue == "2") {
                that.cron.cronValueObj.second = that.secondCycleTotal;
            }
        },
        secondAverageChange: function() {
            var that = this;
            if (that.cron.second.radioValue == "3") {
                that.cron.cronValueObj.second = that.secondAverageTotal;
            }
        },
        secondCheckboxChange: function() {
            var that = this;
            if (that.cron.second.radioValue == "4") {
                that.cron.cronValueObj.second = that.secondCheckboxString;
            }
        },
        //========================分========================
        minRadioChange: function() {
            var that = this;
            switch (that.cron.min.radioValue) {
                case 1:
                    that.cron.cronValueObj.min = "*";
                    break;
                case 2:
                    that.cron.cronValueObj.min = that.minCycleTotal;
                    break;
                case 3:
                    that.cron.cronValueObj.min = that.minAverageTotal;
                    break;
                case 4:
                    that.cron.cronValueObj.min = that.minCheckboxString;
                    break;
            }
        },
        minCycleChange: function() {
            var that = this;
            if (that.cron.min.radioValue == "2") {
                that.cron.cronValueObj.min = that.minCycleTotal;
            }
        },
        minAverageChange: function() {
            var that = this;
            if (that.cron.min.radioValue == "3") {
                that.cron.cronValueObj.min = that.minAverageTotal;
            }
        },
        minCheckboxChange: function() {
            var that = this;
            if (that.cron.min.radioValue == "4") {
                that.cron.cronValueObj.min = that.minCheckboxString;
            }
        },
        //========================时========================
        hourRadioChange: function() {
            var that = this;
            switch (that.cron.hour.radioValue) {
                case 1:
                    that.cron.cronValueObj.hour = "*";
                    break;
                case 2:
                    that.cron.cronValueObj.hour = that.hourCycleTotal;
                    break;
                case 3:
                    that.cron.cronValueObj.hour = that.hourAverageTotal;
                    break;
                case 4:
                    that.cron.cronValueObj.hour = that.hourCheckboxString;
                    break;
            }
        },
        hourCycleChange: function() {
            var that = this;
            if (that.cron.hour.radioValue == "2") {
                that.cron.cronValueObj.hour = that.hourCycleTotal;
            }
        },
        hourAverageChange: function() {
            var that = this;
            if (that.cron.hour.radioValue == "3") {
                that.cron.cronValueObj.hour = that.hourAverageTotal;
            }
        },
        hourCheckboxChange: function() {
            var that = this;
            if (that.cron.hour.radioValue == "4") {
                that.cron.cronValueObj.hour = that.hourCheckboxString;
            }
        },
        //========================日========================
        dayRadioChange: function() {
            var that = this;
            if (that.cron.day.radioValue !== 2 && that.cron.cronValueObj.week !== "?") {
                that.cron.cronValueObj.week = "?";
            }
            switch (that.cron.day.radioValue) {
                case 1:
                    that.cron.cronValueObj.day = "*";
                    break;
                case 2:
                    that.cron.cronValueObj.day = "?";
                    break;
                case 3:
                    that.cron.cronValueObj.day = that.dayCycleTotal;
                    break;
                case 4:
                    that.cron.cronValueObj.day = that.dayAverageTotal;
                    break;
                case 5:
                    that.cron.cronValueObj.day = that.dayWorkdayCheck + "W";
                    break;
                case 6:
                    that.cron.cronValueObj.day = "L";
                    break;
                case 7:
                    that.cron.cronValueObj.day = that.dayCheckboxString;
                    break;
            }
        },
        dayCycleChange: function() {
            var that = this;
            if (that.cron.day.radioValue == "3") {
                that.cron.cronValueObj.day = that.dayCycleTotal;
            }
        },
        dayAverageChange: function() {
            var that = this;
            if (that.cron.day.radioValue == "4") {
                that.cron.cronValueObj.day = that.dayAverageTotal;
            }
        },
        dayWorkdayChange: function() {
            var that = this;
            if (that.cron.day.radioValue == "5") {
                that.cron.cronValueObj.day = that.dayWorkdayCheck + "W";
            }
        },
        dayCheckboxChange: function() {
            var that = this;
            if (that.cron.day.radioValue == "7") {
                that.cron.cronValueObj.day = that.dayCheckboxString;
            }
        },
        //========================月========================
        monthRadioChange: function() {
            var that = this;
            switch (that.cron.month.radioValue) {
                case 1:
                    that.cron.cronValueObj.month = "*";
                    break;
                case 2:
                    that.cron.cronValueObj.month = that.monthCycleTotal;
                    break;
                case 3:
                    that.cron.cronValueObj.month = that.monthAverageTotal;
                    break;
                case 4:
                    that.cron.cronValueObj.month = that.monthCheckboxString;
                    break;
            }
        },
        monthCycleChange: function() {
            var that = this;
            if (that.cron.month.radioValue == "2") {
                that.cron.cronValueObj.month = that.monthCycleTotal;
            }
        },
        monthAverageChange: function() {
            var that = this;
            if (that.cron.month.radioValue == "3") {
                that.cron.cronValueObj.month = that.monthAverageTotal;
            }
        },
        monthCheckboxChange: function() {
            var that = this;
            if (that.cron.month.radioValue == "4") {
                that.cron.cronValueObj.month = that.monthCheckboxString;
            }
        },
        //========================周========================
        weekRadioChange: function() {
            var that = this;
            if (that.cron.week.radioValue !== 2 && that.cron.cronValueObj.day !== "?") {
                that.cron.cronValueObj.day = "?";
            }
            switch (that.cron.week.radioValue) {
                case 1:
                    that.cron.cronValueObj.week = "*";
                    break;
                case 2:
                    that.cron.cronValueObj.week = "?";
                    break;
                case 3:
                    that.cron.cronValueObj.week = that.weekCycleTotal;
                    break;
                case 4:
                    that.cron.cronValueObj.week = that.weekAverageTotal;
                    break;
                case 5:
                    that.cron.cronValueObj.week = that.weekWeekdayCheck + "L";
                    break;
                case 6:
                    that.cron.cronValueObj.week = that.weekCheckboxString;
                    break;
            }
        },
        weekCycleChange: function() {
            var that = this;
            if (that.cron.week.radioValue == "3") {
                that.cron.cronValueObj.week = that.weekCycleTotal;
            }
        },
        weekAverageChange: function() {
            var that = this;
            if (that.cron.week.radioValue == "4") {
                that.cron.cronValueObj.week = that.weekAverageTotal;
            }
        },
        weekWeekdayChange: function() {
            var that = this;
            if (that.cron.week.radioValue == "5") {
                that.cron.cronValueObj.week = that.weekWeekdayCheck + "L";
            }
        },
        weekCheckboxChange: function() {
            var that = this;
            if (that.cron.week.radioValue == "6") {
                that.cron.cronValueObj.week = that.weekCheckboxString;
            }
        },
        //========================年========================
        yearRadioChange: function() {
            var that = this;
            switch (that.cron.year.radioValue) {
                case 1:
                    that.cron.cronValueObj.year = "";
                    break;
                case 2:
                    that.cron.cronValueObj.year = "*";
                    break;
                case 3:
                    that.cron.cronValueObj.year = that.yearCycleTotal;
                    break;
                case 4:
                    that.cron.cronValueObj.year = that.yearAverageTotal;
                    break;
                case 5:
                    that.cron.cronValueObj.year = that.yearCheckboxString;
                    break;
            }
        },
        yearCycleChange: function() {
            var that = this;
            if (that.cron.year.radioValue == "3") {
                that.cron.cronValueObj.year = that.yearCycleTotal;
            }
        },
        yearAverageChange: function() {
            var that = this;
            if (that.cron.year.radioValue == "4") {
                that.cron.cronValueObj.year = that.yearAverageTotal;
            }
        },
        yearCheckboxChange: function() {
            var that = this;
            if (that.cron.year.radioValue == "5") {
                that.cron.cronValueObj.year = that.yearCheckboxString;
            }
        },
        checkNumber: function(value, minLimit, maxLimit) {
            value = Math.floor(value);
            if (value < minLimit) {
                value = minLimit;
            } else if (value > maxLimit) {
                value = maxLimit;
            }
            return value;
        },
        resolveExp: function() {
            var that = this;
            if (that.cronValue) {
                let arr = that.cronValue.split(" ");
                if (arr.length >= 6) {
                    //6 位以上是合法表达式
                    let obj = {
                        second: arr[0],
                        min: arr[1],
                        hour: arr[2],
                        day: arr[3],
                        month: arr[4],
                        week: arr[5],
                        year: arr[6] ? arr[6] : ""
                    };
                    that.cron.cronValueObj = {
                        ...obj
                    };
                    for (var i in obj) {
                        if (obj[i]) that.changeRadio(i, obj[i]);
                    }
                }
            } else {
                that.clearCron();
            }
        },
        changeRadio: function(name, value) {
            let that = this;
            let allCronType = ["second", "min", "hour", "day", "month", "week", "year"];
            let arr = ["second", "min", "hour", "month"];
            let insValue;

            if (!allCronType.includes(name)) return;

            if (arr.includes(name)) {
                if (value === "*") {
                    insValue = 1;
                } else if (value.indexOf("-") > -1) {
                    let indexArr = value.split("-");
                    isNaN(indexArr[0]) ?
                        (that.cron[name].cycle01 = 0) :
                        (that.cron[name].cycle01 = indexArr[0]);
                    that.cron[name].cycle02 = indexArr[1];
                    insValue = 2;
                } else if (value.indexOf("/") > -1) {
                    let indexArr = value.split("/");
                    isNaN(indexArr[0]) ?
                        (that.cron[name].average01 = 0) :
                        (that.cron[name].average01 = indexArr[0]);
                    that.cron[name].average02 = indexArr[1];
                    insValue = 3;
                } else {
                    insValue = 4;
                    that.cron[name].checkboxList = value.split(",");
                }
            } else if (name == "day") {
                if (value === "*") {
                    insValue = 1;
                } else if (value == "?") {
                    insValue = 2;
                } else if (value.indexOf("-") > -1) {
                    let indexArr = value.split("-");
                    isNaN(indexArr[0]) ?
                        (that.cron[name].cycle01 = 0) :
                        (that.cron[name].cycle01 = indexArr[0]);
                    that.cron[name].cycle02 = indexArr[1];
                    insValue = 3;
                } else if (value.indexOf("/") > -1) {
                    let indexArr = value.split("/");
                    isNaN(indexArr[0]) ?
                        (that.cron[name].average01 = 0) :
                        (that.cron[name].average01 = indexArr[0]);
                    that.cron[name].average02 = indexArr[1];
                    insValue = 4;
                } else if (value.indexOf("W") > -1) {
                    let indexArr = value.split("W");
                    isNaN(indexArr[0]) ?
                        (that.cron[name].workday = 0) :
                        (that.cron[name].workday = indexArr[0]);
                    insValue = 5;
                } else if (value === "L") {
                    insValue = 6;
                } else {
                    that.cron[name].checkboxList = value.split(",");
                    insValue = 7;
                }
            } else if (name == "week") {
                if (value === "*") {
                    insValue = 1;
                } else if (value == "?") {
                    insValue = 2;
                } else if (value.indexOf("-") > -1) {
                    let indexArr = value.split("-");
                    isNaN(indexArr[0]) ?
                        (that.cron[name].cycle01 = 0) :
                        (that.cron[name].cycle01 = indexArr[0]);
                    tthat.cron[name].cycle02 = indexArr[1];
                    insValue = 3;
                } else if (value.indexOf("#") > -1) {
                    let indexArr = value.split("#");
                    isNaN(indexArr[0]) ?
                        (that.cron[name].average01 = 1) :
                        (that.cron[name].average01 = indexArr[0]);
                    that.cron[name].average02 = indexArr[1];
                    insValue = 4;
                } else if (value.indexOf("L") > -1) {
                    let indexArr = value.split("L");
                    isNaN(indexArr[0]) ?
                        (that.cron[name].weekday = 1) :
                        (that.cron[name].weekday = indexArr[0]);
                    insValue = 5;
                } else {
                    that.cron[name].checkboxList = value.split(",");
                    insValue = 6;
                }
            } else if (name == "year") {
                if (value == "") {
                    insValue = 1;
                } else if (value == "*") {
                    insValue = 2;
                } else if (value.indexOf("-") > -1) {
                    insValue = 3;
                } else if (value.indexOf("/") > -1) {
                    insValue = 4;
                } else {
                    that.cron[name].checkboxList = value.split(",");
                    insValue = 5;
                }
            }
            that.cron[name].radioValue = insValue;
        },
        openCronDialog: function() {
            var that = this;
            that.cronTabValue = 'second';
            that.resolveExp();
            that.cronDialogVisible = true;
        },
        closeCronDialog: function() {
            var that = this;
            that.cronDialogVisible = false;
        },
        confirmCron: function() {
            var that = this;
            that.cronValue = that.cronValueString;
            that.cronDialogVisible = false;
        },
        clearCron: function() {
            var that = this;
            that.cron.cronValueObj = {
                second: "*",
                min: "*",
                hour: "*",
                day: "*",
                month: "*",
                week: "?",
                year: ""
            };
            that.cron.second.radioValue = 1;
            that.cron.min.radioValue = 1;
            that.cron.hour.radioValue = 1;
            that.cron.day.radioValue = 1;
            that.cron.month.radioValue = 1;
            that.cron.week.radioValue = 2;
            that.cron.year.radioValue = 1;
        },
    }
});
</script>

</html>

代码下载 提取码：18dx

@Murphy
关注
vue版corn表达式生成器
10-20
目前该插件有2个参数，isShow用于控制是否初始化插件，initialData用于回显数据到插件上。
【实战】React 必会第三方插件 —— Cron 表达式生成器（qnn-react-cron）
程序边界
03-22 9799
qnn-react-cron 可以看做 react-cron-antd 的升级版（具体“渊源”可见文档），现有功能如下： - 🎉 全面支持 cron：秒、分、时、日、月、周、年 - 🎉 日及周条件互斥，自动改变响应值 - 🎉 支持反解析 cron 表达式到 UI - 🎉 可结合此组件与 Antd 的下拉及输入组件封装成下拉输入框 - 🎉 国际化支持 - 🎉 TypeScript 支持
Vue Cron Generator 使用教程
gitblog_00033的博客
08-25 958
Vue Cron Generator 使用教程 项目地址:https://gitcode.com/gh_mirrors/vu/vue-cron-generator 项目介绍 vue-cron-generator 是一个基于 Vue.js 和 Element-UI 构建的在线 Cron 表达式生成器。它提供了一个直观的界面，帮助用户轻松生成和预览 Cron 表达式。该项目支持多种语言，并且可以集成到...
cron表达式前端生成工具，html实现，可直接用
11-15
cron表达式前端生成工具，html实现，方便用于web项目当中
vue[分享一个cron表达式生成插件]
墨水白云的博客
09-15 5574
目标 前端进行各种操作之后，最终生成两个cron表达式，分别为开始时间和结束时间的cron表达式，且结束时间表达式的时间必须在开始时间之后，并且符合cron表达式的规则。 任务类型有：一次性任务 和 循环任务两种 一次性任务只需要选择任务周期，即任务的开始时间和结束时间，其范围可以是秒段，分段、时段、日段、月段、年段。 循环任务需要选择周期类型，分别为周期类型：秒、分、时、日、周、月、年。根据不同的选择要默认生成一些自带的内容 ...
vue+element 创建Cron表达式生成器组件 [带最近五次执行时间]
x2826436174的博客
04-18 4825
目录 介绍 ​使用 结语 介绍 这个组件是我在开源项目ruoyi开源项目中拆下来的轮子 效果图： 使用 gitee地址 使用和其他说明gitee里有提到
探索高效Cron表达式生成器：vue-cron-generator
最新发布
gitblog_00159的博客
08-28 292
探索高效Cron表达式生成器：vue-cron-generator vue-cron-generator项目地址:https://gitcode.com/gh_mirrors/vu/vue-cron-generator 在现代软件开发中，Cron表达式是调度任务的核心工具。然而，手动编写Cron表达式不仅耗时，还容易出错。为了解决这一痛点，vue-cron-generator项目应运而生，它提供...
推荐使用：Vue-Cron —— 简易CRON表达式生成器
gitblog_00057的博客
08-09 749
推荐使用：Vue-Cron —— 简易CRON表达式生成器 项目地址:https://gitcode.com/gh_mirrors/vu/vue-cron Vue-Cron 是一款专为Vue.js和Element-UI设计的高效、易用的CRON表达式生成插件。它能帮助开发者轻松创建和管理定时任务策略，提供直观的界面和完善的国际化支持。 项目介绍 Vue-Cron 提供了一个简洁的交互界面，让用户能...
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
Vue-Cron是一款基于Vue.js开发的时间周期（Cron）表达式组件，用于在前端应用程序中创建、编辑和处理定时任务。Vue-Cron旨在提供一种直观的用户界面，让用户能够通过图形化的方式设置复杂的Cron表达式，从而实现定时...
vue3+ElementPlus cron组件
04-09
Vue3 + ElementPlus Cron 组件是前端开发中的一个强大工具，它允许开发者在Web应用中实现复杂的定时任务调度功能。这个组件基于Vue3框架，并利用了ElementPlus UI库的组件和设计风格，为用户提供了友好的界面和丰富...
Cron表达式生成器.zip可反向解析
11-30
通过这个生成器，用户可以直观地设置任务执行的时间规则，并得到相应的Cron表达式，反之亦然，如果已经有了一个Cron表达式，该工具也能帮助解析其含义。 这个生成器的使用方式非常简单，只需要运行压缩包中的`...
Cron表达式生成器html源码
08-11
在线Cron表达式生成器html源码 quartz任务调度 Cron表达式 在线生成
Cron前端生成工具
08-01
Cron前端生成工具，与Cron在线生成工具相同，同http://cron.qqe2.com/
cron表达式生成_html
04-09
cron表达式纯html版,不好使你就削我.实在是没有分可以用了..万不得已
cron表达式生成器（web版）
05-25
此表达式生成器，可以直接打开，可以应用到自己的web页面
vue-cron:这是一个cron表达式ui组件
05-02
vue-cron 这是一个cron表达式生成插件,基于vue与element-ui实现 依赖 Vue 2.0.0+ element-ui 2.0.0+ 安装方式 npm install vue-cron 引入方式 //前置配置 import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); //全局引入 import VueCron from 'vue-cron' Vue.use(VueCron);//使用方式：<vueCron></vueCron> //局部引入 import {cron} from 'vue-cron' export default { template: '<cron>',
cron（动态生成cron表达式）
09-05
这个Vue组件可能提供了交互式的UI，让用户通过选择器或者输入框设定各个字段，然后生成对应的cron表达式字符串。这样，开发者可以更直观地配置定时任务，而无需手动编写复杂的字符串。同时，由于没有特别提到组件...
由Vue.js和Element-ui实现的Cron Generator
cuk5340的博客
07-30 2238
Vue Cron生成器 (vue-cron-generator) a project using vue,element-ui to generate cron expression. 使用vue，element-ui生成cron表达式的项目。 View Demo 查看演示 View Github 查看Github 用途（示例） (Use(Example)) Install depend...
vue-cron-builder一个相对简易的cron表达式生成插件UI管理javascript
qq_35641191的博客
08-18 289
vue-cron-builder一个相对简易的cron表达式生成插件UI管理javascript
vue cron 表达式生成器
09-14
您可以使用`vue-cron-generator`来生成cron表达式。这是一个基于Vue.js的开源项目，提供了一个简单易用的UI界面来生成cron表达式。 您可以通过以下步骤在您的Vue项目中使用`vue-cron-generator`： 1. 在终端中使用npm或yarn安装`vue-cron-generator`: ``` npm install vue-cron-generator ``` 或者 ``` yarn add vue-cron-generator ``` 2. 在您的Vue组件中，导入`vue-cron-generator`并注册为一个局部组件： ```javascript import CronGenerator from 'vue-cron-generator'; export default { components: { CronGenerator, }, // ... }; ``` 3. 在模板中使用`vue-cron-generator`组件： ```html <template> <div> <cron-generator v-model="cronExpression" /> </div> </template> ``` 4. 在您的Vue实例中，定义一个`cronExpression`属性来接收生成的cron表达式： ```javascript export default { data() { return { cronExpression: '', }; }, // ... }; ``` 现在，当您在页面上使用`vue-cron-generator`组件时，用户将能够通过UI界面选择合适的选项来生成cron表达式，并且该表达式将被双向绑定到`cronExpression`属性。 请注意，这只是一个简单的示例，您可能需要根据您的具体需求进行适当的配置和自定义。 希望这个回答能够帮到您！如果您有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值