VerifyModal.jsx 4.44 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12
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' },
13
    // { lable: '时间控制(timeControl)', value: 'timeControl' },
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
  ]); // 单选框数据
  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;
      }
    }
76 77 78
    let callValue = `${
      radioValue ? `${radioValue}${checkList.length > 0 ? ',' : ''}` : ''
    }${checkList.join(',')}`;
79 80 81 82 83 84 85 86 87 88 89 90 91
    callBackSubmit(callValue);
  };
  return (
    <div>
      <Modal
        width="600px"
        title="选择验证规则"
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
        maskClosable={false}
        destroyOnClose
      >
92
        <Radio.Group value={radioValue} style={{ display: 'flex', flexWrap: 'wrap' }}>
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
          {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}
        >
109 110 111 112 113
          <Checkbox value="required" style={{ marginBottom: '10px' }}>
            必填(required)
          </Checkbox>
          <Checkbox value="emphasis" style={{ marginBottom: '10px' }}>
            强调(emphasis)
114
          </Checkbox>
115 116 117
          {/* <Checkbox value="sensitive" style={{ marginBottom: '10px' }}>
            敏感(sensitive)
          </Checkbox> */}
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
          <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;