修改ccks提案提交

This commit is contained in:
何童崇 2022-06-30 17:19:36 +08:00
parent b5198b1673
commit 45dde95b5f
19 changed files with 776 additions and 244 deletions

View File

@ -49,6 +49,10 @@ const Refer = Loadable({
loader: () => import('./competition/refer'),
loading: Loading,
})
const Rank = Loadable({
loader: () => import('./competition/rank'),
loading: Loading,
});
const Chat = Loadable({
loader: () => import('./competition/chat'),
loading: Loading,
@ -149,9 +153,11 @@ const Competition = (props) => {
props.showNotification("您还未报名竞赛!");
} else if (enrollStatus && enrollStatus.status === 0) {
props.showNotification("报名信息被管理员驳回!");
} else if (['ccks','zstp2022'].includes(competitionId)&& enrollStatus && enrollStatus.status === 1) {
} else if (['ccks', 'zstp2022'].includes(competitionId) && enrollStatus && enrollStatus.status === 1) {
props.showNotification("您的报名信息未通过审核!");
} else {
} else if(['ccks', 'zstp2022'].includes(competitionId) && applyStatus){
}else{
!referStatus ? props.showNotification(!referEnd ? `竞赛尚未开始提交作品,提交作品开始时间为:${qzDetail && qzDetail.enroll_date.substring(0, 10)}` : "比赛已结束") : "";
}
}
@ -163,8 +169,8 @@ const Competition = (props) => {
<React.Fragment>
<Login {...props} />
{/* banner图+选项 */}
{banner_url&&<img src={banner_url } className="qz_banner" alt="" />}
{pathname.indexOf("qz2022")>-1 && <InfoModal />}
{banner_url && <img src={banner_url} className="qz_banner" alt="" />}
{pathname.indexOf("qz2022") > -1 && <InfoModal />}
<div className="competition">
<div className={`competition-top ${fixedTop}`}>
{/* {paths.indexOf(active) !== -1 && */}
@ -184,16 +190,25 @@ const Competition = (props) => {
<Link to={{ pathname: `/competition/${competitionId}/notice` }}>通知公告</Link>
</li>
{/* 处于报名阶段正常跳转到报名页面,不处于右侧弹消息 */}
<li className={active === "apply" ? "active" : ""}>
{competitionId === 'qz2022' ? <li className={active === "apply" ? "active" : ""}>
<Link to={{ pathname: applyStatus && current_user && current_user.login ? `/competition/${competitionId}/apply` : '' }} onClick={() => { current_user && current_user.login ? !applyStatus && props.showNotification("报名时间已截止") : props.showLoginDialog() }}>参赛报名</Link>
</li> : <li className={active === "apply" ? "active" : ""}>
<Link to={{ pathname: applyStatus||( enrollStatus && enrollStatus.enroll_status) && current_user && current_user.login ? `/competition/${competitionId}/apply` : '' }} onClick={() => { current_user && current_user.login ? !applyStatus&& ( enrollStatus && !enrollStatus.enroll_status ) && props.showNotification("报名时间已截止") : props.showLoginDialog() }}>参赛报名</Link>
</li>
}
{competitionId === 'qz2022' ? <li className={active === "refer" ? "active" : ""}>
<Link to={{ pathname: referStatus && !referEnd && current_user && current_user.login && enrollStatus && enrollStatus.enroll_status ? `/competition/${competitionId}/refer` : '' }} onClick={goToRefer}>提案提交</Link>
</li> :
<li className={active === "refer" ? "active" : ""}>
<Link to={{ pathname: referStatus && !referEnd && current_user && current_user.login && enrollStatus && enrollStatus.status==2 ? `/competition/${competitionId}/refer` : '' }} onClick={goToRefer}>提案提交</Link>
<Link to={{ pathname: !referEnd && current_user && current_user.login && enrollStatus && enrollStatus.status>1 ? `/competition/${competitionId}/refer` : '' }} onClick={goToRefer}>提案提交</Link>
</li>}
{
['ccks', 'zstp2022'].includes(competitionId) && <li className={active === "rank" ? "active" : ""}>
<Link to={{ pathname: `/competition/${competitionId}/rank` }}>排行榜</Link>
</li>
}
{competitionId === 'qz2022' && <li className={active === "statistics" ? "active" : ""}>
<Link to={{ pathname: `/competition/${competitionId}/statistics` }}>数据统计</Link>
</li>}
@ -258,6 +273,12 @@ const Competition = (props) => {
() => (<Refer {...props} enrollStatus={enrollStatus} qzDetail={qzDetail} setReload={setReload} />)
}
></Route>
{/* 排行榜 */}
<Route path="/competition/:competitionId/rank"
render={
() => (<Rank {...props} isLoacl={qzDetail && qzDetail.is_local} />)
}
></Route>
{/* 交流互动 */}
<Route path="/competition/:competitionId/chat"
render={
@ -303,7 +324,7 @@ const Competition = (props) => {
{/* 大赛介绍 */}
<Route path="/competition/:competitionId"
render={
() => (competitionId=='qz2022'? <Introduce {...props} qzDetail={qzDetail} /> :<Fingerpost {...props} qzDetail={qzDetail} />)
() => (competitionId == 'qz2022' ? <Introduce {...props} qzDetail={qzDetail} /> : <Fingerpost {...props} qzDetail={qzDetail} />)
}
></Route>
</Switch>

View File

@ -11,33 +11,33 @@ export function getCompetitionDetail(competitionId) {
}
// 报名启智2022 竞赛?debug=teacher
export async function enrollCompetition(data,competitionId){
return axios.post(`/competition_infos/${competitionId}/enroll.json`,data);
export async function enrollCompetition(data, competitionId) {
return axios.post(`/competition_infos/${competitionId}/enroll.json`, data);
}
// 修改报名信息
export async function enrollUpdate(data,competitionId){
return axios.post(`/competition_infos/${competitionId}/enroll_update.json`,data);
export async function enrollUpdate(data, competitionId) {
return axios.post(`/competition_infos/${competitionId}/enroll_update.json`, data);
}
// 统计启智2022 竞赛
export async function stattistics(competitionId){
return axios.get( `/competition_infos/${competitionId}/statistics.json`);
export async function stattistics(competitionId) {
return axios.get(`/competition_infos/${competitionId}/statistics.json`);
}
// 竞赛提交作品
export async function uploadCompetition(data,competitionId){
return axios.post(`/competition_infos/${competitionId}/upload.json`,data);
export async function uploadCompetition(data, competitionId) {
return axios.post(`/competition_infos/${competitionId}/upload.json`, data);
}
// 管理-竞赛报名列表?debug=admin
export function getEnrollList(params,competitionId) {
return axios.get(`/competition_infos/${competitionId}/enroll_list.json`,params={params});
export function getEnrollList(params, competitionId) {
return axios.get(`/competition_infos/${competitionId}/enroll_list.json`, params = { params });
}
// 管理-竞赛提交作品列表&debug=admin
export function getProList(params,competitionId) {
return axios.get(`/competition_infos/${competitionId}/enroll_list.json?upload=true`,params={params});
export function getProList(params, competitionId) {
return axios.get(`/competition_infos/${competitionId}/enroll_list.json?upload=true`, params = { params });
}
// 通知公告列表
@ -46,36 +46,41 @@ export function getNoticeList(competitionId) {
}
// 通知公告详情
export function getNoticeDetail(id,competitionId) {
export function getNoticeDetail(id, competitionId) {
return axios.get(`/competition_infos/${competitionId}/competition_notices/${id}.json`);
}
// 新增通知
export async function addCompetitionNotice(data,competitionId){
return axios.post(`/competition_infos/${competitionId}/competition_notices.json`,data);
export async function addCompetitionNotice(data, competitionId) {
return axios.post(`/competition_infos/${competitionId}/competition_notices.json`, data);
}
// 编辑通知
export async function updateCompetitionNotice(id,data,competitionId){
return axios.put(`/competition_infos/${competitionId}/competition_notices/${id}.json`,data);
export async function updateCompetitionNotice(id, data, competitionId) {
return axios.put(`/competition_infos/${competitionId}/competition_notices/${id}.json`, data);
}
// 删除通知
export async function deleteCompetitionNotice(id,competitionId){
export async function deleteCompetitionNotice(id, competitionId) {
return axios.delete(`/competition_infos/${competitionId}/competition_notices/${id}.json`);
}
// 编辑大赛介绍、大赛指南、关于我
export async function updateCompetition(data,competitionId){
return axios.put(`/competition_infos/${competitionId}.json`,data);
export async function updateCompetition(data, competitionId) {
return axios.put(`/competition_infos/${competitionId}.json`, data);
}
// 修改竞赛报名状态
export async function updateEnroll(data,competitionId){
return axios.post(`/competition_infos/${competitionId}/enroll_status_update.json`,data);
export async function updateEnroll(data, competitionId) {
return axios.post(`/competition_infos/${competitionId}/enroll_status_update.json`, data);
}
// 报名表扫描件上传
export async function updateTemplate(data,competitionId){
return axios.post(`/competition_infos/${competitionId}/upload_enroll_template.json`,data);
export async function updateTemplate(data, competitionId) {
return axios.post(`/competition_infos/${competitionId}/upload_enroll_template.json`, data);
}
export async function rankingList(competitionId, params) {
return axios.get(`/competition_infos/${competitionId}/ranking_list.json`, { params });
}

View File

@ -44,7 +44,7 @@ export default Form.create()((props) => {
const applyStatus = qzDetail
? Date.parse(new Date()) < Date.parse(new Date(qzDetail.enroll_date))
: true;
if ((current_user && !current_user.login) || !applyStatus) {
if ((current_user && !current_user.login) || (!applyStatus && (enrollStatus && !enrollStatus.enroll_status))) {
history.push(`/competition/${competitionId}`);
}
if (
@ -77,7 +77,7 @@ export default Form.create()((props) => {
// form
const helper = useCallback(
(label, name, rules, widget, extra,className) => (
(label, name, rules, widget, extra, className) => (
<Form.Item label={label} extra={extra} className={className}>
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
</Form.Item>
@ -96,14 +96,14 @@ export default Form.create()((props) => {
//
function checkInfo() {
if(!files.length){
setFieldsValue({enroll_template_id:''})
if (!files.length) {
setFieldsValue({ enroll_template_id: '' })
}
setErrorMessage(undefined);
//
if (members.length > 0) {
let all = 0;
const len =3;
const len = 3;
//
let sizes = 0;
members.map((item) => {
@ -186,7 +186,7 @@ export default Form.create()((props) => {
info.file.status === "removed"
) {
setFiles(appendFileSizeToUploadFileAll(info.fileList).slice(-1));
}
}
@ -199,15 +199,15 @@ export default Form.create()((props) => {
//
function beforeUpload(file) {
const isLt100M = file.size / 1024 / 1024 < 10;
const isType = file.type === "image/png" || file.type === "image/jpg" || file.type === "image/jpeg" ||file.name.endsWith(".zip") || file.name.endsWith(".rar");
if(!isType){
const isType = file.type === "image/png" || file.type === "image/jpg" || file.type === "image/jpeg" || file.name.endsWith(".zip") || file.name.endsWith(".rar");
if (!isType) {
message.error("只能上传指定类型文件");
}
if (!isLt100M) {
message.error("文件大小必须小于10MB");
}
return isLt100M &&isType;
return isLt100M && isType;
}
return (
@ -218,11 +218,10 @@ export default Form.create()((props) => {
<div className="img_span">
<img src={apply_input} className="step_icon_svg" alt="" />
<span
className={`${
enrollStatus &&
className={`${enrollStatus &&
(!enrollStatus.enroll_status || enrollStatus.status === 0) &&
"active"
}`}
}`}
>
个人信息
</span>
@ -231,9 +230,8 @@ export default Form.create()((props) => {
<div className="img_span">
<img src={apply_check} className="step_icon_svg" alt="" />
<span
className={`${
enrollStatus && enrollStatus.status === 1 && "active"
}`}
className={`${enrollStatus && enrollStatus.status === 1 && "active"
}`}
>
报名审核中
</span>
@ -242,9 +240,8 @@ export default Form.create()((props) => {
<div className="img_span">
<img src={apply_success} className="step_icon_svg" alt="" />
<span
className={`${
enrollStatus && enrollStatus.status === 2 && "active"
}`}
className={`${enrollStatus && enrollStatus.status === 2 && "active"
}`}
>
报名成功
</span>
@ -379,7 +376,7 @@ export default Form.create()((props) => {
<div className="edit_table">
{/* <p className="mt10">成员 : </p> */}
{qzDetail && (
<EditTable
members={
@ -436,7 +433,7 @@ export default Form.create()((props) => {
{enrollStatus && enrollStatus.enroll_info.mail}
</Tooltip>
</div>
<div className={`info-right }`}>
<span>队长单位证明 : </span>
@ -453,7 +450,7 @@ export default Form.create()((props) => {
)}
</div>
{enrollStatus && enrollStatus.enroll_info.members.length ?<div className={`info-right `}>
{enrollStatus && enrollStatus.enroll_info.members.length ? <div className={`info-right `}>
<span>成员 : </span>
<Tooltip
title={
@ -471,10 +468,10 @@ export default Form.create()((props) => {
return item.real_name
}).join('')}
</Tooltip>
</div>:''}
</div> : ''}
</div>
{enrollStatus && enrollStatus.enroll_info.status == 2 &&qzDetail && qzDetail.enroll_template&& (
{enrollStatus && enrollStatus.enroll_info.status == 2 && qzDetail && qzDetail.enroll_template && (
<div className="download_box">
<a
href={
@ -496,7 +493,8 @@ export default Form.create()((props) => {
)}
</div>
{enrollStatus &&
(!enrollStatus.enroll_status || enrollStatus.status === 0) && (
(!enrollStatus.enroll_status || enrollStatus.status === 0) &&
(
<div className="apply_but">
<Button type="primary" className="submit_info" onClick={checkInfo}>
提交资料

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 924 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 988 B

View File

@ -0,0 +1,88 @@
import React, { useEffect, useState } from "react";
import { Tabs, Input, Pagination, Table, Tooltip } from 'antd';
import { rankingList } from '../api';
import rank_start from "../image/rank_start.png";
import './index.scss';
import '../index.scss';
const { Search } = Input;
function Rank({ isLocal, match }) {
const { competitionId } = match.params;
const [keyword, setKeyword] = useState('');
const [curPage, setCurPage] = useState(1);
const [list, setList] = useState([]);
const columns = [{
title: '排名',
dataIndex: 'index',
render: (text, record, i) => {
return i < 3 ? <div className={`rank-icon rank${i}`}></div> : i + 1
}
},
{
title: '参赛单位',
dataIndex: 'org_name',
width: '30%',
render: (text, record) => {
return <Tooltip title={text} placement="topLeft">{text}</Tooltip>;
}
},
{
title: '参赛队长',
dataIndex: 'leader',
},
{
title: '三元组个数',
dataIndex: 'other_score_1',
},
{
title: '分数',
dataIndex: 'score',
},
]
useEffect(() => {
rankingList(competitionId, {
page: curPage,
limit: 20,
keyword,
}).then(res => {
if (res && res.data && res.data.message == "success") {
setList(res.data.data)
}
})
}, [keyword, curPage])
return (
<div className="rang-bg ">
<div className="rank_bg1" ></div>
<div className="rank_bg2" ></div>
<div className="rank qz_main clearfix">
<div className="rank-head">
<div className="head-tit">
<span className="head-tit-img"></span> <span className="head-tit-img"></span>
</div>
</div>
<div className="rank-list">
<img className="ccks_start" src={rank_start}/>
<div className="rank-search">
<Search
placeholder='请输入参赛单位/参赛队长姓名进行搜索'
allowClear
enterButton
onSearch={(value) => { setKeyword(value) }}
/>
</div>
<Table
rowKey={(row, i) => row.id || i}
dataSource={list}
columns={columns}
/>
</div>
</div>
</div>
)
}
export default Rank;

View File

@ -0,0 +1,123 @@
.rang-bg {
position: relative;
background-color: #f1f7fc;
padding: 20px 0 70px;
.rank_bg1 {
position: absolute;
width: 33.45vw;
height: 27.5vw;
background-image: url("../image/rank_bg1.png");
background-size: 100% 100%;
left: 0;
z-index: 0;
}
.rank_bg2 {
position: absolute;
width: 33.45vw;
height: 27.5vw;
top: 10vw;
right: 0;
z-index: 0;
background-image: url("../image/rank_bg1.png");
background-size: 100% 100%;
}
}
.rank {
position: relative;
margin: 0 auto;
padding: 10px;
background-color: #4c5ef1;
border-radius: 5px;
z-index: 10;
.rank-head {
text-align: center;
}
.head-tit {
display: inline-flex;
justify-content: center;
align-items: center;
color: #ffdc9f;
font-size: 24px;
margin: 15px auto 20px;
}
.head-tit-img {
display: inline-block;
margin: 0 18px;
width: 64px;
height: 15px;
background-image: url("../image/rank_tit.png");
background-size: 100% 100%;
&:last-child {
transform: rotate(180deg);
}
}
.rank-search {
text-align: right;
margin: -15px auto 10px;
.ant-input-group-wrapper{
width: 30%;
}
.ant-input {
border: 0 !important;
background: #f1f3ff !important;
}
}
.ant-input-group {
.ant-input-affix-wrapper {
height: 40px;
}
.ant-input-search-button {
font-size: 20px;
width: 61px;
height: 40px;
border-color: #7e89ff;
background-color: #7e89ff;
border-radius: 0px 4px 4px 0px;
}
}
.rank-list {
position: relative;
background: #fff;
padding: 40px;
border-radius: 10px;
.ant-table-thead > tr > th {
background: inherit;
}
.ant-table-tbody > tr > td {
border-bottom: 1px dashed #bed4ff;
}
.rank-icon {
width: 36px;
height: 35px;
}
.rank0 {
background-image: url("../image/rank_first.png");
background-size: 100% 100%;
}
.rank1 {
background-image: url("../image/rank_second.png");
background-size: 100% 100%;
}
.rank2 {
background-image: url("../image/rank_third.png");
background-size: 100% 100%;
}
}
.ant-table-tbody > tr:nth-child(2n) > td {
background: #f8faff;
}
.ccks_start{
position: absolute;
width: 187px;
top: -10px;
left: -19px;
}
}

View File

@ -0,0 +1,180 @@
import React, { useState, useEffect } from "react";
import { Prompt } from 'react-router-dom'
import { Select, Button, Upload, Modal, Icon, message } from 'antd';
import { appendFileSizeToUploadFileAll, getUploadActionUrl, getImageUrl } from 'educoder';
import { current_main_site_url } from '../fetch.js';
import { uploadCompetition } from '../api';
import ccks_upload from "../image/ccks_upload.png";
import ccks_upload_success from "../image/ccks_upload_success.png";
import ccks_csv from "../image/ccks_csv.png";
import './index.scss';
import '../../index.scss';
import '../apply/index.scss';
function Introduce({ form, showNotification, match, history, enrollStatus, current_user, qzDetail, setReload }) {
const { competitionId } = match.params;
console.log(enrollStatus);
//
// const upload = enrollStatus && (!enrollStatus.upload_status || enrollStatus.upload_status === 1);
const [upload, setUpload] = useState(false);
// loading
const [loading, setLoading] = useState(false);
const [files, setFiles] = useState();
//
const [changeFiles, setChangeFiles] = useState(false);
const [visible, setVisible] = useState(false);
window.onbeforeunload = function (e) {
if (changeFiles) {
e.returnValue = "离开此页面将不保留已上传的作品文件,确定离开?";
}
}
useEffect(() => {
if (enrollStatus && (!enrollStatus.upload_status || enrollStatus.upload_status === 1)) {
setUpload(true);
}
}, [enrollStatus])
useEffect(() => {
// referStatus :
if (qzDetail && enrollStatus && current_user) {
const referStatus = qzDetail && !(Date.parse(new Date()) < Date.parse(new Date(qzDetail.upload_date)));
// URL访 enrollStatus.status = 0
if (referStatus || (current_user && !current_user.login) || (enrollStatus && (!enrollStatus.enroll_status || enrollStatus.status <2))) {
history.push(`/competition/${competitionId}`);
}
}
}, [qzDetail, current_user, enrollStatus])
useEffect(() => {
if (enrollStatus && enrollStatus.upload_status) {
enrollStatus.attachments.map(item => {
item.uid = 'rc-upload' + item.id;
item.name = item.title;
item.status = "done";
});
setFiles(enrollStatus.attachments);
}
}, [enrollStatus]);
function handleChange(info) {
if (info.file.status === 'uploading' || info.file.status === "done" || info.file.status === 'removed') {
setLoading(true);
setFiles(info.fileList.slice(-1))
}
if (info.file.status === "done" || info.file.status === 'removed') {
setLoading(false);
setChangeFiles(true);
}
}
//
function download(file) {
const fileId = file.id || file.response.id;
window.open(`${current_main_site_url}/api/attachments/${fileId}`);
}
//
function beforeUpload(file) {
const isZip = file.name.endsWith(".csv");
if (!isZip) {
showNotification(`只能上传csv文件`);
}
const isLt100M = file.size / 1024 / 1024 < 50;
if (!isLt100M) {
showNotification(`文件大小必须小于${50}MB!`);
}
return isLt100M && isZip;
}
//
function referProduction() {
if (files && files.length === 1) {
const params = {
"attachment_ids": [files[0].response.id]
}
uploadCompetition(params, competitionId).then(response => {
if (response && response.status === 200) {
setChangeFiles(false);
setReload(Math.random());
setVisible(false);
setUpload(false);
message.success('提交作品成功');
} else {
message.error(response.data.message);
}
})
}
}
return (
<div className="refer_bg rang-bg">
<div className="rank_bg1" ></div>
<div className="rank_bg2" ></div>
{
changeFiles &&
<Prompt
when={true}
message={() => '离开此页面将不保留已上传的作品文件,确定离开?'}
/>
}
<div className="qz_main refer ccks_refer">
<div className="refer_tit">上传作品</div>
{upload ? <div className="refer_content">
<img src={ccks_upload} className="refer_img mb20" alt="" />
<div className="refer_tip">请上传utf-8编码格式的csv格式作品</div>
<Upload
accept=".csv"
// action?debug=admin
action={getUploadActionUrl}
fileList={files}
onChange={handleChange}
onDownload={download}
beforeUpload={beforeUpload}
showUploadList={false}
>
<Button className="upload" >上传</Button>
</Upload>
</div>
: <div className="refer_content">
<img src={ccks_upload_success} className="refer_img mb20" alt="" />
<div className="refer_tip">您的作品已上传成功可在排行榜实时查看作品得分</div>
</div>
}
{
Array.isArray(files) && files.map(i => {
return <div className="ccks_csv" key={i.name}><img src={ccks_csv} className="ccks_csv_img" alt="" />
<a href={getImageUrl(i.url)}>{i.name} <span className="filesize">{i.filesize}</span></a>
{enrollStatus && enrollStatus.enroll_info && enrollStatus.enroll_info && enrollStatus.enroll_info.api_result_text && <div className="error_text">{enrollStatus.enroll_info.api_result_text}</div>}
</div>
})
}
{upload ? <Button type="primary" onClick={() => { changeFiles ? setVisible(true) : message.error("您暂未上传作品文件") }} loading={loading} >提交作品</Button>
: <Button type="primary" onClick={() => { setUpload(true) }} >重新提交</Button>
}
</div>
<Modal
title="提示"
visible={visible}
onOk={referProduction}
onCancel={() => { setVisible(false) }}
centered
wrapClassName="applyInfoCon"
cancelText=""
>
<div className="tips mb10"><i className="iconfont icon-shanchu_tc_icon1 font-24 mr10" style={{ color: '#ffa13a' }}></i><span className="tipTitle font-16">确定提交作品</span></div>
<span>可重复提交每天最多可提交三次作品!</span>
</Modal>
</div>
)
}
export default Introduce;

View File

@ -1,147 +1,14 @@
import React, { useState, useEffect } from "react";
import {Prompt} from 'react-router-dom'
import {Select, Button, Upload, Modal, Icon, message } from 'antd';
import { appendFileSizeToUploadFileAll, getUploadActionUrl } from 'educoder';
import {current_main_site_url} from '../fetch.js';
import {uploadCompetition} from '../api';
import refer from "../image/refer.svg";
import React, {useState, useCallback} from "react";
import Qz2022 from './qz2022';
import Ccks from './ccks';
import './index.scss';
import '../../index.scss';
import '../apply/index.scss';
import '../index.scss';
function Introduce({ form, showNotification, match, history, enrollStatus, current_user, qzDetail, setReload}) {
export default (props)=>{
const {match} = props;
const { competitionId } = match.params;
// loading
const [loading, setLoading] = useState(false);
const [files, setFiles] = useState();
//
const [changeFiles, setChangeFiles] = useState(false);
const [visible, setVisible] = useState(false);
window.onbeforeunload = function (e) {
if(changeFiles){
e.returnValue = "离开此页面将不保留已上传的作品文件,确定离开?";
}
}
useEffect(()=>{
// referStatus :
const referStatus = qzDetail && !(Date.parse(new Date()) > Date.parse(new Date(qzDetail.enroll_date)) && Date.parse(new Date()) < Date.parse(new Date(qzDetail.upload_date)));
// URL访 enrollStatus.status = 0
if(referStatus || (current_user && !current_user.login) || (enrollStatus && (!enrollStatus.enroll_status || enrollStatus.status === 0))){
history.push(`/competition/${competitionId}`);
}
},[qzDetail, current_user, enrollStatus])
useEffect(() => {
if(enrollStatus && enrollStatus.upload_status){
enrollStatus.attachments.map(item=>{
item.uid = 'rc-upload'+item.id;
item.name = item.title;
item.status = "done";
});
setFiles(enrollStatus.attachments);
}
}, [enrollStatus]);
function handleChange(info) {
if (info.file.status === 'uploading' || info.file.status === "done" || info.file.status === 'removed') {
setLoading(true);
setFiles(appendFileSizeToUploadFileAll(info.fileList).slice(-1))
}
if(info.file.status === "done" || info.file.status === 'removed'){
setLoading(false);
setChangeFiles(true);
}
}
//
function download(file){
const fileId = file.id || file.response.id;
window.open(`${current_main_site_url}/api/attachments/${fileId}`);
}
//
function beforeUpload(file){
const isZip = file.name.endsWith(".zip") || file.name.endsWith(".tar") || file.name.endsWith(".rar");
if(!isZip){
showNotification(`只能上传压缩包文件`);
}
const isLt100M = file.size / 1024 / 1024 < 50;
if (!isLt100M) {
showNotification(`文件大小必须小于${50}MB!`);
}
return isLt100M && isZip;
}
//
function referProduction(){
if(files && files.length === 1){
const params = {
"attachment_ids": [files[0].response.id]
}
uploadCompetition(params,competitionId).then(response=>{
if(response && response.status === 200){
setChangeFiles(false);
setReload(Math.random());
setVisible(false);
message.success('提交作品成功');
}else{
message.error(response.data.message);
}
})
}
}
//
const upload = enrollStatus && (!enrollStatus.upload_status || enrollStatus.status === 1);
return (
<div className="refer_bg">
{
changeFiles &&
<Prompt
when={true}
message={() => '离开此页面将不保留已上传的作品文件,确定离开?'}
/>
}
<div className="qz_main refer">
<img src={refer} className="refer_img mb20" alt=""/>
<Upload
accept=".zip,.rar,.tar"
// action?debug=admin
action={getUploadActionUrl}
fileList={files}
onChange={handleChange}
onDownload={download}
beforeUpload={beforeUpload}
showUploadList={{
showDownloadIcon: true,
downloadIcon: <i className="iconfont icon-xiazai-icon"></i>,
showRemoveIcon: false
}}
>
<Button className="upload" disabled={!upload}><Icon type="upload"/>{!upload ? '已' : ''}上传</Button>
</Upload>
<Modal/>
{/* {enrollStatus && enrollStatus.upload_status && enrollStatus.status === 1 && <div className="refer_tip mt15 cover"><i className="iconfont icon-erciqueren_icon mr10"></i>您的作品被打回,可以再次提交作品,未重新提交前保留您原来的提交记录。</div>} */}
<div className="refer_tip mt15 cover"><i className="iconfont icon-erciqueren_icon mr10"></i>{enrollStatus && enrollStatus.upload_status && enrollStatus.status === 1 ?"您的作品被打回,可以再次提交作品,未重新提交前保留您原来的提交记录。":"提案提交后不允许再修改,如有问题请联系分赛区管理员"}</div>
<div className="refer_tip mt20">上传单个作品压缩包仅限上传一个压缩包</div>
<div className="refer_bor"></div>
<Button type="primary" onClick={()=>{changeFiles ? setVisible(true) : message.error("您暂未上传作品文件")}} loading={loading} disabled={!upload}>{!upload ? '已' : ''}提交作品</Button>
</div>
<Modal
title="提示"
visible={visible}
onOk={referProduction}
onCancel={()=>{setVisible(false)}}
centered
wrapClassName="applyInfoCon"
cancelText=""
>
<div className="tips mb10"><i className="iconfont icon-shanchu_tc_icon1 font-24 mr10" style={{color: '#ffa13a'}}></i><span className="tipTitle font-16">确定提交作品</span></div>
<span>提交后作品文件将无法修改!</span>
</Modal>
</div>
return(
competitionId=="qz2022"? <Qz2022 {...props} />:<Ccks {...props} />
)
}
export default Introduce;
}

View File

@ -1,53 +1,151 @@
.refer_bg{
padding: 40px 0 60px;
.refer_bg {
padding: 40px 0 60px;
}
.refer{
background-color:white;
// border:1px solid rgba(46, 91, 254, 0.37);
border-radius:4px 4px 0px 0px;
display: flex;
align-items: center;
flex-direction: column;
padding: 66px 0 86px;
.refer_img{
width: 48px;
.refer {
position: relative;
background-color: white;
// border:1px solid rgba(46, 91, 254, 0.37);
border-radius: 4px 4px 0px 0px;
display: flex;
align-items: center;
flex-direction: column;
padding: 66px 0 86px;
.refer_img {
width: 48px;
}
.upload {
padding: 0 28px;
}
.refer_tip {
color: #595959;
font-size: 15px;
&.cover {
color: red;
margin-bottom: -20px;
}
.upload{
padding: 0 28px;
&.cover .icon-erciqueren_icon {
color: #fa2d2d;
}
.refer_tip{
color:#595959;
font-size:15px;
&.cover{
color: red;
margin-bottom: -20px;
}
&.cover .icon-erciqueren_icon{
color: #FA2D2D;
}
}
.refer_bor {
width: 40vw;
border-bottom: 1px solid #eeeeee;
margin: 25px 0 35px;
}
> span {
text-align: center;
}
.ant-upload-list-item-info {
color: #2e5bfe;
:hover {
color: #2e5bfe;
}
.refer_bor{
width: 40vw;
border-bottom: 1px solid #eeeeee;
margin: 25px 0 35px;
.ant-upload-list-item-card-actions {
right: -55px;
.anticon {
padding-right: 10px;
}
}
>span{
text-align: center;
& a:link {
color: #2e5bfe;
}
.ant-upload-list-item-info{
color: #2e5bfe;
:hover{color: #2e5bfe;}
.ant-upload-list-item-card-actions{
right: -55px;
.anticon{padding-right: 10px;}
}
& a:link{
color: #2e5bfe;
}
}
.ant-upload-list-item:hover .ant-upload-list-item-info {
background: none;
}
.ant-upload-list-item {
text-overflow: ellipsis;
max-width: 46vw;
}
&.ccks_refer {
border-radius: 10px;
padding: 24px 57px;
.refer_content {
text-align: center;
width: 100%;
height: 252px;
background-image: linear-gradient(180deg, #f7fafe 0%, #f2f8ff 100%);
border: 1px dashed #c0c4d3;
.refer_img {
width: 92px;
margin: 33px auto 24px;
}
}
.ant-upload-list-item:hover .ant-upload-list-item-info{background: none;}
.ant-upload-list-item{
text-overflow: ellipsis;
max-width: 46vw;
.upload {
color: #4154f1;
border-color: #4154f1;
&:hover {
opacity: 0.75;
}
}
}
.refer_tip {
color: #243b55;
font-size: 17px;
text-align: center;
margin-bottom: 15px;
}
.ccks_csv {
align-self: flex-start;
margin-top: 24px;
color: #243b55;
font-size: 15px;
display: flex;
.ccks_csv_img {
width: 34px;
margin-right: 10px;
}
.filesize {
margin-left: 10px;
color: #90a0b2;
}
.error_text{
margin-left: 30px;
color: red;
}
}
}
.ant-btn-primary{
margin-top:35px;
}
.refer_tit {
font-weight: 700;
color: #0b1929;
font-size: 18px;
align-self: flex-start;
margin-bottom: 5px;
}
}
.rang-bg {
position: relative;
background-color: #f1f7fc;
padding:40px 0 70px;
.rank_bg1{
position: absolute;
width: 33.45vw;
height: 27.5vw;
background-image: url("../image/rank_bg1.png");
background-size: 100% 100%;
left:0;
z-index: 0;
}
.rank_bg2{
position: absolute;
width: 33.45vw;
height: 27.5vw;
top:10vw;
right: 0;
z-index: 0;
background-image: url("../image/rank_bg1.png");
background-size: 100% 100%;
}
}

View File

@ -0,0 +1,152 @@
import React, { useState, useEffect } from "react";
import { Prompt } from 'react-router-dom'
import { Select, Button, Upload, Modal, Icon, message } from 'antd';
import { appendFileSizeToUploadFileAll, getUploadActionUrl } from 'educoder';
import { current_main_site_url } from '../fetch.js';
import { uploadCompetition } from '../api';
import refer from "../image/refer.svg";
import './index.scss';
import '../../index.scss';
import '../apply/index.scss';
function Introduce({ form, showNotification, match, history, enrollStatus, current_user, qzDetail, setReload }) {
const { competitionId } = match.params;
// loading
const [loading, setLoading] = useState(false);
const [files, setFiles] = useState();
//
const [changeFiles, setChangeFiles] = useState(false);
const [visible, setVisible] = useState(false);
window.onbeforeunload = function (e) {
if (changeFiles) {
e.returnValue = "离开此页面将不保留已上传的作品文件,确定离开?";
}
}
useEffect(() => {
// referStatus :
const referStatus = qzDetail && !(Date.parse(new Date()) > Date.parse(new Date(qzDetail.enroll_date)) && Date.parse(new Date()) < Date.parse(new Date(qzDetail.upload_date)));
// URL访 enrollStatus.status = 0
if (referStatus || (current_user && !current_user.login) || (enrollStatus && (!enrollStatus.enroll_status || enrollStatus.status === 0))) {
history.push(`/competition/${competitionId}`);
}
}, [qzDetail, current_user, enrollStatus])
useEffect(() => {
if (enrollStatus && enrollStatus.upload_status) {
enrollStatus.attachments.map(item => {
item.uid = 'rc-upload' + item.id;
item.name = item.title;
item.status = "done";
});
setFiles(enrollStatus.attachments);
}
}, [enrollStatus]);
function handleChange(info) {
if (info.file.status === 'uploading' || info.file.status === "done" || info.file.status === 'removed') {
setLoading(true);
setFiles(appendFileSizeToUploadFileAll(info.fileList).slice(-1))
}
if (info.file.status === "done" || info.file.status === 'removed') {
setLoading(false);
setChangeFiles(true);
}
}
//
function download(file) {
const fileId = file.id || file.response.id;
window.open(`${current_main_site_url}/api/attachments/${fileId}`);
}
//
function beforeUpload(file) {
const isZip = file.name.endsWith(".zip") || file.name.endsWith(".tar") || file.name.endsWith(".rar");
if (!isZip) {
showNotification(`只能上传压缩包文件`);
}
const isLt100M = file.size / 1024 / 1024 < 50;
if (!isLt100M) {
showNotification(`文件大小必须小于${50}MB!`);
}
return isLt100M && isZip;
}
//
function referProduction() {
if (files && files.length === 1) {
const params = {
"attachment_ids": [files[0].response.id]
}
uploadCompetition(params, competitionId).then(response => {
if (response && response.status === 200) {
setChangeFiles(false);
setReload(Math.random());
setVisible(false);
message.success('提交作品成功');
//
setTimeout(() => {
setReload(Math.random());
}, 180000);
} else {
message.error(response.data.message);
}
})
}
}
//
const upload = enrollStatus && (!enrollStatus.upload_status || enrollStatus.status === 1);
return (
<div className="refer_bg">
{
changeFiles &&
<Prompt
when={true}
message={() => '离开此页面将不保留已上传的作品文件,确定离开?'}
/>
}
<div className="qz_main refer ccks_refer">
<img src={refer} className="refer_img mb20" alt="" />
<Upload
accept=".zip,.rar,.tar"
// action?debug=admin
action={getUploadActionUrl}
fileList={files}
onChange={handleChange}
onDownload={download}
beforeUpload={beforeUpload}
showUploadList={{
showDownloadIcon: true,
downloadIcon: <i className="iconfont icon-xiazai-icon"></i>,
showRemoveIcon: false
}}
>
<Button className="upload" disabled={!upload}><Icon type="upload" />{!upload ? '已' : ''}上传</Button>
</Upload>
<Modal />
{/* {enrollStatus && enrollStatus.upload_status && enrollStatus.status === 1 && <div className="refer_tip mt15 cover"><i className="iconfont icon-erciqueren_icon mr10"></i>您的作品被打回,可以再次提交作品,未重新提交前保留您原来的提交记录。</div>} */}
<div className="refer_tip mt15 cover"><i className="iconfont icon-erciqueren_icon mr10"></i>{enrollStatus && enrollStatus.upload_status && enrollStatus.status === 1 ? "您的作品被打回,可以再次提交作品,未重新提交前保留您原来的提交记录。" : "提案提交后不允许再修改,如有问题请联系分赛区管理员"}</div>
<div className="refer_tip mt20">上传单个作品压缩包仅限上传一个压缩包</div>
<div className="refer_bor"></div>
<Button type="primary" onClick={() => { changeFiles ? setVisible(true) : message.error("您暂未上传作品文件") }} loading={loading} disabled={!upload}>{!upload ? '已' : ''}提交作品</Button>
</div>
<Modal
title="提示"
visible={visible}
onOk={referProduction}
onCancel={() => { setVisible(false) }}
centered
wrapClassName="applyInfoCon"
cancelText=""
>
<div className="tips mb10"><i className="iconfont icon-shanchu_tc_icon1 font-24 mr10" style={{ color: '#ffa13a' }}></i><span className="tipTitle font-16">确定提交作品</span></div>
<span>提交后作品文件将无法修改!</span>
</Modal>
</div>
)
}
export default Introduce;