| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <script lang="ts" setup> |
| H | 2 | import { ElMessage } from 'element-plus' |
| 3 | import { PropType } from 'vue' | |
| 4 | ||
| 5 | defineOptions({ name: 'Crontab' }) | |
| 6 | ||
| 7 | interface shortcutsType { | |
| 8 | text: string | |
| 9 | value: string | |
| 10 | } | |
| 11 | ||
| 12 | const props = defineProps({ | |
| 13 | modelValue: { | |
| 14 | type: String, | |
| 15 | default: '* * * * * ?' | |
| 16 | }, | |
| 17 | shortcuts: { type: Array as PropType<shortcutsType[]>, default: () => [] } | |
| 18 | }) | |
| 19 | const defaultValue = ref('') | |
| 20 | const dialogVisible = ref(false) | |
| 21 | const getYear = () => { | |
| 22 | let v: number[] = [] | |
| 23 | let y = new Date().getFullYear() | |
| 24 | for (let i = 0; i < 11; i++) { | |
| 25 | v.push(y + i) | |
| 26 | } | |
| 27 | return v | |
| 28 | } | |
| 29 | const cronValue = reactive({ | |
| 30 | second: { | |
| 31 | type: '0', | |
| 32 | range: { | |
| 33 | start: 1, | |
| 34 | end: 2 | |
| 35 | }, | |
| 36 | loop: { | |
| 37 | start: 0, | |
| 38 | end: 1 | |
| 39 | }, | |
| 40 | appoint: [] as string[] | |
| 41 | }, | |
| 42 | minute: { | |
| 43 | type: '0', | |
| 44 | range: { | |
| 45 | start: 1, | |
| 46 | end: 2 | |
| 47 | }, | |
| 48 | loop: { | |
| 49 | start: 0, | |
| 50 | end: 1 | |
| 51 | }, | |
| 52 | appoint: [] as string[] | |
| 53 | }, | |
| 54 | hour: { | |
| 55 | type: '0', | |
| 56 | range: { | |
| 57 | start: 1, | |
| 58 | end: 2 | |
| 59 | }, | |
| 60 | loop: { | |
| 61 | start: 0, | |
| 62 | end: 1 | |
| 63 | }, | |
| 64 | appoint: [] as string[] | |
| 65 | }, | |
| 66 | day: { | |
| 67 | type: '0', | |
| 68 | range: { | |
| 69 | start: 1, | |
| 70 | end: 2 | |
| 71 | }, | |
| 72 | loop: { | |
| 73 | start: 1, | |
| 74 | end: 1 | |
| 75 | }, | |
| 76 | appoint: [] as string[] | |
| 77 | }, | |
| 78 | month: { | |
| 79 | type: '0', | |
| 80 | range: { | |
| 81 | start: 1, | |
| 82 | end: 2 | |
| 83 | }, | |
| 84 | loop: { | |
| 85 | start: 1, | |
| 86 | end: 1 | |
| 87 | }, | |
| 88 | appoint: [] as string[] | |
| 89 | }, | |
| 90 | week: { | |
| 91 | type: '5', | |
| 92 | range: { | |
| 93 | start: '2', | |
| 94 | end: '3' | |
| 95 | }, | |
| 96 | loop: { | |
| 97 | start: 0, | |
| 98 | end: '2' | |
| 99 | }, | |
| 100 | last: '2', | |
| 101 | appoint: [] as string[] | |
| 102 | }, | |
| 103 | year: { | |
| 104 | type: '-1', | |
| 105 | range: { | |
| 106 | start: getYear()[0], | |
| 107 | end: getYear()[1] | |
| 108 | }, | |
| 109 | loop: { | |
| 110 | start: getYear()[0], | |
| 111 | end: 1 | |
| 112 | }, | |
| 113 | appoint: [] as string[] | |
| 114 | } | |
| 115 | }) | |
| 116 | const data = reactive({ | |
| 117 | second: ['0', '5', '15', '20', '25', '30', '35', '40', '45', '50', '55', '59'], | |
| 118 | minute: ['0', '5', '15', '20', '25', '30', '35', '40', '45', '50', '55', '59'], | |
| 119 | hour: [ | |
| 120 | '0', | |
| 121 | '1', | |
| 122 | '2', | |
| 123 | '3', | |
| 124 | '4', | |
| 125 | '5', | |
| 126 | '6', | |
| 127 | '7', | |
| 128 | '8', | |
| 129 | '9', | |
| 130 | '10', | |
| 131 | '11', | |
| 132 | '12', | |
| 133 | '13', | |
| 134 | '14', | |
| 135 | '15', | |
| 136 | '16', | |
| 137 | '17', | |
| 138 | '18', | |
| 139 | '19', | |
| 140 | '20', | |
| 141 | '21', | |
| 142 | '22', | |
| 143 | '23' | |
| 144 | ], | |
| 145 | day: [ | |
| 146 | '1', | |
| 147 | '2', | |
| 148 | '3', | |
| 149 | '4', | |
| 150 | '5', | |
| 151 | '6', | |
| 152 | '7', | |
| 153 | '8', | |
| 154 | '9', | |
| 155 | '10', | |
| 156 | '11', | |
| 157 | '12', | |
| 158 | '13', | |
| 159 | '14', | |
| 160 | '15', | |
| 161 | '16', | |
| 162 | '17', | |
| 163 | '18', | |
| 164 | '19', | |
| 165 | '20', | |
| 166 | '21', | |
| 167 | '22', | |
| 168 | '23', | |
| 169 | '24', | |
| 170 | '25', | |
| 171 | '26', | |
| 172 | '27', | |
| 173 | '28', | |
| 174 | '29', | |
| 175 | '30', | |
| 176 | '31' | |
| 177 | ], | |
| 178 | month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], | |
| 179 | week: [ | |
| 180 | { | |
| 181 | value: '1', | |
| 182 | label: '周日' | |
| 183 | }, | |
| 184 | { | |
| 185 | value: '2', | |
| 186 | label: '周一' | |
| 187 | }, | |
| 188 | { | |
| 189 | value: '3', | |
| 190 | label: '周二' | |
| 191 | }, | |
| 192 | { | |
| 193 | value: '4', | |
| 194 | label: '周三' | |
| 195 | }, | |
| 196 | { | |
| 197 | value: '5', | |
| 198 | label: '周四' | |
| 199 | }, | |
| 200 | { | |
| 201 | value: '6', | |
| 202 | label: '周五' | |
| 203 | }, | |
| 204 | { | |
| 205 | value: '7', | |
| 206 | label: '周六' | |
| 207 | } | |
| 208 | ], | |
| 209 | year: getYear() | |
| 210 | }) | |
| 211 | ||
| 212 | const value_second = computed(() => { | |
| 213 | let v = cronValue.second | |
| 214 | if (v.type == '0') { | |
| 215 | return '*' | |
| 216 | } else if (v.type == '1') { | |
| 217 | return v.range.start + '-' + v.range.end | |
| 218 | } else if (v.type == '2') { | |
| 219 | return v.loop.start + '/' + v.loop.end | |
| 220 | } else if (v.type == '3') { | |
| 221 | return v.appoint.length > 0 ? v.appoint.join(',') : '*' | |
| 222 | } else { | |
| 223 | return '*' | |
| 224 | } | |
| 225 | }) | |
| 226 | const value_minute = computed(() => { | |
| 227 | let v = cronValue.minute | |
| 228 | if (v.type == '0') { | |
| 229 | return '*' | |
| 230 | } else if (v.type == '1') { | |
| 231 | return v.range.start + '-' + v.range.end | |
| 232 | } else if (v.type == '2') { | |
| 233 | return v.loop.start + '/' + v.loop.end | |
| 234 | } else if (v.type == '3') { | |
| 235 | return v.appoint.length > 0 ? v.appoint.join(',') : '*' | |
| 236 | } else { | |
| 237 | return '*' | |
| 238 | } | |
| 239 | }) | |
| 240 | const value_hour = computed(() => { | |
| 241 | let v = cronValue.hour | |
| 242 | if (v.type == '0') { | |
| 243 | return '*' | |
| 244 | } else if (v.type == '1') { | |
| 245 | return v.range.start + '-' + v.range.end | |
| 246 | } else if (v.type == '2') { | |
| 247 | return v.loop.start + '/' + v.loop.end | |
| 248 | } else if (v.type == '3') { | |
| 249 | return v.appoint.length > 0 ? v.appoint.join(',') : '*' | |
| 250 | } else { | |
| 251 | return '*' | |
| 252 | } | |
| 253 | }) | |
| 254 | const value_day = computed(() => { | |
| 255 | let v = cronValue.day | |
| 256 | if (v.type == '0') { | |
| 257 | return '*' | |
| 258 | } else if (v.type == '1') { | |
| 259 | return v.range.start + '-' + v.range.end | |
| 260 | } else if (v.type == '2') { | |
| 261 | return v.loop.start + '/' + v.loop.end | |
| 262 | } else if (v.type == '3') { | |
| 263 | return v.appoint.length > 0 ? v.appoint.join(',') : '*' | |
| 264 | } else if (v.type == '4') { | |
| 265 | return 'L' | |
| 266 | } else if (v.type == '5') { | |
| 267 | return '?' | |
| 268 | } else { | |
| 269 | return '*' | |
| 270 | } | |
| 271 | }) | |
| 272 | const value_month = computed(() => { | |
| 273 | let v = cronValue.month | |
| 274 | if (v.type == '0') { | |
| 275 | return '*' | |
| 276 | } else if (v.type == '1') { | |
| 277 | return v.range.start + '-' + v.range.end | |
| 278 | } else if (v.type == '2') { | |
| 279 | return v.loop.start + '/' + v.loop.end | |
| 280 | } else if (v.type == '3') { | |
| 281 | return v.appoint.length > 0 ? v.appoint.join(',') : '*' | |
| 282 | } else { | |
| 283 | return '*' | |
| 284 | } | |
| 285 | }) | |
| 286 | const value_week = computed(() => { | |
| 287 | let v = cronValue.week | |
| 288 | if (v.type == '0') { | |
| 289 | return '*' | |
| 290 | } else if (v.type == '1') { | |
| 291 | return v.range.start + '-' + v.range.end | |
| 292 | } else if (v.type == '2') { | |
| 293 | return v.loop.end + '#' + v.loop.start | |
| 294 | } else if (v.type == '3') { | |
| 295 | return v.appoint.length > 0 ? v.appoint.join(',') : '*' | |
| 296 | } else if (v.type == '4') { | |
| 297 | return v.last + 'L' | |
| 298 | } else if (v.type == '5') { | |
| 299 | return '?' | |
| 300 | } else { | |
| 301 | return '*' | |
| 302 | } | |
| 303 | }) | |
| 304 | const value_year = computed(() => { | |
| 305 | let v = cronValue.year | |
| 306 | if (v.type == '-1') { | |
| 307 | return '' | |
| 308 | } else if (v.type == '0') { | |
| 309 | return '*' | |
| 310 | } else if (v.type == '1') { | |
| 311 | return v.range.start + '-' + v.range.end | |
| 312 | } else if (v.type == '2') { | |
| 313 | return v.loop.start + '/' + v.loop.end | |
| 314 | } else if (v.type == '3') { | |
| 315 | return v.appoint.length > 0 ? v.appoint.join(',') : '' | |
| 316 | } else { | |
| 317 | return '' | |
| 318 | } | |
| 319 | }) | |
| 320 | watch( | |
| 321 | () => cronValue.week.type, | |
| 322 | (val) => { | |
| 323 | if (val != '5') { | |
| 324 | cronValue.day.type = '5' | |
| 325 | } | |
| 326 | } | |
| 327 | ) | |
| 328 | watch( | |
| 329 | () => cronValue.day.type, | |
| 330 | (val) => { | |
| 331 | if (val != '5') { | |
| 332 | cronValue.week.type = '5' | |
| 333 | } | |
| 334 | } | |
| 335 | ) | |
| 336 | watch( | |
| 337 | () => props.modelValue, | |
| 338 | () => { | |
| 339 | defaultValue.value = props.modelValue | |
| 340 | } | |
| 341 | ) | |
| 342 | onMounted(() => { | |
| 343 | defaultValue.value = props.modelValue | |
| 344 | }) | |
| 345 | const emit = defineEmits(['update:modelValue']) | |
| 346 | const select = ref() | |
| 347 | watch( | |
| 348 | () => select.value, | |
| 349 | () => { | |
| 350 | if (select.value == 'custom') { | |
| 351 | open() | |
| 352 | } else { | |
| 353 | defaultValue.value = select.value | |
| 354 | emit('update:modelValue', defaultValue.value) | |
| 355 | } | |
| 356 | } | |
| 357 | ) | |
| 358 | const open = () => { | |
| 359 | set() | |
| 360 | dialogVisible.value = true | |
| 361 | } | |
| 362 | const set = () => { | |
| 363 | defaultValue.value = props.modelValue | |
| 364 | let arr = (props.modelValue || '* * * * * ?').split(' ') | |
| 365 | //简单检查 | |
| 366 | if (arr.length < 6) { | |
| 367 | ElMessage.warning('cron表达式错误，已转换为默认表达式') | |
| 368 | arr = '* * * * * ?'.split(' ') | |
| 369 | } | |
| 370 | ||
| 371 | //秒 | |
| 372 | if (arr[0] == '*') { | |
| 373 | cronValue.second.type = '0' | |
| 374 | } else if (arr[0].includes('-')) { | |
| 375 | cronValue.second.type = '1' | |
| 376 | cronValue.second.range.start = Number(arr[0].split('-')[0]) | |
| 377 | cronValue.second.range.end = Number(arr[0].split('-')[1]) | |
| 378 | } else if (arr[0].includes('/')) { | |
| 379 | cronValue.second.type = '2' | |
| 380 | cronValue.second.loop.start = Number(arr[0].split('/')[0]) | |
| 381 | cronValue.second.loop.end = Number(arr[0].split('/')[1]) | |
| 382 | } else { | |
| 383 | cronValue.second.type = '3' | |
| 384 | cronValue.second.appoint = arr[0].split(',') | |
| 385 | } | |
| 386 | //分 | |
| 387 | if (arr[1] == '*') { | |
| 388 | cronValue.minute.type = '0' | |
| 389 | } else if (arr[1].includes('-')) { | |
| 390 | cronValue.minute.type = '1' | |
| 391 | cronValue.minute.range.start = Number(arr[1].split('-')[0]) | |
| 392 | cronValue.minute.range.end = Number(arr[1].split('-')[1]) | |
| 393 | } else if (arr[1].includes('/')) { | |
| 394 | cronValue.minute.type = '2' | |
| 395 | cronValue.minute.loop.start = Number(arr[1].split('/')[0]) | |
| 396 | cronValue.minute.loop.end = Number(arr[1].split('/')[1]) | |
| 397 | } else { | |
| 398 | cronValue.minute.type = '3' | |
| 399 | cronValue.minute.appoint = arr[1].split(',') | |
| 400 | } | |
| 401 | //小时 | |
| 402 | if (arr[2] == '*') { | |
| 403 | cronValue.hour.type = '0' | |
| 404 | } else if (arr[2].includes('-')) { | |
| 405 | cronValue.hour.type = '1' | |
| 406 | cronValue.hour.range.start = Number(arr[2].split('-')[0]) | |
| 407 | cronValue.hour.range.end = Number(arr[2].split('-')[1]) | |
| 408 | } else if (arr[2].includes('/')) { | |
| 409 | cronValue.hour.type = '2' | |
| 410 | cronValue.hour.loop.start = Number(arr[2].split('/')[0]) | |
| 411 | cronValue.hour.loop.end = Number(arr[2].split('/')[1]) | |
| 412 | } else { | |
| 413 | cronValue.hour.type = '3' | |
| 414 | cronValue.hour.appoint = arr[2].split(',') | |
| 415 | } | |
| 416 | //日 | |
| 417 | if (arr[3] == '*') { | |
| 418 | cronValue.day.type = '0' | |
| 419 | } else if (arr[3] == 'L') { | |
| 420 | cronValue.day.type = '4' | |
| 421 | } else if (arr[3] == '?') { | |
| 422 | cronValue.day.type = '5' | |
| 423 | } else if (arr[3].includes('-')) { | |
| 424 | cronValue.day.type = '1' | |
| 425 | cronValue.day.range.start = Number(arr[3].split('-')[0]) | |
| 426 | cronValue.day.range.end = Number(arr[3].split('-')[1]) | |
| 427 | } else if (arr[3].includes('/')) { | |
| 428 | cronValue.day.type = '2' | |
| 429 | cronValue.day.loop.start = Number(arr[3].split('/')[0]) | |
| 430 | cronValue.day.loop.end = Number(arr[3].split('/')[1]) | |
| 431 | } else { | |
| 432 | cronValue.day.type = '3' | |
| 433 | cronValue.day.appoint = arr[3].split(',') | |
| 434 | } | |
| 435 | //月 | |
| 436 | if (arr[4] == '*') { | |
| 437 | cronValue.month.type = '0' | |
| 438 | } else if (arr[4].includes('-')) { | |
| 439 | cronValue.month.type = '1' | |
| 440 | cronValue.month.range.start = Number(arr[4].split('-')[0]) | |
| 441 | cronValue.month.range.end = Number(arr[4].split('-')[1]) | |
| 442 | } else if (arr[4].includes('/')) { | |
| 443 | cronValue.month.type = '2' | |
| 444 | cronValue.month.loop.start = Number(arr[4].split('/')[0]) | |
| 445 | cronValue.month.loop.end = Number(arr[4].split('/')[1]) | |
| 446 | } else { | |
| 447 | cronValue.month.type = '3' | |
| 448 | cronValue.month.appoint = arr[4].split(',') | |
| 449 | } | |
| 450 | //周 | |
| 451 | if (arr[5] == '*') { | |
| 452 | cronValue.week.type = '0' | |
| 453 | } else if (arr[5] == '?') { | |
| 454 | cronValue.week.type = '5' | |
| 455 | } else if (arr[5].includes('-')) { | |
| 456 | cronValue.week.type = '1' | |
| 457 | cronValue.week.range.start = arr[5].split('-')[0] | |
| 458 | cronValue.week.range.end = arr[5].split('-')[1] | |
| 459 | } else if (arr[5].includes('#')) { | |
| 460 | cronValue.week.type = '2' | |
| 461 | cronValue.week.loop.start = Number(arr[5].split('#')[1]) | |
| 462 | cronValue.week.loop.end = arr[5].split('#')[0] | |
| 463 | } else if (arr[5].includes('L')) { | |
| 464 | cronValue.week.type = '4' | |
| 465 | cronValue.week.last = arr[5].split('L')[0] | |
| 466 | } else { | |
| 467 | cronValue.week.type = '3' | |
| 468 | cronValue.week.appoint = arr[5].split(',') | |
| 469 | } | |
| 470 | //年 | |
| 471 | if (!arr[6]) { | |
| 472 | cronValue.year.type = '-1' | |
| 473 | } else if (arr[6] == '*') { | |
| 474 | cronValue.year.type = '0' | |
| 475 | } else if (arr[6].includes('-')) { | |
| 476 | cronValue.year.type = '1' | |
| 477 | cronValue.year.range.start = Number(arr[6].split('-')[0]) | |
| 478 | cronValue.year.range.end = Number(arr[6].split('-')[1]) | |
| 479 | } else if (arr[6].includes('/')) { | |
| 480 | cronValue.year.type = '2' | |
| 481 | cronValue.year.loop.start = Number(arr[6].split('/')[1]) | |
| 482 | cronValue.year.loop.end = Number(arr[6].split('/')[0]) | |
| 483 | } else { | |
| 484 | cronValue.year.type = '3' | |
| 485 | cronValue.year.appoint = arr[6].split(',') | |
| 486 | } | |
| 487 | } | |
| 488 | const submit = () => { | |
| 489 | let year = value_year.value ? ' ' + value_year.value : '' | |
| 490 | defaultValue.value = | |
| 491 | value_second.value + | |
| 492 | ' ' + | |
| 493 | value_minute.value + | |
| 494 | ' ' + | |
| 495 | value_hour.value + | |
| 496 | ' ' + | |
| 497 | value_day.value + | |
| 498 | ' ' + | |
| 499 | value_month.value + | |
| 500 | ' ' + | |
| 501 | value_week.value + | |
| 502 | year | |
| 503 | emit('update:modelValue', defaultValue.value) | |
| 504 | dialogVisible.value = false | |
| 505 | } | |
| 506 | ||
| 507 | const inputChange = () => { | |
| 508 | emit('update:modelValue', defaultValue.value) | |
| 509 | } | |
| 510 | </script> | |
| 511 | <template> | |
| 512 | <el-input v-model="defaultValue" class="input-with-select" v-bind="$attrs" @input="inputChange"> | |
| 513 | <template #append> | |
| 514 | <el-select v-model="select" placeholder="生成器" style="width: 115px"> | |
| 515 | <el-option label="每分钟" value="0 * * * * ?" /> | |
| 516 | <el-option label="每小时" value="0 0 * * * ?" /> | |
| 517 | <el-option label="每天零点" value="0 0 0 * * ?" /> | |
| 518 | <el-option label="每月一号零点" value="0 0 0 1 * ?" /> | |
| 519 | <el-option label="每月最后一天零点" value="0 0 0 L * ?" /> | |
| 520 | <el-option label="每周星期日零点" value="0 0 0 ? * 1" /> | |
| 521 | <el-option | |
| 522 | v-for="(item, index) in shortcuts" | |
| 523 | :key="index" | |
| 524 | :label="item.text" | |
| 525 | :value="item.value" | |
| 526 | /> | |
| 527 | <el-option label="自定义" value="custom" /> | |
| 528 | </el-select> | |
| 529 | </template> | |
| 530 | </el-input> | |
| 531 | ||
| 532 | <el-dialog | |
| 533 | v-model="dialogVisible" | |
| 534 | :width="580" | |
| 535 | append-to-body | |
| 536 | destroy-on-close | |
| 537 | title="cron规则生成器" | |
| 538 | > | |
| 539 | <div class="sc-cron"> | |
| 540 | <el-tabs> | |
| 541 | <el-tab-pane> | |
| 542 | <template #label> | |
| 543 | <div class="sc-cron-num"> | |
| 544 | <h2>秒</h2> | |
| 545 | <h4>{{ value_second }}</h4> | |
| 546 | </div> | |
| 547 | </template> | |
| 548 | <el-form> | |
| 549 | <el-form-item label="类型"> | |
| 550 | <el-radio-group v-model="cronValue.second.type"> | |
| 9259c2 | 551 | <el-radio-button value="0">任意值</el-radio-button> |
| H | 552 | <el-radio-button value="1">范围</el-radio-button> |
| 553 | <el-radio-button value="2">间隔</el-radio-button> | |
| 554 | <el-radio-button value="3">指定</el-radio-button> | |
| 820397 | 555 | </el-radio-group> |
| H | 556 | </el-form-item> |
| 557 | <el-form-item v-if="cronValue.second.type == '1'" label="范围"> | |
| 558 | <el-input-number | |
| 559 | v-model="cronValue.second.range.start" | |
| 560 | :max="59" | |
| 561 | :min="0" | |
| 562 | controls-position="right" | |
| 563 | /> | |
| 564 | <span style="padding: 0 15px">-</span> | |
| 565 | <el-input-number | |
| 566 | v-model="cronValue.second.range.end" | |
| 567 | :max="59" | |
| 568 | :min="0" | |
| 569 | controls-position="right" | |
| 570 | /> | |
| 571 | </el-form-item> | |
| 572 | <el-form-item v-if="cronValue.second.type == '2'" label="间隔"> | |
| 573 | <el-input-number | |
| 574 | v-model="cronValue.second.loop.start" | |
| 575 | :max="59" | |
| 576 | :min="0" | |
| 577 | controls-position="right" | |
| 578 | /> | |
| 579 | 秒开始，每 | |
| 580 | <el-input-number | |
| 581 | v-model="cronValue.second.loop.end" | |
| 582 | :max="59" | |
| 583 | :min="0" | |
| 584 | controls-position="right" | |
| 585 | /> | |
| 586 | 秒执行一次 | |
| 587 | </el-form-item> | |
| 588 | <el-form-item v-if="cronValue.second.type == '3'" label="指定"> | |
| 589 | <el-select v-model="cronValue.second.appoint" multiple style="width: 100%"> | |
| 590 | <el-option | |
| 591 | v-for="(item, index) in data.second" | |
| 592 | :key="index" | |
| 593 | :label="item" | |
| 594 | :value="item" | |
| 595 | /> | |
| 596 | </el-select> | |
| 597 | </el-form-item> | |
| 598 | </el-form> | |
| 599 | </el-tab-pane> | |
| 600 | <el-tab-pane> | |
| 601 | <template #label> | |
| 602 | <div class="sc-cron-num"> | |
| 603 | <h2>分钟</h2> | |
| 604 | <h4>{{ value_minute }}</h4> | |
| 605 | </div> | |
| 606 | </template> | |
| 607 | <el-form> | |
| 608 | <el-form-item label="类型"> | |
| 609 | <el-radio-group v-model="cronValue.minute.type"> | |
| 9259c2 | 610 | <el-radio-button value="0">任意值</el-radio-button> |
| H | 611 | <el-radio-button value="1">范围</el-radio-button> |
| 612 | <el-radio-button value="2">间隔</el-radio-button> | |
| 613 | <el-radio-button value="3">指定</el-radio-button> | |
| 820397 | 614 | </el-radio-group> |
| H | 615 | </el-form-item> |
| 616 | <el-form-item v-if="cronValue.minute.type == '1'" label="范围"> | |
| 617 | <el-input-number | |
| 618 | v-model="cronValue.minute.range.start" | |
| 619 | :max="59" | |
| 620 | :min="0" | |
| 621 | controls-position="right" | |
| 622 | /> | |
| 623 | <span style="padding: 0 15px">-</span> | |
| 624 | <el-input-number | |
| 625 | v-model="cronValue.minute.range.end" | |
| 626 | :max="59" | |
| 627 | :min="0" | |
| 628 | controls-position="right" | |
| 629 | /> | |
| 630 | </el-form-item> | |
| 631 | <el-form-item v-if="cronValue.minute.type == '2'" label="间隔"> | |
| 632 | <el-input-number | |
| 633 | v-model="cronValue.minute.loop.start" | |
| 634 | :max="59" | |
| 635 | :min="0" | |
| 636 | controls-position="right" | |
| 637 | /> | |
| 638 | 分钟开始，每 | |
| 639 | <el-input-number | |
| 640 | v-model="cronValue.minute.loop.end" | |
| 641 | :max="59" | |
| 642 | :min="0" | |
| 643 | controls-position="right" | |
| 644 | /> | |
| 645 | 分钟执行一次 | |
| 646 | </el-form-item> | |
| 647 | <el-form-item v-if="cronValue.minute.type == '3'" label="指定"> | |
| 648 | <el-select v-model="cronValue.minute.appoint" multiple style="width: 100%"> | |
| 649 | <el-option | |
| 650 | v-for="(item, index) in data.minute" | |
| 651 | :key="index" | |
| 652 | :label="item" | |
| 653 | :value="item" | |
| 654 | /> | |
| 655 | </el-select> | |
| 656 | </el-form-item> | |
| 657 | </el-form> | |
| 658 | </el-tab-pane> | |
| 659 | <el-tab-pane> | |
| 660 | <template #label> | |
| 661 | <div class="sc-cron-num"> | |
| 662 | <h2>小时</h2> | |
| 663 | <h4>{{ value_hour }}</h4> | |
| 664 | </div> | |
| 665 | </template> | |
| 666 | <el-form> | |
| 667 | <el-form-item label="类型"> | |
| 668 | <el-radio-group v-model="cronValue.hour.type"> | |
| 9259c2 | 669 | <el-radio-button value="0">任意值</el-radio-button> |
| H | 670 | <el-radio-button value="1">范围</el-radio-button> |
| 671 | <el-radio-button value="2">间隔</el-radio-button> | |
| 672 | <el-radio-button value="3">指定</el-radio-button> | |
| 820397 | 673 | </el-radio-group> |
| H | 674 | </el-form-item> |
| 675 | <el-form-item v-if="cronValue.hour.type == '1'" label="范围"> | |
| 676 | <el-input-number | |
| 677 | v-model="cronValue.hour.range.start" | |
| 678 | :max="23" | |
| 679 | :min="0" | |
| 680 | controls-position="right" | |
| 681 | /> | |
| 682 | <span style="padding: 0 15px">-</span> | |
| 683 | <el-input-number | |
| 684 | v-model="cronValue.hour.range.end" | |
| 685 | :max="23" | |
| 686 | :min="0" | |
| 687 | controls-position="right" | |
| 688 | /> | |
| 689 | </el-form-item> | |
| 690 | <el-form-item v-if="cronValue.hour.type == '2'" label="间隔"> | |
| 691 | <el-input-number | |
| 692 | v-model="cronValue.hour.loop.start" | |
| 693 | :max="23" | |
| 694 | :min="0" | |
| 695 | controls-position="right" | |
| 696 | /> | |
| 697 | 小时开始，每 | |
| 698 | <el-input-number | |
| 699 | v-model="cronValue.hour.loop.end" | |
| 700 | :max="23" | |
| 701 | :min="0" | |
| 702 | controls-position="right" | |
| 703 | /> | |
| 704 | 小时执行一次 | |
| 705 | </el-form-item> | |
| 706 | <el-form-item v-if="cronValue.hour.type == '3'" label="指定"> | |
| 707 | <el-select v-model="cronValue.hour.appoint" multiple style="width: 100%"> | |
| 708 | <el-option | |
| 709 | v-for="(item, index) in data.hour" | |
| 710 | :key="index" | |
| 711 | :label="item" | |
| 712 | :value="item" | |
| 713 | /> | |
| 714 | </el-select> | |
| 715 | </el-form-item> | |
| 716 | </el-form> | |
| 717 | </el-tab-pane> | |
| 718 | <el-tab-pane> | |
| 719 | <template #label> | |
| 720 | <div class="sc-cron-num"> | |
| 721 | <h2>日</h2> | |
| 722 | <h4>{{ value_day }}</h4> | |
| 723 | </div> | |
| 724 | </template> | |
| 725 | <el-form> | |
| 726 | <el-form-item label="类型"> | |
| 727 | <el-radio-group v-model="cronValue.day.type"> | |
| 9259c2 | 728 | <el-radio-button value="0">任意值</el-radio-button> |
| H | 729 | <el-radio-button value="1">范围</el-radio-button> |
| 730 | <el-radio-button value="2">间隔</el-radio-button> | |
| 731 | <el-radio-button value="3">指定</el-radio-button> | |
| 732 | <el-radio-button value="4">本月最后一天</el-radio-button> | |
| 733 | <el-radio-button value="5">不指定</el-radio-button> | |
| 820397 | 734 | </el-radio-group> |
| H | 735 | </el-form-item> |
| 736 | <el-form-item v-if="cronValue.day.type == '1'" label="范围"> | |
| 737 | <el-input-number | |
| 738 | v-model="cronValue.day.range.start" | |
| 739 | :max="31" | |
| 740 | :min="1" | |
| 741 | controls-position="right" | |
| 742 | /> | |
| 743 | <span style="padding: 0 15px">-</span> | |
| 744 | <el-input-number | |
| 745 | v-model="cronValue.day.range.end" | |
| 746 | :max="31" | |
| 747 | :min="1" | |
| 748 | controls-position="right" | |
| 749 | /> | |
| 750 | </el-form-item> | |
| 751 | <el-form-item v-if="cronValue.day.type == '2'" label="间隔"> | |
| 752 | <el-input-number | |
| 753 | v-model="cronValue.day.loop.start" | |
| 754 | :max="31" | |
| 755 | :min="1" | |
| 756 | controls-position="right" | |
| 757 | /> | |
| 758 | 号开始，每 | |
| 759 | <el-input-number | |
| 760 | v-model="cronValue.day.loop.end" | |
| 761 | :max="31" | |
| 762 | :min="1" | |
| 763 | controls-position="right" | |
| 764 | /> | |
| 765 | 天执行一次 | |
| 766 | </el-form-item> | |
| 767 | <el-form-item v-if="cronValue.day.type == '3'" label="指定"> | |
| 768 | <el-select v-model="cronValue.day.appoint" multiple style="width: 100%"> | |
| 769 | <el-option | |
| 770 | v-for="(item, index) in data.day" | |
| 771 | :key="index" | |
| 772 | :label="item" | |
| 773 | :value="item" | |
| 774 | /> | |
| 775 | </el-select> | |
| 776 | </el-form-item> | |
| 777 | </el-form> | |
| 778 | </el-tab-pane> | |
| 779 | <el-tab-pane> | |
| 780 | <template #label> | |
| 781 | <div class="sc-cron-num"> | |
| 782 | <h2>月</h2> | |
| 783 | <h4>{{ value_month }}</h4> | |
| 784 | </div> | |
| 785 | </template> | |
| 786 | <el-form> | |
| 787 | <el-form-item label="类型"> | |
| 788 | <el-radio-group v-model="cronValue.month.type"> | |
| 9259c2 | 789 | <el-radio-button value="0">任意值</el-radio-button> |
| H | 790 | <el-radio-button value="1">范围</el-radio-button> |
| 791 | <el-radio-button value="2">间隔</el-radio-button> | |
| 792 | <el-radio-button value="3">指定</el-radio-button> | |
| 820397 | 793 | </el-radio-group> |
| H | 794 | </el-form-item> |
| 795 | <el-form-item v-if="cronValue.month.type == '1'" label="范围"> | |
| 796 | <el-input-number | |
| 797 | v-model="cronValue.month.range.start" | |
| 798 | :max="12" | |
| 799 | :min="1" | |
| 800 | controls-position="right" | |
| 801 | /> | |
| 802 | <span style="padding: 0 15px">-</span> | |
| 803 | <el-input-number | |
| 804 | v-model="cronValue.month.range.end" | |
| 805 | :max="12" | |
| 806 | :min="1" | |
| 807 | controls-position="right" | |
| 808 | /> | |
| 809 | </el-form-item> | |
| 810 | <el-form-item v-if="cronValue.month.type == '2'" label="间隔"> | |
| 811 | <el-input-number | |
| 812 | v-model="cronValue.month.loop.start" | |
| 813 | :max="12" | |
| 814 | :min="1" | |
| 815 | controls-position="right" | |
| 816 | /> | |
| 817 | 月开始，每 | |
| 818 | <el-input-number | |
| 819 | v-model="cronValue.month.loop.end" | |
| 820 | :max="12" | |
| 821 | :min="1" | |
| 822 | controls-position="right" | |
| 823 | /> | |
| 824 | 月执行一次 | |
| 825 | </el-form-item> | |
| 826 | <el-form-item v-if="cronValue.month.type == '3'" label="指定"> | |
| 827 | <el-select v-model="cronValue.month.appoint" multiple style="width: 100%"> | |
| 828 | <el-option | |
| 829 | v-for="(item, index) in data.month" | |
| 830 | :key="index" | |
| 831 | :label="item" | |
| 832 | :value="item" | |
| 833 | /> | |
| 834 | </el-select> | |
| 835 | </el-form-item> | |
| 836 | </el-form> | |
| 837 | </el-tab-pane> | |
| 838 | <el-tab-pane> | |
| 839 | <template #label> | |
| 840 | <div class="sc-cron-num"> | |
| 841 | <h2>周</h2> | |
| 842 | <h4>{{ value_week }}</h4> | |
| 843 | </div> | |
| 844 | </template> | |
| 845 | <el-form> | |
| 846 | <el-form> | |
| 847 | <el-form-item label="类型"> | |
| 848 | <el-radio-group v-model="cronValue.week.type"> | |
| 9259c2 | 849 | <el-radio-button value="0">任意值</el-radio-button> |
| H | 850 | <el-radio-button value="1">范围</el-radio-button> |
| 851 | <el-radio-button value="2">间隔</el-radio-button> | |
| 852 | <el-radio-button value="3">指定</el-radio-button> | |
| 853 | <el-radio-button value="4">本月最后一周</el-radio-button> | |
| 854 | <el-radio-button value="5">不指定</el-radio-button> | |
| 820397 | 855 | </el-radio-group> |
| H | 856 | </el-form-item> |
| 857 | <el-form-item v-if="cronValue.week.type == '1'" label="范围"> | |
| 858 | <el-select v-model="cronValue.week.range.start"> | |
| 859 | <el-option | |
| 860 | v-for="(item, index) in data.week" | |
| 861 | :key="index" | |
| 862 | :label="item.label" | |
| 863 | :value="item.value" | |
| 864 | /> | |
| 865 | </el-select> | |
| 866 | <span style="padding: 0 15px">-</span> | |
| 867 | <el-select v-model="cronValue.week.range.end"> | |
| 868 | <el-option | |
| 869 | v-for="(item, index) in data.week" | |
| 870 | :key="index" | |
| 871 | :label="item.label" | |
| 872 | :value="item.value" | |
| 873 | /> | |
| 874 | </el-select> | |
| 875 | </el-form-item> | |
| 876 | <el-form-item v-if="cronValue.week.type == '2'" label="间隔"> | |
| 877 | 第 | |
| 878 | <el-input-number | |
| 879 | v-model="cronValue.week.loop.start" | |
| 880 | :max="4" | |
| 881 | :min="1" | |
| 882 | controls-position="right" | |
| 883 | /> | |
| 884 | 周的星期 | |
| 885 | <el-select v-model="cronValue.week.loop.end"> | |
| 886 | <el-option | |
| 887 | v-for="(item, index) in data.week" | |
| 888 | :key="index" | |
| 889 | :label="item.label" | |
| 890 | :value="item.value" | |
| 891 | /> | |
| 892 | </el-select> | |
| 893 | 执行一次 | |
| 894 | </el-form-item> | |
| 895 | <el-form-item v-if="cronValue.week.type == '3'" label="指定"> | |
| 896 | <el-select v-model="cronValue.week.appoint" multiple style="width: 100%"> | |
| 897 | <el-option | |
| 898 | v-for="(item, index) in data.week" | |
| 899 | :key="index" | |
| 900 | :label="item.label" | |
| 901 | :value="item.value" | |
| 902 | /> | |
| 903 | </el-select> | |
| 904 | </el-form-item> | |
| 905 | <el-form-item v-if="cronValue.week.type == '4'" label="最后一周"> | |
| 906 | <el-select v-model="cronValue.week.last"> | |
| 907 | <el-option | |
| 908 | v-for="(item, index) in data.week" | |
| 909 | :key="index" | |
| 910 | :label="item.label" | |
| 911 | :value="item.value" | |
| 912 | /> | |
| 913 | </el-select> | |
| 914 | </el-form-item> | |
| 915 | </el-form> | |
| 916 | </el-form> | |
| 917 | </el-tab-pane> | |
| 918 | <el-tab-pane> | |
| 919 | <template #label> | |
| 920 | <div class="sc-cron-num"> | |
| 921 | <h2>年</h2> | |
| 922 | <h4>{{ value_year }}</h4> | |
| 923 | </div> | |
| 924 | </template> | |
| 925 | <el-form> | |
| 926 | <el-form-item label="类型"> | |
| 927 | <el-radio-group v-model="cronValue.year.type"> | |
| 9259c2 | 928 | <el-radio-button value="-1">忽略</el-radio-button> |
| H | 929 | <el-radio-button value="0">任意值</el-radio-button> |
| 930 | <el-radio-button value="1">范围</el-radio-button> | |
| 931 | <el-radio-button value="2">间隔</el-radio-button> | |
| 932 | <el-radio-button value="3">指定</el-radio-button> | |
| 820397 | 933 | </el-radio-group> |
| H | 934 | </el-form-item> |
| 935 | <el-form-item v-if="cronValue.year.type == '1'" label="范围"> | |
| 936 | <el-input-number v-model="cronValue.year.range.start" controls-position="right" /> | |
| 937 | <span style="padding: 0 15px">-</span> | |
| 938 | <el-input-number v-model="cronValue.year.range.end" controls-position="right" /> | |
| 939 | </el-form-item> | |
| 940 | <el-form-item v-if="cronValue.year.type == '2'" label="间隔"> | |
| 941 | <el-input-number v-model="cronValue.year.loop.start" controls-position="right" /> | |
| 942 | 年开始，每 | |
| 943 | <el-input-number | |
| 944 | v-model="cronValue.year.loop.end" | |
| 945 | :min="1" | |
| 946 | controls-position="right" | |
| 947 | /> | |
| 948 | 年执行一次 | |
| 949 | </el-form-item> | |
| 950 | <el-form-item v-if="cronValue.year.type == '3'" label="指定"> | |
| 951 | <el-select v-model="cronValue.year.appoint" multiple style="width: 100%"> | |
| 952 | <el-option | |
| 953 | v-for="(item, index) in data.year" | |
| 954 | :key="index" | |
| 955 | :label="item" | |
| 956 | :value="item" | |
| 957 | /> | |
| 958 | </el-select> | |
| 959 | </el-form-item> | |
| 960 | </el-form> | |
| 961 | </el-tab-pane> | |
| 962 | </el-tabs> | |
| 963 | </div> | |
| 964 | ||
| 965 | <template #footer> | |
| 966 | <el-button @click="dialogVisible = false">取 消</el-button> | |
| 967 | <el-button type="primary" @click="submit()">确 认</el-button> | |
| 968 | </template> | |
| 969 | </el-dialog> | |
| 970 | </template> | |
| 971 | ||
| 972 | <style scoped> | |
| 973 | .sc-cron:deep(.el-tabs__item) { | |
| 974 | height: auto; | |
| 975 | padding: 0 7px; | |
| 976 | line-height: 1; | |
| 977 | vertical-align: bottom; | |
| 978 | } | |
| 979 | ||
| 980 | .sc-cron-num { | |
| 981 | width: 100%; | |
| 982 | margin-bottom: 15px; | |
| 983 | text-align: center; | |
| 984 | } | |
| 985 | ||
| 986 | .sc-cron-num h2 { | |
| 987 | margin-bottom: 15px; | |
| 988 | font-size: 12px; | |
| 989 | font-weight: normal; | |
| 990 | } | |
| 991 | ||
| 992 | .sc-cron-num h4 { | |
| 993 | display: block; | |
| 994 | width: 100%; | |
| 995 | height: 32px; | |
| 996 | padding: 0 15px; | |
| 997 | font-size: 12px; | |
| 998 | line-height: 30px; | |
| 999 | background: var(--el-color-primary-light-9); | |
| 1000 | border-radius: 4px; | |
| 1001 | } | |
| 1002 | ||
| 1003 | .sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 { | |
| 1004 | color: #fff; | |
| 1005 | background: var(--el-color-primary); | |
| 1006 | } | |
| 1007 | ||
| 1008 | [data-theme='dark'] .sc-cron-num h4 { | |
| 1009 | background: var(--el-color-white); | |
| 1010 | } | |
| 1011 | ||
| 1012 | .input-with-select .el-input-group__prepend { | |
| 1013 | background-color: var(--el-fill-color-blank); | |
| 1014 | } | |
| 1015 | </style> | |
