From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 27 五月 2025 17:52:03 +0800 Subject: [PATCH] 页面样式修改 --- src/components/Crontab/month.vue | 141 +++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 141 insertions(+), 0 deletions(-) diff --git a/src/components/Crontab/month.vue b/src/components/Crontab/month.vue new file mode 100644 index 0000000..e561ba4 --- /dev/null +++ b/src/components/Crontab/month.vue @@ -0,0 +1,141 @@ +<template> + <el-form> + <el-form-item> + <el-radio v-model='radioValue' :value="1"> + 鏈堬紝鍏佽鐨勯�氶厤绗, - * /] + </el-radio> + </el-form-item> + + <el-form-item> + <el-radio v-model='radioValue' :value="2"> + 鍛ㄦ湡浠� + <el-input-number v-model='cycle01' :min="1" :max="11" /> - + <el-input-number v-model='cycle02' :min="cycle01 + 1" :max="12" /> 鏈� + </el-radio> + </el-form-item> + + <el-form-item> + <el-radio v-model='radioValue' :value="3"> + 浠� + <el-input-number v-model='average01' :min="1" :max="11" /> 鏈堝紑濮嬶紝姣� + <el-input-number v-model='average02' :min="1" :max="12 - average01" /> 鏈堟湀鎵ц涓�娆� + </el-radio> + </el-form-item> + + <el-form-item> + <el-radio v-model='radioValue' :value="4"> + 鎸囧畾 + <el-select clearable v-model="checkboxList" placeholder="鍙閫�" multiple :multiple-limit="8"> + <el-option v-for="item in monthList" :key="item.key" :label="item.value" :value="item.key" /> + </el-select> + </el-radio> + </el-form-item> + </el-form> +</template> + +<script setup> +const emit = defineEmits(['update']) +const props = defineProps({ + cron: { + type: Object, + default: { + second: "*", + min: "*", + hour: "*", + day: "*", + month: "*", + week: "?", + year: "", + } + }, + check: { + type: Function, + default: () => { + } + } +}) +const radioValue = ref(1) +const cycle01 = ref(1) +const cycle02 = ref(2) +const average01 = ref(1) +const average02 = ref(1) +const checkboxList = ref([]) +const checkCopy = ref([1]) +const monthList = ref([ + {key: 1, value: '涓�鏈�'}, + {key: 2, value: '浜屾湀'}, + {key: 3, value: '涓夋湀'}, + {key: 4, value: '鍥涙湀'}, + {key: 5, value: '浜旀湀'}, + {key: 6, value: '鍏湀'}, + {key: 7, value: '涓冩湀'}, + {key: 8, value: '鍏湀'}, + {key: 9, value: '涔濇湀'}, + {key: 10, value: '鍗佹湀'}, + {key: 11, value: '鍗佷竴鏈�'}, + {key: 12, value: '鍗佷簩鏈�'} +]) +const cycleTotal = computed(() => { + cycle01.value = props.check(cycle01.value, 1, 11) + cycle02.value = props.check(cycle02.value, cycle01.value + 1, 12) + return cycle01.value + '-' + cycle02.value +}) +const averageTotal = computed(() => { + average01.value = props.check(average01.value, 1, 11) + average02.value = props.check(average02.value, 1, 12 - average01.value) + return average01.value + '/' + average02.value +}) +const checkboxString = computed(() => { + return checkboxList.value.join(',') +}) +watch(() => props.cron.month, value => changeRadioValue(value)) +watch([radioValue, cycleTotal, averageTotal, checkboxString], () => onRadioChange()) +function changeRadioValue(value) { + if (value === '*') { + radioValue.value = 1 + } else if (value.indexOf('-') > -1) { + const indexArr = value.split('-') + cycle01.value = Number(indexArr[0]) + cycle02.value = Number(indexArr[1]) + radioValue.value = 2 + } else if (value.indexOf('/') > -1) { + const indexArr = value.split('/') + average01.value = Number(indexArr[0]) + average02.value = Number(indexArr[1]) + radioValue.value = 3 + } else { + checkboxList.value = [...new Set(value.split(',').map(item => Number(item)))] + radioValue.value = 4 + } +} +function onRadioChange() { + switch (radioValue.value) { + case 1: + emit('update', 'month', '*', 'month') + break + case 2: + emit('update', 'month', cycleTotal.value, 'month') + break + case 3: + emit('update', 'month', averageTotal.value, 'month') + break + case 4: + if (checkboxList.value.length === 0) { + checkboxList.value.push(checkCopy.value[0]) + } else { + checkCopy.value = checkboxList.value + } + emit('update', 'month', checkboxString.value, 'month') + break + } +} +</script> + +<style lang="scss" scoped> +.el-input-number--small, .el-select, .el-select--small { + margin: 0 0.2rem; +} +.el-select, .el-select--small { + width: 18.8rem; +} +</style> \ No newline at end of file -- Gitblit v1.9.3