Newer
Older
DH_Apicture / src / components / patrolCrontab / week.vue
@zhangqy zhangqy on 29 Nov 5 KB first commit
  1. <template>
  2. <el-form size="small">
  3. <el-form-item>
  4. <el-radio v-model="radioValue" :label="1">
  5. 周,允许的通配符[, - * ? / L #]
  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-select clearable v-model="cycle01">
  17. <el-option
  18. v-for="(item, index) of weekList"
  19. :key="index"
  20. :label="item.value"
  21. :value="item.key"
  22. :disabled="item.key === 7"
  23. >{{ item.value }}</el-option
  24. >
  25. </el-select>
  26. -
  27. <el-select clearable v-model="cycle02">
  28. <el-option
  29. v-for="(item, index) of weekList"
  30. :key="index"
  31. :label="item.value"
  32. :value="item.key"
  33. :disabled="item.key <= cycle01"
  34. >{{ item.value }}</el-option
  35. >
  36. </el-select>
  37. </el-radio>
  38. </el-form-item>
  39.  
  40. <el-form-item>
  41. <el-radio v-model="radioValue" :label="4">
  42. <el-input-number v-model="average01" :min="1" :max="4" /> 周的
  43. <el-select clearable v-model="average02">
  44. <el-option
  45. v-for="item in weekList"
  46. :key="item.key"
  47. :label="item.value"
  48. :value="item.key"
  49. />
  50. </el-select>
  51. </el-radio>
  52. </el-form-item>
  53.  
  54. <el-form-item>
  55. <el-radio v-model="radioValue" :label="5">
  56. 本月最后一个
  57. <el-select clearable v-model="weekday">
  58. <el-option
  59. v-for="item in weekList"
  60. :key="item.key"
  61. :label="item.value"
  62. :value="item.key"
  63. />
  64. </el-select>
  65. </el-radio>
  66. </el-form-item>
  67.  
  68. <el-form-item>
  69. <el-radio v-model="radioValue" :label="6">
  70. 指定
  71. <el-select
  72. class="multiselect"
  73. clearable
  74. v-model="checkboxList"
  75. placeholder="可多选"
  76. multiple
  77. :multiple-limit="6"
  78. >
  79. <el-option
  80. v-for="item in weekList"
  81. :key="item.key"
  82. :label="item.value"
  83. :value="item.key"
  84. />
  85. </el-select>
  86. </el-radio>
  87. </el-form-item>
  88. </el-form>
  89. </template>
  90.  
  91. <script setup>
  92. const emit = defineEmits(["update"]);
  93. const props = defineProps({
  94. cron: {
  95. type: Object,
  96. default: {
  97. // second: "*",
  98. // min: "*",
  99. hour: "*",
  100. day: "*",
  101. month: "*",
  102. week: "?",
  103. year: "",
  104. },
  105. },
  106. check: {
  107. type: Function,
  108. default: () => {},
  109. },
  110. });
  111. const radioValue = ref(2);
  112. const cycle01 = ref(2);
  113. const cycle02 = ref(3);
  114. const average01 = ref(1);
  115. const average02 = ref(2);
  116. const weekday = ref(2);
  117. const checkboxList = ref([]);
  118. const checkCopy = ref([2]);
  119. const weekList = ref([
  120. { key: 1, value: "星期日" },
  121. { key: 2, value: "星期一" },
  122. { key: 3, value: "星期二" },
  123. { key: 4, value: "星期三" },
  124. { key: 5, value: "星期四" },
  125. { key: 6, value: "星期五" },
  126. { key: 7, value: "星期六" },
  127. ]);
  128. const cycleTotal = computed(() => {
  129. cycle01.value = props.check(cycle01.value, 1, 6);
  130. cycle02.value = props.check(cycle02.value, cycle01.value + 1, 7);
  131. return cycle01.value + "-" + cycle02.value;
  132. });
  133. const averageTotal = computed(() => {
  134. average01.value = props.check(average01.value, 1, 4);
  135. average02.value = props.check(average02.value, 1, 7);
  136. return average02.value + "#" + average01.value;
  137. });
  138. const weekdayTotal = computed(() => {
  139. weekday.value = props.check(weekday.value, 1, 7);
  140. return weekday.value + "L";
  141. });
  142. const checkboxString = computed(() => {
  143. return checkboxList.value.join(",");
  144. });
  145. watch(
  146. () => props.cron.week,
  147. (value) => changeRadioValue(value)
  148. );
  149. watch(
  150. [radioValue, cycleTotal, averageTotal, weekdayTotal, checkboxString],
  151. () => onRadioChange()
  152. );
  153. function changeRadioValue(value) {
  154. if (value === "*") {
  155. radioValue.value = 1;
  156. } else if (value === "?") {
  157. radioValue.value = 2;
  158. } else if (value.indexOf("-") > -1) {
  159. const indexArr = value.split("-");
  160. cycle01.value = Number(indexArr[0]);
  161. cycle02.value = Number(indexArr[1]);
  162. radioValue.value = 3;
  163. } else if (value.indexOf("#") > -1) {
  164. const indexArr = value.split("#");
  165. average01.value = Number(indexArr[1]);
  166. average02.value = Number(indexArr[0]);
  167. radioValue.value = 4;
  168. } else if (value.indexOf("L") > -1) {
  169. const indexArr = value.split("L");
  170. weekday.value = Number(indexArr[0]);
  171. radioValue.value = 5;
  172. } else {
  173. checkboxList.value = [
  174. ...new Set(value.split(",").map((item) => Number(item))),
  175. ];
  176. radioValue.value = 6;
  177. }
  178. }
  179. function onRadioChange() {
  180. if (radioValue.value === 2 && props.cron.day === "?") {
  181. emit("update", "day", "*", "week");
  182. }
  183. if (radioValue.value !== 2 && props.cron.day !== "?") {
  184. emit("update", "day", "?", "week");
  185. }
  186. switch (radioValue.value) {
  187. case 1:
  188. emit("update", "week", "*", "week");
  189. break;
  190. case 2:
  191. emit("update", "week", "?", "week");
  192. break;
  193. case 3:
  194. emit("update", "week", cycleTotal.value, "week");
  195. break;
  196. case 4:
  197. emit("update", "week", averageTotal.value, "week");
  198. break;
  199. case 5:
  200. emit("update", "week", weekdayTotal.value, "week");
  201. break;
  202. case 6:
  203. if (checkboxList.value.length === 0) {
  204. checkboxList.value.push(checkCopy.value[0]);
  205. } else {
  206. checkCopy.value = checkboxList.value;
  207. }
  208. emit("update", "week", checkboxString.value, "week");
  209. break;
  210. }
  211. }
  212. </script>
  213.  
  214. <style lang="scss" scoped>
  215. .el-input-number--small,
  216. .el-select,
  217. .el-select--small {
  218. margin: 0 0.5rem;
  219. }
  220. .el-select,
  221. .el-select--small {
  222. width: 8rem;
  223. }
  224. .el-select.multiselect,
  225. .el-select--small.multiselect {
  226. width: 17.8rem;
  227. }
  228. </style>