重置功能修改,

?:只能用在DayOfMonth和DayOfWeek两个域
This commit is contained in:
yjb 2021-09-22 19:00:25 +08:00
parent 492ee4fae5
commit 6d709f9fab
8 changed files with 844 additions and 826 deletions

View File

@ -15,23 +15,28 @@
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="3"> <el-radio v-model='radioValue' :label="3">
周期从 周期从
<el-input-number v-model='cycle01' :min="0" :max="31" /> - <el-input-number v-model='cycle01' :min="0" :max="31"/>
<el-input-number v-model='cycle02' :min="0" :max="31" /> -
<el-input-number v-model='cycle02' :min="0" :max="31"/>
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="4"> <el-radio v-model='radioValue' :label="4">
<el-input-number v-model='average01' :min="0" :max="31" /> 号开始 <el-input-number v-model='average01' :min="0" :max="31"/>
<el-input-number v-model='average02' :min="0" :max="31" /> 日执行一次 号开始
<el-input-number v-model='average02' :min="0" :max="31"/>
日执行一次
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="5"> <el-radio v-model='radioValue' :label="5">
每月 每月
<el-input-number v-model='workday' :min="0" :max="31" /> 号最近的那个工作日 <el-input-number v-model='workday' :min="0" :max="31"/>
号最近的那个工作日
</el-radio> </el-radio>
</el-form-item> </el-form-item>
@ -45,7 +50,7 @@
<el-radio v-model='radioValue' :label="7"> <el-radio v-model='radioValue' :label="7">
指定 指定
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%"> <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
<el-option v-for="item in 31" :key="item" :value="item">{{item}}</el-option> <el-option v-for="item in 31" :key="item" :value="item">{{ item }}</el-option>
</el-select> </el-select>
</el-radio> </el-radio>
</el-form-item> </el-form-item>
@ -69,23 +74,19 @@ export default {
name: 'crontab-day', name: 'crontab-day',
props: ['check', 'cron'], props: ['check', 'cron'],
methods: { methods: {
init() {
this.workday = 1
this.cycle01 = 1
this.cycle02 = 2
this.average01 = 1
this.average02 = 1
this.checkboxList = []
},
// //
radioChange() { radioChange() {
('day rachange'); ('day rachange');
if (this.radioValue === 1) { if (this.radioValue === 1) {
this.$emit('update', 'day', '*', 'day'); this.$emit('update', 'day', '*', 'day');
this.$emit('update', 'week', '?', 'day');
this.$emit('update', 'month', '*', 'day');
} else {
if (this.cron.hour === '*') {
this.$emit('update', 'hour', '0', 'day');
}
if (this.cron.min === '*') {
this.$emit('update', 'min', '0', 'day');
}
if (this.cron.second === '*') {
this.$emit('update', 'second', '0', 'day');
}
} }
switch (this.radioValue) { switch (this.radioValue) {

View File

@ -9,16 +9,20 @@
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="2"> <el-radio v-model='radioValue' :label="2">
周期从 周期从
<el-input-number v-model='cycle01' :min="0" :max="60" /> - <el-input-number v-model='cycle01' :min="0" :max="60"/>
<el-input-number v-model='cycle02' :min="0" :max="60" /> 小时 -
<el-input-number v-model='cycle02' :min="0" :max="60"/>
小时
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="3"> <el-radio v-model='radioValue' :label="3">
<el-input-number v-model='average01' :min="0" :max="60" /> 小时开始 <el-input-number v-model='average01' :min="0" :max="60"/>
<el-input-number v-model='average02' :min="0" :max="60" /> 小时执行一次 小时开始
<el-input-number v-model='average02' :min="0" :max="60"/>
小时执行一次
</el-radio> </el-radio>
</el-form-item> </el-form-item>
@ -26,7 +30,7 @@
<el-radio v-model='radioValue' :label="4"> <el-radio v-model='radioValue' :label="4">
指定 指定
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%"> <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
<el-option v-for="item in 60" :key="item" :value="item-1">{{item-1}}</el-option> <el-option v-for="item in 60" :key="item" :value="item-1">{{ item - 1 }}</el-option>
</el-select> </el-select>
</el-radio> </el-radio>
</el-form-item> </el-form-item>
@ -49,18 +53,17 @@ export default {
name: 'crontab-hour', name: 'crontab-hour',
props: ['check', 'cron'], props: ['check', 'cron'],
methods: { methods: {
init() {
this.cycle01 = 0
this.cycle02 = 1
this.average01 = 0
this.average02 = 1
this.checkboxList = []
},
// //
radioChange() { radioChange() {
if (this.radioValue === 1) { if (this.radioValue === 1) {
this.$emit('update', 'hour', '*', 'hour'); this.$emit('update', 'hour', '*', 'hour');
this.$emit('update', 'day', '*', 'hour');
} else {
if (this.cron.min === '*') {
this.$emit('update', 'min', '0', 'hour');
}
if (this.cron.second === '*') {
this.$emit('update', 'second', '0', 'hour');
}
} }
switch (this.radioValue) { switch (this.radioValue) {
case 2: case 2:

View File

@ -2,7 +2,7 @@
<div> <div>
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="秒" v-if="shouldHide('second')"> <el-tab-pane label="秒" v-if="shouldHide('second')">
<CrontabSecond @update="updateCrontabValue" :check="checkNumber" ref="cronsecond" /> <CrontabSecond @update="updateCrontabValue" :check="checkNumber" ref="cronsecond"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="分钟" v-if="shouldHide('min')"> <el-tab-pane label="分钟" v-if="shouldHide('min')">
@ -65,33 +65,33 @@
<p class="title">时间表达式</p> <p class="title">时间表达式</p>
<table> <table>
<thead> <thead>
<th v-for="item of tabTitles" width="40" :key="item">{{item}}</th> <th v-for="item of tabTitles" width="40" :key="item">{{ item }}</th>
<th>Cron 表达式</th> <th>Cron 表达式</th>
</thead> </thead>
<tbody> <tbody>
<td> <td>
<span>{{crontabValueObj.second}}</span> <span>{{ crontabValueObj.second }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.min}}</span> <span>{{ crontabValueObj.min }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.hour}}</span> <span>{{ crontabValueObj.hour }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.day}}</span> <span>{{ crontabValueObj.day }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.month}}</span> <span>{{ crontabValueObj.month }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.week}}</span> <span>{{ crontabValueObj.week }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.year}}</span> <span>{{ crontabValueObj.year }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueString}}</span> <span>{{ crontabValueString }}</span>
</td> </td>
</tbody> </tbody>
</table> </table>
@ -188,7 +188,7 @@ export default {
insValue; insValue;
if (!this.$refs[refName]) return; if (!this.$refs[refName]) return;
this.$refs[refName].init()
if (arr.includes(name)) { if (arr.includes(name)) {
if (value === "*") { if (value === "*") {
insValue = 1; insValue = 1;
@ -324,7 +324,7 @@ export default {
}, },
}, },
computed: { computed: {
crontabValueString: function() { crontabValueString: function () {
let obj = this.crontabValueObj; let obj = this.crontabValueObj;
let str = let str =
obj.second + obj.second +
@ -358,7 +358,7 @@ export default {
// //
}, },
}, },
mounted: function() { mounted: function () {
this.resolveExp(); this.resolveExp();
}, },
}; };
@ -368,6 +368,7 @@ export default {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
} }
.popup-main { .popup-main {
position: relative; position: relative;
margin: 10px auto; margin: 10px auto;
@ -376,12 +377,14 @@ export default {
font-size: 12px; font-size: 12px;
overflow: hidden; overflow: hidden;
} }
.popup-title { .popup-title {
overflow: hidden; overflow: hidden;
line-height: 34px; line-height: 34px;
padding-top: 6px; padding-top: 6px;
background: #f2f2f2; background: #f2f2f2;
} }
.popup-result { .popup-result {
box-sizing: border-box; box-sizing: border-box;
line-height: 24px; line-height: 24px;
@ -390,6 +393,7 @@ export default {
border: 1px solid #ccc; border: 1px solid #ccc;
position: relative; position: relative;
} }
.popup-result .title { .popup-result .title {
position: absolute; position: absolute;
top: -28px; top: -28px;
@ -401,11 +405,13 @@ export default {
line-height: 30px; line-height: 30px;
background: #fff; background: #fff;
} }
.popup-result table { .popup-result table {
text-align: center; text-align: center;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
.popup-result table span { .popup-result table span {
display: block; display: block;
width: 100%; width: 100%;
@ -416,6 +422,7 @@ export default {
overflow: hidden; overflow: hidden;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
} }
.popup-result-scroll { .popup-result-scroll {
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;

View File

@ -50,11 +50,15 @@ export default {
name: 'crontab-min', name: 'crontab-min',
props: ['check', 'cron'], props: ['check', 'cron'],
methods: { methods: {
init() {
this.cycle01 = 1
this.cycle02 = 2
this.average01 = 0
this.average02 = 1
this.checkboxList = []
},
// //
radioChange() { radioChange() {
if (this.radioValue !== 1 && this.cron.second === '*') {
this.$emit('update', 'second', '0', 'min');
}
switch (this.radioValue) { switch (this.radioValue) {
case 1: case 1:
this.$emit('update', 'min', '*', 'min'); this.$emit('update', 'min', '*', 'min');

View File

@ -49,24 +49,17 @@ export default {
name: 'crontab-month', name: 'crontab-month',
props: ['check', 'cron'], props: ['check', 'cron'],
methods: { methods: {
init() {
this.cycle01 = 1
this.cycle02 = 2
this.average01 = 1
this.average02 = 1
this.checkboxList = []
},
// //
radioChange() { radioChange() {
if (this.radioValue === 1) { if (this.radioValue === 1) {
this.$emit('update', 'month', '*'); this.$emit('update', 'month', '*');
this.$emit('update', 'year', '*');
} else {
if (this.cron.day === '*') {
this.$emit('update', 'day', '0', 'month');
}
if (this.cron.hour === '*') {
this.$emit('update', 'hour', '0', 'month');
}
if (this.cron.min === '*') {
this.$emit('update', 'min', '0', 'month');
}
if (this.cron.second === '*') {
this.$emit('update', 'second', '0', 'month');
}
} }
switch (this.radioValue) { switch (this.radioValue) {
case 2: case 2:

View File

@ -25,7 +25,7 @@
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="4"> <el-radio v-model='radioValue' :label="4">
指定 指定
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%"> <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%" @change="ch">
<el-option v-for="item in 60" :key="item" :value="item-1">{{item-1}}</el-option> <el-option v-for="item in 60" :key="item" :value="item-1">{{item-1}}</el-option>
</el-select> </el-select>
</el-radio> </el-radio>
@ -49,12 +49,18 @@ export default {
name: 'crontab-second', name: 'crontab-second',
props: ['check', 'radioParent'], props: ['check', 'radioParent'],
methods: { methods: {
init() {
this.cycle01 = 1
this.cycle02 = 2
this.average01 = 0
this.average02 = 1
this.checkboxList = []
},
// //
radioChange() { radioChange() {
switch (this.radioValue) { switch (this.radioValue) {
case 1: case 1:
this.$emit('update', 'second', '*', 'second'); this.$emit('update', 'second', '*', 'second');
this.$emit('update', 'min', '*', 'second');
break; break;
case 2: case 2:
this.$emit('update', 'second', this.cycle01 + '-' + this.cycle02); this.$emit('update', 'second', this.cycle01 + '-' + this.cycle02);

View File

@ -15,31 +15,33 @@
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="3"> <el-radio v-model='radioValue' :label="3">
周期从星期 周期从星期
<el-input-number v-model='cycle01' :min="1" :max="7" /> - <el-input-number v-model='cycle01' :min="1" :max="7"/>
<el-input-number v-model='cycle02' :min="1" :max="7" /> -
<el-input-number v-model='cycle02' :min="1" :max="7"/>
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="4"> <el-radio v-model='radioValue' :label="4">
<el-input-number v-model='average01' :min="1" :max="4" /> 周的星期 <el-input-number v-model='average01' :min="1" :max="4"/>
<el-input-number v-model='average02' :min="1" :max="7" /> 周的星期
<el-input-number v-model='average02' :min="1" :max="7"/>
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="5"> <el-radio v-model='radioValue' :label="5">
本月最后一个星期 本月最后一个星期
<el-input-number v-model='weekday' :min="1" :max="7" /> <el-input-number v-model='weekday' :min="1" :max="7"/>
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="6"> <el-radio v-model='radioValue' :label="6">
指定 指定
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%"> <el-select clearable v-model="checkboxDescribeList" placeholder="可多选" multiple style="width:100%">
<el-option v-for="(item,index) of weekList" :key="index" :value="index+1">{{item}}</el-option> <el-option v-for="(item,index) of weekList" :key="index" :value="index+1">{{ item }}</el-option>
</el-select> </el-select>
</el-radio> </el-radio>
</el-form-item> </el-form-item>
@ -58,6 +60,7 @@ export default {
average01: 1, average01: 1,
average02: 1, average02: 1,
checkboxList: [], checkboxList: [],
checkboxDescribeList: [],
weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
checkNum: this.$options.propsData.check checkNum: this.$options.propsData.check
} }
@ -65,31 +68,32 @@ export default {
name: 'crontab-week', name: 'crontab-week',
props: ['check', 'cron'], props: ['check', 'cron'],
methods: { methods: {
checkChange(data) {
this.checkboxList = []
data.forEach(value => {
this.weekList.find((item, index) => {
if (item === value) {
this.checkboxList.push(index + 1)
}
})
})
},
init() {
this.workday = 1
this.cycle01 = 1
this.cycle02 = 2
this.average01 = 1
this.average02 = 1
this.checkboxList = []
this.checkboxDescribeList = []
},
// //
radioChange() { radioChange() {
if (this.radioValue === 1) {
this.$emit('update', 'week', '*');
this.$emit('update', 'year', '*');
} else {
if (this.cron.month === '*') {
this.$emit('update', 'month', '0', 'week');
}
if (this.cron.day === '*') {
this.$emit('update', 'day', '0', 'week');
}
if (this.cron.hour === '*') {
this.$emit('update', 'hour', '0', 'week');
}
if (this.cron.min === '*') {
this.$emit('update', 'min', '0', 'week');
}
if (this.cron.second === '*') {
this.$emit('update', 'second', '0', 'week');
}
}
switch (this.radioValue) { switch (this.radioValue) {
case 2: case 1:
this.$emit('update', 'week', '?'); this.$emit('update', 'week', '*');
break; break;
case 3: case 3:
this.$emit('update', 'week', this.cycle01 + '-' + this.cycle02); this.$emit('update', 'week', this.cycle01 + '-' + this.cycle02);
@ -104,6 +108,13 @@ export default {
this.$emit('update', 'week', this.checkboxString); this.$emit('update', 'week', this.checkboxString);
break; break;
} }
if (this.radioValue === 2) {
this.$emit('update', 'week', '?');
this.$emit('update', 'day', '*');
} else {
this.$emit('update', 'day', '?');
}
}, },
// radio // radio

View File

@ -57,23 +57,16 @@ export default {
name: 'crontab-year', name: 'crontab-year',
props: ['check', 'month', 'cron'], props: ['check', 'month', 'cron'],
methods: { methods: {
init() {
this.fullYear = Number(new Date().getFullYear())
this.cycle01 = 0
this.cycle02 = 0
this.average01 = 0
this.average02 = 1
this.checkboxList = []
},
// //
radioChange() { radioChange() {
if (this.cron.month === '*') {
this.$emit('update', 'month', '0', 'year');
}
if (this.cron.day === '*') {
this.$emit('update', 'day', '0', 'year');
}
if (this.cron.hour === '*') {
this.$emit('update', 'hour', '0', 'year');
}
if (this.cron.min === '*') {
this.$emit('update', 'min', '0', 'year');
}
if (this.cron.second === '*') {
this.$emit('update', 'second', '0', 'year');
}
switch (this.radioValue) { switch (this.radioValue) {
case 1: case 1:
this.$emit('update', 'year', ''); this.$emit('update', 'year', '');