自己封装的cron表达式组件

1.新建一个cron定时器组件

<template>
  <div class="layout">
    <!-- <el-popover
      v-model="visible"
      placement="bottom"
      width="500"
      trigger="click"
    > -->
    <div class="form">
      <el-row>
        <el-col :span="8">
          <el-select
            v-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-select
            v-show="type == '每周'"
            v-model="week"
            value-key="cron"
            placeholder="请选择星期"
            style="width: 112px"
          >
            <el-option
              v-for="(item, index) in weekOption"
              :key="item.cron"
              :label="item.title"
              :value="item"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select
            v-show="type == '每月'"
            v-model="month"
            value-key="cron"
            placeholder="请选择日期"
            style="width: 112px"
          >
            <el-option
              v-for="(item, index) in monthOption"
              :key="item.cron"
              :label="item.title"
              :value="item"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-time-picker
            v-if="type !== '固定'"
            v-model="time"
            placeholder="选择时间"
            value-format="HH:mm:ss"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="8">
          <el-time-picker
            v-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-button
        slot="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-dialog
      width="25%"
      title="Cron表达式生成器"
      :visible.sync="openCron"
      append-to-body
      destroy-on-close
      class="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);
      });
    },