hwmom-ui/src/components/Crontab/week.vue

<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 setup lang="ts" name="CrontabWeek">
import { ref, computed, watch, defineProps, defineEmits } from 'vue';

const props = defineProps({
	check: {
		type: Function,
		required: true
	},
	cron: {
		type: Object,
		default: () => ({})
	}
});

const emit = defineEmits(['update']);

const radioValue = ref(2);
const weekday = ref(2);
const cycle01 = ref(2);
const cycle02 = ref(3);
const average01 = ref(1);
const average02 = ref(2);
const checkboxList = ref([]);

const weekList = ref([
	{
		key: 2,
		value: '星期一'
	},
	{
		key: 3,
		value: '星期二'
	},
	{
		key: 4,
		value: '星期三'
	},
	{
		key: 5,
		value: '星期四'
	},
	{
		key: 6,
		value: '星期五'
	},
	{
		key: 7,
		value: '星期六'
	},
	{
		key: 1,
		value: '星期日'
	}
]);

// 计算两个周期值
const cycleTotal = computed(() => {
	const cycleVal01 = props.check(cycle01.value, 1, 7);
	const cycleVal02 = props.check(cycle02.value, 1, 7);
	return `${cycleVal01}-${cycleVal02}`;
});

// 计算平均用到的值
const averageTotal = computed(() => {
	const averageVal01 = props.check(average01.value, 1, 4);
	const averageVal02 = props.check(average02.value, 1, 7);
	return `${averageVal02}#${averageVal01}`;
});

// 最近的工作日（格式）
const weekdayCheck = computed(() => {
	return props.check(weekday.value, 1, 7);
});

// 计算勾选的checkbox值合集
const checkboxString = computed(() => {
	let str = checkboxList.value.join();
	return str === '' ? '*' : str;
});

// 单选按钮值变化时
const radioChange = () => {
	if (radioValue.value !== 2 && props.cron.day !== '?') {
		emit('update', 'day', '?', 'week');
	}
	switch (radioValue.value) {
		case 1:
			emit('update', 'week', '*');
			break;
		case 2:
			emit('update', 'week', '?');
			break;
		case 3:
			emit('update', 'week', cycleTotal.value);
			break;
		case 4:
			emit('update', 'week', averageTotal.value);
			break;
		case 5:
			emit('update', 'week', weekdayCheck.value + 'L');
			break;
		case 6:
			emit('update', 'week', checkboxString.value);
			break;
	}
};

// 周期两个值变化时
const cycleChange = () => {
	if (radioValue.value === 3) {
		emit('update', 'week', cycleTotal.value);
	}
};

// 平均两个值变化时
const averageChange = () => {
	if (radioValue.value === 4) {
		emit('update', 'week', averageTotal.value);
	}
};

// 最近工作日值变化时
const weekdayChange = () => {
	if (radioValue.value === 5) {
		emit('update', 'week', weekday.value + 'L');
	}
};

// checkbox值变化时
const checkboxChange = () => {
	if (radioValue.value === 6) {
		emit('update', 'week', checkboxString.value);
	}
};

// 监听变化
watch(() => radioValue.value, radioChange);
watch(() => cycleTotal.value, cycleChange);
watch(() => averageTotal.value, averageChange);
watch(() => weekdayCheck.value, weekdayChange);
watch(() => checkboxString.value, checkboxChange);
</script>