排序功能

dev_aliyun_beta
杨树明 5 years ago
parent 47db930d2b
commit 743328681b

@ -84,7 +84,7 @@ p span{
}
.orderingbox{
width:1240px;
width:1200px;
height:80px;
background:rgba(255,255,255,1);
box-shadow:3px 3px 3px rgba(237,237,237,1);
@ -130,7 +130,7 @@ p span{
background: rgba(255,255,255,1);
/* border: 1px solid rgba(205,205,205,1); */
opacity: 1;
margin: 0 auto;
margin-left:142px;
}
.orderfonttop{
@ -173,4 +173,15 @@ p span{
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);
}

@ -1,12 +1,21 @@
import React,{ Component } from "react";
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Breadcrumb,Button } from "antd";
import { WordsBtn,on, off, trigger } from 'educoder';
import { DragDropContext,Draggable, Droppable} from 'react-beautiful-dnd';
import axios from'axios';
import Modals from '../../modals/Modals';
import moment from 'moment';
import '../css/members.css';
import '../css/busyWork.css';
import NoneData from "../coursesPublic/NoneData";
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
class Ordering extends Component{
constructor(props){
super(props);
@ -43,26 +52,65 @@ class Ordering extends Component{
}
componentDidUpdate = (prevProps) => {
// if(prevProps.match.params.main_id != this.props.match.params.main_id){
// if(this.props.match.params.main_id!=undefined){
// this.seactall();
// }
// }
// if(prevProps.match.params.category_id != this.props.match.params.category_id){
// if(this.props.match.params.category_id!=undefined){
// this.seactall(parseInt(this.props.match.params.category_id))
// }
// }
}
onDragEnd=(result)=>{
if(result.destination!=null&&result.destination!=undefined){
let {datas}=this.state;
if (!result.destination) {
console.log('dropped outside the list')
return;
}
if (result.destination.index === result.source.index) {
console.log('the same')
return;
}
this.setState({
isSpin:true
})
const shixuns_list = reorder(
datas,
result.source.index,
result.destination.index
);
let newtask_ids=[]
shixuns_list.map((item,key)=>{
newtask_ids.push(item.task_id)
})
this.updatalist(shixuns_list,newtask_ids)
}
}
updatalist=(shixuns_list,newtask_ids)=>{
let coursesId=this.props.match.params.coursesId;
let ordering_type=this.props.match.params.ordering_type;
let url=`/courses/${coursesId}/update_task_position.json`;
axios.post(url,{
container_type:ordering_type,
task_ids:newtask_ids
}).then((result)=>{
if(result.data.status===0){
this.props.showNotification(result.data.message);
this.setState({
isSpin:false,
datas:shixuns_list
});
}else{
this.setState({
isSpin:false,
});
}
}).catch((error)=>{
this.setState({
isSpin:false,
});
})
}
render(){
let {
@ -115,36 +163,56 @@ class Ordering extends Component{
</div>
<Spin size="large" spinning={this.state.isSpin}>
<div className={"educontent mb50 mt40"}>
{datas===undefined?"": <Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={this.state.checkBoxValues}>
{ datas.map((item, index) => {
return (
<div className={"mt30 edu-back-white pd1323s relativef ordermidbox"} key={index}>
<div className={"clearfix"}>
<div className={"item-body"}>
<div className={"clearfix ds pr orderSection"}>
<p title={item.task_name} className="font-16 color-dark maxwidth865s orderfonttop"
href={`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${item.task_id}/list?tab=0`}>{item.task_name}</p>
<p className={"color-grey panel-lightgrey mt16 "}>
<span className="topicswidth400">
<span className="topsics100 color-grey9 orderfontbom mr20 maxwidth795">{item.user_name}</span>
<span className="mr50 color-grey9 orderfontbom maxwidth795">{item.category}</span>
</span>
</p>
</div>
</div>
</div>
<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"}
>
{datas===undefined?"":
datas.map((item, index) => {
return (
<Draggable
key={item.task_id}
draggableId={item.task_id}
index={index}
className={"TabsWarps"}
>
{(provided, snapshot) => (
<div className={"mt30 edu-back-white pd1323s relativef ordermidbox"}
key={index}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className={"clearfix"}>
<div className={"item-body"}>
<div className={"clearfix ds pr orderSection"}>
<p title={item.task_name} className="font-16 color-dark maxwidth865s orderfonttop"
href={`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${item.task_id}/list?tab=0`}>{item.task_name}</p>
<p className={"color-grey panel-lightgrey mt16 "}>
<span className="topicswidth400">
<span className="topsics100 color-grey9 orderfontbom mr20 maxwidth795">{item.user_name}</span>
<span className="mr50 color-grey9 orderfontbom maxwidth795">{item.category}</span>
</span>
</p>
</div>
</div>
</div>
</div>
)}
</Draggable>
)
})
}
</div>
)
})
}
</Checkbox.Group>
}
)}
</Droppable>
</DragDropContext>
</div>
{

Loading…
Cancel
Save