min.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <el-form size="small">
  3. <el-form-item>
  4. <el-radio v-model='radioValue' :label="1">
  5. 分钟,允许的通配符[, - * /]
  6. </el-radio>
  7. </el-form-item>
  8. <el-form-item>
  9. <el-radio v-model='radioValue' :label="2">
  10. 周期从
  11. <el-input-number v-model='cycle01' :min="0" :max="60" /> -
  12. <el-input-number v-model='cycle02' :min="0" :max="60" /> 分钟
  13. </el-radio>
  14. </el-form-item>
  15. <el-form-item>
  16. <el-radio v-model='radioValue' :label="3">
  17. <el-input-number v-model='average01' :min="0" :max="60" /> 分钟开始,每
  18. <el-input-number v-model='average02' :min="0" :max="60" /> 分钟执行一次
  19. </el-radio>
  20. </el-form-item>
  21. <el-form-item>
  22. <el-radio v-model='radioValue' :label="4">
  23. 指定
  24. <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
  25. <el-option v-for="item in 60" :key="item" :value="item-1">{{item-1}}</el-option>
  26. </el-select>
  27. </el-radio>
  28. </el-form-item>
  29. </el-form>
  30. </template>
  31. <script>
  32. export default {
  33. data() {
  34. return {
  35. radioValue: 1,
  36. cycle01: 1,
  37. cycle02: 2,
  38. average01: 0,
  39. average02: 1,
  40. checkboxList: [],
  41. checkNum: this.$options.propsData.check
  42. }
  43. },
  44. name: 'crontab-min',
  45. props: ['check', 'cron'],
  46. methods: {
  47. // 单选按钮值变化时
  48. radioChange() {
  49. if (this.radioValue !== 1 && this.cron.second === '*') {
  50. this.$emit('update', 'second', '0', 'min');
  51. }
  52. switch (this.radioValue) {
  53. case 1:
  54. this.$emit('update', 'min', '*', 'min');
  55. this.$emit('update', 'hour', '*', 'min');
  56. break;
  57. case 2:
  58. this.$emit('update', 'min', this.cycle01 + '-' + this.cycle02, 'min');
  59. break;
  60. case 3:
  61. this.$emit('update', 'min', this.average01 + '/' + this.average02, 'min');
  62. break;
  63. case 4:
  64. this.$emit('update', 'min', this.checkboxString, 'min');
  65. break;
  66. }
  67. },
  68. // 周期两个值变化时
  69. cycleChange() {
  70. if (this.radioValue == '2') {
  71. this.$emit('update', 'min', this.cycleTotal, 'min');
  72. }
  73. },
  74. // 平均两个值变化时
  75. averageChange() {
  76. if (this.radioValue == '3') {
  77. this.$emit('update', 'min', this.averageTotal, 'min');
  78. }
  79. },
  80. // checkbox值变化时
  81. checkboxChange() {
  82. if (this.radioValue == '4') {
  83. this.$emit('update', 'min', this.checkboxString, 'min');
  84. }
  85. },
  86. },
  87. watch: {
  88. "radioValue": "radioChange",
  89. 'cycleTotal': 'cycleChange',
  90. 'averageTotal': 'averageChange',
  91. 'checkboxString': 'checkboxChange',
  92. },
  93. computed: {
  94. // 计算两个周期值
  95. cycleTotal: function () {
  96. this.cycle01 = this.checkNum(this.cycle01, 0, 59)
  97. this.cycle02 = this.checkNum(this.cycle02, 0, 59)
  98. return this.cycle01 + '-' + this.cycle02;
  99. },
  100. // 计算平均用到的值
  101. averageTotal: function () {
  102. this.average01 = this.checkNum(this.average01, 0, 59)
  103. this.average02 = this.checkNum(this.average02, 1, 59)
  104. return this.average01 + '/' + this.average02;
  105. },
  106. // 计算勾选的checkbox值合集
  107. checkboxString: function () {
  108. let str = this.checkboxList.join();
  109. return str == '' ? '*' : str;
  110. }
  111. }
  112. }
  113. </script>