import React, { useEffect, useState } from 'react' import { Radio, Checkbox, Row, Col } from 'antd' const DayOfWeekSelect = props => { const {changeWeek} =props const [selectValues, setSelectValues] = useState([]) const { onChange, value } = props 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: values = ["1", "2", "3", "4", "5", "6", "7"] break case 1: const arr = ["1", "2", "3", "4", "5", "6", "7"] let newArr = [] selectValues && arr.map(item => { if (!selectValues.includes(item)) { newArr.push(item) } }) values = newArr break case 2: values = ["1", "2", "3", "4", "5"] break case 3: values = ["6", "7"] break } changeWeek(values) setSelectValues(values) onChange && onChange(values) } const onCheckChange = (value) => { setSelectValues(value) onChange && onChange(value) changeWeek(value) } useEffect(() => { setSelectValues(value) }, [props]) return ( <div > <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> </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 DayOfWeekSelect;