min.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  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="58" /> -
  12. <el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 分钟
  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="58" /> 分钟开始,每
  18. <el-input-number v-model='average02' :min="1" :max="59 - average01 || 0" /> 分钟执行一次
  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. switch (this.radioValue) {
  50. case 1:
  51. this.$emit('update', 'min', '*', 'min');
  52. break;
  53. case 2:
  54. this.$emit('update', 'min', this.cycleTotal, 'min');
  55. break;
  56. case 3:
  57. this.$emit('update', 'min', this.averageTotal, 'min');
  58. break;
  59. case 4:
  60. this.$emit('update', 'min', this.checkboxString, 'min');
  61. break;
  62. }
  63. },
  64. // 周期两个值变化时
  65. cycleChange() {
  66. if (this.radioValue == '2') {
  67. this.$emit('update', 'min', this.cycleTotal, 'min');
  68. }
  69. },
  70. // 平均两个值变化时
  71. averageChange() {
  72. if (this.radioValue == '3') {
  73. this.$emit('update', 'min', this.averageTotal, 'min');
  74. }
  75. },
  76. // checkbox值变化时
  77. checkboxChange() {
  78. if (this.radioValue == '4') {
  79. this.$emit('update', 'min', this.checkboxString, 'min');
  80. }
  81. },
  82. },
  83. watch: {
  84. 'radioValue': 'radioChange',
  85. 'cycleTotal': 'cycleChange',
  86. 'averageTotal': 'averageChange',
  87. 'checkboxString': 'checkboxChange',
  88. },
  89. computed: {
  90. // 计算两个周期值
  91. cycleTotal: function () {
  92. const cycle01 = this.checkNum(this.cycle01, 0, 58)
  93. const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 59)
  94. return cycle01 + '-' + cycle02;
  95. },
  96. // 计算平均用到的值
  97. averageTotal: function () {
  98. const average01 = this.checkNum(this.average01, 0, 58)
  99. const average02 = this.checkNum(this.average02, 1, 59 - average01 || 0)
  100. return average01 + '/' + average02;
  101. },
  102. // 计算勾选的checkbox值合集
  103. checkboxString: function () {
  104. let str = this.checkboxList.join();
  105. return str == '' ? '*' : str;
  106. }
  107. }
  108. }
  109. </script>