You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1189 lines
36 KiB
1189 lines
36 KiB
7 months ago
|
<template>
|
||
|
<!-- <a-input @click="show" placeholder="corn表达式" v-model:value="value" v-bind="value" @change="handleOK">
|
||
|
<a-icon slot="prefix" type="schedule" title="corn控件" />
|
||
|
<a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空" />
|
||
|
</a-input> -->
|
||
|
|
||
|
<a-modal
|
||
|
title="corn表达式"
|
||
|
:width="modalWidth"
|
||
|
:visible="visible"
|
||
|
:confirmLoading="confirmLoading"
|
||
|
@ok="handleSubmit"
|
||
|
@cancel="close"
|
||
|
cancelText="关闭"
|
||
|
>
|
||
|
<div class="card-container">
|
||
|
<a-tabs type="card" v-model:activeKey="activeKey">
|
||
|
<a-tab-pane key="1" type="card">
|
||
|
<template #tab><a-icon type="schedule" /> 秒</template>
|
||
|
<a-radio-group v-model:value="result.second.cronEvery" name="group">
|
||
|
<a-row>
|
||
|
<a-radio value="1">每一秒钟</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="2"
|
||
|
>每隔
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
name="test"
|
||
|
v-model:value="result.second.incrementIncrement"
|
||
|
:min="1"
|
||
|
:max="60"
|
||
|
></a-input-number>
|
||
|
秒执行 从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.second.incrementStart"
|
||
|
:min="0"
|
||
|
:max="59"
|
||
|
></a-input-number>
|
||
|
秒开始
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="3">具体秒数(可多选)</a-radio>
|
||
|
<a-select
|
||
|
style="width: 354px"
|
||
|
size="small"
|
||
|
mode="multiple"
|
||
|
v-model:value="result.second.specificSpecific"
|
||
|
>
|
||
|
<a-select-option v-for="(val, index) in 60" :key="index" :value="index">{{
|
||
|
index
|
||
|
}}</a-select-option>
|
||
|
</a-select>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="4"
|
||
|
>周期从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.second.rangeStart"
|
||
|
:min="1"
|
||
|
:max="60"
|
||
|
></a-input-number>
|
||
|
到
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.second.rangeEnd"
|
||
|
:min="0"
|
||
|
:max="59"
|
||
|
></a-input-number>
|
||
|
秒
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
</a-radio-group>
|
||
|
</a-tab-pane>
|
||
|
<a-tab-pane key="2">
|
||
|
<template #tab><a-icon type="schedule" /> 分</template>
|
||
|
<div class="tabBody">
|
||
|
<a-radio-group v-model:value="result.minute.cronEvery" name="group">
|
||
|
<a-row>
|
||
|
<a-radio value="1">每一分钟</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="2"
|
||
|
>每隔
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.minute.incrementIncrement"
|
||
|
:min="1"
|
||
|
:max="60"
|
||
|
></a-input-number>
|
||
|
分执行 从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.minute.incrementStart"
|
||
|
:min="0"
|
||
|
:max="59"
|
||
|
></a-input-number>
|
||
|
分开始
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="3">具体分钟数(可多选)</a-radio>
|
||
|
<a-select
|
||
|
style="width: 340px"
|
||
|
size="small"
|
||
|
mode="multiple"
|
||
|
v-model:value="result.minute.specificSpecific"
|
||
|
>
|
||
|
<a-select-option v-for="(val, index) in Array(60)" :key="index" :value="index">
|
||
|
{{ index }}</a-select-option
|
||
|
>
|
||
|
</a-select>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="4"
|
||
|
>周期从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.minute.rangeStart"
|
||
|
:min="1"
|
||
|
:max="60"
|
||
|
></a-input-number>
|
||
|
到
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.minute.rangeEnd"
|
||
|
:min="0"
|
||
|
:max="59"
|
||
|
></a-input-number>
|
||
|
分
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
</a-radio-group>
|
||
|
</div>
|
||
|
</a-tab-pane>
|
||
|
<a-tab-pane key="3">
|
||
|
<template #tab><a-icon type="schedule" /> 时</template>
|
||
|
<div class="tabBody">
|
||
|
<a-radio-group v-model:value="result.hour.cronEvery" name="group">
|
||
|
<a-row>
|
||
|
<a-radio value="1">每一小时</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="2"
|
||
|
>每隔
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.hour.incrementIncrement"
|
||
|
:min="0"
|
||
|
:max="23"
|
||
|
></a-input-number>
|
||
|
小时执行 从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.hour.incrementStart"
|
||
|
:min="0"
|
||
|
:max="23"
|
||
|
></a-input-number>
|
||
|
小时开始
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio class="long" value="3">具体小时数(可多选)</a-radio>
|
||
|
<a-select
|
||
|
style="width: 340px"
|
||
|
size="small"
|
||
|
mode="multiple"
|
||
|
v-model:value="result.hour.specificSpecific"
|
||
|
>
|
||
|
<a-select-option v-for="(val, index) in Array(24)" :key="index">{{
|
||
|
index
|
||
|
}}</a-select-option>
|
||
|
</a-select>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="4"
|
||
|
>周期从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.hour.rangeStart"
|
||
|
:min="0"
|
||
|
:max="23"
|
||
|
></a-input-number>
|
||
|
到
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.hour.rangeEnd"
|
||
|
:min="0"
|
||
|
:max="23"
|
||
|
></a-input-number>
|
||
|
小时
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
</a-radio-group>
|
||
|
</div>
|
||
|
</a-tab-pane>
|
||
|
<a-tab-pane key="4">
|
||
|
<template #tab><a-icon type="schedule" /> 天</template>
|
||
|
<div class="tabBody">
|
||
|
<a-radio-group v-model:value="result.day.cronEvery" name="group">
|
||
|
<a-row>
|
||
|
<a-radio value="1">每一天</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="2"
|
||
|
>每隔
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.week.incrementIncrement"
|
||
|
:min="1"
|
||
|
:max="7"
|
||
|
></a-input-number>
|
||
|
周执行 从
|
||
|
<a-select size="small" v-model:value="result.week.incrementStart">
|
||
|
<a-select-option
|
||
|
v-for="(val, index) in Array(7)"
|
||
|
:key="index"
|
||
|
:value="index + 1"
|
||
|
>{{ weekDays[index] }}</a-select-option
|
||
|
>
|
||
|
</a-select>
|
||
|
开始
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="3"
|
||
|
>每隔
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.day.incrementIncrement"
|
||
|
:min="1"
|
||
|
:max="31"
|
||
|
></a-input-number>
|
||
|
天执行 从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.day.incrementStart"
|
||
|
:min="1"
|
||
|
:max="31"
|
||
|
></a-input-number>
|
||
|
天开始
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio class="long" value="4">具体星期几(可多选)</a-radio>
|
||
|
<a-select
|
||
|
style="width: 340px"
|
||
|
size="small"
|
||
|
mode="multiple"
|
||
|
v-model:value="result.week.specificSpecific"
|
||
|
>
|
||
|
<a-select-option
|
||
|
v-for="(val, index) in Array(7)"
|
||
|
:key="index"
|
||
|
:value="index + 1"
|
||
|
>{{ weekDays[index] }}</a-select-option
|
||
|
>
|
||
|
</a-select>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio class="long" value="5">具体天数(可多选)</a-radio>
|
||
|
<a-select
|
||
|
style="width: 354px"
|
||
|
size="small"
|
||
|
mode="multiple"
|
||
|
v-model:value="result.day.specificSpecific"
|
||
|
>
|
||
|
<a-select-option
|
||
|
v-for="(val, index) in Array(31)"
|
||
|
:key="index"
|
||
|
:value="index + 1"
|
||
|
>{{ index + 1 }}</a-select-option
|
||
|
>
|
||
|
</a-select>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="6">在这个月的最后一天</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="7">在这个月的最后一个工作日</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio :value="8"
|
||
|
>在这个月的最后一个
|
||
|
<a-select size="small" v-model:value="result.day.cronLastSpecificDomDay">
|
||
|
<a-select-option
|
||
|
v-for="(val, index) in Array(7)"
|
||
|
:key="index"
|
||
|
:value="index + 1"
|
||
|
>{{ weekDays[index] }}</a-select-option
|
||
|
>
|
||
|
</a-select>
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="9">
|
||
|
在本月底前
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.day.cronDaysBeforeEomMinus"
|
||
|
:min="1"
|
||
|
:max="31"
|
||
|
></a-input-number>
|
||
|
天
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="10"
|
||
|
>最近的工作日(周一至周五)至本月
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.day.cronDaysNearestWeekday"
|
||
|
:min="1"
|
||
|
:max="31"
|
||
|
></a-input-number>
|
||
|
日
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="11"
|
||
|
>在这个月的第
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.week.cronNthDayNth"
|
||
|
:min="1"
|
||
|
:max="5"
|
||
|
></a-input-number>
|
||
|
个
|
||
|
<a-select size="small" v-model:value="result.week.cronNthDayDay">
|
||
|
<a-select-option
|
||
|
v-for="(val, index) in Array(7)"
|
||
|
:key="index"
|
||
|
:value="index + 1"
|
||
|
>{{ weekDays[index] }}</a-select-option
|
||
|
>
|
||
|
</a-select>
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
</a-radio-group>
|
||
|
</div>
|
||
|
</a-tab-pane>
|
||
|
<a-tab-pane key="5">
|
||
|
<template #tab><a-icon type="schedule" /> 月</template>
|
||
|
<div class="tabBody">
|
||
|
<a-radio-group v-model:value="result.month.cronEvery" name="group">
|
||
|
<a-row>
|
||
|
<a-radio value="1">每一月</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="2"
|
||
|
>每隔
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.month.incrementIncrement"
|
||
|
:min="0"
|
||
|
:max="12"
|
||
|
></a-input-number>
|
||
|
月执行 从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.month.incrementStart"
|
||
|
:min="0"
|
||
|
:max="12"
|
||
|
></a-input-number>
|
||
|
月开始
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio class="long" value="3">具体月数(可多选)</a-radio>
|
||
|
<a-select
|
||
|
style="width: 354px"
|
||
|
size="small"
|
||
|
filterable
|
||
|
mode="multiple"
|
||
|
v-model:value="result.month.specificSpecific"
|
||
|
>
|
||
|
<a-select-option
|
||
|
v-for="(val, index) in Array(12)"
|
||
|
:key="index"
|
||
|
:value="index + 1"
|
||
|
>{{ index + 1 }}</a-select-option
|
||
|
>
|
||
|
</a-select>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="4"
|
||
|
>从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.month.rangeStart"
|
||
|
:min="1"
|
||
|
:max="12"
|
||
|
></a-input-number>
|
||
|
到
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.month.rangeEnd"
|
||
|
:min="1"
|
||
|
:max="12"
|
||
|
></a-input-number>
|
||
|
月之间的每个月
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
</a-radio-group>
|
||
|
</div>
|
||
|
</a-tab-pane>
|
||
|
<a-tab-pane key="6">
|
||
|
<template #tab><a-icon type="schedule" /> 年</template>
|
||
|
<div class="tabBody">
|
||
|
<a-radio-group v-model:value="result.year.cronEvery" name="group">
|
||
|
<a-row>
|
||
|
<a-radio value="1">每一年</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="2"
|
||
|
>每隔
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.year.incrementIncrement"
|
||
|
:min="1"
|
||
|
:max="99"
|
||
|
></a-input-number>
|
||
|
年执行 从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.year.incrementStart"
|
||
|
:min="2019"
|
||
|
:max="2119"
|
||
|
></a-input-number>
|
||
|
年开始
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio class="long" value="3">具体年份(可多选)</a-radio>
|
||
|
<a-select
|
||
|
style="width: 354px"
|
||
|
size="small"
|
||
|
filterable
|
||
|
mode="multiple"
|
||
|
v-model:value="result.year.specificSpecific"
|
||
|
>
|
||
|
<a-select-option
|
||
|
v-for="(val, index) in Array(100)"
|
||
|
:key="index"
|
||
|
:value="2019 + index"
|
||
|
>{{ 2019 + index }}</a-select-option
|
||
|
>
|
||
|
</a-select>
|
||
|
</a-row>
|
||
|
<a-row>
|
||
|
<a-radio value="4"
|
||
|
>从
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.year.rangeStart"
|
||
|
:min="2019"
|
||
|
:max="2119"
|
||
|
></a-input-number>
|
||
|
到
|
||
|
<a-input-number
|
||
|
size="small"
|
||
|
v-model:value="result.year.rangeEnd"
|
||
|
:min="2019"
|
||
|
:max="2119"
|
||
|
></a-input-number>
|
||
|
年之间的每一年
|
||
|
</a-radio>
|
||
|
</a-row>
|
||
|
</a-radio-group>
|
||
|
</div>
|
||
|
</a-tab-pane>
|
||
|
</a-tabs>
|
||
|
<div class="bottom">
|
||
|
<span class="value">{{ cron }}</span>
|
||
|
</div>
|
||
|
</div>
|
||
|
</a-modal>
|
||
|
</template>
|
||
|
<script>
|
||
|
import { defineComponent } from 'vue';
|
||
|
export default defineComponent({
|
||
|
name: 'VueCron',
|
||
|
props: ['data', 'value'],
|
||
|
data() {
|
||
|
return {
|
||
|
activeKey:'1',
|
||
|
visible: false,
|
||
|
confirmLoading: false,
|
||
|
size: 'large',
|
||
|
weekDays: ['天', '一', '二', '三', '四', '五', '六'].map((val) => '星期' + val),
|
||
|
result: {
|
||
|
second: {},
|
||
|
minute: {},
|
||
|
hour: {},
|
||
|
day: {},
|
||
|
week: {},
|
||
|
month: {},
|
||
|
year: {},
|
||
|
},
|
||
|
defaultValue: {
|
||
|
second: {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 3,
|
||
|
incrementIncrement: 5,
|
||
|
rangeStart: 1,
|
||
|
rangeEnd: 0,
|
||
|
specificSpecific: [],
|
||
|
},
|
||
|
minute: {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 3,
|
||
|
incrementIncrement: 5,
|
||
|
rangeStart: 1,
|
||
|
rangeEnd: '0',
|
||
|
specificSpecific: [],
|
||
|
},
|
||
|
hour: {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 3,
|
||
|
incrementIncrement: 5,
|
||
|
rangeStart: '0',
|
||
|
rangeEnd: '0',
|
||
|
specificSpecific: [],
|
||
|
},
|
||
|
day: {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 1,
|
||
|
incrementIncrement: '1',
|
||
|
rangeStart: '',
|
||
|
rangeEnd: '',
|
||
|
specificSpecific: [],
|
||
|
cronLastSpecificDomDay: 1,
|
||
|
cronDaysBeforeEomMinus: 1,
|
||
|
cronDaysNearestWeekday: 1,
|
||
|
},
|
||
|
week: {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 1,
|
||
|
incrementIncrement: 1,
|
||
|
specificSpecific: [],
|
||
|
cronNthDayDay: 1,
|
||
|
cronNthDayNth: 1,
|
||
|
},
|
||
|
month: {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 3,
|
||
|
incrementIncrement: 5,
|
||
|
rangeStart: 1,
|
||
|
rangeEnd: 1,
|
||
|
specificSpecific: [],
|
||
|
},
|
||
|
year: {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 2017,
|
||
|
incrementIncrement: 1,
|
||
|
rangeStart: 2019,
|
||
|
rangeEnd: 2019,
|
||
|
specificSpecific: [],
|
||
|
},
|
||
|
label: '',
|
||
|
},
|
||
|
modalWidth: 608,
|
||
|
};
|
||
|
},
|
||
|
computed: {
|
||
|
modalWidth() {
|
||
|
return 608;
|
||
|
},
|
||
|
secondsText() {
|
||
|
let seconds = '';
|
||
|
let cronEvery = this.result.second.cronEvery || '';
|
||
|
switch (cronEvery.toString()) {
|
||
|
case '1':
|
||
|
seconds = '*';
|
||
|
break;
|
||
|
case '2':
|
||
|
seconds = this.result.second.incrementStart + '/' + this.result.second.incrementIncrement;
|
||
|
break;
|
||
|
case '3':
|
||
|
this.result.second.specificSpecific.map((val) => {
|
||
|
seconds += val + ',';
|
||
|
});
|
||
|
seconds = seconds.slice(0, -1);
|
||
|
break;
|
||
|
case '4':
|
||
|
seconds = this.result.second.rangeStart + '-' + this.result.second.rangeEnd;
|
||
|
break;
|
||
|
}
|
||
|
return seconds;
|
||
|
},
|
||
|
minutesText() {
|
||
|
let minutes = '';
|
||
|
let cronEvery = this.result.minute.cronEvery || '';
|
||
|
switch (cronEvery.toString()) {
|
||
|
case '1':
|
||
|
minutes = '*';
|
||
|
break;
|
||
|
case '2':
|
||
|
minutes = this.result.minute.incrementStart + '/' + this.result.minute.incrementIncrement;
|
||
|
break;
|
||
|
case '3':
|
||
|
this.result.minute.specificSpecific.map((val) => {
|
||
|
minutes += val + ',';
|
||
|
});
|
||
|
minutes = minutes.slice(0, -1);
|
||
|
break;
|
||
|
case '4':
|
||
|
minutes = this.result.minute.rangeStart + '-' + this.result.minute.rangeEnd;
|
||
|
break;
|
||
|
}
|
||
|
return minutes;
|
||
|
},
|
||
|
hoursText() {
|
||
|
let hours = '';
|
||
|
let cronEvery = this.result.hour.cronEvery || '';
|
||
|
switch (cronEvery.toString()) {
|
||
|
case '1':
|
||
|
hours = '*';
|
||
|
break;
|
||
|
case '2':
|
||
|
hours = this.result.hour.incrementStart + '/' + this.result.hour.incrementIncrement;
|
||
|
break;
|
||
|
case '3':
|
||
|
this.result.hour.specificSpecific.map((val) => {
|
||
|
hours += val + ',';
|
||
|
});
|
||
|
hours = hours.slice(0, -1);
|
||
|
break;
|
||
|
case '4':
|
||
|
hours = this.result.hour.rangeStart + '-' + this.result.hour.rangeEnd;
|
||
|
break;
|
||
|
}
|
||
|
return hours;
|
||
|
},
|
||
|
daysText() {
|
||
|
let days = '';
|
||
|
let cronEvery = this.result.day.cronEvery || '';
|
||
|
switch (cronEvery.toString()) {
|
||
|
case '1':
|
||
|
break;
|
||
|
case '2':
|
||
|
case '4':
|
||
|
case '11':
|
||
|
days = '?';
|
||
|
break;
|
||
|
case '3':
|
||
|
days = this.result.day.incrementStart + '/' + this.result.day.incrementIncrement;
|
||
|
break;
|
||
|
case '5':
|
||
|
this.result.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 = this.result.day.cronLastSpecificDomDay + 'L';
|
||
|
break;
|
||
|
case '9':
|
||
|
days = 'L-' + this.result.day.cronDaysBeforeEomMinus;
|
||
|
break;
|
||
|
case '10':
|
||
|
days = this.result.day.cronDaysNearestWeekday + 'W';
|
||
|
break;
|
||
|
}
|
||
|
return days;
|
||
|
},
|
||
|
weeksText() {
|
||
|
let weeks = '';
|
||
|
let cronEvery = this.result.day.cronEvery || '';
|
||
|
switch (cronEvery.toString()) {
|
||
|
case '1':
|
||
|
case '3':
|
||
|
case '5':
|
||
|
weeks = '?';
|
||
|
break;
|
||
|
case '2':
|
||
|
weeks = this.result.week.incrementStart + '/' + this.result.week.incrementIncrement;
|
||
|
break;
|
||
|
case '4':
|
||
|
this.result.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 = this.result.week.cronNthDayDay + '#' + this.result.week.cronNthDayNth;
|
||
|
break;
|
||
|
}
|
||
|
return weeks;
|
||
|
},
|
||
|
monthsText() {
|
||
|
let months = '';
|
||
|
let cronEvery = this.result.month.cronEvery || '';
|
||
|
switch (cronEvery.toString()) {
|
||
|
case '1':
|
||
|
months = '*';
|
||
|
break;
|
||
|
case '2':
|
||
|
months = this.result.month.incrementStart + '/' + this.result.month.incrementIncrement;
|
||
|
break;
|
||
|
case '3':
|
||
|
this.result.month.specificSpecific.map((val) => {
|
||
|
months += val + ',';
|
||
|
});
|
||
|
months = months.slice(0, -1);
|
||
|
break;
|
||
|
case '4':
|
||
|
months = this.result.month.rangeStart + '-' + this.result.month.rangeEnd;
|
||
|
break;
|
||
|
}
|
||
|
return months;
|
||
|
},
|
||
|
yearsText() {
|
||
|
let years = '';
|
||
|
let cronEvery = this.result.year.cronEvery || '';
|
||
|
switch (cronEvery.toString()) {
|
||
|
case '1':
|
||
|
years = '*';
|
||
|
break;
|
||
|
case '2':
|
||
|
years = this.result.year.incrementStart + '/' + this.result.year.incrementIncrement;
|
||
|
break;
|
||
|
case '3':
|
||
|
this.result.year.specificSpecific.map((val) => {
|
||
|
years += val + ',';
|
||
|
});
|
||
|
years = years.slice(0, -1);
|
||
|
break;
|
||
|
case '4':
|
||
|
years = this.result.year.rangeStart + '-' + this.result.year.rangeEnd;
|
||
|
break;
|
||
|
}
|
||
|
return years;
|
||
|
},
|
||
|
cron() {
|
||
|
return `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${
|
||
|
this.daysText || '*'
|
||
|
} ${this.monthsText || '*'} ${this.weeksText || '?'} ${this.yearsText || '*'}`;
|
||
|
},
|
||
|
},
|
||
|
watch: {
|
||
|
visible: {
|
||
|
handler() {
|
||
|
// if(this.data){
|
||
|
// //this. result = Object.keys(this.data.value).length>0?this.deepCopy(this.data.value):this.deepCopy(this.defaultValue);
|
||
|
// //this.result = Object.keys(this.data.value).length>0?clone(this.data.value):clone(this.defaultValue);
|
||
|
// //this.result = Object.keys(this.data.value).length>0?clone(JSON.parse(this.data.value)):clone(this.defaultValue);
|
||
|
// this.result = Object.keys(this.data.value).length>0?JSON.parse(this.data.value):JSON.parse(JSON.stringify(this.defaultValue));
|
||
|
// }else{
|
||
|
// //this.result = this.deepCopy(this.defaultValue);
|
||
|
// //this.result = clone(this.defaultValue);
|
||
|
// this.result = JSON.parse(JSON.stringify(this.defaultValue));
|
||
|
// }
|
||
|
let label = this.data;
|
||
|
if (label && label!=="executenowonce") {
|
||
|
this.secondsReverseExp(label);
|
||
|
this.minutesReverseExp(label);
|
||
|
this.hoursReverseExp(label);
|
||
|
this.daysReverseExp(label);
|
||
|
this.daysReverseExp(label);
|
||
|
this.monthsReverseExp(label);
|
||
|
this.yearReverseExp(label);
|
||
|
JSON.parse(JSON.stringify(label));
|
||
|
} else {
|
||
|
this.result = JSON.parse(JSON.stringify(this.defaultValue));
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
methods: {
|
||
|
handleEmpty() {
|
||
|
this.handleOK('');
|
||
|
},
|
||
|
setGroup(a, b) {
|
||
|
this.result;
|
||
|
},
|
||
|
show() {
|
||
|
this.visible = true;
|
||
|
// console.log('secondsReverseExp',this.secondsReverseExp(this.data));
|
||
|
// console.log('minutesReverseExp',this.minutesReverseExp(this.data));
|
||
|
// console.log('hoursReverseExp',this.hoursReverseExp(this.data));
|
||
|
// console.log('daysReverseExp',this.daysReverseExp(this.data));
|
||
|
// console.log('monthsReverseExp',this.monthsReverseExp(this.data));
|
||
|
// console.log('yearReverseExp',this.yearReverseExp(this.data));
|
||
|
},
|
||
|
handleSubmit() {
|
||
|
this.$emit('ok', this.cron);
|
||
|
this.close();
|
||
|
this.visible = false;
|
||
|
},
|
||
|
close() {
|
||
|
this.visible = false;
|
||
|
},
|
||
|
secondsReverseExp(seconds) {
|
||
|
let val = seconds.split(' ')[0];
|
||
|
//alert(val);
|
||
|
let second = {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 3,
|
||
|
incrementIncrement: 5,
|
||
|
rangeStart: 1,
|
||
|
rangeEnd: 0,
|
||
|
specificSpecific: [],
|
||
|
};
|
||
|
switch (true) {
|
||
|
case val.includes('*'):
|
||
|
second.cronEvery = '1';
|
||
|
break;
|
||
|
case val.includes('/'):
|
||
|
second.cronEvery = '2';
|
||
|
second.incrementStart = val.split('/')[0];
|
||
|
second.incrementIncrement = val.split('/')[1];
|
||
|
break;
|
||
|
case val.includes(','):
|
||
|
second.cronEvery = '3';
|
||
|
second.specificSpecific = val.split(',').map(Number).sort();
|
||
|
break;
|
||
|
case val.includes('-'):
|
||
|
second.cronEvery = '4';
|
||
|
second.rangeStart = val.split('-')[0];
|
||
|
second.rangeEnd = val.split('-')[1];
|
||
|
break;
|
||
|
default:
|
||
|
second.cronEvery = '3';
|
||
|
second.specificSpecific = val.split(',').map(Number).sort();
|
||
|
}
|
||
|
this.result.second = second;
|
||
|
},
|
||
|
minutesReverseExp(minutes) {
|
||
|
let val = minutes.split(' ')[1];
|
||
|
let minute = {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 3,
|
||
|
incrementIncrement: 5,
|
||
|
rangeStart: 1,
|
||
|
rangeEnd: 0,
|
||
|
specificSpecific: [],
|
||
|
};
|
||
|
switch (true) {
|
||
|
case val.includes('*'):
|
||
|
minute.cronEvery = '1';
|
||
|
break;
|
||
|
case val.includes('/'):
|
||
|
minute.cronEvery = '2';
|
||
|
minute.incrementStart = val.split('/')[0];
|
||
|
minute.incrementIncrement = val.split('/')[1];
|
||
|
break;
|
||
|
case val.includes(','):
|
||
|
minute.cronEvery = '3';
|
||
|
minute.specificSpecific = val.split(',').map(Number).sort();
|
||
|
break;
|
||
|
case val.includes('-'):
|
||
|
minute.cronEvery = '4';
|
||
|
minute.rangeStart = val.split('-')[0];
|
||
|
minute.rangeEnd = val.split('-')[1];
|
||
|
break;
|
||
|
default:
|
||
|
minute.cronEvery = '3';
|
||
|
minute.specificSpecific = val.split(',').map(Number).sort();
|
||
|
}
|
||
|
this.result.minute = minute;
|
||
|
},
|
||
|
hoursReverseExp(hours) {
|
||
|
let val = hours.split(' ')[2];
|
||
|
let hour = {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 3,
|
||
|
incrementIncrement: 5,
|
||
|
rangeStart: 1,
|
||
|
rangeEnd: '0',
|
||
|
specificSpecific: [],
|
||
|
};
|
||
|
switch (true) {
|
||
|
case val.includes('*'):
|
||
|
hour.cronEvery = '1';
|
||
|
break;
|
||
|
case val.includes('/'):
|
||
|
hour.cronEvery = '2';
|
||
|
hour.incrementStart = val.split('/')[0];
|
||
|
hour.incrementIncrement = val.split('/')[1];
|
||
|
break;
|
||
|
case val.includes(','):
|
||
|
hour.cronEvery = '3';
|
||
|
hour.specificSpecific = val.split(',').map(Number).sort();
|
||
|
break;
|
||
|
case val.includes('-'):
|
||
|
hour.cronEvery = '4';
|
||
|
hour.rangeStart = val.split('-')[0];
|
||
|
hour.rangeEnd = val.split('-')[1];
|
||
|
break;
|
||
|
default:
|
||
|
hour.cronEvery = '3';
|
||
|
hour.specificSpecific = val.split(',').map(Number).sort();
|
||
|
}
|
||
|
this.result.hour = hour;
|
||
|
},
|
||
|
daysReverseExp(cron) {
|
||
|
let days = cron.split(' ')[3];
|
||
|
let weeks = cron.split(' ')[5];
|
||
|
let day = {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 1,
|
||
|
incrementIncrement: 1,
|
||
|
rangeStart: 1,
|
||
|
rangeEnd: 1,
|
||
|
specificSpecific: [],
|
||
|
cronLastSpecificDomDay: 1,
|
||
|
cronDaysBeforeEomMinus: 1,
|
||
|
cronDaysNearestWeekday: 1,
|
||
|
};
|
||
|
let week = {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 1,
|
||
|
incrementIncrement: 1,
|
||
|
specificSpecific: [],
|
||
|
cronNthDayDay: 1,
|
||
|
cronNthDayNth: '1',
|
||
|
};
|
||
|
if (!days.includes('?')) {
|
||
|
switch (true) {
|
||
|
case days.includes('*'):
|
||
|
day.cronEvery = '1';
|
||
|
break;
|
||
|
case days.includes('?'):
|
||
|
// 2、4、11
|
||
|
break;
|
||
|
case days.includes('/'):
|
||
|
day.cronEvery = '3';
|
||
|
day.incrementStart = days.split('/')[0];
|
||
|
day.incrementIncrement = days.split('/')[1];
|
||
|
break;
|
||
|
case days.includes(','):
|
||
|
day.cronEvery = '5';
|
||
|
day.specificSpecific = days.split(',').map(Number).sort();
|
||
|
// day.specificSpecific.forEach(function (value, index) {
|
||
|
// day.specificSpecific[index] = value -1;
|
||
|
// });
|
||
|
break;
|
||
|
case days.includes('LW'):
|
||
|
day.cronEvery = '7';
|
||
|
break;
|
||
|
case days.includes('L-'):
|
||
|
day.cronEvery = '9';
|
||
|
day.cronDaysBeforeEomMinus = days.split('L-')[1];
|
||
|
break;
|
||
|
case days.includes('L'):
|
||
|
//alert(days);
|
||
|
if (days.len == 1) {
|
||
|
day.cronEvery = '6';
|
||
|
day.cronLastSpecificDomDay = '1';
|
||
|
} else {
|
||
|
day.cronEvery = '8';
|
||
|
day.cronLastSpecificDomDay = Number(days.split('L')[0]);
|
||
|
}
|
||
|
break;
|
||
|
case days.includes('W'):
|
||
|
day.cronEvery = '10';
|
||
|
day.cronDaysNearestWeekday = days.split('W')[0];
|
||
|
break;
|
||
|
default:
|
||
|
day.cronEvery = '5';
|
||
|
day.specificSpecific = days.split(',').map(Number).sort();
|
||
|
}
|
||
|
} else {
|
||
|
switch (true) {
|
||
|
case weeks.includes('/'):
|
||
|
day.cronEvery = '2';
|
||
|
week.incrementStart = weeks.split('/')[0];
|
||
|
week.incrementIncrement = weeks.split('/')[1];
|
||
|
break;
|
||
|
case weeks.includes(','):
|
||
|
day.cronEvery = '4';
|
||
|
week.specificSpecific = weeks.split(',').map(Number).sort();
|
||
|
break;
|
||
|
case '#':
|
||
|
day.cronEvery = '11';
|
||
|
week.cronNthDayDay = weeks.split('#')[0];
|
||
|
week.cronNthDayNth = weeks.split('#')[1];
|
||
|
break;
|
||
|
default:
|
||
|
day.cronEvery = '1';
|
||
|
week.cronEvery = '1';
|
||
|
}
|
||
|
}
|
||
|
this.result.day = day;
|
||
|
this.result.week = week;
|
||
|
},
|
||
|
monthsReverseExp(cron) {
|
||
|
let months = cron.split(' ')[4];
|
||
|
let month = {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 3,
|
||
|
incrementIncrement: 5,
|
||
|
rangeStart: 1,
|
||
|
rangeEnd: 1,
|
||
|
specificSpecific: [],
|
||
|
};
|
||
|
switch (true) {
|
||
|
case months.includes('*'):
|
||
|
month.cronEvery = '1';
|
||
|
break;
|
||
|
case months.includes('/'):
|
||
|
month.cronEvery = '2';
|
||
|
month.incrementStart = months.split('/')[0];
|
||
|
month.incrementIncrement = months.split('/')[1];
|
||
|
break;
|
||
|
case months.includes(','):
|
||
|
month.cronEvery = '3';
|
||
|
month.specificSpecific = months.split(',').map(Number).sort();
|
||
|
break;
|
||
|
case months.includes('-'):
|
||
|
month.cronEvery = '4';
|
||
|
month.rangeStart = months.split('-')[0];
|
||
|
month.rangeEnd = months.split('-')[1];
|
||
|
break;
|
||
|
default:
|
||
|
month.cronEvery = '3';
|
||
|
month.specificSpecific = months.split(',').map(Number).sort();
|
||
|
}
|
||
|
this.result.month = month;
|
||
|
},
|
||
|
yearReverseExp(cron) {
|
||
|
let years = cron.split(' ')[6];
|
||
|
let year = {
|
||
|
cronEvery: '',
|
||
|
incrementStart: 3,
|
||
|
incrementIncrement: 5,
|
||
|
rangeStart: 2019,
|
||
|
rangeEnd: 2019,
|
||
|
specificSpecific: [],
|
||
|
};
|
||
|
switch (true) {
|
||
|
case years.includes('*'):
|
||
|
year.cronEvery = '1';
|
||
|
break;
|
||
|
case years.includes('/'):
|
||
|
year.cronEvery = '2';
|
||
|
year.incrementStart = years.split('/')[0];
|
||
|
year.incrementIncrement = years.split('/')[1];
|
||
|
break;
|
||
|
case years.includes(','):
|
||
|
year.cronEvery = '3';
|
||
|
year.specificSpecific = years.split(',').map(Number).sort();
|
||
|
break;
|
||
|
case years.includes('-'):
|
||
|
year.cronEvery = '4';
|
||
|
year.rangeStart = years.split('-')[0];
|
||
|
year.rangeEnd = years.split('-')[1];
|
||
|
break;
|
||
|
default:
|
||
|
year.cronEvery = '3';
|
||
|
year.specificSpecific = years.split(',').map(Number).sort();
|
||
|
}
|
||
|
this.result.year = year;
|
||
|
},
|
||
|
},
|
||
|
});
|
||
|
</script>
|
||
|
|
||
|
<style lang="less">
|
||
|
.card-container {
|
||
|
background: #fff;
|
||
|
overflow: hidden;
|
||
|
padding: 12px;
|
||
|
position: relative;
|
||
|
width: 100%;
|
||
|
.ant-tabs {
|
||
|
border: 1px solid #e6ebf5;
|
||
|
padding: 0;
|
||
|
|
||
|
.ant-tabs-nav {
|
||
|
.ant-tabs-nav-wrap {
|
||
|
.ant-tabs-nav-list {
|
||
|
.ant-tabs-tab {
|
||
|
width: 50px;
|
||
|
text-align: center;
|
||
|
.ant-tabs-tab-btn {
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.ant-tabs-bar {
|
||
|
margin: 0;
|
||
|
outline: none;
|
||
|
border-bottom: none;
|
||
|
|
||
|
.ant-tabs-nav-container {
|
||
|
margin: 0;
|
||
|
.ant-tabs-tab {
|
||
|
padding: 0 24px !important;
|
||
|
background-color: #f5f7fa !important;
|
||
|
margin-right: 0px !important;
|
||
|
border-radius: 0;
|
||
|
line-height: 38px;
|
||
|
border: 1px solid transparent !important;
|
||
|
border-bottom: 1px solid #e6ebf5 !important;
|
||
|
}
|
||
|
.ant-tabs-tab-active.ant-tabs-tab {
|
||
|
color: #409eff;
|
||
|
background-color: #fff !important;
|
||
|
border-right: 1px solid #e6ebf5 !important;
|
||
|
border-left: 1px solid #e6ebf5 !important;
|
||
|
border-bottom: 1px solid #fff !important;
|
||
|
font-weight: normal;
|
||
|
transition: none !important;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.ant-tabs-tabpane {
|
||
|
padding: 15px;
|
||
|
.ant-row {
|
||
|
margin: 10px 0;
|
||
|
}
|
||
|
.ant-select,
|
||
|
.ant-input-number {
|
||
|
width: 100px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|
||
|
<style lang="less" scoped>
|
||
|
.container-widthEn {
|
||
|
width: 755px;
|
||
|
}
|
||
|
.container-widthCn {
|
||
|
width: 608px;
|
||
|
}
|
||
|
.language {
|
||
|
text-align: center;
|
||
|
position: absolute;
|
||
|
right: 13px;
|
||
|
top: 13px;
|
||
|
border: 1px solid transparent;
|
||
|
height: 40px;
|
||
|
line-height: 38px;
|
||
|
font-size: 16px;
|
||
|
color: #409eff;
|
||
|
z-index: 1;
|
||
|
background: #f5f7fa;
|
||
|
outline: none;
|
||
|
width: 47px;
|
||
|
border-bottom: 1px solid #e6ebf5;
|
||
|
border-radius: 0;
|
||
|
}
|
||
|
.card-container {
|
||
|
.bottom {
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
padding: 10px 0 0 0;
|
||
|
.cronButton {
|
||
|
margin: 0 10px;
|
||
|
line-height: 40px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.tabBody {
|
||
|
.a-row {
|
||
|
margin: 10px 0;
|
||
|
.long {
|
||
|
.a-select {
|
||
|
width: 354px;
|
||
|
}
|
||
|
}
|
||
|
.a-input-number {
|
||
|
width: 110px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|