From 1c3fec0cc799e6e7fcf1501178782bc3e5630ac9 Mon Sep 17 00:00:00 2001 From: hjm <63528605@qq.com> Date: Sat, 3 Aug 2019 14:13:21 +0800 Subject: [PATCH] =?UTF-8?q?=E9=99=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/react/src/modules/forums/MemoDetail.js | 16 +- public/react/src/modules/forums/MemoNew.js | 158 +++++++++++++++--- 2 files changed, 138 insertions(+), 36 deletions(-) diff --git a/public/react/src/modules/forums/MemoDetail.js b/public/react/src/modules/forums/MemoDetail.js index 0731c9a39..60c26b09d 100644 --- a/public/react/src/modules/forums/MemoDetail.js +++ b/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(

- + {fileName}{filesize? ` ${filesize}` : ''}

@@ -777,7 +775,7 @@ class MemoDetail extends Component {

- { memo.attachment_url && !!memo.attachment_url.length && + { this.props.attachments_list &&
{this.renderAttachment()}
diff --git a/public/react/src/modules/forums/MemoNew.js b/public/react/src/modules/forums/MemoNew.js index 98d95ddce..3eb83dc06 100644 --- a/public/react/src/modules/forums/MemoNew.js +++ b/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 (
@@ -592,13 +676,13 @@ class MemoNew extends Component { -
+ {/* { attachments_url && !!attachments_url.length && this.renderAttachment() } - + {debugger;window.addInputFiles( window.$('.file_selector')[0] ) }} style={{'display':'none'}} type="file"> - -
+ + */} + {/*开始上传*/} + + + (单个文件150M以内) + {/* 请求status 422 */} -
+ + {/* */} + {/*
window.$('#_file').click()} data-tip-down="请选择文件上传"> - 上传附件(单个文件50M以内) + 上传附件 + (单个文件50M以内) -
+
*/}
{/* TODOTODO 这里重复的html代码太多，如果有其他页面有类似需求，需要封装*/}