112 lines
4.8 KiB
TypeScript
112 lines
4.8 KiB
TypeScript
import React, { Component } from 'react';
|
|
import { Button, Checkbox, Input, Form, Radio, DatePicker, Row, Col } from 'tdesign-react';
|
|
import { DateTime } from 'luxon';
|
|
const { FormItem } = Form;
|
|
|
|
export default function render() {
|
|
const { gender, birth, GenderOptions, IDCardTypeOptions } = this.state;
|
|
return (
|
|
<div
|
|
style={{
|
|
height: '100vh',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: 16,
|
|
}}
|
|
>
|
|
<Row>
|
|
<Col xs={12} sm={4}>
|
|
<Form labelWidth="100px" colon={true}>
|
|
<FormItem label="昵称" requiredMark>
|
|
<>
|
|
<Input
|
|
onChange={(value) => {
|
|
this.setUpdateData('nickname', value);
|
|
}}
|
|
value={this.state.nickname}
|
|
/>
|
|
</>
|
|
</FormItem>
|
|
<FormItem label="姓名" requiredMark>
|
|
<>
|
|
<Input
|
|
onChange={(value) => {
|
|
this.setUpdateData('name', value);
|
|
}}
|
|
value={this.state.name}
|
|
/>
|
|
</>
|
|
</FormItem>
|
|
<FormItem label="出生日期" requiredMark>
|
|
<>
|
|
<DatePicker
|
|
allowInput={false}
|
|
clearable={false}
|
|
enableTimePicker={false}
|
|
mode="date"
|
|
presetsPlacement="bottom"
|
|
value={
|
|
this.state.birth
|
|
? DateTime.fromMillis(
|
|
this.state.birth
|
|
).toFormat('yyyy-LL-dd')
|
|
: ''
|
|
}
|
|
onChange={(value) => {
|
|
const val =
|
|
DateTime.fromISO(value).toMillis();
|
|
this.setUpdateData('birth', val);
|
|
}}
|
|
valueType="YYYY-MM-DD"
|
|
/>
|
|
</>
|
|
</FormItem>
|
|
|
|
<FormItem label="性别" requiredMark>
|
|
<>
|
|
<Radio.Group
|
|
options={GenderOptions}
|
|
onChange={(value) => {
|
|
this.setUpdateData('gender', value);
|
|
}}
|
|
value={this.state.gender}
|
|
/>
|
|
</>
|
|
</FormItem>
|
|
<FormItem label="证件类别" requiredMark>
|
|
<>
|
|
<Radio.Group
|
|
options={IDCardTypeOptions}
|
|
onChange={(value) => {
|
|
this.setUpdateData('idCardType', value);
|
|
}}
|
|
value={this.state.idCardType}
|
|
/>
|
|
</>
|
|
</FormItem>
|
|
<FormItem label="证件号" requiredMark>
|
|
<>
|
|
<Input
|
|
onChange={(value) => {
|
|
this.setUpdateData('idNumber', value);
|
|
}}
|
|
/>
|
|
</>
|
|
</FormItem>
|
|
<FormItem style={{ marginLeft: 100 }}>
|
|
<Button
|
|
theme="primary"
|
|
onClick={(event) => {
|
|
this.confirm();
|
|
}}
|
|
>
|
|
确定
|
|
</Button>
|
|
</FormItem>
|
|
</Form>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
}
|