1
2
3
4
5
6
7
8
9
10
11
12
13
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
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
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.length > 0 ? ',' : ''}` : ''
}${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" style={{ marginBottom: '10px' }}>
必填(required)
</Checkbox>
<Checkbox value="emphasis" style={{ marginBottom: '10px' }}>
强调(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;