import React, { useState, useEffect } from 'react'; import { Modal, Radio, Checkbox, Input, Row, Col, message } from 'antd'; const VerifyModal = props => { const { visible, onCancel, callBackSubmit, formObj } = props; const [radioValue, setRadioValue] = useState(); const [radioOptions] = useState([ { lable: '数值(number)', value: 'number' }, { lable: '整数(digits)', value: 'digits' }, { lable: '邮箱(email)', value: 'email' }, { lable: '身份证号(identity)', value: 'identity' }, { lable: '手机号(mobile)', value: 'mobile' }, { lable: '银行卡号(bankAccount)', value: 'bankAccount' }, { lable: '时间控制(timeControl)', value: 'timeControl' }, ]); // 单选框数据 const [checkDefaultValue, setCheckDefaultValue] = useState([]); // 复选框选择的数据 const [maxLengthVlaue, setMaxLengthVlaue] = useState(''); // 最大字节长度值 const [hasMaxlength, setHasMaxlength] = useState(); // 是否有勾选最大字节长度规则 useEffect(() => { if (visible) { setRadioValue(formObj.numerical); let chooseObj = formObj.rule.map(item => { if (item.indexOf('maxLength') !== -1) { setMaxLengthVlaue(item.split(':')[1]); return 'maxLength'; } return item; }); setCheckDefaultValue(chooseObj); } }, [visible]); useEffect(() => { let hasMax = checkDefaultValue.some(item => item === 'maxLength'); setHasMaxlength(hasMax); if (!hasMax) { setMaxLengthVlaue(''); } }, [checkDefaultValue]); // 单选框change事件 const radioOnChange = e => { if (e.target.value === radioValue) { setRadioValue(''); } else { setRadioValue(e.target.value); } }; // 复选框change事件 const CheckboxOnChange = e => { setCheckDefaultValue(e); }; // maxleng值监听 const maxLengthChange = e => { e.persist(); setMaxLengthVlaue(e.target.value); }; // 保存选择规则 const onOk = () => { let checkList = JSON.parse(JSON.stringify(checkDefaultValue)); checkList = checkList.map(item => { if (item === 'maxLength') { return `maxLength:${maxLengthVlaue}`; } return item; }); if (hasMaxlength) { if (maxLengthVlaue === '') { message.error('请输入字节最大长度'); return; } const posReg = /^\d+$/; if (!posReg.test(Number(maxLengthVlaue))) { message.error('请输入数字'); return; } } let callValue = `${radioValue ? `${radioValue},` : ''}${checkList.join( ',', )}`; callBackSubmit(callValue); }; return ( <div> <Modal width="600px" title="选择验证规则" visible={visible} onOk={onOk} onCancel={onCancel} maskClosable={false} destroyOnClose > <Radio.Group value={radioValue} style={{ display: 'flex', flexWrap: 'wrap' }} > {radioOptions.map(item => ( <Radio value={item.value} key={item.value} onClick={radioOnChange} style={{ marginBottom: '10px' }} > {item.lable} </Radio> ))} </Radio.Group> <Checkbox.Group style={{ width: '100%', margin: '10px 0' }} onChange={CheckboxOnChange} defaultValue={checkDefaultValue} > <Checkbox value="required">必填(required)</Checkbox> <Checkbox value="emphasis">强调(emphasis)</Checkbox> <Checkbox value="sensitive" style={{ marginBottom: '10px' }}> 敏感(sensitive) </Checkbox> <br /> <Input.Group size="small"> <Row gutter={16}> <Col span={9}> <Checkbox value="maxLength">字节最大长度(maxLength):</Checkbox> </Col> <Col span={8}> <Input disabled={!hasMaxlength} value={maxLengthVlaue} size="small" style={{ width: '150px' }} onChange={maxLengthChange} placeholder="请输入maxLength" /> </Col> </Row> </Input.Group> </Checkbox.Group> </Modal> </div> ); }; export default VerifyModal;