second.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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-second',
  45. props: ['check', 'radioParent'],
  46. methods: {
  47. // 单选按钮值变化时
  48. radioChange() {
  49. switch (this.radioValue) {
  50. case 1:
  51. this.$emit('update', 'second', '*', 'second');
  52. break;
  53. case 2:
  54. this.$emit('update', 'second', this.cycle01 + '-' + this.cycle02);
  55. break;
  56. case 3:
  57. this.$emit('update', 'second', this.average01 + '/' + this.average02);
  58. break;
  59. case 4:
  60. this.$emit('update', 'second', this.checkboxString);
  61. break;
  62. }
  63. },
  64. // 周期两个值变化时
  65. cycleChange() {
  66. if (this.radioValue == '2') {
  67. this.$emit('update', 'second', this.cycleTotal);
  68. }
  69. },
  70. // 平均两个值变化时
  71. averageChange() {
  72. if (this.radioValue == '3') {
  73. this.$emit('update', 'second', this.averageTotal);
  74. }
  75. },
  76. // checkbox值变化时
  77. checkboxChange() {
  78. if (this.radioValue == '4') {
  79. this.$emit('update', 'second', this.checkboxString);
  80. }
  81. },
  82. othChange() {
  83. // 反解析
  84. let ins = this.cron.second
  85. ('反解析 second', ins);
  86. if (ins === '*') {
  87. this.radioValue = 1;
  88. } else if (ins.indexOf('-') > -1) {
  89. this.radioValue = 2
  90. } else if (ins.indexOf('/') > -1) {
  91. this.radioValue = 3
  92. } else {
  93. this.radioValue = 4
  94. this.checkboxList = ins.split(',')
  95. }
  96. }
  97. },
  98. watch: {
  99. "radioValue": "radioChange",
  100. 'cycleTotal': 'cycleChange',
  101. 'averageTotal': 'averageChange',
  102. 'checkboxString': 'checkboxChange',
  103. radioParent() {
  104. this.radioValue = this.radioParent
  105. }
  106. },
  107. computed: {
  108. // 计算两个周期值
  109. cycleTotal: function () {
  110. this.cycle01 = this.checkNum(this.cycle01, 0, 59)
  111. this.cycle02 = this.checkNum(this.cycle02, 0, 59)
  112. return this.cycle01 + '-' + this.cycle02;
  113. },
  114. // 计算平均用到的值
  115. averageTotal: function () {
  116. this.average01 = this.checkNum(this.average01, 0, 59)
  117. this.average02 = this.checkNum(this.average02, 1, 59)
  118. return this.average01 + '/' + this.average02;
  119. },
  120. // 计算勾选的checkbox值合集
  121. checkboxString: function () {
  122. let str = this.checkboxList.join();
  123. return str == '' ? '*' : str;
  124. }
  125. }
  126. }
  127. </script>