1.新建一个cron定时器组件
<template><div class="layout"><!-- <el-popoverv-model="visible"placement="bottom"width="500"trigger="click"> --><div class="form"><el-row><el-col :span="8"><el-selectv-model="type"placeholder="请选择类型"style="width: 112px"@change="typeChange"><el-option label="每天" value="每天" /><el-option label="每周" value="每周" /><el-option label="每月" value="每月" /><el-option label="固定" value="固定" /></el-select></el-col><el-col :span="8"><el-selectv-show="type == '每周'"v-model="week"value-key="cron"placeholder="请选择星期"style="width: 112px"><el-optionv-for="(item, index) in weekOption":key="item.cron":label="item.title":value="item"/></el-select></el-col><el-col :span="8"><el-selectv-show="type == '每月'"v-model="month"value-key="cron"placeholder="请选择日期"style="width: 112px"><el-optionv-for="(item, index) in monthOption":key="item.cron":label="item.title":value="item"/></el-select></el-col><el-col :span="8"><el-time-pickerv-if="type !== '固定'"v-model="time"placeholder="选择时间"value-format="HH:mm:ss"style="width: 100%"/></el-col><el-col :span="8"><el-time-pickerv-if="type == '固定'"v-model="fixed"placeholder="选择时间"value-format="HH:mm:ss"style="width: 100%"/></el-col></el-row><div class="footer"><!-- <el-button size="mini" type="text" @click="handleClose">取消</el-button> --><el-button type="primary" size="mini" @click="handleSummit">确定</el-button></div></div><!-- <el-buttonslot="reference"v-model="value"type="primary">生成 cron</el-button> --><!-- <el-input slot="reference" v-model="value" /> --><!-- </el-popover> --></div>
</template>
<script>
export default {props: {timeCronStr: {type: String,default: ''}},data() {return {visible: false,value: '',type: '每天', // 天\周\月week: null, // 星期几month: null, // 几号fixed: '', //固定time: '', // 时间weekOption: [{title: '星期一',value: '星期一',cron: 2},{title: '星期二',value: '星期二',cron: 3},{title: '星期三',value: '星期三',cron: 4},{title: '星期四',value: '星期四',cron: 5},{title: '星期五',value: '星期五',cron: 6},{title: '星期六',value: '星期六',cron: 7},{title: '星期日',value: '星期日',cron: 1}],monthOption: []};},created() {this.initData();},mounted() {},methods: {initData() {const arr = [];for (let i = 1; i < 32; i++) {arr.push({title: i + '号',value: i + '号',cron: i});}this.monthOption = arr;if (this.timeCronStr) {this.value = this.timeCronStr;const valueArr = this.timeCronStr.split(',');const valueArrLen = valueArr.length;this.type = valueArr[0];this.time = valueArr[valueArrLen - 1];if (valueArrLen > 2) {// 说明是每月 或 每周if (valueArr[1].indexOf('星期') > -1) {// 每周this.weekOption.map((v) => {if (v.title === valueArr[1]) {this.week = v;}});} else {this.monthOption.map((v) => {if (v.title === valueArr[1]) {this.month = v;}});}}}},typeChange(t) {if (t === '每周' && !this.week) {this.week = this.weekOption[0];}if (t === '每月' && !this.month) {this.month = this.monthOption[0];}},handleSummit() {// if (this.time == '') {// this.$message({// message: '请选择时间!',// type: 'warning'// });// return;// }const dataArr = [];let timeCron;const clockCornArr = this.time.split(':').reverse();const clockCornArr2 = this.fixed.split(':').reverse();// if (this.type === '每天') {// dataArr.push(this.type, this.time);// timeCron = clockCornArr.join(' ') + ' * * ?';// } else {// if (this.type === '每月') {// dataArr.push(this.type, this.month.title, this.time);// timeCron = clockCornArr.join(' ') + ' ' + this.month.cron + ' * ?';// } else {// // 每周// dataArr.push(this.type, this.week.title, this.time);// timeCron = clockCornArr.join(' ') + ' ? * ' + this.week.cron;// }// }// 29 29 16 * * ? * 按天// 19 30 16 * * 2,3 * 按周// 44 30 16 2,4,21 * ? * 按月if (this.type === '每天') {dataArr.push(this.type, this.time);timeCron = clockCornArr.join(' ') + ' * * ? *';// timeCron = clockCornArr.join(' ') + ' * * ? ';} else if (this.type === '每月') {dataArr.push(this.type, this.month.title, this.time);timeCron = clockCornArr.join(' ') + ' ' + this.month.cron + ' * ? *';// timeCron = clockCornArr.join(' ') + ' ' + this.month.cron + ' * ? ';} else if (this.type === '每周') {dataArr.push(this.type, this.week.title, this.time);// timeCron =// clockCornArr.join(' ') +// ' * * ' +// (this.week.cron - 1) +// '' +// this.week.cron +// ' * ';timeCron = clockCornArr.join(' ') + ' ? * ' + this.week.cron;// timeCron = clockCornArr.join(' ') + ' ? * ' + this.week.cron + ' * ';// timeCron = clockCornArr.join(' ') + ' ? * ' + this.week.cron;} else if (this.type === '固定') {console.log(this.fixed, '固定');dataArr.push(this.type, this.fixed);timeCron = clockCornArr2.join(' ') + ' * * ? *';// timeCron = clockCornArr2.join(' ') + ' * * ?';}// this.value = dataArr.join(',');// console.log('clockCornArr', clockCornArr);this.visible = false;// this.$emit('change', this.value, dataArr, timeCron); // 每月,1号,14:52:36 和 36 52 14 1 * ?this.$emit('change', timeCron); // 每月,1号,14:52:36 和 36 52 14 1 * ?}}
};
</script>
<style lang="scss" scoped>
.layout {// display: flex;padding: 10px;text-align: center;
}
.form {padding: 12px;height: 150px;
}
.footer {text-align: right;margin-top: 50px;
}
</style>
2.页面引用 并使用组件
import Vcrontab from '@/components/Vcrontab';<el-dialogwidth="25%"title="Cron表达式生成器":visible.sync="openCron"append-to-bodydestroy-on-closeclass="scrollbar"><!-- @change="changeVal" --><Vcrontab @change="changeVal" /></el-dialog>
3.页面中方法
changeVal(timeCron) {// console.log(timeCron, '子传父');svCornEdit({ cronExpression: timeCron }).then((res) => {console.log(res);this.openCron = false;this.getBase();});},/** cron表达式按钮操作 */handleCron() {this.openCron = true;},// cron表达式转时间cronChangeDate(str) {var toDate = {};if (!str) {toDate.loopType = '单次循环';} else {var result = str.split(' ').join('');var nArr = str.split(' ');var countData = this.getPlaceholderCount(result);// console.log(countData, 'countData');if (countData.count1 === 1 && countData.count2 === 1) {// 只有一个'?'一个'*'则是按周循环toDate.loopType = '周';var keys = nArr[5];var en2cnMap = {1: '周日',2: '周一',3: '周二',4: '周三',5: '周四',6: '周五',7: '周六'};var cnKeys = keys.split(',').map(function (key, idx) {return en2cnMap[key];});toDate.loopValue = cnKeys.join(',');} else if (countData.count1 + countData.count2 === 3) {toDate.loopType = '月';var mot = [];var mkeys = nArr[3].split(',');for (var i = 0; i < mkeys.length; i++) {let mo = mkeys[i] + '号';mot.push(mo);}toDate.loopValue = mot.join(',');} else {toDate.loopType = '日';}toDate.loopTime = nArr[2] + ':' + nArr[1] + ':' + nArr[0];}let data = '';if (!toDate.loopValue) {data = '每' + toDate.loopType + ' ' + toDate.loopTime;} else {data ='每' +toDate.loopType +' ' +toDate.loopValue +' ' +toDate.loopTime;}console.log(data, 'data[[[[]]]]');this.cronZ = data;// return data;},// 统计字符串中包含某个字符的个数getPlaceholderCount(strSource) {var count1 = 0; // ?的个数var count2 = 0; // *的个数strSource.replace(/\*|\?/g, function (m, i) {if (m === '?') {count1++;} else if (m === '*') {count2++;}});var obj = {};obj.count1 = count1; // ?obj.count2 = count2; // *// console.log(obj, 'obj');return obj; //返回一个对象，根据需要得到想要的值},getBase() {homeBaseData().then((res) => {this.baseData = res.data;let cron = res.data.severCorn;return this.cronChangeDate(cron);});},
