forgeplus-react/src/forge/Issues/Component/comments/editComment.jsx

import React from 'react';
import { Button, message } from 'antd';
import { getImageUrl } from 'educoder';
import MDEditor from "../../../../modules/tpm/challengesnew/tpm-md-editor";
import Upload from "../../../../forge/Upload/Index";
import Attachments from "../../../../forge/Upload/attachment";
import UploadImg from "../../../../forge/Images/upload.png";
import './list.scss';
import '../../../../forge/Order/order.scss';
import { useState,useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

function EditComment(props){
  const {owner, projectsId, index} = props.match.params;
  const {current_user, current_user:{login}, showLoginDialog, showNotification, reloadComment, cancelMd, parentId, replyId, updateId, showUserImg=true} = props;
  const [content, setContent] = useState(props.content);
  const [quillFlag, setQuillFlag] = useState(false);
  // 确认评论按钮loading效果
  const [journalSpin, setJournalSpin] = useState(false);
  const [atWhoLoginList, setAtWhoLoginList] = useState(undefined);
  const [fileList, setFileList] = useState(undefined);
  const [attachmentClean, setAttachmentClean] = useState(true);
  const [ save , setSave ] = useState(undefined);

  useEffect(()=>{
    setSave(props.defaultFileList);
  },[props.defaultFileList])

  // 评论点击函数
  function addJournals(){
    if(!content){
      setQuillFlag(true);
      return
    }
    setJournalSpin(true);
    if(updateId){
      // 修改评论
      axios.patch(`/v1/${owner}/${projectsId}/issues/${index}/journals/${updateId}`,{
        notes: content,
        attachment_ids: fileList,
        receivers_login:atWhoLoginList
      }).then(res=>{
        if(res && res.data){
          // 刷新评论列表
          reloadComment();
          message.success('评论成功');
          cancelMd();
          setContent(undefined);
        }
        setJournalSpin(false);
      })
    }else{
      // 新建评论
      const params = {
        parent_id: parentId,
        reply_id: replyId,
        notes: content,
        attachment_ids: fileList,
        receivers_login:atWhoLoginList
      }
      axios.post(`/v1/${owner}/${projectsId}/issues/${index}/journals`, params).then(res=>{
        if(res && res.data){
          // 刷新评论列表
          reloadComment();
          message.success('评论成功');
          cancelMd();
          setContent(undefined);
        }
        setJournalSpin(false);
      })
    }
  };
  function deleteLoad(id){
    let arr = [];
    let list = save;
    if(list && list.length>0 ){
      arr = list.filter(i=>i.id !== id);
    }
    setFileList(arr.map(i=>{return i.id}));
    setSave(arr);
  }
  function UploadFunc(f){
    let list = [];
    let arr = [];
    if(save && save.length>0 ){
      arr = save.map(i=>{return i.id});
    }
    list = arr && arr.length>0 ? f.concat(arr) : f ;
    setFileList(list);
  };

  return(
    <div className="grid-item-top pb10">
      <Link
        to={`/${current_user && current_user.login}`}
        className="show-user-link mr10"
      >
        <img
          className="radius"
          src={getImageUrl(
            `/${current_user && current_user.image_url}`
          )}
          alt=""
          width="30"
          height="30"
          style={{display: showUserImg ? '' : 'none'}}
        />
      </Link>
      <div style={{position:"relative"}}>
        <MDEditor
          placeholder={"添加评论..."}
          height={300}
          mdID={"orderdetail-add-descriptions" + replyId}
          initValue={content}
          onChange={(value)=>{setQuillFlag(false);setContent(value);}}
          isCanAtme = {true}
          isQuoteIssue={true}
          changeAtWhoLoginList = {(loginList)=>{setAtWhoLoginList(loginList); setAttachmentClean(true)}}
          owner = {owner}
          projectsId = {projectsId}
        ></MDEditor>
        <p className="quillFlagBox">
          {quillFlag && <span>请输入评论内容</span>}
        </p>
        <Upload
          className="commentStyle"
          isComplete={attachmentClean}
          load={UploadFunc}
          icon={
            <img
              src={UploadImg}
              width="58"
              alt=""
              style={{ marginBottom: 15 }}
            />
          }
          size={100}
          showNotification={showNotification}
          // defaultFileList={props.defaultFileList}
        />
        {props.defaultFileList && props.defaultFileList.length > 0 &&
          <Attachments
            attachments={props.defaultFileList}
            showNotification={props.showNotification}
            canDelete={true}
            deleteLoad={deleteLoad}
          ></Attachments>
        }
        <p className="clearfix mt20">
          <Button
            type="primary"
            onClick={addJournals}
            loading={journalSpin}
            className="mr15"
          >
            评论
          </Button>
          <Button onClick={()=>{cancelMd()}}>取消</Button>
        </p>
      </div>
    </div>
  )
}
export default EditComment;