<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="scss"> .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>