新增cron组件。替换数据源和数据建模

src/components/vue3cron/language/cn.js

@@ -0,0 +1,54 @@
+export default {
+    Seconds:{
+        name:'秒',
+        every:'每一秒钟',
+        interval:['每隔','秒执行 从','秒开始'],
+        specific:'具体秒数(可多选)',
+        cycle:['周期从','到','秒']
+    },
+    Minutes:{
+        name:'分',
+        every:'每一分钟',
+        interval:['每隔','分执行 从','分开始'],
+        specific:'具体分钟数(可多选)',
+        cycle:['周期从','到','分']
+    },
+    Hours:{
+        name:'时',
+        every:'每一小时',
+        interval:['每隔','小时执行 从','小时开始'],
+        specific:'具体小时数(可多选)',
+        cycle:['周期从','到','小时']
+    },
+    Day:{
+        name:'天',
+        every:'每一天',
+        intervalWeek:['每隔','周执行 从','开始'],
+        intervalDay:['每隔','天执行 从','天开始'],
+        specificWeek:'具体星期几(可多选)',
+        specificDay:'具体天数(可多选)',
+        lastDay:'在这个月的最后一天',
+        lastWeekday:'在这个月的最后一个工作日',
+        lastWeek:['在这个月的最后一个'],
+        beforeEndMonth:['在本月底前','天'],
+        nearestWeekday:['最近的工作日（周一至周五）至本月','日'],
+        someWeekday:['在这个月的第','个'],
+    },
+    Week:['天','一','二','三','四','五','六'].map(val=>'星期'+val),
+    Month:{
+        name:'月',
+        every:'每一月',
+        interval:['每隔','月执行 从','月开始'],
+        specific:'具体月数(可多选)',
+        cycle:['从','到','月之间的每个月']
+    },
+    Year:{
+        name:'年',
+        every:'每一年',
+        interval:['每隔','年执行 从','年开始'],
+        specific:'具体年份(可多选)',
+        cycle:['从','到','年之间的每一年']
+    },
+    Save:'保存',
+    Close:'关闭'
+}

src/components/vue3cron/language/en.js

@@ -0,0 +1,54 @@
+export default {
+    Seconds:{
+        name:'Seconds',
+        every:'Every second',
+        interval:['Every','second(s) starting at second'],
+        specific:'Specific second (choose one or many)',
+        cycle:['Every second between second','and second']
+    },
+    Minutes:{
+        name:'Minutes',
+        every:'Every minute',
+        interval:['Every','minute(s) starting at minute'],
+        specific:'Specific minute (choose one or many)',
+        cycle:['Every minute between minute','and minute']
+    },
+    Hours:{
+        name:'Hours',
+        every:'Every hour',
+        interval:['Every','hour(s) starting at hour'],
+        specific:'Specific hour (choose one or many)',
+        cycle:['Every hour between hour','and hour']
+    },
+    Day:{
+        name:'Day',
+        every:'Every day',
+        intervalWeek:['Every','day(s) starting on'],
+        intervalDay:['Every','day(s) starting at the','of the month'],
+        specificWeek:'Specific day of week (choose one or many)',
+        specificDay:'Specific day of month (choose one or many)',
+        lastDay:'On the last day of the month',
+        lastWeekday:'On the last weekday of the month',
+        lastWeek:['On the last',' of the month'],
+        beforeEndMonth:['day(s) before the end of the month'],
+        nearestWeekday:['Nearest weekday (Monday to Friday) to the','of the month'],
+        someWeekday:['On the','of the month'],
+    },
+    Week:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
+    Month:{
+        name:'Month',
+        every:'Every month',
+        interval:['Every','month(s) starting in'],
+        specific:'Specific month (choose one or many)',
+        cycle:['Every month between','and']
+    },
+    Year:{
+        name:'Year',
+        every:'Any year',
+        interval:['Every','year(s) starting in'],
+        specific:'Specific year (choose one or many)',
+        cycle:['Every year between','and']
+    },
+    Save:'Save',
+    Close:'Close'
+}

src/components/vue3cron/language/index.js

@@ -0,0 +1,9 @@
+import en from './en'
+import cn from './cn'
+import pt from './pt_br'
+
+export default {
+    en,
+    cn,
+    pt
+}

src/components/vue3cron/language/pt_br.js

@@ -0,0 +1,54 @@
+export default {
+    Seconds:{
+        name:'Segundos',
+        every:'A cada segundo',
+        interval:['A cada','segundo(s) começando no segundo'],
+        specific:'Segundo específico (escolha um ou muitos)',
+        cycle:['A Cada segundo entre segundos','e segundo']
+    },
+    Minutes:{
+        name:'Minutos',
+        every:'A cada minuto',
+        interval:['A cada','minuto(s) começando no minuto'],
+        specific:'Minuto específico (escolha um ou muitos)',
+        cycle:['A cada minuto entre minutos','e minutos']
+    },
+    Hours:{
+        name:'Horas',
+        every:'A cada hora',
+        interval:['A cada','hora(s) começando na hora'],
+        specific:'Hora específica (escolha uma ou muitas)',
+        cycle:['A cada hora entre horas','e horas']
+    },
+    Day:{
+        name:'Dia',
+        every:'A cada dia',
+        intervalWeek:['A cada','dia(s) começando em'],
+        intervalDay:['A cada','dia(s) começando no','do mês'],
+        specificWeek:'Dia específico da semana (escolha um ou vários)',
+        specificDay:'Dia específico do mês (escolha um ou vários)',
+        lastDay:'No último dia do mês',
+        lastWeekday:'No último dia da semana do mês',
+        lastWeek:['No último',' do mês'],
+        beforeEndMonth:['dia(s) antes do final do mês'],
+        nearestWeekday:['Dia da semana mais próximo (segunda a sexta) ao ','do mês'],
+        someWeekday:['No','do mês'],
+    },
+    Week:['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sábado'],
+    Month:{
+        name:'Mês',
+        every:'A cada mês',
+        interval:['A cada','mês(es) começando em'],
+        specific:'Mês específico (escolha um ou muitos)',
+        cycle:['Todo mês entre','e']
+    },
+    Year:{
+        name:'Ano',
+        every:'Qualquer ano',
+        interval:['A cada','ano(s) começando em'],
+        specific:'Ano específico (escolha um ou muitos)',
+        cycle:['Todo ano entre','e']
+    },
+    Save:'Salvar',
+    Close:'Fechar'
+}

src/components/vue3cron/vue3cron.vue

@@ -0,0 +1,833 @@
+
+<template>
+    <div class="vue3-cron-div">
+        <!-- <el-button class="language" type="text" @click="state.language = state.language === 'en' ? 'cn' : 'en'">{{
+            state.language === 'en' ? 'cn' : 'en'
+        }}</el-button> -->
+        <el-tabs type="border-card">
+            <el-tab-pane>
+                <template #label>
+                    <span><i class="el-icon-date"></i> {{ state.text.Seconds.name }}</span>
+                </template>
+                <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
+                    <el-row>
+                        <el-radio v-model="state.second.cronEvery" label="1">{{ state.text.Seconds.every }}</el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.second.cronEvery" label="2"
+                            >{{ state.text.Seconds.interval[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.second.incrementIncrement"
+                                :min="1"
+                                :max="60"
+                            ></el-input-number>
+                            {{ state.text.Seconds.interval[1] || '' }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.second.incrementStart"
+                                :min="0"
+                                :max="59"
+                            ></el-input-number>
+                            {{ state.text.Seconds.interval[2] || '' }}
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio class="long" v-model="state.second.cronEvery" label="3"
+                            >{{ state.text.Seconds.specific }}
+                            <el-select size="small" multiple v-model="state.second.specificSpecific">
+                                <el-option v-for="(val, index) in 60" :key="index" :value="val - 1">{{
+                                    val - 1
+                                }}</el-option>
+                            </el-select>
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.second.cronEvery" label="4"
+                            >{{ state.text.Seconds.cycle[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.second.rangeStart"
+                                :min="1"
+                                :max="60"
+                            ></el-input-number>
+                            {{ state.text.Seconds.cycle[1] || '' }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.second.rangeEnd"
+                                :min="0"
+                                :max="59"
+                            ></el-input-number>
+                            {{ state.text.Seconds.cycle[2] || '' }}
+                        </el-radio>
+                    </el-row>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane>
+                <template #label>
+                    <span><i class="el-icon-date"></i> {{ state.text.Minutes.name }}</span>
+                </template>
+                <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
+                    <el-row>
+                        <el-radio v-model="state.minute.cronEvery" label="1">{{ state.text.Minutes.every }}</el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.minute.cronEvery" label="2"
+                            >{{ state.text.Minutes.interval[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.minute.incrementIncrement"
+                                :min="1"
+                                :max="60"
+                            ></el-input-number>
+                            {{ state.text.Minutes.interval[1] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.minute.incrementStart"
+                                :min="0"
+                                :max="59"
+                            ></el-input-number>
+                            {{ state.text.Minutes.interval[2] || '' }}
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio class="long" v-model="state.minute.cronEvery" label="3"
+                            >{{ state.text.Minutes.specific }}
+                            <el-select size="small" multiple v-model="state.minute.specificSpecific">
+                                <el-option v-for="(val, index) in 60" :key="index" :value="val - 1">{{
+                                    val - 1
+                                }}</el-option>
+                            </el-select>
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.minute.cronEvery" label="4"
+                            >{{ state.text.Minutes.cycle[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.minute.rangeStart"
+                                :min="1"
+                                :max="60"
+                            ></el-input-number>
+                            {{ state.text.Minutes.cycle[1] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.minute.rangeEnd"
+                                :min="0"
+                                :max="59"
+                            ></el-input-number>
+                            {{ state.text.Minutes.cycle[2] }}
+                        </el-radio>
+                    </el-row>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane>
+                <template #label>
+                    <span><i class="el-icon-date"></i> {{ state.text.Hours.name }}</span>
+                </template>
+                <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
+                    <el-row>
+                        <el-radio v-model="state.hour.cronEvery" label="1">{{ state.text.Hours.every }}</el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.hour.cronEvery" label="2"
+                            >{{ state.text.Hours.interval[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.hour.incrementIncrement"
+                                :min="0"
+                                :max="23"
+                            ></el-input-number>
+                            {{ state.text.Hours.interval[1] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.hour.incrementStart"
+                                :min="0"
+                                :max="23"
+                            ></el-input-number>
+                            {{ state.text.Hours.interval[2] }}
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio class="long" v-model="state.hour.cronEvery" label="3"
+                            >{{ state.text.Hours.specific }}
+                            <el-select size="small" multiple v-model="state.hour.specificSpecific">
+                                <el-option v-for="(val, index) in 24" :key="index" :value="val - 1">{{
+                                    val - 1
+                                }}</el-option>
+                            </el-select>
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.hour.cronEvery" label="4"
+                            >{{ state.text.Hours.cycle[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.hour.rangeStart"
+                                :min="0"
+                                :max="23"
+                            ></el-input-number>
+                            {{ state.text.Hours.cycle[1] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.hour.rangeEnd"
+                                :min="0"
+                                :max="23"
+                            ></el-input-number>
+                            {{ state.text.Hours.cycle[2] }}
+                        </el-radio>
+                    </el-row>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane>
+                <template #label>
+                    <span><i class="el-icon-date"></i> {{ state.text.Day.name }}</span>
+                </template>
+                <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
+                    <el-row>
+                        <el-radio v-model="state.day.cronEvery" label="1">{{ state.text.Day.every }}</el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.day.cronEvery" label="2"
+                            >{{ state.text.Day.intervalWeek[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.week.incrementIncrement"
+                                :min="1"
+                                :max="7"
+                            ></el-input-number>
+                            {{ state.text.Day.intervalWeek[1] }}
+                            <el-select size="small" v-model="state.week.incrementStart">
+                                <el-option
+                                    v-for="(val, index) in 7"
+                                    :key="index"
+                                    :label="state.text.Week[val - 1]"
+                                    :value="val"
+                                ></el-option>
+                            </el-select>
+                            {{ state.text.Day.intervalWeek[2] }}
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.day.cronEvery" label="3"
+                            >{{ state.text.Day.intervalDay[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.day.incrementIncrement"
+                                :min="1"
+                                :max="31"
+                            ></el-input-number>
+                            {{ state.text.Day.intervalDay[1] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.day.incrementStart"
+                                :min="1"
+                                :max="31"
+                            ></el-input-number>
+                            {{ state.text.Day.intervalDay[2] }}
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio class="long" v-model="state.day.cronEvery" label="4"
+                            >{{ state.text.Day.specificWeek }}
+                            <el-select size="small" multiple v-model="state.week.specificSpecific">
+                                <el-option
+                                    v-for="(val, index) in 7"
+                                    :key="index"
+                                    :label="state.text.Week[val - 1]"
+                                    :value="['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][val - 1]"
+                                ></el-option>
+                            </el-select>
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio class="long" v-model="state.day.cronEvery" label="5"
+                            >{{ state.text.Day.specificDay }}
+                            <el-select size="small" multiple v-model="state.day.specificSpecific">
+                                <el-option v-for="(val, index) in 31" :key="index" :value="val">{{ val }}</el-option>
+                            </el-select>
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.day.cronEvery" label="6">{{ state.text.Day.lastDay }}</el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.day.cronEvery" label="7">{{ state.text.Day.lastWeekday }}</el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.day.cronEvery" label="8"
+                            >{{ state.text.Day.lastWeek[0] }}
+                            <el-select size="small" v-model="state.day.cronLastSpecificDomDay">
+                                <el-option
+                                    v-for="(val, index) in 7"
+                                    :key="index"
+                                    :label="state.text.Week[val - 1]"
+                                    :value="val"
+                                ></el-option>
+                            </el-select>
+                            {{ state.text.Day.lastWeek[1] || '' }}
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.day.cronEvery" label="9">
+                            <el-input-number
+                                size="small"
+                                v-model="state.day.cronDaysBeforeEomMinus"
+                                :min="1"
+                                :max="31"
+                            ></el-input-number>
+                            {{ state.text.Day.beforeEndMonth[0] }}
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.day.cronEvery" label="10"
+                            >{{ state.text.Day.nearestWeekday[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.day.cronDaysNearestWeekday"
+                                :min="1"
+                                :max="31"
+                            ></el-input-number>
+                            {{ state.text.Day.nearestWeekday[1] }}
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.day.cronEvery" label="11"
+                            >{{ state.text.Day.someWeekday[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.week.cronNthDayNth"
+                                :min="1"
+                                :max="5"
+                            ></el-input-number>
+                            <el-select size="small" v-model="state.week.cronNthDayDay">
+                                <el-option
+                                    v-for="(val, index) in 7"
+                                    :key="index"
+                                    :label="state.text.Week[val - 1]"
+                                    :value="val"
+                                ></el-option>
+                            </el-select>
+                            {{ state.text.Day.someWeekday[1] }}
+                        </el-radio>
+                    </el-row>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane>
+                <template #label>
+                    <span><i class="el-icon-date"></i> {{ state.text.Month.name }}</span>
+                </template>
+                <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
+                    <el-row>
+                        <el-radio v-model="state.month.cronEvery" label="1">{{ state.text.Month.every }}</el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.month.cronEvery" label="2"
+                            >{{ state.text.Month.interval[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.month.incrementIncrement"
+                                :min="0"
+                                :max="12"
+                            ></el-input-number>
+                            {{ state.text.Month.interval[1] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.month.incrementStart"
+                                :min="0"
+                                :max="12"
+                            ></el-input-number>
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio class="long" v-model="state.month.cronEvery" label="3"
+                            >{{ state.text.Month.specific }}
+                            <el-select size="small" multiple v-model="state.month.specificSpecific">
+                                <el-option
+                                    v-for="(val, index) in 12"
+                                    :key="index"
+                                    :label="val"
+                                    :value="val"
+                                ></el-option>
+                            </el-select>
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.month.cronEvery" label="4"
+                            >{{ state.text.Month.cycle[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.month.rangeStart"
+                                :min="1"
+                                :max="12"
+                            ></el-input-number>
+                            {{ state.text.Month.cycle[1] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.month.rangeEnd"
+                                :min="1"
+                                :max="12"
+                            ></el-input-number>
+                        </el-radio>
+                    </el-row>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane>
+                <template #label>
+                    <span><i class="el-icon-date"></i> {{ state.text.Year.name }}</span>
+                </template>
+                <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
+                    <el-row>
+                        <el-radio v-model="state.year.cronEvery" label="1">{{ state.text.Year.every }}</el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.year.cronEvery" label="2"
+                            >{{ state.text.Year.interval[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.year.incrementIncrement"
+                                :min="1"
+                                :max="99"
+                            ></el-input-number>
+                            {{ state.text.Year.interval[1] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.year.incrementStart"
+                                :min="2018"
+                                :max="2118"
+                            ></el-input-number>
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio class="long" v-model="state.year.cronEvery" label="3"
+                            >{{ state.text.Year.specific }}
+                            <el-select size="small" filterable multiple v-model="state.year.specificSpecific">
+                                <el-option
+                                    v-for="(val, index) in 100"
+                                    :key="index"
+                                    :label="2017 + val"
+                                    :value="2017 + val"
+                                ></el-option>
+                            </el-select>
+                        </el-radio>
+                    </el-row>
+                    <el-row>
+                        <el-radio v-model="state.year.cronEvery" label="4"
+                            >{{ state.text.Year.cycle[0] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.year.rangeStart"
+                                :min="2018"
+                                :max="2118"
+                            ></el-input-number>
+                            {{ state.text.Year.cycle[1] }}
+                            <el-input-number
+                                size="small"
+                                v-model="state.year.rangeEnd"
+                                :min="2018"
+                                :max="2118"
+                            ></el-input-number>
+                        </el-radio>
+                    </el-row>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+        <div class="bottom">
+            <div class="value" style="margin: 10px;">
+                <span> cron预览: </span>
+                <el-tag type="primary">
+                    {{ state.cron }}
+                </el-tag>
+            </div>
+            <div class="buttonDiv" style="text-align: right;">
+                <el-button type="primary" size="mini" @click.stop="handleChange">{{ state.text.Save }}</el-button>
+                <el-button type="primary" size="mini" @click="close">{{ state.text.Close }}</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Language from './language';
+import { reactive, computed, toRefs, defineComponent } from 'vue';
+export default defineComponent({
+    name: 'vue3Cron',
+    props: {
+        cronValue: {},
+        type: '',
+        i18n: {},
+        maxHeight: {}
+    },
+    setup(props, { emit }) {
+        const { i18n } = toRefs(props);
+        const state = reactive({
+            language: i18n.value,
+            second: {
+                cronEvery: '1',
+                incrementStart: 3,
+                incrementIncrement: 5,
+                rangeStart: 0,
+                rangeEnd: 0,
+                specificSpecific: []
+            },
+            minute: {
+                cronEvery: '1',
+                incrementStart: 3,
+                incrementIncrement: 5,
+                rangeStart: 0,
+                rangeEnd: 0,
+                specificSpecific: []
+            },
+            hour: {
+                cronEvery: '1',
+                incrementStart: 3,
+                incrementIncrement: 5,
+                rangeStart: 0,
+                rangeEnd: 0,
+                specificSpecific: []
+            },
+            day: {
+                cronEvery: '1',
+                incrementStart: 1,
+                incrementIncrement: 1,
+                rangeStart: 0,
+                rangeEnd: 0,
+                specificSpecific: [],
+                cronLastSpecificDomDay: 1,
+                cronDaysBeforeEomMinus: 0,
+                cronDaysNearestWeekday: 0
+            },
+            week: {
+                cronEvery: '1',
+                incrementStart: 1,
+                incrementIncrement: 1,
+                specificSpecific: [],
+                cronNthDayDay: 1,
+                cronNthDayNth: 1
+            },
+            month: {
+                cronEvery: '1',
+                incrementStart: 3,
+                incrementIncrement: 5,
+                rangeStart: 0,
+                rangeEnd: 0,
+                specificSpecific: []
+            },
+            year: {
+                cronEvery: '1',
+                incrementStart: 2017,
+                incrementIncrement: 1,
+                rangeStart: 0,
+                rangeEnd: 0,
+                specificSpecific: []
+            },
+            output: {
+                second: '',
+                minute: '',
+                hour: '',
+                day: '',
+                month: '',
+                Week: '',
+                year: ''
+            },
+            text: computed(() => Language[state.language || 'cn']),
+            secondsText: computed(() => {
+                let seconds = '';
+                let cronEvery = state.second.cronEvery;
+                switch (cronEvery.toString()) {
+                    case '1':
+                        seconds = '*';
+                        break;
+                    case '2':
+                        seconds = state.second.incrementStart + '/' + state.second.incrementIncrement;
+                        break;
+                    case '3':
+                        state.second.specificSpecific.map(val => {
+                            seconds += val + ',';
+                        });
+                        seconds = seconds.slice(0, -1);
+                        break;
+                    case '4':
+                        seconds = state.second.rangeStart + '-' + state.second.rangeEnd;
+                        break;
+                }
+                console.log(seconds);
+                return seconds;
+            }),
+            minutesText: computed(() => {
+                let minutes = '';
+                let cronEvery = state.minute.cronEvery;
+                switch (cronEvery.toString()) {
+                    case '1':
+                        minutes = '*';
+                        break;
+                    case '2':
+                        minutes = state.minute.incrementStart + '/' + state.minute.incrementIncrement;
+                        break;
+                    case '3':
+                        state.minute.specificSpecific.map(val => {
+                            minutes += val + ',';
+                        });
+                        minutes = minutes.slice(0, -1);
+                        break;
+                    case '4':
+                        minutes = state.minute.rangeStart + '-' + state.minute.rangeEnd;
+                        break;
+                }
+                return minutes;
+            }),
+            hoursText: computed(() => {
+                let hours = '';
+                let cronEvery = state.hour.cronEvery;
+                switch (cronEvery.toString()) {
+                    case '1':
+                        hours = '*';
+                        break;
+                    case '2':
+                        hours = state.hour.incrementStart + '/' + state.hour.incrementIncrement;
+                        break;
+                    case '3':
+                        state.hour.specificSpecific.map(val => {
+                            hours += val + ',';
+                        });
+                        hours = hours.slice(0, -1);
+                        break;
+                    case '4':
+                        hours = state.hour.rangeStart + '-' + state.hour.rangeEnd;
+                        break;
+                }
+                return hours;
+            }),
+            daysText: computed(() => {
+                let days = '';
+                let cronEvery = state.day.cronEvery;
+                switch (cronEvery.toString()) {
+                    case '1':
+                        break;
+                    case '2':
+                    case '4':
+                    case '11':
+                        days = '?';
+                        break;
+                    case '3':
+                        days = state.day.incrementStart + '/' + state.day.incrementIncrement;
+                        break;
+                    case '5':
+                        state.day.specificSpecific.map(val => {
+                            days += val + ',';
+                        });
+                        days = days.slice(0, -1);
+                        break;
+                    case '6':
+                        days = 'L';
+                        break;
+                    case '7':
+                        days = 'LW';
+                        break;
+                    case '8':
+                        days = state.day.cronLastSpecificDomDay + 'L';
+                        break;
+                    case '9':
+                        days = 'L-' + state.day.cronDaysBeforeEomMinus;
+                        break;
+                    case '10':
+                        days = state.day.cronDaysNearestWeekday + 'W';
+                        break;
+                }
+                return days;
+            }),
+            weeksText: computed(() => {
+                let weeks = '';
+                let cronEvery = state.day.cronEvery;
+                switch (cronEvery.toString()) {
+                    case '1':
+                    case '3':
+                    case '5':
+                        weeks = '?';
+                        break;
+                    case '2':
+                        weeks = state.week.incrementStart + '/' + state.week.incrementIncrement;
+                        break;
+                    case '4':
+                        state.week.specificSpecific.map(val => {
+                            weeks += val + ',';
+                        });
+                        weeks = weeks.slice(0, -1);
+                        break;
+                    case '6':
+                    case '7':
+                    case '8':
+                    case '9':
+                    case '10':
+                        weeks = '?';
+                        break;
+                    case '11':
+                        weeks = state.week.cronNthDayDay + '#' + state.week.cronNthDayNth;
+                        break;
+                }
+                return weeks;
+            }),
+            monthsText: computed(() => {
+                let months = '';
+                let cronEvery = state.month.cronEvery;
+                switch (cronEvery.toString()) {
+                    case '1':
+                        months = '*';
+                        break;
+                    case '2':
+                        months = state.month.incrementStart + '/' + state.month.incrementIncrement;
+                        break;
+                    case '3':
+                        state.month.specificSpecific.map(val => {
+                            months += val + ',';
+                        });
+                        months = months.slice(0, -1);
+                        break;
+                    case '4':
+                        months = state.month.rangeStart + '-' + state.month.rangeEnd;
+                        break;
+                }
+                return months;
+            }),
+            yearsText: computed(() => {
+                let years = '';
+                let cronEvery = state.year.cronEvery;
+                switch (cronEvery.toString()) {
+                    case '1':
+                        years = '*';
+                        break;
+                    case '2':
+                        years = state.year.incrementStart + '/' + state.year.incrementIncrement;
+                        break;
+                    case '3':
+                        state.year.specificSpecific.map(val => {
+                            years += val + ',';
+                        });
+                        years = years.slice(0, -1);
+                        break;
+                    case '4':
+                        years = state.year.rangeStart + '-' + state.year.rangeEnd;
+                        break;
+                }
+                return years;
+            }),
+            cron: computed(() => {
+
+                let cron =`${state.secondsText || '*'} ${state.minutesText || '*'} ${state.hoursText || '*'} ${
+                    state.daysText || '*'
+                } ${state.monthsText || '*'} ${state.weeksText || '?'} ${state.yearsText || '*'}`;
+               
+                return cron
+            })
+        });
+        const getValue = () => {
+            return state.cron;
+        };
+        const close = () => {
+            emit('close');
+        };
+        const handleChange = () => {
+            emit('handlelisten', {
+                    cron:state.cron,
+                    type:props.type
+                });
+            close();
+        };
+        const rest = data => {
+            for (let i in data) {
+                if (data[i] instanceof Object) {
+                    this.rest(data[i]);
+                } else {
+                    switch (typeof data[i]) {
+                        case 'object':
+                            data[i] = [];
+                            break;
+                        case 'string':
+                            data[i] = '';
+                            break;
+                    }
+                }
+            }
+        };
+        return {
+            state,
+            getValue,
+            close,
+            handleChange,
+            rest
+        };
+    }
+});
+</script>
+<style >
+.vue3-cron-div {
+    .el-input-number__decrease,
+    .el-input-number__increase {
+        top: 2px !important;
+    }
+    .language {
+        position: absolute;
+        right: 25px;
+        z-index: 1;
+    }
+    .el-tabs {
+        box-shadow: none;
+    }
+    .tabBody {
+        overflow: auto;
+        .el-row {
+            margin: 20px 0;
+            .long {
+                .el-select {
+                    width: 350px;
+                }
+            }
+            .el-input-number {
+                width: 110px;
+            }
+        }
+    }
+    .myScroller {
+        &::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+            height: 1px;
+        }
+        &::-webkit-scrollbar-thumb {
+            /*滚动条里面小方块*/
+            border-radius: 10px;
+            background-color: skyblue;
+            background-image: -webkit-linear-gradient(
+                45deg,
+                rgba(255, 255, 255, 0.2) 25%,
+                transparent 25%,
+                transparent 50%,
+                rgba(255, 255, 255, 0.2) 50%,
+                rgba(255, 255, 255, 0.2) 75%,
+                transparent 75%,
+                transparent
+            );
+        }
+        &::-webkit-scrollbar-track {
+            /*滚动条里面轨道*/
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            background: #ededed;
+            border-radius: 10px;
+        }
+    }
+    .bottom {
+        width: 100%;
+        margin-top: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        .value {
+            float: left;
+            font-size: 14px;
+            vertical-align: middle;
+            span:nth-child(1) {
+                color: red;
+            }
+        }
+    }
+}
+</style>

src/views/system/datahub/modeling/component/edit.vue

@@ -19,14 +19,20 @@
 				</el-form-item> -->
 
 				<el-form-item label="定时请求">
+			
+					<div style="display:flex">
 							<el-input v-model="ruleForm.cronExpression" placeholder="请输入cron表达式" />
-							<ul style="list-style: none;">
+							<el-button type="success"  @click="showCron('ruleForm')" style="margin-left: 5px;">设置</el-button>
+
+						</div>
+							<!-- <el-input v-model="ruleForm.cronExpression" placeholder="请输入cron表达式" /> -->
+							<!-- <ul style="list-style: none;">
 								<li><el-icon><ele-WarningFilled /></el-icon> */5 * * * * ? : 每隔5秒执行一次</li>
 								<li><el-icon><ele-WarningFilled /></el-icon> 20 */1 * * * ? : 每隔1分钟执行一次</li>
 								<li><el-icon><ele-WarningFilled /></el-icon> 30 0 23 * * ? : 每天23点执行一次</li>
 								<li><el-icon><ele-WarningFilled /></el-icon> 0 0 1 * * ? : 每天凌晨1点执行一次</li>
 								<li><el-icon><ele-WarningFilled /></el-icon> 0 0 1 1 * ? : 每月1号凌晨1点执行一次</li>
-							</ul>
+							</ul> -->
 						</el-form-item>
 
 				<el-form-item label="描述" prop="desc">
@@ -55,6 +61,10 @@
 				</span>
 			</template>
 		</el-dialog>
+
+		<el-dialog v-model="cronShow" title="选择Cron规则" width="60%">
+			<vue3cron @handlelisten="handlelisten" :type="crontype" @close="cronclose"></vue3cron>
+		</el-dialog>
 	</div>
 </template>
 
@@ -62,6 +72,7 @@
 import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
 import api from '/@/api/datahub';
 import { ElMessage } from 'element-plus';
+import vue3cron from '/@/components/vue3cron/vue3cron.vue';
 
 interface RuleFormState {
 	id?: number;
@@ -78,6 +89,7 @@ interface DicState {
 
 export default defineComponent({
 	name: 'Edit',
+	components: { vue3cron },
 
 	setup(prop, { emit }) {
 		const formRef = ref<HTMLElement | null>(null);
@@ -85,6 +97,8 @@ export default defineComponent({
 			isShowDialog: false,
 			zidianData:[],
 			cityData:[],
+			cronShow:false,
+			crontype:'',
 			unitData: [
 				{
 					label: '秒',
@@ -183,8 +197,22 @@ export default defineComponent({
 				}
 			});
 		};
+		const handlelisten = (e) => {
+			state.ruleForm.cronExpression=e.cron
+		};
+		const showCron=(type)=>{
+				state.crontype=type
+				state.cronShow=true;
+
+		};
+		const cronclose=()=>{
+			state.cronShow=false;
+		}
 
 		return {
+			handlelisten,
+			showCron,
+			cronclose,
 			openDialog,
 			closeDialog,
 			onCancel,

src/views/system/datahub/source/component/edit.vue

@@ -55,8 +55,12 @@
 					</el-form-item>
 
 					<el-form-item label="定时请求">
-						<el-input v-model="config.cronExpression" placeholder="请输入cron表达式" />
-						<ul style="list-style: none">
+						<div style="display:flex">
+							<el-input v-model="config.cronExpression" placeholder="请输入cron表达式" />
+							<el-button type="success"  @click="showCron('config')" style="    margin-left: 5px;">设置</el-button>
+
+						</div>
+						<!-- <ul style="list-style: none">
 							<li>
 								<el-icon><ele-WarningFilled /></el-icon> */5 * * * * ? : 每隔5秒执行一次
 							</li>
@@ -72,7 +76,7 @@
 							<li>
 								<el-icon><ele-WarningFilled /></el-icon> 0 0 1 1 * ? : 每月1号凌晨1点执行一次
 							</li>
-						</ul>
+						</ul> -->
 					</el-form-item>
 
 					<!-- <el-form-item label="更新时间">
@@ -128,36 +132,7 @@
 							</el-option>
 						</el-select>
 					</el-form-item>
-					<!-- <el-form-item label="主机地址" >
-							<el-input v-model="devconfig.host" placeholder="请输入主机地址"   />
-						</el-form-item>
-
-						<el-form-item label="端口号">
-							<el-input v-model="devconfig.port" placeholder="请输入端口号" />
-						</el-form-item>
-
-						<el-form-item label="用户名">
-							<el-input v-model="devconfig.user" placeholder="请输入用户名" />
-						</el-form-item>
-
-						<el-form-item label="密码">
-							<el-input v-model="devconfig.password" placeholder="请输入密码" />
-						</el-form-item>
-
-						<el-form-item label="数据库名称">
-							<el-input v-model="devconfig.dbname" placeholder="请输入数据库名称" />
-						</el-form-item>
-
-						<el-form-item label="表名称">
-							<el-input v-model="devconfig.table" placeholder="请输入表名称" />
-						</el-form-item>
-
-						<el-form-item label="更新时间">
-							<el-input v-model="devconfig.interval" placeholder="请输入更新时间" class="w-35" />
-							<el-select v-model="devconfig.intervalUnit" placeholder="请选择单位">
-								<el-option v-for="item in unitData" :key="item.value" :label="item.label" :value="item.value" />
-							</el-select>
-						</el-form-item> -->
+			
 				</div>
 
 				<div v-if="ruleForm.from == 2">
@@ -203,14 +178,13 @@
 						</el-form-item>
 
 						<el-form-item label="任务表达式">
-							<el-input v-model="tabconfig.cronExpression" placeholder="请输入cron任务表达式" />
-							<ul style="list-style: none;">
-								<li><el-icon><ele-WarningFilled /></el-icon> */5 * * * * ? : 每隔5秒执行一次</li>
-								<li><el-icon><ele-WarningFilled /></el-icon> 20 */1 * * * ? : 每隔1分钟执行一次</li>
-								<li><el-icon><ele-WarningFilled /></el-icon> 30 0 23 * * ? : 每天23点执行一次</li>
-								<li><el-icon><ele-WarningFilled /></el-icon> 0 0 1 * * ? : 每天凌晨1点执行一次</li>
-								<li><el-icon><ele-WarningFilled /></el-icon> 0 0 1 1 * ? : 每月1号凌晨1点执行一次</li>
-							</ul>
+
+						<div style="display:flex">
+								<el-input v-model="tabconfig.cronExpression" placeholder="请输入cron任务表达式" />
+							    <el-button type="success"  @click="showCron('tabconfig')" style="    margin-left: 5px;">设置</el-button>
+
+						</div>
+							
 						</el-form-item>
 				</div>
 			</el-form>
@@ -232,6 +206,10 @@
 				</span>
 			</template>
 		</el-dialog>
+
+		<el-dialog v-model="cronShow" title="选择Cron规则" width="60%">
+			<vue3cron @handlelisten="handlelisten" :type="crontype" @close="cronclose"></vue3cron>
+		</el-dialog>
 	</div>
 </template>
 
@@ -239,6 +217,7 @@
 import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
 import api from '/@/api/datahub';
 import 'vue3-json-viewer/dist/index.css';
+import vue3cron from '/@/components/vue3cron/vue3cron.vue';
 
 import { ElMessage } from 'element-plus';
 import { Delete, Plus, CircleClose, Minus, Right } from '@element-plus/icons-vue';
@@ -261,7 +240,7 @@ interface DicState {
 
 export default defineComponent({
 	name: 'Edit',
-	components: { Delete, Plus, CircleClose, Minus, Right },
+	components: { Delete, Plus, CircleClose, Minus, Right,vue3cron },
 
 	setup(prop, { emit }) {
 		const myRef = ref<HTMLElement | null>(null);
@@ -269,6 +248,8 @@ export default defineComponent({
 		const state = reactive<DicState>({
 			isShowDialog: false,
 			dialogVisible: false,
+			cronShow:false,
+			crontype:'',
 			config: {},
 			devconfig: {},
 			tabconfig: {},
@@ -581,11 +562,31 @@ export default defineComponent({
 				}
 			});
 		};
+		
+		const handlelisten = (e) => {
+			console.log(e);
+			if(e.type=='config'){
+				state.config.cronExpression=e.cron
+			}else if(e.type=='tabconfig'){
+				state.tabconfig.cronExpression=e.cron
+			}
+		};
+		const showCron=(type)=>{
+				state.crontype=type
+				state.cronShow=true;
+
+		};
+		const cronclose=()=>{
+			state.cronShow=false;
+		}
 
 		return {
+			cronclose,
+			showCron,
 			onTest,
 			addRule,
 			delRule,
+			handlelisten,
 			addParams,
 			addParamss,
 			delParamss,