附件

public/react/src/modules/forums/MemoDetail.js

@@ -180,18 +180,16 @@ class MemoDetail extends Component {
         })
     }
     renderAttachment() {
-      const { memo } = this.props;
+      const { memo, attachments_list } = this.props;
       const attachments = []
-      memo.attachment_url.forEach((item, index) => {
+      attachments_list.forEach((item, index) => {
         const ar = item.url.split('/')
-        const fileName = item.filename || ar[ar.length - 1]
-        let filesize = 0
-        if (item.filesize) {
-          filesize = bytesToSize(item.filesize)
-        }
+        const fileName = item.title
+        let filesize = item.filesize
+        
         attachments.push(
           <p className="clearfix" key={index} >
-            <a href={item.url} className="color-green clearfix notefileDownload">
+            <a href={item.url} className="color-green clearfix notefileDownload" target="_blank">
               <i className="iconfont icon-xiazai color-green ml5 fl"></i><span className="fl">{fileName}{filesize? ` ${filesize}` : ''}</span>
             </a>
           </p>
@@ -777,7 +775,7 @@ class MemoDetail extends Component {
                           </p>
                         </div>
 
-                        { memo.attachment_url && !!memo.attachment_url.length && 
+                        { this.props.attachments_list && 
                         <div>
                             {this.renderAttachment()}
                         </div>

public/react/src/modules/forums/MemoNew.js

@@ -7,17 +7,17 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames'
 
-import { Select,Icon } from 'antd';
+import { Select,Icon, Upload, Button } from 'antd';
 
 // demo http://react-component.github.io/upload/examples/simple.html
-import Upload from 'rc-upload';
+// import Upload from 'rc-upload';
 
 import axios from 'axios'
 
 import 'antd/lib/select/style/index.css'
 import TPMMDEditor from '../tpm/challengesnew/TPMMDEditor'
 
-import { getUrl } from 'educoder'
+import { getUrl, getUploadActionUrl, appendFileSizeToUploadFileAll, appendFileSizeToUploadFile } from 'educoder'
 const Option = Select.Option;
 const $ = window.$;
 
@@ -169,7 +169,9 @@ class MemoNew extends Component {
 
         repertoires: [],
         currentSelectRepertoiresIndex: -1,
-        repertoiresTagMap: {}
+        repertoiresTagMap: {},
+
+        fileList: []
       }
     }
     onCommit() {
@@ -207,19 +209,21 @@ class MemoNew extends Component {
       // collect attachments
       const $ = window.$;
       const attachmentsMap = {};
-      const attachmentIds = []
-      $('#attachments_fields .attachment').each(( index, item ) => {
-        const filename = $(item).find('.upload_filename').val();
-        // $($('#attachments_fields .attachment')[0]).find('input:nth-child(6)').val()
-        const token = $(item).find('input:nth-child(7)').val()
-        const attachment_id = parseInt($(item).children().last().val())
-        attachmentsMap[index] = {
-          filename,
-          token,
-          attachment_id
-        }  
-        attachmentIds.push(attachment_id)
+      const attachmentIds = this.state.fileList.map(item => {
+        return item.response ? item.response.id : item.id
       })
+      // $('#attachments_fields .attachment').each(( index, item ) => {
+      //   const filename = $(item).find('.upload_filename').val();
+      //   // $($('#attachments_fields .attachment')[0]).find('input:nth-child(6)').val()
+      //   const token = $(item).find('input:nth-child(7)').val()
+      //   const attachment_id = parseInt($(item).children().last().val())
+      //   attachmentsMap[index] = {
+      //     filename,
+      //     token,
+      //     attachment_id
+      //   }  
+      //   attachmentIds.push(attachment_id)
+      // })
       
 
       if (currentMemoId) {
@@ -253,7 +257,7 @@ class MemoNew extends Component {
             // language: memoLanguage.join(languageSeparator),
             // 
           // },
-          attachments: attachmentsMap
+          attachment_ids: attachmentsMap
         }, {
         // withCredentials: true,
       })
@@ -283,7 +287,7 @@ class MemoNew extends Component {
             // repertoire_name: memoRepertoire,
             
           // },
-          attachments: attachmentsMap
+          attachment_ids: attachmentsMap
         }, {
         // withCredentials: true,
       })
@@ -349,7 +353,7 @@ class MemoNew extends Component {
             if (tag_list) {
               // this.setState({...response.data})
               const { content, forum_id, id, repertoire_name, subject, 
-                current_user, tag_list, attachments_url, memo_tags } = response.data;
+                current_user, tag_list, attachments_url, memo_tags, attachments } = response.data;
               this.initMD(content);
               // this.onRepertoiresChange(repertoire_name)
               // tag -> memo_tags
@@ -360,7 +364,18 @@ class MemoNew extends Component {
                   return item.id + ""
                 })
               }
+              const fileList = attachments.map(item => {
+                return {
+                  id: item.id,
+                  uid: item.id,
+                  name: appendFileSizeToUploadFile(item),
+                  url: item.url,
+                  filesize: item.filesize,
+                  status: 'done'
+                }
+              })
               this.setState({
+                fileList,
                 currentMemoId: memoId,
                 memoSubject: subject,
                 memoType: forum_id,
@@ -531,6 +546,55 @@ class MemoNew extends Component {
           )
       })
       return attachments;
+    }
+    handleChange = (info) => {
+      let fileList = info.fileList;
+      this.setState({ 
+        fileList: appendFileSizeToUploadFileAll(fileList)
+      });
+    }
+    onAttachmentRemove = (file) => {
+      this.props.confirm({
+        // title: '确定要删除这个附件吗?',
+        content: '是否确认删除?',
+        
+        okText: '确定',
+        cancelText: '取消',
+        // content: 'Some descriptions',
+        onOk: () => {
+          this.deleteAttachment(file)
+        },
+        onCancel() {
+          console.log('Cancel');
+        },
+      });
+      return false;
+    }
+    deleteAttachment = (file) => {
+      // 初次上传不能直接取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.fileList.indexOf(file);
+                const newFileList = state.fileList.slice();
+                newFileList.splice(index, 1);
+                return {
+                  fileList: newFileList,
+                };
+              });
+            }
+          }
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
     }
   	render() {
   		const { match, history } = this.props
@@ -538,8 +602,28 @@ class MemoNew extends Component {
         // repertoires,  repertoiresTagMap, currentSelectRepertoiresIndex, memoRepertoire,
         tag_list,
         memoSubject, memoType,
-        memoLanguage, attachments_url } = this.state;
+        memoLanguage, attachments_url, fileList } = this.state;
       const memoId = match.params.memoId;
+
+      const uploadProps = {
+        width: 600,
+        fileList,
+        multiple: true,
+        // https://github.com/ant-design/ant-design/issues/15505
+        // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
+        // showUploadList: false,
+        action: `${getUploadActionUrl()}`,
+        onChange: this.handleChange,
+        onRemove: this.onAttachmentRemove,
+        beforeUpload: (file) => {
+          console.log('beforeUpload', file.name);
+          const isLt150M = file.size / 1024 / 1024 < 150;
+          if (!isLt150M) {
+            // message.error('文件大小必须小于150MB!');
+          }
+          return isLt150M;
+        },
+      };
 	    return (
     		<div >
           <div className="pt20 pl20 pr20 pb20 bor-bottom-greyE clearfix" style={{background: '#fff'}}>
@@ -592,13 +676,13 @@ class MemoNew extends Component {
 
               
                 
-              <form className="newForm">
+              {/* <form className="newForm">
               <span id={`attachments_fields`} className="attachments_fields" 
                 xmlns="http://www.w3.org/1999/html">
                 { attachments_url && !!attachments_url.length && 
                   this.renderAttachment()
                 }
-              </span>
+              </span> 
               <span className="add_attachment">
                 <input className="file_selector" data-are-you-sure="您确定要删除吗？" 
                   data-delete-all-files="您确定要删除所有文件吗" data-description-placeholder="可选的描述" 
@@ -610,19 +694,39 @@ class MemoNew extends Component {
                   onChange={()=>{debugger;window.addInputFiles( window.$('.file_selector')[0] ) }} 
                   style={{'display':'none'}} type="file">
                 </input>
-              </span>
-              </form>
+              </span> 
+              </form>*/}
 
+              <style>{`
+                .memo_upload.upload_1  {
+                  margin-left: 36px;
+                }
+                .memo_upload.upload_1 .ant-upload-list {
+                  margin-left: 30px;
+                }
+                .memo_upload.upload_1 .ant-upload-list-item-info .anticon-paper-clip {
+                  top: 4px;
+                }
+              `}</style>
               {/*<Upload {...this.uploaderProps} ref="inner"><a>开始上传</a></Upload>*/}
+              <Upload {...uploadProps} className="upload_1 memo_upload" >
+                <Button className="uploadBtn">
+                  <Icon type="upload" /> 上传附件
+                </Button>
+                (单个文件150M以内)
+              </Upload>
 
             {/* 请求status 422 */}
-              <div className="df uploadBtn">
+            
+                    {/* <Icon type="upload" ></Icon> */}
+              {/* <div className="df uploadBtn">
                 <a href="javascript:void(0);" className="fl" onClick={()=>window.$('#_file').click()} 
                     data-tip-down="请选择文件上传">
                   <i className="fa fa-upload mr5 color-blue"></i>
-                  <span className="color-blue"> <Icon type="upload" > 上传附件</Icon></span><span style={{color: '#CDCDCD', fontSize: "14px"}}>(单个文件50M以内)</span>
+                  <span className="color-blue">  上传附件
+                  </span><span style={{color: '#CDCDCD', fontSize: "14px"}}>(单个文件50M以内)</span>
                 </a>
-              </div>
+              </div> */}
             </div>
           </div>
         {/* TODOTODO 这里重复的html代码太多，如果有其他页面有类似需求，需要封装*/}