import React from 'react';
import { Modal, Form, Input, Button, InputNumber, Select, Checkbox, Radio, DatePicker } from 'antd';
import moment from 'moment'
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
export default class ModalCom extends React.Component {
state = {
visible: false,
value: 0,
createForm: {}
};
// Modal相关
showModal = () => {
this.setState({
visible: true,
createForm: {
account: "123",
name: "abc",
space: 1,
private: 2,
level: "1",
server: "1",
date_Time: [moment("2021-4-16", 'YYYY-MM-DD'), moment("2021-4-22", 'YYYY-MM-DD')]
}
});
}
// 表单相关
formRef = React.createRef(); // 定义一个表单
handleOk = () => {
this.formRef.current.validateFields()
.then(values => {
this.setState({
visible: false
});
console.log("表单值:");
console.log(values);
})
.catch(info => {
console.log('Validate Failed:', info);
});
}
handCancel = e => {
this.formRef.current.resetFields();
this.setState({
visible: false
})
}
render() {
return (<>
<Button type="primary" onClick={this.showModal}>
创建
</Button>
<Modal
title="创建"
visible={this.state.visible}
width={660}
onOk={this.handleOk}
onCancel={this.handCancel}
okText="确认"
cancelText="取消"
maskClosable={false}
destroyOnClose={true}
>
<Form labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} ref={this.formRef} name="control-ref" preserve={false} initialValues={this.state.createForm}>
<Form.Item label="账号" style={{ marginBottom: 0 }}>
<Form.Item
name="account"
style={{ display: 'inline-block', width: 'calc(80% - 8px)', marginRight: 15 }}
rules={[
{
required: true,
message: "账号不能为空"
},
{
pattern: /^[a-zA-Z0-9_()()\u4e00-\u9fa5]{1,32}$/,
message: "账号为1至32位汉字、字母、数字、下划线或中英文括号"
},
]}
>
<Input />
</Form.Item>
<Form.Item
style={{ display: 'inline-block', width: 'calc(20% - 8px)' }}
>
<Checkbox>USBKEY</Checkbox>
</Form.Item>
</Form.Item>
<Form.Item label="姓名" style={{ marginBottom: 0 }}>
<Form.Item
name="name"
style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
rules={[
{
required: true,
message: "姓名不能为空"
},
{
pattern: /^[a-zA-Z0-9_()()\u4e00-\u9fa5]{1,32}$/,
message: "姓名为1至32位汉字、字母、数字、下划线或中英文括号"
},
]}
>
<Input />
</Form.Item>
</Form.Item>
<Form.Item label="个人空间配额">
<Form.Item
name="space"
noStyle
rules={[{
required: true,
message: "个人空间配额不能为空"
}, {
type: 'number',
min: 1,
max: 100,
message: "个人空间配额为1-100之间整数"
}
]}
>
<InputNumber style={{ width: 160, marginRight: 15 }} placeholder="1-100之间整数" />
</Form.Item>
G
</Form.Item>
<Form.Item label="私密空间配额">
<Form.Item
name="private"
noStyle
rules={[
{
required: true,
message: "私密空间配额不能为空"
}, {
type: 'number',
min: 1,
max: 100,
message: "私密空间配额为1-100之间整数"
}
]}
>
<InputNumber style={{ width: 160, marginRight: 15 }} placeholder="1-100之间整数" />
</Form.Item>
G
</Form.Item>
<Form.Item label="证书级别" style={{ marginBottom: 0 }}>
<Form.Item
name="level"
style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
rules={[
{
required: true,
message: "证书级别不能为空"
},
]}
>
<Select
placeholder="请选择证书级别"
allowClear
>
<Select.Option value="1">一级</Select.Option>
<Select.Option value="2">二级</Select.Option>
</Select>
</Form.Item>
</Form.Item>
<Form.Item label="存储服务器" style={{ marginBottom: 0 }}>
<Form.Item
name="server"
style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
rules={[
{
required: true,
message: "存储服务器不能为空"
},
]}
>
<Select
placeholder="请选择存储服务器"
allowClear
>
<Select.Option value="1">服务器一</Select.Option>
<Select.Option value="2">服务器二</Select.Option>
</Select>
</Form.Item>
</Form.Item>
<Form.Item
name="share"
label="是否允许中心共享"
rules={[
{
required: true,
message: "中心共享不能为空"
},
]}
>
<Radio.Group name="radiogroup">
<Radio value={1}>是</Radio>
<Radio value={0}>否</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="日期" style={{ marginBottom: 0 }}>
<Form.Item
name="date_Time"
style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
rules={[
{
required: true,
message: "日期不能为空"
}
]}
>
<DatePicker.RangePicker locale={locale} />
</Form.Item>
</Form.Item>
</Form>
</Modal>
</>)
}
}
其中:
<Form labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} ref={this.formRef} name="control-ref" preserve={false} initialValues={this.state.createForm}>
<Form.Item label="日期" style={{ marginBottom: 0 }}>
<Form.Item
name="date_Time"
style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
rules={[
{
required: true,
message: "日期不能为空"
}
]}
>
<DatePicker.RangePicker locale={locale} />
</Form.Item>
</Form.Item>
</Form>
date_Time: [moment("2021-4-16", 'YYYY-MM-DD'), moment("2021-4-22", 'YYYY-MM-DD')]
是关键。