Newer
Older
urbanLifeline_YanAn / src / components / patrolCrontab / hour.vue
@zhangqy zhangqy on 3 Oct 3 KB first commit
  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="0" :max="22" /> -
  13. <el-input-number v-model="cycle02" :min="cycle01 + 1" :max="23" />
  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="0" :max="22" /> 时开始,每
  20. <el-input-number v-model="average02" :min="1" :max="23 - 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="10"
  34. >
  35. <el-option
  36. v-for="item in 24"
  37. :key="item"
  38. :label="item - 1"
  39. :value="item - 1"
  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(0);
  69. const cycle02 = ref(1);
  70. const average01 = ref(0);
  71. const average02 = ref(1);
  72. const checkboxList = ref([]);
  73. const checkCopy = ref([0]);
  74. const cycleTotal = computed(() => {
  75. cycle01.value = props.check(cycle01.value, 0, 22);
  76. cycle02.value = props.check(cycle02.value, cycle01.value + 1, 23);
  77. return cycle01.value + "-" + cycle02.value;
  78. });
  79. const averageTotal = computed(() => {
  80. average01.value = props.check(average01.value, 0, 22);
  81. average02.value = props.check(average02.value, 1, 23 - average01.value);
  82. return average01.value + "/" + average02.value;
  83. });
  84. const checkboxString = computed(() => {
  85. return checkboxList.value.join(",");
  86. });
  87. watch(
  88. () => props.cron.hour,
  89. (value) => changeRadioValue(value)
  90. );
  91. watch([radioValue, cycleTotal, averageTotal, checkboxString], () =>
  92. onRadioChange()
  93. );
  94. function changeRadioValue(value) {
  95. if (value === "*") {
  96. radioValue.value = 1;
  97. } else if (value.indexOf("-") > -1) {
  98. const indexArr = value.split("-");
  99. cycle01.value = Number(indexArr[0]);
  100. cycle02.value = Number(indexArr[1]);
  101. radioValue.value = 2;
  102. } else if (value.indexOf("/") > -1) {
  103. const indexArr = value.split("/");
  104. average01.value = Number(indexArr[0]);
  105. average02.value = Number(indexArr[1]);
  106. radioValue.value = 3;
  107. } else {
  108. checkboxList.value = [
  109. ...new Set(value.split(",").map((item) => Number(item))),
  110. ];
  111. radioValue.value = 4;
  112. }
  113. }
  114. function onRadioChange() {
  115. switch (radioValue.value) {
  116. case 1:
  117. emit("update", "hour", "*", "hour");
  118. break;
  119. case 2:
  120. emit("update", "hour", cycleTotal.value, "hour");
  121. break;
  122. case 3:
  123. emit("update", "hour", averageTotal.value, "hour");
  124. break;
  125. case 4:
  126. if (checkboxList.value.length === 0) {
  127. checkboxList.value.push(checkCopy.value[0]);
  128. } else {
  129. checkCopy.value = checkboxList.value;
  130. }
  131. emit("update", "hour", checkboxString.value, "hour");
  132. break;
  133. }
  134. }
  135. </script>
  136.  
  137. <style lang="scss" scoped>
  138. .el-input-number--small,
  139. .el-select,
  140. .el-select--small {
  141. margin: 0 0.2rem;
  142. }
  143. .el-select,
  144. .el-select--small {
  145. width: 18.8rem;
  146. }
  147. </style>