forgeplus-react/src/forge/About/Index.jsx

import React , { useEffect , useState } from 'react';
import './index.scss';
import { Button } from 'antd';
import Upload from "../Upload/Index";
import UploadImg from "../Images/upload.png";
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
import { AlignCenterBetween } from '../Component/layout';
import axios from 'axios';
import RenderHtml from '../../components/render-html';
import Attachments from "../Upload/attachment";

function Index(props){
  const [ attachments , setAttachments ] = useState(undefined);
  const [ content , setContent ] = useState(undefined);
  const [ edit , setEdit ] = useState(false);
  const [ fileList , setFileList ] = useState(undefined);
  const [ editOpration , setEditOpration ] = useState(false);
  const { owner , projectsId } = props.match.params;
  
  const { isManager , isDeveloper , current_user } = props;
  
  useEffect(()=>{
    if(owner && projectsId){
      Init();
    }
  },[owner,projectsId])

  useEffect(()=>{
    if( (current_user && current_user.login) && (isManager === true || isDeveloper === true)){
      setEditOpration(true);
    }
  },[isManager , isDeveloper])
  function Init(){
    const url = `/${owner}/${projectsId}/about.json`;
    axios.get(url).then(result=>{
      if(result){
        setContent(result.data.content);
        setAttachments(result.data.attachments);
      }
    }).catch(error=>{})
  }

  function editContent(){
    setEdit(true);
  }


  function onContentChange(value){
    setContent(value);
  };

  function UploadFunc(fileList){
    setFileList(fileList);
  };

  function sureSubmit(){
    const url = `/${owner}/${projectsId}/about.json`;
    axios.post(url,{
      content,attachment_ids:fileList
    }).then(result=>{
      if(result){
        props.showNotification("项目主页编辑成功！");
        Init();
        setEdit(false);
      }
    }).catch(error=>{})
  }
  return(
    <div className="aboutPanels">
      <div className="aboutContent">
        <AlignCenterBetween style={{padding:"14px 20px"}}>
          <span className="font-16"><i className="iconfont icon-xiangmujianjie mr5 font-16 color-blue"></i>项目概览</span>
          { editOpration && !edit && <a onClick={editContent} className="color-blue">编辑</a> }
        </AlignCenterBetween>
        {
          edit ? 
          <div className="padding20">
            <MDEditor
              placeholder={"请输入描述信息"}
              height={500}
              mdID={"order-new-description"}
              initValue={content}
              onChange={onContentChange}
              className="mt20"
            ></MDEditor>
            <div className="pb20">
              <Upload
                className="commentStyle mt20"
                isComplete={true}
                load={UploadFunc}
                icon={
                  <img
                    src={UploadImg}
                    width="58"
                    alt=""
                    style={{ marginBottom: 15 }}
                  />
                }
                size={100}
                showNotification={props.showNotification}
              />
              {attachments && attachments.length > 0 &&
                <Attachments
                  attachments={attachments}
                  showNotification={props.showNotification}
                  canDelete={true}
                ></Attachments>
              }
            </div>
            <div className="pb30">
              <Button type="primary" onClick={sureSubmit}>确定</Button>
              <Button className="ml30" onClick={()=>setEdit(false)}>取消</Button>
            </div>
          </div>
          :
          <div className="padding20">
            {content ? 
              <RenderHtml className="break_word_comments imageLayerParent" value={content} url={props.history.location}/>
              :
              <div>暂无概览~</div>
            }
            {attachments && attachments.length > 0 &&
              <Attachments
                attachments={attachments}
                showNotification={props.showNotification}
              ></Attachments>
            }
          </div>
        }
      </div>
    </div>
  )
}
export default Index;