mirror of https://github.com/jeecgboot/jeecg-boot
新增一种 Cron表达式 选择组件
zhangdaiscott
parent
4d5ac2b518
commit
432385fc14
|
|
@ -0,0 +1,246 @@
|
||||||
|
<template>
|
||||||
|
<div class="j-easy-cron">
|
||||||
|
<div class="content">
|
||||||
|
<div>
|
||||||
|
<a-tabs size="small" v-model="curtab">
|
||||||
|
<a-tab-pane tab="秒" key="second" v-if="!hideSecond">
|
||||||
|
<second-ui v-model="second" :disabled="disabled"></second-ui>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane tab="分" key="minute">
|
||||||
|
<minute-ui v-model="minute" :disabled="disabled"></minute-ui>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane tab="时" key="hour">
|
||||||
|
<hour-ui v-model="hour" :disabled="disabled"></hour-ui>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane tab="日" key="day">
|
||||||
|
<day-ui v-model="day" :week="week" :disabled="disabled"></day-ui>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane tab="月" key="month">
|
||||||
|
<month-ui v-model="month" :disabled="disabled"></month-ui>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane tab="周" key="week">
|
||||||
|
<week-ui v-model="week" :day="day" :disabled="disabled"></week-ui>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane tab="年" key="year" v-if="!hideYear && !hideSecond">
|
||||||
|
<year-ui v-model="year" :disabled="disabled"></year-ui>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
<a-divider/>
|
||||||
|
<!-- 执行时间预览 -->
|
||||||
|
<a-row :gutter="8">
|
||||||
|
<a-col :span="18" style="margin-top: 22px;">
|
||||||
|
<a-row :gutter="8">
|
||||||
|
<a-col :span="8" style="margin-bottom: 8px;">
|
||||||
|
<a-input addon-before="秒" v-model="inputValues.second" @blur="onInputBlur"/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="margin-bottom: 8px;">
|
||||||
|
<a-input addon-before="分" v-model="inputValues.minute" @blur="onInputBlur"/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="margin-bottom: 8px;">
|
||||||
|
<a-input addon-before="时" v-model="inputValues.hour" @blur="onInputBlur"/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="margin-bottom: 8px;">
|
||||||
|
<a-input addon-before="日" v-model="inputValues.day" @blur="onInputBlur"/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="margin-bottom: 8px;">
|
||||||
|
<a-input addon-before="月" v-model="inputValues.month" @blur="onInputBlur"/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="margin-bottom: 8px;">
|
||||||
|
<a-input addon-before="周" v-model="inputValues.week" @blur="onInputBlur"/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="margin-bottom: 8px;">
|
||||||
|
<a-input addon-before="年" v-model="inputValues.year" @blur="onInputBlur"/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="16" style="margin-bottom: 8px;">
|
||||||
|
<a-input addon-before="Cron" v-model="inputValues.cron" @blur="onInputCronBlur"/>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
|
||||||
|
<div>近十次执行时间（不含年）</div>
|
||||||
|
<a-textarea type="textarea" :value="preTimeList" :rows="5"/>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SecondUi from './tabs/second'
|
||||||
|
import MinuteUi from './tabs/minute'
|
||||||
|
import HourUi from './tabs/hour'
|
||||||
|
import DayUi from './tabs/day'
|
||||||
|
import WeekUi from './tabs/week'
|
||||||
|
import MonthUi from './tabs/month'
|
||||||
|
import YearUi from './tabs/year'
|
||||||
|
import CronParser from 'cron-parser'
|
||||||
|
import dateFormat from './format-date'
|
||||||
|
import { simpleDebounce } from '@/utils/util'
|
||||||
|
import ACol from 'ant-design-vue/es/grid/Col'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'easy-cron',
|
||||||
|
components: {
|
||||||
|
ACol,
|
||||||
|
SecondUi,
|
||||||
|
MinuteUi,
|
||||||
|
HourUi,
|
||||||
|
DayUi,
|
||||||
|
WeekUi,
|
||||||
|
MonthUi,
|
||||||
|
YearUi
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
cronValue: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideSecond: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideYear: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
remote: {
|
||||||
|
type: Function,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
curtab: this.hideSecond ? 'minute' : 'second',
|
||||||
|
second: '*',
|
||||||
|
minute: '*',
|
||||||
|
hour: '*',
|
||||||
|
day: '*',
|
||||||
|
month: '*',
|
||||||
|
week: '?',
|
||||||
|
year: '*',
|
||||||
|
inputValues: {second: '', minute: '', hour: '', day: '', month: '', week: '', year: '', cron: ''},
|
||||||
|
preTimeList: '执行预览，会忽略年份参数',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
cronValue_c() {
|
||||||
|
let result = []
|
||||||
|
if (!this.hideSecond) result.push(this.second ? this.second : '*')
|
||||||
|
result.push(this.minute ? this.minute : '*')
|
||||||
|
result.push(this.hour ? this.hour : '*')
|
||||||
|
result.push(this.day ? this.day : '*')
|
||||||
|
result.push(this.month ? this.month : '*')
|
||||||
|
result.push(this.week ? this.week : '?')
|
||||||
|
if (!this.hideYear && !this.hideSecond) result.push(this.year ? this.year : '*')
|
||||||
|
return result.join(' ')
|
||||||
|
},
|
||||||
|
cronValue_c2() {
|
||||||
|
const v = this.cronValue_c
|
||||||
|
if (this.hideYear || this.hideSecond) return v
|
||||||
|
const vs = v.split(' ')
|
||||||
|
return vs.slice(0, vs.length - 1).join(' ')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cronValue(newVal, oldVal) {
|
||||||
|
if (newVal === this.cronValue_c) {
|
||||||
|
// console.info('same cron value: ' + newVal)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.formatValue()
|
||||||
|
},
|
||||||
|
cronValue_c(newVal, oldVal) {
|
||||||
|
this.calTriggerList()
|
||||||
|
this.$emit('change', newVal)
|
||||||
|
|
||||||
|
Object.assign(this.inputValues, {
|
||||||
|
second: this.second,
|
||||||
|
minute: this.minute,
|
||||||
|
hour: this.hour,
|
||||||
|
day: this.day,
|
||||||
|
month: this.month,
|
||||||
|
week: this.week,
|
||||||
|
year: this.year,
|
||||||
|
cron: this.cronValue_c,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.formatValue()
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.calTriggerListInner()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatValue() {
|
||||||
|
if (!this.cronValue) return
|
||||||
|
const values = this.cronValue.split(' ').filter(item => !!item)
|
||||||
|
if (!values || values.length <= 0) return
|
||||||
|
let i = 0
|
||||||
|
if (!this.hideSecond) this.second = values[i++]
|
||||||
|
if (values.length > i) this.minute = values[i++]
|
||||||
|
if (values.length > i) this.hour = values[i++]
|
||||||
|
if (values.length > i) this.day = values[i++]
|
||||||
|
if (values.length > i) this.month = values[i++]
|
||||||
|
if (values.length > i) this.week = values[i++]
|
||||||
|
if (values.length > i) this.year = values[i]
|
||||||
|
},
|
||||||
|
calTriggerList: simpleDebounce(function () {
|
||||||
|
this.calTriggerListInner()
|
||||||
|
}, 500),
|
||||||
|
calTriggerListInner() {
|
||||||
|
// 设置了回调函数
|
||||||
|
if (this.remote) {
|
||||||
|
this.remote(this.cronValue_c, +new Date(), v => {
|
||||||
|
this.preTimeList = v
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const format = 'yyyy-MM-dd hh:mm:ss'
|
||||||
|
const options = {
|
||||||
|
currentDate: dateFormat(new Date(), format)
|
||||||
|
}
|
||||||
|
const iter = CronParser.parseExpression(this.cronValue_c2, options)
|
||||||
|
const result = []
|
||||||
|
for (let i = 1; i <= 10; i++) {
|
||||||
|
result.push(dateFormat(new Date(iter.next()), format))
|
||||||
|
}
|
||||||
|
this.preTimeList = result.length > 0 ? result.join('\n') : '无执行时间'
|
||||||
|
},
|
||||||
|
onInputBlur(){
|
||||||
|
this.second = this.inputValues.second
|
||||||
|
this.minute = this.inputValues.minute
|
||||||
|
this.hour = this.inputValues.hour
|
||||||
|
this.day = this.inputValues.day
|
||||||
|
this.month = this.inputValues.month
|
||||||
|
this.week = this.inputValues.week
|
||||||
|
this.year = this.inputValues.year
|
||||||
|
},
|
||||||
|
onInputCronBlur(event){
|
||||||
|
this.$emit('change', event.target.value)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'cronValue',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.j-easy-cron {
|
||||||
|
|
||||||
|
/deep/ .content {
|
||||||
|
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<div class="input-cron">
|
||||||
|
<a-input :placeholder="placeholder" v-model="editCronValue" :disabled="disabled">
|
||||||
|
<a slot="addonAfter" @click="showConfigDlg" class="config-btn" :disabled="disabled">
|
||||||
|
<a-icon type="setting"></a-icon>
|
||||||
|
选择
|
||||||
|
</a>
|
||||||
|
</a-input>
|
||||||
|
<j-modal :visible.sync="show" title="Cron表达式" width="800px">
|
||||||
|
<easy-cron
|
||||||
|
v-model="editCronValue"
|
||||||
|
:exeStartTime="exeStartTime"
|
||||||
|
:hideYear="hideYear"
|
||||||
|
:remote="remote"
|
||||||
|
:hideSecond="hideSecond"
|
||||||
|
style="width: 100%"
|
||||||
|
></easy-cron>
|
||||||
|
</j-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import EasyCron from './EasyCron.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'input-cron',
|
||||||
|
components: {EasyCron},
|
||||||
|
model: {
|
||||||
|
prop: 'cronValue',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
cronValue: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '800px'
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '请输入cron表达式'
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
exeStartTime: {
|
||||||
|
type: [Number, String, Object],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
hideSecond: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideYear: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
remote: {
|
||||||
|
type: Function,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editCronValue: this.cronValue,
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cronValue(newVal, oldVal) {
|
||||||
|
if (newVal === this.editCronValue) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editCronValue = newVal
|
||||||
|
},
|
||||||
|
editCronValue(newVal, oldVal) {
|
||||||
|
this.$emit('change', newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showConfigDlg() {
|
||||||
|
if (!this.disabled) {
|
||||||
|
this.show = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.config-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
const dateFormat = (date, block) => {
|
||||||
|
if (!date) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
let format = block || 'yyyy-MM-dd'
|
||||||
|
|
||||||
|
date = new Date(date)
|
||||||
|
|
||||||
|
const map = {
|
||||||
|
M: date.getMonth() + 1, // 月份
|
||||||
|
d: date.getDate(), // 日
|
||||||
|
h: date.getHours(), // 小时
|
||||||
|
m: date.getMinutes(), // 分
|
||||||
|
s: date.getSeconds(), // 秒
|
||||||
|
q: Math.floor((date.getMonth() + 3) / 3), // 季度
|
||||||
|
S: date.getMilliseconds() // 毫秒
|
||||||
|
}
|
||||||
|
|
||||||
|
format = format.replace(/([yMdhmsqS])+/g, (all, t) => {
|
||||||
|
let v = map[t]
|
||||||
|
if (v !== undefined) {
|
||||||
|
if (all.length > 1) {
|
||||||
|
v = `0${v}`
|
||||||
|
v = v.substr(v.length - 2)
|
||||||
|
}
|
||||||
|
return v
|
||||||
|
} else if (t === 'y') {
|
||||||
|
return (date.getFullYear().toString()).substr(4 - all.length)
|
||||||
|
}
|
||||||
|
return all
|
||||||
|
})
|
||||||
|
|
||||||
|
return format
|
||||||
|
}
|
||||||
|
|
||||||
|
export default dateFormat
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
// 原开源项目地址：https://gitee.com/toktok/easy-cron
|
||||||
|
|
||||||
|
import InputCron from './InputCron.vue'
|
||||||
|
|
||||||
|
InputCron.name = 'JEasyCron'
|
||||||
|
export default InputCron
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
export const WEEK_MAP_EN = {
|
||||||
|
'SUN': '0',
|
||||||
|
'MON': '1',
|
||||||
|
'TUE': '2',
|
||||||
|
'WED': '3',
|
||||||
|
'THU': '4',
|
||||||
|
'FRI': '5',
|
||||||
|
'SAT': '6'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const replaceWeekName = (c) => {
|
||||||
|
// console.info('after: ' + c)
|
||||||
|
if (c) {
|
||||||
|
Object.keys(WEEK_MAP_EN).forEach(k => {
|
||||||
|
c = c.replace(new RegExp(k, 'g'), WEEK_MAP_EN[k])
|
||||||
|
})
|
||||||
|
c = c.replace(new RegExp('7', 'g'), '0')
|
||||||
|
}
|
||||||
|
// console.info('after: ' + c)
|
||||||
|
return c
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
<template>
|
||||||
|
<div class="config-list">
|
||||||
|
<a-radio-group v-model="type">
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_NOT_SET" class="choice" :disabled="disableChoice">不设置</a-radio>
|
||||||
|
<span class="tip-info">日和周只能设置其中之一</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_EVERY" class="choice" :disabled="disableChoice">每日</a-radio>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_RANGE" class="choice" :disabled="disableChoice">区间</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.start"/>
|
||||||
|
日
|
||||||
|
至
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.end"/>
|
||||||
|
日
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_LOOP" class="choice" :disabled="disableChoice">循环</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.start"/>
|
||||||
|
日开始，间隔
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.interval"/>
|
||||||
|
日
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_WORK" class="choice" :disabled="disableChoice">工作日</a-radio>
|
||||||
|
本月
|
||||||
|
<a-input-number :disabled="type!==TYPE_WORK || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueWork"/>
|
||||||
|
日，最近的工作日
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_LAST" class="choice" :disabled="disableChoice">最后一日</a-radio>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_SPECIFY" class="choice" :disabled="disableChoice">指定</a-radio>
|
||||||
|
<div class="list">
|
||||||
|
<a-checkbox-group v-model="valueList">
|
||||||
|
<template v-for="i in maxValue+1">
|
||||||
|
<a-checkbox class="list-check-item" :key="`key-${i-1}`" :value="i-1" :disabled="type!==TYPE_SPECIFY || disabled">{{i-1}}</a-checkbox>
|
||||||
|
</template>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mixin from './mixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'day',
|
||||||
|
mixins: [mixin],
|
||||||
|
props: {
|
||||||
|
week: {
|
||||||
|
type: String,
|
||||||
|
default: '?'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
disableChoice() {
|
||||||
|
return (this.week && this.week !== '?') || this.disabled
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value_c(newVal, oldVal) {
|
||||||
|
// 数值变化
|
||||||
|
this.updateValue()
|
||||||
|
},
|
||||||
|
week(newVal, oldVal) {
|
||||||
|
// console.info('new week: ' + newVal)
|
||||||
|
this.updateValue()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateValue() {
|
||||||
|
this.$emit('change', this.disableChoice ? '?' : this.value_c)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.DEFAULT_VALUE = '*'
|
||||||
|
this.minValue = 1
|
||||||
|
this.maxValue = 31
|
||||||
|
this.valueRange.start = 1
|
||||||
|
this.valueRange.end = 31
|
||||||
|
this.valueLoop.start = 1
|
||||||
|
this.valueLoop.interval = 1
|
||||||
|
this.parseProp(this.prop)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "mixin.less";
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<div class="config-list">
|
||||||
|
<a-radio-group v-model="type">
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每时</a-radio>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.start"/>
|
||||||
|
时
|
||||||
|
至
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.end"/>
|
||||||
|
时
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.start"/>
|
||||||
|
时开始，间隔
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.interval"/>
|
||||||
|
时
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</a-radio>
|
||||||
|
<div class="list">
|
||||||
|
<a-checkbox-group v-model="valueList">
|
||||||
|
<template v-for="i in maxValue+1">
|
||||||
|
<a-checkbox class="list-check-item" :key="`key-${i-1}`" :value="i-1" :disabled="type!==TYPE_SPECIFY || disabled">{{i-1}}</a-checkbox>
|
||||||
|
</template>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mixin from './mixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'minute',
|
||||||
|
mixins: [mixin],
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value_c(newVal, oldVal) {
|
||||||
|
this.$emit('change', newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.DEFAULT_VALUE = '*'
|
||||||
|
this.minValue = 0
|
||||||
|
this.maxValue = 23
|
||||||
|
this.valueRange.start = 0
|
||||||
|
this.valueRange.end = 23
|
||||||
|
this.valueLoop.start = 0
|
||||||
|
this.valueLoop.interval = 1
|
||||||
|
this.parseProp(this.prop)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "mixin.less";
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<div class="config-list">
|
||||||
|
<a-radio-group v-model="type">
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每分</a-radio>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.start"/>
|
||||||
|
分
|
||||||
|
至
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.end"/>
|
||||||
|
分
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.start"/>
|
||||||
|
分开始，间隔
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.interval"/>
|
||||||
|
分
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</a-radio>
|
||||||
|
<div class="list">
|
||||||
|
<a-checkbox-group v-model="valueList">
|
||||||
|
<template v-for="i in maxValue+1">
|
||||||
|
<a-checkbox class="list-check-item" :key="`key-${i-1}`" :value="i-1" :disabled="type!==TYPE_SPECIFY || disabled">{{i-1}}</a-checkbox>
|
||||||
|
</template>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mixin from './mixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'minute',
|
||||||
|
mixins: [mixin],
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value_c(newVal, oldVal) {
|
||||||
|
this.$emit('change', newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.DEFAULT_VALUE = '*'
|
||||||
|
this.minValue = 0
|
||||||
|
this.maxValue = 59
|
||||||
|
this.valueRange.start = 0
|
||||||
|
this.valueRange.end = 59
|
||||||
|
this.valueLoop.start = 0
|
||||||
|
this.valueLoop.interval = 1
|
||||||
|
this.parseProp(this.prop)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "mixin.less";
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,151 @@
|
||||||
|
// 主要用于日和星期的互斥使用
|
||||||
|
const TYPE_NOT_SET = 'TYPE_NOT_SET'
|
||||||
|
const TYPE_EVERY = 'TYPE_EVERY'
|
||||||
|
const TYPE_RANGE = 'TYPE_RANGE'
|
||||||
|
const TYPE_LOOP = 'TYPE_LOOP'
|
||||||
|
const TYPE_WORK = 'TYPE_WORK'
|
||||||
|
const TYPE_LAST = 'TYPE_LAST'
|
||||||
|
const TYPE_SPECIFY = 'TYPE_SPECIFY'
|
||||||
|
|
||||||
|
const DEFAULT_VALUE = '?'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
model: {
|
||||||
|
prop: 'prop',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
prop: {
|
||||||
|
type: String,
|
||||||
|
default: DEFAULT_VALUE
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
const type = TYPE_EVERY
|
||||||
|
return {
|
||||||
|
DEFAULT_VALUE,
|
||||||
|
// 类型
|
||||||
|
type,
|
||||||
|
// 启用日或者星期互斥用
|
||||||
|
TYPE_NOT_SET,
|
||||||
|
TYPE_EVERY,
|
||||||
|
TYPE_RANGE,
|
||||||
|
TYPE_LOOP,
|
||||||
|
TYPE_WORK,
|
||||||
|
TYPE_LAST,
|
||||||
|
TYPE_SPECIFY,
|
||||||
|
// 对于不同的类型，所定义的值也有所不同
|
||||||
|
valueRange: {
|
||||||
|
start: 0,
|
||||||
|
end: 0
|
||||||
|
},
|
||||||
|
valueLoop: {
|
||||||
|
start: 0,
|
||||||
|
interval: 1
|
||||||
|
},
|
||||||
|
valueWeek: {
|
||||||
|
start: 0,
|
||||||
|
end: 0
|
||||||
|
},
|
||||||
|
valueList: [],
|
||||||
|
valueWork: 1,
|
||||||
|
maxValue: 0,
|
||||||
|
minValue: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
prop (newVal, oldVal) {
|
||||||
|
if (newVal === this.value_c) {
|
||||||
|
// console.info('skip ' + newVal)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.parseProp(newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
value_c () {
|
||||||
|
let result = []
|
||||||
|
switch (this.type) {
|
||||||
|
case TYPE_NOT_SET:
|
||||||
|
result.push('?')
|
||||||
|
break
|
||||||
|
case TYPE_EVERY:
|
||||||
|
result.push('*')
|
||||||
|
break
|
||||||
|
case TYPE_RANGE:
|
||||||
|
result.push(`${this.valueRange.start}-${this.valueRange.end}`)
|
||||||
|
break
|
||||||
|
case TYPE_LOOP:
|
||||||
|
result.push(`${this.valueLoop.start}/${this.valueLoop.interval}`)
|
||||||
|
break
|
||||||
|
case TYPE_WORK:
|
||||||
|
result.push(`${this.valueWork}W`)
|
||||||
|
break
|
||||||
|
case TYPE_LAST:
|
||||||
|
result.push('L')
|
||||||
|
break
|
||||||
|
case TYPE_SPECIFY:
|
||||||
|
result.push(this.valueList.join(','))
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
result.push(this.DEFAULT_VALUE)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return result.length > 0 ? result.join('') : this.DEFAULT_VALUE
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
parseProp (value) {
|
||||||
|
if (value === this.value_c) {
|
||||||
|
// console.info('same ' + value)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (typeof (this.preProcessProp) === 'function') {
|
||||||
|
value = this.preProcessProp(value)
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
if (!value || value === this.DEFAULT_VALUE) {
|
||||||
|
this.type = TYPE_EVERY
|
||||||
|
} else if (value.indexOf('?') >= 0) {
|
||||||
|
this.type = TYPE_NOT_SET
|
||||||
|
} else if (value.indexOf('-') >= 0) {
|
||||||
|
this.type = TYPE_RANGE
|
||||||
|
const values = value.split('-')
|
||||||
|
if (values.length >= 2) {
|
||||||
|
this.valueRange.start = parseInt(values[0])
|
||||||
|
this.valueRange.end = parseInt(values[1])
|
||||||
|
}
|
||||||
|
} else if (value.indexOf('/') >= 0) {
|
||||||
|
this.type = TYPE_LOOP
|
||||||
|
const values = value.split('/')
|
||||||
|
if (values.length >= 2) {
|
||||||
|
this.valueLoop.start = value[0] === '*' ? 0 : parseInt(values[0])
|
||||||
|
this.valueLoop.interval = parseInt(values[1])
|
||||||
|
}
|
||||||
|
} else if (value.indexOf('W') >= 0) {
|
||||||
|
this.type = TYPE_WORK
|
||||||
|
const values = value.split('W')
|
||||||
|
if (!values[0] && !isNaN(values[0])) {
|
||||||
|
this.valueWork = parseInt(values[0])
|
||||||
|
}
|
||||||
|
} else if (value.indexOf('L') >= 0) {
|
||||||
|
this.type = TYPE_LAST
|
||||||
|
const values = value.split('L')
|
||||||
|
this.valueLast = parseInt(values[0])
|
||||||
|
} else if (value.indexOf(',') >= 0 || !isNaN(value)) {
|
||||||
|
this.type = TYPE_SPECIFY
|
||||||
|
this.valueList = value.split(',').map(item => parseInt(item))
|
||||||
|
} else {
|
||||||
|
this.type = TYPE_EVERY
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// console.info(e)
|
||||||
|
this.type = TYPE_EVERY
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
|
||||||
|
.config-list {
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 10px 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choice {
|
||||||
|
padding: 5px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.w60 {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
.w80 {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-check-item {
|
||||||
|
padding: 1px 3px;
|
||||||
|
width: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-info {
|
||||||
|
color: #999
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<div class="config-list">
|
||||||
|
<a-radio-group v-model="type">
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每月</a-radio>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.start"/>
|
||||||
|
月
|
||||||
|
至
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.end"/>
|
||||||
|
月
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.start"/>
|
||||||
|
月开始，间隔
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.interval"/>
|
||||||
|
月
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</a-radio>
|
||||||
|
<div class="list">
|
||||||
|
<a-checkbox-group v-model="valueList">
|
||||||
|
<template v-for="i in maxValue+1">
|
||||||
|
<a-checkbox class="list-check-item" :key="`key-${i-1}`" :value="i-1" :disabled="type!==TYPE_SPECIFY || disabled">{{i-1}}</a-checkbox>
|
||||||
|
</template>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mixin from './mixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'month',
|
||||||
|
mixins: [mixin],
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value_c(newVal, oldVal) {
|
||||||
|
this.$emit('change', newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.DEFAULT_VALUE = '*'
|
||||||
|
this.minValue = 1
|
||||||
|
this.maxValue = 12
|
||||||
|
this.valueRange.start = 1
|
||||||
|
this.valueRange.end = 12
|
||||||
|
this.valueLoop.start = 1
|
||||||
|
this.valueLoop.interval = 1
|
||||||
|
this.parseProp(this.prop)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "mixin.less";
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<template>
|
||||||
|
<div class="config-list">
|
||||||
|
<a-radio-group v-model="type">
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每秒</a-radio>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.start"/>
|
||||||
|
秒
|
||||||
|
至
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.end"/>
|
||||||
|
秒
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.start"/>
|
||||||
|
秒开始，间隔
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.interval"/>
|
||||||
|
秒
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</a-radio>
|
||||||
|
<div class="list">
|
||||||
|
<a-checkbox-group v-model="valueList">
|
||||||
|
<template v-for="i in maxValue+1">
|
||||||
|
<a-checkbox class="list-check-item" :key="`key-${i-1}`" :value="i-1" :disabled="type!==TYPE_SPECIFY || disabled">{{i-1}}</a-checkbox>
|
||||||
|
</template>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mixin from './mixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'second',
|
||||||
|
mixins: [mixin],
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value_c(newVal, oldVal) {
|
||||||
|
this.$emit('change', newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.DEFAULT_VALUE = '*'
|
||||||
|
this.minValue = 0
|
||||||
|
this.maxValue = 59
|
||||||
|
this.valueRange.start = 0
|
||||||
|
this.valueRange.end = 59
|
||||||
|
this.valueLoop.start = 0
|
||||||
|
this.valueLoop.interval = 1
|
||||||
|
// console.info('created')
|
||||||
|
this.parseProp(this.prop)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "mixin.less";
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
<template>
|
||||||
|
<div class="config-list">
|
||||||
|
<a-radio-group v-model="type">
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_NOT_SET" class="choice" :disabled="disableChoice">不设置</a-radio>
|
||||||
|
<span class="tip-info">日和周只能设置其中之一</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_RANGE" class="choice" :disabled="disableChoice">区间</a-radio>
|
||||||
|
从
|
||||||
|
<a-select v-model="valueRange.start" class="w80" :disabled="type!==TYPE_RANGE || disableChoice">
|
||||||
|
<template v-for="(v, k) of WEEK_MAP">
|
||||||
|
<a-select-option :value="v">{{k}}</a-select-option>
|
||||||
|
</template>
|
||||||
|
</a-select>
|
||||||
|
至
|
||||||
|
<a-select v-model="valueRange.end" class="w80" :disabled="type!==TYPE_RANGE || disableChoice">
|
||||||
|
<template v-for="(v, k) of WEEK_MAP">
|
||||||
|
<a-select-option :value="v">{{k}}</a-select-option>
|
||||||
|
</template>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_LOOP" class="choice" :disabled="disableChoice">循环</a-radio>
|
||||||
|
从
|
||||||
|
<a-select v-model="valueLoop.start" class="w80" :disabled="type!==TYPE_LOOP || disableChoice">
|
||||||
|
<template v-for="(v, k) of WEEK_MAP">
|
||||||
|
<a-select-option :value="v">{{k}}</a-select-option>
|
||||||
|
</template>
|
||||||
|
</a-select>
|
||||||
|
开始，间隔
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.interval"/>
|
||||||
|
天
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_SPECIFY" class="choice" :disabled="disableChoice">指定</a-radio>
|
||||||
|
<div class="list">
|
||||||
|
<a-checkbox-group v-model="valueList">
|
||||||
|
<template v-for="i in maxValue+1">
|
||||||
|
<a-checkbox class="list-check-item" :key="`key-${i-1}`" :value="i-1" :disabled="type!==TYPE_SPECIFY || disabled">{{i-1}}</a-checkbox>
|
||||||
|
</template>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mixin from './mixin'
|
||||||
|
import { replaceWeekName, WEEK_MAP_EN } from './const.js'
|
||||||
|
|
||||||
|
const WEEK_MAP = {
|
||||||
|
'周日': 0,
|
||||||
|
'周一': 1,
|
||||||
|
'周二': 2,
|
||||||
|
'周三': 3,
|
||||||
|
'周四': 4,
|
||||||
|
'周五': 5,
|
||||||
|
'周六': 6
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'week',
|
||||||
|
mixins: [mixin],
|
||||||
|
props: {
|
||||||
|
day: {
|
||||||
|
type: String,
|
||||||
|
default: '*'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
WEEK_MAP,
|
||||||
|
WEEK_MAP_EN
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
disableChoice() {
|
||||||
|
return (this.day && this.day !== '?') || this.disabled
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value_c(newVal, oldVal) {
|
||||||
|
// 如果设置日，那么星期就直接不设置
|
||||||
|
this.updateValue()
|
||||||
|
},
|
||||||
|
day(newVal) {
|
||||||
|
// console.info('new day: ' + newVal)
|
||||||
|
this.updateValue()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateValue() {
|
||||||
|
this.$emit('change', this.disableChoice ? '?' : this.value_c)
|
||||||
|
},
|
||||||
|
preProcessProp(c) {
|
||||||
|
return replaceWeekName(c)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.DEFAULT_VALUE = '*'
|
||||||
|
// 0,7表示周日 1表示周一
|
||||||
|
this.minValue = 0
|
||||||
|
this.maxValue = 6
|
||||||
|
this.valueRange.start = 0
|
||||||
|
this.valueRange.end = 6
|
||||||
|
this.valueLoop.start = 2
|
||||||
|
this.valueLoop.interval = 1
|
||||||
|
this.parseProp(this.prop)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "mixin.less";
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<div class="config-list">
|
||||||
|
<a-radio-group v-model="type">
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每年</a-radio>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :min="0" :precision="0" class="w60" v-model="valueRange.start"/>
|
||||||
|
年
|
||||||
|
至
|
||||||
|
<a-input-number :disabled="type!==TYPE_RANGE || disabled" :min="1" :precision="0" class="w60" v-model="valueRange.end"/>
|
||||||
|
年
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
|
||||||
|
从
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :min="0" :precision="0" class="w60" v-model="valueLoop.start"/>
|
||||||
|
年开始，间隔
|
||||||
|
<a-input-number :disabled="type!==TYPE_LOOP || disabled" :min="1" :precision="0" class="w60" v-model="valueLoop.interval"/>
|
||||||
|
年
|
||||||
|
</div>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mixin from './mixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'year',
|
||||||
|
mixins: [mixin],
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value_c(newVal, oldVal) {
|
||||||
|
// console.info('change:' + newVal)
|
||||||
|
this.$emit('change', newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const nowYear = (new Date()).getFullYear()
|
||||||
|
this.DEFAULT_VALUE = '*'
|
||||||
|
this.minValue = 0
|
||||||
|
this.maxValue = 0
|
||||||
|
this.valueRange.start = nowYear
|
||||||
|
this.valueRange.end = nowYear + 100
|
||||||
|
this.valueLoop.start = nowYear
|
||||||
|
this.valueLoop.interval = 1
|
||||||
|
// console.info('created')
|
||||||
|
this.parseProp(this.prop)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "mixin.less";
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
import CronParser from 'cron-parser'
|
||||||
|
import { replaceWeekName } from './tabs/const'
|
||||||
|
|
||||||
|
export default (rule, value, callback) => {
|
||||||
|
// 没填写就不校验
|
||||||
|
if (!value) {
|
||||||
|
callback()
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
const values = value.split(' ').filter(item => !!item)
|
||||||
|
if (values.length > 7) {
|
||||||
|
callback(new Error('Cron表达式最多7项！'))
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// 检查第7项
|
||||||
|
let e = value
|
||||||
|
if (values.length === 7) {
|
||||||
|
const year = replaceWeekName(values[6])
|
||||||
|
if (year !== '*' && year !== '?') {
|
||||||
|
let yearValues = []
|
||||||
|
if (year.indexOf('-') >= 0) {
|
||||||
|
yearValues = year.split('-')
|
||||||
|
} else if (year.indexOf('/')) {
|
||||||
|
yearValues = year.split('/')
|
||||||
|
} else {
|
||||||
|
yearValues = [year]
|
||||||
|
}
|
||||||
|
// console.info(yearValues)
|
||||||
|
// 判断是否都是数字
|
||||||
|
const checkYear = yearValues.some(item => isNaN(item))
|
||||||
|
if (checkYear) {
|
||||||
|
callback(new Error('Cron表达式参数[年]错误：' + year))
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 取其中的前六项
|
||||||
|
e = values.slice(0, 6).join(' ')
|
||||||
|
}
|
||||||
|
// 6位 没有年
|
||||||
|
// 5位没有秒、年
|
||||||
|
let result = true
|
||||||
|
try {
|
||||||
|
const iter = CronParser.parseExpression(e)
|
||||||
|
iter.next()
|
||||||
|
callback()
|
||||||
|
} catch (e) {
|
||||||
|
callback(new Error('Cron表达式错误：' + e))
|
||||||
|
result = false
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue