431 lines
11 KiB
Vue
431 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="秒" v-if="shouldHide('second')">
|
||
<CrontabSecond
|
||
@update="updateCrontabValue"
|
||
:check="checkNumber"
|
||
:cron="crontabValueObj"
|
||
ref="cronsecond"
|
||
/>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="分钟" v-if="shouldHide('min')">
|
||
<CrontabMin
|
||
@update="updateCrontabValue"
|
||
:check="checkNumber"
|
||
:cron="crontabValueObj"
|
||
ref="cronmin"
|
||
/>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="小时" v-if="shouldHide('hour')">
|
||
<CrontabHour
|
||
@update="updateCrontabValue"
|
||
:check="checkNumber"
|
||
:cron="crontabValueObj"
|
||
ref="cronhour"
|
||
/>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="日" v-if="shouldHide('day')">
|
||
<CrontabDay
|
||
@update="updateCrontabValue"
|
||
:check="checkNumber"
|
||
:cron="crontabValueObj"
|
||
ref="cronday"
|
||
/>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="月" v-if="shouldHide('month')">
|
||
<CrontabMonth
|
||
@update="updateCrontabValue"
|
||
:check="checkNumber"
|
||
:cron="crontabValueObj"
|
||
ref="cronmonth"
|
||
/>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="周" v-if="shouldHide('week')">
|
||
<CrontabWeek
|
||
@update="updateCrontabValue"
|
||
:check="checkNumber"
|
||
:cron="crontabValueObj"
|
||
ref="cronweek"
|
||
/>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="年" v-if="shouldHide('year')">
|
||
<CrontabYear
|
||
@update="updateCrontabValue"
|
||
:check="checkNumber"
|
||
:cron="crontabValueObj"
|
||
ref="cronyear"
|
||
/>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<div class="popup-main">
|
||
<div class="popup-result">
|
||
<p class="title">时间表达式</p>
|
||
<table>
|
||
<thead>
|
||
<th v-for="item of tabTitles" width="40" :key="item">{{item}}</th>
|
||
<th>Cron 表达式</th>
|
||
</thead>
|
||
<tbody>
|
||
<td>
|
||
<span>{{crontabValueObj.second}}</span>
|
||
</td>
|
||
<td>
|
||
<span>{{crontabValueObj.min}}</span>
|
||
</td>
|
||
<td>
|
||
<span>{{crontabValueObj.hour}}</span>
|
||
</td>
|
||
<td>
|
||
<span>{{crontabValueObj.day}}</span>
|
||
</td>
|
||
<td>
|
||
<span>{{crontabValueObj.month}}</span>
|
||
</td>
|
||
<td>
|
||
<span>{{crontabValueObj.week}}</span>
|
||
</td>
|
||
<td>
|
||
<span>{{crontabValueObj.year}}</span>
|
||
</td>
|
||
<td>
|
||
<span>{{crontabValueString}}</span>
|
||
</td>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<CrontabResult :ex="crontabValueString"></CrontabResult>
|
||
|
||
<div class="pop_btn">
|
||
<el-button size="small" type="primary" @click="submitFill">确定</el-button>
|
||
<el-button size="small" type="warning" @click="clearCron">重置</el-button>
|
||
<el-button size="small" @click="hidePopup">取消</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import CrontabSecond from "./second.vue";
|
||
import CrontabMin from "./min.vue";
|
||
import CrontabHour from "./hour.vue";
|
||
import CrontabDay from "./day.vue";
|
||
import CrontabMonth from "./month.vue";
|
||
import CrontabWeek from "./week.vue";
|
||
import CrontabYear from "./year.vue";
|
||
import CrontabResult from "./result.vue";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabTitles: ["秒", "分钟", "小时", "日", "月", "周", "年"],
|
||
tabActive: 0,
|
||
myindex: 0,
|
||
crontabValueObj: {
|
||
second: "*",
|
||
min: "*",
|
||
hour: "*",
|
||
day: "*",
|
||
month: "*",
|
||
week: "?",
|
||
year: "",
|
||
},
|
||
};
|
||
},
|
||
name: "vcrontab",
|
||
props: ["expression", "hideComponent"],
|
||
methods: {
|
||
shouldHide(key) {
|
||
if (this.hideComponent && this.hideComponent.includes(key)) return false;
|
||
return true;
|
||
},
|
||
resolveExp() {
|
||
// 反解析 表达式
|
||
if (this.expression) {
|
||
let arr = this.expression.split(" ");
|
||
if (arr.length >= 6) {
|
||
//6 位以上是合法表达式
|
||
let obj = {
|
||
second: arr[0],
|
||
min: arr[1],
|
||
hour: arr[2],
|
||
day: arr[3],
|
||
month: arr[4],
|
||
week: arr[5],
|
||
year: arr[6] ? arr[6] : "",
|
||
};
|
||
this.crontabValueObj = {
|
||
...obj,
|
||
};
|
||
for (let i in obj) {
|
||
if (obj[i]) this.changeRadio(i, obj[i]);
|
||
}
|
||
}
|
||
} else {
|
||
// 没有传入的表达式 则还原
|
||
this.clearCron();
|
||
}
|
||
},
|
||
// tab切换值
|
||
tabCheck(index) {
|
||
this.tabActive = index;
|
||
},
|
||
// 由子组件触发，更改表达式组成的字段值
|
||
updateCrontabValue(name, value, from) {
|
||
"updateCrontabValue", name, value, from;
|
||
this.crontabValueObj[name] = value;
|
||
if (from && from !== name) {
|
||
console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
|
||
this.changeRadio(name, value);
|
||
}
|
||
},
|
||
// 赋值到组件
|
||
changeRadio(name, value) {
|
||
let arr = ["second", "min", "hour", "month"],
|
||
refName = "cron" + name,
|
||
insValue;
|
||
|
||
if (!this.$refs[refName]) return;
|
||
|
||
if (arr.includes(name)) {
|
||
if (value === "*") {
|
||
insValue = 1;
|
||
} else if (value.indexOf("-") > -1) {
|
||
let indexArr = value.split("-");
|
||
isNaN(indexArr[0])
|
||
? (this.$refs[refName].cycle01 = 0)
|
||
: (this.$refs[refName].cycle01 = indexArr[0]);
|
||
this.$refs[refName].cycle02 = indexArr[1];
|
||
insValue = 2;
|
||
} else if (value.indexOf("/") > -1) {
|
||
let indexArr = value.split("/");
|
||
isNaN(indexArr[0])
|
||
? (this.$refs[refName].average01 = 0)
|
||
: (this.$refs[refName].average01 = indexArr[0]);
|
||
this.$refs[refName].average02 = indexArr[1];
|
||
insValue = 3;
|
||
} else {
|
||
insValue = 4;
|
||
this.$refs[refName].checkboxList = value.split(",");
|
||
}
|
||
} else if (name == "day") {
|
||
if (value === "*") {
|
||
insValue = 1;
|
||
} else if (value == "?") {
|
||
insValue = 2;
|
||
} else if (value.indexOf("-") > -1) {
|
||
let indexArr = value.split("-");
|
||
isNaN(indexArr[0])
|
||
? (this.$refs[refName].cycle01 = 0)
|
||
: (this.$refs[refName].cycle01 = indexArr[0]);
|
||
this.$refs[refName].cycle02 = indexArr[1];
|
||
insValue = 3;
|
||
} else if (value.indexOf("/") > -1) {
|
||
let indexArr = value.split("/");
|
||
isNaN(indexArr[0])
|
||
? (this.$refs[refName].average01 = 0)
|
||
: (this.$refs[refName].average01 = indexArr[0]);
|
||
this.$refs[refName].average02 = indexArr[1];
|
||
insValue = 4;
|
||
} else if (value.indexOf("W") > -1) {
|
||
let indexArr = value.split("W");
|
||
isNaN(indexArr[0])
|
||
? (this.$refs[refName].workday = 0)
|
||
: (this.$refs[refName].workday = indexArr[0]);
|
||
insValue = 5;
|
||
} else if (value === "L") {
|
||
insValue = 6;
|
||
} else {
|
||
this.$refs[refName].checkboxList = value.split(",");
|
||
insValue = 7;
|
||
}
|
||
} else if (name == "week") {
|
||
if (value === "*") {
|
||
insValue = 1;
|
||
} else if (value == "?") {
|
||
insValue = 2;
|
||
} else if (value.indexOf("-") > -1) {
|
||
let indexArr = value.split("-");
|
||
isNaN(indexArr[0])
|
||
? (this.$refs[refName].cycle01 = 0)
|
||
: (this.$refs[refName].cycle01 = indexArr[0]);
|
||
this.$refs[refName].cycle02 = indexArr[1];
|
||
insValue = 3;
|
||
} else if (value.indexOf("#") > -1) {
|
||
let indexArr = value.split("#");
|
||
isNaN(indexArr[0])
|
||
? (this.$refs[refName].average01 = 1)
|
||
: (this.$refs[refName].average01 = indexArr[0]);
|
||
this.$refs[refName].average02 = indexArr[1];
|
||
insValue = 4;
|
||
} else if (value.indexOf("L") > -1) {
|
||
let indexArr = value.split("L");
|
||
isNaN(indexArr[0])
|
||
? (this.$refs[refName].weekday = 1)
|
||
: (this.$refs[refName].weekday = indexArr[0]);
|
||
insValue = 5;
|
||
} else {
|
||
this.$refs[refName].checkboxList = value.split(",");
|
||
insValue = 6;
|
||
}
|
||
} else if (name == "year") {
|
||
if (value == "") {
|
||
insValue = 1;
|
||
} else if (value == "*") {
|
||
insValue = 2;
|
||
} else if (value.indexOf("-") > -1) {
|
||
insValue = 3;
|
||
} else if (value.indexOf("/") > -1) {
|
||
insValue = 4;
|
||
} else {
|
||
this.$refs[refName].checkboxList = value.split(",");
|
||
insValue = 5;
|
||
}
|
||
}
|
||
this.$refs[refName].radioValue = insValue;
|
||
},
|
||
// 表单选项的子组件校验数字格式（通过-props传递）
|
||
checkNumber(value, minLimit, maxLimit) {
|
||
// 检查必须为整数
|
||
value = Math.floor(value);
|
||
if (value < minLimit) {
|
||
value = minLimit;
|
||
} else if (value > maxLimit) {
|
||
value = maxLimit;
|
||
}
|
||
return value;
|
||
},
|
||
// 隐藏弹窗
|
||
hidePopup() {
|
||
this.$emit("hide");
|
||
},
|
||
// 填充表达式
|
||
submitFill() {
|
||
this.$emit("fill", this.crontabValueString);
|
||
this.hidePopup();
|
||
},
|
||
clearCron() {
|
||
// 还原选择项
|
||
("准备还原");
|
||
this.crontabValueObj = {
|
||
second: "*",
|
||
min: "*",
|
||
hour: "*",
|
||
day: "*",
|
||
month: "*",
|
||
week: "?",
|
||
year: "",
|
||
};
|
||
for (let j in this.crontabValueObj) {
|
||
this.changeRadio(j, this.crontabValueObj[j]);
|
||
}
|
||
},
|
||
},
|
||
computed: {
|
||
crontabValueString: function() {
|
||
let obj = this.crontabValueObj;
|
||
let str =
|
||
obj.second +
|
||
" " +
|
||
obj.min +
|
||
" " +
|
||
obj.hour +
|
||
" " +
|
||
obj.day +
|
||
" " +
|
||
obj.month +
|
||
" " +
|
||
obj.week +
|
||
(obj.year == "" ? "" : " " + obj.year);
|
||
return str;
|
||
},
|
||
},
|
||
components: {
|
||
CrontabSecond,
|
||
CrontabMin,
|
||
CrontabHour,
|
||
CrontabDay,
|
||
CrontabMonth,
|
||
CrontabWeek,
|
||
CrontabYear,
|
||
CrontabResult,
|
||
},
|
||
watch: {
|
||
expression: "resolveExp",
|
||
hideComponent(value) {
|
||
// 隐藏部分组件
|
||
},
|
||
},
|
||
mounted: function() {
|
||
this.resolveExp();
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.pop_btn {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
.popup-main {
|
||
position: relative;
|
||
margin: 10px auto;
|
||
background: #fff;
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.popup-title {
|
||
overflow: hidden;
|
||
line-height: 34px;
|
||
padding-top: 6px;
|
||
background: #f2f2f2;
|
||
}
|
||
.popup-result {
|
||
box-sizing: border-box;
|
||
line-height: 24px;
|
||
margin: 25px auto;
|
||
padding: 15px 10px 10px;
|
||
border: 1px solid #ccc;
|
||
position: relative;
|
||
}
|
||
.popup-result .title {
|
||
position: absolute;
|
||
top: -28px;
|
||
left: 50%;
|
||
width: 140px;
|
||
font-size: 14px;
|
||
margin-left: -70px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
background: #fff;
|
||
}
|
||
.popup-result table {
|
||
text-align: center;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
.popup-result table span {
|
||
display: block;
|
||
width: 100%;
|
||
font-family: arial;
|
||
line-height: 30px;
|
||
height: 30px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
border: 1px solid #e8e8e8;
|
||
}
|
||
.popup-result-scroll {
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
height: 10em;
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|