排序优化

public/react/src/modules/courses/css/busyWork.css

@@ -79,109 +79,3 @@ p span{
   color: #FFFFFF;background-color:#4CACFF; 
 }
 
-.color4CACFF{
-    color: #4CACFF !important;
-}
-
-.orderingbox{
-    width:1200px;
-    height:80px;
-    background:rgba(255,255,255,1);
-    box-shadow:3px 3px 3px rgba(237,237,237,1);
-    opacity:1;
-    border-radius:2px 2px 0px 0px;
-    padding: 24px;
-    box-sizing: border-box;
-    line-height: 34px;
-}
-
-.orderingbtnright{
-    width: 90px;
-    height: 38px;
-    background: rgba(255,255,255,1);
-    border: 1px solid rgba(228,228,228,1);
-    box-shadow: 0px 1px 1px rgba(0,0,0,0.16);
-    opacity: 1;
-    border-radius: 4px;
-}
-
-.orderingbtnleft{
-    width: 90px;
-    height: 38px;
-    background: rgba(76,172,255,1);
-    box-shadow: 0px 1px 1px rgba(0,0,0,0.16);
-    opacity: 1;
-    border-radius: 4px;
-}
-.pd1323s{
-    padding: 10px 6px 25px 40px;
-    cursor: pointer;
-}
-
-
-.orderSection{
-    height: 80px;
-    padding-top: 16px;
-}
-
-.ordermidbox{
-    width: 960px;
-    height: 120px;
-    background: rgba(255,255,255,1);
-    /* border: 1px solid rgba(205,205,205,1); */
-    opacity: 1;
-    margin-left:142px;
-}
-
-.orderfonttop{
-    font-size: 16px !important;
-    font-family: Microsoft YaHei;
-    font-weight: bold;
-    line-height: 28px;
-    color: rgba(5,16,26,1);
-    opacity: 1;
-}
-
-.orderfontbom{
-    font-size:14px;
-    font-family:Microsoft YaHei;
-    font-weight:400;
-    line-height:25px;
-    color:rgba(153,153,153,1);
-    opacity:1;
-}
-
-.ordermidbox:hover {
-    box-shadow: 0px 2px 6px rgba(51,51,51,0.09);
-    opacity: 1;
-}
-
-.mb200{
-    margin-bottom: 200px;
-}
-
-.maxwidth865s{
-    max-width: 865px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.maxwidth795 {
-    max-width:795px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: inline-block;
-}
-
-.ordermidbox:active{
-    background:rgba(248,247,255,1);
-    border:1px solid rgba(76,172,255,1);
-}
-
-.ordermidbox:focus{
-    background:rgba(248,247,255,1);
-    border:1px solid rgba(76,172,255,1);
-}
-

public/react/src/modules/courses/ordering/Ordering.css

@@ -0,0 +1,109 @@
+.color4CACFF{
+    color: #4CACFF !important;
+}
+
+.orderingbox{
+    width:1200px;
+    height:80px;
+    background:rgba(255,255,255,1);
+    box-shadow:3px 3px 3px rgba(237,237,237,1);
+    opacity:1;
+    border-radius:2px 2px 0px 0px;
+    padding: 24px;
+    box-sizing: border-box;
+    line-height: 34px;
+}
+
+.orderingbtnright{
+    width: 90px;
+    height: 38px;
+    background: rgba(255,255,255,1);
+    border: 1px solid rgba(228,228,228,1);
+    box-shadow: 0px 1px 1px rgba(0,0,0,0.16);
+    opacity: 1;
+    border-radius: 4px;
+}
+
+.orderingbtnleft{
+    width: 90px;
+    height: 38px;
+    background: rgba(76,172,255,1);
+    box-shadow: 0px 1px 1px rgba(0,0,0,0.16);
+    opacity: 1;
+    border-radius: 4px;
+}
+.pd1323s{
+    padding: 10px 6px 25px 40px;
+    cursor: pointer;
+}
+
+
+.orderSection{
+    height: 80px;
+    padding-top: 16px;
+}
+
+.ordermidbox{
+    width: 960px;
+    height: 120px;
+    background: rgba(255,255,255,1);
+    /* border: 1px solid rgba(205,205,205,1); */
+    opacity: 1;
+    margin-left:142px;
+}
+
+.orderfonttop{
+    font-size: 16px !important;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    line-height: 28px;
+    color: rgba(5,16,26,1);
+    opacity: 1;
+}
+
+.orderfontbom{
+    font-size:14px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    line-height:25px;
+    color:rgba(153,153,153,1);
+    opacity:1;
+}
+
+.ordermidbox:hover {
+    box-shadow: 0px 2px 6px rgba(51,51,51,0.09);
+    opacity: 1;
+}
+
+.mb200{
+    margin-bottom: 200px;
+}
+
+.maxwidth865s{
+    max-width: 865px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.maxwidth795 {
+    max-width:795px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+}
+
+.ordermidbox:active{
+    background:rgba(248,247,255,1);
+    border:1px solid rgba(76,172,255,1);
+}
+
+.ordermidbox:focus{
+    background:rgba(248,247,255,1);
+    border:1px solid rgba(76,172,255,1);
+}
+
+.ordermiddiv{
+    min-height: 500px;
+}

public/react/src/modules/courses/ordering/Ordering.js

@@ -6,6 +6,7 @@ import axios from'axios';
 import Modals from '../../modals/Modals';
 import '../css/members.css';
 import '../css/busyWork.css';
+import './Ordering.css';
 import NoneData from "../coursesPublic/NoneData";
 
 const reorder = (list, startIndex, endIndex) => {
@@ -24,7 +25,7 @@ class Ordering extends Component{
 			antIcon:false,
 			datas:undefined,
 			windowsscrollTop:false,
-			windowsscrollTopsum:0
+			newtask_ids:[]
 		}
 	}
 
@@ -74,7 +75,6 @@ class Ordering extends Component{
 		if(e.srcElement.scrollingElement.scrollTop>60){
 			this.setState({
 					windowsscrollTop:true,
-				  windowsscrollTopsum:e.srcElement.scrollingElement.scrollTop
 			})
 	   }
 
@@ -103,9 +103,6 @@ class Ordering extends Component{
 				console.log('the same')
 				return;
 			}
-			this.setState({
-				isSpin:true
-			})
 			const shixuns_list = reorder(
 				datas,
 				result.source.index,
@@ -116,13 +113,30 @@ class Ordering extends Component{
 			shixuns_list.map((item,key)=>{
 				newtask_ids.push(item.task_id)
 			})
-			this.updatalist(shixuns_list,newtask_ids)
+
+			this.setState({
+				datas:shixuns_list,
+				newtask_ids:newtask_ids
+			})
 		}
 
 	}
 
-	updatalist=(shixuns_list,newtask_ids)=>{
+	updatalist=()=>{
+
+		let {datas,newtask_ids,isSpin}=this.state;
+		if(newtask_ids.length===0){
+			this.props.showNotification("请先移动需要排序的实训作业任务");
+			return
+		}
+
+		if(isSpin===true){
+			return
+		}
 
+		this.setState({
+			isSpin:true
+		})
 		let coursesId=this.props.match.params.coursesId;
 		let ordering_type=this.props.match.params.ordering_type;
 		let url=`/courses/${coursesId}/update_task_position.json`;
@@ -134,7 +148,8 @@ class Ordering extends Component{
 				this.props.showNotification(result.data.message);
 				this.setState({
 					isSpin:false,
-					datas:shixuns_list
+					datas:datas,
+					newtask_ids:[]
 				});
 			}else{
 				this.setState({
@@ -150,13 +165,16 @@ class Ordering extends Component{
 
 	}
 
+	goback=()=>{
+		 window.location.href=`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${this.props.match.params.main_id}`
+	}
+
 
 	render(){
 		let {
 			datas,
 			Modalstype,
 			windowsscrollTop,
-			windowsscrollTopsum
 		}=this.state;
 
 		let main_id=this.props.match.params.main_id;
@@ -204,21 +222,21 @@ class Ordering extends Component{
 						   style={positiontype}
 						>
 							   <span>温馨提示：请在列表中长按鼠标左键，进行拖放排序。完成排序后请点击“保存”</span>
-									<Button className="fr orderingbtnleft" type="primary">保存</Button>
-									<Button className="fr mr30 orderingbtnright">取消</Button>
+									<Button className="fr orderingbtnleft" type="primary" onClick={()=>this.updatalist()}>保存</Button>
+									<Button className="fr mr30 orderingbtnright" onClick={()=>this.goback()}>取消</Button>
 						</p>
 
 
 					</div>
 
-					<Spin size="large" spinning={this.state.isSpin}>
+					<Spin size="large" spinning={this.state.isSpin} >
 						<DragDropContext onDragEnd={this.onDragEnd} >
 							<Droppable droppableId={this.props.match.params.ordering_type}>
 								{(provided, snapshot) => (
 									<div
 										ref={provided.innerRef}
 										{...provided.droppableProps}
-										className={"educontent mb50 mt40 droppableul"}
+										className={"educontent mb50 mt40 droppableul ordermiddiv"}
 										onScroll={this.contentViewScrolledit}
 									>
 										{datas===undefined?"":