forked from Gitlink/forgeplus-react
277 lines
8.1 KiB
JavaScript
277 lines
8.1 KiB
JavaScript
import React, { PureComponent } from 'react';
|
||
|
||
import {appendFileSizeToUploadFileAll ,appendFileSizeToUploadFile} from 'educoder';
|
||
import { Form , Input , Upload ,Button , Select , Icon , message } from "antd";
|
||
import './post.css'
|
||
import '../exchange.css'
|
||
|
||
import axios from 'axios';
|
||
|
||
import MDEditor from '../../common/MDEditor';
|
||
|
||
const Option = Select.Option;
|
||
const uploadButton = (
|
||
<div>
|
||
<i className="iconfont icon-tianjia mb30"></i>
|
||
<div className="font-16 mb10">点击上传封面</div>
|
||
<p className="font-12">只支持JPG、PNG、JPEG大小不超过2M建议尺寸4：3</p>
|
||
</div>
|
||
)
|
||
|
||
function getBase64(img, callback) {
|
||
debugger;
|
||
const reader = new FileReader();
|
||
reader.addEventListener('load', () => callback(reader.result));
|
||
reader.readAsDataURL(img);
|
||
}
|
||
|
||
|
||
class New extends PureComponent{
|
||
constructor(props){
|
||
super(props);
|
||
this.contentMdRef = React.createRef();
|
||
this.state={
|
||
// 封面图
|
||
imageUrl:undefined,
|
||
// 大板块下拉选项
|
||
memo_type:undefined,
|
||
// 小板块
|
||
smallOption:undefined,
|
||
// 附件列表
|
||
contentFileList:undefined,
|
||
}
|
||
}
|
||
|
||
componentDidMount = () =>{
|
||
this.getInfo();
|
||
}
|
||
|
||
// 获取信息
|
||
getInfo = () =>{
|
||
let url = '/memos/new';
|
||
axios.get((url)).then((result)=>{
|
||
if(result){
|
||
this.setState({
|
||
memo_type:result.data.memo_type
|
||
})
|
||
}
|
||
}).catch((error)=>{
|
||
|
||
})
|
||
}
|
||
|
||
changeUploadImage =(info)=>{
|
||
if (info.file.status === 'done') {
|
||
// Get this url from response in real world.
|
||
getBase64(info.file.originFileObj, imageUrl =>
|
||
this.setState({
|
||
imageUrl
|
||
}),
|
||
);
|
||
}
|
||
}
|
||
|
||
// 切换大板块
|
||
changeLargeOption=(value)=>{
|
||
// console.log(value);
|
||
const { memo_type } = this.state;
|
||
let list = memo_type.filter((item=> item.id === value))[0].children_tags;
|
||
// console.log(list);
|
||
this.setState({
|
||
smallOption:list && list.map(item=>{
|
||
return(
|
||
<Option value={item.id}>{item.title}</Option>
|
||
)
|
||
})
|
||
})
|
||
}
|
||
|
||
// 提交
|
||
handleSubmit=()=>{
|
||
this.props.form.validateFieldsAndScroll((err, values) => {
|
||
console.log(values);
|
||
if(!err){
|
||
let url=`/memos.json`;
|
||
axios.post((url),{
|
||
forum_id:values.bigPlate,
|
||
children_forum_id:values.smallPlate,
|
||
memo:{
|
||
subject:values.title,
|
||
content:values.description
|
||
}
|
||
}).then(result=>{
|
||
if(result){
|
||
this.props.showNotification(result.data.message);
|
||
this.props.history.push(`/forums/${result.data && result.data.memo_id}`);
|
||
}
|
||
}).catch(error=>{
|
||
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 上传附件
|
||
handleContentUploadChange = (info) => {
|
||
console.log("changeFIle==================>",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
|
||
})
|
||
}
|
||
}
|
||
// 上传附件-删除确认框
|
||
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,list)=>{
|
||
console.log("delete===============>",file)
|
||
}
|
||
|
||
|
||
render(){
|
||
const { getFieldDecorator } = this.props.form;
|
||
|
||
/** 上传封面图 */
|
||
let { imageUrl , memo_type , smallOption , contentFileList } = this.state;
|
||
|
||
const largeOption = memo_type && memo_type.length > 0 && memo_type.map(item=>{
|
||
return(
|
||
<Option value={item.id}>{item.name}</Option>
|
||
)
|
||
})
|
||
|
||
let uploadImg = ( imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton )
|
||
|
||
// 上传封面图
|
||
const uploadCover = {
|
||
listType:"picture-card",
|
||
className:"avatar-uploader",
|
||
showUploadList:false,
|
||
action:`/uploads.js`,
|
||
data: { attachment_id: 1 },
|
||
onChange:this.changeUploadImage,
|
||
}
|
||
|
||
/**上传附件 */
|
||
const uploadProps = {
|
||
width: 600,
|
||
fileList: contentFileList,
|
||
multiple: true,
|
||
action: 'http://127.0.0.1:3000/uploads.js',
|
||
onChange: this.handleContentUploadChange,
|
||
onRemove: (file) => this.onAttachmentRemove(file, 'contentFileList'),
|
||
beforeUpload: (file) => {
|
||
console.log('beforeUpload', file.name);
|
||
const isLt150M = file.size / 1024 / 1024 < 150;
|
||
if (!isLt150M) {
|
||
this.props.showNotification('文件大小必须小于150MB!');
|
||
}
|
||
return isLt150M;
|
||
},
|
||
};
|
||
return(
|
||
<div className="educontent-min">
|
||
<p className="font-22 color-grey3 mt30 mb10">新建</p>
|
||
<div className="bc-white padding30">
|
||
<Form className="postNewform">
|
||
|
||
<Form.Item
|
||
label="标题"
|
||
>
|
||
{getFieldDecorator('title', {
|
||
rules: [{
|
||
required: true, message: '请输入帖子标题',
|
||
},{
|
||
max: 5000 , message:'最大限制60个字符'
|
||
}],
|
||
})(
|
||
<Input placeholder="请输入标题，最大限制60个字符" maxLength="60" style={{height:"40px"}}/>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="内容" className="editorFromItem">
|
||
{getFieldDecorator('description', {
|
||
rules: [{
|
||
required: true, message: '请输入帖子内容',
|
||
},{
|
||
max: 5000 , message:'最大限制5000个字符'
|
||
}],
|
||
})(
|
||
<MDEditor ref={this.contentMdRef} placeholder="请输入内容，最大限制5000字符" mdID={'courseContentMD'} refreshTimeout={1000}
|
||
initValue={""} className="courseMessageMD" ></MDEditor>
|
||
)}
|
||
</Form.Item>
|
||
<Upload {...uploadProps} className="upload_1 newPostUpload">
|
||
<Button className="uploadBtn">
|
||
<i className="iconfont icon-fabu font-22 color-blue fl mr10"></i> 上传附件
|
||
</Button>
|
||
</Upload>
|
||
<div className="df mt10">
|
||
<Form.Item label="主题板块">
|
||
{
|
||
getFieldDecorator('bigPlate',{
|
||
rules:[{
|
||
required:true,message:'请选择大板块'
|
||
}]
|
||
})(
|
||
<Select className="selectItem" onChange={this.changeLargeOption}>
|
||
{ largeOption }
|
||
</Select>
|
||
)
|
||
}
|
||
</Form.Item>
|
||
<Form.Item label="">
|
||
{
|
||
getFieldDecorator('smallPlate',{
|
||
rules:[{
|
||
required:true,message:'请选择小板块'
|
||
}]
|
||
})(
|
||
<Select className="selectItem">
|
||
{ smallOption }
|
||
</Select>
|
||
)
|
||
}
|
||
</Form.Item>
|
||
</div>
|
||
<div className="df uploadImageBox">
|
||
<label className="new_label">上传封面：</label>
|
||
<Upload {...uploadCover}>
|
||
{uploadImg}
|
||
</Upload>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
<p className="clearfix mt20 mb50 edu-txt-center">
|
||
<span className="inline">
|
||
<a className="defalutCancelbtn fl mr20">取消</a>
|
||
<Button type="primary" onClick={this.handleSubmit} className="defalutSubmitbtn fl mr20">提交</Button>
|
||
</span>
|
||
</p>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
const WrappedNewPostForm = Form.create({ name: 'New' })(New);
|
||
export default WrappedNewPostForm; |