From e6c8cb285f1268d20c97a6909b878e3ba72a965e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com> Date: Mon, 2 Sep 2019 13:45:56 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=8E=92=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/react/src/modules/courses/Index.js | 15 + .../src/modules/courses/css/busyWork.css | 162 +++-- .../src/modules/courses/ordering/Ordering.js | 681 ++++++++++++++++++ .../courses/shixunHomework/shixunHomework.js | 9 +- 4 files changed, 787 insertions(+), 80 deletions(-) create mode 100644 public/react/src/modules/courses/ordering/Ordering.js diff --git a/public/react/src/modules/courses/Index.js b/public/react/src/modules/courses/Index.js index 1b1c523c0..f2ba8371d 100644 --- a/public/react/src/modules/courses/Index.js +++ b/public/react/src/modules/courses/Index.js @@ -283,6 +283,14 @@ const Completetaskpage =Loadable({ loader: () => import('../../modules/courses/completetaskdetails/Completetaskpage'), loading: Loading, }); + + +//排序 +const Ordering=Loadable({ + loader: () => import('../../modules/courses/ordering/Ordering'), + loading: Loading, +}); + class CoursesIndex extends Component{ constructor(props) { super(props) @@ -461,6 +469,13 @@ class CoursesIndex extends Component{ // console.log(commons) return ( + {/*排序*/} + () + } + > + {/*毕设任务题库详情*/} .ant-menu-item:hover{ - border-bottom:2px solid transparent; -} -.task_menu_ul .ant-menu-horizontal > .ant-menu-item-selected{ - border-bottom: 2px solid #4CACFF !important; -} - -.sourceTag a{ - display: block; - float: left; - background-color:#E5F3FF; - padding: 0px 10px; - height: 24px; - line-height: 24px; - color: #4E7A9B; - margin:5px 0px 5px 10px; -} -.sourceTag a.active{ - color: #FFFFFF;background-color:#4CACFF; + +.polllisthover:hover { + box-shadow: 0px 2px 6px rgba(51,51,51,0.09); + opacity: 1; + border-radius: 2px; +} + +.workList_Item{ + /* padding:20px 30px; */ + display: flex; + background-color: #fff; + margin-bottom: 20px; + padding-top: 10px; +} +p span{ + cursor: default; +} +.mt-5{ margin-top:-5px;} + + +/* ���ѡ��tab */ +.bankNav li{ + float: left; + margin-right: 20px; +} +.bankNav li:last-child{ + margin-right: 0px; +} +.bankNav li.active a{ + color: #fff!important; + background-color: #4CACFF; +} +.bankNav li a{ + display: block; + padding:0px 10px; + height: 28px; + line-height: 28px; + background-color: #F5F5F5; + border-radius: 36px; + color: #666666!important; +} + + + +.task_menu_ul{ + width: 600px; +} + +.task_menu_ul .ant-menu-item,.task_menu_ul .ant-menu-submenu-title{ + padding:0px; + margin-right: 30px; + line-height: 68px; + font-size: 16px; +} +.ant-menu{ + color: #05101a; +} +.task_menu_ul .ant-menu-horizontal{ + border-bottom: none; +} +.task_menu_ul .ant-menu-horizontal > .ant-menu-item:hover{ + border-bottom:2px solid transparent; +} +.task_menu_ul .ant-menu-horizontal > .ant-menu-item-selected{ + border-bottom: 2px solid #4CACFF !important; +} + +.sourceTag a{ + display: block; + float: left; + background-color:#E5F3FF; + padding: 0px 10px; + height: 24px; + line-height: 24px; + color: #4E7A9B; + margin:5px 0px 5px 10px; +} +.sourceTag a.active{ + color: #FFFFFF;background-color:#4CACFF; +} + +.color4CACFF{ + color: #4CACFF !important; } \ No newline at end of file diff --git a/public/react/src/modules/courses/ordering/Ordering.js b/public/react/src/modules/courses/ordering/Ordering.js new file mode 100644 index 000000000..a0d99130f --- /dev/null +++ b/public/react/src/modules/courses/ordering/Ordering.js @@ -0,0 +1,681 @@ +import React,{ Component } from "react"; +import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin } 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 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 + } + } + 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){ + + this.setState({ + datas:result.data, + 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() + } + }) + .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(checkBoxValues15||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=()=>{ + + this.props.showNotification("请选择你要操作的任务"); + + } + + 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; + let category_id=this.props.match.params.category_id; + + console.log(this.props) + return( + +
+ {/*提示*/} + {Modalstype&&Modalstype===true?:""} + + +
+ +

+ + +

+ +
+ +
+ +
+ + + + {datas===undefined?"": + { datas.homeworks && datas.homeworks.map((item, index) => { + return ( +
+
+ +
+
+ ) + + }) + } + + } + + + + { + datas===undefined?"":datas.homeworks && datas.homeworks.length===0? :"" + } + + + +
+ + ) + } +} +export default Ordering; diff --git a/public/react/src/modules/courses/shixunHomework/shixunHomework.js b/public/react/src/modules/courses/shixunHomework/shixunHomework.js index dd694828a..589c881a1 100644 --- a/public/react/src/modules/courses/shixunHomework/shixunHomework.js +++ b/public/react/src/modules/courses/shixunHomework/shixunHomework.js @@ -1,7 +1,7 @@ import React,{ Component } from "react"; import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin } from "antd"; import { WordsBtn,on, off, trigger } from 'educoder'; -import CourseLayoutcomponent from '../common/CourseLayoutComponent'; +import {BrowserRouter as Router,Route,Switch,Link} from 'react-router-dom'; import axios from'axios'; import HomeworkModal from "../coursesPublic/HomeworkModal"; import ShixunModal from "../coursesPublic/ShixunModal"; @@ -1036,6 +1036,13 @@ class ShixunHomework extends Component{ {/*{datas&&datas.category_name===undefined||datas&&datas.category_name===null?datas&&datas.main_category_name:datas&&datas.category_name+" 作业列表"}*/} 实训作业
  • + {this.props.isAdmin()===true?datas&&datas.category_name===undefined||datas&&datas.category_name===null? + + + 调整排序 + + :"":""} + {this.props.isAdmin()===true?datas&&datas.category_name===undefined||datas&&datas.category_name===null? this.addDir()} className={"mr30 font-16"}>添加目录 From ddf210d091442124b8981e02af61258ce1fc380b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com> Date: Mon, 2 Sep 2019 15:51:17 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/react/src/modules/courses/Index.js | 2 +- .../src/modules/courses/css/busyWork.css | 92 +++ .../src/modules/courses/ordering/Ordering.js | 649 ++---------------- .../courses/shixunHomework/shixunHomework.js | 3 +- 4 files changed, 159 insertions(+), 587 deletions(-) diff --git a/public/react/src/modules/courses/Index.js b/public/react/src/modules/courses/Index.js index f2ba8371d..db26ea6c5 100644 --- a/public/react/src/modules/courses/Index.js +++ b/public/react/src/modules/courses/Index.js @@ -470,7 +470,7 @@ class CoursesIndex extends Component{ return ( {/*排序*/} - () } diff --git a/public/react/src/modules/courses/css/busyWork.css b/public/react/src/modules/courses/css/busyWork.css index 5e76a3dca..9e1c6a509 100644 --- a/public/react/src/modules/courses/css/busyWork.css +++ b/public/react/src/modules/courses/css/busyWork.css @@ -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; } \ No newline at end of file diff --git a/public/react/src/modules/courses/ordering/Ordering.js b/public/react/src/modules/courses/ordering/Ordering.js index a0d99130f..c9dc8ed66 100644 --- a/public/react/src/modules/courses/ordering/Ordering.js +++ b/public/react/src/modules/courses/ordering/Ordering.js @@ -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(checkBoxValues15||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( - -
    + +
    {/*提示*/} {Modalstype&&Modalstype===true?:""} -
    +
    -

    +

    + + {this.props.current_user&&this.props.current_user.course_name} + 实训作业 + 调整排序 + -

    +
    -
    -
    +

    + + 温馨提示：请在列表中长按鼠标左键，进行拖放排序。完成排序后请点击“保存” + + + + +

    +
    + - +
    {datas===undefined?"": - { datas.homeworks && datas.homeworks.map((item, index) => { + { datas.map((item, index) => { return ( -
    -
    - +
    +
    +
    +
    +

    {item.task_name}

    +

    + + {item.user_name} + {item.category} + +

    +
    +
    ) @@ -666,15 +144,16 @@ class Ordering extends Component{ } +
    + { - datas===undefined?"":datas.homeworks && datas.homeworks.length===0? :"" + datas===undefined?"":datas.length===0? :"" }
    - ) } } diff --git a/public/react/src/modules/courses/shixunHomework/shixunHomework.js b/public/react/src/modules/courses/shixunHomework/shixunHomework.js index 589c881a1..5e869351d 100644 --- a/public/react/src/modules/courses/shixunHomework/shixunHomework.js +++ b/public/react/src/modules/courses/shixunHomework/shixunHomework.js @@ -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(
    @@ -1039,7 +1040,7 @@ class ShixunHomework extends Component{ {this.props.isAdmin()===true?datas&&datas.category_name===undefined||datas&&datas.category_name===null? - 调整排序 + 调整排序 :"":""} From 743328681be8b70db8522a07a9f2e4d0fca4b680 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com> Date: Mon, 2 Sep 2019 16:55:01 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/modules/courses/css/busyWork.css | 17 +- .../src/modules/courses/ordering/Ordering.js | 152 +++++++++++++----- 2 files changed, 124 insertions(+), 45 deletions(-) diff --git a/public/react/src/modules/courses/css/busyWork.css b/public/react/src/modules/courses/css/busyWork.css index 9e1c6a509..d77954aaf 100644 --- a/public/react/src/modules/courses/css/busyWork.css +++ b/public/react/src/modules/courses/css/busyWork.css @@ -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; -} \ No newline at end of file +} + +.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); +} + diff --git a/public/react/src/modules/courses/ordering/Ordering.js b/public/react/src/modules/courses/ordering/Ordering.js index c9dc8ed66..54cebac7f 100644 --- a/public/react/src/modules/courses/ordering/Ordering.js +++ b/public/react/src/modules/courses/ordering/Ordering.js @@ -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{
    - -
    - {datas===undefined?"": - { datas.map((item, index) => { - return ( -
    -
    -
    -
    -

    {item.task_name}

    -

    - - {item.user_name} - {item.category} - -

    -
    -
    -
    + + + {(provided, snapshot) => ( +
    + {datas===undefined?"": + datas.map((item, index) => { + return ( + + {(provided, snapshot) => ( +
    +
    +
    +
    +

    {item.task_name}

    +

    + + {item.user_name} + {item.category} + +

    +
    +
    +
    +
    + )} +     + ) + }) + + }
    - ) - - }) - } - - } - + )} +     +     -
    { From 4b3df80703da66fe0c9c33b84e8b3e532ac45d69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com> Date: Mon, 2 Sep 2019 18:17:51 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E5=90=B8=E9=A1=B6=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/modules/courses/ordering/Ordering.js | 64 +++++++++++++++++-- 1 file changed, 57 insertions(+), 7 deletions(-) diff --git a/public/react/src/modules/courses/ordering/Ordering.js b/public/react/src/modules/courses/ordering/Ordering.js index 54cebac7f..504db9e18 100644 --- a/public/react/src/modules/courses/ordering/Ordering.js +++ b/public/react/src/modules/courses/ordering/Ordering.js @@ -22,7 +22,9 @@ class Ordering extends Component{ this.state={ isSpin:false, antIcon:false, - datas:undefined + datas:undefined, + windowsscrollTop:false, + windowsscrollTopsum:0 } } @@ -49,7 +51,43 @@ class Ordering extends Component{ isSpin:false }) }) + + window.addEventListener('scroll', this.handleScroll.bind(this)) //监听滚动 + // window.addEventListener('resize', this.handleResize.bind(this)) //监听窗口大小改变 + } + + + // componentWillUnmount() { //一定要最后移除监听器，以防多个组件之间导致this的指向紊乱 + // window.removeEventListener('scroll', this.handleScroll.bind(this)) + // window.removeEventListener('resize', this.handleResize.bind(this)) + // } + + handleScroll=(e)=>{ + // console.log( + // '浏览器滚动事件', + // e.srcElement.scrollingElement.scrollTop, + // e.srcElement.scrollingElement.scrollHeight + // ) + //e.srcElement.scrollingElement.scrollTop为距离滚动条顶部高度 + // e.srcElement.scrollingElement.scrollHeight为整个文档高度 + + if(e.srcElement.scrollingElement.scrollTop>60){ + this.setState({ + windowsscrollTop:true, + windowsscrollTopsum:e.srcElement.scrollingElement.scrollTop + }) + } + + if(e.srcElement.scrollingElement.scrollTop===0){ + this.setState({ + windowsscrollTop:false + }) + } } + // + // handleResize = e => { + // console.log('浏览器窗口大小改变事件', e.target.innerWidth) + // } @@ -112,16 +150,28 @@ class Ordering extends Component{ } + render(){ let { datas, Modalstype, + windowsscrollTop, + windowsscrollTopsum }=this.state; let main_id=this.props.match.params.main_id; let category_id=this.props.match.params.category_id; console.log(this.props) + console.log(window) + + let positiontype=null; + + if(windowsscrollTop===true){ + positiontype={position:'fixed',zIndex:'9000',left:'20%',top: '0px'} + }else{ + positiontype={} + } return(
    @@ -139,7 +189,7 @@ class Ordering extends Component{
    -
    + {windowsscrollTop===false?
    {this.props.current_user&&this.props.current_user.course_name} @@ -147,16 +197,15 @@ class Ordering extends Component{ 调整排序 -
    - +
    :""} -

    +

    温馨提示：请在列表中长按鼠标左键，进行拖放排序。完成排序后请点击“保存” - -

    @@ -170,6 +219,7 @@ class Ordering extends Component{ ref={provided.innerRef} {...provided.droppableProps} className={"educontent mb50 mt40 droppableul"} + onScroll={this.contentViewScrolledit} > {datas===undefined?"": datas.map((item, index) => { From c215c266a53a5433cf0211d2686c7f4c613b16fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com> Date: Mon, 2 Sep 2019 18:33:01 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E6=8E=92=E5=BA=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/modules/courses/css/busyWork.css | 106 ----------------- .../src/modules/courses/ordering/Ordering.css | 109 ++++++++++++++++++ .../src/modules/courses/ordering/Ordering.js | 44 ++++--- 3 files changed, 140 insertions(+), 119 deletions(-) create mode 100644 public/react/src/modules/courses/ordering/Ordering.css diff --git a/public/react/src/modules/courses/css/busyWork.css b/public/react/src/modules/courses/css/busyWork.css index d77954aaf..92427c753 100644 --- a/public/react/src/modules/courses/css/busyWork.css +++ b/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); -} - diff --git a/public/react/src/modules/courses/ordering/Ordering.css b/public/react/src/modules/courses/ordering/Ordering.css new file mode 100644 index 000000000..a8787de03 --- /dev/null +++ b/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; +} diff --git a/public/react/src/modules/courses/ordering/Ordering.js b/public/react/src/modules/courses/ordering/Ordering.js index 504db9e18..68075be72 100644 --- a/public/react/src/modules/courses/ordering/Ordering.js +++ b/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} > 温馨提示：请在列表中长按鼠标左键，进行拖放排序。完成排序后请点击“保存” - - + +

    - + {(provided, snapshot) => (
    {datas===undefined?"":