huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-22 23:31:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: crontab components

Browse Source
This commit is contained in:
xingyu 2022-07-28 23:08:16 +08:00
parent 291f31be98
commit 3257b55718
11 changed files with 514 additions and 499 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
yudao-ui-admin-vue3/src/components/Crontab/index.ts Normal file
View File

@ -0,0 +1,3 @@
import Crontab from './src/index.vue'
export { Crontab }

111
yudao-ui-admin-vue3/src/components/Crontab/day.vue → yudao-ui-admin-vue3/src/components/Crontab/src/components/day.vue
View File

@ -1,60 +1,6 @@
<template>
<el-form size="small">
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 日，允许的通配符[, - * ? / L W] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2"> 不指定 </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
周期从
<el-input-number v-model="cycle01" :min="1" :max="30" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 2" :max="31" /> 日
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
从
<el-input-number v-model="average01" :min="1" :max="30" /> 号开始，每
<el-input-number v-model="average02" :min="1" :max="31 - average01 || 1" /> 日执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="5">
每月
<el-input-number v-model="workday" :min="1" :max="31" /> 号最近的那个工作日
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="6"> 本月最后一天 </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="7">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 31" :key="item" :value="item">{{ item }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElForm, ElFormItem, ElRadio, ElSelect, ElOption, ElInputNumber } from 'element-plus'
const props = defineProps({
check: {
type: Function,
@ -172,3 +118,56 @@ watch(checkboxString, () => {
}
})
</script>
<template>
<el-form>
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 日，允许的通配符[, - * ? / L W] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2"> 不指定 </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
周期从
<el-input-number v-model="cycle01" :min="1" :max="30" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 2" :max="31" /> 日
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
从
<el-input-number v-model="average01" :min="1" :max="30" /> 号开始，每
<el-input-number v-model="average02" :min="1" :max="31 - average01 || 1" /> 日执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="5">
每月
<el-input-number v-model="workday" :min="1" :max="31" /> 号最近的那个工作日
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="6"> 本月最后一天 </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="7">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 31" :key="item" :value="item">{{ item }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>

81
yudao-ui-admin-vue3/src/components/Crontab/hour.vue → yudao-ui-admin-vue3/src/components/Crontab/src/components/hour.vue
View File

@ -1,45 +1,6 @@
<template>
<el-form size="small">
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 小时，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2">
周期从
<el-input-number v-model="cycle01" :min="0" :max="22" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 1" :max="23" /> 小时
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
从
<el-input-number v-model="average01" :min="0" :max="22" /> 小时开始，每
<el-input-number v-model="average02" :min="1" :max="23 - average01 || 0" /> 小时执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 24" :key="item" :value="item - 1">{{ item - 1 }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElForm, ElFormItem, ElRadio, ElSelect, ElOption, ElInputNumber } from 'element-plus'
const props = defineProps({
check: {
type: Function,
@ -119,3 +80,41 @@ watch(radioValue, () => {
}
})
</script>
<template>
<el-form>
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 小时，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2">
周期从
<el-input-number v-model="cycle01" :min="0" :max="22" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 1" :max="23" /> 小时
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
从
<el-input-number v-model="average01" :min="0" :max="22" /> 小时开始，每
<el-input-number v-model="average02" :min="1" :max="23 - average01 || 0" /> 小时执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 24" :key="item" :value="item - 1">{{ item - 1 }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>

19
yudao-ui-admin-vue3/src/components/Crontab/src/components/index.ts Normal file
View File

@ -0,0 +1,19 @@
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 {
CrontabSecond,
CrontabMin,
CrontabHour,
CrontabDay,
CrontabMonth,
CrontabWeek,
CrontabYear,
CrontabResult
}

81
yudao-ui-admin-vue3/src/components/Crontab/min.vue → yudao-ui-admin-vue3/src/components/Crontab/src/components/min.vue
View File

@ -1,45 +1,6 @@
<template>
<el-form size="small">
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 分钟，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2">
周期从
<el-input-number v-model="cycle01" :min="0" :max="58" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 分钟
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
从
<el-input-number v-model="average01" :min="0" :max="58" /> 分钟开始，每
<el-input-number v-model="average02" :min="1" :max="59 - average01 || 0" /> 分钟执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 60" :key="item" :value="item - 1">{{ item - 1 }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElForm, ElFormItem, ElRadio, ElSelect, ElOption, ElInputNumber } from 'element-plus'
const props = defineProps({
check: {
type: Function,
@ -119,3 +80,41 @@ watch(radioValue, () => {
}
})
</script>
<template>
<el-form>
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 分钟，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2">
周期从
<el-input-number v-model="cycle01" :min="0" :max="58" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 分钟
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
从
<el-input-number v-model="average01" :min="0" :max="58" /> 分钟开始，每
<el-input-number v-model="average02" :min="1" :max="59 - average01 || 0" /> 分钟执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 60" :key="item" :value="item - 1">{{ item - 1 }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>

81
yudao-ui-admin-vue3/src/components/Crontab/month.vue → yudao-ui-admin-vue3/src/components/Crontab/src/components/month.vue
View File

@ -1,45 +1,6 @@
<template>
<el-form size="small">
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 月，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2">
周期从
<el-input-number v-model="cycle01" :min="1" :max="11" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 2" :max="12" /> 月
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
从
<el-input-number v-model="average01" :min="1" :max="11" /> 月开始，每
<el-input-number v-model="average02" :min="1" :max="12 - average01 || 0" /> 月月执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 12" :key="item" :value="item">{{ item }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElForm, ElFormItem, ElRadio, ElSelect, ElOption, ElInputNumber } from 'element-plus'
const props = defineProps({
check: {
type: Function,
@ -119,3 +80,41 @@ watch(radioValue, () => {
}
})
</script>
<template>
<el-form>
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 月，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2">
周期从
<el-input-number v-model="cycle01" :min="1" :max="11" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 2" :max="12" /> 月
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
从
<el-input-number v-model="average01" :min="1" :max="11" /> 月开始，每
<el-input-number v-model="average02" :min="1" :max="12 - average01 || 0" /> 月月执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 12" :key="item" :value="item">{{ item }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>

25
yudao-ui-admin-vue3/src/components/Crontab/result.vue → yudao-ui-admin-vue3/src/components/Crontab/src/components/result.vue
View File

@ -1,16 +1,4 @@
<template>
<div class="popup-result">
<p class="title">最近5次运行时间</p>
<ul class="popup-result-scroll">
<template v-if="isShow">
<li v-for="item in resultList" :key="item">{{ item }}</li>
</template>
<li v-else>计算结果中...</li>
</ul>
</div>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
const props = defineProps({
@ -572,3 +560,14 @@ function checkDate(value) {
return value === format
}
</script>
<template>
<div class="popup-result">
<p class="title">最近5次运行时间</p>
<ul class="popup-result-scroll">
<template v-if="isShow">
<li v-for="item in resultList" :key="item">{{ item }}</li>
</template>
<li v-else>计算结果中...</li>
</ul>
</div>
</template>

81
yudao-ui-admin-vue3/src/components/Crontab/second.vue → yudao-ui-admin-vue3/src/components/Crontab/src/components/second.vue
View File

@ -1,45 +1,6 @@
<template>
<el-form size="small">
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 秒，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2">
周期从
<el-input-number v-model="cycle01" :min="0" :max="58" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 秒
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
从
<el-input-number v-model="average01" :min="0" :max="58" /> 秒开始，每
<el-input-number v-model="average02" :min="1" :max="59 - average01 || 0" /> 秒执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 60" :key="item" :value="item - 1">{{ item - 1 }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElForm, ElFormItem, ElRadio, ElSelect, ElOption, ElInputNumber } from 'element-plus'
const props = defineProps({
check: {
type: Function,
@ -119,3 +80,41 @@ watch(radioValue, () => {
}
})
</script>
<template>
<el-form>
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 秒，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2">
周期从
<el-input-number v-model="cycle01" :min="0" :max="58" /> -
<el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 秒
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
从
<el-input-number v-model="average01" :min="0" :max="58" /> 秒开始，每
<el-input-number v-model="average02" :min="1" :max="59 - average01 || 0" /> 秒执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option v-for="item in 60" :key="item" :value="item - 1">{{ item - 1 }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>

185
yudao-ui-admin-vue3/src/components/Crontab/week.vue → yudao-ui-admin-vue3/src/components/Crontab/src/components/week.vue
View File

@ -1,97 +1,6 @@
<template>
<el-form size="small">
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 周，允许的通配符[, - * ? / L #] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2"> 不指定 </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
周期从星期
<el-select clearable v-model="cycle01">
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="item.key"
:disabled="item.key === 1"
>{{ item.value }}</el-option
>
</el-select>
-
<el-select clearable v-model="cycle02">
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="item.key"
:disabled="item.key < cycle01 && item.key !== 1"
>{{ item.value }}</el-option
>
</el-select>
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
第
<el-input-number v-model="average01" :min="1" :max="4" /> 周的星期
<el-select clearable v-model="average02">
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="item.key"
>{{ item.value }}</el-option
>
</el-select>
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="5">
本月最后一个星期
<el-select clearable v-model="weekday">
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="item.key"
>{{ item.value }}</el-option
>
</el-select>
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="6">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="String(item.key)"
>{{ item.value }}</el-option
>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElForm, ElFormItem, ElRadio, ElSelect, ElOption, ElInputNumber } from 'element-plus'
const props = defineProps({
check: {
type: Function,
@ -222,3 +131,93 @@ watch(radioValue, () => {
}
})
</script>
<template>
<el-form>
<el-form-item>
<el-radio v-model="radioValue" :label="1"> 周，允许的通配符[, - * ? / L #] </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="2"> 不指定 </el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="3">
周期从星期
<el-select clearable v-model="cycle01">
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="item.key"
:disabled="item.key === 1"
>{{ item.value }}</el-option
>
</el-select>
-
<el-select clearable v-model="cycle02">
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="item.key"
:disabled="item.key < cycle01 && item.key !== 1"
>{{ item.value }}</el-option
>
</el-select>
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="4">
第
<el-input-number v-model="average01" :min="1" :max="4" /> 周的星期
<el-select clearable v-model="average02">
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="item.key"
>{{ item.value }}</el-option
>
</el-select>
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="5">
本月最后一个星期
<el-select clearable v-model="weekday">
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="item.key"
>{{ item.value }}</el-option
>
</el-select>
</el-radio>
</el-form-item>
<el-form-item>
<el-radio v-model="radioValue" :label="6">
指定
<el-select
clearable
v-model="checkboxList"
placeholder="可多选"
multiple
style="width: 100%"
>
<el-option
v-for="(item, index) of weekList"
:key="index"
:label="item.value"
:value="String(item.key)"
>{{ item.value }}</el-option
>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>

97
yudao-ui-admin-vue3/src/components/Crontab/year.vue → yudao-ui-admin-vue3/src/components/Crontab/src/components/year.vue
View File

@ -1,53 +1,6 @@
<template>
<el-form size="small">
<el-form-item>
<el-radio label="1" v-model="radioValue"> 不填，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio label="2" v-model="radioValue"> 每年 </el-radio>
</el-form-item>
<el-form-item>
<el-radio label="3" v-model="radioValue">
周期从
<el-input-number v-model="cycle01" :min="fullYear" :max="2098" /> -
<el-input-number
v-model="cycle02"
:min="cycle01 ? cycle01 + 1 : fullYear + 1"
:max="2099"
/>
</el-radio>
</el-form-item>
<el-form-item>
<el-radio label="4" v-model="radioValue">
从
<el-input-number v-model="average01" :min="fullYear" :max="2098" /> 年开始，每
<el-input-number v-model="average02" :min="1" :max="2099 - average01 || fullYear" />
年执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio label="5" v-model="radioValue">
指定
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple>
<el-option
v-for="item in 9"
:key="item"
:value="item - 1 + fullYear"
:label="item - 1 + fullYear"
/>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { ElForm, ElFormItem, ElRadio, ElSelect, ElOption, ElInputNumber } from 'element-plus'
const props = defineProps({
check: {
type: Function,
@ -138,3 +91,49 @@ onMounted(() => {
average01.value = fullYear.value
})
</script>
<template>
<el-form>
<el-form-item>
<el-radio label="1" v-model="radioValue"> 不填，允许的通配符[, - * /] </el-radio>
</el-form-item>
<el-form-item>
<el-radio label="2" v-model="radioValue"> 每年 </el-radio>
</el-form-item>
<el-form-item>
<el-radio label="3" v-model="radioValue">
周期从
<el-input-number v-model="cycle01" :min="fullYear" :max="2098" /> -
<el-input-number
v-model="cycle02"
:min="cycle01 ? cycle01 + 1 : fullYear + 1"
:max="2099"
/>
</el-radio>
</el-form-item>
<el-form-item>
<el-radio label="4" v-model="radioValue">
从
<el-input-number v-model="average01" :min="fullYear" :max="2098" /> 年开始，每
<el-input-number v-model="average02" :min="1" :max="2099 - average01 || fullYear" />
年执行一次
</el-radio>
</el-form-item>
<el-form-item>
<el-radio label="5" v-model="radioValue">
指定
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple>
<el-option
v-for="item in 9"
:key="item"
:value="item - 1 + fullYear"
:label="item - 1 + fullYear"
/>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</template>

249
yudao-ui-admin-vue3/src/components/Crontab/index.vue → yudao-ui-admin-vue3/src/components/Crontab/src/index.vue
View File

@ -1,126 +1,15 @@
<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" />
<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 lang="ts" 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'
<script setup lang="ts">
import {
CrontabSecond,
CrontabMin,
CrontabHour,
CrontabDay,
CrontabMonth,
CrontabWeek,
CrontabYear,
CrontabResult
} from './components'
import { ElTabs, ElTabPane } from 'element-plus'
import { computed, defineEmits, defineProps, onMounted, Ref, ref, watch } from 'vue'
const cronsecond = ref(null)
@ -208,7 +97,7 @@ function updateCrontabValue(name, value, from) {
changeRadio(name, value)
}
}
// 赋值到组件
function changeRadio(name, value) {
let arr = ['second', 'min', 'hour', 'month'],
refName = 'cron' + name,
@ -373,7 +262,119 @@ function clearCron() {
watch(() => props.expression, resolveExp)
</script>
<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" />
<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>
<style scoped>
.pop_btn {
text-align: center;