forgeplus-react/src/exchange/Post/New.js

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;