year.vue
3.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<script lang="ts" setup name="Year">
import { ref, computed } from 'vue'
const props = defineProps({
value: {
type: String,
default: '*'
}
})
const emits = defineEmits(["input"])
const year = new Date().getFullYear()
const type = ref('1')
// 周期
const cycle = ref({ start: year, end: year })
// 循环
const loop = ref({ start: 0, end: 0 })
// 指定周
const week = ref({ start: 0, end: 0 })
const work = ref(0)
const last = ref(0)
const appoint = ref([])
const value_ = computed(() => {
let result: any = []
switch (type.value) {
case '1': // 每秒
result.push('*');
break;
case '2': // 年期
result.push(`${cycle.value.start}-${cycle.value.end}`);
break;
case '3': // 循环
result.push(`${loop.value.start}/${loop.value.end}`);
break;
case '4': // 指定
result.push(appoint.value.join(','));
break;
case '6': // 最后
result.push(`${last.value === 0 ? '' : last.value}L`);
break;
default:
// 不指定
result.push('');
break;
}
emits('input', result.join(''))
return result.join('');
});
const updateVal = (val) => {
if (!val) {
type.value = '5';
} else if (val.indexOf('-') !== -1) {
// 2周期
if (val.split('-').length === 2) {
type.value = '2';
cycle.value.start = val.split('-')[0];
cycle.value.end = val.split('-')[1];
}
} else if (val.indexOf('/') !== -1) {
// 3循环
if (val.split('/').length === 2) {
type.value = '3';
loop.value.start = val.split('/')[0];
loop.value.end = val.split('/')[1];
}
} else if (val.indexOf('*') !== -1) {
// 1每
type.value = '1';
} else if (val.indexOf('L') !== -1) {
// 6最后
type.value = '6';
last.value = val.replace('L', '');
} else if (val.indexOf('#') !== -1) {
// 7指定周
if (val.split('#').length === 2) {
type.value = '7';
week.value.start = val.split('#')[0];
week.value.end = val.split('#')[1];
}
} else if (val.indexOf('W') !== -1) {
// 8工作日
type.value = '8';
work.value = val.replace('W', '');
} else {
// *
type.value = '4';
appoint.value = val.split(',');
}
}
watch(() => props.value, (newVal, oldVal) => {
updateVal(newVal)
}, {
immediate: true
})
</script>
<template>
<div :val="value_">
<div class="pd1">
<el-radio v-model="type" label="1" size="small" border>每年</el-radio>
</div>
<div class="pd1">
<el-radio v-model="type" label="5" size="small" border>不指定</el-radio>
</div>
<div class="pd1">
<el-radio v-model="type" label="2" size="small" border>周期</el-radio>
<span style="margin-left: 10px; margin-right: 5px">从</span>
<el-input-number v-model.trim="cycle.start" :min="2000" size="small" style="width: 100px" @change="type = '2'" />
<span style="margin-left: 5px; margin-right: 5px">至</span>
<el-input-number v-model.trim="cycle.end" :min="2000" size="small" style="width: 100px" @change="type = '2'" />
年
</div>
</div>
</template>
<style lang="scss" scoped>
.pd1 {
padding: 6px 0 6px 0;
}
</style>