Newer
Older
KaiFengPC / src / components / Crontab / day.vue
@zhangdeliang zhangdeliang on 23 May 5 KB 初始化项目
  1. <template>
  2. <el-form size="small">
  3. <el-form-item>
  4. <el-radio v-model='radioValue' :label="1">
  5. 日,允许的通配符[, - * ? / L W]
  6. </el-radio>
  7. </el-form-item>
  8.  
  9. <el-form-item>
  10. <el-radio v-model='radioValue' :label="2">
  11. 不指定
  12. </el-radio>
  13. </el-form-item>
  14.  
  15. <el-form-item>
  16. <el-radio v-model='radioValue' :label="3">
  17. 周期从
  18. <el-input-number v-model='cycle01' :min="1" :max="30" /> -
  19. <el-input-number v-model='cycle02' :min="cycle01 + 1" :max="31" />
  20. </el-radio>
  21. </el-form-item>
  22.  
  23. <el-form-item>
  24. <el-radio v-model='radioValue' :label="4">
  25. <el-input-number v-model='average01' :min="1" :max="30" /> 号开始,每
  26. <el-input-number v-model='average02' :min="1" :max="31 - average01" /> 日执行一次
  27. </el-radio>
  28. </el-form-item>
  29.  
  30. <el-form-item>
  31. <el-radio v-model='radioValue' :label="5">
  32. 每月
  33. <el-input-number v-model='workday' :min="1" :max="31" /> 号最近的那个工作日
  34. </el-radio>
  35. </el-form-item>
  36.  
  37. <el-form-item>
  38. <el-radio v-model='radioValue' :label="6">
  39. 本月最后一天
  40. </el-radio>
  41. </el-form-item>
  42.  
  43. <el-form-item>
  44. <el-radio v-model='radioValue' :label="7">
  45. 指定
  46. <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="10">
  47. <el-option v-for="item in 31" :key="item" :label="item" :value="item" />
  48. </el-select>
  49. </el-radio>
  50. </el-form-item>
  51. </el-form>
  52. </template>
  53. <script setup>
  54. const emit = defineEmits(['update'])
  55. const props = defineProps({
  56. cron: {
  57. type: Object,
  58. default: {
  59. second: "*",
  60. min: "*",
  61. hour: "*",
  62. day: "*",
  63. month: "*",
  64. week: "?",
  65. year: "",
  66. }
  67. },
  68. check: {
  69. type: Function,
  70. default: () => {
  71. }
  72. }
  73. })
  74. const radioValue = ref(1)
  75. const cycle01 = ref(1)
  76. const cycle02 = ref(2)
  77. const average01 = ref(1)
  78. const average02 = ref(1)
  79. const workday = ref(1)
  80. const checkboxList = ref([])
  81. const checkCopy = ref([1])
  82. const cycleTotal = computed(() => {
  83. cycle01.value = props.check(cycle01.value, 1, 30)
  84. cycle02.value = props.check(cycle02.value, cycle01.value + 1, 31)
  85. return cycle01.value + '-' + cycle02.value
  86. })
  87. const averageTotal = computed(() => {
  88. average01.value = props.check(average01.value, 1, 30)
  89. average02.value = props.check(average02.value, 1, 31 - average01.value)
  90. return average01.value + '/' + average02.value
  91. })
  92. const workdayTotal = computed(() => {
  93. workday.value = props.check(workday.value, 1, 31)
  94. return workday.value + 'W'
  95. })
  96. const checkboxString = computed(() => {
  97. return checkboxList.value.join(',')
  98. })
  99. watch(() => props.cron.day, value => changeRadioValue(value))
  100. watch([radioValue, cycleTotal, averageTotal, workdayTotal, checkboxString], () => onRadioChange())
  101. function changeRadioValue(value) {
  102. if (value === "*") {
  103. radioValue.value = 1
  104. } else if (value === "?") {
  105. radioValue.value = 2
  106. } else if (value.indexOf("-") > -1) {
  107. const indexArr = value.split('-')
  108. cycle01.value = Number(indexArr[0])
  109. cycle02.value = Number(indexArr[1])
  110. radioValue.value = 3
  111. } else if (value.indexOf("/") > -1) {
  112. const indexArr = value.split('/')
  113. average01.value = Number(indexArr[0])
  114. average02.value = Number(indexArr[1])
  115. radioValue.value = 4
  116. } else if (value.indexOf("W") > -1) {
  117. const indexArr = value.split("W")
  118. workday.value = Number(indexArr[0])
  119. radioValue.value = 5
  120. } else if (value === "L") {
  121. radioValue.value = 6
  122. } else {
  123. checkboxList.value = [...new Set(value.split(',').map(item => Number(item)))]
  124. radioValue.value = 7
  125. }
  126. }
  127. // 单选按钮值变化时
  128. function onRadioChange() {
  129. if (radioValue.value === 2 && props.cron.week === '?') {
  130. emit('update', 'week', '*', 'day')
  131. }
  132. if (radioValue.value !== 2 && props.cron.week !== '?') {
  133. emit('update', 'week', '?', 'day')
  134. }
  135. switch (radioValue.value) {
  136. case 1:
  137. emit('update', 'day', '*', 'day')
  138. break
  139. case 2:
  140. emit('update', 'day', '?', 'day')
  141. break
  142. case 3:
  143. emit('update', 'day', cycleTotal.value, 'day')
  144. break
  145. case 4:
  146. emit('update', 'day', averageTotal.value, 'day')
  147. break
  148. case 5:
  149. emit('update', 'day', workdayTotal.value, 'day')
  150. break
  151. case 6:
  152. emit('update', 'day', 'L', 'day')
  153. break
  154. case 7:
  155. if (checkboxList.value.length === 0) {
  156. checkboxList.value.push(checkCopy.value[0])
  157. } else {
  158. checkCopy.value = checkboxList.value
  159. }
  160. emit('update', 'day', checkboxString.value, 'day')
  161. break
  162. }
  163. }
  164. </script>
  165.  
  166. <style lang="scss" scoped>
  167. .el-input-number--small, .el-select, .el-select--small {
  168. margin: 0 0.2rem;
  169. }
  170. .el-select, .el-select--small {
  171. width: 18.8rem;
  172. }
  173. </style>