题库个人主页

public/react/src/modules/projectPackages/packageconcnet.css

@@ -295,11 +295,11 @@
 
 .topsj{
     position: absolute;
-    top: -6px;
+    top: -3px;
 }
 .bottomsj{
     position: absolute;
-    bottom: -6px;
+    bottom: -5px;
 }
 .touchSelect .ant-spin-dot-spin{
     margin-top: 30% !important;

public/react/src/modules/user/usersInfo/Infos.js

@@ -261,6 +261,12 @@ class Infos extends Component{
         <Switch {...this.props}>
             
             {/* --------------------------------------------------------------------- */}
+						{/* 题库 */}
+						<Route exact path="/users/:username/topics/:topicstype"
+									 render={
+										 (props) => (<InfosTopics {...this.props} {...props} {...this.state} {..._commonProps}/>)
+									 }
+						></Route>
 
             {/* 课堂 */}
             {/* http://localhost:3007/courses/1309/homework/9300/setting */}
@@ -306,12 +312,6 @@ class Infos extends Component{
               }
             ></Route>
 
-						{/* 题库 */}
-						<Route exact path="/users/:username/topics"
-									 render={
-										 (props) => (<InfosTopics {...this.props} {...props} {...this.state} {..._commonProps}/>)
-									 }
-						></Route>
 
 
             <Route exact path="/users/:username" 

public/react/src/modules/user/usersInfo/InfosBanner.js

@@ -122,7 +122,7 @@ class InfosBanner extends Component{
 						{ user_id===targetuserid&&user_type!="学生"?<li className={`${moduleName == 'topics' ? 'active' : '' }`}>
 							<Link
 								onClick={() => this.setState({moduleName: 'topics'})}
-								to={`/users/${username}/topics`}>题库</Link>
+								to={`/users/${username}/topics/personal`}>题库</Link>
 						</li>:""}
 
           </div>

public/react/src/modules/user/usersInfo/InfosTopics.js

@@ -9,30 +9,124 @@ import NoneData from '../../courses/coursesPublic/NoneData';
 import "./usersInfo.css"
 import moment from 'moment';
 
+
 class InfosTopics extends Component{
 	constructor(props){
 		super(props);
 		this.state={
-			isSpin:false
+			isSpin:false,
+			category:"common",
+			course_list_id:undefined,
+			sort_by:"updated_at",
+			sort_direction:"desc",
+			page:1,
+			data:undefined
 		}
 	}
 
 	componentDidMount=()=>{
+		let types=this.props.match.params.topicstype;
+		let { category,
+			course_list_id,
+			sort_by,
+			sort_direction,
+			page
+		}=this.state;
+		this.searchAlldata(
+			types,
+			category,
+			course_list_id,
+			sort_by,
+			sort_direction,
+			page
+		)
+
+	}
+
+	searchAlldata=(type,category,course_list_id,sort_by,sort_direction,page)=>{
+		let user_id=this.props.current_user&&this.props.current_user.user_id;
+
+
+		let url=`/users/${user_id}/question_banks.json`;
+
+		axios.get(url,{params:{
+				type,
+				category,
+				course_list_id,
+				sort_by,
+				sort_direction,
+				page
+			}
+		}).then((response) => {
+			this.setState({
+				data:response.data
+			})
+		}).catch((error) => {
+
+
+		});
+	}
+
+	searchCategory=(type)=>{
+		this.setState({
+			category:type
+		})
+
+		let types=this.props.match.params.topicstype;
+		let { category,
+			course_list_id,
+			sort_by,
+			sort_direction,
+			page
+		}=this.state;
+		this.searchAlldata(
+			types,
+			type,
+			course_list_id,
+			sort_by,
+			sort_direction,
+			page
+		)
+	}
 
+	searchCourselistid=(id)=>{
+		this.setState({
+			course_list_id:id
+		})
+
+		let types=this.props.match.params.topicstype;
+		let { category,
+			course_list_id,
+			sort_by,
+			sort_direction,
+			page
+		}=this.state;
+		this.searchAlldata(
+			types,
+			category,
+			id,
+			sort_by,
+			sort_direction,
+			page
+		)
 	}
 
 	render(){
 		let{
 			category,
-			status,
+			course_list_id,
-			page,
+			isSpin,
-			data,
+			data
-			totalCount,
-			isSpin
 		} = this.state;
-		let  is_current=this.props.is_current;
 
-		// console.log(data)
+		let categorylist=[
+			{val:"普通作业",type:"common"},
+			{val:"分组作业",type:"group"},
+			{val:"毕设选题",type:"gtopic"},
+			{val:"毕设任务",type:"gtask"},
+			{val:"试卷",type:"exercise"},
+			{val:"问卷",type:"poll"},
+			]
 		return(
 			<div className="educontent mb50">
 				{/*提示*/}
@@ -45,48 +139,82 @@ class InfosTopics extends Component{
 				<Spin size="large" spinning={isSpin}>
 					<div className="clearfix topicsbox">
 						<div className={"topcschild"}>
-							<span className={"topicstopfont fl"}>我的题库</span>
+							<span className={"topicstopfont fl topcsactive"}>我的题库</span>
 							<span className={"topicstopfont fr"}>公共题库</span>
 						</div>
 
 
-					</div>
+						<div className={"topcsmid"}>
+							{categorylist.map((item,key)=>{
+								return(
+									<span key={key} className={category===item.type?"topicsmidfont fl mr20 topcsactive":"topicsmidfont fl mr20"} onClick={()=>this.searchCategory(item.type)}>{item.val}</span>
+								)
+							})}
 
-					<p className="pl25 pr25 clearfix font-12 mb20 mt20">
+						</div>
-						<span className="fl color-grey-9">共个</span>
+           <style>
-						<span className="fr color-grey-9">发布时间</span>
+
-					</p>
+						 {
+						 	`
+							.shaiContent li.shaiItem {
+									padding: 3px 15px;
+									float: left;
+									border-radius: 4px;
+									color: #4C4C4C;
+									cursor: pointer;
+									margin-right: 20px;
+									display: block;
+									margin-bottom: 5px;
+							}
+						 	`
+						 }
+					 </style>
+						<div className={"shaiContent"}>
+							<div className="fl pr shaiAllItem pagetype mb20">
+								<li className={course_list_id===undefined?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"}  onClick={()=>this.searchCourselistid(undefined)}>全部</li>
+								{data===undefined?"":data.course_list===undefined||data.course_list.length===0?"":data.course_list.map((item,key)=>{
+									return(
+										<li key={key} className={course_list_id===item.id?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"} value={item.id} onClick={()=>this.searchCourselistid(item.id)}>{item.name}</li>
+									)
+								})}
+							</div>
+						</div>
 
+					</div>
 
-					{/*{data===undefined?<NoneData></NoneData>:data.project_packages.length===0?<NoneData></NoneData>:data.project_packages.map((item,key)=>{*/}
+					<div className="clearfix font-12 mb20 mt20">
-					{/*return(*/}
+						<p className="font-12 alltopisc ml25 fl">
-						{/*<div className="educontent project-packages-list" key={key}>*/}
+								<span className="fl color-grey-9">共   <span className={"color-orange"}>{data&&data.count}</span>   个</span>
-							{/*<div className="project-package-item with-operator project-package-11">*/}
+								<span className="fr color-grey-9">已选择   <span  className={"color-orange"}>{data&&data.count}</span>  个</span>
+						</p>
+						<p className="font-12 alltopiscright ml25 fr">
+								<span className="fr color-grey-9 mr10">最近更新</span>
+								<span className="fr mr20 topcsactive">发送</span>
+								<span className="fr mr20 topcsactive">删除</span>
+						</p>
+					</div>
 
-								{/*<div className="item-image">*/}
-									{/*<img alt="图片" src={`/images/educoder/project_packages/${setcategorylist(item.category_name)}.png`} />*/}
-								{/*</div>*/}
 
-								{/*<div className="item-body">*/}
+					{data===undefined?<NoneData></NoneData>:data.question_banks===undefined||data.question_banks.length===0?<NoneData></NoneData>:data.question_banks.map((item,key)=>{
-									{/*<div className="item-head">*/}
+					return(
-										{/*<div className="item-head-title" title={item.title}>*/}
+						<div className="educontent project-packages-list" key={key}>
-											{/*<a href={`/crowdsourcing/${item.id}`}>{item.title}</a>*/}
+							<div className="project-package-item with-operator project-package-11">
-										{/*</div>*/}
+								{/*course_list_name: "IP视频监控技术"*/}
+								{/*creator_name: "实践教学"*/}
+								{/*id: 4269*/}
+								{/*is_public: false*/}
+								{/*name: "第四次训练"*/}
+								{/*quotes_count: 4*/}
+								{/*solve_count: 0*/}
+								{/*updated_at: "2018-11-16T09:30:11.000+08:00"*/}
 
-										{/*<div className="item-head-tags">*/}
+								<div className="item-body">
-											{/*{item.bidden_status==="pending"?<span className="pending">竞标中</span>:""}*/}
+									<div className="item-head">
-											{/*{item.bidden_status==="bidding_won"?<span className="bidding_won">已中标</span>:""}*/}
+										<div className="item-head-title" title={item.name}>
-											{/*{item.bidden_status==="bidding_lost"?<span className="bidding_lost">未中标</span>:""}*/}
+											<a href={`/crowdsourcing/${item.id}`}>{item.name}</a>
-										{/*</div>*/}
+										</div>
+									</div>
 
-										{/*<div className="item-head-blank"></div>*/}
-										{/*<div className="item-head-price mtf15">*/}
-											{/*{item.min_price===null?"":<span>￥{item.min_price}</span>}*/}
-											{/*{item.max_price===null||item.min_price===null?"":<span>~</span>}*/}
-											{/*{item.max_price===null?"":<span>￥{item.max_price}</span>}*/}
-											{/*{item.min_price===null&&item.max_price===null?<span>可议价</span>:""}*/}
-										{/*</div>*/}
-									{/*</div>*/}
 									{/*<div className="item-category">*/}
 										{/*<div className="item-category-item">{item.category_name}</div>*/}
 									{/*</div>*/}
@@ -108,39 +236,23 @@ class InfosTopics extends Component{
 												{/*<span className=" item-group-text">发布于：{moment(item.published_at).format("YYYY-MM-DD HH:mm")} </span>}*/}
 										{/*</div>*/}
 									{/*</div>*/}
-								{/*</div>*/}
+								</div>
-
-								{/*{category=="manage"?item.operation.can_edit===true&&item.operation.can_delete===true?*/}
-								{/*<div className="item-operator none">*/}
 
-									{/*<a href={`/crowdsourcing/${item.id}/edit`} title="编辑">*/}
-										{/*<i className="fa fa-pencil"></i>*/}
-									{/*</a>*/}
 
-									{/*<a className="delete-project-package-btn" onClick={()=>this.delectprojectModal(item.id)} data-id="10" title="删除">*/}
-										{/*<i className="fa fa-trash-o"></i>*/}
-									{/*</a>*/}
 
-								{/*</div>:"":""}*/}
 
-								{/*{category=="manage"?item.operation.can_edit===true&&item.operation.can_delete===false?*/}
-									{/*<div className="item-operator none">*/}
-										{/*<a href={`/crowdsourcing/${item.id}/edit`} title="编辑">*/}
-											{/*<i className="fa fa-pencil"></i>*/}
-										{/*</a>*/}
-									{/*</div>:"":""}*/}
 
 
-							{/*</div>*/}
+							</div>
-						{/*</div>*/}
+						</div>
-					{/*)})}*/}
+					)})}
 
-					{/*{*/}
+					{
-						{/*totalCount >20 &&*/}
+						data&&data.count >15 &&
-						{/*<div className="mt30 mb50 edu-txt-center">*/}
+						<div className="mt30 mb50 edu-txt-center">
-							{/*<Pagination showQuickJumper total={totalCount} onChange={this.changePage} pageSize={20} current={page}/>*/}
+							<Pagination showQuickJumper total={data&&data.count} onChange={this.changePage} pageSize={15} current={page}/>
-						{/*</div>*/}
+						</div>
-					{/*}*/}
+					}
 
 				</Spin>
 			</div>

public/react/src/modules/user/usersInfo/usersInfo.css

@@ -229,7 +229,7 @@
 }
 .topicsbox{
     width: 1200px;
-    height: 216px;
+    /*min-height: 216px;*/
     background: rgba(255,255,255,1);
     padding: 0px 40px;
 }
@@ -241,11 +241,52 @@
     font-family:PingFangSC;
     font-weight:400;
     color:rgba(51,51,51,1);
+    cursor: pointer;
 }
 
 .topcschild{
     width:1128px;
-    height:49px;
+    height:55px;
-    line-height: 35px;
+    line-height: 54px;
     border-bottom:1px solid rgba(235,235,235,1);
+}
+
+.topcsmid{
+    width:1128px;
+    height:55px;
+    line-height: 55px;
+}
+
+.topcsactive{
+    color: #4CACFF;
+}
+
+.topicsmidfont{
+    max-width: 56px;
+    height: 55px;
+    font-size: 14px;
+    font-family: PingFangSC;
+    font-weight: 400;
+    cursor: pointer;
+    line-height: 55px;
+}
+
+.alltopisc{
+    width:141px;
+    height:20px;
+    font-size:14px;
+    font-family:PingFangSC;
+    font-weight:400;
+    color:rgba(153,153,153,1);
+    line-height:20px;
+}
+
+.alltopiscright{
+    /* width: 141px; */
+    height: 20px;
+    font-size: 14px;
+    font-family: PingFangSC;
+    font-weight: 400;
+    color: rgba(153,153,153,1);
+    line-height: 20px;
 }