init project

public/react/src/modules/moop_cases/CaseDetail.js

@@ -0,0 +1,172 @@
+import React,{ Component } from "react";
+import './css/moopCases.css'
+import '../courses/css/Courses.css'
+
+import { getImageUrl , MarkdownToHtml , ActionBtn , AttachmentList } from 'educoder';
+
+import Tags from './CaseTags'
+
+import axios from 'axios';
+import Modals from '../modals/Modals'
+
+// import AttachmentList from '../../common/components/attachment/AttachmentList'
+
+class CaseDetail extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      modalsType:"",
+      modalsTopval:"",
+      modalsBottomval:"",
+      modalCancel:"",
+    }
+  }
+
+  componentDidMount =()=>{
+    let caseID = this.props.match.params.caseID;
+    this.props.getDetail(caseID);
+  }
+  // 是否删除
+  delCases=()=>{
+    this.setState({
+      modalsType:true,
+      modalsTopval:"是否确认删除?",
+      modalsBottomval:""
+    })    
+  }
+
+  // 取消删除
+  cancelDelClasses=()=>{
+    this.setState({
+      modalsType:false,
+      modalsTopval:"",
+      modalsBottomval:""
+    })
+  }
+  // 确定删除
+  sureDelClasses=()=>{
+    let caseID = this.props.match.params.caseID;
+    let url =`/libraries/${caseID}.json`;
+    axios.delete(url).then((result)=>{
+      if(result){
+        this.props.showNotification("删除成功");
+        this.props.history.push("/moop_cases");
+      }
+    }).catch((error)=>{
+      console.log(error);
+    })
+  }
+
+
+  render(){
+    let { CaseDetail , praise_count , creator , operation , user_praised , tags , attachments }=this.props
+    let {
+      modalsType,
+      modalsTopval,
+      modalsBottomval,
+    } = this.state;
+    document.title = CaseDetail&&CaseDetail.title!=undefined?CaseDetail&&CaseDetail.title:"教学案例";
+    return(
+      <div className="educontent mt10 mb50">
+        {
+          CaseDetail &&
+          <React.Fragment>
+            <Modals
+              modalsType={modalsType}
+              modalsTopval={modalsTopval}
+              modalsBottomval={modalsBottomval}
+              modalCancel={this.cancelDelClasses}
+              modalSave={this.sureDelClasses}
+            >
+            </Modals>
+            <p className="mt10 mb20 clearfix lineh-20">
+              <a href="/moop_cases" className="color-grey-9">教学案例</a> &gt; <span className="color-grey-3">{ CaseDetail.title}</span>
+            </p>
+            <p className="lineh-25 mb20 clearfix">
+              <span className="font-22 fl mr10 task-hide lineh-30" style={{maxWidth:"800px"}}>
+                { CaseDetail.title}
+              </span>
+              <span className="mt10 fl">
+                <Tags tags={tags}></Tags>
+                {
+                  CaseDetail.status == "pending" && <span class="edu-filter-btn fl cdefault edu-activity-green ml10">草稿</span>
+                }
+                {
+                  CaseDetail.status == "processing" && <span class="edu-filter-btn fl cdefault edu-activity-green ml10">审核中</span>
+                }
+                {
+                  CaseDetail.status == "refused" && <span class="edu-filter-btn fl cdefault edu-activity-orange ml10">未通过</span>
+                }
+              </span> 
+              <a href="/moop_cases" className="fr color-grey-9 mt5">返回</a>
+            </p>
+            <div className="edu-back-white">
+              <div className="padding30">
+                <div className="df mb5">
+                  <a href="/users/moop"><img alt="82274?1563067098" className="radius mr15 mt3" height="50" src={getImageUrl(`images/${creator && creator.image_url}`)} width="50" /></a>
+                  <div className="flex1">
+                    <li className="clearfix mb5">
+                      <span className="font-16 fl">{creator && creator.name}</span>
+                      {
+                        operation && operation.can_deletable ? <ActionBtn style="greyLine" onClick={this.delCases} className="fr">删除</ActionBtn>:""
+                      }
+                      
+                      {
+                        operation && operation.can_editable ? <ActionBtn style="colorBlue" to={`/moop_cases/${this.props.match.params.caseID}/edit`} className="fr mr20">编辑</ActionBtn>:""
+                      }
+                    </li>
+                    <li className="clearfix lineh-20">
+                      <span className="fl color-grey-9 mr20">{creator && creator.school_name}</span>
+                      <span className="fr">
+                        <span className="fl color-grey-9 mr30">编码：<span className="color-grey-6">{CaseDetail.uuid}</span></span>
+                        {
+                          CaseDetail && CaseDetail.status=="published" ?
+                          <span className="fl color-grey-9">发布时间：<span className="color-grey-6">{CaseDetail.published_at}</span></span>
+                          :
+                          <span className="fl color-grey-9">上传时间：<span className="color-grey-6">{CaseDetail.created_at}</span></span>
+                        }
+                      </span>
+                    </li>
+                  </div>
+                </div>
+                <div>
+                  <span className="fl color-grey-9">作者：</span>{CaseDetail.author_name}/{CaseDetail.author_school_name}
+                </div>
+                <style>
+                  {`
+                    .setMDStyle .editormd-html-preview{
+                      width:100%!important;
+                    }
+                  `}
+                </style>
+                <div class="mt20 setMDStyle">
+                  { CaseDetail.content && <MarkdownToHtml content={CaseDetail.content} id="casesDetail" selector="casesDetail" style={{width:"100%!important"}}></MarkdownToHtml>}
+                </div>
+                { attachments && 
+                  <div className="mt10">
+                    <AttachmentList {...this.props} {...this.state} attachments={attachments}></AttachmentList>
+                  </div>
+                }     
+                <div class="mt40">
+                  {
+                    user_praised ?
+                    <p className="pointsBtn pointedBtn">
+                      <span>已赞</span>
+                      <span>{praise_count}</span>
+                    </p>
+                    :
+                    <p onClick = {()=>this.props.praisePoint(this.props.match.params.caseID)} className="pointsBtn">
+                      <span><i class="iconfont icon-dianzan"></i></span>
+                      <span>{praise_count}</span>
+                    </p>
+                  }              
+                </div>
+              </div>
+            </div>
+          </React.Fragment>
+        }
+      </div>
+    )
+  }
+}
+export default CaseDetail;

public/react/src/modules/moop_cases/CaseItem.js

@@ -0,0 +1,59 @@
+import React,{ Component } from "react";
+import './css/moopCases.css'
+import '../courses/css/Courses.css'
+
+import { getUrl } from 'educoder';
+
+import Tags from './CaseTags'
+
+class CaseItem extends Component{
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    let { libraries } = this.props;
+    console.log(libraries)
+    return(
+      <div className="library-list-container">
+        {
+          libraries && libraries.map((item,key)=>{
+            return(
+            	<a href={`/moop_cases/${item.id}`}  target="_blank">
+								<li className="library_list_item pointer">
+									<img alt={item.id} className="mr15 mt3 radius4" height="90" src={getUrl(`${item.cover_url || "/images/educoder/library-default-cover.png"}`)} width="120" />
+									<div className="flex1">
+										<p className="clearfix mb25 lineh-40">
+											<a className="task-hide font-22 library_l_name">{item.title}</a>
+											<span className="fl mt10"><Tags tags={item.tags}></Tags></span>
+										</p>
+										<p className="clearfix lineh-20">
+											<span className="color-grey-3 mr10">{item.author_name}</span>
+											<span className="color-grey-3 mr20">{item.author_school_name}</span>
+											<span className="color-grey-c fr">
+												{
+													item.visited_count && item.visited_count != 0 ?
+													<span className="color-grey-c ml20"><span className=" item-group-icon mr5"><i className="fa fa-eye"></i></span>{item.visited_count} 浏览</span>:""
+												}
+												{
+													item.praise_count && item.praise_count != 0 ?
+													<span className="color-grey-c ml20"><span className=" item-group-icon mr5"><i className="fa fa-thumbs-o-up"></i></span>{item.praise_count} 赞</span>:""
+												}
+												{
+													item.download_count && item.download_count != 0 ?
+													<span className="color-grey-c ml20" style={{"marginRight":'1px'}}><span className=" item-group-icon mr5"><i className="fa fa-download"></i></span>{item.download_count} 下载</span>:""
+												}
+											</span>
+										</p>
+									</div>
+								</li>
+							</a>
+            )
+          })
+        }
+        
+      </div>
+    )
+  }
+}
+export default CaseItem;

public/react/src/modules/moop_cases/CaseList.js

@@ -0,0 +1,171 @@
+import React,{ Component } from "react";
+import { Input , Spin , Pagination } from "antd";
+import './css/moopCases.css'
+import '../courses/css/Courses.css'
+
+import {  ActionBtn , LinkAfterLogin ,getImageUrl} from 'educoder';
+
+import axios from 'axios'
+
+import NoneData from '../courses/coursesPublic/NoneData'
+
+import mainImg from '../../images/moop_cases/teach_ex.jpg'
+import CaseItem from './CaseItem'
+
+
+
+
+const Search = Input.Search;
+class CaseList extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      type:0,
+      search:undefined,
+      page:1,
+      pageSize:20,
+      libraries:undefined,
+      totalCount:undefined,
+      isSpin:true
+    }
+  }
+
+  componentDidMount = () =>{
+		window.document.title = '教学案例'
+    let { type , search , page , pageSize } = this.state;
+    this.InitList(type,search,page,pageSize);
+  }
+
+  // 列表
+  InitList = (type,search,page,pageSize) =>{
+    let url = `/libraries.json`;
+    axios.get(url,{params:{
+      type:type == 0 ? undefined : "mine",
+      keyword:search,
+      page,
+      per_page:pageSize
+    }}).then((result)=>{
+      if(result){
+        this.setState({
+          libraries:result.data.libraries,
+          totalCount:result.data.count,
+          isSpin:false
+        })
+      }else{
+				this.setState({
+					isSpin:false
+				})
+			}
+    }).catch((error)=>{
+      console.log(error);
+			this.setState({
+				isSpin:false
+			})
+    })
+  }
+
+  // tab切换
+  changeType = (type) =>{
+    this.setState({
+      type,
+      page:1,
+			isSpin:true
+    })
+    let { search , page , pageSize } = this.state;
+    this.InitList(type,search,page,pageSize);
+  }
+
+  // 输入搜索内容
+  inputStudent=(e)=>{
+    this.setState({
+      search:e.target.value
+    })
+  }
+
+  // 搜索
+  searchInfo = () =>{
+    this.setState({
+      isSpin:true
+    })
+    let { type , search , pageSize } = this.state;
+    this.InitList( type , search , 1 , pageSize );
+  }
+
+  // 切换分页
+  onChangePage =(pageNumber)=>{
+    this.setState({
+      page:pageNumber
+    })
+    let { type , search , pageSize } = this.state;
+    this.InitList( type , search , pageNumber , pageSize );
+  }
+
+  render(){
+    let { type , search ,libraries , totalCount ,pageSize ,page } = this.state;
+    let { checkIfLogin } = this.props;
+
+    return(
+      <React.Fragment>
+				<style>
+					{
+						`
+						.imgmoop_cases{width: 100%;
+						height: 300px;
+						background-color: #000a4f;
+						background-position: 50%;
+						background-repeat: no-repeat;}
+						`
+					}
+				</style>
+        <img className={"imgmoop_cases"} src={this.props.mygetHelmetapi&&this.props.mygetHelmetapi.moop_cases_banner_url===null?mainImg:getImageUrl(this.props.mygetHelmetapi&&this.props.mygetHelmetapi.moop_cases_banner_url)}/>
+				<div className="educontent">
+          <div className="edu-back-white mb30 mt30">
+            <p className="padding20-30 clearfix bor-bottom-greyE">
+              <span className="font-18 fl color-grey-3">教学案例</span>
+              <LinkAfterLogin {...this.props} to={'/moop_cases/new'} className="fr edu-default-btn edu-blueline-btn" checkProfileComplete = {true}
+                
+              >发布案例</LinkAfterLogin>
+              {/* <ActionBtn style="colorBlue" className="fr" to="/moop_cases/new">发布案例</ActionBtn> */}
+            </p>
+            <div className="clearfix pl30 pr30">
+              <ul className="fl library_nav mt25">
+                <li className={type == 0 ? "active" :""} onClick={()=>this.changeType(0)}>
+                  <a href="javascript:void(0)">全部</a>
+                </li>
+                {
+                  checkIfLogin() && 
+                  <li className={type == 1 ? "active" :""} onClick={()=>this.changeType(1)}>
+                    <a href="javascript:void(0)">我的</a>
+                  </li>
+                }
+              </ul>
+              <div className="fr mt16 mb16 searchView"style={{width:"300px"}}>
+                <Search
+                  value={search}
+                  placeholder="输入教学案例标题、作者、单位进行检索"
+                  onInput={this.inputStudent}
+                  onSearch={this.searchInfo}
+                ></Search>
+              </div>
+            </div>
+          </div>
+          <Spin size="large" spinning={this.state.isSpin} tip="正在获取相关数据...">
+            {
+              libraries && libraries.length > 0 &&  <CaseItem {...this.props} {...this.state} libraries={libraries}></CaseItem>
+            }
+            {
+              libraries && libraries.length == 0 && <div className="mb50"><NoneData></NoneData></div>
+            }
+            {
+              totalCount && totalCount > pageSize &&
+              <div className="mb50 edu-txt-center clearfix">
+                <Pagination defaultCurrent={page} current={page} pageSize={pageSize} showQuickJumper onChange={this.onChangePage} total={totalCount}></Pagination>
+              </div>
+            }
+          </Spin>
+        </div>
+      </React.Fragment>
+    )
+  }
+}
+export default CaseList

public/react/src/modules/moop_cases/CaseNew.js

@@ -0,0 +1,475 @@
+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,
+			library_tags:undefined
+    }
+  }
+
+  // 上传附件-删除确认框
+  onAttachmentRemove = (file, stateName) => {
+    if(!file.percent || file.percent == 100){
+      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' || info.file.status === 'removed') {
+      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();
+    }else{
+			window.document.title = '教学案例'
+		}
+		let url=`/library_tags.json`;
+		axios.get(url).then((result) => {
+			console.log(result)
+			if(result.data.status===0){
+				this.setState({
+					library_tags:result.data.library_tags
+				})
+			}
+		}).catch((error) => {
+			console.log(error);
+		})
+  }
+
+  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,library_tags } = 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) {
+          //this.props.showNotification('文件大小必须小于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">
+									{library_tags&&library_tags.map((item,key)=>{
+										return(
+										<li key={key} className={ casesTags.indexOf(item.id) > -1 ? "active" :"" } onClick={()=>this.changeType(item.id)}>{item.name}</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.请使用Chrome，Firefox，Safari，IE11（及以上版本）浏览器；</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;

public/react/src/modules/moop_cases/CaseTags.js

@@ -0,0 +1,37 @@
+import React,{ Component } from "react";
+import './css/moopCases.css'
+import '../courses/css/Courses.css'
+
+class CaseTags extends Component{
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    let { tags } = this.props;
+    return(
+      <React.Fragment>
+        {
+          tags && tags.map((item,key)=>{
+            return(
+              <React.Fragment>
+                {
+                  item.name == "获奖案例" ?
+                  <span key={key} className="edu-filter-btn fl cdefault edu-activity-red ml10">{item.name}</span>
+                  :
+                  item.name == "入库案例" ?
+                  <span key={key} className="edu-filter-btn fl cdefault edu-activity-blue ml10">{item.name}</span>
+                  :item.name =='企业案例'?
+                  <span key={key} className="edu-filter-btn fl cdefault edu-activity-orange-sub ml10">{item.name}</span>
+										: <span key={key} className="edu-filter-btn fl cdefault edu-activity-36c53c-sub ml10">{item.name}</span>
+                }
+              </React.Fragment>
+            )
+          })
+        }
+      </React.Fragment>
+      
+    )
+  }
+}
+export default CaseTags;

public/react/src/modules/moop_cases/Success.js

@@ -0,0 +1,28 @@
+import React,{ Component } from "react";
+import './css/moopCases.css'
+import '../courses/css/Courses.css'
+import { getImageUrl } from 'educoder';
+import success from '../../images/moop_cases/success.png'
+
+class Success extends Component{
+  constructor(props){
+    super(props);
+  }
+  render(){
+    return(
+      <div className="educontent edu-back-white mt20 successPage">
+        <div>
+          <img src={success} width="100" className="mb30" />
+          <p className="lineh-30 ed-txt-center font-24 color-grey-3 font-bd">恭喜!</p>
+          <p className="lineh-30 ed-txt-center font-24 color-grey-3 font-bd mb20">提交成功</p>
+          <p className="lineh-30 ed-txt-center font-16 color-grey-9 font-bd mb20">平台正在审核您的申请，审核结果将以平台消息的形式通知您</p>
+          <li className="inline">
+            <a href={`/moop_cases/${this.props.match.params.caseID}`} className="white-btn edu-blueline-btn changebtn mr20 fl">查看已上传文档</a>
+            <a href="/moop_cases/new" className="white-btn edu-blueback-btn changebtn fl">继续上传</a>
+          </li>
+        </div>
+      </div>
+    )
+  }
+}
+export default Success;

public/react/src/modules/moop_cases/css/moopCases.css

@@ -0,0 +1,178 @@
+.winput-300-35{
+  width: 300px;
+  height: 35px;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.library_nav li {
+  float: left;
+  cursor: pointer;
+  margin-right: 30px;
+  position: relative;
+  color: #05101A;
+  height: 40px;
+  line-height: 20px;
+  font-size: 16px;
+}
+.library_nav li.active a, .library_nav li:hover a{
+  color: #4cacff!important;
+}
+.library_list {
+  margin-bottom: 30px;
+}
+.library_list_item:hover {
+  box-shadow: 0px 4px 8px rgba(158,158,158,0.16);
+}
+.library_list_item {
+  background: #fff;
+  padding: 20px 30px;
+  margin-bottom: 30px;
+  display: flex;
+}
+.library_list_item .library_l_name {
+  max-width: 600px;
+  float: left;
+}
+
+.edu-activity-red {
+  background-color: #FC2B6A;
+  color: #fff!important;
+  cursor: pointer;
+  border: 1px solid #FC2B6A;
+  line-height: 17px;
+}
+.edu-activity-green {
+  background-color: green;
+  color: #fff!important;
+  cursor: pointer;
+  border: 1px solid green;
+  line-height: 17px;
+}
+.edu-activity-orange {
+  background-color: #ff6800;
+  color: #fff!important;
+  cursor: pointer;
+  border: 1px solid #ff6800;
+  line-height: 17px;
+}
+.edu-activity-blue {
+  background-color: #4CACFF;
+  color: #fff!important;
+  cursor: pointer;
+  border: 1px solid #4CACFF;
+  line-height: 17px;
+}
+.edu-activity-orange-sub {
+  background-color: #FF781B;
+  color: #fff!important;
+  cursor: pointer;
+  border: 1px solid #ff6800;
+  line-height: 17px;
+}
+.edu-activity-36c53c-sub {
+    background-color: #36c53c;
+    color: #fff!important;
+    cursor: pointer;
+    border: 1px solid #36c53c;
+    line-height: 17px;
+}
+.pointsBtn {
+  width: 70px;
+  height: 70px;
+  background-color: #4cacff;
+  border-radius: 50%;
+  color: #fff;
+  text-align: center;
+  margin: 0 auto;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 2px 0;
+  cursor: pointer;
+  line-height: 22px;
+  padding-top: 12px;
+}
+.pointedBtn{
+  background: #BCD1E3;
+  cursor: default
+}
+.pointsBtn span{
+  display: block;
+}
+.upload_Title {
+  position: relative;
+  margin-right: 20px;
+  float: left;
+  line-height: 35px;
+  font-size: 16px;
+  /*width: 56px;*/
+  color:rgba(0, 0, 0, 0.85);
+  text-align: center
+}
+.upload_Title.must:before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #f5222d;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: '*';
+}
+.upload_Title:after{
+  content: ':';
+  position: relative;
+  top: -0.5px;
+  margin: 0 8px 0 2px;
+}
+.libraries_tab li {
+  width: 120px;
+  height: 35px;
+  line-height: 33px;
+  border-radius: 18px;
+  border: 1px solid #4C98FF;
+  color: #4C98FF;
+  cursor: pointer;
+  margin-right: 30px;
+  float: left;
+  text-align: center;
+}
+.libraries_tab li.active {
+  background: #4C98FF;
+  color: #fff;
+}
+.librariesField .ant-upload{
+  width: 100%;
+  background: #F2F9FF;
+  justify-content: center;
+  align-items: center;
+  display: -webkit-flex;
+  text-align: center;
+  height: 120px!important;
+  border-radius: 4px;
+  border: 1px dashed #4cacff!important;
+  display: block;
+  cursor: pointer;
+}
+.librariesField .ant-upload.ant-upload-drag{
+  border:none!important;
+}
+.uploadImage .ant-upload.ant-upload-select-picture-card{
+  width:120px;
+  height: 90px;
+}
+.uploadImage .ant-upload.ant-upload-select-picture-card > .ant-upload{
+  padding:0px!important;
+}
+.successPage {
+  justify-content: center;
+  align-items: center;
+  display: -webkit-flex;
+  height: 570px;
+  text-align: center;
+  margin-bottom: 50px;
+}
+.changebtn {
+  width:166px;
+  font-size: 16px;
+  height: 45px;
+  line-height: 45px;
+}

public/react/src/modules/moop_cases/index.js

@@ -0,0 +1,134 @@
+import React,{ Component } from "react";
+import './css/moopCases.css'
+import '../courses/css/Courses.css'
+
+import { SnackbarHOC } from 'educoder';
+
+import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
+import { CNotificationHOC } from '../courses/common/CNotificationHOC'
+
+import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
+import Loading from '../../Loading';
+import Loadable from 'react-loadable';
+
+import axios from 'axios';
+
+const CaseList = Loadable({
+	loader: () => import('./CaseList'),
+	loading:Loading,
+})
+const CaseDetail = Loadable({
+	loader: () => import('./CaseDetail'),
+	loading:Loading,
+})
+const CaseNew = Loadable({
+	loader: () => import('./CaseNew'),
+	loading:Loading,
+})
+const CaseSuccess = Loadable({
+	loader: () => import('./Success'),
+	loading:Loading,
+})
+
+
+
+class Index extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      praise_count:0,
+      CaseDetail:undefined,
+      cover:undefined,
+      creator:undefined,
+      operation:undefined,
+      tags:undefined,
+      attachments:undefined,
+      user_praised:true,
+    }
+  }
+  componentDidMount(){
+
+  }
+  // 获取案例详情
+  getDetail = (caseID) =>{
+    let url=`/libraries/${caseID}.json`
+    axios.get(url).then((result)=>{
+      if(result){
+        this.setState({
+          CaseDetail:result.data,
+          praise_count:result.data.praise_count,
+          cover:result.data.cover,
+          creator:result.data.creator,
+          operation:result.data.operation,
+          user_praised:result.data.operation.user_praised,
+          tags:result.data.tags,
+          attachments:result.data.attachments
+        })
+				window.document.title = result.data.title;
+      }
+    }).catch((error)=>{
+      console.log(error);
+    })
+  }
+  // 点赞
+  praisePoint=(caseID)=>{
+    let { praise_count }=this.state;
+    let url =`/praise_tread/like.json`;
+    axios.post(url,{
+      object_id:caseID,
+      object_type:"library"
+    }).then((result)=>{
+      if(result){
+        this.setState({
+          praise_count: parseInt(praise_count)+1,
+          user_praised:true
+        })
+      }
+    }).catch((error)=>{
+      console.log(error);
+    })    
+  }
+
+  render(){
+    
+    return(
+      <div className="newMain">
+        <Switch {...this.props}>
+
+          <Route exact path="/moop_cases"
+            render={
+              (props) => (<CaseList {...this.props} {...props} {...this.state} />)
+            }
+          ></Route>
+          
+          <Route exact path="/moop_cases/new"
+            render={
+              (props) => (<CaseNew {...this.props} {...props} {...this.state} />)
+            }
+          ></Route>
+        
+          <Route exact path="/moop_cases/:caseID"
+            render={
+              (props) => (<CaseDetail {...this.props} {...props} {...this.state} getDetail={this.getDetail} praisePoint ={this.praisePoint}/>)
+            }
+          ></Route>
+
+
+          <Route exact path="/moop_cases/:caseID/edit"
+            render={
+              (props) => (<CaseNew {...this.props} {...props} {...this.state} getDetail={this.getDetail}  />)
+            }
+          ></Route>
+
+          <Route exact path="/moop_cases/:caseID/publish_success"
+            render={
+              (props) => (<CaseSuccess {...this.props} {...props} {...this.state} getDetail={this.getDetail}  />)
+            }
+          ></Route>
+
+        </Switch>
+      </div>
+    )
+  }
+}
+export default CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC(Index) ));