From df982af13ec730370ffac3306ddac0b7b92c9d0a Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Wed, 5 Jan 2022 09:45:05 +0800
Subject: [PATCH] =?UTF-8?q?:tada:=20=E6=96=B0=E5=A2=9E=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=20cron=E8=A7=84=E5=88=99=E7=94=9F=E6=88=90=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scCron/index.vue | 730 ++++++++++++++++++++++++++++++++
 src/views/setting/task/save.vue |  13 +-
 2 files changed, 742 insertions(+), 1 deletion(-)
 create mode 100644 src/components/scCron/index.vue

diff --git a/src/components/scCron/index.vue b/src/components/scCron/index.vue
new file mode 100644
index 00000000..6c5e7764
--- /dev/null
+++ b/src/components/scCron/index.vue
@@ -0,0 +1,730 @@
+<!--
+ * @Descripttion: cron规则生成器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年12月29日15:23:54
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-input v-model="defaultValue" v-bind="$attrs">
+		<template #append>
+			<el-dropdown size="medium" @command="handleShortcuts">
+				<el-button icon="el-icon-arrow-down"></el-button>
+				<template #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item command="0 * * * * ?">每分钟</el-dropdown-item>
+						<el-dropdown-item command="0 0 * * * ?">每小时</el-dropdown-item>
+						<el-dropdown-item command="0 0 0 * * ?">每天零点</el-dropdown-item>
+						<el-dropdown-item command="0 0 0 1 * ?">每月一号零点</el-dropdown-item>
+						<el-dropdown-item command="0 0 0 L * ?">每月最后一天零点</el-dropdown-item>
+						<el-dropdown-item command="0 0 0 ? * 1">每周星期日零点</el-dropdown-item>
+						<el-dropdown-item v-for="(item, index) in shortcuts" :key="item.value" :divided="index==0" :command="item.value">{{item.text}}</el-dropdown-item>
+						<el-dropdown-item icon="el-icon-plus" divided command="custom">自定义</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+		</template>
+	</el-input>
+
+	<el-dialog title="cron规则生成器" v-model="dialogVisible" :width="580" destroy-on-close append-to-body>
+		<div class="sc-cron">
+			<el-tabs>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>秒</h2>
+							<h4>{{value_second}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.second.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.second.type==1">
+							<el-input-number v-model="value.second.range.start" :min="0" :max="59" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.second.range.end" :min="0" :max="59" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.second.type==2">
+							<el-input-number v-model="value.second.loop.start" :min="0" :max="59" controls-position="right"></el-input-number>
+							秒开始，每
+							<el-input-number v-model="value.second.loop.end" :min="0" :max="59" controls-position="right"></el-input-number>
+							秒执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.second.type==3">
+							<el-select v-model="value.second.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.second" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>分钟</h2>
+							<h4>{{value_minute}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.minute.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.minute.type==1">
+							<el-input-number v-model="value.minute.range.start" :min="0" :max="59" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.minute.range.end" :min="0" :max="59" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.minute.type==2">
+							<el-input-number v-model="value.minute.loop.start" :min="0" :max="59" controls-position="right"></el-input-number>
+							分钟开始，每
+							<el-input-number v-model="value.minute.loop.end" :min="0" :max="59" controls-position="right"></el-input-number>
+							分钟执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.minute.type==3">
+							<el-select v-model="value.minute.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.minute" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>小时</h2>
+							<h4>{{value_hour}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.hour.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.hour.type==1">
+							<el-input-number v-model="value.hour.range.start" :min="0" :max="23" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.hour.range.end" :min="0" :max="23" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.hour.type==2">
+							<el-input-number v-model="value.hour.loop.start" :min="0" :max="23" controls-position="right"></el-input-number>
+							小时开始，每
+							<el-input-number v-model="value.hour.loop.end" :min="0" :max="23" controls-position="right"></el-input-number>
+							小时执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.hour.type==3">
+							<el-select v-model="value.hour.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.hour" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>日</h2>
+							<h4>{{value_day}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.day.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+								<el-radio-button label="4">本月最后一天</el-radio-button>
+								<el-radio-button label="5">不指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.day.type==1">
+							<el-input-number v-model="value.day.range.start" :min="1" :max="31" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.day.range.end" :min="1" :max="31" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.day.type==2">
+							<el-input-number v-model="value.day.loop.start" :min="1" :max="31" controls-position="right"></el-input-number>
+							号开始，每
+							<el-input-number v-model="value.day.loop.end" :min="1" :max="31" controls-position="right"></el-input-number>
+							天执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.day.type==3">
+							<el-select v-model="value.day.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.day" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>月</h2>
+							<h4>{{value_month}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.month.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.month.type==1">
+							<el-input-number v-model="value.month.range.start" :min="1" :max="12" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.month.range.end" :min="1" :max="12" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.month.type==2">
+							<el-input-number v-model="value.month.loop.start" :min="1" :max="12" controls-position="right"></el-input-number>
+							月开始，每
+							<el-input-number v-model="value.month.loop.end" :min="1" :max="12" controls-position="right"></el-input-number>
+							月执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.month.type==3">
+							<el-select v-model="value.month.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.month" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>周</h2>
+							<h4>{{value_week}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form>
+							<el-form-item label="类型">
+								<el-radio-group v-model="value.week.type">
+									<el-radio-button label="0">任意值</el-radio-button>
+									<el-radio-button label="1">范围</el-radio-button>
+									<el-radio-button label="2">间隔</el-radio-button>
+									<el-radio-button label="3">指定</el-radio-button>
+									<el-radio-button label="4">本月最后一周</el-radio-button>
+									<el-radio-button label="5">不指定</el-radio-button>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label="范围" v-if="value.week.type==1">
+								<el-select v-model="value.week.range.start">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+								<span style="padding:0 15px;">-</span>
+								<el-select v-model="value.week.range.end">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+							</el-form-item>
+							<el-form-item label="间隔" v-if="value.week.type==2">
+								第
+								<el-input-number v-model="value.week.loop.start" :min="1" :max="4" controls-position="right"></el-input-number>
+								周的星期
+								<el-select v-model="value.week.loop.end">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+								执行一次
+							</el-form-item>
+							<el-form-item label="指定" v-if="value.week.type==3">
+								<el-select v-model="value.week.appoint" multiple style="width: 100%;">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+							</el-form-item>
+							<el-form-item label="最后一周" v-if="value.week.type==4">
+								<el-select v-model="value.week.last">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+							</el-form-item>
+						</el-form>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>年</h2>
+							<h4>{{value_year}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.year.type">
+								<el-radio-button label="-1">忽略</el-radio-button>
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.year.type==1">
+							<el-input-number v-model="value.year.range.start" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.year.range.end" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.year.type==2">
+							<el-input-number v-model="value.year.loop.start" controls-position="right"></el-input-number>
+							年开始，每
+							<el-input-number v-model="value.year.loop.end" :min="1" controls-position="right"></el-input-number>
+							年执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.year.type==3">
+							<el-select v-model="value.year.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.year" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+			</el-tabs>
+		</div>
+
+		<template #footer>
+			<el-button @click="dialogVisible=false" >取 消</el-button>
+			<el-button type="primary" @click="submit()">确 认</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: { type: String, default: "* * * * * ?" },
+			shortcuts: { type: Array, default: () => [] }
+		},
+		data() {
+			return {
+				type: '0',
+				defaultValue: '',
+				dialogVisible: false,
+
+				value:{
+					second: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 0,
+							end: 1
+						},
+						appoint: []
+					},
+					minute: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 0,
+							end: 1
+						},
+						appoint: []
+					},
+					hour: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 0,
+							end: 1
+						},
+						appoint: []
+					},
+					day: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 1,
+							end: 1
+						},
+						appoint: []
+					},
+					month: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 1,
+							end: 1
+						},
+						appoint: []
+					},
+					week: {
+						type: '5',
+						range: {
+							start: '2',
+							end: '3'
+						},
+						loop: {
+							start: 0,
+							end: '2'
+						},
+						last: '2',
+						appoint: []
+					},
+					year: {
+						type: '-1',
+						range: {
+							start: this.getYear()[0],
+							end: this.getYear()[1]
+						},
+						loop: {
+							start: this.getYear()[0],
+							end: 1
+						},
+						appoint: []
+					}
+				},
+				data: {
+					second: ['0','5','15','20','25','30','35','40','45','50','55','59'],
+					minute: ['0','5','15','20','25','30','35','40','45','50','55','59'],
+					hour: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
+					day: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
+					month: ['1','2','3','4','5','6','7','8','9','10','11','12'],
+					week: [
+						{
+							value: '1',
+							label: '周日'
+						},
+						{
+							value: '2',
+							label: '周一'
+						},
+						{
+							value: '3',
+							label: '周二'
+						},
+						{
+							value: '4',
+							label: '周三'
+						},
+						{
+							value: '5',
+							label: '周四'
+						},
+						{
+							value: '6',
+							label: '周五'
+						},
+						{
+							value: '7',
+							label: '周六'
+						}
+					],
+					year: this.getYear()
+				}
+			}
+		},
+		watch: {
+			'value.week.type'(val){
+				if(val != '5'){
+					this.value.day.type = '5'
+				}
+			},
+			'value.day.type'(val){
+				if(val != '5'){
+					this.value.week.type = '5'
+				}
+			}
+		},
+		computed: {
+			value_second(){
+				let v = this.value.second
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else{
+					return '*'
+				}
+			},
+			value_minute(){
+				let v = this.value.minute
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else{
+					return '*'
+				}
+			},
+			value_hour(){
+				let v = this.value.hour
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else{
+					return '*'
+				}
+			},
+			value_day(){
+				let v = this.value.day
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else if(v.type==4){
+					return 'L'
+				}else if(v.type==5){
+					return '?'
+				}else{
+					return '*'
+				}
+			},
+			value_month(){
+				let v = this.value.month
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else{
+					return '*'
+				}
+			},
+			value_week(){
+				let v = this.value.week
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.end + '#' + v.loop.start
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else if(v.type==4){
+					return v.last + 'L'
+				}else if(v.type==5){
+					return '?'
+				}else{
+					return '*'
+				}
+			},
+			value_year(){
+				let v = this.value.year
+				if(v.type == -1){
+					return ''
+				}else if(v.type==0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : ''
+				}else{
+					return ''
+				}
+			},
+		},
+		mounted() {
+			this.defaultValue = this.modelValue
+		},
+		methods: {
+			handleShortcuts(command){
+				if(command == 'custom'){
+					this.open()
+				}else{
+					this.defaultValue = command
+					this.$emit('update:modelValue', this.defaultValue)
+				}
+			},
+			open(){
+				this.set()
+				this.dialogVisible = true
+			},
+			set(){
+				this.defaultValue = this.modelValue
+				let arr = (this.modelValue || "* * * * * ?").split(" ")
+				//简单检查
+				if(arr.length < 6){
+					this.$message.warning("cron表达式错误，已转换为默认表达式")
+					arr = "* * * * * ?".split(" ")
+				}
+
+				//秒
+				if(arr[0]=='*'){
+					this.value.second.type = '0'
+				}else if(arr[0].includes('-')){
+					this.value.second.type = '1'
+					this.value.second.range.start = Number(arr[0].split("-")[0])
+					this.value.second.range.end = Number(arr[0].split("-")[1])
+				}else if(arr[0].includes('/')){
+					this.value.second.type = '2'
+					this.value.second.loop.start = Number(arr[0].split("/")[0])
+					this.value.second.loop.end = Number(arr[0].split("/")[1])
+				}else{
+					this.value.second.type = '3'
+					this.value.second.appoint = arr[0].split(",")
+				}
+				//分
+				if(arr[1]=='*'){
+					this.value.minute.type = '0'
+				}else if(arr[1].includes('-')){
+					this.value.minute.type = '1'
+					this.value.minute.range.start = Number(arr[1].split("-")[0])
+					this.value.minute.range.end = Number(arr[1].split("-")[1])
+				}else if(arr[1].includes('/')){
+					this.value.minute.type = '2'
+					this.value.minute.loop.start = Number(arr[1].split("/")[0])
+					this.value.minute.loop.end = Number(arr[1].split("/")[1])
+				}else{
+					this.value.minute.type = '3'
+					this.value.minute.appoint = arr[1].split(",")
+				}
+				//小时
+				if(arr[2]=='*'){
+					this.value.hour.type = '0'
+				}else if(arr[2].includes('-')){
+					this.value.hour.type = '1'
+					this.value.hour.range.start = Number(arr[2].split("-")[0])
+					this.value.hour.range.end = Number(arr[2].split("-")[1])
+				}else if(arr[2].includes('/')){
+					this.value.hour.type = '2'
+					this.value.hour.loop.start = Number(arr[2].split("/")[0])
+					this.value.hour.loop.end = Number(arr[2].split("/")[1])
+				}else{
+					this.value.hour.type = '3'
+					this.value.hour.appoint = arr[2].split(",")
+				}
+				//日
+				if(arr[3]=='*'){
+					this.value.day.type = '0'
+				}else if(arr[3]=='L'){
+					this.value.day.type = '4'
+				}else if(arr[3]=='?'){
+					this.value.day.type = '5'
+				}else if(arr[3].includes('-')){
+					this.value.day.type = '1'
+					this.value.day.range.start = Number(arr[3].split("-")[0])
+					this.value.day.range.end = Number(arr[3].split("-")[1])
+				}else if(arr[3].includes('/')){
+					this.value.day.type = '2'
+					this.value.day.loop.start = Number(arr[3].split("/")[0])
+					this.value.day.loop.end = Number(arr[3].split("/")[1])
+				}else{
+					this.value.day.type = '3'
+					this.value.day.appoint = arr[3].split(",")
+				}
+				//月
+				if(arr[4]=='*'){
+					this.value.month.type = '0'
+				}else if(arr[4].includes('-')){
+					this.value.month.type = '1'
+					this.value.month.range.start = Number(arr[4].split("-")[0])
+					this.value.month.range.end = Number(arr[4].split("-")[1])
+				}else if(arr[4].includes('/')){
+					this.value.month.type = '2'
+					this.value.month.loop.start = Number(arr[4].split("/")[0])
+					this.value.month.loop.end = Number(arr[4].split("/")[1])
+				}else{
+					this.value.month.type = '3'
+					this.value.month.appoint = arr[4].split(",")
+				}
+				//周
+				if(arr[5]=='*'){
+					this.value.week.type = '0'
+				}else if(arr[5]=='?'){
+					this.value.week.type = '5'
+				}else if(arr[5].includes('-')){
+					this.value.week.type = '1'
+					this.value.week.range.start = arr[5].split("-")[0]
+					this.value.week.range.end = arr[5].split("-")[1]
+				}else if(arr[5].includes('#')){
+					this.value.week.type = '2'
+					this.value.week.loop.start = Number(arr[5].split("#")[1])
+					this.value.week.loop.end = arr[5].split("#")[0]
+				}else if(arr[5].includes('L')){
+					this.value.week.type = '4'
+					this.value.week.last = arr[5].split("L")[0]
+				}else{
+					this.value.week.type = '3'
+					this.value.week.appoint = arr[5].split(",")
+				}
+				//年
+				if(!arr[6]){
+					this.value.year.type = '-1'
+				}else if(arr[6]=='*'){
+					this.value.year.type = '0'
+				}else if(arr[6].includes('-')){
+					this.value.year.type = '1'
+					this.value.year.range.start = Number(arr[6].split("-")[0])
+					this.value.year.range.end = Number(arr[6].split("-")[1])
+				}else if(arr[6].includes('/')){
+					this.value.year.type = '2'
+					this.value.year.loop.start = Number(arr[6].split("/")[1])
+					this.value.year.loop.end = Number(arr[6].split("/")[0])
+				}else{
+					this.value.year.type = '3'
+					this.value.year.appoint = arr[6].split(",")
+				}
+			},
+			getYear(){
+				let v = []
+				let y = new Date().getFullYear()
+				for (let i = 0; i < 11; i++) {
+					v.push(y+i)
+				}
+				return v
+			},
+			submit(){
+				let year = this.value_year ? ' '+this.value_year : ''
+				this.defaultValue = this.value_second + ' ' + this.value_minute + ' ' + this.value_hour + ' ' + this.value_day + ' ' + this.value_month + ' ' + this.value_week + year
+				this.$emit('update:modelValue', this.defaultValue)
+				this.dialogVisible = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-cron:deep(.el-tabs__item) {height: auto;line-height: 1;padding:0 7px;vertical-align: bottom;}
+	.sc-cron-num {text-align: center;margin-bottom: 15px;width: 100%;}
+	.sc-cron-num h2 {font-size: 12px;margin-bottom: 15px;font-weight: normal;}
+	.sc-cron-num h4 {display: block;height: 32px;line-height: 30px;width: 100%;font-size: 12px;padding:0 15px;background: var(--el-color-primary-light-9);border-radius:4px;}
+	.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {background: var(--el-color-primary);color: #fff;}
+
+	[data-theme='dark'] .sc-cron-num h4 {background: var(--el-color-white);}
+</style>
diff --git a/src/views/setting/task/save.vue b/src/views/setting/task/save.vue
index 94eec18d..260ab947 100644
--- a/src/views/setting/task/save.vue
+++ b/src/views/setting/task/save.vue
@@ -17,7 +17,7 @@
 				<el-input v-model="form.handler" placeholder="计划任务执行类名称" clearable></el-input>
 			</el-form-item>
 			<el-form-item label="定时规则" prop="cron">
-				<el-input v-model="form.cron" placeholder="请输入Cron定时规则" clearable></el-input>
+				<sc-cron v-model="form.cron" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></sc-cron>
 			</el-form-item>
 			<el-form-item label="是否启用" prop="state">
 				<el-switch v-model="form.state" active-value="1" inactive-value="-1"></el-switch>
@@ -31,7 +31,12 @@
 </template>
 
 <script>
+	import scCron from '@/components/scCron';
+	
 	export default {
+		components: {
+			scCron
+		},
 		emits: ['success', 'closed'],
 		data() {
 			return {
@@ -60,6 +65,12 @@
 				},
 				visible: false,
 				isSaveing: false,
+				shortcuts: [
+					{
+						text: "每天8点和12点 (自定义追加)",
+						value: "0 0 8,12 * * ?"
+					}
+				]
 			}
 		},
 		mounted() {