crowd-service-frontend/src/pages/edit/components/Step2/index.jsx

import React, { useEffect, useRef, useState } from 'react';
import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button, message, Tag, Badge } from 'antd';
import { connect } from 'umi';
import styles from './index.less';
import {
  ForkOutlined,
  PlusOutlined,
  ExclamationCircleFilled,
  UploadOutlined,
  EditOutlined,
  EyeOutlined,
} from '@ant-design/icons';
import * as echarts from 'echarts';
import { recurrent, severity, bug_categories } from './const';
import { timeToString,getBase64 } from '../../utils';

import BugGuideTree from '../BugGuideTree';

const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 19,
  },
};
const modalFormItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

const uploadButton = (
  <div>
    <PlusOutlined />
    <div style={{ marginTop: 8 }}>点击上传</div>
  </div>
);

const Step2 = (props) => {
  const [reportForm] = Form.useForm();
  const [addCaseForm] = Form.useForm();
  const [addBugForm] = Form.useForm();
  const [editReportForm] = Form.useForm();

  const {
    dispatch, reportCommonInfo, osType,
    testCaseList, caseBugList, categories, pathInfo,
  } = props;
  const [showTaskRecommendModal, setTaskRecommendModal] = useState(false);
  const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
  const [showAddBugModal, setAddTestBugModal] = useState(false);
  const [showEditReportModal, setEditReportModal] = useState(false);
  const currentTestCaseRef = useRef({});
  const [isAddCaseStatus, setIsAddCaseStatus] = useState(true);
  // const [currActiveTestCase, setCurrActiveTestCase] = useState({});

  //上传图片廊需要的字段
  const [fileList,setFileList] = useState([]);
  const [previewTitle,setPreviewTitle] = useState('');
  const [previewImage,setPreviewImage] = useState('');
  const [previewVisible,setPreviewVisible] = useState(false);

  const [page2List, setPage2List] = useState([]);
  const [page3List, setPage3List] = useState([]);

  const handleEditReportInfo = () => {
    editReportForm.validateFields().then((res)=> {
      let formData = new FormData();
      formData.append('name', res.name);
      formData.append('report_id', reportCommonInfo.id);
      formData.append('worker_id', '2');
      formData.append('case_take_id', '1718-1718');
      formData.append('device_model', res.device_model);
      formData.append('device_brand', res.device_brand);
      formData.append('device_os', res.device_os);
      dispatch({
        type: 'editReport/updateReportCommonDetail',
        payload: { formData }
      })
    })
    setEditReportModal(false)
  };

  const handleAddOrEditTestCase = () => {
    addCaseForm.validateFields().then((res) => {
      let formData = new FormData();
      // formData.append("id", values.reportName);
      formData.append('report_id', reportCommonInfo.id);
      formData.append('name', res.name);
      formData.append('front', res.front);
      formData.append('behind', res.behind);
      formData.append('description', res.description);
      if (!isAddCaseStatus) {
        //处理编辑用例
        formData.append('id', currentTestCaseRef.current.id);
        dispatch({
          type: 'editReport/updateTestCase',
          payload: {
            formData,
            report_id: reportCommonInfo.id,
          },
        }).then((res) => {
          if (res && res.status === 200) {
            message.success('修改成功！');
          }
        });
      } else {
        //处理添加用例
        dispatch({
          type: 'editReport/createTestCase',
          payload: {
            formData,
            report_id: reportCommonInfo.id,
          },
        }).then(({ res, testCaseList}) => {
          if (res && res.id) {
            message.success('添加成功！');
            //添加成功后要把currCase指向新的
            const currCase = testCaseList.filter(item=>
              item.id === res.id
            )
            handleClickTestCase(currCase[0]);
          }
        });
      }
      setAddTestCaseModal(false);
    });
  };

  // useEffect(()=>{
  //   const
  //   const currCase = testCaseList.filter(item=>
  //     item.id === res.id
  //   )
  //   console.log(currCase);
  //   currentTestCaseRef.current = currCase;
  // },[testCaseList])

  const handleAddBug = () => {
    addBugForm.validateFields().then((res) => {
      let formData = new FormData();
      formData.append('report_id', reportCommonInfo.id);
      formData.append('title', res.title);
      formData.append('description', res.description);
      formData.append('bug_category', res.bug_category);
      formData.append('severity', res.severity);
      formData.append('recurrent', res.recurrent);
      formData.append('parent', null);
      formData.append('useCase', currentTestCaseRef.current.id);
      formData.append('case_id', '1718');
      formData.append('case_take_id', '1718-1718');
      formData.append('worker_id', '2');
      formData.append('page', `${res.page1}-${res.page2}-${res.page3}`);
      if(fileList.length){
        let str = '';
        fileList.map(item=>{
          str += (item.response + ',')
        })
        str = str.substring(0,str.length-1);
        formData.append('img_url', str);
      }
      //新建bug
      dispatch({
        type: 'editReport/createCaseBug',
        payload: {
          formData,
          useCase: currentTestCaseRef.current.id,
        },
      }).then(res => {
        setAddTestBugModal(false);
      });
    });
  };

  const handleClickTestCase = (caseItem) => {
    // setCurrActiveTestCase(caseItem);
    currentTestCaseRef.current = caseItem;
    dispatch({
      type: 'editReport/getCaseBugList',
      payload: caseItem.id,
    });
  };

  const handleEditTestCase = (item) => {
    setIsAddCaseStatus(false);
    currentTestCaseRef.current = item;
    addCaseForm.setFieldsValue(currentTestCaseRef.current);
    setAddTestCaseModal(true);
  };

  const handleClickAddCase = () => {
    addCaseForm.resetFields();
    setAddTestCaseModal(true);
  };

  const handleClickAddBug = () => {
    //current目前只在点击edit cease的时候会有用
    addBugForm.resetFields();
    setAddTestBugModal(true);
  };

  const handleClickRecommendBtn = () => {
    dispatch({
      type: 'editReport/getPathInfo',
      payload: {
        case_take_id: '1718-1718',
        report_id: reportCommonInfo.id,
      },
    });
    dispatch({
      type: 'editReport/getBugRecommendPath',
      payload: {
        case_take_id: '1718-1718',
        report_id: reportCommonInfo.id,
      },
    });
    dispatch({
      type: 'editReport/getBugRecommendList',
      payload: {
        case_take_id: '1718-1718',
        report_id: reportCommonInfo.id,
      },
    });
    setTaskRecommendModal(true);
  };

  const handleSelectPage1 = (val) => {
    let item = categories.find(x => x.item === val);
    setPage2List(item.children);
  };

  const handleSelectPage2 = (val) => {
    let item = page2List.find(x => x.item === val);
    setPage3List(item.children);
  };

  const handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImage(file.url || file.preview);
    setPreviewVisible(true);
    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1))
  };

  const handleCancel = () => setPreviewVisible(false);

  const handleChange = ({ fileList }) => {
    setFileList(fileList);
  };

  useEffect(() => {
    //判断是否已经有报告
    dispatch({
      type: 'editReport/getReportInfo',
      payload: {
        case_take_id: '1718-1718',
        worker_id: '2',
      },
    }).then((res) => {
      // console.log(res)
      // console.log(reportCommonInfo)
      //有报告，获取对应信息。没有就直接转去了第一步
      dispatch({
        type: 'editReport/getTestCaseList',
        payload: { report_id: reportCommonInfo.id },
      }).then((res) => {
        if (res && res.length) {
          currentTestCaseRef.current = res[0];
          dispatch({
            type: 'editReport/getCaseBugList',
            payload: currentTestCaseRef.current.id,
          });
        }
      });
      dispatch({
        type: 'editReport/getCategories',
        payload: { examId: 1718 },
      });
    });
  }, [dispatch, reportCommonInfo.id]);

  return (
    <div id="main">
      <Row gutter={10}>
        <Col span={23}>
          <Form
            {...formItemLayout}
            form={reportForm}
            className={styles.stepForm}
            hideRequiredMark
          >
            <Row gutter={10}>
              <Col span={5}>
                <Form.Item label="创建日期" rules={[{ required: true, message: '请输入报告名称' }]}>
                  {timeToString(reportCommonInfo.create_time_millis)}
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item label="报告名称" rules={[{ required: true, message: '请输入报告名称' }]}>
                  {reportCommonInfo.name}
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item label="设备名称" required>
                  {reportCommonInfo.device_brand}
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item label="设备品牌" required>
                  {reportCommonInfo.device_model}
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item label="操作系统" required>
                  {reportCommonInfo.device_os}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Col>
        <Col span={1}>
          <EditOutlined className={styles.editReportInfoIcon}
                        onClick={() => setEditReportModal(true)}
          />
        </Col>
      </Row>

      <Card>
        <div className={styles.reportContainer}>
          <Row gutter={10}>
            <Col span={8}>

              <div gutter={10} className={styles.testCaseTitle}>
                <h3>测试用例列表</h3>

                <Button size="small" type="primary"
                        onClick={() => {
                          handleClickAddCase();
                        }}>
                  <PlusOutlined className={styles.addIcon} />
                  用例
                </Button>
              </div>


              <div className={styles.testCaseList}>
                {testCaseList && testCaseList.length ? testCaseList.map((item) => {
                  return (
                    <div
                      className={`${styles.testCaseItem} ${currentTestCaseRef.current.id === item.id ? styles.activeCase : ''}`}
                      key={item.id}
                      onClick={() => {
                        handleClickTestCase(item);
                      }}>
                      <Row gutter={10}>
                        <Col span={6}>
                          {<span
                            className={styles.testCaseItemNo}>{`NO.${((item.id).substring((item.id.length) - 6)).toUpperCase()}`}</span>}
                          {/*<Badge color="#2db7f5"*/}
                          {/*       text={} />*/}
                        </Col>
                        <Col span={15}>
                          <span>{item.name}</span>
                        </Col>
                        <Col span={3}>
                          <EditOutlined className={styles.editTestBug}
                                        onClick={() => handleEditTestCase(item)} />
                        </Col>
                      </Row>
                    </div>);
                }) : <div>快来创建你的第一个测试用例吧~</div>}
              </div>
            </Col>

            <Col span={16}>
              <div gutter={10} className={styles.testBugTitle}>
                <h3>缺陷列表</h3>
                <div>
                  <Button size="small" type="primary"
                          disabled={JSON.stringify(currentTestCaseRef.current) === '{}'}
                          onClick={() => handleClickAddBug()}>
                    <PlusOutlined className={styles.addIcon} />
                    缺陷
                  </Button>

                  <Button size="small"
                          className={styles.recommendBtn}
                          disabled={JSON.stringify(currentTestCaseRef.current) === '{}'}
                          onClick={() => handleClickRecommendBtn()}>
                    <ForkOutlined className={styles.addIcon} />
                    推荐
                  </Button>
                </div>

              </div>
              <div className={styles.testBugList}>
                {caseBugList && caseBugList.length ? caseBugList.map((item) => {
                  return (
                    <div className={styles.testBugItem} key={item.detail.id}>
                      <Row gutter={10}>
                        <Col span={12}>
                          <div>
                            <div className={styles.testBugItemTitleBlock}>
                              <span className={styles.testBugItemTitle}>标题：</span>
                              <span className={styles.testBugItemTitleDetail}>{item.detail.title}</span>
                              <Tag color="cyan">{recurrent[item.detail.recurrent -1]}</Tag>
                              <Tag color="red">{severity[item.detail.severity -1]}</Tag>
                              <Tag color="geekblue">{item.detail.bug_category}</Tag>
                            </div>
                            <div className={styles.testBugItemTitleBlock}>
                              <span className={styles.testBugItemTitle}>路径：</span>
                              {item.detail.bug_page}
                            </div>
                            <div className={styles.testBugItemTitleBlock}>
                              <span className={styles.testBugItemTitle}>描述：</span>
                              {item.detail.description}
                            </div>
                          </div>
                        </Col>
                        {item.detail.img_url ?
                          <Col span={12} className={styles.bugImgList}>
                            {item.detail.img_url.split(',').map(img=>{
                              return <img src={img} alt='bug_img' key={img}/>
                            })}
                          </Col> : null}
                      </Row>

                    </div>
                  );
                }) : <div>当前用例暂无提交记录，快去创建第一个BUG吧~</div>}
              </div>
            </Col>
          </Row>
        </div>
      </Card>
      <Modal title={isAddCaseStatus ? '添加测试用例' : '编辑测试用例'} width={720}
             visible={showAddTestCaseModal}
             forceRender={true}
             className="addModal"
             footer={[
               <Button key='submit' type="primary" htmlType="submit" onClick={handleAddOrEditTestCase}>确定</Button>,
               <Button key='cancel' htmlType="button" style={{ marginLeft: '10px' }}
                       onClick={() => {
                         setAddTestCaseModal(false);
                       }}>取消</Button>]}
             onCancel={() => {
               setAddTestCaseModal(false);
             }}
      >
        <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复测试用例
        <Form
          {...modalFormItemLayout}
          form={addCaseForm}
          layout="horizontal"
          className={styles.stepForm}
        >
          <Form.Item
            label="用例名称"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入用例名称！',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="前置条件"
            name="front"
            rules={[
              {
                required: true,
                message: '请输入前置条件！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 3, maxRows: 999 }} />
          </Form.Item>
          <Form.Item
            label="测试步骤"
            name="behind"
            rules={[
              {
                required: true,
                message: '请输入测试步骤！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 3, maxRows: 999 }} />
          </Form.Item>
          <Form.Item
            label="预期结果"
            name="description"
            rules={[
              {
                required: true,
                message: '请输入预期结果！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 3, maxRows: 999 }} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal title="添加用例缺陷" visible={showAddBugModal} width={720}
             forceRender={true}
             footer={[
               <Button key='submit' type="primary" htmlType="submit" onClick={handleAddBug}>确定</Button>,
               <Button key='cancel' htmlType="button" style={{ marginLeft: '10px' }}
                       onClick={() => {
                         setAddTestBugModal(false);
                       }}>取消</Button>]}
             onCancel={() => {
               setAddTestBugModal(false);
             }}
             className={styles.bugForm}
      >
        <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复Bug
        <Form
          form={addBugForm}
          {...modalFormItemLayout}
          layout="horizontal"
          className={styles.stepForm}
        >
          <Form.Item
            label="测试标题"
            name="title"
            rules={[
              {
                required: true,
                message: '请输入测试标题！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 1, maxRows: 999 }} />
          </Form.Item>
          <Form.Item
            label="题目描述"
            name="description"
            rules={[
              {
                required: true,
                message: '请输入题目描述！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 2, maxRows: 999 }} />
          </Form.Item>
          <Form.Item
            label="三级页面"
            name="page3"
            rules={[
              {
                required: true,
                message: '',
              },
            ]}
          >
            <Row gutter={5} className={styles.pageSelect}>
              <Col span={8}>
                <Form.Item
                  name="page1"
                  rules={[
                    {
                      required: true,
                      message: '请输入一级页面',
                    },
                  ]}
                >
                  <Select onSelect={(val) => {
                    handleSelectPage1(val);
                  }}>
                    {categories.map((item) => {
                      return <Select.Option value={item.item} key={item.item}>{item.item}
                      </Select.Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name="page2"
                  rules={[
                    {
                      required: true,
                      message: '请输入二级页面',
                    },
                  ]}
                >
                  <Select disabled={!page2List.length}
                          onSelect={(val) => {
                            handleSelectPage2(val);
                          }}>
                    {page2List.map((item) => {
                      return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name="page3"
                  rules={[
                    {
                      required: true,
                      message: '请输入三级页面',
                    },
                  ]}
                >
                  <Select disabled={!page3List.length}>
                    {page3List.map((item) => {
                      return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item
            label="漏洞分类"
            name="bug_category"
            rules={[
              {
                required: true,
                message: '请选择漏洞分类！',
              },
            ]}
          >
            <Select>
              {bug_categories.map((item) => {
                return <Select.Option value={item} key={item}>{item}</Select.Option>;
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="严重等级"
            name="severity"
            rules={[
              {
                required: true,
                message: '请选择严重等级！',
              },
            ]}
          >
            <Select>
              {severity.map((item) => {
                return <Select.Option value={item} key={item}>{item}</Select.Option>;
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="复现程度"
            name="recurrent"
            rules={[
              {
                required: true,
                message: '请选择复现程度！',
              },
            ]}
          >
            <Select>
              {recurrent.map((item) => {
                return <Select.Option value={item} key={item}>{item}</Select.Option>;
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="上传截图"
            name="testName"
          >
            <Upload
              action='/api/upload/image'
              data={file => ({ // data里存放的是接口的请求参数
                file,
                caseId:currentTestCaseRef.current.id,
                work_id:'2'
              })}
              listType="picture-card"
              fileList={fileList}
              onPreview={handlePreview}
              onChange={handleChange}
            >
              {uploadButton}
            </Upload>
            <Modal
              visible={previewVisible}
              title={previewTitle}
              footer={null}
              onCancel={()=>handleCancel()}
            >
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
          </Form.Item>
        </Form>
      </Modal>
      <Modal title="修改报告基础信息" visible={showEditReportModal}
             footer={[
               <Button key='submit' type="primary" htmlType="submit"
                       onClick={handleEditReportInfo}>确定</Button>,
               <Button key='cancel' htmlType="button" style={{ marginLeft: '10px' }}
                       onClick={() => {
                         setEditReportModal(false);
                       }}>取消</Button>]}
             onCancel={() => {
               setEditReportModal(false);
             }}>
        <div>
          <Form
            {...modalFormItemLayout}
            form={editReportForm}
            layout="horizontal"
            initialValues={reportCommonInfo}
          >
            <Form.Item label="报告名称" name="name" rules={[{ required: true, message: '请输入报告名称' }]}>
              <Input placeholder="请输入报告名称" />
            </Form.Item>
            <Form.Item label="设备名称" name="device_model" rules={[{ required: true, message: '请输入设备品牌' }]}>
              <Input placeholder="请输入设备名称" />
            </Form.Item>
            <Form.Item label="设备品牌" name="device_brand" rules={[{ required: true, message: '请输入设备品牌' }]}>
              <Input placeholder="请输入设备品牌" />
            </Form.Item>
            <Form.Item label="操作系统" name="device_os" rules={[{ required: true, message: '请输入操作系统' }]}>
              <Select placeholder="请选择操作系统">
                {osType.map((option) => {
                  return <Select.Option value={option} key={option}>{option}</Select.Option>;
                })}
              </Select>
            </Form.Item>
          </Form>
        </div>
      </Modal>
      <Modal title="任务推荐" visible={showTaskRecommendModal}
             destroyOnClose width={1000}
             onOk={() => setTaskRecommendModal(false)}
             onCancel={() => {
               setTaskRecommendModal(false);
             }
             }
             className="addModal">
        <div>
          <BugGuideTree />
        </div>
      </Modal>
    </div>
  );
};

export default connect(({ editReport, loading }) => ({
  submitting: loading.effects['editReport/submitStepForm'],
  reportCommonInfo: editReport.reportCommonInfo,
  testCaseList: editReport.testCaseList,
  caseBugList: editReport.caseBugList,
  categories: editReport.categories,
  pathInfo: editReport.pathInfo,
  osType: editReport.osType,
}))(Step2);