Newer
Older
KaiFengPC / src / components / Crontab / month.vue
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  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.  
  9. <el-form-item>
  10. <el-radio v-model='radioValue' :label="2">
  11. 周期从
  12. <el-input-number v-model='cycle01' :min="1" :max="11" /> -
  13. <el-input-number v-model='cycle02' :min="cycle01 + 1" :max="12" />
  14. </el-radio>
  15. </el-form-item>
  16.  
  17. <el-form-item>
  18. <el-radio v-model='radioValue' :label="3">
  19. <el-input-number v-model='average01' :min="1" :max="11" /> 月开始,每
  20. <el-input-number v-model='average02' :min="1" :max="12 - average01" /> 月月执行一次
  21. </el-radio>
  22. </el-form-item>
  23.  
  24. <el-form-item>
  25. <el-radio v-model='radioValue' :label="4">
  26. 指定
  27. <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="8">
  28. <el-option v-for="item in monthList" :key="item.key" :label="item.value" :value="item.key" />
  29. </el-select>
  30. </el-radio>
  31. </el-form-item>
  32. </el-form>
  33. </template>
  34.  
  35. <script setup>
  36. const emit = defineEmits(['update'])
  37. const props = defineProps({
  38. cron: {
  39. type: Object,
  40. default: {
  41. second: "*",
  42. min: "*",
  43. hour: "*",
  44. day: "*",
  45. month: "*",
  46. week: "?",
  47. year: "",
  48. }
  49. },
  50. check: {
  51. type: Function,
  52. default: () => {
  53. }
  54. }
  55. })
  56. const radioValue = ref(1)
  57. const cycle01 = ref(1)
  58. const cycle02 = ref(2)
  59. const average01 = ref(1)
  60. const average02 = ref(1)
  61. const checkboxList = ref([])
  62. const checkCopy = ref([1])
  63. const monthList = ref([
  64. {key: 1, value: '一月'},
  65. {key: 2, value: '二月'},
  66. {key: 3, value: '三月'},
  67. {key: 4, value: '四月'},
  68. {key: 5, value: '五月'},
  69. {key: 6, value: '六月'},
  70. {key: 7, value: '七月'},
  71. {key: 8, value: '八月'},
  72. {key: 9, value: '九月'},
  73. {key: 10, value: '十月'},
  74. {key: 11, value: '十一月'},
  75. {key: 12, value: '十二月'}
  76. ])
  77. const cycleTotal = computed(() => {
  78. cycle01.value = props.check(cycle01.value, 1, 11)
  79. cycle02.value = props.check(cycle02.value, cycle01.value + 1, 12)
  80. return cycle01.value + '-' + cycle02.value
  81. })
  82. const averageTotal = computed(() => {
  83. average01.value = props.check(average01.value, 1, 11)
  84. average02.value = props.check(average02.value, 1, 12 - average01.value)
  85. return average01.value + '/' + average02.value
  86. })
  87. const checkboxString = computed(() => {
  88. return checkboxList.value.join(',')
  89. })
  90. watch(() => props.cron.month, value => changeRadioValue(value))
  91. watch([radioValue, cycleTotal, averageTotal, checkboxString], () => onRadioChange())
  92. function changeRadioValue(value) {
  93. if (value === '*') {
  94. radioValue.value = 1
  95. } else if (value.indexOf('-') > -1) {
  96. const indexArr = value.split('-')
  97. cycle01.value = Number(indexArr[0])
  98. cycle02.value = Number(indexArr[1])
  99. radioValue.value = 2
  100. } else if (value.indexOf('/') > -1) {
  101. const indexArr = value.split('/')
  102. average01.value = Number(indexArr[0])
  103. average02.value = Number(indexArr[1])
  104. radioValue.value = 3
  105. } else {
  106. checkboxList.value = [...new Set(value.split(',').map(item => Number(item)))]
  107. radioValue.value = 4
  108. }
  109. }
  110. function onRadioChange() {
  111. switch (radioValue.value) {
  112. case 1:
  113. emit('update', 'month', '*', 'month')
  114. break
  115. case 2:
  116. emit('update', 'month', cycleTotal.value, 'month')
  117. break
  118. case 3:
  119. emit('update', 'month', averageTotal.value, 'month')
  120. break
  121. case 4:
  122. if (checkboxList.value.length === 0) {
  123. checkboxList.value.push(checkCopy.value[0])
  124. } else {
  125. checkCopy.value = checkboxList.value
  126. }
  127. emit('update', 'month', checkboxString.value, 'month')
  128. break
  129. }
  130. }
  131. </script>
  132.  
  133. <style lang="scss" scoped>
  134. .el-input-number--small, .el-select, .el-select--small {
  135. margin: 0 0.2rem;
  136. }
  137. .el-select, .el-select--small {
  138. width: 18.8rem;
  139. }
  140. </style>