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