forgeplus-react/src/forge/Information/Pages/sourceDetail.jsx

import React , { useEffect , useState } from 'react';
import { Badge, Breadcrumb } from 'antd';
import SourceFile from '../img/sourceFile.png';
import { getSourceDetail } from '../api';
import { Link } from 'react-router-dom';
import { httpUrl } from '../fetch';
import { AlignCenter, FlexAJ } from '../../Component/layout';
import SourceIcon from '../img/sourceIcon.png';
import { addMeta, setSeoMeta } from 'educoder';


function SourceDetail(props){
  const { deptId , sourceid } = props.match.params;
  const [ detail , setDetail ] = useState(undefined);
  const zonedetail = props.data;
  const {temp} = props;

  useEffect(()=>{
    if(sourceid){
      getDetails();
    }
  },[sourceid])

  useEffect(()=>{
    // 设置网页标题
    if(detail){
      const { name, domainName, summary} = detail;
      document.title = `${ name }/${ domainName }`;
      addMeta('Keywords', `${ name },${ domainName },${ summary }`);
    }
    return componentWillUnmount
  }, [detail])

  function componentWillUnmount() {
    if (zonedetail) {
      document.title= zonedetail.mainTitle;
      setSeoMeta(`${zonedetail.name},`, zonedetail.name, zonedetail.subTitle, `/zone/${deptId}`)
    }
  }

  function getDetails(){
    getSourceDetail(sourceid).then(response=>{
      if(response){
        setDetail(response.data.data);
      }
    }).catch(error=>{})
  }

  return(
    <div className="boxmain"style={{paddingBottom:"40px"}}>
      <Breadcrumb separator=">" style={{paddingTop:"20px"}}>
        <Breadcrumb.Item><Link className="primaryColor" to={`/zone/${deptId}/source`}>资源列表</Link></Breadcrumb.Item>
        <Breadcrumb.Item>详情页</Breadcrumb.Item>
      </Breadcrumb>
      {
        detail &&
        <div className="source_detail_box">
          <div className="s_d_title">
            <FlexAJ>
              <AlignCenter style={{flex: 1}}>
                <span className='domainNameBoxD font-13 mr15'>{detail.domainName}</span>
                <span className='font-22' style={{flex: 1}}>{detail.name}</span>
              </AlignCenter>
              <div className="load_count">
                <img src={SourceIcon} alt="" width="18px" className="mr5" style={{marginTop: '-4px'}}/><span style={{color:"#5e6685"}}>{detail.downloadCount}</span>
              </div>
            </FlexAJ>
            {detail.createUser && detail.createUser.avatar && <Link to={`/${detail.createUser.userName}`}><img alt='' src={detail.createUser.avatar} className='publicUserAvatar mr10'/></Link>}
            {detail.createUser && <Link className='mr20' to={`/${detail.createUser.userName}`}>{detail.createUser.nickName}</Link>}
            <span className='mr20'>发布于{detail.updateTime || detail.createTime}</span>
            {detail.auditStatus === '0' && <Badge color={temp === "zone" ? "#466aff" : "#089f7f"} text="待审核" className='pass'/> }
            {detail.auditStatus === '2' && <Badge color="#eb1212" text="未通过" className='failed'/> }
          </div>
          <div className='pb20'>{detail.summary}</div>
          {
            detail.fileList && detail.fileList.length > 0 &&
            <ul className="files_box">
              {
                detail.fileList.map((i,k)=>{
                  return(
                    <li>
                      <img src={SourceFile} alt="" width="20px" className="mr12"/>
                      <span className="task-hide">{i.fileOriginName}</span>
                      <span style={{width: '340px'}}>{i.zoneResourceType.name}</span>
                      <span>{i.fileSizeInfo}</span>
                      <a href={`${httpUrl}/file/open/download/${i.fileId}`} download className="f_b_load primaryColor">下载</a>
                    </li>
                  )
                })
              }
            </ul>
          }
        </div>
      }
    </div>
  )
}
export default SourceDetail;