增加cron-editor组件

src/app-register.ts

@@ -84,6 +84,7 @@ import AppMenuItem from './components/app-menu-item/app-menu-item.vue'
 import AppFullScren from './components/app-full-scren/app-full-scren.vue'
 import AppLockScren from './components/app-lock-scren/app-lock-scren.vue'
 import ActionTimeline from './components/action-timeline/action-timeline.vue'
+import CronEditor from './components/cron-editor/cron-editor.vue'
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -181,5 +182,6 @@ export const AppComponents = {
         v.component('app-update-password',UpdatePwd);
         v.component('app-menu-item', AppMenuItem);
         v.component('action-timeline', ActionTimeline);
+        v.component('cron-editor', CronEditor);
     },
 };
\ No newline at end of file

src/components/cron-editor/cron-editor.vue

+<template>
+    <Select
+        v-model="model"
+        class="transfer-select"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        multiple>
+        <vue-cron class='vue-cron'  @cronValue='handleCronChange'></vue-cron>
+    </Select>
+    
+</template>
+
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch, Model } from 'vue-property-decorator';
+import VueCron from './vue-cron/vue-cron.vue';
+
+@Component({
+    components: {
+        'vue-cron': VueCron,
+    }
+})
+export default class CronEditor extends Vue {
+    
+    /**
+     * 下拉列表数据（设置为空）
+     *
+     * @type {any}
+     * @memberof CronEditor
+     */ 
+    public model: any = '';
+
+    /**
+     * 启用状态
+     *
+     * @type {any}
+     * @memberof CronEditor
+     */ 
+    @Prop() disabled: any;
+
+    /**
+     * 下拉框显示值
+     *
+     * @type {any}
+     * @memberof CronEditor
+     */ 
+    @Prop() placeholder:any;
+
+    /**
+     * 处理返回Cron表达式
+     *
+     * @type {any}
+     * @memberof CronEditor
+     */ 
+    public handleCronChange(newVal: any, oldVal: any) {
+        
+    }
+}
+
+</script>
+
+<style lang="less">
+.transfer-select{
+  .ivu-select-dropdown {
+      padding: 0px;
+      overflow: inherit;
+      .hidden {
+          display: none;
+      }
+      .vue-cron{
+          min-width: 100% !important;
+      }
+  }
+}
+
+</style>
\ No newline at end of file

src/components/cron-editor/vue-cron/day.vue

+<template>
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('components.cronEditor.day.daily') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>{{ $t('components.cronEditor.public.notSpecify') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('components.cronEditor.public.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.public.from') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="1" :max="31" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.public.to') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="31" size="mini" style="width: 100px;"></el-input-number>
+      {{ $t('components.cronEditor.day.title') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('components.cronEditor.public.loop') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.public.from') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="1" :max="31" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.day.dayStart') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="31" size="mini" style="width: 100px;"></el-input-number>
+      {{ $t('components.cronEditor.day.onceADay') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="8" size="mini" border>{{ $t('components.cronEditor.day.workDay') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.day.thisMonth') }}</span>
+      <el-input-number @change="type = '8'" v-model="work" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+      {{ $t('components.cronEditor.day.lastWorkDay') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="6" size="mini" border>{{ $t('components.cronEditor.day.lastDayOfMonth') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('components.cronEditor.public.specify') }}</el-radio>
+      <el-checkbox-group v-model="appoint">
+        <div  v-for="i in 4" :key="i" style="margin-left: 10px;  line-height: 25px;">
+          <template v-for="j in 10">
+            <el-checkbox @change="type = '4'" v-if="parseInt((i - 1) + '' + (j - 1)) < 32 && !(i === 1 && j === 1)" :key="j" :label="(i - 1) + '' + (j - 1)"></el-checkbox>
+          </template>
+        </div>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+
+@Component({})
+export default class Day extends Vue {
+
+    /**
+     * Cron表达式
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public value: any;
+
+    /**
+     * 标签类型标识
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public type: string = '5';
+
+    /**
+     * 周期
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public cycle: any = {
+      start: 0,
+      end: 0
+    };
+
+    /**
+     * 循环
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public loop: any = {
+      start: 0,
+      end: 0
+    };
+
+    /**
+     * 指定周
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public week: any = {
+      start: 0,
+      end: 0
+    };
+
+    /**
+     * 工作日
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public work: number = 0;
+
+    /**
+     * 最后
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public last: number = 0;
+
+    /**
+     * 指定
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public appoint: any = [];
+
+    /**
+     * 获取Cron表达式
+     * 
+     * @returns
+     * @memberof Day
+     */
+    get value_() {
+      let result: any = [];
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 周期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        case '7': // 指定周
+          result.push(`${this.week.start}#${this.week.end}`)
+          break
+        case '8': // 工作日
+          result.push(`${this.work}W`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+
+    /**
+     * 数据值变化
+     * 
+     * @returns
+     * @memberof Day
+     */
+    @Watch('value')
+    public updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+
+    /**
+     * Vue生命周期
+     * 
+     * @returns
+     * @memberof Day
+     */
+    public created() {
+      this.updateVal();
+    }
+
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>

src/components/cron-editor/vue-cron/hour.vue

+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('components.cronEditor.hour.everyHour') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('components.cronEditor.public.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.public.from') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="0" :max="23" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.public.to') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="23" size="mini" style="width: 100px;"></el-input-number>
+      {{ $t('components.cronEditor.hour.title') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('components.cronEditor.public.loop') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.public.from') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="0" :max="23" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.hour.hourStart') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="23" size="mini" style="width: 100px;"></el-input-number>
+      {{ $t('components.cronEditor.hour.onceAHour') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('components.cronEditor.public.specify') }}</el-radio>
+      <el-checkbox-group v-model="appoint">
+        <div  v-for="i in 3" :key="i" style="margin-left: 10px;  line-height: 25px;">
+          <template v-for="j in 10">
+            <el-checkbox @change="type = '4'" v-if="parseInt((i - 1) + '' + (j - 1)) < 24" :key="j" :label="(i - 1) + '' + (j - 1)"></el-checkbox>
+          </template>
+        </div>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Watch, Component } from 'vue-property-decorator';
+@Component({})
+export default class Hour extends Vue {
+
+    /**
+     * Cron表达式
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public value: any;
+
+    /**
+     * 标签类型标识
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public type: string = '1';
+
+    /**
+     * 周期
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public cycle: any = {
+        start: 0,
+        end: 0
+    };
+
+    /**
+     * 循环
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public loop: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 周
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public week: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 工作日
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public work: number = 0;
+
+    /**
+     * 最后
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public last: number = 0;
+
+    /**
+     * 指定
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public appoint: any = [];
+
+    /**
+     * 获取Cron表达式
+     * 
+     * @returns
+     * @memberof Day
+     */
+    get value_() {
+        let result: any = [];
+        switch (this.type) {
+          case '1': // 每秒
+            result.push('*')
+            break;
+          case '2': // 年期
+            result.push(`${this.cycle.start}-${this.cycle.end}`)
+            break;
+          case '3': // 循环
+            result.push(`${this.loop.start}/${this.loop.end}`)
+            break;
+          case '4': // 指定
+            result.push(this.appoint.join(','))
+            break;
+          case '6': // 最后
+            result.push(`${this.last === 0 ? '' : this.last}L`)
+            break;
+          default: // 不指定
+            result.push('?')
+            break;
+        }
+      this.$emit('input', result.join(''));
+      return result.join('');
+    }
+
+    /**
+     * 数据值变化
+     * 
+     * @returns
+     * @memberof Hour
+     */
+    @Watch('value')
+    public updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  
+    /**
+     * Vue生命周期
+     * 
+     * @returns
+     * @memberof Day
+     */
+    public created () {
+      this.updateVal()
+    }
+
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>

src/components/cron-editor/vue-cron/month.vue

+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('components.cronEditor.month.everyMonth') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>{{ $t('components.cronEditor.public.notSpecify') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('components.cronEditor.public.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.public.from') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="1" :max="12" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.public.to') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="12" size="mini" style="width: 100px;"></el-input-number>
+      {{ $t('components.cronEditor.month.title') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('components.cronEditor.public.loop') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.public.from') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="1" :max="12" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.month.monthStart') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="12" size="mini" style="width: 100px;"></el-input-number>
+      {{ $t('components.cronEditor.month.onceAMonth') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('components.cronEditor.public.specify') }}</el-radio>
+      <el-checkbox-group v-model="appoint" style="margin-left: 0px;  line-height: 25px;">
+          <el-checkbox @change="type = '4'"  v-for="i in 12" :key="i" :label="i.toString()" ></el-checkbox>
+      </el-checkbox-group>
+      
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Watch, Component } from 'vue-property-decorator';
+@Component({})
+export default class Month extends Vue {
+
+    /**
+     * Cron表达式
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public value: any;
+
+    /**
+     * 标签类型标识
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public type: string = '1';
+
+    /**
+     * 周期
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public cycle: any = {
+        start: 0,
+        end: 0
+    };
+
+    /**
+     * 循环
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public loop: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 周
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public week: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 工作日
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public work: number = 0;
+
+    /**
+     * 最后
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public last: number = 0;
+
+    /**
+     * 指定
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public appoint: any = [];
+
+    /**
+     * 获取Cron表达式
+     * 
+     * @returns
+     * @memberof Day
+     */
+    get value_() {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+
+    /**
+     * 数据值变化
+     * 
+     * @returns
+     * @memberof Month
+     */
+    @Watch('value')
+    public updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+
+    public created() {
+      this.updateVal();
+    }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>

src/components/cron-editor/vue-cron/secondAndMinute.vue

+<!-- 秒,分钟 -->
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('components.cronEditor.public.every') }} {{ showLabel }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('components.cronEditor.public.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.public.from') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="1" :max="59" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.public.to') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="59" size="mini" style="width: 100px;"></el-input-number>
+      {{showLabel}}
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('components.cronEditor.public.loop') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.public.from') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="0" :max="59" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{showLabel}} {{ $t('components.cronEditor.week.start') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="59" size="mini" style="width: 100px;"></el-input-number>
+      {{showLabel}} {{ $t('components.cronEditor.public.once') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('components.cronEditor.public.specify') }}</el-radio>
+      <el-checkbox-group v-model="appoint">
+        <div  v-for="i in 6" :key="i" style="margin-left: 10px; line-height: 25px;">
+          <el-checkbox @change="type = '4'"  v-for="j in 10" :key="j" :label="(i - 1) + '' + (j - 1)"></el-checkbox>
+        </div>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Watch, Component, Prop } from 'vue-property-decorator';
+@Component({})
+export default class SecondAndMinute extends Vue {
+
+    /**
+     * 标题
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    @Prop() public label: any;
+
+    /**
+     * 显示标题
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public showLabel: any;
+
+    /**
+     * Cron表达式
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public value: any;
+
+    /**
+     * 标签类型标识
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public type: string = '1';
+
+    /**
+     * 周期
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public cycle: any = {
+        start: 0,
+        end: 0
+    };
+
+    /**
+     * 循环
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public loop: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 周
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public week: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 工作日
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public work: number = 0;
+
+    /**
+     * 最后
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public last: number = 0;
+
+    /**
+     * 指定
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public appoint: any = [];
+
+    /**
+     * 获取Cron表达式
+     * 
+     * @returns
+     * @memberof Day
+     */
+    get value_() {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+
+    /**
+     * 数据值变化
+     * 
+     * @returns
+     * @memberof SecondAndMinute
+     */
+    @Watch('value')
+    public updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+
+    /**
+     * 数据值变化
+     * 
+     * @returns
+     * @memberof Day
+     */
+    @Watch('label')
+    public updateLabel(newVal: any, oldVal: any) {
+      this.showLabel = this.label ? this.label : oldVal;
+    }
+
+    public created() {
+      this.showLabel = this.label ? this.label : '';
+      this.updateVal();
+    }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>

src/components/cron-editor/vue-cron/vue-cron.vue

+
+<template>
+    <div class="cron" :val="_value">
+    <el-tabs v-model="activeName">
+      <el-tab-pane :label="$t('components.cronEditor.label.second')" name="s">
+        <second-and-minute v-model="sVal" :label="$t('components.cronEditor.second')"></second-and-minute >
+      </el-tab-pane>
+      <el-tab-pane :label="$t('components.cronEditor.label.minute')" name="m">
+        <second-and-minute v-model="mVal" :label="$t('components.cronEditor.minute')"></second-and-minute >
+      </el-tab-pane>
+      <el-tab-pane :label="$t('components.cronEditor.label.hour')" name="h">
+        <hour v-model="hVal" :lable="$t('components.cronEditor.hour.title')"></hour>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('components.cronEditor.label.day')" name="d">
+        <day v-model="dVal" :lable="$t('components.cronEditor.day.title')"></day>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('components.cronEditor.label.month')" name="month">
+        <month v-model="monthVal" :lable="$t('components.cronEditor.month.title')"></month>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('components.cronEditor.label.week')" name="week">
+        <week v-model="weekVal" :lable="$t('components.cronEditor.week.title')"></week>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('components.cronEditor.label.year')" name="year">
+        <year v-model="yearVal" :lable="$t('components.cronEditor.year.title')"></year>
+      </el-tab-pane>
+    </el-tabs>
+    <!-- table -->
+    <el-table
+       :data="tableData"
+       size="mini"
+       border
+       style="width: 100%;">
+       <el-table-column
+         prop="sVal"
+         :label="$t('components.cronEditor.second')"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="mVal"
+         :label="$t('components.cronEditor.minute')"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="hVal"
+         :label="$t('components.cronEditor.hour.title')"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="dVal"
+         :label="$t('components.cronEditor.day.title')"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="monthVal"
+         :label="$t('components.cronEditor.month.title')"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="weekVal"
+         :label="$t('components.cronEditor.week.title')"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="yearVal"
+         :label="this.$t('components.cronEditor.year.title')">
+       </el-table-column>
+     </el-table>
+  </div>
+
+</template>
+
+<script lang='ts'>
+import SecondAndMinute from './secondAndMinute.vue';
+import hour from './hour.vue';
+import day from './day.vue';
+import month from './month.vue';
+import week from './week.vue';
+import year from './year.vue';
+import { Vue, Component, Prop, Watch, Model } from 'vue-property-decorator';
+
+@Component({
+  components: {
+    'second-and-minute': SecondAndMinute,
+    hour,
+    day,
+    month,
+    week,
+    year
+  }
+})
+export default class VueCron extends Vue {
+
+    /**
+     * 传递数据
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+    @Prop() data: any;
+
+    /**
+     * Cron表达式
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+    public value: any = '';
+
+    /**
+     * 标签名
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+    public activeName: string = 's';
+
+    /**
+     * 标签-秒 数据
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+    public sVal: any = '';
+
+    /**
+     * 标签-分 数据
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+  public mVal: any = '';
+
+    /**
+     * 标签-天 数据
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+    public dVal: any = '';
+
+    /**
+     * 标签-时 数据
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+    public hVal: any = '';
+
+    /**
+     * 标签月 数据
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+    public monthVal:any = '';
+
+    /**
+     * 标签-周 数据
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+    public weekVal: any = '';
+
+    /**
+     * 标签年 数据
+     *
+     * @type {any}
+     * @memberof VueCron
+     */ 
+    public yearVal: any = '';
+
+    /**
+     * 数据值变化
+     * @returns
+     * @memberof VueCron
+     */
+    @Watch('value')
+    public updateVal() {
+      if (!this.value) {
+          return
+        }
+        let arrays: Array<any> = this.value.split(' ');
+        this.sVal = arrays[0];
+        this.mVal = arrays[1];
+        this.hVal = arrays[2];
+        this.dVal = arrays[3];
+        this.monthVal = arrays[4];
+        this.weekVal = arrays[5];
+        this.yearVal = arrays[6];
+    }
+
+    /**
+     * 获取表格内容
+     * @returns
+     * @memberof VueCron
+     */
+    get tableData() {
+      return [{
+        sVal: this.sVal,
+        mVal: this.mVal,
+        hVal: this.hVal,
+        dVal: this.dVal,
+        monthVal: this.monthVal,
+        weekVal: this.weekVal,
+        yearVal: this.yearVal
+      }]
+    }
+
+    /**
+     * 获取Cron表达式
+     * @returns
+     * @memberof VueCron
+     */
+    get _value() {
+      if (!this.dVal && !this.weekVal) {
+        return '';
+      }
+      if (this.dVal === '?' && this.weekVal === '?') {
+        this.$message.error(this.$t('components.cronEditor.message.error1') as string);
+      }
+      if (this.dVal !== '?' && this.weekVal !== '?') {
+        this.$message.error(this.$t('components.cronEditor.message.error1') as string);
+      }
+      let v: any = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`;
+      if (v !== this.value) {
+        this.$emit('cronValue', v);
+      }
+      this.value = v;
+      return v;
+    }
+
+    /**
+     * Vue生命周期
+     * @returns
+     * @memberof VueCron
+     */
+    public created() {
+      if(!this.value) {
+        this.value = '';
+      }
+      this.updateVal();
+    }
+
+}
+
+</script>
+
+
+<style lang="less">
+.cron {
+  text-align: left;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
+}
+</style>

src/components/cron-editor/vue-cron/week.vue

+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('components.cronEditor.week.everyWeek') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>{{ $t('components.cronEditor.public.notSpecify') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('components.cronEditor.public.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.week.from') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.week.to') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="7" size="mini" style="width: 100px;"></el-input-number>
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('components.cronEditor.public.loop') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.week.from') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.week.start') }}</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+      {{ $t('components.cronEditor.week.onceADay') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="7" size="mini" border>{{ $t('components.cronEditor.week.specifyWeek') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.week.weekOfMonth') }}</span>
+      <el-input-number @change="type = '7'" v-model="week.start" :min="1" :max="4" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.week.weekWeek') }}</span>
+      <el-input-number @change="type = '7'" v-model="week.end" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+    </div>
+    <div>
+      <el-radio v-model="type" label="6" size="mini" border>{{ $t('components.cronEditor.week.lastOfMonth') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.week.week') }}</span>
+      <el-input-number @change="type = '6'" v-model="last" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('components.cronEditor.public.specify') }}</el-radio>
+      <el-checkbox-group v-model="appoint" style="margin-left: 50px;  line-height: 25px;">
+        <template v-for="i in 7" >
+          <el-checkbox  @change="type = '4'" :key="i" :label="i.toString()"></el-checkbox>
+        </template>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Watch, Component } from 'vue-property-decorator';
+
+@Component({})
+export default class Week extends Vue {
+
+    /**
+     * Cron表达式
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public value: any;
+
+    /**
+     * 标签类型标识
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public type: string = '1';
+
+    /**
+     * 周期
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public cycle: any = {
+        start: 0,
+        end: 0
+    };
+
+    /**
+     * 循环
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public loop: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 周
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public week: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 工作日
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public work: number = 0;
+
+    /**
+     * 最后
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public last: number = 0;
+
+    /**
+     * 指定
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public appoint: any = [];
+
+    /**
+     * 获取Cron表达式
+     * 
+     * @returns
+     * @memberof Day
+     */
+    get value_() {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          console.log(this.appoint);
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        case '7': // 指定周
+          result.push(`${this.week.start}#${this.week.end}`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+
+    /**
+     * 数据值变化
+     * 
+     * @returns
+     * @memberof Day
+     */
+    @Watch('value')
+    public updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+
+    public created() {
+      this.updateVal();
+    }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>

src/components/cron-editor/vue-cron/year.vue

+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('components.cronEditor.year.everyYear') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>{{ $t('components.cronEditor.public.notSpecify') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('components.cronEditor.public.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('components.cronEditor.public.from') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="2000" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('components.cronEditor.public.to') }}</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2000"  size="mini" style="width: 100px;"></el-input-number>
+      {{ $t('components.cronEditor.year.title') }}
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Watch, Component } from 'vue-property-decorator';
+
+@Component({})
+export default class Year extends Vue {
+
+    /**
+     * Cron表达式
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public value: any;
+
+    /**
+     * 标签类型标识
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public type: string = '1';
+
+    /**
+     * 周期
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public cycle: any = {
+        start: 0,
+        end: 0
+    };
+
+    /**
+     * 循环
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public loop: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 周
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public week: any = {
+        start: 0,
+        end: 0
+    }
+
+    /**
+     * 工作日
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public work: number = 0;
+
+    /**
+     * 最后
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public last: number = 0;
+
+    /**
+     * 指定
+     *
+     * @type {any}
+     * @memberof Day
+     */ 
+    public appoint: any = [];
+
+    /**
+     * 获取Cron表达式
+     * 
+     * @returns
+     * @memberof Day
+     */
+    get value_() {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')    
+    }
+
+    /**
+     * 数据值变化
+     * 
+     * @returns
+     * @memberof Day
+     */
+    @Watch('value')
+    public updateVal() {
+         if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+
+    public created() {
+      this.updateVal();
+    }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>

src/locale/lanres/components/components_en_US.ts

@@ -258,6 +258,71 @@ export default {
       prompt:'prompt',
       confirmButtonText:'determine',
       cancelButtonText:'cancel',
+    },
+    cronEditor: {
+      label: {
+          second: 'Second',
+          minute: 'Minute',
+          hour: 'Hour',
+          day: 'Day',
+          week: 'Week',
+          month: 'Month',
+          year: 'Year',
+      },
+      public : {
+          specify: 'Specify',
+          notSpecify: 'Not specify',
+          cycle: 'Cycle',
+          from: 'From',
+          to: 'to',
+          loop: 'Loop',
+          every: 'Every',
+          once: 'execute once',
+      },
+      second: 'second',
+      minute: 'minute',
+      hour: {
+          title: 'hour',
+          everyHour: 'Every hour',
+          hourStart: "o'clock start, every ",
+          onceAHour: "o'clock to execute once.",
+      },
+      day: {
+          title: 'day',
+          daily: 'Every day',
+          workDay: 'Working day',
+          dayStart: 'rd start, every ',
+          onceADay: 'rd to execute once',
+          thisMonth: 'this month',
+          lastWorkDay: 'rd, Recent working day',
+          lastDayOfMonth: 'Last day of the month',
+      },
+      month: {
+          title: 'month',
+          everyMonth: 'Every month',
+          monthStart: ' month start, every',
+          onceAMonth: ' month to execute once',
+      },
+      week: {
+          title: 'week',
+          everyWeek: 'Every week',
+          from: '',
+          to: 'from weekday',
+          start: 'start, every',
+          onceADay: 'days to execute once',
+          specifyWeek: 'Specify week',
+          weekOfMonth: 'this month',
+          weekWeek: 'week, weekday',
+          lastOfMonth: 'Last of the month',
+          week: 'weekday',
+      },
+      year: {
+          title: 'year',
+          everyYear: 'Every year',
+      },
+      message: {
+          error1: 'Date and day of the week cannot be "not specified" at the same time',
+          error2: 'Both the date and the day of the week must be "not specified"',
+      },
     }
-
 };
\ No newline at end of file

src/locale/lanres/components/components_zh_CN.ts

@@ -259,5 +259,71 @@ export default {
       prompt:'提示',
       confirmButtonText:'确定',
       cancelButtonText:'取消',
+    },
+    cronEditor: {
+      label: {
+          second: '秒',
+          minute: '分',
+          hour: '时',
+          day: '日',
+          week: '周',
+          month: '月',
+          year: '年',
+      },
+      public : {
+          specify: '指定',
+          notSpecify: '不指定',
+          cycle: '周期',
+          from: '从',
+          to: '至',
+          loop: '循环',
+          every: '每',
+          once: '执行一次',
+      },
+      second: '秒',
+      minute: '分',
+      hour: {
+          title: '时',
+          everyHour: '每时',
+          hourStart: '时开始，每',
+          onceAHour: '时执行一次',
+      },
+      day: {
+          title: '日',
+          daily: '每日',
+          workDay: '工作日',
+          dayStart: '日开始，每',
+          onceADay: '日执行一次',
+          thisMonth: '本月',
+          lastWorkDay: '号，最近的工作日',
+          lastDayOfMonth: '本月最后一天',
+      },
+      month: {
+          title: '月',
+          everyMonth: '每月',
+          monthStart: '月开始，每',
+          onceAMonth: '月执行一次',
+      },
+      week: {
+          title: '周',
+          everyWeek: '每周',
+          from: '从星期',
+          to: '至星期',
+          start: '开始，每',
+          onceADay: '天执行一次',
+          specifyWeek: '指定周',
+          weekOfMonth: '本月第',
+          weekWeek: '周，星期',
+          lastOfMonth: '本月最后一个',
+          week: '星期',
+      },
+      year: {
+          title: '年',
+          everyYear: '每年',
+      },
+      message: {
+          error1: '日期与星期不可以同时为“不指定”',
+          error2: '日期与星期必须有一个为“不指定”',
+      },
     }
 };
\ No newline at end of file