Radio与Check

import React, { Component, useState } from 'react'
import { Checkbox, Radio, Select, Modal } from 'antd'
// https://ant.design/components/overview-cn/
const CheckboxGroup = Checkbox.Group;
const { Option } = Select;


export default class CompanyAuto extends Component {
    constructor(props) {
        super(props)
        this.state = {
            checkOptions: [
                {
                    label:"日常报销",
                    value:"日常报销"
                },{
                    label:"差旅报销",
                    value:"差旅报销"
                },{
                    label:"付款申请",
                    value:"付款申请"
                },{
                    label:"借款申请",
                    value:"借款申请"
                }
            ],
            list: [
                {
                    audit_scope: 8,
                    warn_level: 1
                },
                {
                    audit_scope: 15,
                    warn_level: 0
                }
            ]
        }
    }

    componentDidMount() {
        const { currTab } = this.state
    }

    /* 审核类型全选 */
    onInvoiceCheckAllChange = (val, id) => {
        console.log('e,options',val , id)
    };
    /* 审核类型单选 */
    onInvoiceTypeChange = (val, id) => {
        console.log('e,options', val, id)
    };
    /* 审核力度 */
    typeRadioChange = (val, id) => {
        console.log('val, id', val, id);
    }

    render() {
        const { list, checkOptions } = this.state
        return (
            <div>
                {list.map((i,idx) => (
                    <React.Fragment key={`k${idx}`}>
                        <div key={`t${idx}`} style={{marginTop: "20px"}}>
                            <TypeCheckbox plainOptions={checkOptions} auditScope={i.audit_scope}
                            onInvoiceTypeSingleChange={(valTen) => this.onInvoiceTypeChange(valTen, idx)}
                            onInvoiceTypeCheckAllChange={(valTen) => this.onInvoiceCheckAllChange(valTen, idx)}></TypeCheckbox>
                        </div>
                        <div key={`l${idx}`}>
                            <TypeRadiobox radioChange={(val) => this.typeRadioChange(val, idx)} radVal={i.warn_level}></TypeRadiobox>
                        </div>
                    </React.Fragment>)
                )}
            </div>
        )
    }
}

const TypeCheckbox = (props) => {
    const { plainOptions, auditScope = 0 } = props
    const auditList = auditScope.toString(2).split("").reverse();   // 十进制转二进制展示
    let defaultCheckedList = [];
    plainOptions.forEach((ele, idx) => {
        if(auditList[idx] == 1){
            defaultCheckedList.push(ele.value)
        }
    });
    const [checkedList, setCheckedList] = useState(defaultCheckedList);
    const [indeterminate, setIndeterminate] = useState(!!defaultCheckedList.length && defaultCheckedList.length < plainOptions.length);
    const [checkAll, setCheckAll] = useState(defaultCheckedList.length === plainOptions.length);
    const [selectValue, setSelectValue] = useState('快车')

// 单选
    const onChange = (list) => {
        let checkList = plainOptions.map(e => {
            if( list.some(i => i === e.value ) ) {
                return 1
            } else {
                return 0
            }
        })
        setCheckedList(list);
        setIndeterminate(!!list.length && list.length < plainOptions.length);
        setCheckAll(list.length === plainOptions.length);
        // props.onInvoiceTypeSingleChange(list)
        // 二进制转十进制保存
        const twoConversionTen = parseInt(checkList.reverse().join(""), 2)
        props.onInvoiceTypeSingleChange(twoConversionTen)
    };

// 全选
    const onCheckAllChange = e => {
        Modal.confirm({
            content: '确定要修改吗?',
            type: 'warning',
            onOk: () => {
                const tList = e.target.checked ? plainOptions.map(item => item.value) : [];
                const checkList = e.target.checked ? plainOptions.map(item => 1) : plainOptions.map(item => 0);
                setCheckedList(tList);
                setIndeterminate(false);
                setCheckAll(e.target.checked);
                const twoConversionTen = parseInt(checkList.reverse().join(""), 2)  // 二进制转十进制保存
                props.onInvoiceTypeCheckAllChange(twoConversionTen)
            },
            onCancel: () => {}
        })
    };

    const handleSelectChange = e => {
        Modal.confirm({
            content: '确定要修改吗?',
            type: 'warning',
            onOk: () => {
                setSelectValue(e);
            },
            onCancel: () => {}
        })
        
    };

    const xOptionList = [{
        value: "快车"
    },{
        value: "专车"
    }]
    return (
        <div>
            <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
            全选
            </Checkbox>
            {/* <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> */}
            <Checkbox.Group value={checkedList} onChange={onChange}>
                {plainOptions.map((e, i) => {
                    return (
                        <React.Fragment>{e.label == "付款申请" ? (
                            <React.Fragment>
                                <Checkbox value={e.value}>{e.value}</Checkbox>
                                <Select value={selectValue} onChange={handleSelectChange}>
                                    {xOptionList.map((item,idx) => <Option value={item.value} key={idx}>{item.value}</Option>)}
                                </Select>
                            </React.Fragment>) : (
                            <Checkbox value={e.value}>{e.label}</Checkbox>
                        )}</React.Fragment>
                    )
                })}
            </Checkbox.Group>
        </div>
    )
}

const TypeRadiobox = (props) => {
    const radioOptions = [
        {
            "detail_name":"提示",
            value: 0
        },{
            "detail_name":"警告",
            value: 1
        },{
            "detail_name":"禁止提交",
            value: 2
        }
    ]
    const { radVal } = props
    
    const [radioVal, setRadioVal] = useState(radVal);

    const onRadioChange = e => {
        setRadioVal(e.target.value);
        props.radioChange(e.target.value)
    };
    return (
        <div>
            <Radio.Group
                onChange={onRadioChange}
                value={radioVal}
                >
                {radioOptions.map((i, index) => {
                    return (
                    <Radio value={i.value} key={i.detail_name}>
                        {i.detail_name}
                    </Radio>
                    );
                })}
            </Radio.Group>
        </div>
    )
}