|
|
import React,{ Component } from "react";
|
|
|
import { Modal,Checkbox,Select,Input,Spin,Icon,Radio,DatePicker} from "antd";
|
|
|
import locale from 'antd/lib/date-picker/locale/zh_CN';
|
|
|
import axios from'axios';
|
|
|
import {handleDateString} from 'educoder';
|
|
|
import NoneData from "../coursesPublic/NoneData";
|
|
|
import Modals from '../../modals/Modals';
|
|
|
import moment from 'moment';
|
|
|
const Option = Select.Option;
|
|
|
const Search = Input.Search;
|
|
|
const dateFormat ="YYYY-MM-DD HH:mm"
|
|
|
function formatDate(date) {
|
|
|
var dateee = new Date(date).toJSON();
|
|
|
return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
|
|
|
}
|
|
|
function range(start, end) {
|
|
|
const result = [];
|
|
|
for (let i = start; i < end; i++) {
|
|
|
result.push(i);
|
|
|
}
|
|
|
return result;
|
|
|
}
|
|
|
function disabledDateTime() {
|
|
|
return {
|
|
|
disabledMinutes: () => range(1, 30).concat(range(31, 60)),
|
|
|
// disabledSeconds: () => range(1,60)
|
|
|
}
|
|
|
}
|
|
|
function disabledDate(current) {
|
|
|
return current && current < moment().endOf('day').subtract(1, 'days');
|
|
|
}
|
|
|
class Selectresource extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.state={
|
|
|
Searchvalue:undefined,
|
|
|
type:'all',
|
|
|
category_id:0,
|
|
|
page:1,
|
|
|
Resourcelist:undefined,
|
|
|
hometypepvisible:true,
|
|
|
getallfiles:false,
|
|
|
searchtype:'getallfiles',
|
|
|
Radiovalue:0,
|
|
|
datatime:undefined
|
|
|
}
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
this.getallfiles(undefined,1)
|
|
|
}
|
|
|
|
|
|
componentDidUpdate = (prevProps) => {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
//勾选实训
|
|
|
shixunhomeworkedit=(list)=>{
|
|
|
|
|
|
this.setState({
|
|
|
patheditarry:list
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
//搜索
|
|
|
SenttotheValue=(e)=>{
|
|
|
this.setState({
|
|
|
Searchvalue:e.target.value,
|
|
|
page:1,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
SenttotheSearch=(value)=>{
|
|
|
let {searchtype}=this.state;
|
|
|
if(searchtype==="getallfiles"){
|
|
|
this.getallfiles(value,1)
|
|
|
}else if(searchtype==="getmyfiles"){
|
|
|
this.getmyfiles(value,1)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
setupdatalist=(url,newpage)=>{
|
|
|
let {Resourcelist,Searchvalue}=this.state;
|
|
|
if(Resourcelist!=undefined){
|
|
|
let newResourcelist=Resourcelist.files;
|
|
|
axios.get(url,{
|
|
|
params:{
|
|
|
page:newpage,
|
|
|
page_size:15,
|
|
|
search:Searchvalue,
|
|
|
}
|
|
|
}).then((result)=>{
|
|
|
|
|
|
var list=result.data.data.files;
|
|
|
for(var i=0;i<list.length; i++ ){
|
|
|
newResourcelist.push(list[i])
|
|
|
}
|
|
|
let lists={
|
|
|
total_count:Resourcelist.total_count,
|
|
|
files:newResourcelist
|
|
|
}
|
|
|
this.setState({
|
|
|
Resourcelist:lists,
|
|
|
hometypepvisible:false,
|
|
|
getallfiles:true,
|
|
|
page:newpage
|
|
|
})
|
|
|
}).catch((error)=>{
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
contentViewScroll=(e)=>{
|
|
|
let {page,searchtype}=this.state;
|
|
|
let newscrollTop=parseInt(e.currentTarget.scrollTop);
|
|
|
let allclientHeight=e.currentTarget.clientHeight+newscrollTop;
|
|
|
|
|
|
//滑动到底判断
|
|
|
if(e.currentTarget.scrollHeight-allclientHeight===0||e.currentTarget.scrollHeight-allclientHeight===1||e.currentTarget.scrollHeight-allclientHeight===-1){
|
|
|
let newpage=page+1;
|
|
|
let url
|
|
|
if(searchtype==="getallfiles"){
|
|
|
url="/files/public_with_course_and_project.json";
|
|
|
this.setupdatalist(url,newpage)
|
|
|
|
|
|
}else if(searchtype==="getmyfiles"){
|
|
|
url="/files/mine_with_course_and_project.json";
|
|
|
this.setupdatalist(url,newpage)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//tag
|
|
|
changeTag=(types)=>{
|
|
|
|
|
|
this.setState({
|
|
|
type:types,
|
|
|
page:1,
|
|
|
patheditarry:[],
|
|
|
Resourcelist:undefined
|
|
|
})
|
|
|
// this.props.funshixunmodallist(Searchvalue,types,true,1)
|
|
|
// this.props.funpatheditarry([])
|
|
|
if(types==="all"){
|
|
|
this.getallfiles(undefined,1)
|
|
|
}else if(types==="my"){
|
|
|
this.getmyfiles(undefined,1)
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
getallfiles=(value,page)=>{
|
|
|
let url = "/files/public_with_course_and_project.json";
|
|
|
axios.get(url,{
|
|
|
params:{
|
|
|
page:1,
|
|
|
page_size:15,
|
|
|
search:value,
|
|
|
}
|
|
|
}).then((result)=>{
|
|
|
this.setState({
|
|
|
Resourcelist:result.data.data,
|
|
|
hometypepvisible:false,
|
|
|
getallfiles:true,
|
|
|
searchtype:'getallfiles'
|
|
|
})
|
|
|
}).catch((error)=>{
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
getmyfiles=(value,page)=>{
|
|
|
|
|
|
let url = "/files/mine_with_course_and_project.json";
|
|
|
axios.get(url,{
|
|
|
params:{
|
|
|
page:1,
|
|
|
page_size:15,
|
|
|
search:value,
|
|
|
}
|
|
|
}).then((result)=>{
|
|
|
this.setState({
|
|
|
Resourcelist: result.data.data,
|
|
|
hometypepvisible:false,
|
|
|
searchtype:'getmyfiles'
|
|
|
})
|
|
|
}).catch((error)=>{
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
hidecouseShixunModal=()=>{
|
|
|
this.props.hidecouseShixunModal()
|
|
|
}
|
|
|
|
|
|
ModalCancelModalCancel=()=>{
|
|
|
this.setState({
|
|
|
Modalstype:false,
|
|
|
visible:false,
|
|
|
Modalstopval:"",
|
|
|
ModalSave:this.ModalCancelModalCancel,
|
|
|
loadtype:false
|
|
|
})
|
|
|
this.props.hidecouseShixunModal()
|
|
|
}
|
|
|
|
|
|
savecouseShixunModal=()=>{
|
|
|
|
|
|
let {patheditarry,datatime,Radiovalue}=this.state;
|
|
|
let {coursesId,attachmentId}=this.props;
|
|
|
let url="/files/import.json";
|
|
|
|
|
|
if(patheditarry===undefined||patheditarry.length===0){
|
|
|
this.setState({
|
|
|
patheditarrytype:true
|
|
|
})
|
|
|
return
|
|
|
}else{
|
|
|
this.setState({
|
|
|
patheditarrytype:false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
if(this.state.Radiovalue===1){
|
|
|
if(datatime===undefined||datatime===null||datatime=== ""){
|
|
|
this.setState({
|
|
|
Radiovaluetype:true
|
|
|
})
|
|
|
return
|
|
|
}else{
|
|
|
this.setState({
|
|
|
Radiovaluetype:false
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
axios.post(url, {
|
|
|
course_id:coursesId,
|
|
|
attachment_ids:patheditarry,
|
|
|
course_second_category_id:this.props.coursesidtype===undefined||this.props.coursesidtype==="node"?0:attachmentId,
|
|
|
delay_publish:Radiovalue,
|
|
|
publish_time:Radiovalue===1?datatime:undefined
|
|
|
}
|
|
|
).then((response) => {
|
|
|
if(response.data.status===0){
|
|
|
this.ModalCancelModalCancel();
|
|
|
this.props.updataleftNavfun();
|
|
|
this.props.showNotification("选用资源成功");
|
|
|
this.props.setupdate(attachmentId)
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
RadioonChange=(e)=>{
|
|
|
if(e.target.value===0){
|
|
|
this.setState({
|
|
|
datatime:undefined
|
|
|
})
|
|
|
}
|
|
|
this.setState({
|
|
|
Radiovalue: e.target.value,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
onChangeTimepublish= (date, dateString) => {
|
|
|
|
|
|
this.setState({
|
|
|
datatime:handleDateString(dateString),
|
|
|
})
|
|
|
|
|
|
}
|
|
|
render(){
|
|
|
let {Searchvalue,type,Resourcelist,hometypepvisible,patheditarry,datatime}=this.state;
|
|
|
let {visible}=this.props;
|
|
|
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
|
|
|
const radioStyle = {
|
|
|
display: 'block',
|
|
|
height: '30px',
|
|
|
lineHeight: '30px',
|
|
|
};
|
|
|
return(
|
|
|
<div>
|
|
|
{/*提示*/}
|
|
|
<Modals
|
|
|
modalsType={this.state.Modalstype}
|
|
|
modalsTopval={this.state.Modalstopval}
|
|
|
modalCancel={this.state.ModalCancel}
|
|
|
modalSave={this.state.ModalSave}
|
|
|
loadtype= {this.state.loadtype}
|
|
|
|
|
|
/>
|
|
|
{visible===true?
|
|
|
<Modal
|
|
|
keyboard={false}
|
|
|
title="选用资源"
|
|
|
visible={visible}
|
|
|
closable={false}
|
|
|
footer={null}
|
|
|
width="600px"
|
|
|
destroyOnClose={true}
|
|
|
>
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.ant-modal-body{
|
|
|
padding: 30px 0px;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<Spin indicator={antIcon} spinning={hometypepvisible} size="large" style={{marginTop:'15%'}}>
|
|
|
<style>{`
|
|
|
.newupload_conboxtop{
|
|
|
margin-top: -30px;
|
|
|
}
|
|
|
#shixun_tab_div{
|
|
|
padding: 0 30px;
|
|
|
padding-top:30px;
|
|
|
}
|
|
|
.search-news{
|
|
|
width: 237px!important;
|
|
|
height: 30px;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
`}</style>
|
|
|
|
|
|
<div className="newupload_conbox newupload_conboxtop">
|
|
|
<div className="clearfix shixun_work_div newshixun_tab_div cdefault" style={{"marginRight":"4px"}} id="shixun_tab_div">
|
|
|
|
|
|
<li className="fl mr5 mt5"> <a onClick={()=>this.changeTag("all")} className={ type==="all" ? "active edu-filter-cir-grey font-12":"edu-filter-cir-grey font-12"}>全部</a></li>
|
|
|
<li className="fl mr5 mt5 ml15"> <a onClick={()=>this.changeTag("my")} className={ type==="my" ? " active edu-filter-cir-grey font-12":"edu-filter-cir-grey font-12"}>我的资源</a></li>
|
|
|
<div className="fr search-news" >
|
|
|
<Search
|
|
|
placeholder="请输入发布人或名称进行搜索"
|
|
|
value={Searchvalue}
|
|
|
onInput={this.SenttotheValue}
|
|
|
onSearch={(value) => this.SenttotheSearch(value)}
|
|
|
style={{width: '100%'}}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<style>{`
|
|
|
.greybackHead{
|
|
|
padding:0px 30px;
|
|
|
}
|
|
|
.fontlefts{text-align: left;}
|
|
|
`}</style>
|
|
|
<ul className="clearfix greybackHead edu-txt-center">
|
|
|
<li className="fl paddingleft22 fontlefts" style={{width:'220px'}}>资源名称</li>
|
|
|
<li className="fl edu-txt-left" style={{width:'80px'}}>大小</li>
|
|
|
<li className="fl" style={{width:'100px'}}>发布人</li>
|
|
|
<li className="fl" style={{width:'100px'}}>时间</li>
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
<style>{`
|
|
|
.color-grey-9a{color: #9A9A9A !important;}
|
|
|
.datastyle{
|
|
|
width: 120px;
|
|
|
overflow: hidden;
|
|
|
height: 37px;
|
|
|
}
|
|
|
.scrollbox{
|
|
|
height:250px !important;
|
|
|
}
|
|
|
.selectfilsbox{
|
|
|
height: 50px;
|
|
|
line-height: 50px;
|
|
|
}
|
|
|
`}</style>
|
|
|
<div className="over210 pl20 pr20 scrollbox"
|
|
|
onScroll={this.contentViewScroll}
|
|
|
>
|
|
|
|
|
|
{
|
|
|
Resourcelist === undefined ?"":Resourcelist.files.length===0?<NoneData/>:
|
|
|
|
|
|
<Checkbox.Group style={{ width: '100%' }} value={patheditarry} onChange={this.shixunhomeworkedit}>
|
|
|
{
|
|
|
Resourcelist.files.map((item,key)=>{
|
|
|
return(
|
|
|
<div className="clearfix edu-txt-center lineh-40 bor-bottom-greyE selectfilsbox" key={key}>
|
|
|
<li className="fl" style={{width:'220px'}}>
|
|
|
<Checkbox
|
|
|
value={item.id}
|
|
|
key={item.id}
|
|
|
className="fl task-hide edu-txt-left"
|
|
|
style={{"width":"220px"}}
|
|
|
name="shixun_homework[]"
|
|
|
>
|
|
|
<label style={{"textAlign":"left","color":"#4C4C4C"}} className="task-hide" title={item.title}>{item.title}</label>
|
|
|
</Checkbox>
|
|
|
</li>
|
|
|
<li className="fl edu-txt-left task-hide paddingl5 color-grey-9a" style={{width:'90px'}}>{item.filesize}</li>
|
|
|
<li className="fl paddingl10 color-grey-9a" style={{width:'100px'}}>{item.author.name}</li>
|
|
|
<li className="fl color-grey-9a paddingl10 datastyle">{formatDate(item.created_on)}</li>
|
|
|
</div>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</Checkbox.Group>
|
|
|
|
|
|
}
|
|
|
</div>
|
|
|
|
|
|
<div className={"mt10"}>
|
|
|
<span className={"color-ooo fl mt6 ml20"}>发布设置：</span>
|
|
|
<Radio.Group onChange={this.RadioonChange} value={this.state.Radiovalue} style={{'width': '460px'}}>
|
|
|
<Radio style={radioStyle} value={0}>
|
|
|
立即发布
|
|
|
</Radio>
|
|
|
<Radio style={radioStyle} value={1} className={"fl"}>
|
|
|
<span className={"mr5"}>延迟发布</span>
|
|
|
<DatePicker
|
|
|
dropdownClassName="hideDisable"
|
|
|
showTime={{ format: 'HH:mm' }}
|
|
|
locale={locale}
|
|
|
format={dateFormat}
|
|
|
placeholder="请选择发布时间"
|
|
|
id={"startime"}
|
|
|
showToday={false}
|
|
|
width={"210px"}
|
|
|
value={this.state.Radiovalue===1?datatime===undefined||datatime===""?undefined:moment(datatime, dateFormat):undefined}
|
|
|
onChange={(e,index)=>this.onChangeTimepublish(e,index,undefined,1)}
|
|
|
disabledTime={disabledDateTime}
|
|
|
disabledDate={disabledDate}
|
|
|
disabled={this.state.Radiovalue===1?false:true}
|
|
|
/>
|
|
|
</Radio>
|
|
|
<span className={"fl mt5 color-grey-c"}>(按照设置的时间定时发布)</span>
|
|
|
</Radio.Group>
|
|
|
</div>
|
|
|
|
|
|
{this.state.patheditarrytype===true?<p className={"color-red ml20"}>请选择资源</p>:""}
|
|
|
{this.state.Radiovaluetype===true?<p className={"color-red ml20"}>发布时间不能为空</p>:""}
|
|
|
<div className="mt20 marginauto clearfix edu-txt-center">
|
|
|
<a className="pop_close task-btn mr30 margin-tp26" onClick={this.hidecouseShixunModal}>取消</a>
|
|
|
<a className="task-btn task-btn-orange margin-tp26" id="submit_send_shixun" onClick={this.savecouseShixunModal}>确定</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Spin>
|
|
|
</Modal>:""}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
export default Selectresource;
|
|
|
|
|
|
|
|
|
|
