<template> <a-modal title="cron表达式" :width="modalWidth" :visible="visible" :confirmLoading="confirmLoading" @ok="change" @cancel="close" cancelText="关闭"> <div class="card-container"> <a-tabs type="card"> <a-tab-pane key="1" type="card"> <span slot="tab"><a-icon type="schedule"/> 秒</span> <a-radio-group v-model="result.second.cronEvery"> <a-row> <a-radio value="1">每一秒钟</a-radio> </a-row> <a-row> <a-radio value="2">每隔 <a-input-number size="small" v-model="result.second.incrementIncrement" :min="1" :max="60"></a-input-number> 秒执行 从 <a-input-number size="small" v-model="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="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="result.second.rangeStart" :min="1" :max="60"></a-input-number> 到 <a-input-number size="small" v-model="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"> <span slot="tab"><a-icon type="schedule"/>分</span> <div class="tabBody"> <a-radio-group v-model="result.minute.cronEvery"> <a-row> <a-radio value="1">每一分钟</a-radio> </a-row> <a-row> <a-radio value="2">每隔 <a-input-number size="small" v-model="result.minute.incrementIncrement" :min="1" :max="60"></a-input-number> 分执行 从 <a-input-number size="small" v-model="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="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="result.minute.rangeStart" :min="1" :max="60"></a-input-number> 到 <a-input-number size="small" v-model="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"> <span slot="tab"><a-icon type="schedule"/> 时</span> <div class="tabBody"> <a-radio-group v-model="result.hour.cronEvery"> <a-row> <a-radio value="1">每一小时</a-radio> </a-row> <a-row> <a-radio value="2">每隔 <a-input-number size="small" v-model="result.hour.incrementIncrement" :min="0" :max="23"></a-input-number> 小时执行 从 <a-input-number size="small" v-model="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="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="result.hour.rangeStart" :min="0" :max="23"></a-input-number> 到 <a-input-number size="small" v-model="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"> <span slot="tab"><a-icon type="schedule"/> 天</span> <div class="tabBody"> <a-radio-group v-model="result.day.cronEvery"> <a-row> <a-radio value="1">每一天</a-radio> </a-row> <a-row> <a-radio value="2">每隔 <a-input-number size="small" v-model="result.week.incrementIncrement" :min="1" :max="7"></a-input-number> 周执行 从 <a-select size="small" v-model="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="result.day.incrementIncrement" :min="1" :max="31"></a-input-number> 天执行 从 <a-input-number size="small" v-model="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="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="result.day.specificSpecific"> <a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index">{{ 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="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="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="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="result.week.cronNthDayNth" :min="1" :max="5"></a-input-number> 个 <a-select size="small" v-model="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"> <span slot="tab"><a-icon type="schedule"/> 月</span> <div class="tabBody"> <a-radio-group v-model="result.month.cronEvery"> <a-row> <a-radio value="1">每一月</a-radio> </a-row> <a-row> <a-radio value="2">每隔 <a-input-number size="small" v-model="result.month.incrementIncrement" :min="0" :max="12"></a-input-number> 月执行 从 <a-input-number size="small" v-model="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="result.month.specificSpecific"> <a-select-option v-for="(val,index) in Array(12)" :key="index" :value="index">{{ index + 1 }} </a-select-option> </a-select> </a-row> <a-row> <a-radio value="4">从 <a-input-number size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input-number> 到 <a-input-number size="small" v-model="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"> <span slot="tab"><a-icon type="schedule"/> 年</span> <div class="tabBody"> <a-radio-group v-model="result.year.cronEvery"> <a-row> <a-radio value="1">每一年</a-radio> </a-row> <a-row> <a-radio value="2">每隔 <a-input-number size="small" v-model="result.year.incrementIncrement" :min="1" :max="99"></a-input-number> 年执行 从 <a-input-number size="small" v-model="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="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="result.year.rangeStart" :min="2019" :max="2119"></a-input-number> 到 <a-input-number size="small" v-model="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">{{ this.cron.label }}</span> </div> </div> </a-modal> </template> <script> import pick from 'lodash.pick' export default { name: 'VueCron', props: ['data', 'i18n'], data() { return { visible: false, confirmLoading: false, size: 'large', weekDays: ['天', '一', '二', '三', '四', '五', '六'].map(val => '星期' + val), result: { 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: '', cronDaysNearestWeekday: '', }, 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: '' }, output: { second: { cronEvery: '', incrementStart: '', incrementIncrement: '', rangeStart: '', rangeEnd: '', specificSpecific: [], }, minute: { cronEvery: '', incrementStart: '', incrementIncrement: '', rangeStart: '', rangeEnd: '', specificSpecific: [], }, hour: { cronEvery: '', incrementStart: '', incrementIncrement: '', rangeStart: '', rangeEnd: '', specificSpecific: [], }, day: { cronEvery: '', incrementStart: '', incrementIncrement: '', rangeStart: '', rangeEnd: '', specificSpecific: [], cronLastSpecificDomDay: '', cronDaysBeforeEomMinus: '', cronDaysNearestWeekday: '', }, week: { cronEvery: '', incrementStart: '', incrementIncrement: '', specificSpecific: [], cronNthDayDay: '', cronNthDayNth: '', }, month: { cronEvery: '', incrementStart: '', incrementIncrement: '', rangeStart: '', rangeEnd: '', specificSpecific: [], }, year: { cronEvery: '', incrementStart: '', incrementIncrement: '', rangeStart: '', rangeEnd: '', specificSpecific: [], } } } }, computed: { modalWidth() { return 608; }, text() { return Language['cn'] }, 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 { value: this.result, label: `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '*'} ${this.yearsText || '*'}` } }, }, watch: { data() { //this.rest(this.data); } }, methods: { show() { //this.rest(pick(this.data.value,'second','minute','hour','day','week','month','year')); //this.rest(this.data.value); Object.assign(this.data.value, this.result); console.log('data初始化', this.data); //this.result = this.data.value; this.visible = true; }, getValue() { return this.cron; }, change() { console.log('返回前', this.cron); this.$emit('change', this.cron); this.close(); this.visible = false; }, close() { this.visible = false; //this.$emit('close') }, rest(data) { for (let i in data) { console.log(data[i]); if (data[i] instanceof Object) { this.rest(data[i]) } else { switch (typeof data[i]) { case 'object': data[i] = []; break; case 'string': data[i] = ''; break; case 'number': data[i] = null; break; } } } }, callback(key) { //console.log(key) } } } </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-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>