m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

排序功能

Browse Source
dev_aliyun_beta
杨树明 5 years ago
parent e6c8cb285f
commit ddf210d091
4 changed files with 159 additions and 587 deletions
Show Stats Download Patch File Download Diff File

2
public/react/src/modules/courses/Index.js
Unescape View File

@ -470,7 +470,7 @@ class CoursesIndex extends Component{
return (
<Switch {...this.props}>
{/*排序*/}
<Route path="/courses/:coursesId/ordering/:orderingtype"
<Route path="/courses/:coursesId/ordering/:ordering_type/:main_id"
render={
(props) => (<Ordering {...this.props} {...props} {...this.state} />)
}

92
public/react/src/modules/courses/css/busyWork.css
Unescape View File

@ -81,4 +81,96 @@ p span{
.color4CACFF{
color: #4CACFF !important;
}
.orderingbox{
width:1240px;
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: 0 auto;
}
.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;
}

649
public/react/src/modules/courses/ordering/Ordering.js
Unescape View File

@ -1,605 +1,73 @@
import React,{ Component } from "react";
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin } from "antd";
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Breadcrumb,Button } from "antd";
import { WordsBtn,on, off, trigger } from 'educoder';
import axios from'axios';
import Modals from '../../modals/Modals';
import moment from 'moment';
import '../css/members.css';
import '../css/busyWork.css'
import '../css/busyWork.css';
import NoneData from "../coursesPublic/NoneData";
class Ordering extends Component{
constructor(props){
super(props);
this.state={
modalname:undefined,
modaltype:undefined,
visible:false,
Topval:undefined,
Topvalright:undefined,
Botvalleft:undefined,
Botval:undefined,
starttime:undefined,
endtime:undefined,
Cancelname:undefined,
Savesname:undefined,
Cancel:undefined,
Saves:undefined,
StudentList_value:undefined,
addname:undefined,
addnametype:false,
addnametab:undefined,
addcanner:undefined,
addsave:undefined,
datas:undefined,
page:1,
Coursename:"",
order:"",
shixunmodal:false,
shixunmodallist:undefined,
hometypepvisible:false,
newshixunmodallist:undefined,
category_id:undefined,
homework_ids:undefined,
patheditarry:[],
course_groups:undefined,
course_groupslist:[],
checkedtype:false,
checkBoxValues:[],
isSpin:false,
antIcon:false
antIcon:false,
datas:undefined
}
}
updateNavSuccess=()=>{
this.setState({
isSpin:true
})
if(this.props.match.params.main_id){
this.setState({
isSpin:true
})
this.seactall();
if(this.props.isAdmin()===true){
this.updadatalist()
}
}else if(this.props.match.params.category_id){
this.setState({
isSpin:true
})
this.seactall(parseInt(this.props.match.params.category_id))
if(this.props.isAdmin()===true){
this.updadatalist()
}
}
}
componentDidMount() {
this.setState({
isSpin:true
})
if(this.props.match.params.main_id){
this.setState({
isSpin:true
})
this.seactall();
if(this.props.isAdmin()===true){
this.updadatalist()
}
}else if(this.props.match.params.category_id){
this.setState({
isSpin:true
})
this.seactall(parseInt(this.props.match.params.category_id))
if(this.props.isAdmin()===true){
this.updadatalist()
}
}
on('updateNavSuccess', this.updateNavSuccess)
}
seactall=(id)=>{
this.setState({
isSpin:true
})
let coursesId=this.props.match.params.coursesId;
let url="/courses/"+coursesId+"/homework_commons.json?type=4";
axios.get(url,{
params: {
search:undefined,
page:1,
order:undefined,
category:id
}
}).then((result)=>{
this.setState({
isSpin:false,
datas:result.data,
})
}).catch((error)=>{
console.log(error);
})
}
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))
}
}
}
homeworkupdatalist=(search,page,order)=>{
let {datas}=this.state;
let coursesId=this.props.match.params.coursesId;
let category_id=this.props.match.params.category_id
let url="/courses/"+coursesId+"/homework_commons.json?type=4";
let neworder=order;
if(order==="null"){
neworder=""
}
axios.get(url, {
params: {
search: search,
page:page,
order:neworder,
category: category_id===undefined?undefined:category_id
}
}).then((result)=>{
if(result.status===200){
let coursesId=this.props.match.params.coursesId;
let ordering_type=this.props.match.params.ordering_type;
let url=`/courses/${coursesId}/tasks_list.json`;
axios.get((url),{params:{
container_type:ordering_type
}}).then((result)=>{
if(result){
this.setState({
datas:result.data,
datas:result.data.tasks,
isSpin:false
})
}
}).catch((error)=>{
console.log(error);
})
}
homeworkhide=()=>{
let {Coursename,page,order}=this.state;
this.setState({
modalname:undefined,
modaltype:undefined,
visible:false,
Topval:undefined,
Topvalright:undefined,
Botvalleft:undefined,
Botval:undefined,
starttime:undefined,
endtime:undefined,
Cancelname:undefined,
Savesname:undefined,
Cancel:undefined,
Saves:undefined,
StudentList_value:undefined,
addname:undefined,
addnametype:false,
addnametab:undefined,
typs:undefined,
starttimes:undefined,
})
this.props.updataleftNavfun()
this.homeworkupdatalist(Coursename,page,order);
this.cancelmodel()
}
//立即发布
homeworkstart=()=>{
let selectnum= this.testonSelect();
if(selectnum===true){
this.noSelect();
return
}
let coursesId=this.props.match.params.coursesId;
let url="/courses/"+coursesId+"/all_course_groups.json";
axios.get(url).then((response) => {
if(response.status===200){
let starttime= this.props.getNowFormatDates(1);
let endtime=this.props.getNowFormatDates(2);
this.setState({
modalname:"立即发布",
modaltype:response.data.course_groups===null||response.data.course_groups.length===0?2:1,
visible:true,
typs:"start",
Topval:"学生将立即收到作业",
// Botvalleft:"暂不发布",
Botval:`本操作只对"未发布"的分班有效`,
starttime:"发布时间："+moment(moment(new Date())).format("YYYY-MM-DD HH:mm"),
starttimes:starttime,
endtime:"截止时间："+endtime,
Cancelname:"暂不发布",
Savesname:"立即发布",
Cancel:this.homeworkhide,
Saves:this.homeworkstartend,
course_groups:response.data.course_groups,
})
}
}).catch((error) => {
console.log(error)
});
}
cancelmodels=()=>{
this.setState({
Modalstype:false,
Loadtype:false,
Modalstopval:""
})
}
// 立即发布
homeworkstartend=(ds,endtime)=>{
let {Coursename,page,order,checkBoxValues,course_groupslist,datas,course_groups}=this.state;
let category_id=this.props.match.params.category_id;
if(course_groups.length>0){
if(course_groupslist.length===0){
this.setState({
Modalstype:true,
Loadtype:true,
Modalstopval:"请先选择分班",
ModalSave:this.cancelmodels,
})
return
}
}
let coursesId=this.props.match.params.coursesId;
let url ="/courses/"+coursesId+"/homework_commons/publish_homework.json";
axios.post(url,{
category_id:category_id===undefined?undefined:category_id,
homework_ids:checkBoxValues,
group_ids:course_groupslist,
end_time:endtime,
}).then((result)=>{
if(result.status===200){
if(result.data.status===0){
this.setState({
Modalstype:false,
// Modalstopval:result.data.message,
Loadtype:false,
visible:false,
course_groups:[],
ModalSave:this.cancelmodel,
})
}
this.props.showNotification(result.data.message)
this.props.updataleftNavfun()
this.homeworkupdatalist(Coursename,page,order);
this.cancelmodel()
}
}).catch((error)=>{
console.log(error);
})
}
homeworkends=()=>{
let selectnum= this.testonSelect();
if(selectnum===true){
this.noSelect();
return
}
let coursesId=this.props.match.params.coursesId;
let url="/courses/"+coursesId+"/all_course_groups.json";
axios.get(url).then((response) => {
if(response.status===200){
this.setState({
})
this.setState({
modalname:"立即截止",
modaltype:response.data.course_groups===null||response.data.course_groups.length===0?2:1,
visible:true,
Topval:"学生将不能再提交作业",
// Botvalleft:"暂不截止",
Botval:`本操作只对"提交中"的分班有效`,
Cancelname:"暂不截止",
Savesname:"立即截止",
Cancel:this.homeworkhide,
Saves:this.coursetaskend,
starttime:undefined,
endtime:undefined,
typs:"end",
course_groups:response.data.course_groups,
})
}
}).catch((error) => {
console.log(error)
});
}
getcourse_groupslist=(id)=>{
this.setState({
course_groupslist:id
})
}
//立即截止确定按钮
coursetaskend=()=>{
let {Coursename,page,order,datas,checkBoxValues,course_groupslist,course_groups}=this.state;
this.setState({
Modalstype:false,
})
let category_id=this.props.match.params.category_id;
if(course_groups.length>0){
if(course_groupslist.length===0){
this.setState({
Modalstype:true,
Loadtype:true,
Modalstopval:"请先选择分班",
ModalSave:this.cancelmodels,
})
return
}
}
const cid = this.props.match.params.coursesId;
let url="/courses/"+cid+"/homework_commons/end_homework.json";
axios.post(url, {
category_id:category_id===undefined?undefined:category_id,
group_ids:course_groupslist,
homework_ids: checkBoxValues,
})
.then((response) => {
if (response.data.status == 0) {
this.setState({
Modalstype:false,
Modalstopval:"",
ModalsBottomval:"",
ModalSave:this.cancelmodel,
Loadtype:false,
course_groups:[]
})
this.props.showNotification(response.data.message)
this.props.updataleftNavfun()
this.homeworkupdatalist(Coursename,page,order);
this.cancelmodel()
}
this.setState({
isSpin:false
})
.catch(function (error) {
console.log(error);
});
}
//发布实训，立即发布回调
newhomeworkstart=(category_id,homework_ids)=>{
this.setState({
category_id:category_id,
checkBoxValues:homework_ids,
shixunmodal:false
})
let starttime= this.props.getNowFormatDates(1);
let endtime=this.props.getNowFormatDates(2);
let coursesId=this.props.match.params.coursesId;
let url="/courses/"+coursesId+"/all_course_groups.json";
axios.get(url).then((response) => {
if(response.status===200){
this.setState({
modalname:"立即发布",
course_groups:response.data.course_groups,
modaltype:response.data.course_groups===null||response.data.course_groups.length===0?2:1,
visible:true,
Topval:"学生将立即收到作业",
// Botvalleft:"暂不发布",
Botval:`本操作只对"未发布"的分班有效`,
starttime:"发布时间："+ moment(moment(new Date())).format("YYYY-MM-DD HH:mm"),
starttimes:starttime,
typs:"start",
endtime:"截止时间："+ endtime,
Cancelname:"暂不发布",
Savesname:"立即发布",
Cancel:this.homeworkhide,
Saves:this.homeworkstartend,
})
}
}).catch((error) => {
console.log(error)
});
}
hidecouseShixunModal=()=>{
this.setState({
shixunmodal:false,
shixunpath:false,
shixunpathlist:[],
newshixunpathlist:[],
})
}
funpatheditarry=(list)=>{
this.setState({
patheditarry:list
})
}
onselectfifteen = () => {
this.setState({
Modalstype:true,
Modalstopval:"选择条数不能大于15条",
ModalSave:this.cancelmodel,
Loadtype:true
})
}
onCheckBoxChange=(checkedValues)=>{
// debugger
let {checkBoxValues,tasks} =this.state;
console.log(checkBoxValues)
let type=false;
if(checkBoxValues<tasks){
type=false
}else if(checkBoxValues<tasks){
type=true
}
if(checkBoxValues.length>15||checkedValues.length>15){
this.onselectfifteen()
return
}
this.setState({
checkBoxValues: checkedValues,
checkAllValue:type
})
}
savedelete=()=>{
this.setState({
antIcon:true
})
let {Coursename,page,order,checkBoxValues,datas}=this.state;
let category_id=this.props.match.params.category_id;
const cid = this.props.match.params.coursesId
const url = `/courses/`+cid+`/homework_commons/multi_destroy.json`;
axios.post(url, {
category_id:category_id===undefined?undefined:category_id,
homework_ids: checkBoxValues,
})
.then((response) => {
if (response.data.status === 0) {
this.setState({
Modalstype:false,
Modalstopval:"",
ModalsBottomval:"",
ModalSave:this.cancelmodel,
Loadtype:false,
checkBoxValues:[],
checkedtype:false,
antIcon:false
})
this.props.showNotification(response.data.message)
this.homeworkupdatalist(Coursename,page,order);
this.props.updataleftNavfun()
}else{
this.setState({
antIcon:false
})
this.props.showNotification(response.data.message)
}
})
.catch(function (error) {
console.log(error);
});
}
testonSelect=()=>{
let {checkBoxValues,checkedtype}=this.state;
if(checkedtype===false){
if(checkBoxValues.length===0){
return true
}
}
}
onDelete = () => {
let selectnum= this.testonSelect();
if(selectnum===true){
this.noSelect();
return
}
this.setState({
Modalstype:true,
Modalstopval:"已提交作品将全部被删除，不可恢复",
ModalsBottomval:"是否确认删除？",
ModalCancel:this.cancelmodel,
ModalSave:this.savedelete,
})
}
noSelect=()=>{
componentDidUpdate = (prevProps) => {
this.props.showNotification("请选择你要操作的任务");
// 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))
// }
// }
}
cancelmodel=()=>{
this.setState({
Modalstype:false,
Loadtype:false,
visible:false,
Modalstopval:"",
ModalCancel:"",
ModalSave:"",
checkBoxValues:[],
checkedtype:false
})
}
updadatalist=(id)=>{
// this.seactall(id)
let coursesId=this.props.match.params.coursesId;
let url="/courses/"+coursesId+"/homework_commons/choose_category.json";
axios.get(url, {
}).then((response) => {
if(response!=undefined){
if(response.data&&response.data){
this.setState({
course_modules:response.data,
homework_categorys:response.data.homework_category
})
}
}
})
}
render(){
let {
datas,
page,
Coursename,
Modalstype,
order,
}=this.state;
let main_id=this.props.match.params.main_id;
@ -607,8 +75,8 @@ class Ordering extends Component{
console.log(this.props)
return(
<React.Fragment >
<div>
<div className={"mb200"}>
{/*提示*/}
{Modalstype&&Modalstype===true?<Modals
modalsType={this.state.Modalstype}
@ -621,41 +89,51 @@ class Ordering extends Component{
/>:""}
<div className="edu-back-white">
<div className="educontent clearfix">
<p className="clearfix padding30 bor-bottom-greyE">
<div className={"mt20 mb20"}>
<Breadcrumb separator=">">
<Breadcrumb.Item href={this.props.current_user&&this.props.current_user.first_category_url}>{this.props.current_user&&this.props.current_user.course_name}</Breadcrumb.Item>
<Breadcrumb.Item href={`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${this.props.match.params.main_id}`}>实训作业</Breadcrumb.Item>
<Breadcrumb.Item>调整排序</Breadcrumb.Item>
</Breadcrumb>
</p>
</div>
<div className="clearfix pl30 pr30">
</div>
<p className="clearfix bor-bottom-greyE edu-back-white orderingbox">
<span>温馨提示：请在列表中长按鼠标左键，进行拖放排序。完成排序后请点击“保存”</span>
<Button className="fr orderingbtnleft" type="primary">保存</Button>
<Button className="fr mr30 orderingbtnright">取消</Button>
</p>
</div>
<Spin size="large" spinning={this.state.isSpin}>
<style>{`
.padding02010{
padding: 10px 30px 0px 30px;
cursor: pointer;
}
.ant-checkbox-group > div .boardsList {
border-top: 1px solid transparent;
padding: 10px 0px 20px!important;
}
.padding02010:hover{
box-shadow: 0px 2px 6px rgba(51,51,51,0.09);
opacity: 1;
border-radius: 2px;
}
`}</style>
<div className={"educontent mb50 mt40"}>
{datas===undefined?"": <Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={this.state.checkBoxValues}>
{ datas.homeworks && datas.homeworks.map((item, index) => {
{ datas.map((item, index) => {
return (
<div className="mt20 edu-back-white padding02010" key={index} >
<div className="clearfix">
<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>
</div>
)
@ -666,15 +144,16 @@ class Ordering extends Component{
}
</div>
{
datas===undefined?"":datas.homeworks && datas.homeworks.length===0? <NoneData></NoneData>:""
datas===undefined?"":datas.length===0? <NoneData></NoneData>:""
}
</Spin>
</div>
</React.Fragment>
)
}
}

3
public/react/src/modules/courses/shixunHomework/shixunHomework.js
Unescape View File

@ -936,6 +936,7 @@ class ShixunHomework extends Component{
let main_id=this.props.match.params.main_id;
let category_id=this.props.match.params.category_id;
return(
<React.Fragment >
<div>
@ -1039,7 +1040,7 @@ class ShixunHomework extends Component{
{this.props.isAdmin()===true?datas&&datas.category_name===undefined||datas&&datas.category_name===null?
<span>
<WordsBtn style="blue" className={"mr30 font-16"}>
<Link className="color4CACFF" to={`/courses/${this.props.match.params.coursesId}/ordering/shixun_homework`}>调整排序</Link>
<Link className="color4CACFF" to={`/courses/${this.props.match.params.coursesId}/ordering/shixun_homework/${main_id&&main_id}`}>调整排序</Link>
</WordsBtn>
</span>:"":""}

Write Preview
Loading…
Cancel
Save