-
+
+ {datas.attachments === undefined ? "" : datas.attachments.map((item, key) => {
+ return (
+
+ )
+ })}
-
diff --git a/public/react/src/modules/moop_cases/CaseNew.js b/public/react/src/modules/moop_cases/CaseNew.js
index 7d0cd735c..5e3c279bd 100644
--- a/public/react/src/modules/moop_cases/CaseNew.js
+++ b/public/react/src/modules/moop_cases/CaseNew.js
@@ -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 = (
-
-
-
- );
- // 上传封面图点击事件
- 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(
-
-
-
- 教学案例 > { caseID ? "编辑" : "新建" }
-
-
上传教学案例
-
-
- )
- }
-}
-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 = (
+
+
+
+ );
+ // 上传封面图点击事件
+ 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(
+
+
+
+ 教学案例 > { caseID ? "编辑" : "新建" }
+
+
上传教学案例
+
+
+ )
+ }
+}
+const WrappedCoursesNewApp = Form.create({name: 'CaseNew'})(CaseNew);
export default WrappedCoursesNewApp;
\ No newline at end of file