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