diff --git a/src/scheduleManage/component/cron/index.vue b/src/scheduleManage/component/cron/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3fac10fa9be054fb85c510f497153570685c270d
--- /dev/null
+++ b/src/scheduleManage/component/cron/index.vue
@@ -0,0 +1,180 @@
+<template>
+	<el-select @visible-change="visibleChange">
+		<template #empty>
+			<div class="option">
+				<el-radio-group class="app-radio-group" v-model="radioObj.checked" @change="handleChecked">
+					<el-radio class="radio-block" value="all">
+						<strong>所有</strong>
+						<span v-if="props.dimension === '星期'"> 每星期的每天执行一次</span>
+						<span v-else> 每{{ props.dimension }}执行一次</span>
+					</el-radio>
+					<el-radio class="radio-block" value="specific" v-if="props.radioGroup.specific">
+						<strong>特定</strong>
+						<span v-if="props.dimension === '星期'"> 在星期 </span>
+						<span v-else> 在第 </span>
+						<el-input-number v-model="radioObj.specific" :min="props.rangeVlue.min" :max="props.rangeVlue.max" :precision="0" />
+						<span v-if="props.dimension != '星期'">&nbsp;{{ props.dimension }} </span>
+						执行一次
+					</el-radio>
+					<el-radio class="radio-block" value="range" v-if="props.radioGroup.range">
+						<strong>范围</strong>
+						<span v-if="props.dimension === '星期'"> 从星期 </span>
+						<span v-else> 从第 </span>
+						<el-input-number v-model="radioObj.range.min" :min="props.rangeVlue.min" :max="radioObj.range.max - 1" :precision="0" />
+						<span v-if="props.dimension === '星期'"> 到星期 </span>
+						<span v-else>&nbsp;{{ props.dimension }}，到第 </span>
+						<el-input-number v-model="radioObj.range.max" :min="radioObj.range.min + 1" :max="props.rangeVlue.max" :precision="0" />
+						<span v-if="props.dimension === '星期'"> 每天执行一次 </span>
+						<span v-else>&nbsp;{{ props.dimension }}，每{{ props.dimension }}执行一次</span>
+					</el-radio>
+
+					<el-radio class="radio-block" value="step" v-if="props.radioGroup.step && props.dimension != '星期'">
+						<strong>步长</strong>
+						每隔
+						<el-input-number v-model="radioObj.step" :min="props.rangeVlue.min + 1" :max="props.rangeVlue.max" :precision="0" />
+						{{ props.dimension }}执行一次
+					</el-radio>
+
+					<el-radio class="radio-block" value="assign" v-if="props.radioGroup.assign">
+						<strong>指定</strong>
+						<span v-if="props.dimension === '星期'"> 在星期{{ listJoin }}各执行一次 </span>
+						<span v-else>
+							<span v-if="radioObj.list.length > 0"> 在{{ listJoin }}{{ props.dimension }}各执行一次 </span>
+						</span>
+					</el-radio>
+					<el-checkbox-group class="app-checkbox-group" v-model="radioObj.list" v-if="props.radioGroup.assign">
+						<el-checkbox v-for="i in assignRange" :key="i" :label="formattedNumbers(i)" :value="i" />
+					</el-checkbox-group>
+				</el-radio-group>
+			</div>
+		</template>
+	</el-select>
+</template>
+
+<script lang="ts" setup>
+import { reactive, computed, watch } from 'vue';
+import XEUtils from 'xe-utils';
+const props = defineProps({
+	dimension: {
+		type: String,
+		default: '分钟',
+	},
+	rangeVlue: {
+		type: Object,
+		default: () => ({
+			min: 1,
+			max: 2,
+		}),
+	},
+	radioGroup: {
+		type: Object,
+		default: () => ({
+			specific: true,
+			range: true,
+			step: true,
+			assign: true,
+		}),
+	},
+	data: undefined, //数据值
+} as any);
+
+const radioObj = reactive({
+	checked: 'all',
+	specific: 0,
+	range: {
+		min: 1,
+		max: 2,
+	},
+	step: 1,
+	list: [] as number[],
+});
+const listJoin = computed(() => {
+	return XEUtils.orderBy(radioObj.list, { order: 'asc' }).join(',');
+});
+const handleChecked = (val: any) => {
+	radioObj.list = val === 'assign' ? [props.rangeVlue.min, props.rangeVlue.min + 1] : [];
+};
+const assignRange = computed(() => {
+	const arr = [];
+	for (let i = props.rangeVlue.min; i <= props.rangeVlue.max; i++) {
+		arr.push(i);
+	}
+	return arr;
+});
+// 计算属性 result
+const result = computed(() => {
+	switch (radioObj.checked) {
+		case 'all':
+			return '*';
+		case 'specific':
+			return radioObj.specific;
+		case 'range':
+			return `${radioObj.range.min}-${radioObj.range.max}`;
+		case 'step':
+			return `*/${radioObj.step}`;
+		case 'assign':
+			return XEUtils.orderBy(radioObj.list, { order: 'asc' }).join(',');
+		default:
+			return '*';
+	}
+});
+
+// 监听 result 的变化，
+const emit = defineEmits(['update:modelValue']);
+watch(result, (value) => {
+	emit('update:modelValue', value);
+});
+
+/**
+ * 下拉框展开/关闭
+ * @param bool
+ */
+const visibleChange = (bool: any) => {
+	if (bool && props.data != undefined) {
+		const _data = props.data;
+		if (_data.includes('/')) {
+			radioObj.checked = 'step';
+			radioObj.step = _data.split('/')[1] * 1;
+		} else if (_data.includes('*')) {
+			radioObj.checked = 'all';
+		} else if (_data.includes('-')) {
+			radioObj.checked = 'range';
+			const [min, max] = _data.split('-');
+			radioObj.range.min = min * 1;
+			radioObj.range.max = max * 1;
+		} else if (_data.includes(',')) {
+			radioObj.checked = 'assign';
+			radioObj.list = _data.split(',').map(Number);
+		} else {
+			radioObj.checked = 'specific';
+			radioObj.specific = _data;
+		}
+	}
+};
+// 格式化数值
+const formattedNumbers = (num: number) => {
+	return num < 10 ? '0' + num : num.toString();
+};
+</script>
+
+<style scoped>
+.option {
+	width: 100px;
+	height: auto;
+	line-height: 1;
+	padding: 5px;
+	background-color: #fff;
+	.app-radio-group {
+		display: block;
+		text-align: left;
+		.radio-block {
+			width: 100%;
+			margin-bottom: 5px;
+		}
+		.app-checkbox-group {
+			width: 800px;
+			padding-left: 20px;
+		}
+	}
+}
+</style>
diff --git a/src/scheduleManage/component/crontabManage/crud.tsx b/src/scheduleManage/component/crontabManage/crud.tsx
index 7ae52d955c3b905f4832a7fb5400711acfab08a9..3ccfb41c13101c9918341411c19106f11c3fc845 100644
--- a/src/scheduleManage/component/crontabManage/crud.tsx
+++ b/src/scheduleManage/component/crontabManage/crud.tsx
@@ -1,10 +1,8 @@
 import * as api from './api';
-import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
-import { request } from '/@/utils/service';
-import { dictionary } from '/@/utils/dictionary';
-import { successMessage } from '/@/utils/message';
-import { inject } from 'vue';
-import {auth} from "/@/utils/authFunction";
+import { UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { shallowRef } from 'vue';
+import cron from '../cron/index.vue';
+import { auth } from '/@/utils/authFunction';
 
 export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
@@ -21,7 +19,6 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 		return await api.AddObj(form);
 	};
 
-
 	return {
 		crudOptions: {
 			request: {
@@ -30,6 +27,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 				editRequest,
 				delRequest,
 			},
+			search:{
+				show:false,
+			},
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',
@@ -53,11 +53,11 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 				},
 			},
 			form: {
+				size: '80%',
 				col: { span: 24 },
 				labelWidth: '110px',
 				wrapper: {
 					is: 'el-dialog',
-					width: '600px',
 				},
 			},
 			columns: {
@@ -78,31 +78,143 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 						},
 					},
 				},
-
 				minute: {
-					title: 'minute',
-					sortable: 'custom',
+					title: '分钟',
 					type: 'text',
+					form: {
+						component: {
+							name: shallowRef(cron),
+							clearable: false,
+							placeholder: '*',
+							vModel: 'modelValue',
+							data: compute(({ row }) => {
+								if (row) {
+									return row.minute;
+								}
+								return '*';
+							}),
+							rangeVlue: {
+								min: 0,
+								max: 59,
+							},
+						},
+					},
 				},
 				hour: {
-					title: 'hour',
-					sortable: 'custom',
+					title: '小时',
 					type: 'text',
+					form: {
+						component: {
+							name: shallowRef(cron),
+							clearable: false,
+							placeholder: '*',
+							vModel: 'modelValue',
+							data: compute(({ row }) => {
+								if (row) {
+									return row.hour;
+								}
+								return '*';
+							}),
+							dimension: '小时',
+							radioGroup: {
+								specific: true,
+								range: true,
+								step: true,
+								assign: true,
+							},
+							rangeVlue: {
+								min: 0,
+								max: 23,
+							},
+						},
+					},
 				},
 				day_of_week: {
-					title: 'day_of_week',
-					sortable: 'custom',
+					title: '星期',
 					type: 'text',
+					form: {
+						component: {
+							name: shallowRef(cron),
+							vModel: 'modelValue',
+							clearable: false,
+							placeholder: '*',
+							data: compute(({ row }) => {
+								if (row) {
+									return row.day_of_week;
+								}
+								return '*';
+							}),
+							dimension: '星期',
+							radioGroup: {
+								specific: true,
+								range: true,
+								step: true,
+								assign: true,
+							},
+							rangeVlue: {
+								min: 1,
+								max: 7,
+							},
+						},
+					},
 				},
 				day_of_month: {
-					title: 'day_of_month',
-					sortable: 'custom',
+					title: '日期',
 					type: 'text',
+					form: {
+						component: {
+							name: shallowRef(cron),
+							vModel: 'modelValue',
+							clearable: false,
+							placeholder: '*',
+							data: compute(({ row }) => {
+								if (row) {
+									return row.day_of_month;
+								}
+								return '*';
+							}),
+							dimension: '天',
+							radioGroup: {
+								specific: true,
+								range: true,
+								step: true,
+								assign: true,
+							},
+							rangeVlue: {
+								min: 1,
+								max: 31,
+							},
+						},
+					},
 				},
 				month_of_year: {
-					title: 'month_of_year',
-					sortable: 'custom',
+					title: '月份',
 					type: 'text',
+					form: {
+						component: {
+							name: shallowRef(cron),
+							vModel: 'modelValue',
+							clearable: false,
+							placeholder: '*',
+							data: compute(({ row }) => {
+								if (row) {
+									return row.month_of_year;
+								}
+								return '*';
+							}),
+							dimension: '月',
+							radioGroup: {
+								specific: true,
+								range: true,
+								step: true,
+								assign: true,
+							},
+							rangeVlue: {
+								min: 1,
+								max: 12,
+							},
+						},
+					},
 				},
 			},
 		},
diff --git a/src/scheduleManage/component/intervalManage/crud.tsx b/src/scheduleManage/component/intervalManage/crud.tsx
index 50a30ed3645c997994516e1b6adda42cbd5b123a..88ff807f03e6957797a51cd6fc307f5cde725e9a 100644
--- a/src/scheduleManage/component/intervalManage/crud.tsx
+++ b/src/scheduleManage/component/intervalManage/crud.tsx
@@ -1,113 +1,109 @@
 import * as api from './api';
-import {
-    dict,
-    UserPageQuery,
-    AddReq,
-    DelReq,
-    EditReq,
-    compute,
-    CreateCrudOptionsProps,
-    CreateCrudOptionsRet
-} from '@fast-crud/fast-crud';
-import {request} from '/@/utils/service';
-import {dictionary} from '/@/utils/dictionary';
-import {successMessage} from '/@/utils/message';
-import {inject} from 'vue';
-import {auth} from "/@/utils/authFunction";
-export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps): CreateCrudOptionsRet {
-    const pageRequest = async (query: UserPageQuery) => {
-        return await api.GetList(query);
-    };
-    const editRequest = async ({form, row}: EditReq) => {
-        form.id = row.id;
-        return await api.UpdateObj(form);
-    };
-    const delRequest = async ({row}: DelReq) => {
-        return await api.DelObj(row.id);
-    };
-    const addRequest = async ({form}: AddReq) => {
-        return await api.AddObj(form);
-    };
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { auth } from '/@/utils/authFunction';
+export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		return await api.GetList(query);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		return await api.AddObj(form);
+	};
 
-
-    return {
-        crudOptions: {
-            request: {
-                pageRequest,
-                addRequest,
-                editRequest,
-                delRequest,
-            },
-            rowHandle: {
-                //固定右侧
-                fixed: 'right',
-                width: 150,
-                buttons: {
-                    view: {
-                        show: false,
-                    },
-                    edit: {
-                        iconRight: 'Edit',
-                        type: 'text',
-                        // @ts-ignore
-                        show: auth('api_white_list:Update'),
-                    },
-                    remove: {
-                        iconRight: 'Delete',
-                        type: 'text',
-                        // @ts-ignore
-                        show: auth('api_white_list:Delete'),
-                    },
-                },
-            },
-            form: {
-                col: {span: 24},
-                labelWidth: '110px',
-                wrapper: {
-                    is: 'el-dialog',
-                    width: '600px',
-                },
-            },
-            columns: {
-                _index: {
-                    title: '序号',
-                    form: {show: false},
-                    column: {
-                        //type: 'index',
-                        align: 'center',
-                        width: '70px',
-                        columnSetDisabled: true, //禁止在列设置中选择
-                        //@ts-ignore
-                        formatter: (context) => {
-                            //计算序号,你可以自定义计算规则，此处为翻页累加
-                            let index = context.index ?? 1;
-                            let pagination: any = crudExpose!.crudBinding.value.pagination;
-                            return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
-                        },
-                    },
-                },
-                every: {
-                    title: 'every',
-                    sortable: 'custom',
-                    type: 'text',
-                },
-                period: {
-                    title: 'period',
-                    sortable: 'custom',
-                    type: 'dict-select',
-                    dict: dict({
-                        value: "value",
-                        label: "label",
-                        data: [
-                            {value: "days", label: "Days", color: "success"},
-                            {value: "hours", label: "Hours", color: "success"},
-                            {value: "minutes", label: "Minutes", color: "success"},
-                            {value: "seconds", label: "Seconds", color: "success"},
-                            {value: "microseconds", label: "Microseconds", color: "success"},
-                        ]
-                    })
-                },
-            },
-        },
-    };
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 150,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+						// @ts-ignore
+						show: auth('api_white_list:Update'),
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+						// @ts-ignore
+						show: auth('api_white_list:Delete'),
+					},
+				},
+			},
+			search: {
+				show: false,
+			},
+			form: {
+				col: { span: 24 },
+				labelWidth: '110px',
+				wrapper: {
+					is: 'el-dialog',
+					width: '80%',
+				},
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						//type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+						//@ts-ignore
+						formatter: (context) => {
+							//计算序号,你可以自定义计算规则，此处为翻页累加
+							let index = context.index ?? 1;
+							let pagination: any = crudExpose!.crudBinding.value.pagination;
+							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+						},
+					},
+				},
+				period: {
+					title: '间隔单位',
+					sortable: 'custom',
+					type: 'dict-select',
+					dict: dict({
+						value: 'value',
+						label: 'label',
+						data: [
+							{ value: 'days', label: '天', color: 'success' },
+							{ value: 'hours', label: '小时', color: 'success' },
+							{ value: 'minutes', label: '分钟', color: 'success' },
+							{ value: 'seconds', label: '秒', color: 'success' },
+							{ value: 'microseconds', label: '毫秒', color: 'success' },
+						],
+					}),
+				},
+				every: {
+					title: '间隔频率',
+					sortable: 'custom',
+					type: 'number',
+				},
+				described:{
+					title: '描述',
+					type: 'text',
+					form:{
+						show:false,
+					}
+				}
+			},
+		},
+	};
 };
diff --git a/src/scheduleManage/index.vue b/src/scheduleManage/index.vue
index 77695a86199f4ca73a2a4dccd2ec9c384a172735..723f314aaa8957c55dce79859ccbc102f51aba30 100644
--- a/src/scheduleManage/index.vue
+++ b/src/scheduleManage/index.vue
@@ -2,10 +2,10 @@
     <el-main class="bg-gray-100 h-full">
         <el-card :body-style="{ height: '100%' }">
             <el-tabs v-model="activeTab" class="h-full" @tab-click="handleClick">
-                <el-tab-pane label="crontabManage" name="crontabManage" class="h-full">
+                <el-tab-pane label="周期定时器" name="crontabManage" class="h-full">
                     <crontabManage class="h-full"></crontabManage>
                 </el-tab-pane>
-                <el-tab-pane label="intervalManage" name="intervalManage">
+                <el-tab-pane label="间隔定时器" name="intervalManage">
                     <intervalManage></intervalManage>
                 </el-tab-pane>
             </el-tabs>
@@ -26,12 +26,12 @@ const handleClick = (tab: any, event: Event) => {
 
 <style lang="scss" scoped>
 .el-tabs--card {
-    height: calc(100vh - 300px);
+    height: calc(100vh - 200px);
     /* overflow-y: auto; */
 }
 
 .el-tab-pane {
-    height: calc(100vh - 300px);
+    height: calc(100vh - 200px);
     overflow-y: auto;
 }
 </style>
\ No newline at end of file
diff --git a/src/taskManage/api.ts b/src/taskManage/api.ts
index 7b94b35e462284f700acb614c12a28b1016f4e9f..508bca3f8265cab0c864c253fdb51ade00f43760 100644
--- a/src/taskManage/api.ts
+++ b/src/taskManage/api.ts
@@ -76,7 +76,7 @@ export function RunTask(obj: AddReq) {
 
 export function DelTask(obj: DelReq) {
     return request({
-        url: apiPrefix + 'task/' + obj.id + '/delete_task/',
+        url: apiPrefix + 'task/' + obj.id,
         method: 'delete',
         data: obj,
     });
diff --git a/src/taskManage/component/taskLog/crud.tsx b/src/taskManage/component/taskLog/crud.tsx
index ec0cdf156555cc1bbd08311fda4a8889cc2f1588..b5c10be668af2e5abbc2de033ea5eda36237d5a9 100644
--- a/src/taskManage/component/taskLog/crud.tsx
+++ b/src/taskManage/component/taskLog/crud.tsx
@@ -3,7 +3,7 @@ import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOption
 
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
-		return await api.GetList({ ...query, ...{ name: context!.taskItem.name } });
+		return await api.GetList({ ...query, ...{ periodic_task_name: context!.taskItem.name } });
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
 		form.id = row.id;
@@ -33,14 +33,13 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 			rowHandle: {
 				show: false,
 			},
-			form: {
-				col: { span: 24 },
-				labelWidth: '110px',
-				wrapper: {
-					is: 'el-dialog',
-					width: '600px',
-				},
+			search: {
+				show: false,
+			},
+			table: {
+				height: null,
 			},
+
 			columns: {
 				_index: {
 					title: '序号',
@@ -59,20 +58,24 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 						},
 					},
 				},
-				task_id: {
-					title: '任务ID',
-					search: { show: true },
-					type: 'text',
-				},
 				periodic_task_name: {
 					title: '任务名称',
-					search: { show: true },
-					type: 'text',
+					column: {
+						minWidth: '100px',
+					},
+				},
+				task_name: {
+					title: '函数名称',
+					column: {
+						minWidth: '250px',
+					},
 				},
 				status: {
 					title: '执行状态',
-					search: { show: true },
 					type: 'dict-select',
+					column: {
+						minWidth: '100px',
+					},
 					dict: dict({
 						data: [
 							{
@@ -115,8 +118,24 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 						],
 					}),
 				},
+
+				date_created: {
+					title: '任务开始的时间',
+					column: {
+						minWidth: '160px',
+					},
+				},
+				date_done: {
+					title: '任务完成的时间',
+					column: {
+						minWidth: '160px',
+					},
+				},
 				result: {
 					title: '执行结果',
+					column: {
+						minWidth: '100px',
+					},
 				},
 			},
 		},
diff --git a/src/taskManage/index.vue b/src/taskManage/index.vue
index bcd917185421c65679ec5ab769cb020ffe749762..d3021ff7c4d16d38861b8fad4fdbfbfd67610d71 100644
--- a/src/taskManage/index.vue
+++ b/src/taskManage/index.vue
@@ -1,261 +1,225 @@
 <template>
-    <el-main class="bg-gray-100">
-        <el-row :gutter="15">
-            <el-col :xl="4" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in taskList" :key="item.id">
-                <el-card class="task task-item" shadow="hover">
-                    <h2>{{ item.name }}</h2>
-                    <ul>
+	<el-main class="bg-gray-100">
+		<el-row :gutter="15">
+			<el-col :xl="4" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in taskList" :key="item.id">
+				<el-card class="task task-item" shadow="hover">
+					<h2>{{ item.name }}</h2>
+					<ul>
+						<li>
+							<h4>执行任务</h4>
+							<p>{{ item.task }}</p>
+						</li>
+						<li>
+							<h4>定时规则</h4>
+							<p>{{ item.interval || item.crontab || '--' }}</p>
+						</li>
+						<li>
+							<h4>运行次数</h4>
+							<p>{{ item.total_run_count || '--' }}</p>
+						</li>
                         <li>
-                            <h4>执行任务</h4>
-                            <p>{{ item.task }}</p>
-                        </li>
-                        <li>
-                            <h4>定时规则</h4>
-                            <p>{{ item.interval || item.crontab || '--' }}</p>
-                        </li>
-                        <li>
-                            <h4>最后运行时间</h4>
-                            <p>{{ item.last_run_at || '--' }}</p>
-                        </li>
-                    </ul>
-                    <div class="bottom w-full">
-                        <div class="state flex flex-wrap items-center">
-                            <div>
-                                <el-popconfirm width="180" confirm-button-text="确定" @confirm="setTaskStatus(item)"
-                                               cancel-button-text="取消"
-                                               :title="item.enabled ? '确认停用该任务？' : '确认启用该任务？'">
-                                    <template #reference>
-                                        <el-tag v-if="item.enabled == true" type="success" effect="dark">已启用</el-tag>
-                                        <el-tag v-else type="danger" effect="dark">已停用</el-tag>
-                                    </template>
-                                </el-popconfirm>
-                            </div>
-                            <!--                            <div class="ml-2">-->
-                            <!--                                <el-popconfirm width="180" confirm-button-text="确定" @confirm="runTask(item)"-->
-                            <!--                                               cancel-button-text="取消" title="立即运行该任务？">-->
-                            <!--                                    <template #reference>-->
-                            <!--                                        <el-button size="small" circle>-->
-                            <!--                                            <el-icon>-->
-                            <!--                                                <CaretRight/>-->
-                            <!--                                            </el-icon>-->
-                            <!--                                        </el-button>-->
-                            <!--                                    </template>-->
-                            <!--                                </el-popconfirm>-->
-                            <!--                            </div>-->
-                        </div>
-                        <div class="taskName">
-                            <el-dropdown trigger="hover" class="ml-2">
-                                <el-button type="primary" size="small" circle effect>
-                                    <el-icon>
-                                        <Edit/>
-                                    </el-icon>
-                                </el-button>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item :icon="Edit" @click="editTask(item)">编辑</el-dropdown-item>
-                                        <el-dropdown-item :icon="Delete" @click="del(item)" divided>删除
-                                        </el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
-
-                            <el-button type="primary" size="small" circle plain @click="taskLogs(item)" class="ml-2">
-                                <el-icon>
-                                    <Monitor/>
-                                </el-icon>
-                            </el-button>
-                        </div>
-                    </div>
-                </el-card>
-            </el-col>
-            <el-col :xl="4" :lg="6" :md="8" :sm="12" :xs="24">
-                <el-card class="task task-add" shadow="never" @click="addTaskShow">
-                    <el-icon>
-                        <Plus/>
-                    </el-icon>
-                    <p>添加计划任务</p>
-                </el-card>
-                <el-dialog v-model="addTaskDialogVisible" title="添加任务" width="24%" class="el-dialog">
-                    <el-form ref="addTaskFormRef" :rules="rules" :model="addTaskForm" label-width="120px"
-                             label-position="left">
-                        <el-row>
-                            <el-col>
-                                <el-form-item label="任务名称" required prop="name">
-                                    <el-input v-model="addTaskForm.name"/>
-                                </el-form-item>
-                            </el-col>
-                            <el-col>
-                                <el-form-item label="任务" required prop="task">
-                                    <el-select v-model="addTaskForm.task" @focus="loadTaskList" class="w-full">
-                                        <el-option v-for="item in selectedTaskList" :key="item.value"
-                                                   :label="item.label"
-                                                   :value="item.value"/>
-                                    </el-select>
-                                </el-form-item>
-                            </el-col>
-                            <el-col>
-                                <el-form-item label="使用调度模型" required prop="schedule">
-                                    <el-switch active-text="CrontabSchedule" inactive-text="IntervalSchedule"
-                                               :active-value="1"
-                                               :inactive-value="0"
-                                               v-model="addTaskForm.scheduleType"/>
-                                </el-form-item>
-                                <div v-show="addTaskForm.scheduleType==0">
-                                    <el-form-item label="调度模型" required>
-                                        <el-select v-model="addTaskForm.schedule" @focus="loadIntervalScheduleList"
-                                                   class="w-full" clearable>
-                                            <el-option v-for="item in intervalScheduleList" :key="item.value"
-                                                       :value="item.id"
-                                                       :label="`every: ${item.every}; period: ${item.period}`"
-                                            >
-                                                <template #default>
-                                                    <div class="flex justify-between">
-                                                        <span>every: {{ item.every }}</span>
-                                                        <span>period: {{ item.period }}</span>
-                                                    </div>
-                                                </template>
-                                            </el-option>
-                                        </el-select>
-                                    </el-form-item>
-                                </div>
-                                <div v-show="addTaskForm.scheduleType==1">
-                                    <el-form-item label="调度模型" required>
-                                        <el-select v-model="addTaskForm.schedule" @focus="loadCrontabScheduleList"
-                                                   class="w-full" clearable>
-                                            <el-option v-for="item in crontabScheduleList" :key="item.value"
-                                                       :value="item.id"
-                                                       :label="`minute: ${item.minute}; hour: ${item.hour}; day_of_week: ${item.day_of_week}; day_of_month: ${item.day_of_month}; month_of_year: ${item.month_of_year}`"
-                                            >
-                                                <template #default>
-                                                    <div class="flex justify-between">
-                                                        <span>minute: {{ item.minute }};</span>
-                                                        <span>hour: {{ item.hour }};</span>
-                                                        <span>day_of_week: {{ item.day_of_week }};</span>
-                                                        <span>day_of_month: {{ item.day_of_month }};</span>
-                                                        <span>month_of_year: {{ item.month_of_year }};</span>
-                                                    </div>
-                                                </template>
-                                            </el-option>
-                                        </el-select>
-                                    </el-form-item>
-                                </div>
-                            </el-col>
-                            <el-col>
-                                <el-form-item label="是否启用" required prop="enabled">
-                                    <el-switch v-model="addTaskForm.enabled"/>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                    <template #footer>
-                      <span class="dialog-footer">
-                        <el-button @click="addTaskDialogVisible = false">取消</el-button>
-                        <el-button type="primary" @click="addTask(addTaskFormRef)">
-                          确定
-                        </el-button>
-                      </span>
-                    </template>
-
-                </el-dialog>
-                <el-dialog v-model="editTaskDialogVisible" title="编辑任务" width="24%" class="el-dialog">
-                    <el-form ref="editTaskFormRef" :rules="rules" :model="editTaskForm" label-width="120px"
-                             label-position="left">
-                        <el-row>
-                            <el-col>
-                                <el-form-item label="任务名称" required prop="name">
-                                    <el-input v-model="editTaskForm.name"/>
-                                </el-form-item>
-                            </el-col>
-                            <el-col>
-                                <el-form-item label="任务" required prop="task">
-                                    <el-select v-model="editTaskForm.task" @focus="loadTaskList" class="w-full">
-                                        <el-option v-for="item in selectedTaskList" :key="item.value"
-                                                   :label="item.label"
-                                                   :value="item.value"/>
-                                    </el-select>
-                                </el-form-item>
-                            </el-col>
-                            <el-col>
-                                <el-form-item label="使用调度模型" required prop="schedule">
-                                    <el-switch active-text="CrontabSchedule" inactive-text="IntervalSchedule"
-                                               :active-value="1"
-                                               :inactive-value="0"
-                                               v-model="editTaskForm.scheduleType"/>
-                                </el-form-item>
-                                <div v-show="editTaskForm.scheduleType==0">
-                                    <el-form-item label="调度模型" required>
-                                        <el-select v-model="editTaskForm.schedule" @focus="loadIntervalScheduleList"
-                                                   class="w-full" clearable>
-                                            <el-option v-for="item in intervalScheduleList" :key="item.value"
-                                                       :value="item.id"
-                                                       :label="`every: ${item.every}; period: ${item.period}`"
-                                            >
-                                                <template #default>
-                                                    <div class="flex justify-between">
-                                                        <span>every: {{ item.every }}</span>
-                                                        <span>period: {{ item.period }}</span>
-                                                    </div>
-                                                </template>
-                                            </el-option>
-                                        </el-select>
-                                    </el-form-item>
-                                </div>
-                                <div v-show="editTaskForm.scheduleType==1">
-                                    <el-form-item label="调度模型" required>
-                                        <el-select v-model="editTaskForm.schedule" @focus="loadCrontabScheduleList"
-                                                   class="w-full" clearable>
-                                            <el-option v-for="item in crontabScheduleList" :key="item.value"
-                                                       :value="item.id"
-                                                       :label="`minute: ${item.minute}; hour: ${item.hour}; day_of_week: ${item.day_of_week}; day_of_month: ${item.day_of_month}; month_of_year: ${item.month_of_year}`"
-                                            >
-                                                <template #default>
-                                                    <div class="flex justify-between">
-                                                        <span>minute: {{ item.minute }};</span>
-                                                        <span>hour: {{ item.hour }};</span>
-                                                        <span>day_of_week: {{ item.day_of_week }};</span>
-                                                        <span>day_of_month: {{ item.day_of_month }};</span>
-                                                        <span>month_of_year: {{ item.month_of_year }};</span>
-                                                    </div>
-                                                </template>
-                                            </el-option>
-                                        </el-select>
-                                    </el-form-item>
-                                </div>
-                            </el-col>
-                            <el-col>
-                                <el-form-item label="是否启用" required prop="enabled">
-                                    <el-switch v-model="editTaskForm.enabled"/>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                    <template #footer>
-                      <span class="dialog-footer">
-                        <el-button @click="editTaskDialogVisible = false">取消</el-button>
-                        <el-button type="primary" @click="submitEditTask(editTaskFormRef)">
-                          确定
-                        </el-button>
-                      </span>
-                    </template>
-
-                </el-dialog>
-                <el-dialog v-model="showTaskDialogVisible" title="任务运行日志" width="50%" class="rounded-lg"
-                           destroy-on-close>
-                    <div style="height: 800px;  position: relative">
-                        <taskLog :taskItem="selectedTask"></taskLog>
-                    </div>
-                </el-dialog>
-            </el-col>
-        </el-row>
-    </el-main>
+							<h4>最后运行时间</h4>
+							<p>{{ item.last_run_at || '--' }}</p>
+						</li>
+					</ul>
+					<div class="bottom w-full">
+						<div class="state flex flex-wrap items-center">
+							<div>
+								<el-popconfirm
+									width="180"
+									confirm-button-text="确定"
+									@confirm="setTaskStatus(item)"
+									cancel-button-text="取消"
+									:title="item.enabled ? '确认停用该任务？' : '确认启用该任务？'"
+								>
+									<template #reference>
+										<el-button v-if="item.enabled == true" type="success" size="small"> 已启用</el-button>
+										<el-button v-else type="info" size="small"> 已停用</el-button>
+									</template>
+								</el-popconfirm>
+							</div>
+						</div>
+						<div class="taskName">
+							<el-popconfirm
+								class="ml-2"
+								width="180"
+								@confirm="del(item)"
+								confirm-button-text="确定"
+								cancel-button-text="取消"
+								:title="'确认删除该任务？'"
+							>
+								<template #reference>
+									<el-button type="danger" size="small" :icon="Delete" circle effect> </el-button>
+								</template>
+							</el-popconfirm>
+
+							<el-button type="primary" size="small" circle effect @click="taskLogs(item)" class="ml-2">
+								<el-icon>
+									<Monitor />
+								</el-icon>
+							</el-button>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :xl="4" :lg="6" :md="8" :sm="12" :xs="24">
+				<el-card class="task task-add" shadow="never" @click="addTaskShow">
+					<el-icon>
+						<Plus />
+					</el-icon>
+					<p>添加计划任务</p>
+				</el-card>
+				<el-dialog v-model="addTaskDialogVisible" title="添加任务" width="80%" class="el-dialog">
+					<el-form ref="addTaskFormRef" :rules="rules" :model="addTaskForm" label-width="120px" label-position="left">
+						<el-row>
+							<el-col>
+								<el-form-item label="任务名称" required prop="name">
+									<el-input v-model="addTaskForm.name" />
+								</el-form-item>
+							</el-col>
+							<el-col>
+								<el-form-item label="任务" required prop="task">
+									<el-select v-model="addTaskForm.task" @focus="loadTaskList" class="w-full">
+										<el-option v-for="item in selectedTaskList" :key="item.value" :label="item.label" :value="item.value" />
+									</el-select>
+								</el-form-item>
+							</el-col>
+							<el-col>
+								<el-form-item label="使用调度模型" required prop="schedule">
+									<el-switch
+										active-text="周期定时器"
+										inactive-text="间隔定时器"
+										:active-value="1"
+										:inactive-value="0"
+										v-model="addTaskForm.scheduleType"
+									/>
+								</el-form-item>
+								<div v-show="addTaskForm.scheduleType == 0">
+									<el-form-item label="调度模型" required>
+										<el-select v-model="addTaskForm.schedule" @focus="loadIntervalScheduleList" class="w-full" clearable>
+											<el-option v-for="item in intervalScheduleList" :key="item.value" :value="item.id" :label="`${item.described}`">
+												<template #default>
+													<div class="flex justify-between">
+														<span>{{ item.described }}</span>
+													</div>
+												</template>
+											</el-option>
+										</el-select>
+									</el-form-item>
+								</div>
+								<div v-show="addTaskForm.scheduleType == 1">
+									<el-form-item label="调度模型" required>
+										<el-select v-model="addTaskForm.schedule" @focus="loadCrontabScheduleList" class="w-full" clearable>
+											<el-option
+												v-for="item in crontabScheduleList"
+												:key="item.value"
+												:value="item.id"
+												:label="`${item.minute} ${item.hour} ${item.day_of_week} ${item.day_of_month} ${item.month_of_year}`"
+											>
+												<template #default>
+													<div class="flex justify-between">
+														<span>{{ item.minute }} {{ item.hour }} {{ item.day_of_week }} {{ item.day_of_month }} {{ item.month_of_year }}</span>
+													</div>
+												</template>
+											</el-option>
+										</el-select>
+									</el-form-item>
+								</div>
+							</el-col>
+						</el-row>
+					</el-form>
+					<template #footer>
+						<span class="dialog-footer">
+							<el-button @click="addTaskDialogVisible = false">取消</el-button>
+							<el-button type="primary" @click="addTask(addTaskFormRef)"> 确定 </el-button>
+						</span>
+					</template>
+				</el-dialog>
+				<el-dialog v-model="editTaskDialogVisible" title="编辑任务" width="80%" class="el-dialog">
+					<el-form ref="editTaskFormRef" :rules="rules" :model="editTaskForm" label-width="120px" label-position="left">
+						<el-row>
+							<el-col>
+								<el-form-item label="任务名称" required prop="name">
+									<el-input v-model="editTaskForm.name" />
+								</el-form-item>
+							</el-col>
+							<el-col>
+								<el-form-item label="任务" required prop="task">
+									<el-select v-model="editTaskForm.task" @focus="loadTaskList" class="w-full">
+										<el-option v-for="item in selectedTaskList" :key="item.value" :label="item.label" :value="item.value" />
+									</el-select>
+								</el-form-item>
+							</el-col>
+							<el-col>
+								<el-form-item label="使用调度模型" required prop="schedule">
+									<el-switch
+										active-text="周期定时器"
+										inactive-text="间隔定时器"
+										:active-value="1"
+										:inactive-value="0"
+										v-model="editTaskForm.scheduleType"
+									/>
+								</el-form-item>
+								<div v-show="editTaskForm.scheduleType == 0">
+									<el-form-item label="调度模型" required>
+										<el-select v-model="editTaskForm.schedule" @focus="loadIntervalScheduleList" class="w-full" clearable>
+											<el-option v-for="item in intervalScheduleList" :key="item.value" :value="item.id" :label="`${item.described}`">
+												<template #default>
+													<div class="flex justify-between">
+														<span>{{ item.described }}</span>
+													</div>
+												</template>
+											</el-option>
+										</el-select>
+									</el-form-item>
+								</div>
+								<div v-show="editTaskForm.scheduleType == 1">
+									<el-form-item label="调度模型" required>
+										<el-select v-model="editTaskForm.schedule" @focus="loadCrontabScheduleList" class="w-full" clearable>
+											<el-option
+												v-for="item in crontabScheduleList"
+												:key="item.value"
+												:value="item.id"
+												:label="`${item.minute} ${item.hour} ${item.day_of_week} ${item.day_of_month} ${item.month_of_year}`"
+											>
+												<template #default>
+													<div class="flex justify-between">
+														<span>{{ item.minute }} {{ item.hour }} {{ item.day_of_week }} {{ item.day_of_month }} {{ item.month_of_year }}</span>
+													</div>
+												</template>
+											</el-option>
+										</el-select>
+									</el-form-item>
+								</div>
+							</el-col>
+							<el-col>
+								<el-form-item label="是否启用" required prop="enabled">
+									<el-switch v-model="editTaskForm.enabled" />
+								</el-form-item>
+							</el-col>
+						</el-row>
+					</el-form>
+					<template #footer>
+						<span class="dialog-footer">
+							<el-button @click="editTaskDialogVisible = false">取消</el-button>
+							<el-button type="primary" @click="submitEditTask(editTaskFormRef)"> 确定 </el-button>
+						</span>
+					</template>
+				</el-dialog>
+				<el-drawer v-model="showTaskDialogVisible" size="60%" :withHeader="false" destroy-on-close>
+					<taskLog :taskItem="selectedTask"></taskLog>
+				</el-drawer>
+			</el-col>
+		</el-row>
+	</el-main>
 </template>
 
 <script setup lang="ts" name="taskManage">
-import {Edit, Delete, ArrowDown} from '@element-plus/icons-vue';
-import * as api from './api'
-import {ref, onMounted, reactive, defineAsyncComponent, toRaw, watch} from 'vue';
-import {errorMessage, successMessage} from '/@/utils/message';
-import {FormInstance, FormRules} from "element-plus";
+import { Delete } from '@element-plus/icons-vue';
+import * as api from './api';
+import { ref, onMounted, reactive, defineAsyncComponent, toRaw, watch } from 'vue';
+import { errorMessage, successMessage } from '/@/utils/message';
+import { FormInstance, FormRules } from 'element-plus';
 
 const taskLog = defineAsyncComponent(() => import('./component/taskLog/index.vue'));
 
@@ -268,44 +232,39 @@ const showTaskDialogVisible = ref(false);
 const showCron = ref(false);
 
 const addTaskForm = reactive({
-    name: '',
-    task: '',
-    scheduleType: 0,//0 IntervalSchedule 1 CrontabSchedule
-    schedule: '',
-    enabled: true,
-})
+	name: '',
+	task: '',
+	scheduleType: 0, //0 IntervalSchedule 1 CrontabSchedule
+	schedule: '',
+	enabled: true,
+});
 
 let editTaskForm = reactive({
-    id: '',
-    name: '',
-    task: '',
-    scheduleType: null,//0 IntervalSchedule 1 CrontabSchedule
-    schedule: '',
-    enabled: true,
-})
+	id: '',
+	name: '',
+	task: '',
+	scheduleType: null, //0 IntervalSchedule 1 CrontabSchedule
+	schedule: '',
+	enabled: true,
+});
 
-const addTaskFormRef = ref<FormInstance>()
+const addTaskFormRef = ref<FormInstance>();
 
-const editTaskFormRef = ref<FormInstance>()
+const editTaskFormRef = ref<FormInstance>();
 
 interface addTaskFormRules {
-    name: string,
-    task: string,
-    schedule: string,
-    enabled: string,
+	name: string;
+	task: string;
+	schedule: string;
+	enabled: string;
 }
 
 const rules = reactive<FormRules<addTaskFormRules>>({
-    name: [
-        {required: true, message: '请输入任务名称', trigger: 'blur'},
-    ], task: [
-        {required: true, message: '请选择一个任务', trigger: 'blur'},
-    ], schedule: [
-        {required: true, message: '请选择schedule', trigger: 'blur'},
-    ], enabled: [
-        {required: true, message: '请选择状态', trigger: 'blur'},
-    ],
-})
+	name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
+	task: [{ required: true, message: '请选择一个任务', trigger: 'blur' }],
+	schedule: [{ required: true, message: '请选择schedule', trigger: 'blur' }],
+	enabled: [{ required: true, message: '请选择状态', trigger: 'blur' }],
+});
 
 const taskList = ref([]) as any;
 
@@ -315,87 +274,70 @@ const intervalScheduleList = ref({}) as any;
 
 const crontabScheduleList = ref({}) as any;
 
-let selectedTask = ref({})
+let selectedTask = ref({});
 
 /*
-* 加载任务列表
-* */
+ * 加载任务列表
+ * */
 const loadTaskList = () => {
-    api.getBackendTaskList({}).then((res: APIResponseData) => {
-        if (res.code === 2000) {
-            selectedTaskList.value = res.data
-        }
-    })
-}
+	api.getBackendTaskList({}).then((res: APIResponseData) => {
+		if (res.code === 2000) {
+			selectedTaskList.value = res.data;
+		}
+	});
+};
 
 const loadIntervalScheduleList = () => {
-    api.getIntervalScheduleList({}).then((res: APIResponseData) => {
-        if (res.code === 2000) {
-            intervalScheduleList.value = res.data
-        }
-    })
-}
-
-const loadCrontabScheduleList = () => {
-    api.getCrontabScheduleList({}).then((res: APIResponseData) => {
-        if (res.code === 2000) {
-            crontabScheduleList.value = res.data
-        }
-    })
-}
-
-/**
- * 运行任务
- * @param item 任务
- */
-
-const runTask = (item: any) => {
-    api.RunTask(item).then((res: APIResponseData) => {
-        if (res.code === 2000) {
-            return successMessage(res.msg as string)
-        }
-    })
+	api.getIntervalScheduleList({}).then((res: APIResponseData) => {
+		if (res.code === 2000) {
+			intervalScheduleList.value = res.data;
+		}
+	});
 };
 
-const editTask = (item: any) => {
-    for (const key in item) {
-        editTaskForm[key] = item[key]
-    }
-    editTaskDialogVisible.value = true
+const loadCrontabScheduleList = () => {
+	api.getCrontabScheduleList({}).then((res: APIResponseData) => {
+		if (res.code === 2000) {
+			crontabScheduleList.value = res.data;
+		}
+	});
 };
 
-watch(() => editTaskDialogVisible.value, (val) => {
-    if (!val) {
-        showCron.value = false
-        editTaskFormRef.value.resetFields()
-    }
-})
+watch(
+	() => editTaskDialogVisible.value,
+	(val) => {
+		if (!val) {
+			showCron.value = false;
+			editTaskFormRef.value?.resetFields();
+		}
+	}
+);
 
 const submitEditTask = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    await formEl.validate((valid, fields) => {
-        if (valid) {
-            api.EditTask(editTaskForm).then((res: APIResponseData) => {
-                if (res.code === 2000) {
-                    editTaskDialogVisible.value = false;
-                    formEl.resetFields()
-                    getOrUpdateTaskList()
-                    return successMessage(res.msg as string)
-                }
-            })
-        } else {
-            errorMessage('请检查表单')
-        }
-    })
-}
+	if (!formEl) return;
+	await formEl.validate((valid) => {
+		if (valid) {
+			api.EditTask(editTaskForm).then((res: APIResponseData) => {
+				if (res.code === 2000) {
+					editTaskDialogVisible.value = false;
+					formEl.resetFields();
+					getOrUpdateTaskList();
+					return successMessage(res.msg as string);
+				}
+			});
+		} else {
+			errorMessage('请检查表单');
+		}
+	});
+};
 
 /**
  * 任务日志
  * @param item 任务
  */
 const taskLogs = (item: any) => {
-    selectedTask.value = toRaw(item)
-    showTaskDialogVisible.value = true
+	selectedTask.value = toRaw(item);
+	showTaskDialogVisible.value = true;
 };
 
 /**
@@ -404,12 +346,12 @@ const taskLogs = (item: any) => {
  */
 
 const del = (item: any) => {
-    api.DelTask(item).then((res: APIResponseData) => {
-        if (res.code === 2000) {
-            getOrUpdateTaskList()
-            return successMessage(res.msg as string)
-        }
-    })
+	api.DelTask(item).then((res: APIResponseData) => {
+		if (res.code === 2000) {
+			getOrUpdateTaskList();
+			return successMessage(res.msg as string);
+		}
+	});
 };
 
 /**
@@ -417,28 +359,27 @@ const del = (item: any) => {
  */
 
 const addTaskShow = () => {
-    addTaskDialogVisible.value = true;
-    selectedTask.value = {}
+	addTaskDialogVisible.value = true;
+	selectedTask.value = {};
 };
 
 const addTask = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    await formEl.validate((valid, fields) => {
-        if (valid) {
-            api.AddTask(addTaskForm).then((res: APIResponseData) => {
-                if (res.code === 2000) {
-                    addTaskDialogVisible.value = false;
-                    formEl.resetFields()
-                    getOrUpdateTaskList()
-                    return successMessage(res.msg as string)
-                }
-            })
-        } else {
-            errorMessage('请检查表单')
-        }
-    })
-}
-
+	if (!formEl) return;
+	await formEl.validate((valid) => {
+		if (valid) {
+			api.AddTask(addTaskForm).then((res: APIResponseData) => {
+				if (res.code === 2000) {
+					addTaskDialogVisible.value = false;
+					formEl.resetFields();
+					getOrUpdateTaskList();
+					return successMessage(res.msg as string);
+				}
+			});
+		} else {
+			errorMessage('请检查表单');
+		}
+	});
+};
 
 /**
  * 设置任务状态
@@ -446,102 +387,98 @@ const addTask = async (formEl: FormInstance | undefined) => {
  */
 
 const setTaskStatus = (item: any) => {
-    item.enabled = !item.enabled;
-    api.UpdateTask({enabled: item.enabled, id: item.id}).then((res: APIResponseData) => {
-        if (res.code === 2000) {
-            return successMessage(res.msg as string)
-        }
-    });
-
-}
+	item.enabled = !item.enabled;
+	api.UpdateTask({ enabled: item.enabled, id: item.id }).then((res: APIResponseData) => {
+		if (res.code === 2000) {
+			return successMessage(res.msg as string);
+		}
+	});
+};
 
 /**
  *  加载或更新任务列表
  */
 
 const getOrUpdateTaskList = () => {
-    api.getTaskList({}).then((res: APIResponseData) => {
-        taskList.value = res.data;
-    });
-}
-
+	api.getTaskList({}).then((res: APIResponseData) => {
+		taskList.value = res.data;
+	});
+};
 
 onMounted(() => {
-    getOrUpdateTaskList()
+	getOrUpdateTaskList();
 });
-
-
 </script>
 
 <style lang="scss" scoped>
 .task {
-    height: 260px;
+	height: 315px;
 }
 
 .task-item h2 {
-    font-size: 15px;
-    color: #3c4a54;
-    padding-bottom: 10px;
+	font-size: 15px;
+	color: #3c4a54;
+	padding-bottom: 10px;
 }
 
 .task-item li {
-    list-style-type: none;
-    margin-bottom: 10px;
+	list-style-type: none;
+	margin-bottom: 10px;
 }
 
 .task-item li h4 {
-    font-size: 12px;
-    font-weight: normal;
-    color: #999;
+	font-size: 12px;
+	font-weight: normal;
+	color: #999;
 }
 
 .task-item li p {
-    margin-top: 5px;
+	margin-top: 5px;
 }
 
 .task-item .bottom {
-    border-top: 1px solid #ebeef5;
-    text-align: right;
-    padding-top: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+	border-top: 1px solid #ebeef5;
+	text-align: right;
+	padding-top: 10px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
 .task-add {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    cursor: pointer;
-    color: #999;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	cursor: pointer;
+	color: #999;
 }
 
 .task-add:hover {
-    color: #409eff;
+	color: #409eff;
 }
 
 .task-add i {
-    font-size: 30px;
+	font-size: 30px;
 }
 
 .task-add p {
-    font-size: 12px;
-    margin-top: 20px;
+	font-size: 12px;
+	margin-top: 20px;
 }
 
 .dark .task-item .bottom {
-    border-color: var(--el-border-color-light);
+	border-color: var(--el-border-color-light);
 }
 
 .el-card {
-    border-radius: 3%;
-    overflow: hidden;
+	border-radius: 3%;
+	overflow: hidden;
 }
 
 .el-dialog {
-    border-radius: 3%;
-    overflow: hidden;
+	border-radius: 3%;
+	overflow: hidden;
 }
 </style>