forked from Gitlink/forgeplus-react
修改glcc issue
This commit is contained in:
何童崇
parent
b81610f7d3
commit
1a09f82960
|
|
@ -9,6 +9,7 @@ import banner from "../img/banner.png";
|
|||
import studentSvg from "../img/student.png";
|
||||
import './index.scss';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { color } from 'echarts/lib/theme/light';
|
||||
|
||||
const Option = Select.Option;
|
||||
const gradeList = [
|
||||
|
|
@ -332,7 +333,7 @@ function Apply(props) {
|
|||
setMyTaskList(taskListNew);
|
||||
}
|
||||
|
||||
const chooseArr=myTaskList.map(i=>{return i.taskId});
|
||||
const chooseArr = myTaskList.map(i => { return i.taskId });
|
||||
|
||||
return (
|
||||
<div className="glcc_student_apply">
|
||||
|
|
@ -342,7 +343,7 @@ function Apply(props) {
|
|||
<Breadcrumb className='glcc_breadcrumb font-16'>
|
||||
<Breadcrumb.Item><Link to="/glcc">开源夏令营</Link></Breadcrumb.Item>
|
||||
<Breadcrumb.Item><Link to="/glcc/student/2">查看项目</Link></Breadcrumb.Item>
|
||||
<Breadcrumb.Item>学生报名</Breadcrumb.Item>
|
||||
<Breadcrumb.Item style={{ color: '#202D40' }}>学生报名</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
|
||||
<div className="head_introduce">
|
||||
|
|
@ -356,147 +357,148 @@ function Apply(props) {
|
|||
<div className="main-tit">
|
||||
<img src={studentSvg} /><span className="tit-text">学生报名</span>
|
||||
</div>
|
||||
<div className="form-tit">申请课题</div>
|
||||
<Form className="glcc_info_form" onSubmit={handleSubmit}>
|
||||
<h4 className="item-tit">基本信息</h4>
|
||||
{helper('学生姓名',
|
||||
'',
|
||||
'studentName',
|
||||
[{ required: true, message: "请正确输入学生姓名" },
|
||||
{ max: 32, message: '超出限制长度32位字符，请重新编辑' }],
|
||||
<Input placeholder="请输入学生姓名" onBlur={() => { verify("studentName") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
{helper('所在高校',
|
||||
'',
|
||||
'school',
|
||||
[{ required: true, message: "请正确输入所在高校" },
|
||||
{ max: 32, message: '超出限制长度32位字符，请重新编辑' }],
|
||||
<Input placeholder="请输入所在高校" onBlur={() => { verify("school") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
{helper('所学专业',
|
||||
'',
|
||||
'profession',
|
||||
[{ max: 32, message: '超出限制长度32位字符，请重新编辑' }],
|
||||
<Input placeholder="请输入所学专业" onBlur={() => { verify("profession") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
<Form.Item label="地区">
|
||||
{getFieldDecorator("location", {
|
||||
rules: []
|
||||
})(
|
||||
<Cascader placeholder="请选择省份城市" options={locData} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
<div className="form-content">
|
||||
<div className="form-tit">申请课题</div>
|
||||
<Form className="glcc_info_form" onSubmit={handleSubmit}>
|
||||
<h4 className="item-tit">基本信息</h4>
|
||||
{helper('学生姓名',
|
||||
'',
|
||||
'studentName',
|
||||
[{ required: true, message: "请正确输入学生姓名" },
|
||||
{ max: 32, message: '超出限制长度32位字符，请重新编辑' }],
|
||||
<Input placeholder="请输入学生姓名" onBlur={() => { verify("studentName") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
{helper('所在高校',
|
||||
'',
|
||||
'school',
|
||||
[{ required: true, message: "请正确输入所在高校" },
|
||||
{ max: 32, message: '超出限制长度32位字符，请重新编辑' }],
|
||||
<Input placeholder="请输入所在高校" onBlur={() => { verify("school") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
{helper('所学专业',
|
||||
'',
|
||||
'profession',
|
||||
[{ max: 32, message: '超出限制长度32位字符，请重新编辑' }],
|
||||
<Input placeholder="请输入所学专业" onBlur={() => { verify("profession") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
<Form.Item label="地区">
|
||||
{getFieldDecorator("location", {
|
||||
rules: []
|
||||
})(
|
||||
<Cascader popupClassName="glcc_cascader" placeholder="请选择省份城市" options={locData} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
</Form.Item>
|
||||
{helper('所在年级',
|
||||
'',
|
||||
'grade',
|
||||
[],
|
||||
<Select placeholder="请选择所在年级" disabled={editable ? false : true} className={editable ? "" : "disabledInput"} dropdownClassName="glcc_select">
|
||||
{gradeList.map(item => { return <Option value={item.name} key={item.id}>{item.name}</Option> })}
|
||||
</Select>
|
||||
)}
|
||||
{helper('联系电话',
|
||||
'',
|
||||
'phone',
|
||||
[{ required: true, message: "请正确输入联系电话" },
|
||||
{ max: 14, message: '超出限制长度14位字符，请重新编辑' },
|
||||
{ pattern: /^(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})$/, message: '请正确输入联系电话' }],
|
||||
<Input placeholder="请输入联系电话" onBlur={() => { verify("phone") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
{helper('邮箱地址',
|
||||
'',
|
||||
'mail',
|
||||
[
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', },
|
||||
{ required: true, message: "请输入邮箱地址" },
|
||||
{ max: 50, message: '超出限制长度50位字符，请重新编辑' },
|
||||
],
|
||||
<Input placeholder="请输入邮箱地址" onBlur={() => { verify("mail") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
</Form.Item>
|
||||
{helper('所在年级',
|
||||
'',
|
||||
'grade',
|
||||
[],
|
||||
<Select placeholder="请选择所在年级" disabled={editable ? false : true} className={editable ? "" : "disabledInput"}>
|
||||
{gradeList.map(item => { return <Option value={item.name} key={item.id}>{item.name}</Option> })}
|
||||
</Select>
|
||||
)}
|
||||
{helper('联系电话',
|
||||
'',
|
||||
'phone',
|
||||
[{ required: true, message: "请正确输入联系电话" },
|
||||
{ max: 14, message: '超出限制长度14位字符，请重新编辑' },
|
||||
{ pattern: /^(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})$/, message: '请正确输入联系电话' }],
|
||||
<Input placeholder="请输入联系电话" onBlur={() => { verify("phone") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
{helper('邮箱地址',
|
||||
'',
|
||||
'mail',
|
||||
[
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', },
|
||||
{ required: true, message: "请输入邮箱地址" },
|
||||
{ max: 50, message: '超出限制长度50位字符，请重新编辑' },
|
||||
],
|
||||
<Input placeholder="请输入邮箱地址" onBlur={() => { verify("mail") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
)}
|
||||
|
||||
<div className='introArea update_item'>{helper('学生证明',
|
||||
'请以图片的形式上传学生证明，大小不超过5M，格式为png、jpg、jpeg',
|
||||
'proveAttachmentId',
|
||||
[{ required: true, message: "请正确上传学生证明" }],
|
||||
userApplyInfo && userApplyInfo.proveAttachmentId ? <div className='projectLogo'><img src={`${getUrl()}/api/attachments/${userApplyInfo.proveAttachmentId}`} alt='' /></div>
|
||||
: <Upload
|
||||
listType="picture-card"
|
||||
className="avatar-uploader"
|
||||
showUploadList={false}
|
||||
action={getUploadActionUrl()}
|
||||
accept=".png,.jpg,.jpeg"
|
||||
beforeUpload={beforeUpload}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ maxWidth: '100px', maxHeight: '100px' }} /> : <div>
|
||||
<i className='iconfont icon-tianjiadaohang font-30'></i>
|
||||
<div className="ant-upload-text font-13">请上传学生证明</div>
|
||||
</div>}
|
||||
</Upload>
|
||||
)}</div>
|
||||
<div className='introArea update_item'>{helper('学生证明',
|
||||
'请以图片的形式上传学生证明，大小不超过5M，格式为png、jpg、jpeg',
|
||||
'proveAttachmentId',
|
||||
[{ required: true, message: "请正确上传学生证明" }],
|
||||
userApplyInfo && userApplyInfo.proveAttachmentId ? <div className='projectLogo'><img src={`${getUrl()}/api/attachments/${userApplyInfo.proveAttachmentId}`} alt='' /></div>
|
||||
: <Upload
|
||||
listType="picture-card"
|
||||
className="avatar-uploader"
|
||||
showUploadList={false}
|
||||
action={getUploadActionUrl()}
|
||||
accept=".png,.jpg,.jpeg"
|
||||
beforeUpload={beforeUpload}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ maxWidth: '100px', maxHeight: '100px' }} /> : <div>
|
||||
<i className='iconfont icon-tianjiadaohang font-30'></i>
|
||||
<div className="ant-upload-text font-13">请上传学生证明</div>
|
||||
</div>}
|
||||
</Upload>
|
||||
)}</div>
|
||||
|
||||
{
|
||||
myTaskList.map((item, i) => {
|
||||
return (
|
||||
<Fragment key={item.taskId + '' + i}>
|
||||
<h4 className="item-tit">课题信息（<span className="item-tit-num">{i + 1}</span>/2) {myTaskList.length > 1 && <i className="iconfont icon-shanchu" onClick={() => { deleteTask(i) }}></i>}</h4>
|
||||
{helper('课题名称',
|
||||
'',
|
||||
'taskId' + i,
|
||||
[{ required: true, message: "请选择课题名称" }],
|
||||
<Select
|
||||
placeholder="请选择课题名称"
|
||||
showSearch
|
||||
disabled={editable ? false : true}
|
||||
className={editable ? "" : "disabledInput"}
|
||||
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) > -1}
|
||||
onBlur={() => { verify("taskId" + i) }}
|
||||
onChange={(val) => { changeTaskItem("taskId", val, i) }}
|
||||
>
|
||||
{allTaskList.map(item => { return <Option value={item.id} disabled={chooseArr.includes(item.id)} key={item.id + ''}>{item.taskName}</Option> })}
|
||||
</Select>
|
||||
)}
|
||||
<div className='introArea'>{helper('自荐书',
|
||||
'',
|
||||
'memo' + i,
|
||||
[{ required: true, message: "请正确输入自荐书" },
|
||||
{ max: 500, message: '超出限制长度500位字符，请重新编辑' }],
|
||||
<TextArea placeholder="请填写你的优势和能力，不超过500字" onBlur={(e) => { verify("memo" + i); changeTaskItem("memo", e.currentTarget.value, i) }} rows={4} className={editable ? "" : "disabledInput"} />
|
||||
)}</div>
|
||||
{
|
||||
myTaskList.map((item, i) => {
|
||||
return (
|
||||
<Fragment key={item.taskId + '' + i}>
|
||||
<h4 className="item-tit">课题信息（<span className="item-tit-num">{i + 1}</span>/2) {myTaskList.length > 1 && <span className="delete"><i className="iconfont icon-shanchu mr5" onClick={() => { deleteTask(i) }}></i>删除</span>}</h4>
|
||||
{helper('课题名称',
|
||||
'',
|
||||
'taskId' + i,
|
||||
[{ required: true, message: "请选择课题名称" }],
|
||||
<Select
|
||||
placeholder="请选择课题名称"
|
||||
showSearch
|
||||
disabled={editable ? false : true}
|
||||
className={editable ? "" : "disabledInput"}
|
||||
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) > -1}
|
||||
onBlur={() => { verify("taskId" + i) }}
|
||||
onChange={(val) => { changeTaskItem("taskId", val, i) }}
|
||||
>
|
||||
{allTaskList.map(item => { return <Option value={item.id} disabled={chooseArr.includes(item.id)} key={item.id + ''}>{item.taskName}</Option> })}
|
||||
</Select>
|
||||
)}
|
||||
<div className='introArea'>{helper('自荐书',
|
||||
<div className="memoExtra">自荐书示例：<span >https://forum.gitlink.org.cn/forums/7299/detail</span></div>,
|
||||
'memo' + i,
|
||||
[{ required: true, message: "请正确输入自荐书" },
|
||||
{ max: 500, message: '超出限制长度500位字符，请重新编辑' }],
|
||||
<TextArea placeholder="请填写你的优势和能力，不超过500字" onBlur={(e) => { verify("memo" + i); changeTaskItem("memo", e.currentTarget.value, i) }} rows={4} className={editable ? "memoText" : "memoText disabledInput"} />
|
||||
)}</div>
|
||||
|
||||
<div className='introArea'>{helper('附件',
|
||||
'可以上传自荐书文件，大小不超过5M',
|
||||
'memoAttachmentId' + i,
|
||||
[],
|
||||
<Upload
|
||||
// action={getUploadActionUrl()}
|
||||
action={httpUrl + `/busiAttachments/upload`}
|
||||
fileList={i ? files1 : files}
|
||||
onChange={(info) => { bookChange(info, i) }}
|
||||
onDownload={download}
|
||||
beforeUpload={beforeUpload2}
|
||||
showUploadList={{
|
||||
showDownloadIcon: true,
|
||||
downloadIcon: <i className="iconfont icon-xiazai-icon"></i>,
|
||||
showRemoveIcon: true
|
||||
}}
|
||||
>
|
||||
<div className="glcc_btn">上传自荐书</div>
|
||||
</Upload>
|
||||
)}</div>
|
||||
</Fragment>
|
||||
)
|
||||
})
|
||||
}
|
||||
<div className='introArea'>{helper('附件',
|
||||
'可以上传自荐书文件，大小不超过5M',
|
||||
'memoAttachmentId' + i,
|
||||
[],
|
||||
<Upload
|
||||
// action={getUploadActionUrl()}
|
||||
action={httpUrl + `/busiAttachments/upload`}
|
||||
fileList={i ? files1 : files}
|
||||
onChange={(info) => { bookChange(info, i) }}
|
||||
onDownload={download}
|
||||
beforeUpload={beforeUpload2}
|
||||
showUploadList={{
|
||||
showDownloadIcon: true,
|
||||
downloadIcon: <i className="iconfont icon-xiazai-icon"></i>,
|
||||
showRemoveIcon: true
|
||||
}}
|
||||
>
|
||||
<div className="glcc_btn">上传自荐书</div>
|
||||
</Upload>
|
||||
)}</div>
|
||||
</Fragment>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{
|
||||
myTaskList.length < 2 && <Button className="add_task" type="primary" onClick={() => { addTask() }}>添加课题</Button>
|
||||
}
|
||||
|
||||
<Form.Item className='subInfo introArea'>
|
||||
<Button type="primary" htmlType="submit" className='sub' disabled={!editable}>提交</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{
|
||||
myTaskList.length < 2 && <Button className="add_task" type="primary" onClick={() => { addTask() }}>添加课题</Button>
|
||||
}
|
||||
|
||||
<Form.Item className='subInfo introArea'>
|
||||
<Button type="primary" htmlType="submit" className='sub' disabled={!editable}>提交</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
.has-error .ant-form-split {
|
||||
position: absolute;
|
||||
}
|
||||
.ant-btn-primary{
|
||||
.ant-btn-primary {
|
||||
background-color: #466aff;
|
||||
border-color: #466aff;
|
||||
&:hover {
|
||||
|
|
@ -90,10 +90,14 @@
|
|||
background-color: #466aff;
|
||||
}
|
||||
|
||||
.item-tit-num{
|
||||
color:#466aff;
|
||||
.item-tit-num {
|
||||
color: #466aff;
|
||||
}
|
||||
}
|
||||
.form-content {
|
||||
background-color: rgba(255, 255, 255, 0.27);
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
.glcc_info_form {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
|
@ -137,6 +141,7 @@
|
|||
.ant-upload.ant-upload-select-picture-card {
|
||||
background: none !important;
|
||||
border-color: #b3c3db;
|
||||
color: #202d40;
|
||||
&:hover {
|
||||
border-color: #466aff;
|
||||
}
|
||||
|
|
@ -163,17 +168,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.ant-cascader-picker{
|
||||
.ant-cascader-picker {
|
||||
background: none;
|
||||
&:hover{
|
||||
.ant-cascader-input{
|
||||
border:1px solid #466aff;
|
||||
&:hover {
|
||||
.ant-cascader-input {
|
||||
border: 1px solid #466aff;
|
||||
}
|
||||
}
|
||||
&:focus .ant-cascader-input {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
.introArea {
|
||||
width: 100%;
|
||||
|
|
@ -192,8 +196,8 @@
|
|||
color: #e90000;
|
||||
}
|
||||
}
|
||||
.update_item{
|
||||
.ant-form-explain{
|
||||
.update_item {
|
||||
.ant-form-explain {
|
||||
bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
|
@ -258,24 +262,54 @@
|
|||
line-height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.add_task{
|
||||
margin-left:90px;
|
||||
.add_task {
|
||||
margin-left: 90px;
|
||||
}
|
||||
|
||||
.icon-shanchu{
|
||||
.delete {
|
||||
float: right;
|
||||
color: #466aff;
|
||||
cursor: pointer;
|
||||
:hover{
|
||||
:hover {
|
||||
color: #1140ff;
|
||||
}
|
||||
.icon-shanchu {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
// .icon-shanchu{
|
||||
// color: #466aff;
|
||||
// cursor: pointer;
|
||||
// :hover{
|
||||
// color: #1140ff;
|
||||
// }
|
||||
// }
|
||||
.memoExtra {
|
||||
margin-top: 12px;
|
||||
margin-bottom: -10px;
|
||||
span {
|
||||
color: #466aff;
|
||||
}
|
||||
}
|
||||
|
||||
.memoText {
|
||||
padding: 9px 11px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
}
|
||||
.glcc-banner {
|
||||
width: 100%;
|
||||
}
|
||||
.glcc_select,.ant-cascader-menus.glcc_cascader{
|
||||
background-image: linear-gradient(180deg, #eef3ff 0%, #ffffff 100%);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 12px rgba(203, 220, 255, 0.47);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue