专家注册页面

src/military/expert/index.scss

@@ -1,7 +1,7 @@
 // 公共样式
 .but41_fill, .but41_border, .butE3_border{
-  padding: 0 18px;
-  height: 36px;
+  padding: 0 1.3em;
+  height: 2.55em;
   border-radius: 4px;
   cursor: pointer;
 }
@@ -30,6 +30,7 @@
 .butE3_border{
   color: #404660;
   border: 1px solid #E3E7ED;
+  width: 7em;
   &:hover{
     background-color: #F8F8F8;
     border: 1px solid #E3E7ED;

src/military/expert/register/image/warning.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>shanchu_tc_icon</title>
+    <g id="首页/竞赛" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="7-资料未保存提示语" transform="translate(-804.000000, -400.000000)" fill-rule="nonzero">
+            <g id="弹窗" transform="translate(684.000000, 298.000000)">
+                <g id="编组-3备份" transform="translate(121.000000, 102.000000)">
+                    <g id="shanchu_tc_icon" transform="translate(0.000000, 1.000000)">
+                        <path d="M15,0 C6.7155,0 0,6.7155 0,15 C0,23.2845 6.7155,30 15,30 C23.2845,30 30,23.2845 30,15 C30,6.7155 23.2845,0 15,0 Z" id="路径" stroke="#CA0002" stroke-width="1.5" fill="#CA0002"></path>
+                        <path d="M16,20.844 C16,21.3962847 15.5522847,21.844 15,21.844 C14.4477153,21.844 14,21.3962847 14,20.844 L14,20.344 C14,19.7917152 14.4477153,19.344 15,19.344 C15.5522847,19.344 16,19.7917152 16,20.344 L16,20.844 Z" id="路径" fill="#FFFFFF"></path>
+                        <path d="M16,16.656 C16,17.2082847 15.5522847,17.656 15,17.656 C14.4477153,17.656 14,17.2082847 14,16.656 L14,9.15600001 C14,8.60371526 14.4477153,8.15600001 15,8.15600001 C15.5522847,8.15600001 16,8.60371526 16,9.15600001 L16,16.656 Z" id="路径" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/military/expert/register/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { Button, Icon, Form, Modal, Input, Cascader } from 'antd';
+import { Button, Icon, Form, Modal, Input, Cascader, Select, Upload } from 'antd';
 import { Link } from "react-router-dom";
 import { unitType, natureOfWork, highestEducation, positionLevel, professionalType, reviewArea } from '../static';
 import './index.scss';
@@ -7,17 +7,27 @@ import '../index.scss';
 
 export default Form.create()(({ match, history, showNotification, form }) => {
   const { getFieldDecorator, validateFields, setFieldsValue } = form;
+  const [cancelConfirmValue, setCancelConfirmValue] = useState(false);
+  const [submitConfirmValue, setSubmitConfirmValue] = useState(false);
 
   // form表单公共处理函数
   const helper = useCallback(
     (label, name, rules, widget) => (
       <Form.Item label={label}>
-        {getFieldDecorator(name, { rules, validateFirst: true, getValueFromEvent: e => e.target.value.replace(/(^\s*)|(\s*$)/g, "") })(widget)}
+        {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
       </Form.Item>
     ),
     []
   );
 
+  //表单提交
+  function expertRegisterSubmit(e){
+    form.validateFields((err, values) =>{
+      if(!err){
+        console.log('111',values);
+      }
+    })
+  }
 
   return (
     <div className="centerbox detail">
@@ -36,8 +46,8 @@ export default Form.create()(({ match, history, showNotification, form }) => {
                 <td>
                   {
                     helper('姓名',
-                      'readerName',
-                      [{ required: true, message: "请输入用户姓名" }, { max: 50, message: '不能超过50字符' }],
+                      'expertName',
+                      [{ required: true, message: "姓名不能为空" }],
                       <Input
                         placeholder="请输入您的姓名"
                       />
@@ -47,9 +57,13 @@ export default Form.create()(({ match, history, showNotification, form }) => {
                 <td>
                   {
                     helper('最高学历',
-                      'companyName',
-                      [{ required: true, message: 'Please select your habitual residence!' }],
-                      <Cascader placeholder= "请选择" options={highestEducation}/>
+                      'highestDegree',
+                      [{ required: true, message: '请选择最高学历' }],
+                      <Select placeholder="请选择" dropdownClassName="expert_register">
+                        {highestEducation.map(item=>{
+                          return <Option value={item.value}>{item.label}</Option>
+                        })}
+                      </Select>
                     )
                   }
                 </td>
@@ -58,9 +72,8 @@ export default Form.create()(({ match, history, showNotification, form }) => {
                 <td>
                   {
                     helper('手机号码',
-                      'contactInfo',
-                      [{ required: true, message: "请输入联系方式" },
-                      { max: 100, message: '不能超过100字符' },
+                      'phone',
+                      [{ required: true, message: "手机号码不能为空" },
                       {
                         validator: (rule, val, callback) => {
                           const pattern = /^((\+)?86|((\+)?86)?)0?1[3458]\d{9}$/;
@@ -80,8 +93,8 @@ export default Form.create()(({ match, history, showNotification, form }) => {
                 <td>
                   {
                     helper('工作单位',
-                      'companyName',
-                      [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
+                      'workplace',
+                      [{ required: true, message: "工作单位不能为空" }],
                       <Input
                         placeholder="请输入您的工作单位"
                       />
@@ -93,18 +106,26 @@ export default Form.create()(({ match, history, showNotification, form }) => {
                 <td>
                   {
                     helper('单位类别',
-                      'companyName',
-                      [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
-                      <Cascader placeholder="请选择" options={unitType} />
+                      'workplaceType',
+                      [{ required: true, message: "请选择单位类别" }],
+                      <Select placeholder="请选择" dropdownClassName="expert_register">
+                      {unitType.map(item=>{
+                        return <Option value={item.value}>{item.label}</Option>
+                      })}
+                    </Select>
                     )
                   }
                 </td>
                 <td>
                   {
                     helper('工作性质',
-                      'companyName',
-                      [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
-                      <Cascader placeholder="请选择" options={natureOfWork} />
+                      'workNature',
+                      [{ required: true, message: "请选择工作性质" }],
+                      <Select placeholder="请选择" dropdownClassName="expert_register">
+                      {natureOfWork.map(item=>{
+                        return <Option value={item.value}>{item.label}</Option>
+                      })}
+                    </Select>
                     )
                   }
                 </td>
@@ -112,60 +133,79 @@ export default Form.create()(({ match, history, showNotification, form }) => {
               <tr>
                 <td>
                   {helper('专业职称',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
+                    'professionalTitle',
+                    [{ required: true, message: "专业职称不能为空" }],
                     <Input
                       placeholder="请输入您的专业职称"
                     />)}
                 </td>
                 <td>
                   {helper('职称职级',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
-                    <Cascader placeholder="请选择" options={positionLevel} />)}
+                    'professionalYears',
+                    [{ required: true, message: "请选择职称职级" }],
+                    <Select placeholder="请选择" dropdownClassName="expert_register">
+                      {positionLevel.map(item=>{
+                        return <Option value={item.value}>{item.label}</Option>
+                      })}
+                    </Select>
+                    )}
                 </td>
               </tr>
               <tr>
                 <td>
                   {helper('专业类别',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
-                    <Cascader placeholder="请选择" options={professionalType} />)}
+                    'expertType',
+                    [{ required: true, message: "请选择专业类别" }],
+                    <Select placeholder="请选择" dropdownClassName="expert_register">
+                      {professionalType.map(item=>{
+                        return <Option value={item.value}>{item.label}</Option>
+                      })}
+                    </Select>
+                    )}
                 </td>
                 <td>
                   {helper('评审领域1',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
-                    <Cascader placeholder="请选择" options={reviewArea} />)}
+                    'reviewAreaOne',
+                    [{ required: true, message: "请选择评审领域" }],
+                    <Select placeholder="请选择" dropdownClassName="expert_register">
+                      {reviewArea.map(item=>{
+                        return <Option value={item.value}>{item.label}</Option>
+                      })}
+                    </Select>
+                    )}
                 </td>
               </tr>
               <tr>
                 <td>
                   {helper('评审领域2',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
-                    <Cascader placeholder="请选择" options={reviewArea} />)}
+                    '"reviewAreaTwo', [],
+                    <Select placeholder="请选择" dropdownClassName="expert_register">
+                      {reviewArea.map(item=>{
+                        return <Option value={item.value}>{item.label}</Option>
+                      })}
+                    </Select>)}
                 </td>
                 <td>
                   {helper('评审领域3',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
-                    <Cascader placeholder="请选择" options={reviewArea} />)}
+                    'reviewAreaThree', [],
+                    <Select placeholder="请选择" dropdownClassName="expert_register">
+                      {reviewArea.map(item => {
+                        return <Option value={item.value}>{item.label}</Option>
+                      })}
+                    </Select>)}
                 </td>
               </tr>
               <tr>
                 <td>
                   {helper('毕业院校',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
+                    'graduatedFrom', [],
                     <Input
                       placeholder="请输入您的毕业院校"
                     />)}
                 </td>
                 <td>
                   {helper('院校专业',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
+                    'major', [],
                     <Input
                       placeholder="请输入您的专业"
                     />)}
@@ -174,16 +214,14 @@ export default Form.create()(({ match, history, showNotification, form }) => {
               <tr>
                 <td>
                   {helper('身份证号',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
+                    'idNumber', [],
                     <Input
                       placeholder="请输入您的身份证号码"
                     />)}
                 </td>
                 <td>
                   {helper('邮箱地址',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
+                    'expertEmail', [],
                     <Input
                       placeholder="请输入您的常用邮箱地址"
                     />)}
@@ -192,16 +230,14 @@ export default Form.create()(({ match, history, showNotification, form }) => {
               <tr>
                 <td>
                   {helper('开户银行',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
+                    'bankName', [],
                     <Input
                       placeholder="请输入您的开户银行"
                     />)}
                 </td>
                 <td>
                   {helper('银行账号',
-                    'companyName',
-                    [{ required: true, message: "请输入公司名称" }, { max: 100, message: '不能超过100字符' }],
+                    'bankAccount', [],
                     <Input
                       placeholder="请输入您的银行卡号"
                     />)}
@@ -209,30 +245,62 @@ export default Form.create()(({ match, history, showNotification, form }) => {
               </tr>
               <tr>
                 <td>
-                  <span>个人简介</span>
-                  <button>上传个人简介</button>
+                  {helper('个人简介',
+                    'resume', [],
+                    <Upload accept=".rar,.zip">
+                      <button className="but41_border">上传个人简介</button>
+                    </Upload>)}
                 </td>
                 <td>
-                  <span>职称证明</span>
-                  <button>上传职称证明</button>
+                  {helper('职称证明',
+                    'resume', [],
+                    <Upload accept=".rar,.zip">
+                      <button className="but41_border">上传职称证明</button>
+                    </Upload>)}
                 </td>
               </tr>
               <tr>
                 <td>
-                  <span>学术成果</span>
-                  <button>上传学术成果</button>
+                  {helper('学术成果',
+                    'resume', [],
+                    <Upload accept=".rar,.zip">
+                      <button className="but41_border">上传学术成果</button>
+                    </Upload>)}
                 </td>
                 <td>
-                  <span>荣誉称号</span>
-                  <button>上传荣誉称号</button>
+                  {helper('荣誉称号',
+                    'resume', [],
+                    <Upload accept=".rar,.zip">
+                      <button className="but41_border">上传荣誉称号</button>
+                    </Upload>)}
                 </td>
               </tr>
             </table>
           </div>
           <div className='buts'>
-            <button className="but41_fill mr20">提交资料</button>
+            <button className="but41_fill mr20" onClick={() => setSubmitConfirmValue(true)}>提交资料</button>
+            <Modal
+              title="提交资料"
+              visible={submitConfirmValue}
+              onOk={(e)=>expertRegisterSubmit(e)}
+              onCancel={() => setSubmitConfirmValue(false)}
+              wrapClassName="expert_modal submit"
+              closeIcon={<Icon className='iconfont icon-guanbi1'/>}
+            >
+              <p className='weight_bold'>资料提交后无法修改，将等待管理员审核，</p>
+              <p className='ml30'>确认提交？</p>
+            </Modal>
             <button className="but41_border mr20">保存资料</button>
-            <button className="butE3_border">取消</button>
+            <button className="butE3_border" onClick={() =>setCancelConfirmValue(true)}>取消</button>
+            <Modal
+              title= "提交资料"
+              visible={cancelConfirmValue}
+              onCancel={()=>setCancelConfirmValue(false)}
+              wrapClassName="expert_modal"
+            >
+              <p className='weight_bold warning'>有内容没有保存，确定退出编辑吗？</p>
+              <p className='ml30'>退出编辑后，更新的内容不会自动保存</p>
+            </Modal>
           </div>
         </div>
       </div>

src/military/expert/register/index.scss

@@ -1,6 +1,5 @@
 .centerbox.detail{
   font-size: 20px;
-  border: 1px solid;
   & .navigation{
     font-size: 0.6em;
     margin: -35px 0 15px;
@@ -26,15 +25,16 @@
         font-weight: bold;
       }
       &>div{
-        padding: 2em;
+        padding: 1em 2em 1.5em;
         &>table{
           & .ant-form-item-required::before{
             position: relative;
             top: -1px;
             content: url('./image/required.svg');
           }
-          & .ant-input{
+          & .ant-input, .ant-select-selection{
             width: 30.1em;
+            box-shadow: none;
             &:focus, &:hover{
               border: 1px solid #4154F1 !important;
             }
@@ -45,6 +45,25 @@
           & .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;
+        }
+        & .ant-form-item-label{
+          line-height: 2.5em;
         }
       }
       & .buts{
@@ -55,3 +74,69 @@
     }
   }
 }
+.expert_register .ant-select-dropdown-menu-item:hover, .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled){
+  background-color: #F2F3FF;
+}
+.expert_modal .ant-modal-content{
+  width: 550px;
+  height: 318px;
+  & .ant-modal-header{
+    padding: 0.6em 2.1em;
+    background: #F2F2FF;
+    & .ant-modal-title {
+      text-align: left;
+    }
+  }
+  & .ant-modal-body{
+    padding-left: 120px;
+    & p{
+      font-size: 16px;
+      color: #666666;
+      font-family: PingFangSC-Regular, PingFang SC;
+      line-height: 2.9em;
+    }
+    & .weight_bold{
+      font-weight: bold;
+    }
+    & .warning::before{
+      content: url('./image/warning.svg');
+      width: 32px;
+      position: relative;
+      top: 11px;
+      left: -15px;
+    }
+  }
+  & .ant-btn{
+    padding: 0 1.3em;
+    height: 2.55em;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #404660;
+    border: 1px solid #E3E7ED;
+    width: 7em;
+    &:hover{
+      background-color: #F8F8F8;
+      border: 1px solid #E3E7ED;
+    }
+    &:active{
+      background-color: #F3F3F3;
+      border: 1px solid #E3E7ED;
+    }
+  }
+  & .ant-btn.ant-btn-primary{
+    color: white;
+    background-color: #4154F1;
+    margin-left: 2.5em;
+    &:hover{
+      background-color: #5D6EFF;
+    }
+    &:active{
+      background-color: #374BF2;
+    }
+  }
+  & .ant-modal-footer {margin-top: 15px; }
+}
+.expert_modal.submit .ant-modal-body{
+  padding-left: 0;
+  text-align: center;
+}