|
|
import React, {Component} from 'react';
|
|
|
import {getImageUrl} from 'educoder';
|
|
|
import {Modal, Input, Spin, Tooltip, Icon, Dropdown, Button} from 'antd';
|
|
|
import axios from 'axios';
|
|
|
import competition from '../comcss/competition.css';
|
|
|
import Registrationitem from "../Registrationitem";
|
|
|
import InfiniteScroll from 'react-infinite-scroller';
|
|
|
// import PersonModaltion from "./PersonModaltion";
|
|
|
const {Search} = Input;
|
|
|
|
|
|
//立即申请试用
|
|
|
class PersonModal extends Component {
|
|
|
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
addonAfter: 0,
|
|
|
test: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
|
|
|
test2: [19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
|
|
|
test3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
|
|
|
loading: false,
|
|
|
loading1: false,
|
|
|
loading2: false,
|
|
|
hasMore: true,
|
|
|
person1: false,
|
|
|
person2: false,
|
|
|
Numberofteammentors: "0-3",
|
|
|
Thecurrentnumber: "3",
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
modalCancel = () => {
|
|
|
window.location.href = "/"
|
|
|
}
|
|
|
|
|
|
setDownload = () => {
|
|
|
//立即联系
|
|
|
};
|
|
|
|
|
|
//输入框事件
|
|
|
changeTopicName = (e) => {
|
|
|
// console.log("调用了changeTopicName");
|
|
|
let num = parseInt(e.target.value.length);
|
|
|
if (num > 60) {
|
|
|
return;
|
|
|
}
|
|
|
this.setState({
|
|
|
addonAfter: num < 0 ? 0 : num
|
|
|
});
|
|
|
this.setState({
|
|
|
polls_nametest: e.target.value
|
|
|
})
|
|
|
};
|
|
|
|
|
|
//onSearchsou
|
|
|
onSearch = (value) => {
|
|
|
console.log("搜索的数据" + value);
|
|
|
};
|
|
|
handleInfiniteOnLoad = () => {
|
|
|
this.setState({
|
|
|
loading: true,
|
|
|
})
|
|
|
const test3 = this.state.test;
|
|
|
this.state.test2.forEach(function (item) {
|
|
|
test3.push(item)
|
|
|
});
|
|
|
setTimeout(() => {
|
|
|
this.setState({
|
|
|
test: test3,
|
|
|
hasMore: true,
|
|
|
loading: false,
|
|
|
});
|
|
|
}, 1000)
|
|
|
|
|
|
}
|
|
|
handleInfiniteOnLoad1 = () => {
|
|
|
console.log("调用了方法1111");
|
|
|
this.setState({
|
|
|
loading1: true,
|
|
|
})
|
|
|
setTimeout(() => {
|
|
|
console.log("调用了方法11112");
|
|
|
this.setState({
|
|
|
loading1: false,
|
|
|
hasMore: true,
|
|
|
});
|
|
|
}, 1000)
|
|
|
|
|
|
}
|
|
|
handleInfiniteOnLoad2 = () => {
|
|
|
console.log("调用了方法1111");
|
|
|
this.setState({
|
|
|
loading2: true,
|
|
|
|
|
|
})
|
|
|
setTimeout(() => {
|
|
|
console.log("调用了方法11113");
|
|
|
this.setState({
|
|
|
hasMore: true,
|
|
|
loading2: false,
|
|
|
});
|
|
|
}, 1000)
|
|
|
|
|
|
}
|
|
|
inputOnBlur = (e) => {
|
|
|
console.log("inputOnBlur");
|
|
|
console.log(e);
|
|
|
this.setState({
|
|
|
person1: false
|
|
|
})
|
|
|
}
|
|
|
inputOnBlur2 = (e) => {
|
|
|
console.log("inputOnBlur");
|
|
|
console.log(e);
|
|
|
this.setState({
|
|
|
person2: false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
startSearch = (e) => {
|
|
|
console.log("startSearch");
|
|
|
console.log(e);
|
|
|
}
|
|
|
|
|
|
inputOnFocus = (e) => {
|
|
|
console.log("inputOnFocus");
|
|
|
console.log(e);
|
|
|
|
|
|
this.setState({
|
|
|
person1: true
|
|
|
})
|
|
|
}
|
|
|
|
|
|
inputOnFocus2 = (e) => {
|
|
|
console.log("inputOnFocus2");
|
|
|
console.log(e);
|
|
|
this.setState({
|
|
|
person2: true
|
|
|
})
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
const {
|
|
|
addonAfter, test, test3, Numberofteammentors, Thecurrentnumber, person1, person2
|
|
|
} = this.state;
|
|
|
//Modal
|
|
|
//keyboard是否支持键盘 esc 关闭
|
|
|
//closable 是否显示右上角的关闭按钮
|
|
|
//底部内容，当不需要默认底部按钮时，可以设为 footer={null}
|
|
|
//destroyOnClose 关闭时销毁 Modal 里的子元素
|
|
|
//centered 垂直居中展示 Modal
|
|
|
//visible 弹出框是否显示
|
|
|
const listItems = test.map((item, index) =>
|
|
|
<div className="reglistviewdivss2 " style={{
|
|
|
width: "100%",
|
|
|
display: "flex",
|
|
|
justifyContent: " space-around",
|
|
|
alignItems: "center",
|
|
|
height: "40px",
|
|
|
}}>
|
|
|
<p className=" reglistviewdivss4p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>陈明</p>
|
|
|
<p className=" reglistviewdivss4p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>导师／创建者</p>
|
|
|
<p className=" reglistviewdivss5p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>国防科技大学</p>
|
|
|
<p className=" reglistviewdivss2p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>职称；教授</p>
|
|
|
<p className=" reglistviewdivss33p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
><i className="iconfont icon-guanbi font-12"/></p>
|
|
|
</div>
|
|
|
);
|
|
|
const cpersondiv1Items = test3.map((item, index) =>
|
|
|
<div className="reglistviewdivss2 " style={{
|
|
|
width: "100%",
|
|
|
display: "flex",
|
|
|
justifyContent: " space-around",
|
|
|
alignItems: "center",
|
|
|
height: "40px",
|
|
|
}}>
|
|
|
<p className=" cpersondiv1Items"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>李小猫{index}</p>
|
|
|
<p className=" cpersondiv1Items"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>职称：副教授</p>
|
|
|
<p className=" cpersondiv1Items"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>国防科技大学</p>
|
|
|
</div>
|
|
|
);
|
|
|
const cpersondiv1 = (
|
|
|
<div className={" backgroundspersondiv cpersondiv1 borders2"}>
|
|
|
{
|
|
|
person1 ?
|
|
|
<Spin spinning={this.state.loading1}>
|
|
|
<div className="demo-infinite-container2">
|
|
|
<InfiniteScroll
|
|
|
initialLoad={false}
|
|
|
pageStart={0}
|
|
|
loadMore={() => this.handleInfiniteOnLoad1()}
|
|
|
hasMore={!this.state.loading1 && this.state.hasMore}
|
|
|
useWindow={false}
|
|
|
>
|
|
|
{
|
|
|
cpersondiv1Items
|
|
|
}
|
|
|
|
|
|
</InfiniteScroll>
|
|
|
</div>
|
|
|
</Spin>
|
|
|
:
|
|
|
""
|
|
|
}
|
|
|
</div>
|
|
|
)
|
|
|
const persondiv2Items = test3.map((item, index) =>
|
|
|
<div className="reglistviewdivss2 " style={{
|
|
|
width: "100%",
|
|
|
display: "flex",
|
|
|
justifyContent: " space-around",
|
|
|
alignItems: "center",
|
|
|
height: "40px",
|
|
|
}}>
|
|
|
<p className=" cpersondiv1Items"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>李小猫{index}</p>
|
|
|
<p className=" cpersondiv1Items"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>职称：副教授</p>
|
|
|
<p className=" cpersondiv1Items"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>国防科技大学</p>
|
|
|
<p className=" cpersondiv1Items"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
color: "#FF6800",
|
|
|
}}
|
|
|
>已加入其他战队</p>
|
|
|
</div>
|
|
|
);
|
|
|
const persondiv2 = (
|
|
|
<div className={" backgroundspersondiv cpersondiv1 borders2"}>
|
|
|
{
|
|
|
person2 === true ?
|
|
|
<Spin spinning={this.state.loading2}>
|
|
|
<div className="demo-infinite-container2">
|
|
|
<InfiniteScroll
|
|
|
initialLoad={false}
|
|
|
pageStart={0}
|
|
|
loadMore={() => this.handleInfiniteOnLoad2()}
|
|
|
hasMore={!this.state.loading2 && this.state.hasMore}
|
|
|
useWindow={false}
|
|
|
>
|
|
|
{
|
|
|
persondiv2Items
|
|
|
}
|
|
|
|
|
|
</InfiniteScroll>
|
|
|
</div>
|
|
|
</Spin>
|
|
|
: ""
|
|
|
}
|
|
|
|
|
|
</div>
|
|
|
)
|
|
|
return (
|
|
|
|
|
|
<Modal
|
|
|
keyboard={false}
|
|
|
closable={false}
|
|
|
footer={null}
|
|
|
destroyOnClose={true}
|
|
|
title="创建战队"
|
|
|
centered={true}
|
|
|
visible={this.props.modalsType === undefined ? false : this.props.modalsType}
|
|
|
width="620px"
|
|
|
>
|
|
|
|
|
|
|
|
|
<div className="permaindiv">
|
|
|
{/*队名*/}
|
|
|
<style>{
|
|
|
`
|
|
|
.yslzxueshiskmc .ant-input{
|
|
|
border-right: none !important;
|
|
|
height: 40px !important;
|
|
|
width: 428px !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.yslzxueshiskmc .ant-input-wrapper {
|
|
|
max-width: 487px;
|
|
|
}
|
|
|
.yslzxueshisy span .ant-input-group-addon{
|
|
|
width: 65px !important;
|
|
|
background-color: #fafafa!important;
|
|
|
}
|
|
|
.yslzxueshisy .ant-input-wrapper span{
|
|
|
width: 58px !important;
|
|
|
}
|
|
|
|
|
|
|
|
|
.yslzxueshiskmc .ant-input-group-addon{
|
|
|
width: 65px !important;
|
|
|
background-color: #fafafa!important;
|
|
|
}
|
|
|
.yslzxueshiskmc .ant-input-group-wrapper{
|
|
|
width: 408px !important;
|
|
|
}
|
|
|
.yslzxueshiskmcs .ant-input-group-wrapper{
|
|
|
width: 408px !important;
|
|
|
}
|
|
|
|
|
|
`
|
|
|
}</style>
|
|
|
<div style={{
|
|
|
display: "flex",
|
|
|
flexDirection: "initial",
|
|
|
|
|
|
}}>
|
|
|
<p style={{
|
|
|
width: "59px",
|
|
|
marginTop: "9px",
|
|
|
fontSize: "16px",
|
|
|
}}>
|
|
|
<span style={{
|
|
|
color: "#f5222d",
|
|
|
fontSize: "16px",
|
|
|
}}>*</span>
|
|
|
队名:
|
|
|
</p>
|
|
|
|
|
|
<Input className="yslzxueshiskmc" onInput={this.changeTopicName} placeholder="请输入您的战队名称，最多不超过60个字符"
|
|
|
addonAfter={String(addonAfter) + "/60"} maxLength={60}/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
{/*导师*/}
|
|
|
<div style={{
|
|
|
display: "flex",
|
|
|
flexDirection: "initial",
|
|
|
marginTop: "14px",
|
|
|
}}>
|
|
|
<p style={{
|
|
|
width: "59px",
|
|
|
marginTop: "9px",
|
|
|
fontSize: "16px",
|
|
|
}}>
|
|
|
<span style={{
|
|
|
color: "#f5222d",
|
|
|
fontSize: "16px",
|
|
|
}}>*</span>
|
|
|
导师:
|
|
|
</p>
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.yslzxueshiskmcd .ant-input{
|
|
|
height: 40px !important;
|
|
|
width: 487px !important;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
{/*<div className={"yslzxueshiskmcd2"}>*/}
|
|
|
<Dropdown overlay={cpersondiv1} getPopupContainer={trigger => trigger.parentNode}
|
|
|
visible={this.state.person1}>
|
|
|
<Input
|
|
|
className="yslzxueshiskmcd"
|
|
|
placeholder="请输入老师姓名的任意关键字进行搜索，可以后续在添加"
|
|
|
onPressEnter={this.startSearch}
|
|
|
onBlur={this.inputOnBlur}
|
|
|
onFocus={this.inputOnFocus}
|
|
|
suffix={
|
|
|
<i class="iconfont icon-sousuo"/>
|
|
|
}
|
|
|
/>
|
|
|
</Dropdown>
|
|
|
{/*</div>*/}
|
|
|
</div>
|
|
|
|
|
|
{/*队员*/}
|
|
|
<div style={{
|
|
|
display: "flex",
|
|
|
flexDirection: "initial",
|
|
|
marginTop: "14px",
|
|
|
}}>
|
|
|
<p style={{
|
|
|
width: "59px",
|
|
|
marginTop: "9px",
|
|
|
fontSize: "16px",
|
|
|
}}>
|
|
|
<span style={{
|
|
|
color: "#f5222d",
|
|
|
fontSize: "16px",
|
|
|
}}>*</span>
|
|
|
队员:
|
|
|
</p>
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.yslzxueshiskmcd .ant-input{
|
|
|
height: 40px !important;
|
|
|
width: 487px !important;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
{/*<Search*/}
|
|
|
{/* */}
|
|
|
{/* placeholder="请输入想要队员姓名的任意关键字进行搜索"*/}
|
|
|
{/* onSearch={(value) => this.onSearch(value)}*/}
|
|
|
{/*/>*/}
|
|
|
|
|
|
<Dropdown overlay={persondiv2} getPopupContainer={trigger => trigger.parentNode}
|
|
|
visible={this.state.person2}>
|
|
|
<Input
|
|
|
className="yslzxueshiskmcd"
|
|
|
placeholder="请输入想要队员姓名的任意关键字进行搜索"
|
|
|
onPressEnter={this.startSearch}
|
|
|
onBlur={this.inputOnBlur2}
|
|
|
onFocus={this.inputOnFocus2}
|
|
|
suffix={
|
|
|
<i class="iconfont icon-sousuo "/>
|
|
|
}
|
|
|
/>
|
|
|
</Dropdown>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
{/*表格*/}
|
|
|
<div style={{marginTop: "18px", marginLeft: "53px", border: "1px solid #E0E0E0"}}>
|
|
|
{/*<PersonModaltion ></PersonModaltion>*/}
|
|
|
<div>
|
|
|
<div className="reglistviewdivss2 " style={{
|
|
|
width: "100%",
|
|
|
display: "flex",
|
|
|
justifyContent: " space-around",
|
|
|
alignItems: "center",
|
|
|
height: "40px",
|
|
|
backgroundPosition: "center",
|
|
|
backgroundSize: "110% 100%",
|
|
|
backgroundColor: "#E0E0E0",
|
|
|
|
|
|
}}>
|
|
|
<p className=" reglistviewdivss4p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>姓名</p>
|
|
|
<p className=" reglistviewdivss4p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>角色</p>
|
|
|
<p className=" reglistviewdivss5p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>单位</p>
|
|
|
<p className=" reglistviewdivss2p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>其他</p>
|
|
|
<p className=" reglistviewdivss3p"
|
|
|
style={{
|
|
|
textAlign: "center",
|
|
|
}}
|
|
|
>操作</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<Spin spinning={this.state.loading}>
|
|
|
<div className="demo-infinite-container">
|
|
|
<InfiniteScroll
|
|
|
|
|
|
initialLoad={false}
|
|
|
pageStart={0}
|
|
|
loadMore={() => this.handleInfiniteOnLoad()}
|
|
|
hasMore={!this.state.loading && this.state.hasMore}
|
|
|
useWindow={false}
|
|
|
>
|
|
|
{listItems}
|
|
|
|
|
|
</InfiniteScroll>
|
|
|
</div>
|
|
|
</Spin>
|
|
|
</div>
|
|
|
|
|
|
{/*最后一行文字*/}
|
|
|
<p style={{
|
|
|
marginLeft: "53px",
|
|
|
color: "#D0021B",
|
|
|
fontSize: "12px",
|
|
|
marginTop: "9px"
|
|
|
}}>战队导师为{Numberofteammentors}人,现在为{Thecurrentnumber}人</p>
|
|
|
<div style={{
|
|
|
marginTop: "24px",
|
|
|
marginLeft: "53px",
|
|
|
display: "flex",
|
|
|
alignItems: "center",
|
|
|
paddingBottom: "20px"
|
|
|
}}>
|
|
|
<div style={{
|
|
|
display: "flex",
|
|
|
justifyContent: "center",
|
|
|
width: "100%"
|
|
|
}}>
|
|
|
<div className="personbut1">
|
|
|
<p>取消</p>
|
|
|
</div>
|
|
|
<div className="personbut2">
|
|
|
<p>确定</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Modal>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default PersonModal; |
