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
import React, { useEffect, useState } from 'react'
import { Radio, Checkbox, Row, Col } from 'antd'
import styles from './HourOfDaySelect.less'
const HourOfDaySelect = props => {
const { changeDay } = props
const [selectValues, setSelectValues] = useState([])
const { onChange, value } = props
const hours = [
{ name: "0:00", value: '0' },
{ name: "1:00", value: '1' },
{ name: "2:00", value: '2' },
{ name: "3:00", value: '3' },
{ name: "4:00", value: '4' },
{ name: "5:00", value: '5' },
{ name: "6:00", value: '6' },
{ name: "7:00", value: '7' },
{ name: "8:00", value: '8' },
{ name: "9:00", value: '9' },
{ name: "10:00", value: '10' },
{ name: "11:00", value: '11' },
{ name: "12:00", value: '12' },
{ name: "13:00", value: '13' },
{ name: "14:00", value: '14' },
{ name: "15:00", value: '15' },
{ name: "16:00", value: '16' },
{ name: "17:00", value: '17' },
{ name: "18:00", value: '18' },
{ name: "19:00", value: '19' },
{ name: "20:00", value: '20' },
{ name: "21:00", value: '21' },
{ name: "22:00", value: '22' },
{ name: "23:00", value: '23' },
]
const onTypeChange = e => {
let values = []
switch (e.target.value) {
case 0:
values = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
break
case 1:
const arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
let newArr = []
selectValues && arr.map(item => {
if (!selectValues.includes(item)) {
newArr.push(item)
}
})
values = newArr
break
case 2:
values = ["6", "8"]
break
case 3:
values = ["0", "8", "16"]
break
case 4:
values = ["0", "6", "12", "18"]
break
}
onChange && onChange(values)
setSelectValues(values)
changeDay(values)
}
useEffect(() => {
setSelectValues(value)
}, [props])
const onCheckChange = (value) => {
setSelectValues(value)
onChange && onChange(value)
changeDay(value)
}
return (
<div className={styles.hourOfDay_container}>
<Radio.Group onChange={onTypeChange} style={{ marginBottom: '0.5rem' }} >
<Radio style={{ width: '85px' }} value={0}>全选</Radio>
<Radio style={{ width: '85px' }} value={1}>反选</Radio>
<Radio style={{ width: '88px' }} value={2}>一天两次</Radio>
<Radio style={{ width: '88px' }} value={3}>一天三次</Radio>
<Radio style={{ width: '88px' }} value={4}>一天四次</Radio>
</Radio.Group>
<Checkbox.Group value={selectValues} onChange={onCheckChange}>
<Row>
{
hours.map((item, idx) => {
return (
<Col span={4} key={idx}>
<Checkbox value={item.value}>{item.name}</Checkbox>
</Col>
)
})
}
</Row>
</Checkbox.Group>
</div>
)
}
export default HourOfDaySelect;