forked from Gitlink/forgeplus-react
专家注册页面代码优化（table->form表单）
This commit is contained in:
parent
a2ade8687c
commit
95265e5f64
|
|
@ -226,257 +226,224 @@ export default Form.create()(({ match, history, showNotification, form, current_
|
|||
</div>
|
||||
<div className='register_right'>
|
||||
<p>专家资料</p>
|
||||
<div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{
|
||||
helper('姓名',
|
||||
'expertName',
|
||||
[{ required: true, message: "姓名不能为空" }],
|
||||
<Input
|
||||
placeholder="请输入您的姓名"
|
||||
/>
|
||||
)
|
||||
<Form>
|
||||
<div className='expert_Register_form'>
|
||||
{
|
||||
helper('姓名',
|
||||
'expertName',
|
||||
[{ required: true, message: "姓名不能为空" }],
|
||||
<Input
|
||||
placeholder="请输入您的姓名"
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('手机号码',
|
||||
'phone',
|
||||
[{ required: true, message: "手机号码不能为空" },
|
||||
{
|
||||
validator: (rule, val, callback) => {
|
||||
const pattern = /^((\+)?86|((\+)?86)?)0?1[3458]\d{9}$/;
|
||||
if (pattern.test(val)) {
|
||||
callback();
|
||||
} else {
|
||||
callback('请输入正确的手机号码！');
|
||||
}
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
helper('最高学历',
|
||||
'highestDegree',
|
||||
[{ required: true, message: '请选择最高学历' }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{highestEducation.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{
|
||||
helper('手机号码',
|
||||
'phone',
|
||||
[{ required: true, message: "手机号码不能为空" },
|
||||
{
|
||||
validator: (rule, val, callback) => {
|
||||
const pattern = /^((\+)?86|((\+)?86)?)0?1[3458]\d{9}$/;
|
||||
if (pattern.test(val)) {
|
||||
callback();
|
||||
} else {
|
||||
callback('请输入正确的手机号码！');
|
||||
}
|
||||
}
|
||||
}],
|
||||
<Input
|
||||
placeholder="请输入您的手机号码"
|
||||
/>
|
||||
)
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
helper('工作单位',
|
||||
'workplace',
|
||||
[{ required: true, message: "工作单位不能为空" }],
|
||||
<Input
|
||||
placeholder="请输入您的工作单位"
|
||||
/>
|
||||
)
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{
|
||||
helper('单位类别',
|
||||
'workplaceType',
|
||||
[{ required: true, message: "请选择单位类别" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{unitType.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
helper('工作性质',
|
||||
'workNature',
|
||||
[{ required: true, message: "请选择工作性质" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{natureOfWork.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{helper('专业职称',
|
||||
'professionalTitle',
|
||||
[{ required: true, message: "专业职称不能为空" }],
|
||||
<Input
|
||||
placeholder="请输入您的专业职称"
|
||||
/>)}
|
||||
</td>
|
||||
<td>
|
||||
{helper('职称职级',
|
||||
'titleRank',
|
||||
[{ required: true, message: "请选择职称职级" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{positionLevel.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{helper('专业类别',
|
||||
'expertType',
|
||||
[{ required: true, message: "请选择专业类别" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{professionalType.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{helper('评审领域1',
|
||||
'reviewAreaOne',
|
||||
[{ required: true, message: "请选择评审领域" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{reviewArea.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{helper('评审领域2',
|
||||
'"reviewAreaTwo', [],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{reviewArea.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>)}
|
||||
</td>
|
||||
<td>
|
||||
{helper('评审领域3',
|
||||
'reviewAreaThree', [],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{reviewArea.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{helper('毕业院校',
|
||||
'graduatedFrom', [],
|
||||
<Input
|
||||
placeholder="请输入您的毕业院校"
|
||||
/>)}
|
||||
</td>
|
||||
<td>
|
||||
{helper('院校专业',
|
||||
'major', [],
|
||||
<Input
|
||||
placeholder="请输入您的专业"
|
||||
/>)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{helper('身份证号',
|
||||
'idNumber', [],
|
||||
<Input
|
||||
placeholder="请输入您的身份证号码"
|
||||
/>)}
|
||||
</td>
|
||||
<td>
|
||||
{helper('邮箱地址',
|
||||
'expertEmail', [],
|
||||
<Input
|
||||
placeholder="请输入您的常用邮箱地址"
|
||||
/>)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{helper('开户银行',
|
||||
'bankName', [],
|
||||
<Input
|
||||
placeholder="请输入您的开户银行"
|
||||
/>)}
|
||||
</td>
|
||||
<td>
|
||||
{helper('银行账号',
|
||||
'bankAccount', [],
|
||||
<Input
|
||||
placeholder="请输入您的银行卡号"
|
||||
/>)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Form.Item className="upload-form" label="上传个人简介">
|
||||
<Upload
|
||||
load={uploadResume}
|
||||
size={50}
|
||||
showNotification={showNotification}
|
||||
fileList={resumeList}
|
||||
/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item className="upload-form" label="职称证明">
|
||||
<Upload
|
||||
load={uploadTitleCert}
|
||||
size={50}
|
||||
showNotification={showNotification}
|
||||
fileList={titleCertList}
|
||||
/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Form.Item className="upload-form" label="学术成果">
|
||||
<Upload
|
||||
load={uploadAchievement}
|
||||
size={50}
|
||||
showNotification={showNotification}
|
||||
fileList={achievementList}
|
||||
/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item className="upload-form" label="荣誉称号">
|
||||
<Upload
|
||||
load={uploadHonor}
|
||||
size={50}
|
||||
showNotification={showNotification}
|
||||
fileList={honorList}
|
||||
/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}],
|
||||
<Input
|
||||
placeholder="请输入您的手机号码"
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('单位类别',
|
||||
'workplaceType',
|
||||
[{ required: true, message: "请选择单位类别" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{unitType.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('专业职称',
|
||||
'professionalTitle',
|
||||
[{ required: true, message: "专业职称不能为空" }],
|
||||
<Input
|
||||
placeholder="请输入您的专业职称"
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('专业类别',
|
||||
'expertType',
|
||||
[{ required: true, message: "请选择专业类别" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{professionalType.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('评审领域2',
|
||||
'"reviewAreaTwo', [],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{reviewArea.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('毕业院校',
|
||||
'graduatedFrom', [],
|
||||
<Input
|
||||
placeholder="请输入您的毕业院校"
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('身份证号',
|
||||
'idNumber', [],
|
||||
<Input
|
||||
placeholder="请输入您的身份证号码"
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('开户银行',
|
||||
'bankName', [],
|
||||
<Input
|
||||
placeholder="请输入您的开户银行"
|
||||
/>
|
||||
)
|
||||
}
|
||||
<Form.Item className="upload-form" label="上传个人简介">
|
||||
<Upload
|
||||
load={uploadResume}
|
||||
size={50}
|
||||
showNotification={showNotification}
|
||||
fileList={resumeList}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item className="upload-form" label="学术成果">
|
||||
<Upload
|
||||
load={uploadAchievement}
|
||||
size={50}
|
||||
showNotification={showNotification}
|
||||
fileList={achievementList}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className='expert_Register_form ml80'>
|
||||
{
|
||||
helper('最高学历',
|
||||
'highestDegree',
|
||||
[{ required: true, message: '请选择最高学历' }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{highestEducation.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('工作单位',
|
||||
'workplace',
|
||||
[{ required: true, message: "工作单位不能为空" }],
|
||||
<Input
|
||||
placeholder="请输入您的工作单位"
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('工作性质',
|
||||
'workNature',
|
||||
[{ required: true, message: "请选择工作性质" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{natureOfWork.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('职称职级',
|
||||
'titleRank',
|
||||
[{ required: true, message: "请选择职称职级" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{positionLevel.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('评审领域1',
|
||||
'reviewAreaOne',
|
||||
[{ required: true, message: "请选择评审领域" }],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{reviewArea.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('评审领域3',
|
||||
'reviewAreaThree', [],
|
||||
<Select placeholder="请选择" dropdownClassName="expert_register">
|
||||
{reviewArea.map(item => {
|
||||
return <Option key={item.value} value={item.value}>{item.label}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('院校专业',
|
||||
'major', [],
|
||||
<Input
|
||||
placeholder="请输入您的专业"
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('邮箱地址',
|
||||
'expertEmail', [],
|
||||
<Input
|
||||
placeholder="请输入您的常用邮箱地址"
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
helper('银行账号',
|
||||
'bankAccount', [],
|
||||
<Input
|
||||
placeholder="请输入您的银行卡号"
|
||||
/>
|
||||
)
|
||||
}
|
||||
<Form.Item className="upload-form" label="职称证明">
|
||||
<Upload
|
||||
load={uploadTitleCert}
|
||||
size={50}
|
||||
showNotification={showNotification}
|
||||
fileList={titleCertList}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item className="upload-form" label="荣誉称号">
|
||||
<Upload
|
||||
load={uploadHonor}
|
||||
size={50}
|
||||
showNotification={showNotification}
|
||||
fileList={honorList}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form>
|
||||
<div className='buts'>
|
||||
<button className="but41_fill mr20" disabled={lastRegister && lastRegister.status === '-1'} onClick={() => expertRegisterSubmit(true)}>提交资料</button>
|
||||
<button className="but41_border mr20" disabled={lastRegister && lastRegister.status === '-1'} onClick={draft}>保存资料</button>
|
||||
|
|
|
|||
|
|
@ -22,40 +22,45 @@
|
|||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
&>div{
|
||||
.ant-form{
|
||||
display: flex;
|
||||
padding: 1em 2em 1.5em;
|
||||
&>table{
|
||||
& .ant-form-item-required::before{
|
||||
position: relative;
|
||||
top: -1px;
|
||||
content: url('./image/required.svg');
|
||||
}
|
||||
& .ant-input, .ant-select-selection{
|
||||
width: 30.1em;
|
||||
box-shadow: none;
|
||||
&:focus, &:hover{
|
||||
border: 1px solid #4154F1 !important;
|
||||
}
|
||||
}
|
||||
& tr td:first-child .ant-row.ant-form-item{
|
||||
margin-right: 9em;
|
||||
}
|
||||
& .ant-input, .ant-input .ant-input-suffix {
|
||||
background-color: #FFFFFF !important;
|
||||
}
|
||||
& .ant-select-open .ant-select-selection{
|
||||
}
|
||||
.expert_Register_form {
|
||||
width: 43.5%;
|
||||
&.ml80{
|
||||
margin-left: 120px;
|
||||
}
|
||||
.ant-form-item-required::before{
|
||||
position: relative;
|
||||
top: -1px;
|
||||
content: url('./image/required.svg');
|
||||
}
|
||||
.ant-input, .ant-select-selection{
|
||||
width: 30.1em;
|
||||
box-shadow: none;
|
||||
&:focus, &:hover{
|
||||
border: 1px solid #4154F1 !important;
|
||||
}
|
||||
& .ant-form-item{
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
& td>p{
|
||||
margin: 0.3em 0 0.6em !important;
|
||||
}
|
||||
& .but41_border{
|
||||
margin-bottom: 0.6em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
}
|
||||
tr td:first-child .ant-row.ant-form-item{
|
||||
margin-right: 9em;
|
||||
}
|
||||
& .ant-input, .ant-input .ant-input-suffix {
|
||||
background-color: #FFFFFF !important;
|
||||
}
|
||||
& .ant-select-open .ant-select-selection{
|
||||
border: 1px solid #4154F1 !important;
|
||||
}
|
||||
& .ant-form-item{
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
& td>p{
|
||||
margin: 0.3em 0 0.6em !important;
|
||||
}
|
||||
& .but41_border{
|
||||
margin-bottom: 0.6em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
& .ant-cascader-menu-item:hover {
|
||||
background: #F2F3FF;
|
||||
|
|
|
|||
Loading…
Reference in New Issue