From 2a4928aed9112863b841e8573ab5e33a9d142a66 Mon Sep 17 00:00:00 2001
From: tjq <tengjiqi@gmail.com>
Date: Sun, 20 Jun 2021 14:26:56 +0800
Subject: [PATCH 1/2] feat: support DispatchStrategy

---
 src/components/views/JobManager.vue | 15 ++++++++++++++-
 src/i18n/langs/cn.js                |  3 +++
 src/i18n/langs/en.js                |  5 ++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/views/JobManager.vue b/src/components/views/JobManager.vue
index db49a9d..7f03f65 100644
--- a/src/components/views/JobManager.vue
+++ b/src/components/views/JobManager.vue
@@ -202,7 +202,7 @@
                 </el-form-item>
                 <el-form-item :label="$t('message.clusterConfig')">
                     <el-row>
-                        <el-col :span="16">
+                        <el-col :span="12">
                             <el-input :placeholder="$t('message.designatedWorkerAddressPLH')" v-model="modifiedJobForm.designatedWorkers" class="ruleContent">
                                 <template slot="prepend">{{$t('message.designatedWorkerAddress')}}</template>
                             </el-input>
@@ -212,6 +212,16 @@
                                 <template slot="prepend">{{$t('message.maxWorkerNum')}}</template>
                             </el-input>
                         </el-col>
+                        <el-col :span="4">
+                          <el-select v-model="modifiedJobForm.dispatchStrategy" filterable :placeholder="$t('message.dps_title')">
+                            <el-option
+                                v-for="strategy in dispatchStrategyOptions"
+                                :key="strategy.key"
+                                :label="strategy.label"
+                                :value="strategy.key">
+                            </el-option>
+                          </el-select>
+                        </el-col>
                     </el-row>
                 </el-form-item>
                 <el-form-item :label="$t('message.alarmConfig')">
@@ -272,6 +282,7 @@
                     enable: true,
                     designatedWorkers: "",
                     maxWorkerCount: 0,
+                    dispatchStrategy: "",
                     notifyUserIds: []
 
                 },
@@ -295,6 +306,8 @@
                 processorTypeOptions: [{key: "BUILT_IN", label: this.$t('message.builtIn')}, {key: "EXTERNAL", label: this.$t('message.external')}], // {key: "SHELL", label: "SHELL"}, {key: "PYTHON", label: "PYTHON"}
                 // 执行方式类型
                 executeTypeOptions: [{key: "STANDALONE", label: this.$t('message.standalone')}, {key: "BROADCAST", label: this.$t('message.broadcast')},  {key: "MAP", label: this.$t('message.map')}, {key: "MAP_REDUCE", label: this.$t('message.mapReduce')}],
+                // 派发策略
+                dispatchStrategyOptions: [{key: "PERFORMANCE_FIRST", label: this.$t('message.dps_performance_first')}, {key: "RANDOM", label: this.$t('message.dps_random')}],
                 // 用户列表
                 userList: [],
                 // 时间表达式校验窗口
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 3598499..ba98d13 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -119,6 +119,9 @@ const cn = {
         'reRun': '重试',
         'builtIn': '内建',
         'external': '外置（动态加载）',
+        'dps_title': '派发策略',
+        'dps_performance_first': '性能优先',
+        'dps_random': '随机',
 
         // 任务实例管理
         'wfInstanceId': '工作流实例 ID',
diff --git a/src/i18n/langs/en.js b/src/i18n/langs/en.js
index 52a24c9..0205fb5 100644
--- a/src/i18n/langs/en.js
+++ b/src/i18n/langs/en.js
@@ -115,7 +115,10 @@ const en = {
         'runHistory': 'History',
         'reRun': 'Retry',
         'builtIn': 'BUILT_IN',
-        'External': 'EXTERNAL',
+        'external': 'EXTERNAL',
+        'dps_title': 'DispatchStrategy',
+        'dps_performance_first': 'PERFORMANCE_FIRST',
+        'dps_random': 'RANDOM',
 
         // JobInstance
         'wfInstanceId': 'WorkflowInstanceId',

From 5c948cd93ec0c3d6d2ef437c19c041851d0d348e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E7=A6=8F=E7=85=A7?= <yangfuzhao@meituan.com>
Date: Fri, 5 Nov 2021 17:07:39 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=BC=95=E5=85=A5cron?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |   3 +
 src/components/easy-cron/format-date.js  |  37 +
 src/components/easy-cron/index.vue       | 269 +++++++
 src/components/easy-cron/input-cron.vue  | 122 +++
 src/components/easy-cron/tabs/const.js   |  21 +
 src/components/easy-cron/tabs/day.vue    | 138 ++++
 src/components/easy-cron/tabs/hour.vue   | 101 +++
 src/components/easy-cron/tabs/minute.vue |  94 +++
 src/components/easy-cron/tabs/mixin.js   | 151 ++++
 src/components/easy-cron/tabs/month.vue  | 101 +++
 src/components/easy-cron/tabs/second.vue | 103 +++
 src/components/easy-cron/tabs/week.vue   | 148 ++++
 src/components/easy-cron/tabs/year.vue   |  95 +++
 src/components/easy-cron/validator.js    |  51 ++
 src/components/views/JobManager.vue      | 920 ++++++++++++-----------
 15 files changed, 1926 insertions(+), 428 deletions(-)
 create mode 100644 src/components/easy-cron/format-date.js
 create mode 100644 src/components/easy-cron/index.vue
 create mode 100644 src/components/easy-cron/input-cron.vue
 create mode 100644 src/components/easy-cron/tabs/const.js
 create mode 100644 src/components/easy-cron/tabs/day.vue
 create mode 100644 src/components/easy-cron/tabs/hour.vue
 create mode 100644 src/components/easy-cron/tabs/minute.vue
 create mode 100644 src/components/easy-cron/tabs/mixin.js
 create mode 100644 src/components/easy-cron/tabs/month.vue
 create mode 100644 src/components/easy-cron/tabs/second.vue
 create mode 100644 src/components/easy-cron/tabs/week.vue
 create mode 100644 src/components/easy-cron/tabs/year.vue
 create mode 100644 src/components/easy-cron/validator.js

diff --git a/package.json b/package.json
index 180afd5..caf1f10 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
     "dagre-d3": "^0.6.4",
     "element-ui": "^2.13.2",
     "flyio": "^0.6.14",
+    "cron-parser": "^2.10.0",
+    "debounce": "^1.2.0",
+    "node-gyp": "^8.3.0",
     "power-workflow": "^0.0.11",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
diff --git a/src/components/easy-cron/format-date.js b/src/components/easy-cron/format-date.js
new file mode 100644
index 0000000..8a55974
--- /dev/null
+++ b/src/components/easy-cron/format-date.js
@@ -0,0 +1,37 @@
+const dateFormat = (date, block) => {
+  if (!date) {
+    return ''
+  }
+
+  let format = block || 'yyyy-MM-dd'
+
+  date = new Date(date)
+
+  const map = {
+    M: date.getMonth() + 1, // 月份
+    d: date.getDate(), // 日
+    h: date.getHours(), // 小时
+    m: date.getMinutes(), // 分
+    s: date.getSeconds(), // 秒
+    q: Math.floor((date.getMonth() + 3) / 3), // 季度
+    S: date.getMilliseconds() // 毫秒
+  }
+
+  format = format.replace(/([yMdhmsqS])+/g, (all, t) => {
+    let v = map[t]
+    if (v !== undefined) {
+      if (all.length > 1) {
+        v = `0${v}`
+        v = v.substr(v.length - 2)
+      }
+      return v
+    } else if (t === 'y') {
+      return (date.getFullYear().toString()).substr(4 - all.length)
+    }
+    return all
+  })
+
+  return format
+}
+
+export default dateFormat
diff --git a/src/components/easy-cron/index.vue b/src/components/easy-cron/index.vue
new file mode 100644
index 0000000..1f36249
--- /dev/null
+++ b/src/components/easy-cron/index.vue
@@ -0,0 +1,269 @@
+<template>
+  <el-card class="easy-cron">
+    <div class="content">
+      <div class="left">
+        <el-tabs size="small" v-model="curtab">
+          <el-tab-pane label="秒" name="second" v-if="!hideSecond"><second-ui v-model="second" :disabled="disabled"></second-ui></el-tab-pane>
+          <el-tab-pane label="分" name="minute"><minute-ui v-model="minute" :disabled="disabled"></minute-ui></el-tab-pane>
+          <el-tab-pane label="时" name="hour"><hour-ui v-model="hour" :disabled="disabled"></hour-ui></el-tab-pane>
+          <el-tab-pane label="日" name="day"><day-ui v-model="day" :week="week" :disabled="disabled"></day-ui></el-tab-pane>
+          <el-tab-pane label="月" name="month"><month-ui v-model="month" :disabled="disabled"></month-ui></el-tab-pane>
+          <el-tab-pane label="周" name="week"><week-ui v-model="week" :day="day" :disabled="disabled"></week-ui></el-tab-pane>
+          <el-tab-pane label="年" name="year" v-if="!hideYear && !hideSecond"><year-ui v-model="year" :disabled="disabled"></year-ui></el-tab-pane>
+        </el-tabs>
+      </div>
+      <div class="right">
+        <div class="field-list"><Table stripe :columns="columns" :data="tableData"
+          :show-header="false" size="small"></Table></div>
+        <div class="exe-pre">
+          <div class="exe-pre-panel">
+            <label class="p-left">执行时间</label>
+            <el-date-picker DatePicker type="datetime" v-model="startTime" class="p-right"
+              placeholder="选择执行开始时间"></el-date-picker>
+          </div>
+          <div class="exe-pre-panel">
+            <el-tooltip content="执行预览解析不含年参数" class="p-left">
+              <label>执行预览</label>
+            </el-tooltip>
+            <el-input type="textarea" :value="preTimeList" class="p-right" :rows="4" readonly />
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import SecondUi from './tabs/second'
+import MinuteUi from './tabs/minute'
+import HourUi from './tabs/hour'
+import DayUi from './tabs/day'
+import WeekUi from './tabs/week'
+import MonthUi from './tabs/month'
+import YearUi from './tabs/year'
+import CronParser from 'cron-parser'
+import dateFormat from './format-date'
+import { debounce } from 'debounce'
+
+export default {
+  name: 'easy-cron',
+  model: {
+    prop: 'cronValue',
+    event: 'change'
+  },
+  props: {
+    cronValue: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    exeStartTime: {
+      type: [Number, String, Object],
+      default: 0
+    },
+    hideSecond: {
+      type: Boolean,
+      default: false
+    },
+    hideYear: {
+      type: Boolean,
+      default: false
+    },
+    remote: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      curtab: this.hideSecond ? 'minute' : 'second',
+      second: '*',
+      minute: '*',
+      hour: '*',
+      day: '*',
+      month: '*',
+      week: '?',
+      year: '*',
+      startTime: new Date(),
+      preTimeList: '执行预览，会忽略年份参数',
+      columns: [{ title: ' ', width: '80', key: 'name' }, { title: ' ', key: 'value' }]
+    }
+  },
+  computed: {
+    tableData () {
+      let c = this.hideSecond ? [] : [{ name: '秒', value: this.second }]
+      c = c.concat([
+        { name: '分', value: this.minute },
+        { name: '时', value: this.hour },
+        { name: '日', value: this.day },
+        { name: '月', value: this.month },
+        { name: '周', value: this.week }
+      ])
+      return (this.hideSecond || this.hideYear) ? c.concat({ name: '表达式', value: this.cronValue_c })
+        : c.concat(
+          { name: '年', value: this.year },
+          { name: '表达式', value: this.cronValue_c },
+          { name: '表达式(不含年)', value: this.cronValue_c2 }
+        )
+    },
+    cronValue_c () {
+      let result = []
+      if (!this.hideSecond) result.push(this.second ? this.second : '*')
+      result.push(this.minute ? this.minute : '*')
+      result.push(this.hour ? this.hour : '*')
+      result.push(this.day ? this.day : '*')
+      result.push(this.month ? this.month : '*')
+      result.push(this.week ? this.week : '?')
+      if (!this.hideYear && !this.hideSecond) result.push(this.year ? this.year : '*')
+      return result.join(' ')
+    },
+    cronValue_c2 () {
+      const v = this.cronValue_c
+      if (this.hideYear || this.hideSecond) return v
+      const vs = v.split(' ')
+      return vs.slice(0, vs.length - 1).join(' ')
+    }
+  },
+  watch: {
+    cronValue (newVal) {
+      if (newVal === this.cronValue_c) {
+        // console.info('same cron value: ' + newVal)
+        return
+      }
+      this.formatValue()
+    },
+    cronValue_c (newVal) {
+      this.calTriggerList()
+      this.$emit('change', newVal)
+    },
+    exeStartTime () {
+      this.calStartTime()
+    },
+    startTime () {
+      this.calTriggerList()
+    }
+  },
+  methods: {
+    formatValue () {
+      // console.info(this.cronValue)
+      if (!this.cronValue) return
+      const values = this.cronValue.split(' ').filter(item => !!item)
+      if (!values || values.length <= 0) return
+      let i = 0
+      if (!this.hideSecond) this.second = values[i++]
+      if (values.length > i) this.minute = values[i++]
+      if (values.length > i) this.hour = values[i++]
+      if (values.length > i) this.day = values[i++]
+      if (values.length > i) this.month = values[i++]
+      if (values.length > i) this.week = values[i++]
+      if (values.length > i) this.year = values[i]
+    },
+    calTriggerList: debounce(function () {
+      this.calTriggerListInner()
+    }, 500),
+    calTriggerListInner () {
+      // 设置了回调函数
+      if (this.remote) {
+        this.remote(this.cronValue_c2, +this.startTime, v => { this.preTimeList = v })
+        return
+      }
+      // 去掉年份参数
+      const e = this.cronValue_c2
+      // console.info('>>>>>>' + e)
+      const format = 'yyyy-MM-dd hh:mm:ss'
+      const options = {
+        currentDate: dateFormat(this.startTime, format)
+      }
+      // console.info(options)
+      const iter = CronParser.parseExpression(e, options)
+      const result = []
+      for (let i = 0; i < 5; i++) {
+        result.push(dateFormat(new Date(iter.next()), format))
+      }
+      this.preTimeList = result.length > 0 ? result.join('\n') : '无执行时间'
+    },
+    calStartTime () {
+      if (!this.exeStartTime) {
+        this.startTime = new Date()
+        return
+      }
+      try {
+        this.startTime = new Date(this.exeStartTime)
+      } catch (e) {
+        this.startTime = new Date()
+      }
+    }
+  },
+  components: {
+    SecondUi,
+    MinuteUi,
+    HourUi,
+    DayUi,
+    WeekUi,
+    MonthUi,
+    YearUi
+  },
+  created () {
+    this.formatValue()
+    this.calStartTime()
+    this.$nextTick(() => {
+      this.calTriggerListInner()
+    })
+  }
+}
+</script>
+
+<style scoped>
+.easy-cron {
+  display: inline-block;
+  border: 1px solid #2d8cf0;
+}
+
+.content {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.left {
+  flex-basis: 60%;
+  width: 60%;
+  border: 1px solid transparent;
+  border-right-color: #2d8cf0;
+}
+
+.right {
+  flex-basis: 40%;
+  width: 40%;
+  border: 1px solid dimgray;
+}
+
+.ivu-table-small td {
+  height: 30px !important;
+}
+
+.exe-pre {
+  margin-top: 5px;
+}
+
+.exe-pre > div {
+  margin-top: 5px;
+}
+
+.exe-pre-panel {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.exe-pre-panel .p-left {
+  flex-basis: 80px;
+  flex-grow: 0;
+}
+
+.exe-pre-panel .p-right {
+  flex-basis: 100px;
+  flex-grow: 1;
+}
+</style>
diff --git a/src/components/easy-cron/input-cron.vue b/src/components/easy-cron/input-cron.vue
new file mode 100644
index 0000000..2372cc4
--- /dev/null
+++ b/src/components/easy-cron/input-cron.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="input-cron">
+    <el-input :placeholder="placeholder" style="width: auto" v-model="editCronValue" :disabled="disabled">
+      <a slot="append" @click="showConfigDlg" class="config-btn" :disabled="disabled">
+        <el-button type="text" @click="dialogVisible = true">配置cron</el-button>
+      </a>
+    </el-input>
+    <el-dialog title="Cron生成工具" :visible.sync="dialogVisible"  width="800px" :before-close="handleClose">
+      <span>
+        <easy-cron v-model="editCronValue" width="800px" :exeStartTime="exeStartTime"
+                   :hideYear="hideYear" :remote="remote" :hideSecond="hideSecond">
+        </easy-cron>
+      </span>
+      <span slot="footer" class="dialog-footer"/>
+    </el-dialog>
+<!--    <el-dialog v-model="show" title="配置Cron表达式" :closable="true" :width="`${width+50}`"-->
+<!--           :footer-hide="true">-->
+
+<!--        <easy-cron v-model="editCronValue" :style="`width: ${width}px`" :exeStartTime="exeStartTime"-->
+<!--                   :hideYear="hideYear" :remote="remote" :hideSecond="hideSecond"></easy-cron>-->
+<!--    </el-dialog>-->
+  </div>
+</template>
+
+<script>
+import EasyCron from './index'
+
+export default {
+  name: 'input-cron',
+  model: {
+    prop: 'cronValue',
+    event: 'change'
+  },
+  props: {
+    cronValue: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: Number,
+      default: 700
+    },
+    placeholder: {
+      type: String,
+      default: '请输入cron表达式'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    exeStartTime: {
+      type: [Number, String, Object],
+      default: 0
+    },
+    hideSecond: {
+      type: Boolean,
+      default: false
+    },
+    hideYear: {
+      type: Boolean,
+      default: false
+    },
+    remote: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      editCronValue: this.cronValue,
+      show: true,
+      dialogVisible: false
+    }
+  },
+  watch: {
+    cronValue (newVal) {
+      if (newVal === this.editCronValue) {
+        return
+      }
+      this.editCronValue = newVal
+    },
+    editCronValue (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  methods: {
+    showConfigDlg () {
+      if (!this.disabled) {
+        this.show = true
+      }
+    }
+  },
+  // handleClose(done) {
+  //   this.$confirm('确认关闭？')
+  //       .then(_ => {
+  //         done();
+  //       })
+  //       .catch(_ => {});
+  // },
+  components: {
+    EasyCron
+  }
+}
+</script>
+
+<style scoped>
+.input-cron, .input-ui {
+  display: inline-block;
+}
+
+.input-cron .ivu-input-wrapper {
+  width: 100% !important;
+}
+
+.config-btn {
+  cursor: pointer;
+}
+
+.config-btn:hover {
+  color: #2D8CF0;
+}
+</style>
diff --git a/src/components/easy-cron/tabs/const.js b/src/components/easy-cron/tabs/const.js
new file mode 100644
index 0000000..e076ee1
--- /dev/null
+++ b/src/components/easy-cron/tabs/const.js
@@ -0,0 +1,21 @@
+export const WEEK_MAP_EN = {
+  'SUN': '0',
+  'MON': '1',
+  'TUE': '2',
+  'WED': '3',
+  'THU': '4',
+  'FRI': '5',
+  'SAT': '6'
+}
+
+export const replaceWeekName = (c) => {
+  // console.info('after: ' + c)
+  if (c) {
+    Object.keys(WEEK_MAP_EN).forEach(k => {
+      c = c.replace(new RegExp(k, 'g'), WEEK_MAP_EN[k])
+    })
+    c = c.replace(new RegExp('7', 'g'), '0')
+  }
+  // console.info('after: ' + c)
+  return c
+}
diff --git a/src/components/easy-cron/tabs/day.vue b/src/components/easy-cron/tabs/day.vue
new file mode 100644
index 0000000..dd45b70
--- /dev/null
+++ b/src/components/easy-cron/tabs/day.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="config-list">
+    <el-radio-group v-model="type">
+    <div class="item">
+      <el-radio label="TYPE_NOT_SET" class="choice" :disabled="disableChoice">不设置</el-radio>
+      <span class="tip-info">日和周只能设置其中之一</span>
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_EVERY" class="choice" :disabled="disableChoice">每日</el-radio>
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_RANGE" class="choice" :disabled="disableChoice">区间</el-radio>
+       从<el-input :disabled="type!=TYPE_RANGE || disableChoice" :max="maxValue" :min="minValue" :precision="0"
+        class="w60" v-model="valueRange.start" />日
+       至<el-input :disabled="type!=TYPE_RANGE || disableChoice" :max="maxValue" :min="minValue" :precision="0"
+        class="w60" v-model="valueRange.end" />日
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_LOOP" class="choice" :disabled="disableChoice">循环</el-radio>
+      从<el-input :disabled="type!=TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueLoop.start" />日开始，间隔
+      <el-input :disabled="type!=TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueLoop.interval" />日
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_WORK" class="choice" :disabled="disableChoice">工作日</el-radio>
+      本月<el-input :disabled="type!=TYPE_WORK || disableChoice" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueWork" />日，最近的工作日
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_LAST" class="choice" :disabled="disableChoice">最后一日</el-radio>
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_SPECIFY" class="choice" :disabled="disableChoice">指定</el-radio>
+      <div class="list">
+        <el-checkbox-group v-model="valueList">
+          <el-checkbox class="list-check-item" v-for="i in maxValue"
+            :label="`${i}`" :key="`key-${i}`" :disabled="type!=TYPE_SPECIFY || disableChoice"></el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'day',
+  mixins: [mixin],
+  props: {
+    week: {
+      type: String,
+      default: '?'
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    disableChoice () {
+      return (this.week && this.week !== '?') || this.disabled
+    }
+  },
+  watch: {
+    value_c () {
+      // 数值变化
+      this.updateValue()
+    },
+    week () {
+      // console.info('new week: ' + newVal)
+      this.updateValue()
+    }
+  },
+  methods: {
+    updateValue () {
+      this.$emit('change', this.disableChoice ? '?' : this.value_c)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 1
+    this.maxValue = 31
+    this.valueRange.start = 1
+    this.valueRange.end = 31
+    this.valueLoop.start = 1
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style scoped>
+
+.config-list {
+  text-align: left;
+  margin: 0 10px 10px 10px;
+}
+
+.item {
+  margin-top: 5px;
+}
+
+.tip-info {
+  color: #999
+}
+
+.choice {
+  border: 1px solid transparent;
+  padding: 5px 8px;
+}
+
+.choice:hover {
+  border: 1px solid #2d8cf0;
+}
+
+.w60 {
+  width: 60px;
+}
+
+.ivu-input-number {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.list {
+  margin: 0 20px;
+}
+
+.list-check-item {
+  padding: 1px 3px;
+  width: 4em;
+}
+.el-radio-group {
+  font-size: 10px;
+}
+</style>
diff --git a/src/components/easy-cron/tabs/hour.vue b/src/components/easy-cron/tabs/hour.vue
new file mode 100644
index 0000000..9b6304e
--- /dev/null
+++ b/src/components/easy-cron/tabs/hour.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="config-list">
+    <el-radio-group v-model="type">
+    <div class="item">
+      <el-radio label="TYPE_EVERY" class="choice" :disabled="disabled">每时</el-radio>
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_RANGE" class="choice" :disabled="disabled">区间</el-radio>
+       从<el-input :disabled="type!=TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0"
+        class="w60" v-model="valueRange.start" />时
+       至<el-input :disabled="type!=TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0"
+        class="w60" v-model="valueRange.end" />时
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_LOOP" class="choice" :disabled="disabled">循环</el-radio>
+      从<el-input :disabled="type!=TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueLoop.start" />时开始，间隔
+      <el-input :disabled="type!=TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueLoop.interval" />时
+    </div>
+    <div class="item">
+      <el-radio  label="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</el-radio>
+      <div class="list">
+        <el-checkbox-group v-model="valueList">
+          <el-checkbox class="list-check-item" v-for="i in maxValue+1"
+            :label="`${i-1}`" :key="`key-${i-1}`" :disabled="type!=TYPE_SPECIFY || disabled"></el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'minute',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 0
+    this.maxValue = 23
+    this.valueRange.start = 0
+    this.valueRange.end = 23
+    this.valueLoop.start = 0
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style scoped>
+
+.config-list {
+  text-align: left;
+  margin: 0 10px 10px 10px;
+}
+
+.item {
+  margin-top: 5px;
+}
+
+.choice {
+  border: 1px solid transparent;
+  padding: 5px 8px;
+}
+
+.choice:hover {
+  border: 1px solid #2d8cf0;
+}
+
+.w60 {
+  width: 60px;
+}
+
+.ivu-input-number {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.list {
+  margin: 0 20px;
+}
+
+.list-check-item {
+  padding: 1px 3px;
+  width: 4em;
+}
+.el-radio-group {
+  font-size: 10px;
+}
+</style>
diff --git a/src/components/easy-cron/tabs/minute.vue b/src/components/easy-cron/tabs/minute.vue
new file mode 100644
index 0000000..dd83e95
--- /dev/null
+++ b/src/components/easy-cron/tabs/minute.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="config-list">
+    <el-radio-group v-model="type">
+      <div class="item">
+        <el-radio label="TYPE_EVERY" class="choice" :disabled="disabled">每分</el-radio>
+      </div>
+      <div class="item">
+        <el-radio label="TYPE_RANGE" class="choice" :disabled="disabled">区间</el-radio>
+        从<el-input :disabled="type!=TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0"
+                                  class="w60" v-model="valueRange.start" />分
+        至<el-input :disabled="type!=TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0"
+                          class="w60" v-model="valueRange.end" />分
+      </div>
+      <div class="item">
+        <el-radio label="TYPE_LOOP" class="choice" :disabled="disabled">循环</el-radio>
+        从
+        <el-input :disabled="type!=TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0"
+                         class="w60" v-model="valueLoop.start" />分开始，间隔
+        <el-input :disabled="type!=TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0"
+                         class="w60" v-model="valueLoop.interval" >分</el-input>
+      </div>
+      <div class="item">
+        <el-radio  label="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</el-radio>
+        <div class="list">
+          <el-checkbox-group v-model="valueList">
+            <el-checkbox class="list-check-item" v-for="i in maxValue+1"
+                         :label="`${i-1}`" :key="`key-${i-1}`" :disabled="type!=TYPE_SPECIFY || disabled"></el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+export default {
+  name: 'minute',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 0
+    this.maxValue = 59
+    this.valueRange.start = 0
+    this.valueRange.end = 59
+    this.valueLoop.start = 0
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style scoped>
+.config-list {
+  text-align: left;
+  margin: 0 10px 10px 10px;
+}
+.item {
+  margin-top: 5px;
+}
+.choice {
+  border: 1px solid transparent;
+  padding: 5px 8px;
+}
+.choice:hover {
+  border: 1px solid #2d8cf0;
+}
+.w60 {
+  width: 60px;
+}
+.ivu-input-number {
+  margin-left: 2px;
+  /*width: 60px;*/
+  margin-right: 2px;
+}
+.list {
+  margin: 0 20px;
+}
+.list-check-item {
+  padding: 1px 3px;
+  width: 4em;
+}
+.el-radio-group {
+  font-size: 10px;
+}
+</style>
diff --git a/src/components/easy-cron/tabs/mixin.js b/src/components/easy-cron/tabs/mixin.js
new file mode 100644
index 0000000..47504bb
--- /dev/null
+++ b/src/components/easy-cron/tabs/mixin.js
@@ -0,0 +1,151 @@
+// 主要用于日和星期的互斥使用
+const TYPE_NOT_SET = 'TYPE_NOT_SET'
+const TYPE_EVERY = 'TYPE_EVERY'
+const TYPE_RANGE = 'TYPE_RANGE'
+const TYPE_LOOP = 'TYPE_LOOP'
+const TYPE_WORK = 'TYPE_WORK'
+const TYPE_LAST = 'TYPE_LAST'
+const TYPE_SPECIFY = 'TYPE_SPECIFY'
+
+const DEFAULT_VALUE = '?'
+
+export default {
+  model: {
+    prop: 'prop',
+    event: 'change'
+  },
+  props: {
+    prop: {
+      type: String,
+      default: DEFAULT_VALUE
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    const type = TYPE_EVERY
+    return {
+      DEFAULT_VALUE,
+      // 类型
+      type,
+      // 启用日或者星期互斥用
+      TYPE_NOT_SET,
+      TYPE_EVERY,
+      TYPE_RANGE,
+      TYPE_LOOP,
+      TYPE_WORK,
+      TYPE_LAST,
+      TYPE_SPECIFY,
+      // 对于不同的类型，所定义的值也有所不同
+      valueRange: {
+        start: 0,
+        end: 0
+      },
+      valueLoop: {
+        start: 0,
+        interval: 1
+      },
+      valueWeek: {
+        start: 0,
+        end: 0
+      },
+      valueList: [],
+      valueWork: 1,
+      maxValue: 0,
+      minValue: 0
+    }
+  },
+  watch: {
+    prop (newVal) {
+      if (newVal === this.value_c) {
+        // console.info('skip ' + newVal)
+        return
+      }
+      this.parseProp(newVal)
+    }
+  },
+  computed: {
+    value_c () {
+      let result = []
+      switch (this.type) {
+        case TYPE_NOT_SET:
+          result.push('?')
+          break
+        case TYPE_EVERY:
+          result.push('*')
+          break
+        case TYPE_RANGE:
+          result.push(`${this.valueRange.start}-${this.valueRange.end}`)
+          break
+        case TYPE_LOOP:
+          result.push(`${this.valueLoop.start}/${this.valueLoop.interval}`)
+          break
+        case TYPE_WORK:
+          result.push(`${this.valueWork}W`)
+          break
+        case TYPE_LAST:
+          result.push('L')
+          break
+        case TYPE_SPECIFY:
+          result.push(this.valueList.join(','))
+          break
+        default:
+          result.push(this.DEFAULT_VALUE)
+          break
+      }
+      return result.length > 0 ? result.join('') : this.DEFAULT_VALUE
+    }
+  },
+  methods: {
+    parseProp (value) {
+      if (value === this.value_c) {
+        // console.info('same ' + value)
+        return
+      }
+      if (typeof (this.preProcessProp) === 'function') {
+        value = this.preProcessProp(value)
+      }
+      try {
+        if (!value || value === this.DEFAULT_VALUE) {
+          this.type = TYPE_EVERY
+        } else if (value.indexOf('?') >= 0) {
+          this.type = TYPE_NOT_SET
+        } else if (value.indexOf('-') >= 0) {
+          this.type = TYPE_RANGE
+          const values = value.split('-')
+          if (values.length >= 2) {
+            this.valueRange.start = parseInt(values[0])
+            this.valueRange.end = parseInt(values[1])
+          }
+        } else if (value.indexOf('/') >= 0) {
+          this.type = TYPE_LOOP
+          const values = value.split('/')
+          if (values.length >= 2) {
+            this.valueLoop.start = value[0] === '*' ? 0 : parseInt(values[0])
+            this.valueLoop.interval = parseInt(values[1])
+          }
+        } else if (value.indexOf('W') >= 0) {
+          this.type = TYPE_WORK
+          const values = value.split('W')
+          if (!values[0] && !isNaN(values[0])) {
+            this.valueWork = parseInt(values[0])
+          }
+        } else if (value.indexOf('L') >= 0) {
+          this.type = TYPE_LAST
+          const values = value.split('L')
+          this.valueLast = parseInt(values[0])
+        } else if (value.indexOf(',') >= 0 || !isNaN(value)) {
+          this.type = TYPE_SPECIFY
+          this.valueList = value.split(',').map(item => parseInt(item))
+        } else {
+          this.type = TYPE_EVERY
+        }
+      } catch (e) {
+        // console.info(e)
+        this.type = TYPE_EVERY
+      }
+    }
+  }
+}
diff --git a/src/components/easy-cron/tabs/month.vue b/src/components/easy-cron/tabs/month.vue
new file mode 100644
index 0000000..56abbb3
--- /dev/null
+++ b/src/components/easy-cron/tabs/month.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="config-list">
+    <el-radio-group v-model="type">
+    <div class="item">
+      <el-radio label="TYPE_EVERY" class="choice" :disabled="disabled">每月</el-radio>
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_RANGE" class="choice" :disabled="disabled">区间</el-radio>
+       从<el-input :disabled="type!=TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0"
+        class="w60" v-model="valueRange.start" />月
+       至<el-input :disabled="type!=TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0"
+        class="w60" v-model="valueRange.end" />月
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_LOOP" class="choice" :disabled="disabled">循环</el-radio>
+      从<el-input :disabled="type!=TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueLoop.start" />月开始，间隔
+      <el-input :disabled="type!=TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueLoop.interval" />月
+    </div>
+    <div class="item">
+      <el-radio  label="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</el-radio>
+      <div class="list">
+        <el-checkbox-group v-model="valueList">
+          <el-checkbox class="list-check-item" v-for="i in maxValue"
+            :label="`${i}`" :key="`key-${i}`" :disabled="type!=TYPE_SPECIFY || disabled"></el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'month',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 1
+    this.maxValue = 12
+    this.valueRange.start = 1
+    this.valueRange.end = 12
+    this.valueLoop.start = 1
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style scoped>
+
+.config-list {
+  text-align: left;
+  margin: 0 10px 10px 10px;
+}
+
+.item {
+  margin-top: 5px;
+}
+
+.choice {
+  border: 1px solid transparent;
+  padding: 5px 8px;
+}
+
+.choice:hover {
+  border: 1px solid #2d8cf0;
+}
+
+.w60 {
+  width: 60px;
+}
+
+.ivu-input-number {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.list {
+  margin: 0 20px;
+}
+
+.list-check-item {
+  padding: 1px 3px;
+  width: 4em;
+}
+.el-radio-group {
+  font-size: 10px;
+}
+</style>
diff --git a/src/components/easy-cron/tabs/second.vue b/src/components/easy-cron/tabs/second.vue
new file mode 100644
index 0000000..9580c9f
--- /dev/null
+++ b/src/components/easy-cron/tabs/second.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="config-list">
+    <el-radio-group v-model="type">
+    <div class="item">
+      <el-radio label="TYPE_EVERY" class="choice" :disabled="disabled">每秒</el-radio>
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_RANGE" class="choice" :disabled="disabled">区间</el-radio>
+       从<el-input :disabled="type!=TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0"
+        class="w60" v-model="valueRange.start" />秒
+       至<el-input :disabled="type!=TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0"
+        class="w60" v-model="valueRange.end" />秒
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_LOOP" class="choice" :disabled="disabled">循环</el-radio>
+      从<el-input :disabled="type!=TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueLoop.start" />秒开始，间隔
+      <el-input :disabled="type!=TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueLoop.interval" />秒
+    </div>
+    <div class="item">
+      <el-radio  label="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</el-radio>
+      <div class="list">
+        <el-checkbox-group v-model="valueList">
+          <el-checkbox class="list-check-item" v-for="i in maxValue+1"
+            :label="`${i-1}`" :key="`key-${i-1}`" :disabled="type!=TYPE_SPECIFY || disabled"></el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'second',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 0
+    this.maxValue = 59
+    this.valueRange.start = 0
+    this.valueRange.end = 59
+    this.valueLoop.start = 0
+    this.valueLoop.interval = 1
+    // console.info('created')
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style scoped>
+
+.config-list {
+  text-align: left;
+  margin: 0 10px 10px 10px;
+}
+
+.item {
+  margin-top: 5px;
+}
+
+.choice {
+  border: 1px solid transparent;
+  padding: 5px 8px;
+}
+
+.choice:hover {
+  border: 1px solid #2d8cf0;
+}
+
+.w60 {
+  width: 60px;
+}
+
+.ivu-input-number {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.list {
+  margin: 0 20px;
+}
+
+.list-check-item {
+  padding: 1px 3px;
+  width: 4em;
+}
+.el-radio-group {
+  font-size: 10px;
+}
+
+</style>
diff --git a/src/components/easy-cron/tabs/week.vue b/src/components/easy-cron/tabs/week.vue
new file mode 100644
index 0000000..d98b146
--- /dev/null
+++ b/src/components/easy-cron/tabs/week.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="config-list">
+    <el-radio-group v-model="type">
+    <div class="item">
+      <el-radio label="TYPE_NOT_SET" class="choice" :disabled="disableChoice">不设置</el-radio>
+      <span class="tip-info">日和周只能设置其中之一</span>
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_RANGE" class="choice" :disabled="disableChoice">区间</el-radio>
+       从<el-select v-model="valueRange.start"  class="w80" :disabled="type!=TYPE_RANGE || disableChoice">
+        <el-option v-for="(v, k) of WEEK_MAP" :value="v" :key="`week-pre-Lf13-${v}`">{{ k }}</el-option>
+      </el-select>
+       至<el-select v-model="valueRange.end"  class="w80" :disabled="type!=TYPE_RANGE || disableChoice">
+        <el-option v-for="(v, k) of WEEK_MAP" :value="v" :key="`week-next-1fas-${v}`">{{ k }}</el-option>
+      </el-select>
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_LOOP" class="choice" :disabled="disableChoice">循环</el-radio>
+      从<el-select v-model="valueLoop.start"  class="w80" :disabled="type!=TYPE_LOOP || disableChoice">
+        <el-option v-for="(v, k) of WEEK_MAP" :value="v" :key="`week-pre-Lf13-${v}`">{{ k }}</el-option>
+      </el-select>开始，间隔
+      <el-input :disabled="type!=TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0"
+       class="w60" v-model="valueLoop.interval" /> 天
+    </div>
+    <div class="item">
+      <el-radio  label="TYPE_SPECIFY" class="choice" :disabled="disableChoice">指定</el-radio>
+      <div class="list">
+        <el-checkbox-group v-model="valueList">
+          <el-checkbox class="list-check-item" v-for="(v, k) of WEEK_MAP"
+            :label="`${v}`" :key="`key-${v}`" :disabled="type!=TYPE_SPECIFY || disableChoice"><span>{{k}}</span></el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+import { WEEK_MAP_EN, replaceWeekName } from './const.js'
+
+const WEEK_MAP = {
+  '周日': 0,
+  '周一': 1,
+  '周二': 2,
+  '周三': 3,
+  '周四': 4,
+  '周五': 5,
+  '周六': 6
+}
+
+export default {
+  name: 'week',
+  mixins: [mixin],
+  props: {
+    day: {
+      type: String,
+      default: '*'
+    }
+  },
+  data () {
+    return {
+      WEEK_MAP,
+      WEEK_MAP_EN
+    }
+  },
+  computed: {
+    disableChoice () {
+      return (this.day && this.day !== '?') || this.disabled
+    }
+  },
+  watch: {
+    value_c () {
+      // 如果设置日，那么星期就直接不设置
+      this.updateValue()
+    },
+    day () {
+      // console.info('new day: ' + newVal)
+      this.updateValue()
+    }
+  },
+  methods: {
+    updateValue () {
+      this.$emit('change', this.disableChoice ? '?' : this.value_c)
+    },
+    preProcessProp (c) {
+      return replaceWeekName(c)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    // 0,7表示周日 1表示周一
+    this.minValue = 0
+    this.maxValue = 6
+    this.valueRange.start = 0
+    this.valueRange.end = 6
+    this.valueLoop.start = 2
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style scoped>
+
+.config-list {
+  text-align: left;
+  margin: 0 10px 10px 10px;
+}
+
+.item {
+  margin-top: 5px;
+}
+
+.tip-info {
+  color: #999
+}
+
+.choice {
+  border: 1px solid transparent;
+  padding: 5px 8px;
+}
+
+.choice:hover {
+  border: 1px solid #2d8cf0;
+}
+
+.w80 {
+  width: 80px;
+}
+
+.ivu-input-number, .ivu-select {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.list {
+  margin: 0 20px;
+}
+
+.list-check-item {
+  padding: 1px 3px;
+  width: 4em;
+}
+.el-radio-group {
+  font-size: 10px;
+}
+</style>
diff --git a/src/components/easy-cron/tabs/year.vue b/src/components/easy-cron/tabs/year.vue
new file mode 100644
index 0000000..0117f1f
--- /dev/null
+++ b/src/components/easy-cron/tabs/year.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="config-list">
+    <el-radio-group v-model="type">
+    <div class="item">
+      <el-radio label="TYPE_EVERY" class="choice" :disabled="disabled">每年</el-radio>
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_RANGE" class="choice" :disabled="disabled">区间</el-radio>
+       从<el-input :disabled="type!=TYPE_RANGE || disabled" :min="0" :precision="0"
+        class="w60" v-model="valueRange.start" />年
+       至<el-input :disabled="type!=TYPE_RANGE || disabled" :min="1" :precision="0"
+        class="w60" v-model="valueRange.end" />年
+    </div>
+    <div class="item">
+      <el-radio label="TYPE_LOOP" class="choice" :disabled="disabled">循环</el-radio>
+      从<el-input :disabled="type!=TYPE_LOOP || disabled" :min="0" :precision="0"
+       class="w60" v-model="valueLoop.start" />年开始，间隔
+      <el-input :disabled="type!=TYPE_LOOP || disabled" :min="1" :precision="0"
+       class="w60" v-model="valueLoop.interval" />年
+    </div>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'year',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      // console.info('change:' + newVal)
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    const nowYear = (new Date()).getFullYear()
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 0
+    this.maxValue = 0
+    this.valueRange.start = nowYear
+    this.valueRange.end = nowYear + 100
+    this.valueLoop.start = nowYear
+    this.valueLoop.interval = 1
+    // console.info('created')
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style scoped>
+
+.config-list {
+  text-align: left;
+  margin: 0 10px 10px 10px;
+}
+
+.item {
+  margin-top: 5px;
+}
+
+.choice {
+  border: 1px solid transparent;
+  padding: 5px 8px;
+}
+
+.choice:hover {
+  border: 1px solid #2d8cf0;
+}
+
+.w60 {
+  width: 60px;
+}
+
+.ivu-input-number {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.list {
+  margin: 0 20px;
+}
+
+.list-check-item {
+  padding: 1px 3px;
+  width: 4em;
+}
+.el-radio-group {
+  font-size: 10px;
+}
+</style>
diff --git a/src/components/easy-cron/validator.js b/src/components/easy-cron/validator.js
new file mode 100644
index 0000000..80d7890
--- /dev/null
+++ b/src/components/easy-cron/validator.js
@@ -0,0 +1,51 @@
+import CronParser from 'cron-parser'
+import { replaceWeekName } from './tabs/const'
+
+export default (rule, value, callback) => {
+  // 没填写就不校验
+  if (!value) {
+    callback()
+    return true
+  }
+  const values = value.split(' ').filter(item => !!item)
+  if (values.length > 7) {
+    callback(new Error('cron表达式最多7项'))
+    return false
+  }
+  // 检查第7项
+  let e = value
+  if (values.length === 7) {
+    const year = replaceWeekName(values[6])
+    if (year !== '*' && year !== '?') {
+      let yearValues = []
+      if (year.indexOf('-') >= 0) {
+        yearValues = year.split('-')
+      } else if (year.indexOf('/')) {
+        yearValues = year.split('/')
+      } else {
+        yearValues = [year]
+      }
+      // console.info(yearValues)
+      // 判断是否都是数字
+      const checkYear = yearValues.some(item => isNaN(item))
+      if (checkYear) {
+        callback(new Error('cron表达式参数[年]错误:' + year))
+        return false
+      }
+    }
+    // 取其中的前六项
+    e = values.slice(0, 6).join(' ')
+  }
+  // 6位 没有年
+  // 5位没有秒、年
+  let result = true
+  try {
+    const iter = CronParser.parseExpression(e)
+    iter.next()
+    callback()
+  } catch (e) {
+    callback(new Error('cron表达式错误:' + e))
+    result = false
+  }
+  return result
+}
diff --git a/src/components/views/JobManager.vue b/src/components/views/JobManager.vue
index 7f03f65..36b9ca9 100644
--- a/src/components/views/JobManager.vue
+++ b/src/components/views/JobManager.vue
@@ -1,454 +1,518 @@
 <template>
-    <div id="job_manager">
+  <div id="job_manager">
 
-        <!--第一行，条件搜索栏（row布局：gutter代表栅格间隔，span代表占用格数）-->
-        <el-row :gutter="20">
+    <!--第一行，条件搜索栏（row布局：gutter代表栅格间隔，span代表占用格数）-->
+    <el-row :gutter="20">
 
-            <!-- 左侧搜索栏，占地面积 20/24 -->
-            <el-col :span="20">
-                <el-form :inline="true" :model="jobQueryContent" class="el-form--inline">
-                    <el-form-item :label="$t('message.jobId')">
-                        <el-input v-model="jobQueryContent.jobId" :placeholder="$t('message.jobId')"/>
-                    </el-form-item>
-                    <el-form-item :label="$t('message.keyword')">
-                        <el-input v-model="jobQueryContent.keyword" :placeholder="$t('message.keyword')"/>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button type="primary" @click="listJobInfos">{{$t('message.query')}}</el-button>
-                        <el-button type="cancel" @click="onClickReset">{{$t('message.reset')}}</el-button>
-                    </el-form-item>
-                </el-form>
-            </el-col>
+      <!-- 左侧搜索栏，占地面积 20/24 -->
+      <el-col :span="20">
+        <el-form :inline="true" :model="jobQueryContent" class="el-form--inline">
+          <el-form-item :label="$t('message.jobId')">
+            <el-input v-model="jobQueryContent.jobId" :placeholder="$t('message.jobId')"/>
+          </el-form-item>
+          <el-form-item :label="$t('message.keyword')">
+            <el-input v-model="jobQueryContent.keyword" :placeholder="$t('message.keyword')"/>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="listJobInfos">{{ $t('message.query') }}</el-button>
+            <el-button type="cancel" @click="onClickReset">{{ $t('message.reset') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
 
-            <!-- 右侧新增任务按钮，占地面积 4/24 -->
-            <el-col :span="4">
-                <div style="float:right;padding-right:10px">
-                <el-button type="primary" @click="onClickNewJob">{{$t('message.newJob')}}</el-button>
-                </div>
-            </el-col>
-        </el-row>
+      <!-- 右侧新增任务按钮，占地面积 4/24 -->
+      <el-col :span="4">
+        <div style="float:right;padding-right:10px">
+          <el-button type="primary" @click="onClickNewJob">{{ $t('message.newJob') }}</el-button>
+        </div>
+      </el-col>
+    </el-row>
 
-        <!--第二行，任务数据表格-->
-        <el-row>
-            <el-table :data="jobInfoPageResult.data" style="width: 100%">
-                <el-table-column prop="id" :label="$t('message.jobId')" width="80"/>
-                <el-table-column prop="jobName" :label="$t('message.jobName')" />
-                <el-table-column :label="$t('message.scheduleInfo')" >
-                    <template slot-scope="scope">
-                        {{scope.row.timeExpressionType}}  {{scope.row.timeExpression}}
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('message.executeType')">
-                    <template slot-scope="scope">
-                        {{translateExecuteType(scope.row.executeType)}}
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('message.processorType')">
-                    <template slot-scope="scope">
-                        {{translateProcessorType(scope.row.processorType)}}
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('message.status')" width="80">
-                    <template slot-scope="scope">
-                        <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949" @change="changeJobStatus(scope.row)"/>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('message.operation')" width="150">
-                    <template slot-scope="scope">
-                        <el-button size="mini" type="text" @click="onClickModify(scope.row)">{{$t('message.edit')}}</el-button>
-                        <el-button size="mini" type="text" @click="onClickRun(scope.row)">{{$t('message.run')}}</el-button>
-                        <el-dropdown trigger="click">
-                            <el-button size="mini" type="text">{{$t('message.more')}}</el-button>
-                            <el-dropdown-menu slot="dropdown">
-                                <el-dropdown-item>
-                                    <el-button size="mini" type="text" @click="onClickRunHistory(scope.row)">{{$t('message.runHistory')}}</el-button>
-                                </el-dropdown-item>
-                                <el-dropdown-item>
-                                  <el-button size="mini" type="text" @click="onClickCopyJob(scope.row)">{{$t('message.copy')}}</el-button>
-                                </el-dropdown-item>
-                                <el-dropdown-item>
-                                    <el-button size="mini" type="text" @click="onClickDeleteJob(scope.row)">{{$t('message.delete')}}</el-button>
-                                </el-dropdown-item>
-                            </el-dropdown-menu>
-                        </el-dropdown>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </el-row>
+    <!--第二行，任务数据表格-->
+    <el-row>
+      <el-table :data="jobInfoPageResult.data" style="width: 100%">
+        <el-table-column prop="id" :label="$t('message.jobId')" width="80"/>
+        <el-table-column prop="jobName" :label="$t('message.jobName')"/>
+        <el-table-column :label="$t('message.scheduleInfo')">
+          <template slot-scope="scope">
+            {{ scope.row.timeExpressionType }} {{ scope.row.timeExpression }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('message.executeType')">
+          <template slot-scope="scope">
+            {{ translateExecuteType(scope.row.executeType) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('message.processorType')">
+          <template slot-scope="scope">
+            {{ translateProcessorType(scope.row.processorType) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('message.status')" width="80">
+          <template slot-scope="scope">
+            <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949"
+                       @change="changeJobStatus(scope.row)"/>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('message.operation')" width="150">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="onClickModify(scope.row)">{{ $t('message.edit') }}</el-button>
+            <el-button size="mini" type="text" @click="onClickRun(scope.row)">{{ $t('message.run') }}</el-button>
+            <el-dropdown trigger="click">
+              <el-button size="mini" type="text">{{ $t('message.more') }}</el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <el-button size="mini" type="text" @click="onClickRunHistory(scope.row)">
+                    {{ $t('message.runHistory') }}
+                  </el-button>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <el-button size="mini" type="text" @click="onClickCopyJob(scope.row)">{{ $t('message.copy') }}
+                  </el-button>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <el-button size="mini" type="text" @click="onClickDeleteJob(scope.row)">{{ $t('message.delete') }}
+                  </el-button>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
 
-        <!-- 第三行，分页插件 -->
-        <el-row>
-            <el-pagination
-                    layout="prev, pager, next"
-                    :total="this.jobInfoPageResult.totalItems"
-                    :page-size="this.jobInfoPageResult.pageSize"
-                    @current-change="onClickChangePage"
-                    :hide-on-single-page="true"/>
-        </el-row>
+    <!-- 第三行，分页插件 -->
+    <el-row>
+      <el-pagination
+          layout="prev, pager, next"
+          :total="this.jobInfoPageResult.totalItems"
+          :page-size="this.jobInfoPageResult.pageSize"
+          @current-change="onClickChangePage"
+          :hide-on-single-page="true"/>
+    </el-row>
 
 
-        <el-dialog :close-on-click-modal="false" :visible.sync="modifiedJobFormVisible" width="60%">
-            <el-form :model="modifiedJobForm" label-width="120px">
+    <el-dialog :close-on-click-modal="false" :visible.sync="modifiedJobFormVisible" width="60%">
+      <el-form :model="modifiedJobForm" label-width="120px">
 
-                <el-form-item :label="$t('message.jobName')">
-                    <el-input v-model="modifiedJobForm.jobName"/>
-                </el-form-item>
-                <el-form-item :label="$t('message.jobDescription')">
-                    <el-input v-model="modifiedJobForm.jobDescription"/>
-                </el-form-item>
-                <el-form-item :label="$t('message.jobParams')">
-                    <el-input v-model="modifiedJobForm.jobParams"/>
-                </el-form-item>
-                <el-form-item :label="$t('message.scheduleInfo')">
-                    <el-row>
-                        <el-col :span="8">
-                            <el-select v-model="modifiedJobForm.timeExpressionType" :placeholder="$t('message.timeExpressionType')">
-                                <el-option
-                                        v-for="item in timeExpressionTypeOptions"
-                                        :key="item.key"
-                                        :label="item.label"
-                                        :value="item.key">
-                                </el-option>
-                            </el-select>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-input v-model="modifiedJobForm.timeExpression" :placeholder="$t('message.timeExpressionPlaceHolder')" />
-                        </el-col>
-                        <el-col :span="4">
-                            <el-button type="text" @click="onClickValidateTimeExpression" style="padding-left: 10px">{{$t('message.validateTimeExpression')}}</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form-item>
-                <el-form-item :label="$t('message.executeConfig')">
-                    <el-row>
-                        <el-col :span="5">
-                            <el-select v-model="modifiedJobForm.executeType" :placeholder="$t('message.executeType')">
-                                <el-option
-                                        v-for="item in executeTypeOptions"
-                                        :key="item.key"
-                                        :label="item.label"
-                                        :value="item.key">
-                                </el-option>
-                            </el-select>
-                        </el-col>
+        <el-form-item :label="$t('message.jobName')">
+          <el-input v-model="modifiedJobForm.jobName"/>
+        </el-form-item>
+        <el-form-item :label="$t('message.jobDescription')">
+          <el-input v-model="modifiedJobForm.jobDescription"/>
+        </el-form-item>
+        <el-form-item :label="$t('message.jobParams')">
+          <el-input v-model="modifiedJobForm.jobParams"/>
+        </el-form-item>
+        <el-form-item :label="$t('message.scheduleInfo')">
+          <el-row>
+            <el-col :span="8">
+              <el-select v-model="modifiedJobForm.timeExpressionType" :placeholder="$t('message.timeExpressionType')">
+                <el-option
+                    v-for="item in timeExpressionTypeOptions"
+                    :key="item.key"
+                    :label="item.label"
+                    :value="item.key">
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="12">
+              <div>
+                <input-cron type="text" v-model="modifiedJobForm.timeExpression" :placeholder="$t(modifiedJobForm.timeExpression)"/>
+              </div>
+            </el-col>
+<!--            <el-col :span="4">-->
+<!--              <el-button type="text" @click="onClickValidateTimeExpression" style="padding-left: 10px">-->
+<!--                {{ $t('message.validateTimeExpression') }}-->
+<!--              </el-button>-->
+<!--            </el-col>-->
+          </el-row>
+        </el-form-item>
+        <el-form-item :label="$t('message.executeConfig')">
+          <el-row>
+            <el-col :span="5">
+              <el-select v-model="modifiedJobForm.executeType" :placeholder="$t('message.executeType')">
+                <el-option
+                    v-for="item in executeTypeOptions"
+                    :key="item.key"
+                    :label="item.label"
+                    :value="item.key">
+                </el-option>
+              </el-select>
+            </el-col>
 
-                        <el-col :span="6">
-                            <el-select v-model="modifiedJobForm.processorType" :placeholder="$t('message.processorType')">
-                                <el-option
-                                        v-for="item in processorTypeOptions"
-                                        :key="item.key"
-                                        :label="item.label"
-                                        :value="item.key">
-                                </el-option>
-                            </el-select>
-                        </el-col>
+            <el-col :span="6">
+              <el-select v-model="modifiedJobForm.processorType" :placeholder="$t('message.processorType')">
+                <el-option
+                    v-for="item in processorTypeOptions"
+                    :key="item.key"
+                    :label="item.label"
+                    :value="item.key">
+                </el-option>
+              </el-select>
+            </el-col>
 
-                        <el-col :span="13">
-                            <el-input v-model="modifiedJobForm.processorInfo" :placeholder="verifyPlaceholder(modifiedJobForm.processorType)" />
-                        </el-col>
-                    </el-row>
-                </el-form-item>
-                <el-form-item :label="$t('message.runtimeConfig')">
-                    <el-row>
-                        <el-col :span="8">
-                            <el-input :placeholder="$t('message.maxInstanceNum')" v-model="modifiedJobForm.maxInstanceNum" class="ruleContent">
-                                <template slot="prepend">{{$t('message.maxInstanceNum')}}</template>
-                            </el-input>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-input :placeholder="$t('message.threadConcurrency')" v-model="modifiedJobForm.concurrency" class="ruleContent">
-                                <template slot="prepend">{{$t('message.threadConcurrency')}}</template>
-                            </el-input>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-input :placeholder="$t('message.timeout')" v-model="modifiedJobForm.instanceTimeLimit" class="ruleContent">
-                                <template slot="prepend">{{$t('message.timeout')}}</template>
-                            </el-input>
-                        </el-col>
-                    </el-row>
-                </el-form-item>
-                <el-form-item :label="$t('message.retryConfig')">
-                    <el-row>
-                        <el-col :span="12">
-                            <el-input :placeholder="$t('message.taskRetryTimes')" v-model="modifiedJobForm.instanceRetryNum" class="ruleContent">
-                                <template slot="prepend">{{$t('message.taskRetryTimes')}}</template>
-                            </el-input>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-input :placeholder="$t('message.subTaskRetryTimes')" v-model="modifiedJobForm.taskRetryNum" class="ruleContent">
-                                <template slot="prepend">{{$t('message.subTaskRetryTimes')}}</template>
-                            </el-input>
-                        </el-col>
-                    </el-row>
-                </el-form-item>
-                <el-form-item :label="$t('message.workerConfig')">
-                    <el-row>
-                        <el-col :span="8">
-                            <el-input :placeholder="$t('message.minCPU')" v-model="modifiedJobForm.minCpuCores" class="ruleContent">
-                                <template slot="prepend">{{$t('message.minCPU')}}</template>
-                            </el-input>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-input :placeholder="$t('message.minMemory')" v-model="modifiedJobForm.minMemorySpace" class="ruleContent">
-                                <template slot="prepend">{{$t('message.minMemory')}}</template>
-                            </el-input>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-input :placeholder="$t('message.minDisk')" v-model="modifiedJobForm.minDiskSpace" class="ruleContent">
-                                <template slot="prepend">{{$t('message.minDisk')}}</template>
-                            </el-input>
-                        </el-col>
-                    </el-row>
-                </el-form-item>
-                <el-form-item :label="$t('message.clusterConfig')">
-                    <el-row>
-                        <el-col :span="12">
-                            <el-input :placeholder="$t('message.designatedWorkerAddressPLH')" v-model="modifiedJobForm.designatedWorkers" class="ruleContent">
-                                <template slot="prepend">{{$t('message.designatedWorkerAddress')}}</template>
-                            </el-input>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-input :placeholder="$t('message.maxWorkerNumPLH')" v-model="modifiedJobForm.maxWorkerCount" class="ruleContent">
-                                <template slot="prepend">{{$t('message.maxWorkerNum')}}</template>
-                            </el-input>
-                        </el-col>
-                        <el-col :span="4">
-                          <el-select v-model="modifiedJobForm.dispatchStrategy" filterable :placeholder="$t('message.dps_title')">
-                            <el-option
-                                v-for="strategy in dispatchStrategyOptions"
-                                :key="strategy.key"
-                                :label="strategy.label"
-                                :value="strategy.key">
-                            </el-option>
-                          </el-select>
-                        </el-col>
-                    </el-row>
-                </el-form-item>
-                <el-form-item :label="$t('message.alarmConfig')">
-                    <el-select v-model="modifiedJobForm.notifyUserIds" multiple filterable :placeholder="$t('message.alarmSelectorPLH')">
-                        <el-option
-                                v-for="user in userList"
-                                :key="user.id"
-                                :label="user.username"
-                                :value="user.id">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
+            <el-col :span="13">
+              <el-input v-model="modifiedJobForm.processorInfo"
+                        :placeholder="verifyPlaceholder(modifiedJobForm.processorType)"/>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item :label="$t('message.runtimeConfig')">
+          <el-row>
+            <el-col :span="8">
+              <el-input :placeholder="$t('message.maxInstanceNum')" v-model="modifiedJobForm.maxInstanceNum"
+                        class="ruleContent">
+                <template slot="prepend">{{ $t('message.maxInstanceNum') }}</template>
+              </el-input>
+            </el-col>
+            <el-col :span="8">
+              <el-input :placeholder="$t('message.threadConcurrency')" v-model="modifiedJobForm.concurrency"
+                        class="ruleContent">
+                <template slot="prepend">{{ $t('message.threadConcurrency') }}</template>
+              </el-input>
+            </el-col>
+            <el-col :span="8">
+              <el-input :placeholder="$t('message.timeout')" v-model="modifiedJobForm.instanceTimeLimit"
+                        class="ruleContent">
+                <template slot="prepend">{{ $t('message.timeout') }}</template>
+              </el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item :label="$t('message.retryConfig')">
+          <el-row>
+            <el-col :span="12">
+              <el-input :placeholder="$t('message.taskRetryTimes')" v-model="modifiedJobForm.instanceRetryNum"
+                        class="ruleContent">
+                <template slot="prepend">{{ $t('message.taskRetryTimes') }}</template>
+              </el-input>
+            </el-col>
+            <el-col :span="12">
+              <el-input :placeholder="$t('message.subTaskRetryTimes')" v-model="modifiedJobForm.taskRetryNum"
+                        class="ruleContent">
+                <template slot="prepend">{{ $t('message.subTaskRetryTimes') }}</template>
+              </el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item :label="$t('message.workerConfig')">
+          <el-row>
+            <el-col :span="8">
+              <el-input :placeholder="$t('message.minCPU')" v-model="modifiedJobForm.minCpuCores" class="ruleContent">
+                <template slot="prepend">{{ $t('message.minCPU') }}</template>
+              </el-input>
+            </el-col>
+            <el-col :span="8">
+              <el-input :placeholder="$t('message.minMemory')" v-model="modifiedJobForm.minMemorySpace"
+                        class="ruleContent">
+                <template slot="prepend">{{ $t('message.minMemory') }}</template>
+              </el-input>
+            </el-col>
+            <el-col :span="8">
+              <el-input :placeholder="$t('message.minDisk')" v-model="modifiedJobForm.minDiskSpace" class="ruleContent">
+                <template slot="prepend">{{ $t('message.minDisk') }}</template>
+              </el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item :label="$t('message.clusterConfig')">
+          <el-row>
+            <el-col :span="12">
+              <el-input :placeholder="$t('message.designatedWorkerAddressPLH')"
+                        v-model="modifiedJobForm.designatedWorkers" class="ruleContent">
+                <template slot="prepend">{{ $t('message.designatedWorkerAddress') }}</template>
+              </el-input>
+            </el-col>
+            <el-col :span="8">
+              <el-input :placeholder="$t('message.maxWorkerNumPLH')" v-model="modifiedJobForm.maxWorkerCount"
+                        class="ruleContent">
+                <template slot="prepend">{{ $t('message.maxWorkerNum') }}</template>
+              </el-input>
+            </el-col>
+            <el-col :span="4">
+              <el-select v-model="modifiedJobForm.dispatchStrategy" filterable :placeholder="$t('message.dps_title')">
+                <el-option
+                    v-for="strategy in dispatchStrategyOptions"
+                    :key="strategy.key"
+                    :label="strategy.label"
+                    :value="strategy.key">
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item :label="$t('message.alarmConfig')">
+          <el-select v-model="modifiedJobForm.notifyUserIds" multiple filterable
+                     :placeholder="$t('message.alarmSelectorPLH')">
+            <el-option
+                v-for="user in userList"
+                :key="user.id"
+                :label="user.username"
+                :value="user.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
 
-                <el-form-item>
-                    <el-button type="primary" @click="saveJob">{{$t('message.save')}}</el-button>
-                    <el-button @click="modifiedJobFormVisible = false">{{$t('message.cancel')}}</el-button>
-                </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="saveJob">{{ $t('message.save') }}</el-button>
+          <el-button @click="modifiedJobFormVisible = false">{{ $t('message.cancel') }}</el-button>
+        </el-form-item>
 
-            </el-form>
-        </el-dialog>
+      </el-form>
+    </el-dialog>
 
-        <el-dialog :close-on-click-modal="false" :visible.sync="timeExpressionValidatorVisible" v-if='timeExpressionValidatorVisible'>
-            <TimeExpressionValidator :time-expression="modifiedJobForm.timeExpression" :time-expression-type="modifiedJobForm.timeExpressionType"/>
-        </el-dialog>
-    </div>
+    <el-dialog :close-on-click-modal="false" :visible.sync="timeExpressionValidatorVisible"
+               v-if='timeExpressionValidatorVisible'>
+      <TimeExpressionValidator :time-expression="modifiedJobForm.timeExpression"
+                               :time-expression-type="modifiedJobForm.timeExpressionType"/>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-    import TimeExpressionValidator from "../common/TimeExpressionValidator";
-    export default {
-        name: "JobManager",
-        components: {TimeExpressionValidator},
-        data() {
-            return {
-                modifiedJobFormVisible: false,
-                // 新建任务对象
-                modifiedJobForm: {
-                    id: undefined,
-                    jobName: "",
-                    jobDescription: "",
-                    appId: this.$store.state.appInfo.id,
-                    jobParams: "",
-                    timeExpressionType: "",
-                    timeExpression: "",
-                    executeType: "",
-                    processorType: "",
-                    processorInfo: "",
-                    maxInstanceNum: 0,
-                    concurrency: 5,
-                    instanceTimeLimit: 0,
-                    instanceRetryNum: 0,
-                    taskRetryNum: 1,
+import TimeExpressionValidator from "../common/TimeExpressionValidator";
+// import vcrontab from "vcrontab";
+import InputCron from '../easy-cron/input-cron'
 
-                    minCpuCores: 0,
-                    minMemorySpace: 0,
-                    minDiskSpace: 0,
+export default {
+  name: "JobManager",
+  components: {TimeExpressionValidator, InputCron},
+  data() {
+    return {
+      input: "",
+      expression: "",
+      showCron: false,
 
-                    enable: true,
-                    designatedWorkers: "",
-                    maxWorkerCount: 0,
-                    dispatchStrategy: "",
-                    notifyUserIds: []
+      modifiedJobFormVisible: false,
+      // 新建任务对象
+      modifiedJobForm: {
+        id: undefined,
+        jobName: "",
+        jobDescription: "",
+        appId: this.$store.state.appInfo.id,
+        jobParams: "",
+        timeExpressionType: "",
+        timeExpression: "",
+        executeType: "",
+        processorType: "",
+        processorInfo: "",
+        maxInstanceNum: 0,
+        concurrency: 5,
+        instanceTimeLimit: 0,
+        instanceRetryNum: 0,
+        taskRetryNum: 1,
 
-                },
-                // 任务查询请求对象
-                jobQueryContent: {
-                    appId: this.$store.state.appInfo.id,
-                    index: 0,
-                    pageSize: 10,
-                    jobId: undefined,
-                    keyword: undefined
-                },
-                // 任务列表（查询结果），包含index、pageSize、totalPages、totalItems、data（List类型）
-                jobInfoPageResult: {
-                    pageSize: 10,
-                    totalItems: 0,
-                    data: []
-                },
-                // 时间表达式选择类型
-                timeExpressionTypeOptions: [{key: "API", label: "API"}, {key: "CRON", label: "CRON"}, {key: "FIXED_RATE", label: this.$t('message.fixRate')}, {key: "FIXED_DELAY", label: this.$t('message.fixDelay')}, {key: "WORKFLOW", label: this.$t('message.workflow')} ],
-                // 处理器类型
-                processorTypeOptions: [{key: "BUILT_IN", label: this.$t('message.builtIn')}, {key: "EXTERNAL", label: this.$t('message.external')}], // {key: "SHELL", label: "SHELL"}, {key: "PYTHON", label: "PYTHON"}
-                // 执行方式类型
-                executeTypeOptions: [{key: "STANDALONE", label: this.$t('message.standalone')}, {key: "BROADCAST", label: this.$t('message.broadcast')},  {key: "MAP", label: this.$t('message.map')}, {key: "MAP_REDUCE", label: this.$t('message.mapReduce')}],
-                // 派发策略
-                dispatchStrategyOptions: [{key: "PERFORMANCE_FIRST", label: this.$t('message.dps_performance_first')}, {key: "RANDOM", label: this.$t('message.dps_random')}],
-                // 用户列表
-                userList: [],
-                // 时间表达式校验窗口
-                timeExpressionValidatorVisible: false
+        minCpuCores: 0,
+        minMemorySpace: 0,
+        minDiskSpace: 0,
 
-            }
-        },
-        methods: {
-            // 保存变更，包括新增和修改
-            async saveJob() {
-                await this.axios.post("/job/save", this.modifiedJobForm);
-                this.modifiedJobFormVisible = false;
-                this.$message.success(this.$t('message.success'));
-                this.listJobInfos();
-            },
-            // 列出符合当前搜索条件的任务
-            listJobInfos() {
-                const that = this;
-                this.axios.post("/job/list", this.jobQueryContent).then((res) => {
-                    that.jobInfoPageResult = res;
-                });
-            },
-            // 修改任务状态
-            changeJobStatus(data) {
-                // switch 会自动更改 enable 的值
-                let that = this;
-                if (data.enable === false) {
-                    // 仅有，有特殊逻辑（关闭秒级任务），走单独接口
-                    that.axios.get("/job/disable?jobId=" + data.id).then(() => that.listJobInfos());
-                }else {
-                    // 启用，则发起正常的保存操作
-                    this.modifiedJobForm = data;
-                    this.saveJob();
-                }
-            },
-            // 新增任务，去除旧数据
-            onClickNewJob() {
-                this.modifiedJobForm.id = undefined;
-                this.modifiedJobForm.jobName = undefined;
-                this.modifiedJobForm.jobDescription = undefined;
-                this.modifiedJobForm.jobParams = undefined;
-                this.modifiedJobForm.timeExpression = undefined;
-                this.modifiedJobForm.timeExpressionType = undefined;
-                this.modifiedJobForm.processorInfo = undefined;
-                this.modifiedJobForm.processorType = undefined;
-                this.modifiedJobForm.executeType = undefined;
+        enable: true,
+        designatedWorkers: "",
+        maxWorkerCount: 0,
+        dispatchStrategy: "",
+        notifyUserIds: []
+
+      },
+      // 任务查询请求对象
+      jobQueryContent: {
+        appId: this.$store.state.appInfo.id,
+        index: 0,
+        pageSize: 10,
+        jobId: undefined,
+        keyword: undefined
+      },
+      // 任务列表（查询结果），包含index、pageSize、totalPages、totalItems、data（List类型）
+      jobInfoPageResult: {
+        pageSize: 10,
+        totalItems: 0,
+        data: []
+      },
+      // 时间表达式选择类型
+      timeExpressionTypeOptions: [{key: "API", label: "API"}, {key: "CRON", label: "CRON"}, {
+        key: "FIXED_RATE",
+        label: this.$t('message.fixRate')
+      }, {key: "FIXED_DELAY", label: this.$t('message.fixDelay')}, {
+        key: "WORKFLOW",
+        label: this.$t('message.workflow')
+      }],
+      // 处理器类型
+      processorTypeOptions: [{key: "BUILT_IN", label: this.$t('message.builtIn')}, {
+        key: "EXTERNAL",
+        label: this.$t('message.external')
+      }], // {key: "SHELL", label: "SHELL"}, {key: "PYTHON", label: "PYTHON"}
+      // 执行方式类型
+      executeTypeOptions: [{key: "STANDALONE", label: this.$t('message.standalone')}, {
+        key: "BROADCAST",
+        label: this.$t('message.broadcast')
+      }, {key: "MAP", label: this.$t('message.map')}, {key: "MAP_REDUCE", label: this.$t('message.mapReduce')}],
+      // 派发策略
+      dispatchStrategyOptions: [{
+        key: "PERFORMANCE_FIRST",
+        label: this.$t('message.dps_performance_first')
+      }, {key: "RANDOM", label: this.$t('message.dps_random')}],
+      // 用户列表
+      userList: [],
+      // 时间表达式校验窗口
+      timeExpressionValidatorVisible: false
 
-                this.modifiedJobFormVisible = true;
-            },
-            // 点击 编辑按钮
-            onClickModify(data) {
-                // 修复点击编辑后再点击新增 行数据被清空 的问题
-                this.modifiedJobForm = JSON.parse(JSON.stringify(data));
-                this.modifiedJobFormVisible = true;
-            },
-            // 点击 立即运行按钮
-            onClickRun(data) {
-                let that = this;
-                let url = "/job/run?jobId=" + data.id + "&appId=" + that.$store.state.appInfo.id;
-                this.axios.get(url).then(() => that.$message.success(this.$t('message.success')));
-            },
-            // 点击 删除任务
-            onClickDeleteJob(data) {
-                let that = this;
-                let url = "/job/delete?jobId=" + data.id;
-                this.axios.get(url).then(() => {
-                    that.$message.success(this.$t('message.success'));
-                    that.listJobInfos();
-                });
-            },
-            // 点击 复制任务
-            onClickCopyJob(data) {
-              let url = "/job/copy?jobId=" + data.id;
-              let that = this;
-              this.axios.post(url).then(res => {
-                that.modifiedJobForm = res
-                that.modifiedJobFormVisible = true;
-              });
-            },
-            // 点击 历史记录
-            onClickRunHistory(data) {
-                console.log(JSON.stringify(data));
-                this.$router.push({
-                    name: 'instanceManager',
-                    params: {
-                        jobId: data.id,
-                    }
-                })
-            },
-            // 点击 换页
-            onClickChangePage(index) {
-                // 后端从0开始，前端从1开始
-                this.jobQueryContent.index = index - 1;
-                this.listJobInfos();
-            },
-            // 点击重置按钮
-            onClickReset() {
-                this.jobQueryContent.keyword = undefined;
-                this.jobQueryContent.jobId = undefined;
-                this.listJobInfos();
-            },
-            verifyPlaceholder(processorType) {
-                let res;
-                switch(processorType){
-                    case "BUILT_IN": res = this.$t('message.javaProcessorInfoPLH');break;
-                    case "EXTERNAL": res =  this.$t('message.containerProcessorInfoPLH');break;
-                    case "SHELL": res =  this.$t('message.shellProcessorInfoPLH');break;
-                    case "PYTHON" : res = this.$t('message.pythonProcessorInfoPLH');
-                }
-                return  res;
-            },
-            // 翻译执行类型
-            translateExecuteType(executeType) {
-                switch (executeType) {
-                    case "STANDALONE": return this.$t('message.standalone');
-                    case "BROADCAST": return this.$t('message.broadcast');
-                    case "MAP_REDUCE": return this.$t('message.mapReduce');
-                    case "MAP": return this.$t('message.map');
-                    default: return "UNKNOWN";
-                }
-            },
-            // 翻译处理器类型
-            translateProcessorType(processorType) {
-                if (processorType === "EXTERNAL") {
-                    return this.$t('message.external');
-                }
-                return this.$t('message.builtIn');
-            },
-            // 点击校验
-            onClickValidateTimeExpression() {
-                this.timeExpressionValidatorVisible = true;
-            }
-        },
-        mounted() {
-            // 加载用户信息
-            let that = this;
-            that.axios.get("/user/list").then(res => that.userList = res);
-            // 加载任务信息
-            this.listJobInfos();
-        }
     }
+  },
+  methods: {
+    // 保存变更，包括新增和修改
+    async saveJob() {
+      await this.axios.post("/job/save", this.modifiedJobForm);
+      this.modifiedJobFormVisible = false;
+      this.$message.success(this.$t('message.success'));
+      this.listJobInfos();
+    },
+    // 列出符合当前搜索条件的任务
+    listJobInfos() {
+      const that = this;
+      this.axios.post("/job/list", this.jobQueryContent).then((res) => {
+        that.jobInfoPageResult = res;
+      });
+    },
+    // 修改任务状态
+    changeJobStatus(data) {
+      // switch 会自动更改 enable 的值
+      let that = this;
+      if (data.enable === false) {
+        // 仅有，有特殊逻辑（关闭秒级任务），走单独接口
+        that.axios.get("/job/disable?jobId=" + data.id).then(() => that.listJobInfos());
+      } else {
+        // 启用，则发起正常的保存操作
+        this.modifiedJobForm = data;
+        this.saveJob();
+      }
+    },
+    // 新增任务，去除旧数据
+    onClickNewJob() {
+      this.modifiedJobForm.id = undefined;
+      this.modifiedJobForm.jobName = undefined;
+      this.modifiedJobForm.jobDescription = undefined;
+      this.modifiedJobForm.jobParams = undefined;
+      this.modifiedJobForm.timeExpression = undefined;
+      this.modifiedJobForm.timeExpressionType = undefined;
+      this.modifiedJobForm.processorInfo = undefined;
+      this.modifiedJobForm.processorType = undefined;
+      this.modifiedJobForm.executeType = undefined;
+
+      this.modifiedJobFormVisible = true;
+    },
+    // 点击 编辑按钮
+    onClickModify(data) {
+      // 修复点击编辑后再点击新增 行数据被清空 的问题
+      this.modifiedJobForm = JSON.parse(JSON.stringify(data));
+      this.modifiedJobFormVisible = true;
+    },
+    // 点击 立即运行按钮
+    onClickRun(data) {
+      let that = this;
+      let url = "/job/run?jobId=" + data.id + "&appId=" + that.$store.state.appInfo.id;
+      this.axios.get(url).then(() => that.$message.success(this.$t('message.success')));
+    },
+    // 点击 删除任务
+    onClickDeleteJob(data) {
+      let that = this;
+      let url = "/job/delete?jobId=" + data.id;
+      this.axios.get(url).then(() => {
+        that.$message.success(this.$t('message.success'));
+        that.listJobInfos();
+      });
+    },
+    // 点击 复制任务
+    onClickCopyJob(data) {
+      let url = "/job/copy?jobId=" + data.id;
+      let that = this;
+      this.axios.post(url).then(res => {
+        that.modifiedJobForm = res
+        that.modifiedJobFormVisible = true;
+      });
+    },
+    // 点击 历史记录
+    onClickRunHistory(data) {
+      console.log(JSON.stringify(data));
+      this.$router.push({
+        name: 'instanceManager',
+        params: {
+          jobId: data.id,
+        }
+      })
+    },
+    // 点击 换页
+    onClickChangePage(index) {
+      // 后端从0开始，前端从1开始
+      this.jobQueryContent.index = index - 1;
+      this.listJobInfos();
+    },
+    // 点击重置按钮
+    onClickReset() {
+      this.jobQueryContent.keyword = undefined;
+      this.jobQueryContent.jobId = undefined;
+      this.listJobInfos();
+    },
+    verifyPlaceholder(processorType) {
+      let res;
+      switch (processorType) {
+        case "BUILT_IN":
+          res = this.$t('message.javaProcessorInfoPLH');
+          break;
+        case "EXTERNAL":
+          res = this.$t('message.containerProcessorInfoPLH');
+          break;
+        case "SHELL":
+          res = this.$t('message.shellProcessorInfoPLH');
+          break;
+        case "PYTHON" :
+          res = this.$t('message.pythonProcessorInfoPLH');
+      }
+      return res;
+    },
+    // 翻译执行类型
+    translateExecuteType(executeType) {
+      switch (executeType) {
+        case "STANDALONE":
+          return this.$t('message.standalone');
+        case "BROADCAST":
+          return this.$t('message.broadcast');
+        case "MAP_REDUCE":
+          return this.$t('message.mapReduce');
+        case "MAP":
+          return this.$t('message.map');
+        default:
+          return "UNKNOWN";
+      }
+    },
+    // 翻译处理器类型
+    translateProcessorType(processorType) {
+      if (processorType === "EXTERNAL") {
+        return this.$t('message.external');
+      }
+      return this.$t('message.builtIn');
+    },
+    // 点击校验
+    onClickValidateTimeExpression() {
+      this.timeExpressionValidatorVisible = true;
+    },
+    //vcrontab
+  crontabFill(value) {
+    //确定后回传的值
+    this.input = value;
+  },
+  showDialog() {
+    this.expression = this.input;//传入的 cron 表达式，可以反解析到 UI 上
+    this.showCron = true;
+  }
+  },
+  mounted() {
+    // 加载用户信息
+    let that = this;
+    that.axios.get("/user/list").then(res => that.userList = res);
+    // 加载任务信息
+    this.listJobInfos();
+  }
+}
 </script>
 
 <style scoped>