year.vue 3.6 KB

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