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