diff --git a/src/components/CronModal/components/Day.vue b/src/components/CronModal/components/Day.vue
new file mode 100644
index 0000000..dfd853a
--- /dev/null
+++ b/src/components/CronModal/components/Day.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { reactive, watch, onBeforeMount } from 'vue';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const emit = defineEmits(['update:value']);
+const props = defineProps({
+  value: {
+    type: String,
+    default: '*',
+  },
+});
+
+/**指定列表初始数据 */
+const optionsSpecific = Array.from({ length: 31 }, (_, i) => {
+  let idx = i + 1;
+  return {
+    label: `${idx}`,
+    value: `${idx}`,
+  };
+});
+
+/**数据 */
+let data = reactive({
+  type: '1',
+  /**间隔 */
+  increment: 2,
+  incrementStart: 1,
+  /**周期 */
+  rangeStart: 1,
+  rangeEnd: 2,
+  /**指定 */
+  specific: ['1'],
+});
+
+/**监听数据，将数值格式化 */
+watch(data, () => {
+  let reultValue = '*';
+  let val = data.type;
+  // 每一
+  if (val === '1') {
+    reultValue = '*';
+  }
+  // 间隔
+  if (val === '2') {
+    let start = data.incrementStart;
+    let increment = data.increment;
+    reultValue = `${start ?? 0}/${increment ?? 0}`;
+  }
+  // 周期
+  if (val === '3') {
+    let start = data.rangeStart;
+    let end = data.rangeEnd;
+    reultValue = `${start ?? 0}-${end ?? 0}`;
+  }
+  // 指定
+  if (val === '4') {
+    reultValue = data.specific.sort((a, b) => +a - +b).join(',');
+  }
+  emit('update:value', reultValue);
+});
+
+/**挂载前初始属性 */
+onBeforeMount(() => {
+  const val = props.value;
+  if (val === '*') {
+    data.type = '1';
+  }
+  if (val.includes('/')) {
+    const arr = val.split('/');
+    data.incrementStart = Number(arr[0]);
+    data.increment = Number(arr[1]);
+    data.type = '2';
+  }
+  if (val.includes('-')) {
+    const arr = val.split('-');
+    data.rangeStart = Number(arr[0]);
+    data.rangeEnd = Number(arr[1]);
+    data.type = '3';
+  }
+  if (val.includes(',')) {
+    data.specific = val.split(',').sort((a, b) => +a - +b);
+    data.type = '4';
+  }
+});
+</script>
+
+<template>
+  <a-radio-group size="small" v-model:value="data.type">
+    <a-space direction="vertical" :size="18">
+      <a-radio value="1">
+        {{ t('components.CronModal.day1') }}
+      </a-radio>
+      <a-radio value="2">
+        {{ t('components.CronModal.day21') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.increment"
+          :min="1"
+          :max="31"
+          placeholder="1-31"
+        ></a-input-number>
+        {{ t('components.CronModal.day22') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.incrementStart"
+          :min="1"
+          :max="31"
+          placeholder="1-31"
+        ></a-input-number>
+        {{ t('components.CronModal.day23') }}
+      </a-radio>
+      <a-radio value="3">
+        {{ t('components.CronModal.day31') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeStart"
+          :min="1"
+          :max="31"
+          placeholder="1-31"
+        ></a-input-number>
+        {{ t('components.CronModal.day32') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeEnd"
+          :min="1"
+          :max="31"
+          placeholder="1-31"
+        ></a-input-number>
+        {{ t('components.CronModal.day33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.day4') }}
+      </a-radio>
+      <a-select
+        v-model:value="data.specific"
+        size="small"
+        mode="multiple"
+        style="width: 100%"
+        :placeholder="t('components.CronModal.day4')"
+        :options="optionsSpecific"
+      ></a-select>
+      <a-radio value="5">
+        {{ t('components.CronModal.day5') }}
+      </a-radio>
+    </a-space>
+  </a-radio-group>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/CronModal/components/Hour.vue b/src/components/CronModal/components/Hour.vue
new file mode 100644
index 0000000..ba7e65f
--- /dev/null
+++ b/src/components/CronModal/components/Hour.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { reactive, watch, onBeforeMount } from 'vue';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const emit = defineEmits(['update:value']);
+const props = defineProps({
+  value: {
+    type: String,
+    default: '*',
+  },
+});
+
+/**指定列表初始数据 */
+const optionsSpecific = Array.from({ length: 24 }, (_, i) => ({
+  label: `${i}`.padStart(2, '0'),
+  value: `${i}`,
+}));
+
+/**数据 */
+let data = reactive({
+  type: '1',
+  /**间隔 */
+  increment: 2,
+  incrementStart: 0,
+  /**周期 */
+  rangeStart: 0,
+  rangeEnd: 2,
+  /**指定 */
+  specific: ['0'],
+});
+
+/**监听数据，将数值格式化 */
+watch(data, () => {
+  let reultValue = '*';
+  let val = data.type;
+  // 每一
+  if (val === '1') {
+    reultValue = '*';
+  }
+  // 间隔
+  if (val === '2') {
+    let start = data.incrementStart;
+    let increment = data.increment;
+    reultValue = `${start ?? 0}/${increment ?? 0}`;
+  }
+  // 周期
+  if (val === '3') {
+    let start = data.rangeStart;
+    let end = data.rangeEnd;
+    reultValue = `${start ?? 0}-${end ?? 0}`;
+  }
+  // 指定
+  if (val === '4') {
+    reultValue = data.specific.sort((a, b) => +a - +b).join(',');
+  }
+  emit('update:value', reultValue);
+});
+
+/**挂载前初始属性 */
+onBeforeMount(() => {
+  const val = props.value;
+  if (val === '*') {
+    data.type = '1';
+  }
+  if (val.includes('/')) {
+    const arr = val.split('/');
+    data.incrementStart = Number(arr[0]);
+    data.increment = Number(arr[1]);
+    data.type = '2';
+  }
+  if (val.includes('-')) {
+    const arr = val.split('-');
+    data.rangeStart = Number(arr[0]);
+    data.rangeEnd = Number(arr[1]);
+    data.type = '3';
+  }
+  if (val.includes(',')) {
+    data.specific = val.split(',').sort((a, b) => +a - +b);
+    data.type = '4';
+  }
+});
+</script>
+
+<template>
+  <a-radio-group size="small" v-model:value="data.type">
+    <a-space direction="vertical" :size="18">
+      <a-radio value="1">
+        {{ t('components.CronModal.hour1') }}
+      </a-radio>
+      <a-radio value="2">
+        {{ t('components.CronModal.hour21') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.increment"
+          :min="0"
+          :max="23"
+          placeholder="0-23"
+        ></a-input-number>
+        {{ t('components.CronModal.hour22') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.incrementStart"
+          :min="0"
+          :max="23"
+          placeholder="0-23"
+        ></a-input-number>
+        {{ t('components.CronModal.hour23') }}
+      </a-radio>
+      <a-radio value="3">
+        {{ t('components.CronModal.hour31') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeStart"
+          :min="0"
+          :max="23"
+          placeholder="1-23"
+        ></a-input-number>
+        {{ t('components.CronModal.hour32') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeEnd"
+          :min="0"
+          :max="23"
+          placeholder="0-23"
+        ></a-input-number>
+        {{ t('components.CronModal.hour33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.hour4') }}
+      </a-radio>
+      <a-select
+        v-model:value="data.specific"
+        size="small"
+        mode="multiple"
+        style="width: 100%"
+        :placeholder="t('components.CronModal.hour4')"
+        :options="optionsSpecific"
+      ></a-select>
+    </a-space>
+  </a-radio-group>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/CronModal/components/Minute.vue b/src/components/CronModal/components/Minute.vue
new file mode 100644
index 0000000..57c1ed0
--- /dev/null
+++ b/src/components/CronModal/components/Minute.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { reactive, watch, onBeforeMount } from 'vue';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const emit = defineEmits(['update:value']);
+const props = defineProps({
+  value: {
+    type: String,
+    default: '*',
+  },
+});
+
+/**指定列表初始数据 */
+const optionsSpecific = Array.from({ length: 60 }, (_, i) => {
+  return {
+    label: `${i}`.padStart(2, '0'),
+    value: `${i}`,
+  };
+});
+
+/**数据 */
+let data = reactive({
+  type: '1',
+  /**间隔 */
+  increment: 1,
+  incrementStart: 0,
+  /**周期 */
+  rangeStart: 1,
+  rangeEnd: 2,
+  /**指定 */
+  specific: ['0'],
+});
+
+/**监听数据，将数值格式化 */
+watch(data, () => {
+  let reultValue = '*';
+  let val = data.type;
+  // 每一
+  if (val === '1') {
+    reultValue = '*';
+  }
+  // 间隔
+  if (val === '2') {
+    let start = data.incrementStart;
+    let increment = data.increment;
+    reultValue = `${start ?? 0}/${increment ?? 0}`;
+  }
+  // 周期
+  if (val === '3') {
+    let start = data.rangeStart;
+    let end = data.rangeEnd;
+    reultValue = `${start ?? 0}-${end ?? 0}`;
+  }
+  // 指定
+  if (val === '4') {
+    reultValue = data.specific.sort((a, b) => +a - +b).join(',');
+  }
+  emit('update:value', reultValue);
+});
+
+/**挂载前初始属性 */
+onBeforeMount(() => {
+  const val = props.value;
+  if (val === '*') {
+    data.type = '1';
+  }
+  if (val.includes('/')) {
+    const arr = val.split('/');
+    data.incrementStart = Number(arr[0]);
+    data.increment = Number(arr[1]);
+    data.type = '2';
+  }
+  if (val.includes('-')) {
+    const arr = val.split('-');
+    data.rangeStart = Number(arr[0]);
+    data.rangeEnd = Number(arr[1]);
+    data.type = '3';
+  }
+  if (val.includes(',')) {
+    data.specific = val.split(',').sort((a, b) => +a - +b);
+    data.type = '4';
+  }
+});
+</script>
+
+<template>
+  <a-radio-group size="small" v-model:value="data.type">
+    <a-space direction="vertical" :size="18">
+      <a-radio value="1">
+        {{ t('components.CronModal.minute1') }}
+      </a-radio>
+      <a-radio value="2">
+        {{ t('components.CronModal.minute21') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.increment"
+          :min="0"
+          :max="59"
+          placeholder="0-59"
+        ></a-input-number>
+        {{ t('components.CronModal.minute22') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.incrementStart"
+          :min="0"
+          :max="59"
+          placeholder="0-59"
+        ></a-input-number>
+        {{ t('components.CronModal.minute23') }}
+      </a-radio>
+      <a-radio value="3">
+        {{ t('components.CronModal.minute31') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeStart"
+          :min="0"
+          :max="59"
+          placeholder="0-59"
+        ></a-input-number>
+        {{ t('components.CronModal.minute32') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeEnd"
+          :min="0"
+          :max="59"
+          placeholder="0-59"
+        ></a-input-number>
+        {{ t('components.CronModal.minute33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.minute4') }}
+      </a-radio>
+      <a-select
+        v-model:value="data.specific"
+        size="small"
+        mode="multiple"
+        style="width: 100%"
+        :placeholder="t('components.CronModal.minute4')"
+        :options="optionsSpecific"
+      ></a-select>
+    </a-space>
+  </a-radio-group>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/CronModal/components/Month.vue b/src/components/CronModal/components/Month.vue
new file mode 100644
index 0000000..82ccf0c
--- /dev/null
+++ b/src/components/CronModal/components/Month.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { reactive, watch, onBeforeMount } from 'vue';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const emit = defineEmits(['update:value']);
+const props = defineProps({
+  value: {
+    type: String,
+    default: '*',
+  },
+});
+
+/**指定列表初始数据 */
+const optionsSpecific = Array.from({ length: 12 }, (_, i) => {
+  let idx = i + 1;
+  return {
+    label: `${idx}`,
+    value: `${idx}`,
+  };
+});
+
+/**构建数据 */
+let data = reactive({
+  /**类型 */
+  type: '1',
+  /**间隔 */
+  increment: 1,
+  incrementStart: 1,
+  /**周期 */
+  rangeStart: 1,
+  rangeEnd: 2,
+  /**指定秒 */
+  specific: ['1'],
+});
+
+/**监听数据，将数值格式化 */
+watch(data, () => {
+  let reultValue = '*';
+  let val = data.type;
+  // 每一
+  if (val === '1') {
+    reultValue = '*';
+  }
+  // 间隔
+  if (val === '2') {
+    let start = data.incrementStart;
+    let increment = data.increment;
+    reultValue = `${start ?? 0}/${increment ?? 0}`;
+  }
+  // 周期
+  if (val === '3') {
+    let start = data.rangeStart;
+    let end = data.rangeEnd;
+    reultValue = `${start ?? 0}-${end ?? 0}`;
+  }
+  // 指定
+  if (val === '4') {
+    reultValue = data.specific.sort((a, b) => +a - +b).join(',');
+  }
+  emit('update:value', reultValue);
+});
+
+/**挂载前初始属性 */
+onBeforeMount(() => {
+  const val = props.value;
+  if (val === '*') {
+    data.type = '1';
+  }
+  if (val.includes('/')) {
+    const arr = val.split('/');
+    data.incrementStart = Number(arr[0]);
+    data.increment = Number(arr[1]);
+    data.type = '2';
+  }
+  if (val.includes('-')) {
+    const arr = val.split('-');
+    data.rangeStart = Number(arr[0]);
+    data.rangeEnd = Number(arr[1]);
+    data.type = '3';
+  }
+  if (val.includes(',')) {
+    data.specific = val.split(',').sort((a, b) => +a - +b);
+    data.type = '4';
+  }
+});
+</script>
+
+<template>
+  <a-radio-group size="small" v-model:value="data.type">
+    <a-space direction="vertical" :size="18">
+      <a-radio value="1">
+        {{ t('components.CronModal.month1') }}
+      </a-radio>
+      <a-radio value="2">
+        {{ t('components.CronModal.month21') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.increment"
+          :min="1"
+          :max="12"
+          placeholder="1-12"
+        ></a-input-number>
+        {{ t('components.CronModal.month22') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.incrementStart"
+          :min="1"
+          :max="12"
+          placeholder="1-12"
+        ></a-input-number>
+        {{ t('components.CronModal.month23') }}
+      </a-radio>
+      <a-radio value="3">
+        {{ t('components.CronModal.month31') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeStart"
+          :min="1"
+          :max="12"
+          placeholder="1-12"
+        ></a-input-number>
+        {{ t('components.CronModal.month32') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeEnd"
+          :min="1"
+          :max="12"
+          placeholder="1-12"
+        ></a-input-number>
+        {{ t('components.CronModal.month33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.month4') }}
+      </a-radio>
+      <a-select
+        v-model:value="data.specific"
+        size="small"
+        mode="multiple"
+        style="width: 100%"
+        :placeholder="t('components.CronModal.month4')"
+        :options="optionsSpecific"
+      ></a-select>
+    </a-space>
+  </a-radio-group>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/CronModal/components/Second.vue b/src/components/CronModal/components/Second.vue
new file mode 100644
index 0000000..543e563
--- /dev/null
+++ b/src/components/CronModal/components/Second.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { reactive, watch, onBeforeMount } from 'vue';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const emit = defineEmits(['update:value']);
+const props = defineProps({
+  value: {
+    type: String,
+    default: '*',
+  },
+});
+
+/**指定列表初始数据 */
+const optionsSpecific = Array.from({ length: 60 }, (_, i) => ({
+  label: `${i}`.padStart(2, '0'),
+  value: `${i}`,
+}));
+
+/**构建数据 */
+let data = reactive({
+  /**类型 */
+  type: '1',
+  /**间隔 */
+  increment: 2,
+  incrementStart: 0,
+  /**周期 */
+  rangeStart: 1,
+  rangeEnd: 2,
+  /**指定秒 */
+  specific: ['0'],
+});
+
+/**监听数据，将数值格式化 */
+watch(data, () => {
+  let reultValue = '*';
+  let val = data.type;
+  // 每一
+  if (val === '1') {
+    reultValue = '*';
+  }
+  // 间隔
+  if (val === '2') {
+    let start = data.incrementStart;
+    let increment = data.increment;
+    reultValue = `${start ?? 0}/${increment ?? 0}`;
+  }
+  // 周期
+  if (val === '3') {
+    let start = data.rangeStart;
+    let end = data.rangeEnd;
+    reultValue = `${start ?? 0}-${end ?? 0}`;
+  }
+  // 指定
+  if (val === '4') {
+    reultValue = data.specific.sort((a, b) => +a - +b).join(',');
+  }
+  emit('update:value', reultValue);
+});
+
+/**挂载前初始属性 */
+onBeforeMount(() => {
+  const val = props.value;
+  if (val === '*') {
+    data.type = '1';
+  }
+  if (val.includes('/')) {
+    const arr = val.split('/');
+    data.incrementStart = Number(arr[0]);
+    data.increment = Number(arr[1]);
+    data.type = '2';
+  }
+  if (val.includes('-')) {
+    const arr = val.split('-');
+    data.rangeStart = Number(arr[0]);
+    data.rangeEnd = Number(arr[1]);
+    data.type = '3';
+  }
+  if (val.includes(',')) {
+    data.specific = val.split(',').sort((a, b) => +a - +b);
+    data.type = '4';
+  }
+});
+</script>
+
+<template>
+  <a-radio-group size="small" v-model:value="data.type">
+    <a-space direction="vertical" :size="18">
+      <a-radio value="1">
+        {{ t('components.CronModal.second1') }}
+      </a-radio>
+      <a-radio value="2">
+        {{ t('components.CronModal.second21') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.increment"
+          :min="0"
+          :max="59"
+          placeholder="0-59"
+        ></a-input-number>
+        {{ t('components.CronModal.second22') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.incrementStart"
+          :min="0"
+          :max="59"
+          placeholder="0-59"
+        ></a-input-number>
+        {{ t('components.CronModal.second23') }}
+      </a-radio>
+      <a-radio value="3">
+        {{ t('components.CronModal.second31') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeStart"
+          :min="0"
+          :max="59"
+          placeholder="0-59"
+        ></a-input-number>
+        {{ t('components.CronModal.second32') }}
+        <a-input-number
+          size="small"
+          v-model:value="data.rangeEnd"
+          :min="0"
+          :max="59"
+          placeholder="0-59"
+        ></a-input-number>
+        {{ t('components.CronModal.second33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.second4') }}
+      </a-radio>
+      <a-select
+        v-model:value="data.specific"
+        size="small"
+        mode="multiple"
+        style="width: 100%"
+        :placeholder="t('components.CronModal.second4')"
+        :options="optionsSpecific"
+      ></a-select>
+    </a-space>
+  </a-radio-group>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/CronModal/index.vue b/src/components/CronModal/index.vue
new file mode 100644
index 0000000..434d12b
--- /dev/null
+++ b/src/components/CronModal/index.vue
@@ -0,0 +1,114 @@
+<template>
+  <a-modal
+    :destroyOnClose="true"
+    :title="t('components.CronModal.title')"
+    :open="props.open"
+    :body-style="{ padding: '0 24px' }"
+    @cancel="fnCronModal(false)"
+    @ok="fnCronModal(true)"
+  >
+    <a-tabs tab-position="top" type="line">
+      <a-tab-pane key="1" :tab="t('common.units.second')">
+        <CronSecond v-model:value="cronValue.second"></CronSecond>
+      </a-tab-pane>
+      <a-tab-pane key="2" :tab="t('common.units.minute')">
+        <CronMinute v-model:value="cronValue.minute"></CronMinute>
+      </a-tab-pane>
+      <a-tab-pane key="3" :tab="t('common.units.hour')">
+        <CronHour v-model:value="cronValue.hour"></CronHour>
+      </a-tab-pane>
+      <a-tab-pane key="4" :tab="t('common.units.day')">
+        <CronDay v-model:value="cronValue.day"></CronDay>
+      </a-tab-pane>
+      <a-tab-pane key="5" :tab="t('common.units.month')">
+        <CronMonth v-model:value="cronValue.month"></CronMonth>
+      </a-tab-pane>
+    </a-tabs>
+
+    <a-input
+      class="reultBox"
+      :addon-before="t('components.CronModal.addon')"
+      v-model:value="cronStr"
+      disabled
+    />
+  </a-modal>
+</template>
+<script lang="ts" setup>
+import CronSecond from './components/Second.vue';
+import CronMinute from './components/Minute.vue';
+import CronHour from './components/Hour.vue';
+import CronDay from './components/Day.vue';
+import CronMonth from './components/Month.vue';
+import { reactive, computed, watch } from 'vue';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const emit = defineEmits(['cancel', 'ok', 'update:open']);
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+  cron: {
+    type: String,
+    default: '* * * * * ?',
+  },
+});
+
+/**cron属性值 */
+let cronValue = reactive({
+  second: '*',
+  minute: '*',
+  hour: '*',
+  day: '*',
+  month: '*',
+  week: '?',
+});
+
+/**组合cron结果 */
+const cronStr = computed(() => {
+  let time = `${cronValue.second} ${cronValue.minute} ${cronValue.hour}`;
+  let date = `${cronValue.day} ${cronValue.month} ${cronValue.week}`;
+  return `${time} ${date}`;
+});
+
+/**监听是否显示，初始cron属性 */
+watch(
+  () => props.open,
+  val => {
+    if (!val) return;
+    const arr = props.cron.split(' ');
+    // 6 位以上是合法表达式
+    if (arr.length >= 6) {
+      Object.assign(cronValue, {
+        second: arr[0],
+        minute: arr[1],
+        hour: arr[2],
+        day: arr[3],
+        month: arr[4],
+        week: arr[5],
+      });
+    }
+  }
+);
+
+/**
+ * 窗口事件
+ * @param val modal触发事件
+ */
+function fnCronModal(val: boolean) {
+  emit('update:open', false);
+  if (val) {
+    emit('ok', cronStr.value);
+  } else {
+    emit('cancel');
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reultBox {
+  margin-top: 48px;
+  margin-bottom: 24px;
+}
+</style>
diff --git a/src/components/advanced/table-header-operation.vue b/src/components/advanced/table-header-operation.vue
index 8c97d26..f91519e 100644
--- a/src/components/advanced/table-header-operation.vue
+++ b/src/components/advanced/table-header-operation.vue
@@ -50,7 +50,7 @@ function handleExport() {
   <div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
     <slot name="prefix"></slot>
     <slot name="default">
-      <AButton v-if="isShowBtn(`system:${tableType}:add`)" size="small" ghost type="primary" @click="add">
+      <AButton v-if="isShowBtn(`system:${tableType}:add`) && !notShowAdd" size="small" ghost type="primary" @click="add">
         <div class="flex-y-center gap-8px">
           <icon-ic-round-plus class="text-icon" />
           <span>{{ $t('common.add') }}</span>
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 99f8aa4..877eaad 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -24,8 +24,13 @@ const local: any = {
     config: 'Config',
     confirm: 'Confirm',
     delete: 'Delete',
+    view: 'View',
+    exportOk: "Export Completed",
+    exportTip: "Confirm exporting xlsx table files based on search criteria?",
     deleteSuccess: 'Delete Success',
     confirmDelete: 'Are you sure you want to delete?',
+    confirmClean: 'Are you sure you want to Clean?',
+    clearText: "Clean",
     edit: 'Edit',
     index: 'Index',
     keywordSearch: 'Please enter keyword',
@@ -55,7 +60,75 @@ const local: any = {
     abnormal: 'Abnormal',
     export: 'Export',
     loading: 'Loading',
+    selectPlease: 'please select',
+    disable: 'Disable',
+    default: 'Default',
+    system:'System',
+    record: 'Record',
+    noRecord: 'No Record',
+    msgSuccess: 'Success {msg}',
+    errorFields: 'Please fill in the required information in {num} correctly!',
+    tipTitle: 'Prompt',
+    units: {
+      second: 'Second',
+      minute: 'Minute',
+      hour: 'Hour',
+      day: 'Day',
+      week: 'Week',
+      month: 'Month',
+      year: 'Year',
+      core: 'Core',
+    }
   },
+    // 组件
+    components: {
+      CronModal: {
+        title: "Cron Expression Generator",
+        addon: "Expression Preview:",
+        day1: "Every day",
+        day21: "Execute every",
+        day22: "days, starting from the",
+        day23: "day",
+        day31: "Cycle from",
+        day32: "to",
+        day33: "days",
+        day4: "Designated day (optional)",
+        day5: "Last day of the month",
+        hour1: "Hourly",
+        hour21: "Execute every",
+        hour22: "hours, starting from the",
+        hour23: "hour",
+        hour31: "Cycle time from",
+        hour32: "to",
+        hour33: "hours",
+        hour4: "Specified hours (multiple options available)",
+        minute1: "Every minute",
+        minute21: "Execute every",
+        minute22: "minutes, starting from the",
+        minute23: "minute",
+        minute31: "Cycle time from",
+        minute32: "to",
+        minute33: "minutes",
+        minute4: "Specified minutes (multiple options available)",
+        month1: "Every month",
+        month21: "Execute every",
+        month22: "months, starting from the",
+        month23: "month",
+        month31: "Cycle time from",
+        month32: "to",
+        month33: "months",
+        month4: "Specified months (multiple options available)",
+        second1: "Every second",
+        second21: "Execute every",
+        second22: "seconds, starting from the",
+        second23: "second",
+        second31: "Cycle time from",
+        second32: "to",
+        second33: "seconds",
+        second4: "Specify the number of seconds (multiple selectable)",
+      },
+    },
+
   request: {
     logout: 'Logout user after request failed',
     logoutMsg: 'User status is invalid, please log in again',
@@ -517,7 +590,27 @@ const local: any = {
         viewJob:'View Job',
         addJob:'Add Job',
         editJob:'Edit Job',
+        viewInfoErr:'Failed to get job information',
         getInfoError:'Get Info Error',
+        jobNamePlease: 'Please enter the task name correctly, limited to 2-50 characters',
+        invokeTargetPlease: 'Please enter the call target correctly, limited to 2-50 characters.',
+        cronExpressionPlease: 'Please enter or generate a cron execution expression',
+        jobGroup: "Job Group",
+        saveLog: "Save Log",
+        invokeTargetTip: "Parameter description: support for preset incoming parameters, serialized processing parameters in the processor",
+        cronExpressionTip: "Example of an expression:0/20 * * * * ?",
+        cronExpressionTip1: "Illustrative example: Execute tasks every 20 seconds",
+        cronExpressionNew: "Generating Expression",
+        targetParamsPlease: 'Call target incoming parameters, only support json strings',
+        delTip: "Are you sure you want to delete task number [{num}]?",
+        delLogTip: "Are you sure you want to delete Log number [{num}]?",
+        runOneTip: "Are you sure you want to perform a [{num}] task right away?",
+        runOneOk: "{num} Executed successfully",
+        runOne:'execute once',
+        jobLog: "Task Log",
+        jobMessage: "Task Message",
+        clearTip: "Confirm that all dispatch log data items are cleared?",
+        clearOk: "Cleared Successfully",
       }
     }
   },
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 58d4ec1..e7bf312 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -24,8 +24,13 @@ const local:any = {
     config: '配置',
     confirm: '确认',
     delete: '删除',
+    view:'查看',
+    exportOk: "已完成导出",
+    exportTip: "确认根据搜索条件导出xlsx表格文件吗?",
     deleteSuccess: '删除成功',
     confirmDelete: '确认删除吗？',
+    confirmClean: '确认清空吗？',
+    clearText: "清空",
     edit: '编辑',
     index: '序号',
     keywordSearch: '请输入关键词搜索',
@@ -55,7 +60,75 @@ const local:any = {
     abnormal: '异常',
     export:'导出',
     loading: '加载中...',
+    selectPlease: '请选择',
+    disable: '停用',
+    default: '默认',
+    system:'系统',
+    record: '记录',
+    noRecord: '不记录',
+    msgSuccess: '{msg} 成功',
+    errorFields: '请正确填写 {num} 处必填信息！',
+    tipTitle: '提示',
+    units: {
+      second: '秒',
+      minute: '分钟',
+      hour: '小时',
+      day: '天',
+      week: '周',
+      month: '月',
+      year: '年',
+      core: '核',
+    }
   },
+    // 组件
+  components: {
+      CronModal: {
+        title: "Cron表达式生成",
+        addon: "表达式预览：",
+        day1: "每一天",
+        day21: "每隔",
+        day22: "天执行一次，从",
+        day23: "日开始",
+        day31: "周期从",
+        day32: "到",
+        day33: "日",
+        day4: "指定日(可多选)",
+        day5: "本月最后一天",
+        hour1: "每一小时",
+        hour21: "每隔",
+        hour22: "小时执行一次，从",
+        hour23: "时开始",
+        hour31: "周期从",
+        hour32: "到",
+        hour33: "小时",
+        hour4: "指定小时(可多选)",
+        minute1: "每一分钟",
+        minute21: "每隔",
+        minute22: "分钟执行一次，从",
+        minute23: "分钟开始",
+        minute31: "周期从",
+        minute32: "到",
+        minute33: "分钟",
+        minute4: "指定分钟(可多选)",
+        month1: "每一月",
+        month21: "每隔",
+        month22: "月执行，从",
+        month23: "月开始",
+        month31: "周期从",
+        month32: "到",
+        month33: "月之间的每个月",
+        month4: "指定月(可多选)",
+        second1: "每一秒钟",
+        second21: "每隔",
+        second22: "秒执行一次，从",
+        second23: "秒开始",
+        second31: "周期从",
+        second32: "到",
+        second33: "秒",
+        second4: "指定秒数(可多选)",
+      }
+    },
+
   request: {
     logout: '请求失败后登出用户',
     logoutMsg: '用户状态失效，请重新登录',
@@ -504,7 +577,7 @@ const local:any = {
         other:'其他',
       },
       task:{
-        taskId:'ID',
+        taskId:'编号',
         taskName:'任务名称',
         group:'任务组名',
         invoke:'调用目标',
@@ -519,6 +592,25 @@ const local:any = {
         editJob:'编辑任务',
         viewInfoErr:'查看异常信息',
         getInfoError:'获取信息失败',
+        jobNamePlease: '请正确输入任务名称，限2-50个字符',
+        invokeTargetPlease: '请正确输入调用目标，限2-50个字符',
+        cronExpressionPlease: '请输入或生成cron执行表达式',
+        jobGroup: "任务组名",
+        saveLog: "记录日志",
+        invokeTargetTip: "参数说明：支持预设传入参数，在处理器中进行序列化处理参数",
+        cronExpressionTip: "表达式示例：0/20 * * * * ?",
+        cronExpressionTip1: "示例说明：每20秒执行任务",
+        cronExpressionNew: "生成表达式",
+        targetParamsPlease: '调用目标传入参数，仅支持json字符串',
+        delTip: "确认删除定时任务编号为 【{num}】 任务吗?",
+        delLogTip: "确认删除日志编号为 【{num}】 任务日志吗?",
+        runOneTip: "确定要立即执行一次 【{num}】 任务吗?",
+        runOneOk: "{num} 执行成功",
+        runOne:'执行一次',
+        jobLog: "任务日志",
+        jobMessage: "执行信息",
+        clearTip: "确认清空所有调度日志数据项吗?",
+        clearOk: "清空成功",
       }
     }
   },
diff --git a/src/service/api/job.ts b/src/service/api/job.ts
index 5ae21b0..b72d20a 100644
--- a/src/service/api/job.ts
+++ b/src/service/api/job.ts
@@ -16,3 +16,88 @@ export function doGetjobInfo(paramsId: any) {
     method: 'get',
   });
 }
+
+
+/**
+ * 新增定时任务调度
+ * @param data 任务对象
+ * @returns object
+ */
+export function addJob(data: Record<string, any>) {
+  return request({
+    url: '/schedule/job',
+    method: 'post',
+    data: data,
+  });
+}
+
+/**
+ * 修改定时任务调度
+ * @param data 任务对象
+ * @returns object
+ */
+export function updateJob(data: Record<string, any>) {
+  return request({
+    url: '/schedule/job',
+    method: 'put',
+    data: data,
+  });
+}
+
+/**
+ * 删除调度日志
+ * @param jobIds 任务日志Id
+ * @returns object
+ */
+export function delJobLog(jobIds: string) {
+  return request({
+    url: `/schedule/job/${jobIds}`,
+    method: 'delete',
+  });
+}
+
+/**
+ * 定时任务立即执行一次
+ * @param jobId 任务ID
+ * @returns object
+ */
+export function runJob(jobId: string) {
+  return request({
+    url: `/schedule/job/run`,
+    method: 'put',
+    data: {jobId},
+  });
+}
+
+/**
+ * 任务状态修改
+ * @param jobId 任务ID
+ * @param status 变更状态值
+ * @returns
+ */
+export function changeJobStatus(
+  jobId: string | number,
+  status: string | number
+) {
+  return request({
+    url: '/schedule/job/changeStatus',
+    method: 'put',
+    data: {
+      jobId,
+      status,
+    },
+  });
+}
+
+/**
+ * 定时任务调度列表导出
+ * @param query 查询参数
+ * @returns bolb
+ */
+export function exportJob() {
+  return request({
+    url: '/schedule/job/export',
+    method: 'post',
+    responseType: 'blob',
+  });
+}
diff --git a/src/views/manage/task/index.vue b/src/views/manage/task/index.vue
index f15eac6..421b2cc 100644
--- a/src/views/manage/task/index.vue
+++ b/src/views/manage/task/index.vue
@@ -3,19 +3,18 @@ import { message, Tag } from 'ant-design-vue';
 import type { Key } from 'ant-design-vue/es/_util/type';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { SimpleScrollbar } from '~/packages/materials/src';
-import taskOperateDrawer from './modules/task-operate-drawer.vue';
 import { useI18n } from "vue-i18n";
-import { SyncOutlined, SearchOutlined, ProfileOutlined, FormOutlined, DeleteOutlined, RocketOutlined, ContainerOutlined } from '@ant-design/icons-vue';
+import { SyncOutlined, SearchOutlined, ProfileOutlined, FormOutlined, DeleteOutlined, RocketOutlined, ContainerOutlined, FieldTimeOutlined, ExportOutlined } from '@ant-design/icons-vue';
 import { enableStatusOptions } from '@/constants/business';
+import { saveAs } from 'file-saver';
+import Form from 'ant-design-vue/es/form/Form';
+import Modal from 'ant-design-vue/es/modal/Modal';
+import { useRouter, useRoute } from 'vue-router';
+const router = useRouter();
+const route = useRoute();
+const routePath = route.path;
 
-import { useAntdForm, useFormRules } from '@/hooks/common/form';
-const { defaultRequiredRule, formRules } = useFormRules();
 
-const rules = {
-  jonName: defaultRequiredRule,
-  invokeTarget: defaultRequiredRule,
-  cronExpression: defaultRequiredRule,
-};
 
 const { t } = useI18n();
 
@@ -44,8 +43,50 @@ let modalState: any = reactive({
   },
   confirmLoading: false,
   openByCron: false,
+  statusOpt: [
+    { label: t('common.normal'), value: '0' },
+    { label: t('common.disable'), value: '1' }
+  ],
+  jobGroup: [
+    { label: t('common.default'), value: "DEFAULT" },
+    { label: t('common.system'), value: "SYSTEM" }
+  ],
+  sysJobSaveLog: [
+    { label: t('common.record'), value: "0" },
+    { label: t('common.noRecord'), value: "1" }
+  ]
 });
 
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    jobName: [
+      {
+        required: true,
+        min: 2,
+        max: 50,
+        message: t('page.manage.task.jobNamePlease'),
+      },
+    ],
+    invokeTarget: [
+      {
+        required: true,
+        min: 2,
+        max: 50,
+        message: t('page.manage.task.invokeTargetPlease'),
+      },
+    ],
+    cronExpression: [
+      {
+        required: true,
+        min: 6,
+        message: t('page.manage.task.cronExpressionPlease'),
+      },
+    ],
+  })
+);
+
 const scrollConfig = computed(() => {
   return {
     y: wrapperElHeight.value - 72,
@@ -53,11 +94,14 @@ const scrollConfig = computed(() => {
   };
 });
 
-const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
+const { columns, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: doGetjobList,
   apiParams: {
     pageNum: 1,
     pageSize: 10,
+    jobName: '',
+    jobGroup: '',
+    status: ''
   },
   rowKey: 'jobId',
   columns: () => [
@@ -78,22 +122,6 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
       dataIndex: 'jobGroup',
       title: t('page.manage.task.group'),
       align: 'center',
-      // customRender: ({ record }: any) => {
-      //   if (record.operatorType === null) {
-      //     return null;
-      //   }
-      //   const tagMap: any = {
-      //     0: t('page.manage.log.other'),
-      //     1: t('page.manage.log.backUser'),
-      //     2: t('page.manage.log.phoneUser'),
-      //   };
-      //   const tagColor: any = {
-      //     '0': 'pink',
-      //     '1': 'warning',
-      //     '2': 'blue',
-      //   };
-      //   return <Tag color={tagColor[record.operatorType]}>{tagMap[record.operatorType]}</Tag>;
-      // }
     },
     {
       key: 'invokeTarget',
@@ -132,74 +160,42 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
       title: t('common.operate'),
       align: 'center',
       width: 200,
-      // customRender: ({ record }: any) =>
-      //   !record.admin && (
-      //     <div class="flex justify-around gap-8px">
-      //         <Popconfirm onConfirm={() => handleDelete(record.operId)} title={t('common.confirmDelete')}>
-      //           <a-button danger size="small">
-      //             <template #icon>
-      //               <SyncOutlined />
-      //             </template>
-      //           </a-button>
-      //         </Popconfirm>
-      //     </div>
-      //   )
     }
   ]
 });
 
 const {
-  drawerVisible,
   operateType,
-  editingData,
-  handleAdd,
   checkedRowKeys,
   onBatchDeleted,
   onDeleted
   // closeDrawer
 } = useTableOperate(data, { getData, idKey: 'jobId' });
-const deptTreeData = ref<Api.Common.CommonTree>([]);
 
-onMounted(() => {
-});
+
 
 async function handleBatchDelete() {
-  const { error } = await doDeleteLog(checkedRowKeys.value);
-  if (!error) {
-    onBatchDeleted();
-  }
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('page.manage.task.delTip', { num: checkedRowKeys.value.join(',') }),
+    async onOk() {
+
+      const { error } = await doDeleteLog(checkedRowKeys.value);
+      if (!error) {
+        onBatchDeleted();
+      }
+    }
+  })
 }
 
-async function handleDelete(id: number) {
-  const { error } = await doDeleteLog([id]);
-  if (!error) {
-    onDeleted();
-  }
-}
 
 
 function handleUserSelectChange(selectedRowKeys: Key[], selectedRows: any[]) {
   checkedRowKeys.value = selectedRowKeys as number[];
 }
 
-function fnTest() {
-  searchParams.value = {
-
-  };
-
-  resetSearchParams();
-  // 使用 nextTick 确保视图更新后检查
-  nextTick(() => {
-    console.log(operateType)
-  });
-}
-
 async function fnRecordView(jobId: number) {
-  // const { error, data } = await doGetjobInfo(jobId);
-  // // if (!error) {
-  // //   onDeleted();
-  // // }
-  // console.log(data);
+
   operateType.value = 'view';
 
   if (modalState.confirmLoading) return;
@@ -215,16 +211,44 @@ async function fnRecordView(jobId: number) {
       modalState.title = t('page.manage.task.viewJob');
       console.log(modalState.openByView);
     }
-    // if (res.code === RESULT_CODE_SUCCESS && res.data) {
-    //   modalState.from = Object.assign(modalState.from, res.data);
-    //   modalState.title = t('views.manage.job.viewJob');
-    //   modalState.openByView = true;
-    // } else {
-    //   message.error(t('views.manage.job.viewInfoErr'), 2);
-    // }
+
   });
 }
 
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(() => {
+      modalState.confirmLoading = true;
+      const from = toRaw(modalState.from);
+      const job = from.jobId ? updateJob(from) : addJob(from);
+      const key = 'job';
+      message.loading({ content: t('common.loading'), key });
+      job
+        .then((res: any) => {
+          if (!res.error) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              key,
+              duration: 2,
+            });
+            modalState.openByEdit = false;
+            modalStateFrom.resetFields();
+            getData();
+          }
+        })
+        .finally(() => {
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
 
 /**
  * 对话框弹出关闭执行函数
@@ -233,7 +257,7 @@ async function fnRecordView(jobId: number) {
 function fnModalCancel() {
   modalState.openByEdit = false;
   modalState.openByView = false;
-  // modalStateFrom.resetFields();
+  modalStateFrom.resetFields();
 }
 
 
@@ -264,6 +288,123 @@ function fnModalVisibleByEdit(jobId?: string | number) {
   }
 }
 
+/**
+ * 对话框弹出cron生成回调
+ */
+function fnModalCron(opt: boolean, cronStr?: string) {
+  modalState.openByCron = opt;
+  if (cronStr) {
+    modalState.from.cronExpression = cronStr;
+  }
+}
+
+function fnRecordDelete(recordId: any) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('page.manage.task.delTip', { num: recordId }),
+    async onOk() {
+
+      const { error } = await delJobLog(recordId);
+      if (!error) {
+        onDeleted();
+      }
+    }
+  })
+}
+
+function fnRunTask(jobId: any) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('page.manage.task.runOneTip', { num: jobId }),
+    async onOk() {
+      const { error } = await runJob(jobId);
+      if (!error) {
+        message.success(t('page.manage.task.runOneOk'), 2);
+      }
+    }
+  })
+}
+
+/**跳转任务日志页面 */
+function fnJobLogView(jobId: string | number = '0') {
+  console.log(`${routePath}/log/${jobId}`)
+  router.push(`${routePath}/log?jobId=${jobId}`);
+}
+
+/**
+ * 任务状态修改
+ * @param row 任务信息对象
+ */
+function fnRecordStatus(row: Record<string, string>) {
+  doGetType(row.jobId).then((res: any) => {
+    console.log(res);
+  })
+  const sysJobStatus = [
+    {
+      "label": t('common.normal'),
+      "value": "0",
+      "tagType": "",
+      "tagClass": ""
+    },
+    {
+      "label": t('common.disable'),
+      "value": "1",
+      "tagType": "",
+      "tagClass": ""
+    }
+  ];
+  const text =
+    row.status === '1'
+      ? sysJobStatus.find(s => s.value === '1')?.label
+      : sysJobStatus.find(s => s.value === '0')?.label;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.monitor.job.statusChange', { text, num: row.jobName }),
+    onOk() {
+      const key = 'changeJobStatus';
+      message.loading({ content: t('common.loading'), key });
+      changeJobStatus(row.jobId, row.status).then(res => {
+        if (!res.error) {
+          message.success({
+            content: t('common.msgSuccess', { msg: `${row.jobName} ${text}` }),
+            key,
+            duration: 2,
+          });
+        }
+        getData();
+      });
+    },
+    onCancel() {
+      const value =
+        row.status === '1'
+          ? sysJobStatus.find(s => s.value === '0')?.value
+          : sysJobStatus.find(s => s.value === '1')?.value;
+      row.status = value || '0';
+    },
+  });
+}
+
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('common.exportTip'),
+    onOk() {
+      const key = 'exportJob';
+      message.loading({ content: t('common.loading'), key });
+      exportJob().then(res => {
+        if (!res.error) {
+          message.success({
+            content: t('common.exportOk'),
+            key,
+            duration: 2,
+          });
+          saveAs(res.data, `job_${Date.now()}.xlsx`);
+        }
+      });
+    },
+  });
+}
+
 </script>
 
 <template>
@@ -274,14 +415,14 @@ function fnModalVisibleByEdit(jobId?: string | number) {
         <AForm :model="searchParams" :label-width="80">
           <ARow :gutter="[16, 16]" wrap>
             <ACol :lg="6" :md="12" :xs="24">
-              <AFormItem label="Name" name="operIp" class="m-0">
-                <AInput v-model:value="searchParams.operIp" />
+              <AFormItem label="Name" name="jobName" class="m-0">
+                <AInput v-model:value="searchParams.jobName" />
               </AFormItem>
             </ACol>
 
             <ACol :lg="6" :md="12" :xs="24">
-              <AFormItem label="Group" name="title" class="m-0">
-                <AInput v-model:value="searchParams.title" />
+              <AFormItem label="Group" name="jobGroup" class="m-0">
+                <AInput v-model:value="searchParams.jobGroup" />
               </AFormItem>
             </ACol>
 
@@ -302,7 +443,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
               <AFormItem class="m-0">
                 <div class="w-full flex-y-center justify-end gap-8px">
                   <a-space :size="8">
-                    <a-button @click="fnTest">
+                    <a-button @click="resetSearchParams">
                       <template #icon>
                         <SyncOutlined />
                       </template>
@@ -326,10 +467,6 @@ function fnModalVisibleByEdit(jobId?: string | number) {
       <ACard title="Task Management" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
         class="flex-col-stretch sm:flex-1-hidden card-wrapper">
         <template #extra>
-          <!-- <TableHeaderOperation v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0"
-            :loading="loading" :show-delete="true" @add="handleAdd" @delete="handleBatchDelete" @refresh="getData"
-            :showExport="true" :not-show-add="false" /> -->
-
           <div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
             <slot name="prefix"></slot>
             <slot name="default">
@@ -355,13 +492,21 @@ function fnModalVisibleByEdit(jobId?: string | number) {
                 <span>{{ $t('common.refresh') }}</span>
               </div>
             </AButton>
-            <!-- <AButton size="small" type="primary" @click="handleExport" v-show="showExport">
-              <div class="flex-y-center gap-8px">
-                <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
-                <span>{{ $t('common.export') }}</span>
-              </div>
-            </AButton> -->
-            <TableColumnSetting v-model:columns="columns" />
+
+            <AButton size="small" type="primary" @click="fnExportList">
+              <template #icon>
+                <ExportOutlined />
+              </template>
+              <span>{{ $t('common.export') }}</span>
+            </AButton>
+
+            <AButton size="small" type="default" @click.prevent="fnJobLogView()">
+              <template #icon>
+                <ContainerOutlined />
+              </template>
+              {{ t('page.manage.task.jobLog') }}
+            </AButton>
+
             <slot name="suffix"></slot>
           </div>
         </template>
@@ -375,17 +520,14 @@ function fnModalVisibleByEdit(jobId?: string | number) {
           <template #bodyCell="{ column, record }">
 
             <template v-if="column.key === 'status'">
-              <a-switch v-model:checked="record.status" checked-value="0" un-checked-value="1" size="small" />
-              <!-- <DictTag :options="{
-                '0': t('common.normal'),
-                '1': t('common.abnormal'),
-              }" :value="record.status" /> -->
+              <a-switch v-model:checked="record.status" checked-value="0" un-checked-value="1" size="small"
+                @change="fnRecordStatus(record)" />
             </template>
 
             <template v-if="column.key === 'operate'">
               <a-space :size="8" align="center">
                 <a-tooltip>
-                  <template #title>{{ 'View' }}</template>
+                  <template #title>{{ t('common.view') }}</template>
                   <a-button type="link" @click.prevent="fnRecordView(record.jobId)">
                     <template #icon>
                       <ProfileOutlined />
@@ -393,7 +535,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
                   </a-button>
                 </a-tooltip>
                 <a-tooltip>
-                  <template #title>{{ 'Edit' }}</template>
+                  <template #title>{{ t('common.edit') }}</template>
                   <a-button type="link" @click.prevent="fnModalVisibleByEdit(record.jobId)">
                     <template #icon>
                       <FormOutlined />
@@ -402,8 +544,8 @@ function fnModalVisibleByEdit(jobId?: string | number) {
                 </a-tooltip>
 
                 <a-tooltip>
-                  <template #title>{{ 'Delete' }}</template>
-                  <a-button type="link">
+                  <template #title>{{ t('common.delete') }}</template>
+                  <a-button type="link" @click.prevent="fnRecordDelete(record.jobId)">
                     <template #icon>
                       <DeleteOutlined />
                     </template>
@@ -411,8 +553,8 @@ function fnModalVisibleByEdit(jobId?: string | number) {
                 </a-tooltip>
 
                 <a-tooltip>
-                  <template #title>{{ 'run' }}</template>
-                  <a-button type="link">
+                  <template #title>{{ t('page.manage.task.runOne') }}</template>
+                  <a-button type="link" @click.prevent="fnRunTask(record.jobId)">
                     <template #icon>
                       <RocketOutlined />
                     </template>
@@ -420,8 +562,8 @@ function fnModalVisibleByEdit(jobId?: string | number) {
                 </a-tooltip>
 
                 <a-tooltip>
-                  <template #title>{{ 'Job Log' }}</template>
-                  <a-button type="link">
+                  <template #title>{{ t('page.manage.task.jobLog') }}</template>
+                  <a-button type="link" @click.prevent="fnJobLogView(record.jobId)">
                     <template #icon>
                       <ContainerOutlined />
                     </template>
@@ -434,11 +576,6 @@ function fnModalVisibleByEdit(jobId?: string | number) {
         </ATable>
 
 
-
-        <!-- <taskOperateDrawer v-model:visible="drawerVisible" :dept-tree-data="deptTreeData" :operate-type="operateType"
-          :row-data="editingData" @submitted="getData" /> -->
-
-
         <!-- 详情框 -->
         <a-modal :width="800" v-model:open="modalState.openByView" :title="modalState.title" @cancel="fnModalCancel">
           <a-form layout=" horizontal" :label-col="{ span: 6 }" :label-wrap="true">
@@ -528,10 +665,10 @@ function fnModalVisibleByEdit(jobId?: string | number) {
 
 
         <!-- 新增框或修改框 -->
-        <!-- <a-modal :drag="true" :width="800" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
+        <a-modal :width="800" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
           :open="modalState.openByEdit" :title="modalState.title" :confirm-loading="modalState.confirmLoading"
           @ok="fnModalOk" @cancel="fnModalCancel">
-          <a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true" :rules="rules">
+          <a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
             <a-row>
               <a-col :lg="12" :md="12" :xs="24">
                 <a-form-item :label="t('page.manage.task.taskName')" name="jobName">
@@ -542,7 +679,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
               <a-col :lg="12" :md="12" :xs="24">
                 <a-form-item :label="t('page.manage.task.status')" name="status">
                   <a-select v-model:value="modalState.from.status" default-value="0"
-                    :placeholder="t('common.selectPlease')" :options="dict.sysJobStatus">
+                    :placeholder="t('common.selectPlease')" :options="modalState.statusOpt">
                   </a-select>
                 </a-form-item>
               </a-col>
@@ -552,20 +689,20 @@ function fnModalVisibleByEdit(jobId?: string | number) {
               <a-col :lg="12" :md="12" :xs="24">
                 <a-form-item :label="t('page.manage.task.jobGroup')" name="jobGroup">
                   <a-select v-model:value="modalState.from.jobGroup" default-value="DEFAULT"
-                    :placeholder="t('common.selectPlease')" :options="dict.sysJobGroup">
+                    :placeholder="t('common.selectPlease')" :options="modalState.jobGroup">
                   </a-select>
                 </a-form-item>
               </a-col>
               <a-col :lg="12" :md="12" :xs="24">
                 <a-form-item :label="t('page.manage.task.saveLog')" name="saveLog">
                   <a-select v-model:value="modalState.from.saveLog" default-value="0"
-                    :placeholder="t('common.selectPlease')" :options="dict.sysJobSaveLog">
+                    :placeholder="t('common.selectPlease')" :options="modalState.sysJobSaveLog">
                   </a-select>
                 </a-form-item>
               </a-col>
             </a-row>
 
-            <a-form-item :label="t('page.manage.task.invokeTarget')" name="invokeTarget" :label-col="{ span: 3 }"
+            <a-form-item :label="t('page.manage.task.invoke')" name="invokeTarget" :label-col="{ span: 3 }"
               :label-wrap="true">
               <a-input v-model:value="modalState.from.invokeTarget" allow-clear
                 :placeholder="t('page.manage.task.invokeTargetPlease')">
@@ -580,7 +717,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
               </a-input>
             </a-form-item>
 
-            <a-form-item :label="t('page.manage.task.cronExpression')" name="cronExpression" :label-col="{ span: 3 }"
+            <a-form-item :label="t('page.manage.task.cron')" name="cronExpression" :label-col="{ span: 3 }"
               :label-wrap="true">
               <a-input v-model:value="modalState.from.cronExpression" allow-clear
                 :placeholder="t('page.manage.task.cronExpressionPlease')">
@@ -606,6 +743,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
               </a-input>
             </a-form-item>
 
+
             <a-form-item :label="t('page.manage.task.targetParams')" name="targetParams" :label-col="{ span: 3 }"
               :label-wrap="true">
               <a-textarea v-model:value="modalState.from.targetParams" :auto-size="{ minRows: 2, maxRows: 6 }"
@@ -618,8 +756,11 @@ function fnModalVisibleByEdit(jobId?: string | number) {
                 :maxlength="400" :show-count="true" />
             </a-form-item>
           </a-form>
-        </a-modal> -->
+        </a-modal>
 
+
+        <CronModal v-model:open="modalState.openByCron" :cron="modalState.from.cronExpression"
+          @ok="fnModalCron(false, $event)"></CronModal>
       </ACard>