dev_aliyun_beta
杨树林 6 years ago
parent c2f3da3303
commit f3896c2370

@ -21,7 +21,9 @@ class GroupPackage extends Component {
}
}
DownloadOpenPdf=(type,url)=>{
type===true?window.open(url):window.location.href=url;
}
componentDidMount() {
console.log("Groupjobquesanswer");
console.log("componentDidMount");
@ -54,9 +56,9 @@ class GroupPackage extends Component {
render() {
let{attachments}=this.props;
return (
<div className="color-grey df yslquesmat26" key={0} style={{ lineHeight: '17px'}}>
<div className="color-grey df yslquesmat26" key={attachments&&attachments.id} style={{ lineHeight: '17px'}}>
<a className="color-grey ">
<i className="font-14 color-green iconfont icon-fujian mr8" aria-hidden="true"></i>
</a>
@ -73,11 +75,11 @@ class GroupPackage extends Component {
`
}
</style>
<a href={"/"} title={''}
<a onClick={()=>this.DownloadOpenPdf(attachments.is_pdf,attachments.url)} title={attachments&&attachments.title}
className="mr12 yslahover overflowHidden1" length="58" style={{maxWidth:'480px',fontSize:"16px",}}>
<span>清除浏览器缓存或换个浏览器操作指南更新版本.zip</span>
<span>{attachments&&attachments.description}</span>
</a>
<span className="color656565 color-grey-6 font-12 mr8">{2}</span>
<span className="color656565 color-grey-6 font-12 mr8">{attachments&&attachments.filesize}</span>
</div>
)

@ -55,18 +55,19 @@ class Generaljobanswer extends Component {
render() {
let{datas}=this.props
return (
<div className=" clearfix edu-back-white" ref='targetElementTrainingjobsetting' style={{margin: "auto", minWidth:"1200px"}}>
<div className="yslquestionbank1">
<div id="MakedownHTML"className="markdown-body yslquesHeigth yslquesmarkdowntext" dangerouslySetInnerHTML={{__html: markdownToHTML("C++是C语言的面向对象扩展是C语言的一个超集同时也是历史最悠久、最受欢迎的程序设计语言之一。根据C++创始人Stroustrup的自述C++是一个“更好的C语言”。\n" +
"\n" +
"输入输出是计算机程序的基本功能。程序本质上是对数据进行处理的一系列操作,一般程序都可以分解为:“数据输入”、“数据处理”和“数据输出”三个步骤。标准输入输出(键盘输入和显示器输出)是程序的重要组成部分。\n" +
"\n" +
"本实训项目的主要目标是学习和掌握C++程序的基本结构和基本输入输出主要内容包括标准C语言自有的单个字符的输入输出、格式化的输入输出以及C++扩展的使用流对象的输入输出").replace(/▁/g, "▁▁▁")}}/>
<div id="MakedownHTML"className="markdown-body yslquesHeigth yslquesmarkdowntext" dangerouslySetInnerHTML={{__html: markdownToHTML(datas&&(datas.reference_answer===null?"无":datas.reference_answer==="null"?"无":datas.reference_answer)).replace(/▁/g, "▁▁▁")}}/>
{datas.attachments === undefined ? "" : datas.attachments.map((item, key) => {
return (
<GroupPackage key={key} attachments={item}></GroupPackage>
)
})}
<GroupPackage></GroupPackage>
</div>

@ -86,7 +86,7 @@ class Generaljobbankdetails extends Component {
if(response){
if(response.data){
this.setState({
datas:response.data.informs,
datas:response.data,
})
}else {
this.setState({
@ -118,7 +118,7 @@ class Generaljobbankdetails extends Component {
///////////////教师截止
render() {
let {tab} = this.state;
let {tab,datas} = this.state;
const isAdmin = this.props.isAdmin();
// console.log(119)
@ -141,10 +141,10 @@ class Generaljobbankdetails extends Component {
</div>
<div className="educontent mb20">
<p className=" fl color-black summaryname" style={{heigth: "33px"}}>
MySQL数据库编程开发实训基础篇
{datas&&datas.name}
</p>
<CoursesListType
typelist={["公开"]}
typelist={datas.is_public===true?["公开"]:["私有"]}
/>
</div>
@ -160,8 +160,8 @@ class Generaljobbankdetails extends Component {
</div>
</div>
<Spin size="large" spinning={this.state.isSpin} id={"cdiv"}>
{parseInt(tab) === 0 ? <Generaljobdetails {...this.props} {...this.state}/> :""}
{parseInt(tab) === 1 ? <Generaljobanswer{...this.props} {...this.state}/>:""}
{parseInt(tab) === 0 ? <Generaljobdetails {...this.props} {...this.state} datas={datas}/> :""}
{parseInt(tab) === 1 ? <Generaljobanswer{...this.props} {...this.state} datas={datas}/>:""}
</Spin>
</div>
</div>

@ -13,14 +13,13 @@ import {
import GroupPackage from '../groupjobbank/GroupPackage'
import './questionbank.css';
//内容详情
class Generaljobdetails extends Component {
constructor(props) {
super(props);
this.state = {
}
}
@ -56,18 +55,18 @@ class Generaljobdetails extends Component {
render() {
let{datas}=this.props
return (
<div className=" clearfix edu-back-white" ref='targetElementTrainingjobsetting' style={{margin: "auto", minWidth:"1200px"}}>
<div className="yslquestionbank1">
<div id="MakedownHTML"className="markdown-body yslquesHeigth yslquesmarkdowntext" dangerouslySetInnerHTML={{__html: markdownToHTML("C++是C语言的面向对象扩展是C语言的一个超集同时也是历史最悠久、最受欢迎的程序设计语言之一。根据C++创始人Stroustrup的自述C++是一个“更好的C语言”。\n" +
"\n" +
"输入输出是计算机程序的基本功能。程序本质上是对数据进行处理的一系列操作,一般程序都可以分解为:“数据输入”、“数据处理”和“数据输出”三个步骤。标准输入输出(键盘输入和显示器输出)是程序的重要组成部分。\n" +
"\n" +
"本实训项目的主要目标是学习和掌握C++程序的基本结构和基本输入输出主要内容包括标准C语言自有的单个字符的输入输出、格式化的输入输出以及C++扩展的使用流对象的输入输出").replace(/▁/g, "▁▁▁")}}/>
<div id="MakedownHTML"className="markdown-body yslquesHeigth yslquesmarkdowntext" dangerouslySetInnerHTML={{__html: markdownToHTML(datas&&(datas.description===null?"无":datas.description==="null"?"无":datas.description)).replace(/▁/g, "▁▁▁")}}/>
{datas.attachments === undefined ? "" : datas.attachments.map((item, key) => {
return (
<GroupPackage key={key} attachments={item}></GroupPackage>
)
})}
<GroupPackage></GroupPackage>
</div>

@ -1,452 +1,456 @@
import React,{ Component } from "react";
import './css/moopCases.css'
import '../courses/css/Courses.css'
import { Form , Input , Upload , Button , Icon , message , Tooltip } from "antd";
import { getImageUrl , setImagesUrl , MarkdownToHtml , ActionBtn , appendFileSizeToUploadFile , appendFileSizeToUploadFileAll , getUrl , getUploadActionUrl } from 'educoder';
import Tags from './CaseTags'
import axios from 'axios';
import TPMMDEditor from '../tpm/challengesnew/TPMMDEditor';
import _ from 'lodash'
const { Dragger } = Upload;
function beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
}
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
const $ = window.$;
class CaseNew extends Component{
constructor(props){
super(props);
this.DescMdRef = React.createRef();
this.state={
casesTags:[],
contentFileList:[],
filesID:[],
imageUrl:undefined,
loading: false,
checkTag:false,
checkFile:false,
coverID:undefined
}
}
// 上传附件-删除确认框
onAttachmentRemove = (file, stateName) => {
this.props.confirm({
content: '是否确认删除?',
onOk: () => {
this.deleteAttachment(file, stateName)
},
onCancel() {
console.log('Cancel');
},
});
return false;
}
// 上传附件-确认删除
deleteAttachment = (file, stateName) => {
// 初次上传不能直接取uid
const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
axios.delete(url, {
}).then((response) => {
if (response.data) {
const { status } = response.data;
if (status == 0) {
console.log('--- success')
this.setState((state) => {
const index = state[stateName].indexOf(file);
const newFileList = state[stateName].slice();
newFileList.splice(index, 1);
console.log("newFileList");
console.log(newFileList.map(item =>{ return( item.id )}));
return {
[stateName]: newFileList,
filesID:newFileList.map(item =>{ return( item.id )})
};
});
}
}
})
.catch(function (error) {
console.log(error);
});
}
// 上传附件-change
handleContentUploadChange = (info) => {
if (info.file.status === 'done' || info.file.status === 'uploading') {
let contentFileList = info.fileList;
this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList)});
let list = appendFileSizeToUploadFileAll(contentFileList);
let arr = list.map(item=>{
return ( item.response && item.response.id )
})
this.setState({
filesID:arr,
checkFile:arr.length > 0 ? false : true
})
}
}
// 上传封面图-change
handleChange = (info) => {
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl =>
this.setState({
imageUrl,
loading: false
}),
);
console.log(info.file);
this.setState({
coverID:info.file.response && info.file.response.id
})
}
};
// 编辑时加载数据
componentDidMount=()=>{
if(this.props.match.params.caseID){
this.InitEditData();
}
}
componentDidUpdate=(prevState)=>{
if(this.props.CaseDetail && prevState.CaseDetail != this.props.CaseDetail){
this.props.form.setFieldsValue({
caseTitle:this.props.CaseDetail.title,
userName:this.props.CaseDetail.author_name,
userUnit:this.props.CaseDetail.author_school_name,
})
this.setState({
contentFileList:this.props.attachments.map(item => {
return {
id: item.id,
uid: item.id,
name: appendFileSizeToUploadFile(item),
url: item.url,
filesize: item.filesize,
status: 'done'
}
}),
filesID:this.props.attachments.map(item => {
return ( item.id )
}),
coverID:this.props.cover && this.props.cover.id,
imageUrl:this.props.CaseDetail.cover && setImagesUrl(this.props.CaseDetail.cover.url),
casesTags:this.props.tags.map(item=>{
return (item.id);
})
})
console.log(this.props.attachments.map(item => {
return ( item.id )
}))
}
}
InitEditData=()=>{
let caseID = this.props.match.params.caseID;
this.props.getDetail(caseID);
}
// 申请提交和保存
handleSubmit = (type) => {
let caseID = this.props.match.params.caseID;
console.log(type);
this.props.form.validateFieldsAndScroll((err, values) => {
let { casesTags , filesID } = this.state;
if(casesTags.length == 0){
$("html").animate({ scrollTop: $("#tagFormItem").offset().top - 100 });
this.setState({
checkTag:true
})
return;
}
if(filesID.length == 0){
$("html").animate({ scrollTop: $("#fileFormItem").offset().top - 100 });
this.setState({
checkFile:true
})
return;
}
const mdContnet = this.DescMdRef.current.getValue().trim();
console.log(mdContnet)
values.description = mdContnet;
console.log(values);
let url = caseID ? `/libraries/${caseID}.json`: `/libraries.json`;
if(caseID){
axios.put((url),{
title:values.caseTitle,
author_name:values.userName,
author_school_name:values.userUnit,
content:values.description,
attachment_ids:this.state.contentFileList.map(item=>{
return (item.response ? item.response.id : item.id )
}),
tag_ids:this.state.casesTags,
cover_id:this.state.coverID,
publish:type == 'save' ? false : true
}).then((result)=>{
if(result){
this.props.showNotification(type == 'save' ? `案例保存成功!`: `提交成功!`);
this.props.history.push(type == 'save' ? `/moop_cases/${result.data.id}` : `/moop_cases/${result.data.id}/publish_success`);
}
}).catch((error)=>{
console.log(error);
})
}else{
axios.post((url),{
title:values.caseTitle,
author_name:values.userName,
author_school_name:values.userUnit,
content:values.description,
attachment_ids:this.state.filesID,
tag_ids:this.state.casesTags,
cover_id:this.state.coverID,
publish:type == 'save' ? false : true
}).then((result)=>{
if(result){
this.props.showNotification(type == 'save' ? `案例保存成功!`: `提交成功!`);
this.props.history.push(type == 'save' ? `/moop_cases/${result.data.id}` : `/moop_cases/${result.data.id}/publish_success`);
}
}).catch((error)=>{
console.log(error);
})
}
})
}
// 选择标签
changeType=(type)=>{
let tags = [];
if(this.state.casesTags.indexOf(type) > -1){
tags = this.state.casesTags.filter(item => item != type);
}else{
tags = this.state.casesTags.concat(type);
}
const tagUniqed = _.uniq(tags);
this.setState({
casesTags: tagUniqed,
checkTag:tags.length > 0 ? false : true
})
}
render(){
let { caseID } = this.props.match.params;
let { CaseDetail } = this.props;
let { casesTags , contentFileList , imageUrl , checkTag , checkFile } = this.state;
const {getFieldDecorator} = this.props.form;
// 上传附件点击事件
const uploadProps = {
width: 600,
multiple: true,
fileList:contentFileList,
action: `${getUploadActionUrl()}`,
onChange: this.handleContentUploadChange,
onRemove: (file) => this.onAttachmentRemove(file, 'contentFileList'),
beforeUpload: (file) => {
const isLt150M = file.size / 1024 / 1024 < 150;
if (!isLt150M) {
//message.error('文件大小必须小于150MB!');
this.props.define({
title:'提示',
content:"该文件无法上传。超过文件大小限制(150MB),建议上传到百度云等其它共享工具里然后再txt文档里给出链接以及共享密码并上传"
})
return isLt150M;
}
}
};
// 上传封面图-html
const uploadButton = (
<div>
<Icon className='font-36 color-grey-c' type={this.state.loading ? 'loading' : 'plus'} />
</div>
);
// 上传封面图点击事件
const uploadCover = {
listType:"picture-card",
className:"avatar-uploader",
showUploadList:false,
action:`${getUploadActionUrl()}`,
onChange:this.handleChange,
}
console.log('111');
console.log(!caseID || (CaseDetail && CaseDetail.status == "pending"));
return(
<div className="educontent mt10 mb50">
<style>
{
`
.newCases .ant-col.ant-form-item-label{
float:left;
margin-right:20px;
height:35px;
line-height:35px;
}
.newCaseUpload{
width: 100%;
background: #F2F9FF;
justify-content: center;
align-items: center;
display: -webkit-flex;
text-align: center;
height: 120px;
border-radius: 4px;
border: 1px dashed #4cacff;
}
.newCases .ant-form-item{
margin-bottom:20px!important ;
}
.newCases .ant-col.ant-form-item-control-wrapper{
position:relative;
}
.newCases .ant-form-explain{
position:absolute;
bottom:-18px;
left:76px;
padding-left: 7px;
}
.newCases .resetLeft .ant-form-explain{
left:0px;
}
.newCases .resetBottom .ant-form-explain{
bottom:2px;
}
`
}
</style>
<p className="mt10 mb20 clearfix lineh-20">
<a href="/moop_cases" className="color-grey-9">教学案例</a> &gt; <span className="color-grey-3">{ caseID ? "" : "" }</span>
</p>
<p class="lineh-25 font-22 mb20">上传教学案例</p>
<Form onSubmit={this.handleSubmit} className={"newCases"}>
<div className="padding30 edu-back-white">
<Form.Item label="标题">
{getFieldDecorator('caseTitle', {
rules: [{required: true, message: "案例标题不能为空"}],
})(
<Input placeholder="例如:软件工程教学案例" className="greyInput winput-300-35 mr20 fl"/>
)}
<span className="color-grey-c font-12 fl">简明扼要介绍文档/视频所包含的主要的内容</span>
</Form.Item>
<div className="clearfix">
<Form.Item label="作者" className="fl with22">
{getFieldDecorator('userName', {
rules: [{required: true, message: "请输入作者姓名"}],
})(
<Input placeholder="请输入姓名" className="greyInput winput-120-35 mr20 fl winput150"/>
)}
</Form.Item>
<Form.Item className="fl resetLeft">
{getFieldDecorator('userUnit', {
rules: [{required: true, message: "请输入作者单位名称"}],
})(
<Input placeholder="请输入作者单位名称" className="greyInput winput-300-35 mr20 fl"/>
)}
</Form.Item>
</div>
<div className={checkTag==true ? "clearfix mb20 pr has-error" : "clearfix mb20"} id="tagFormItem">
<span className="upload_Title must">标签</span>
<ul className="fl libraries_tab">
<li className={ casesTags.indexOf(1) > -1 ? "active" :"" } onClick={()=>this.changeType(1)}>获奖案例</li>
<li className={ casesTags.indexOf(2) > -1 ? "active" :"" } onClick={()=>this.changeType(2)}>入库案例</li>
</ul>
{
checkTag && <div class="ant-form-explain">请选择标签</div>
}
</div>
<Form.Item label="描述" className="resetBottom" style={{marginBottom:"0px"}}>
{getFieldDecorator('description', {
rules: [{
required: true, message: '请输入描述内容'
}],
})(
<TPMMDEditor ref={this.DescMdRef} placeholder="请添加描述" mdID={'caseContentMD'} refreshTimeout={1500}
watch={true} className="caseMessageMD" initValue={CaseDetail && CaseDetail.content}></TPMMDEditor>
)}
</Form.Item>
<div className={checkFile == true ? "clearfix mb20 pr has-error" : "clearfix mb20"} id="fileFormItem" style={{marginLeft:"76px"}}>
<Dragger {...uploadProps} className="librariesField upload_1">
<p className="ant-upload-text color-blue font-18 mb20">上传附件</p>
<p className="ant-upload-text color-grey-c">从我的电脑选择要上传的文档按住CTRL可以上传多份文档单个文件最大限制150MB</p>
</Dragger>
{
checkFile == true && <div style={{left:"0px",bottom:"-21px"}} class="ant-form-explain">请先上传附件</div>
}
</div>
<p className="lineh-25 mt20 mb10 clearfix">
<span className="upload_Title" style={{marginRight:"12px"}}>封面图</span><span class="color-grey-c fl lineh-35">120*90 px</span>
</p>
<div style={{marginLeft:"76px"}} className="uploadImage">
<Upload {...uploadCover}>
{ imageUrl ?
<Tooltip title="重新上传">
<img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
</Tooltip>
:
<Tooltip title="上传图片">
{uploadButton}
</Tooltip>
}
</Upload>
</div>
</div>
<div className="padding30 bor-top-greyE edu-back-white">
<li className="lineh-25 color-grey-6 font-18 mb20">审核说明</li>
<ul className="font-16">
<li>平台管理员将对每天新上传的文档进行审核审核通过的文档将公开显示否则将私有化或移除</li>
</ul>
</div>
<div className="padding30 bor-top-greyE edu-back-white">
<li className="lineh-25 color-grey-6 font-18 mb20">温馨提示</li>
<ul className="font-16 lineh-30">
<li>1.请勿上传已设置加密口令的文档资源</li>
<li>2.可以上传符合教学案例标准的文档资料
<a className="color-blue" target="_blank" href="https://www.educoder.net/courses/1309/boards/5909/messages/34799">案例入库标准</a>
<a target="_blank" className="color-blue" href="https://www.educoder.net/courses/1309/boards/5909/messages/34798">案例使用说明书</a>100MB</li>
<li>3.请确保上传内容无侵权或违反国家关于互联网政策的不良行为</li>
<li>4.请使用ChromeFirefoxSafariIE11及以上版本浏览器</li>
</ul>
</div>
<Form.Item>
<div className="clearfix mt30 mb30">
{
(!caseID || (CaseDetail && CaseDetail.status == "pending" || CaseDetail && CaseDetail.status == "refused")) ? <Button type="primary" onClick={()=>this.handleSubmit("submit")} className="defalutSubmitbtn fl mr20">申请发布</Button> : ""
}
<a className="defalutCancelbtn fl" onClick={()=>this.handleSubmit("save")}>保存</ a>
</div>
</Form.Item>
</Form>
</div>
)
}
}
const WrappedCoursesNewApp = Form.create({name: 'CaseNew'})(CaseNew);
import React,{ Component } from "react";
import './css/moopCases.css'
import '../courses/css/Courses.css'
import { Form , Input , Upload , Button , Icon , message , Tooltip } from "antd";
import { getImageUrl , setImagesUrl , MarkdownToHtml , ActionBtn , appendFileSizeToUploadFile , appendFileSizeToUploadFileAll , getUrl , getUploadActionUrl } from 'educoder';
import Tags from './CaseTags'
import axios from 'axios';
import TPMMDEditor from '../tpm/challengesnew/TPMMDEditor';
import _ from 'lodash'
const { Dragger } = Upload;
function beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
}
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
const $ = window.$;
class CaseNew extends Component{
constructor(props){
super(props);
this.DescMdRef = React.createRef();
this.state={
casesTags:[],
contentFileList:[],
filesID:[],
imageUrl:undefined,
loading: false,
checkTag:false,
checkFile:false,
coverID:undefined
}
}
// 上传附件-删除确认框
onAttachmentRemove = (file, stateName) => {
this.props.confirm({
content: '是否确认删除?',
onOk: () => {
this.deleteAttachment(file, stateName)
},
onCancel() {
console.log('Cancel');
},
});
return false;
}
// 上传附件-确认删除
deleteAttachment = (file, stateName) => {
// 初次上传不能直接取uid
const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
axios.delete(url, {
}).then((response) => {
if (response.data) {
const { status } = response.data;
if (status == 0) {
console.log('--- success')
this.setState((state) => {
const index = state[stateName].indexOf(file);
const newFileList = state[stateName].slice();
newFileList.splice(index, 1);
console.log("newFileList");
console.log(newFileList.map(item =>{ return( item.id )}));
return {
[stateName]: newFileList,
filesID:newFileList.map(item =>{ return( item.id )})
};
});
}
}
})
.catch(function (error) {
console.log(error);
});
}
// 上传附件-change
handleContentUploadChange = (info) => {
if (info.file.status === 'done' || info.file.status === 'uploading') {
let contentFileList = info.fileList;
this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList)});
let list = appendFileSizeToUploadFileAll(contentFileList);
let arr = list.map(item=>{
return ( item.response && item.response.id )
})
this.setState({
filesID:arr,
checkFile:arr.length > 0 ? false : true
})
}
}
// 上传封面图-change
handleChange = (info) => {
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl =>
this.setState({
imageUrl,
loading: false
}),
);
console.log(info.file);
this.setState({
coverID:info.file.response && info.file.response.id
})
}
};
// 编辑时加载数据
componentDidMount=()=>{
if(this.props.match.params.caseID){
this.InitEditData();
}
}
componentDidUpdate=(prevState)=>{
if(this.props.CaseDetail && prevState.CaseDetail != this.props.CaseDetail){
this.props.form.setFieldsValue({
caseTitle:this.props.CaseDetail.title,
userName:this.props.CaseDetail.author_name,
userUnit:this.props.CaseDetail.author_school_name,
})
this.setState({
contentFileList:this.props.attachments.map(item => {
return {
id: item.id,
uid: item.id,
name: appendFileSizeToUploadFile(item),
url: item.url,
filesize: item.filesize,
status: 'done'
}
}),
filesID:this.props.attachments.map(item => {
return ( item.id )
}),
coverID:this.props.cover && this.props.cover.id,
imageUrl:this.props.CaseDetail.cover && setImagesUrl(this.props.CaseDetail.cover.url),
casesTags:this.props.tags.map(item=>{
return (item.id);
})
})
console.log(this.props.attachments.map(item => {
return ( item.id )
}))
}
}
InitEditData=()=>{
let caseID = this.props.match.params.caseID;
this.props.getDetail(caseID);
}
// 申请提交和保存
handleSubmit = (type) => {
let caseID = this.props.match.params.caseID;
console.log(type);
this.props.form.validateFieldsAndScroll((err, values) => {
let { casesTags , filesID } = this.state;
if(casesTags.length == 0){
$("html").animate({ scrollTop: $("#tagFormItem").offset().top - 100 });
this.setState({
checkTag:true
})
return;
}
if(filesID.length == 0){
$("html").animate({ scrollTop: $("#fileFormItem").offset().top - 100 });
this.setState({
checkFile:true
})
return;
}
const mdContnet = this.DescMdRef.current.getValue().trim();
console.log(mdContnet)
values.description = mdContnet;
console.log(values);
let url = caseID ? `/libraries/${caseID}.json`: `/libraries.json`;
if(caseID){
axios.put((url),{
title:values.caseTitle,
author_name:values.userName,
author_school_name:values.userUnit,
content:values.description,
attachment_ids:this.state.contentFileList.map(item=>{
return (item.response ? item.response.id : item.id )
}),
tag_ids:this.state.casesTags,
cover_id:this.state.coverID,
publish:type == 'save' ? false : true
}).then((result)=>{
if(result){
this.props.showNotification(type == 'save' ? `案例保存成功!`: `提交成功!`);
this.props.history.push(type == 'save' ? `/moop_cases/${result.data.id}` : `/moop_cases/${result.data.id}/publish_success`);
}
}).catch((error)=>{
console.log(error);
})
}else{
axios.post((url),{
title:values.caseTitle,
author_name:values.userName,
author_school_name:values.userUnit,
content:values.description,
attachment_ids:this.state.filesID,
tag_ids:this.state.casesTags,
cover_id:this.state.coverID,
publish:type == 'save' ? false : true
}).then((result)=>{
if(result){
this.props.showNotification(type == 'save' ? `案例保存成功!`: `提交成功!`);
this.props.history.push(type == 'save' ? `/moop_cases/${result.data.id}` : `/moop_cases/${result.data.id}/publish_success`);
}
}).catch((error)=>{
console.log(error);
})
}
})
}
// 选择标签
changeType=(type)=>{
// console.log(this.state.casesTags);
// debugger
let tags = [];
if(this.state.casesTags.indexOf(type) > -1){
tags = this.state.casesTags.filter(item => item != type);
}else{
tags = this.state.casesTags.concat(type);
}
const tagUniqed = _.uniq(tags);
this.setState({
casesTags: tagUniqed,
checkTag:tags.length > 0 ? false : true
})
}
render(){
let { caseID } = this.props.match.params;
let { CaseDetail } = this.props;
let { casesTags , contentFileList , imageUrl , checkTag , checkFile } = this.state;
const {getFieldDecorator} = this.props.form;
// 上传附件点击事件
const uploadProps = {
width: 600,
multiple: true,
fileList:contentFileList,
action: `${getUploadActionUrl()}`,
onChange: this.handleContentUploadChange,
onRemove: (file) => this.onAttachmentRemove(file, 'contentFileList'),
beforeUpload: (file) => {
const isLt150M = file.size / 1024 / 1024 < 150;
if (!isLt150M) {
//message.error('文件大小必须小于150MB!');
this.props.define({
title:'提示',
content:"该文件无法上传。超过文件大小限制(150MB),建议上传到百度云等其它共享工具里然后再txt文档里给出链接以及共享密码并上传"
})
return isLt150M;
}
}
};
// 上传封面图-html
const uploadButton = (
<div>
<Icon className='font-36 color-grey-c' type={this.state.loading ? 'loading' : 'plus'} />
</div>
);
// 上传封面图点击事件
const uploadCover = {
listType:"picture-card",
className:"avatar-uploader",
showUploadList:false,
action:`${getUploadActionUrl()}`,
onChange:this.handleChange,
}
console.log('111');
console.log(!caseID || (CaseDetail && CaseDetail.status == "pending"));
return(
<div className="educontent mt10 mb50">
<style>
{
`
.newCases .ant-col.ant-form-item-label{
float:left;
margin-right:20px;
height:35px;
line-height:35px;
}
.newCaseUpload{
width: 100%;
background: #F2F9FF;
justify-content: center;
align-items: center;
display: -webkit-flex;
text-align: center;
height: 120px;
border-radius: 4px;
border: 1px dashed #4cacff;
}
.newCases .ant-form-item{
margin-bottom:20px!important ;
}
.newCases .ant-col.ant-form-item-control-wrapper{
position:relative;
}
.newCases .ant-form-explain{
position:absolute;
bottom:-18px;
left:76px;
padding-left: 7px;
}
.newCases .resetLeft .ant-form-explain{
left:0px;
}
.newCases .resetBottom .ant-form-explain{
bottom:2px;
}
`
}
</style>
<p className="mt10 mb20 clearfix lineh-20">
<a href="/moop_cases" className="color-grey-9">教学案例</a> &gt; <span className="color-grey-3">{ caseID ? "" : "" }</span>
</p>
<p class="lineh-25 font-22 mb20">上传教学案例</p>
<Form onSubmit={this.handleSubmit} className={"newCases"}>
<div className="padding30 edu-back-white">
<Form.Item label="标题">
{getFieldDecorator('caseTitle', {
rules: [{required: true, message: "案例标题不能为空"}],
})(
<Input placeholder="例如:软件工程教学案例" className="greyInput winput-300-35 mr20 fl"/>
)}
<span className="color-grey-c font-12 fl">简明扼要介绍文档/视频所包含的主要的内容</span>
</Form.Item>
<div className="clearfix">
<Form.Item label="作者" className="fl with22">
{getFieldDecorator('userName', {
rules: [{required: true, message: "请输入作者姓名"}],
})(
<Input placeholder="请输入姓名" className="greyInput winput-120-35 mr20 fl winput150"/>
)}
</Form.Item>
<Form.Item className="fl resetLeft">
{getFieldDecorator('userUnit', {
rules: [{required: true, message: "请输入作者单位名称"}],
})(
<Input placeholder="请输入作者单位名称" className="greyInput winput-300-35 mr20 fl"/>
)}
</Form.Item>
</div>
<div className={checkTag==true ? "clearfix mb20 pr has-error" : "clearfix mb20"} id="tagFormItem">
<span className="upload_Title must">标签</span>
<ul className="fl libraries_tab">
<li className={ casesTags.indexOf(1) > -1 ? "active" :"" } onClick={()=>this.changeType(1)}>获奖案例</li>
<li className={ casesTags.indexOf(2) > -1 ? "active" :"" } onClick={()=>this.changeType(2)}>入库案例</li>
{/*<li className={casesTags.indexOf(3) > -1 ? "active" : ""} onclick={() => this.changeType(3)}>企业案例</li>*/}
</ul>
{
checkTag && <div class="ant-form-explain">请选择标签</div>
}
</div>
<Form.Item label="描述" className="resetBottom" style={{marginBottom:"0px"}}>
{getFieldDecorator('description', {
rules: [{
required: true, message: '请输入描述内容'
}],
})(
<TPMMDEditor ref={this.DescMdRef} placeholder="请添加描述" mdID={'caseContentMD'} refreshTimeout={1500}
watch={true} className="caseMessageMD" initValue={CaseDetail && CaseDetail.content}></TPMMDEditor>
)}
</Form.Item>
<div className={checkFile == true ? "clearfix mb20 pr has-error" : "clearfix mb20"} id="fileFormItem" style={{marginLeft:"76px"}}>
<Dragger {...uploadProps} className="librariesField upload_1">
<p className="ant-upload-text color-blue font-18 mb20">上传附件</p>
<p className="ant-upload-text color-grey-c">从我的电脑选择要上传的文档按住CTRL可以上传多份文档单个文件最大限制150MB</p>
</Dragger>
{
checkFile == true && <div style={{left:"0px",bottom:"-21px"}} class="ant-form-explain">请先上传附件</div>
}
</div>
<p className="lineh-25 mt20 mb10 clearfix">
<span className="upload_Title" style={{marginRight:"12px"}}>封面图</span><span class="color-grey-c fl lineh-35">120*90 px</span>
</p>
<div style={{marginLeft:"76px"}} className="uploadImage">
<Upload {...uploadCover}>
{ imageUrl ?
<Tooltip title="重新上传">
<img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
</Tooltip>
:
<Tooltip title="上传图片">
{uploadButton}
</Tooltip>
}
</Upload>
</div>
</div>
<div className="padding30 bor-top-greyE edu-back-white">
<li className="lineh-25 color-grey-6 font-18 mb20">审核说明</li>
<ul className="font-16">
<li>平台管理员将对每天新上传的文档进行审核审核通过的文档将公开显示否则将私有化或移除</li>
</ul>
</div>
<div className="padding30 bor-top-greyE edu-back-white">
<li className="lineh-25 color-grey-6 font-18 mb20">温馨提示</li>
<ul className="font-16 lineh-30">
<li>1.请勿上传已设置加密口令的文档资源</li>
<li>2.可以上传符合教学案例标准的文档资料
<a className="color-blue" target="_blank" href="https://www.educoder.net/courses/1309/boards/5909/messages/34799">案例入库标准</a>
<a target="_blank" className="color-blue" href="https://www.educoder.net/courses/1309/boards/5909/messages/34798">案例使用说明书</a>100MB</li>
<li>3.请确保上传内容无侵权或违反国家关于互联网政策的不良行为</li>
<li>4.请使用ChromeFirefoxSafariIE11及以上版本浏览器</li>
</ul>
</div>
<Form.Item>
<div className="clearfix mt30 mb30">
{
(!caseID || (CaseDetail && CaseDetail.status == "pending" || CaseDetail && CaseDetail.status == "refused")) ? <Button type="primary" onClick={()=>this.handleSubmit("submit")} className="defalutSubmitbtn fl mr20">申请发布</Button> : ""
}
<a className="defalutCancelbtn fl" onClick={()=>this.handleSubmit("save")}>保存</ a>
</div>
</Form.Item>
</Form>
</div>
)
}
}
const WrappedCoursesNewApp = Form.create({name: 'CaseNew'})(CaseNew);
export default WrappedCoursesNewApp;
Loading…
Cancel
Save