crowd-service-frontend/src/pages/bugs/components/BugDetailModal/index.jsx

import { Col, Image, Spin, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { timeToString } from '@/utils/common';
import {
  DislikeOutlined, LeftOutlined,
  LikeOutlined, RightOutlined,
} from '@ant-design/icons';
import { recurrent, severity, bug_categories } from '@/pages/edit/components/Step2/const';

const BugItemDetail = (props) => {
  const {
    bugItemDetail, dispatch, reportCommonInfo, commonId,
    getReportReview,
  } = props;
  const [detail, setDetail] = useState({});
  const [operator, setOperator] = useState(-1);

  const handleChangeImgToLeft = () => {
    let newDetail = { ...detail };
    newDetail.left--;
    newDetail.right--;
    newDetail['imgArr'] = newDetail['originArr'].slice(newDetail['left'], newDetail['right']);
    setDetail(newDetail);
  };

  const handleChangeImgToRight = () => {
    let newDetail = { ...detail };
    newDetail.left++;
    newDetail.right++;
    newDetail['imgArr'] = newDetail['originArr'].slice(newDetail['left'], newDetail['right']);
    setDetail(newDetail);
  };

  const handleOperateIcon = (type) => {
    if (operator === -1) {
      //这里的操作是点赞点踩操作
      setOperator(type);
      if (type) {
        //type===1表示点赞
        dispatch({
          type: 'editReport/goodForReport',
          payload: {
            id: detail.id,//被点赞的报告的id
            report_id: reportCommonInfo.id,
            user_id: commonId.userId,
            action: 'like',
          },
        }).then(() => {
          getReportReview();
        });
      } else {
        dispatch({
          type: 'editReport/badForReport',
          payload: {
            id: detail.id,//被点赞的报告的id
            report_id: reportCommonInfo.id,
            user_id: commonId.userId,
            action: 'dislike',
          },
        }).then(() => {
          getReportReview();
        });
      }
    } else {
      //这里的操作是取消点赞点踩操作
      setOperator(-1);
      if (type) {
        //type===1表示点赞
        dispatch({
          type: 'editReport/cancelGoodForReport',
          payload: {
            id: detail.id,//被点赞的报告的id
            report_id: reportCommonInfo.id,
          },
        }).then(_ => {
          getReportReview();
        });
      } else {
        dispatch({
          type: 'editReport/cancelBadForReport',
          payload: {
            id: detail.id,//被点赞的报告的id
            report_id: reportCommonInfo.id,
          },
        }).then(_ => {
          getReportReview();
        });
      }
    }
  };

  useEffect(() => {
    if (JSON.stringify(bugItemDetail) !== '{}') {
      let { detail } = bugItemDetail;
      detail['originArr'] = detail.img_url ? detail.img_url.split(',') : [];
      if (detail['originArr'].length >= 3) {
        //通过更改左右的标记值来更改显示的图片
        detail['left'] = 0;
        detail['right'] = 3;
        detail['imgArr'] = detail['originArr'].slice(detail['left'], detail['right']);
      } else if (detail['originArr'].length > 0 && detail['originArr'].length < 3) {
        detail['imgArr'] = detail['originArr'];
        detail['left'] = 0;
        detail['right'] = detail['originArr'].length;
      }
      setDetail(detail);
    }
  }, [bugItemDetail]);

  return (
    detail && detail.id ?
      <div className={styles.bugItemDetail}>
        <div className={styles.detailItem}>
          <Tooltip title={detail.id}>
            <span className={styles.detailLabel}>Bug标识：</span>
            {detail && detail.id || ''}
          </Tooltip>
        </div>
        <div className={styles.detailItem}>
          <Tooltip title={detail.title}>
            <span className={styles.detailLabel}>Bug题目：</span>
            {detail && detail.title || ''}
          </Tooltip>
        </div>
        <div className={`${styles.detailItem} ${styles.detailItemDesc}`}>
          <Tooltip title={detail.description}>
            <span className={styles.detailLabel}>Bug描述：</span>
            {detail && detail.description+detail.description+detail.description}
          </Tooltip>
        </div>
        <div className={styles.detailItem}><span
          className={styles.detailLabel}>创建时间：</span>{timeToString(detail.create_time_millis)}</div>
        <div className={styles.detailItem}><span className={styles.detailLabel}>页面路径：</span>{detail.bug_page}
        </div>
        <div className={styles.detailItem}><span
          className={styles.detailLabel}>漏洞分类：</span>{detail.bug_category}</div>
        <div className={styles.detailItem}><span
          className={styles.detailLabel}>严重等级：</span>{severity[detail.severity - 1]}</div>
        <div className={styles.detailItem}><span
          className={styles.detailLabel}>复现程度：</span>{recurrent[detail.recurrent - 1]}</div>
        {
          detail && detail.img_url ? (
              <div className={`${styles.detailItem} ${styles.detailItemOperator}`}><span
                className={styles.detailLabel}>Bug截图：</span>
                <div span={12} className={styles.bugImgList}>
                  {detail.left > 0 ? <LeftOutlined
                      onClick={handleChangeImgToLeft} /> :
                    <div className={styles.switchImgBtn}></div>}

                  {detail.imgArr.map(img => {
                    return <Image src={img} key={img} />;
                  })}

                  {detail.right < (detail.originArr.length - 1) ?
                    <RightOutlined onClick={handleChangeImgToRight} /> :
                    <div className={styles.switchImgBtn}></div>}

                </div>
              </div>)
            : null
        }
        <div className={`${styles.detailItem} ${styles.detailItemOperator}`}><span
          className={styles.detailLabel}>Bug评价：</span>
          {operator !== 0 ?
            <LikeOutlined className={`${styles.operatorIcon} ${operator === 1 ? styles.operatorIconActive : ''}`}
                          onClick={() => handleOperateIcon(1)} /> : null}
          {operator !== 1 ?
            <DislikeOutlined className={`${styles.operatorIcon} ${operator === 0 ? styles.operatorIconActive : ''}`}
                             onClick={() => handleOperateIcon(0)} /> : null}
        </div>
      </div> : <Spin />
  );
};

export default connect(({ allBugs, editReport }) => ({
  bugItemDetail: allBugs.bugItemDetail,
  reportCommonInfo: editReport.reportCommonInfo,
  commonId: editReport.commonId,
}))(BugItemDetail);