DayOfWeekSelect.jsx 2.6 KB
Newer Older
1 2 3 4 5 6
import React, { useEffect, useState } from 'react'
import { Radio, Checkbox, Row, Col } from 'antd'


const DayOfWeekSelect = props => {

7
    const {changeWeek} =props
8 9

    const [selectValues, setSelectValues] = useState([])
10 11
    const { onChange, value } = props

12 13 14 15 16 17 18 19 20 21 22 23 24
    const hours = [
        { name: "星期一", value: '1' },
        { name: "星期二", value: '2' },
        { name: "星期三", value: '3' },
        { name: "星期四", value: '4' },
        { name: "星期五", value: '5' },
        { name: "星期六", value: '6' },
        { name: "星期天", value: '7' },
    ]
    const onTypeChange = e => {
        let values = []
        switch (e.target.value) {
            case 0:
25
                values = ["1", "2", "3", "4", "5", "6", "7"]
26 27
                break
            case 1:
28 29 30 31 32 33 34 35
                const arr = ["1", "2", "3", "4", "5", "6", "7"]
                let newArr = []
                selectValues && arr.map(item => {
                    if (!selectValues.includes(item)) {
                        newArr.push(item)
                    }
                })
                values = newArr
36 37
                break
            case 2:
38
                values = ["1", "2", "3", "4", "5"]
39 40
                break
            case 3:
41
                values = ["6", "7"]
42
                break
43

44
        }
45
        changeWeek(values)
46
        setSelectValues(values)
47
        onChange && onChange(values)
48 49
    }

50
    const onCheckChange = (value) => {
51
        setSelectValues(value)
52 53
        onChange && onChange(value)
        changeWeek(value)
54
    }
55
    useEffect(() => {
56
        setSelectValues(value)
57
    }, [props])
58 59
    return (
        <div >
60 61 62 63 64
            <Radio.Group onChange={onTypeChange} style={{ margin: '0.25rem 0' }} >
                <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>
65 66 67 68 69 70
            </Radio.Group>
            <Checkbox.Group value={selectValues} onChange={onCheckChange}>
                <Row>
                    {
                        hours.map((item, idx) => {
                            return (
shaoan123's avatar
shaoan123 committed
71
                                <Col span={4} key={idx}>
72 73 74 75 76 77 78
                                    <Checkbox value={item.value}>{item.name}</Checkbox>
                                </Col>
                            )
                        })
                    }
                </Row>
            </Checkbox.Group>
79
           
80 81 82 83
        </div>
    )
}
export default DayOfWeekSelect;