310 lines
9.6 KiB
Vue
310 lines
9.6 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" :key="item">{{item}}</th>
|
||
<th>Cron 表达式</th>
|
||
</thead>
|
||
<tbody>
|
||
<td>
|
||
<span v-if="crontabValueObj.second.length < 10">{{crontabValueObj.second}}</span>
|
||
<el-tooltip v-else :content="crontabValueObj.second" placement="top"><span>{{crontabValueObj.second}}</span></el-tooltip>
|
||
</td>
|
||
<td>
|
||
<span v-if="crontabValueObj.min.length < 10">{{crontabValueObj.min}}</span>
|
||
<el-tooltip v-else :content="crontabValueObj.min" placement="top"><span>{{crontabValueObj.min}}</span></el-tooltip>
|
||
</td>
|
||
<td>
|
||
<span v-if="crontabValueObj.hour.length < 10">{{crontabValueObj.hour}}</span>
|
||
<el-tooltip v-else :content="crontabValueObj.hour" placement="top"><span>{{crontabValueObj.hour}}</span></el-tooltip>
|
||
</td>
|
||
<td>
|
||
<span v-if="crontabValueObj.day.length < 10">{{crontabValueObj.day}}</span>
|
||
<el-tooltip v-else :content="crontabValueObj.day" placement="top"><span>{{crontabValueObj.day}}</span></el-tooltip>
|
||
</td>
|
||
<td>
|
||
<span v-if="crontabValueObj.month.length < 10">{{crontabValueObj.month}}</span>
|
||
<el-tooltip v-else :content="crontabValueObj.month" placement="top"><span>{{crontabValueObj.month}}</span></el-tooltip>
|
||
</td>
|
||
<td>
|
||
<span v-if="crontabValueObj.week.length < 10">{{crontabValueObj.week}}</span>
|
||
<el-tooltip v-else :content="crontabValueObj.week" placement="top"><span>{{crontabValueObj.week}}</span></el-tooltip>
|
||
</td>
|
||
<td>
|
||
<span v-if="crontabValueObj.year.length < 10">{{crontabValueObj.year}}</span>
|
||
<el-tooltip v-else :content="crontabValueObj.year" placement="top"><span>{{crontabValueObj.year}}</span></el-tooltip>
|
||
</td>
|
||
<td class="result">
|
||
<span v-if="crontabValueString.length < 90">{{crontabValueString}}</span>
|
||
<el-tooltip v-else :content="crontabValueString" placement="top"><span>{{crontabValueString}}</span></el-tooltip>
|
||
</td>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<CrontabResult :ex="crontabValueString"></CrontabResult>
|
||
|
||
<div class="pop_btn">
|
||
<el-button type="primary" @click="submitFill">确定</el-button>
|
||
<el-button type="warning" @click="clearCron">重置</el-button>
|
||
<el-button @click="hidePopup">取消</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
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"
|
||
const { proxy } = getCurrentInstance()
|
||
const emit = defineEmits(['hide', 'fill'])
|
||
const props = defineProps({
|
||
hideComponent: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
expression: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
})
|
||
const tabTitles = ref(["秒", "分钟", "小时", "日", "月", "周", "年"])
|
||
const tabActive = ref(0)
|
||
const hideComponent = ref([])
|
||
const expression = ref('')
|
||
const crontabValueObj = ref({
|
||
second: "*",
|
||
min: "*",
|
||
hour: "*",
|
||
day: "*",
|
||
month: "*",
|
||
week: "?",
|
||
year: "",
|
||
})
|
||
const crontabValueString = computed(() => {
|
||
const obj = crontabValueObj.value
|
||
return obj.second
|
||
+ " "
|
||
+ obj.min
|
||
+ " "
|
||
+ obj.hour
|
||
+ " "
|
||
+ obj.day
|
||
+ " "
|
||
+ obj.month
|
||
+ " "
|
||
+ obj.week
|
||
+ (obj.year === "" ? "" : " " + obj.year)
|
||
})
|
||
watch(expression, () => resolveExp())
|
||
function shouldHide(key) {
|
||
return !(hideComponent.value && hideComponent.value.includes(key))
|
||
}
|
||
function resolveExp() {
|
||
// 反解析 表达式
|
||
if (expression.value) {
|
||
const arr = expression.value.split(/\s+/)
|
||
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] : ""
|
||
}
|
||
crontabValueObj.value = {
|
||
...obj,
|
||
}
|
||
}
|
||
} else {
|
||
// 没有传入的表达式 则还原
|
||
clearCron()
|
||
}
|
||
}
|
||
// tab切换值
|
||
function tabCheck(index) {
|
||
tabActive.value = index
|
||
}
|
||
// 由子组件触发，更改表达式组成的字段值
|
||
function updateCrontabValue(name, value, from) {
|
||
crontabValueObj.value[name] = value
|
||
}
|
||
// 表单选项的子组件校验数字格式（通过-props传递）
|
||
function checkNumber(value, minLimit, maxLimit) {
|
||
// 检查必须为整数
|
||
value = Math.floor(value)
|
||
if (value < minLimit) {
|
||
value = minLimit
|
||
} else if (value > maxLimit) {
|
||
value = maxLimit
|
||
}
|
||
return value
|
||
}
|
||
// 隐藏弹窗
|
||
function hidePopup() {
|
||
emit("hide")
|
||
}
|
||
// 填充表达式
|
||
function submitFill() {
|
||
emit("fill", crontabValueString.value)
|
||
hidePopup()
|
||
}
|
||
function clearCron() {
|
||
// 还原选择项
|
||
crontabValueObj.value = {
|
||
second: "*",
|
||
min: "*",
|
||
hour: "*",
|
||
day: "*",
|
||
month: "*",
|
||
week: "?",
|
||
year: "",
|
||
}
|
||
}
|
||
onMounted(() => {
|
||
expression.value = props.expression
|
||
hideComponent.value = props.hideComponent
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" 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 td:not(.result) {
|
||
width: 3.5rem;
|
||
min-width: 3.5rem;
|
||
max-width: 3.5rem;
|
||
}
|
||
.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> |