add：完成report common info创建

config/config.js

@@ -76,6 +76,12 @@ export default defineConfig({
               name:'edit',
               icon:'edit',
               component: './edit'
+            },
+            {
+              path: '/bugs',
+              name:'bugs',
+              icon:'BugOutlined',
+              component: './bugs'
             }
           ]
         },

config/proxy.js

@@ -8,12 +8,12 @@
 export default {
   dev: {
     '/api/': {
-      target: 'https://preview.pro.ant.design',
+      target: 'http://localhost:8090/',
       changeOrigin: true,
       pathRewrite: {
-        '^': '',
+        '^/api': '/Bug/api',
       },
-    },
+    }
   },
   test: {
     '/api/': {

src/locales/en-US/menu.js

@@ -1,3 +1,4 @@
 export default {
   'menu.edit': 'edit',
+  'menu.bugs': 'bugs',
 };

src/locales/zh-CN/menu.js

@@ -1,3 +1,4 @@
 export default {
   'menu.edit': '报告填写',
+  'menu.bugs': '所有缺陷',
 };

src/models/report.js

@@ -0,0 +1,50 @@
+import { query } from '@/services/user';
+import { getOsType } from '@/pages/edit/service';
+const ReportModel = {
+  namespace: 'report',
+  state: {
+    report: {},
+  },
+  effects: {
+    *fetchBugList(_, { call, put }) {
+      const response = yield call(query);
+      console.log(response)
+      // yield put({
+      //   type: 'save',
+      //   payload: response,
+      // });
+    },
+    *getR( { payload },{call,put}){
+      const { examId } = payload;
+      let res = yield call(getOsType,examId);
+      let osType = res?.result?.paper_type;
+      osType = JSON.parse(osType)['subTitles'][2]?.value;
+      yield put({
+        type:'saveOsType',
+        payload:osType
+      })
+    },
+  },
+  reducers: {
+    saveCurrentUser(state, action) {
+      return { ...state, currentUser: action.payload || {} };
+    },
+
+    changeNotifyCount(
+      state = {
+        currentUser: {},
+      },
+      action,
+    ) {
+      return {
+        ...state,
+        currentUser: {
+          ...state.currentUser,
+          notifyCount: action.payload.totalCount,
+          unreadCount: action.payload.unreadCount,
+        },
+      };
+    },
+  },
+};
+export default UserModel;

src/pages/bugs/_mock.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+export default {
+  'POST  /api/forms': (_, res) => {
+    res.send({
+      message: 'Ok',
+    });
+  },
+};

src/pages/bugs/components/Step1/index.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Form, Button, Divider, Input, Select } from 'antd';
+import { connect } from 'umi';
+import styles from './index.less';
+
+const { Option } = Select;
+const formItemLayout = {
+  labelCol: {
+    span: 5,
+  },
+  wrapperCol: {
+    span: 19,
+  },
+};
+const tailLayout = {
+  wrapperCol: { offset: 8, span: 16 },
+};
+
+const Step1 = (props) => {
+  const { dispatch, data } = props;
+  const [form] = Form.useForm();
+
+  if (!data) {
+    return null;
+  }
+
+  const { validateFields } = form;
+
+  const onValidateForm = async () => {
+    const values = await validateFields();
+    if (dispatch) {
+      dispatch({
+        type: 'editReport/saveStepFormData',
+        payload: values,
+      });
+      dispatch({
+        type: 'editReport/saveCurrentStep',
+        payload: 'confirm',
+      });
+    }
+  };
+
+  return (
+    <>
+      <Form
+        {...formItemLayout}
+        form={form}
+        layout="horizontal"
+        className={styles.stepForm}
+        initialValues={data}
+      >
+        <Form.Item label="报告名称" name="reportName"rules={[{ required: true, message: '请输入报告名称'}]}>
+          <Input placeholder="请输入报告名称"  />
+        </Form.Item>
+        <Form.Item label="设备品牌" name="deviceBrand" rules={[{ required: true, message: '请输入设备品牌'}]}>
+          <Input placeholder="请输入设备品牌" />
+        </Form.Item>
+        <Form.Item label="操作系统" name="os" rules={[{ required: true, message: '请输入操作系统'}]}>
+          <Select  placeholder="请选择操作系统">
+            <Select.Option value="Windows">Windows</Select.Option>
+            <Select.Option value="Linux">Linux</Select.Option>
+            <Select.Option value="MacOS">MacOS</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item {...tailLayout}>
+          <Button colSpan={12} type="primary" onClick={onValidateForm} style={{float:'right'}}>
+            下一步
+          </Button>
+        </Form.Item>
+      </Form>
+
+    </>
+  )
+    ;
+};
+
+export default connect(({ editReport }) => ({
+  data: editReport.step,
+}))(Step1);

src/pages/bugs/components/Step1/index.less

@@ -0,0 +1,78 @@
+@import '~antd/es/style/themes/default.less';
+
+.stepForm {
+  max-width: 500px;
+  margin: 40px auto 0;
+}
+
+.stepFormText {
+  margin-bottom: 24px;
+  :global {
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+  }
+}
+
+.result {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 24px 0 8px;
+}
+
+.desc {
+  padding: 0 56px;
+  color: @text-color-secondary;
+  h3 {
+    margin: 0 0 12px 0;
+    color: @text-color-secondary;
+    font-size: 16px;
+    line-height: 32px;
+  }
+  h4 {
+    margin: 0 0 4px 0;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  p {
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 22px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .desc {
+    padding: 0;
+  }
+}
+
+.information {
+  line-height: 22px;
+  :global {
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+  .label {
+    padding-right: 8px;
+    color: @heading-color;
+    text-align: right;
+    @media screen and (max-width: @screen-sm) {
+      text-align: left;
+    }
+  }
+}
+
+.money {
+  font-weight: 500;
+  font-size: 20px;
+  font-family: 'Helvetica Neue', sans-serif;
+  line-height: 14px;
+}
+
+.uppercase {
+  font-size: 12px;
+}

src/pages/bugs/components/Step2/index.jsx

@@ -0,0 +1,384 @@
+import React, { useState } from 'react';
+import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button } from 'antd';
+import { connect } from 'umi';
+import styles from './index.less';
+import {
+  ForkOutlined,
+  PlusOutlined,
+  ExclamationCircleFilled,
+  UploadOutlined,
+  EditOutlined,
+} from '@ant-design/icons';
+
+const formItemLayout = {
+  labelCol: {
+    span: 5,
+  },
+  wrapperCol: {
+    span: 19,
+  },
+};
+
+const Step2 = (props) => {
+  const [form] = Form.useForm();
+  const { data, dispatch, submitting } = props;
+  const [showTaskRecommendModal, setTaskRecommendModal] = useState(false);
+  const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
+  const [showAddBugModal, setAddTestBugModal] = useState(false);
+
+  if (!data) {
+    return null;
+  }
+
+  const { validateFields, getFieldsValue } = form;
+
+  const handleOk = (type) => {
+    setAddTestCaseModal(false);
+    // type === 'case' ? setAddTestCaseModal(false) : setAddTestBugModal(false) ;
+  };
+
+  const handleCancel = (type) => {
+    // type === 'case' ? setAddTestCaseModal(false) : setAddTestBugModal(false) ;
+  };
+
+  const testApi = ()=>{
+
+  }
+
+  const onPrev = () => {
+    if (dispatch) {
+      const values = getFieldsValue();
+      dispatch({
+        type: 'editReport/saveStepFormData',
+        payload: { ...data, ...values },
+      });
+      dispatch({
+        type: 'editReport/saveCurrentStep',
+        payload: 'info',
+      });
+    }
+  };
+
+  const onValidateForm = async () => {
+    const values = await validateFields();
+
+    if (dispatch) {
+      dispatch({
+        type: 'formAndstepForm/submitStepForm',
+        payload: { ...data, ...values },
+      });
+    }
+  };
+
+  const { payAccount, receiverAccount, receiverName, amount } = data;
+
+  return (
+    <div>
+      <Form
+        {...formItemLayout}
+        form={form}
+        layout="horizontal"
+        className={styles.stepForm}
+        hideRequiredMark
+        initialValues={data}
+      >
+        <Row gutter={10}>
+          <Col span={8}>
+            <Form.Item label="创建日期" rules={[{ required: true, message: '请输入报告名称' }]}>
+              {'2021.4.12'}
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item label="报告名称" rules={[{ required: true, message: '请输入报告名称' }]}>
+              {'测试报告名称'}
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={8}>
+            <Form.Item label="设备名称" required>
+              {'PC'}
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item label="设备品牌" required>
+              {'DELL'}
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item label="操作系统" required>
+              {'Windows'}
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+      <Card>
+        <div className={styles.reportContainer}>
+          <Row gutter={10}>
+            <Col span={8}>
+              <div>
+                <Row gutter={10} style={{ marginBottom: 10 }}>
+                  <Col span={20}><h3>测试用例列表</h3></Col>
+                  <Col span={4}>
+                    <Button size="small" onClick={() => setAddTestCaseModal(true)} >
+                      <PlusOutlined className={styles.addIcon}/>
+                      用例
+                    </Button>
+                  </Col>
+                </Row>
+              </div>
+
+              <div className={styles.testCaseList}>
+                <div className={styles.testCaseItem}>
+                  <Row gutter={10}>
+                    <Col span={21}><p>case1 case1</p></Col>
+                    <Col span={3}>
+                      <EditOutlined className={styles.testCaseEditIcon} />
+                    </Col>
+                  </Row>
+                </div>
+                <div className={styles.testCaseItem}>
+                  <Row gutter={10}>
+                    <Col span={21}><p>case2 case2</p></Col>
+                    <Col span={3}><EditOutlined /></Col>
+                  </Row>
+                </div>
+              </div>
+
+            </Col>
+
+            <Col span={16} style={{ paddingLeft: 20 }}>
+              <Row gutter={10} style={{ marginBottom: 10 }}>
+                <Col span={20}><h3>缺陷列表</h3></Col>
+                <Col span={2}>
+                  <Button size="small" onClick={() => setAddTestBugModal(true)} >
+                    <PlusOutlined className={styles.addIcon} />
+                    缺陷
+                  </Button>
+                </Col>
+                <Col span={2}>
+                  <Button size="small" onClick={() => setTaskRecommendModal(true)}>
+                    <ForkOutlined className={styles.addIcon}  />
+                    推荐
+                  </Button>
+                </Col>
+              </Row>
+              <div className={styles.testBugList}>
+                <div className={styles.testBugItem}>
+                  <Row gutter={10}>
+                    <Col span={20}>
+                      <Form
+                        {...formItemLayout}
+                        form={form}
+                        layout="horizontal"
+                        className={styles.stepForm}
+                        hideRequiredMark
+                        initialValues={data}
+                      >
+                        <Form.Item label="Bug题目">{'不支持修改邮箱类型'}</Form.Item>
+                        <Form.Item label="复现程度">{'必现'}</Form.Item>
+                        <Form.Item label="严重程度">{'一般'}</Form.Item>
+                        <Form.Item label="缺陷分类">{'用户体验'}</Form.Item>
+                      </Form>
+                    </Col>
+                    <Col span={4}>
+                      <Button size='small' style={{marginTop:10}}>查看详情</Button>
+                    </Col>
+                  </Row>
+
+                </div>
+              </div>
+            </Col>
+
+          </Row>
+        </div>
+      </Card>
+      <Modal title="添加测试用例" visible={showAddTestCaseModal} onOk={() => setAddTestCaseModal(false)}
+             onCancel={() => setAddTestCaseModal(false)} className="addModal">
+        <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复测试用例
+        <Form
+          {...formItemLayout}
+          form={form}
+          layout="horizontal"
+          className={styles.stepForm}
+          hideRequiredMark
+          initialValues={data}
+        >
+          <Form.Item
+            label="用例名称"
+            name="caseName"
+            rules={[
+              {
+                required: true,
+                message: '请输入用例名称！',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label="前置条件"
+            name="precondition"
+            rules={[
+              {
+                required: true,
+                message: '请输入前置条件！',
+              },
+            ]}
+          >
+            <Input.TextArea />
+          </Form.Item>
+          <Form.Item
+            label="测试步骤"
+            name="step"
+            rules={[
+              {
+                required: true,
+                message: '请输入测试步骤！',
+              },
+            ]}
+          >
+            <Input.TextArea />
+          </Form.Item>
+          <Form.Item
+            label="预期结果"
+            name="result"
+            rules={[
+              {
+                required: true,
+                message: '请输入预期结果！',
+              },
+            ]}
+          >
+            <Input.TextArea />
+          </Form.Item>
+        </Form>
+      </Modal>
+      <Modal title="添加用例缺陷" visible={showAddBugModal} onOk={() => setAddTestBugModal(false)}
+             onCancel={() => setAddTestBugModal(false)} className="addModal">
+        <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复Bug
+        <Form
+          labelCol={{ span: 4 }}
+          layout="horizontal"
+        >
+          <Form.Item
+            label="测试题目"
+            name="testName"
+            rules={[
+              {
+                required: true,
+                message: '请输入测试题目！',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label="前置条件"
+            name="precondition"
+            rules={[
+              {
+                required: true,
+                message: '请输入前置条件！',
+              },
+            ]}
+          >
+            <Input.TextArea />
+          </Form.Item>
+          <Form.Item
+            label="三级页面"
+            name="pages"
+            rules={[
+              {
+                required: true,
+                message: '请确保输入了三级页面',
+              },
+            ]}
+          >
+            <Row gutter={5}>
+              <Col span={8}>
+                <Select>
+                  <Select.Option value="demo">Demo1</Select.Option>
+                </Select>
+              </Col>
+              <Col span={8}>
+                <Select>
+                  <Select.Option value="demo">Demo2</Select.Option>
+                </Select>
+              </Col>
+              <Col span={8}>
+                <Select>
+                  <Select.Option value="demo">Demo3</Select.Option>
+                </Select>
+              </Col>
+            </Row>
+          </Form.Item>
+          <Form.Item
+            label="漏洞分类"
+            name="bugType"
+            rules={[
+              {
+                required: true,
+                message: '请输入漏洞分类！',
+              },
+            ]}
+          >
+            <Select>
+              <Select.Option value="demo">Demo</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item
+            label="严重等级"
+            name="service"
+            rules={[
+              {
+                required: true,
+                message: '请输入严重等级！',
+              },
+            ]}
+          >
+            <Select>
+              <Select.Option value="demo">Demo</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item
+            label="复现程度"
+            name="testName"
+            rules={[
+              {
+                required: true,
+                message: '请输入测试题目！',
+              },
+            ]}
+          >
+            <Select>
+              <Select.Option value="demo">Demo</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item
+            label="上传截图"
+            name="testName"
+          >
+            <Upload
+              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+              listType="picture"
+            >
+              <Button icon={<UploadOutlined />}>Upload</Button>
+            </Upload>
+          </Form.Item>
+        </Form>
+      </Modal>
+      <Modal title="任务推荐" visible={showTaskRecommendModal} onOk={() => setTaskRecommendModal(false)}
+             onCancel={() => setTaskRecommendModal(false)} className="addModal">
+        <div>
+          <div id="forceChart" ></div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default connect(({ editReport, loading }) => ({
+  submitting: loading.effects['editReport/submitStepForm'],
+  data: editReport.step,
+}))(Step2);

src/pages/bugs/components/Step2/index.less

@@ -0,0 +1,124 @@
+@import '~antd/es/style/themes/default.less';
+
+.stepForm {
+  margin: 10px;
+}
+
+.stepFormText {
+  margin-bottom: 24px;
+  :global {
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+  }
+}
+
+.result {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 24px 0 8px;
+}
+
+.desc {
+  padding: 0 56px;
+  color: @text-color-secondary;
+  h3 {
+    margin: 0 0 12px 0;
+    color: @text-color-secondary;
+    font-size: 16px;
+    line-height: 32px;
+  }
+  h4 {
+    margin: 0 0 4px 0;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  p {
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 22px;
+  }
+}
+.testCaseList {
+  width:100%;
+  height: 500px;
+  padding-right: 30px;
+  border-right: 1px solid #eee;
+  .testCaseItem {
+    padding:10px;
+    border-left: 5px solid #efefef;
+    box-shadow: 0 0 2px 2px #efefef;
+    margin-bottom:20px;
+    p {
+      line-height: 28px;
+      height: 28px;
+      margin: 0;
+    }
+    p:hover {
+      color: #1890ff;
+    }
+    .testCaseEditIcon:hover{
+      color: #1890ff;
+    }
+  }
+
+}
+.testBugList {
+
+  .testBugItem {
+    padding:10px;
+    box-shadow: 0 0 5px #aaa;;
+    margin-bottom:20px;
+  }
+  :global {
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+    .ant-form-item-label > label {
+      font-weight: bold;
+    }
+  }
+}
+.reportContainer {
+  height: 500px;
+}
+.addModalInfo {
+  color: #1890ff;
+  margin-top: -20px;
+}
+
+@media screen and (max-width: @screen-md) {
+  .desc {
+    padding: 0;
+  }
+}
+
+.information {
+  line-height: 22px;
+  :global {
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+  .label {
+    padding-right: 8px;
+    color: @heading-color;
+    text-align: right;
+    @media screen and (max-width: @screen-sm) {
+      text-align: left;
+    }
+  }
+}
+
+.money {
+  font-weight: 500;
+  font-size: 20px;
+  font-family: 'Helvetica Neue', sans-serif;
+  line-height: 14px;
+}
+
+.uppercase {
+  font-size: 12px;
+}

src/pages/bugs/components/Step3/index.jsx

@@ -0,0 +1,59 @@
+import { Button, Result, Descriptions, Statistic } from 'antd';
+import React from 'react';
+import { connect } from 'umi';
+import styles from './index.less';
+
+const Step3 = (props) => {
+  const { data, dispatch } = props;
+
+  if (!data) {
+    return null;
+  }
+
+  const { payAccount, receiverAccount, receiverName, amount } = data;
+
+  const onFinish = () => {
+    if (dispatch) {
+      dispatch({
+        type: 'editReport/saveCurrentStep',
+        payload: 'info',
+      });
+    }
+  };
+
+  const information = (
+    <div className={styles.information}>
+      <Descriptions column={1}>
+        <Descriptions.Item label="付款账户"> {payAccount}</Descriptions.Item>
+        <Descriptions.Item label="收款账户"> {receiverAccount}</Descriptions.Item>
+        <Descriptions.Item label="收款人姓名"> {receiverName}</Descriptions.Item>
+        <Descriptions.Item label="转账金额">
+          <Statistic value={amount} suffix="元" />
+        </Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+  const extra = (
+    <>
+      <Button type="primary" onClick={onFinish}>
+        再转一笔
+      </Button>
+      <Button>查看账单</Button>
+    </>
+  );
+  return (
+    <Result
+      status="success"
+      title="操作成功"
+      subTitle="预计两小时内到账"
+      extra={extra}
+      className={styles.result}
+    >
+      {information}
+    </Result>
+  );
+};
+
+export default connect(({ editReport }) => ({
+  data: editReport.step,
+}))(Step3);

src/pages/bugs/components/Step3/index.less

@@ -0,0 +1,71 @@
+@import '~antd/es/style/themes/default.less';
+
+.stepForm {
+  max-width: 500px;
+  margin: 40px auto 0;
+}
+
+.stepFormText {
+  margin-bottom: 24px;
+  :global {
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+  }
+}
+
+.result {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 24px 0 8px;
+}
+
+.desc {
+  padding: 0 56px;
+  color: @text-color-secondary;
+  h3 {
+    margin: 0 0 12px 0;
+    color: @text-color-secondary;
+    font-size: 16px;
+    line-height: 32px;
+  }
+  h4 {
+    margin: 0 0 4px 0;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  p {
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 22px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .desc {
+    padding: 0;
+  }
+}
+
+.information {
+  line-height: 22px;
+  :global {
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+  .label {
+    padding-right: 8px;
+    color: @heading-color;
+    text-align: right;
+    @media screen and (max-width: @screen-sm) {
+      text-align: left;
+    }
+  }
+}
+
+.uppercase {
+  font-size: 12px;
+}

src/pages/bugs/index.jsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import { Cascader, Radio ,Card ,Row,Col} from 'antd';
+import { PageContainer } from '@ant-design/pro-layout';
+import { connect } from 'umi';
+import {
+  ApartmentOutlined,
+  MoreOutlined
+} from '@ant-design/icons';
+import styles from './style.less';
+
+const options = [
+  { label: '树状', value: 'tree' },
+  { label: '单一状', value: 'single' },
+];
+const options2 = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+const BugsList = ({ current }) => {
+  const [value, setValue] = useState('tree');
+
+  const onChange = e => {
+    console.log('radio checked', e.target.value);
+    setValue(e.target.value);
+  };
+  const onChange2 = (value) => {
+    console.log(value);
+  }
+
+
+  return (
+      <Card bordered={false}>
+        <>
+          <Row style={{marginBottom:40}}>
+            <Col span={16}>
+              <Radio.Group
+                onChange={onChange}
+                value={value}
+                style={{marginRight:40}}
+              >
+                <Radio.Button value="tree"><ApartmentOutlined /> 树状</Radio.Button>
+                <Radio.Button value="single"><MoreOutlined /> 单一</Radio.Button>
+              </Radio.Group>
+
+
+              <Cascader
+                options={options2}
+                expandTrigger="hover"
+                onChange={onChange2}
+                placeholder="请选择三级菜单"
+              />
+            </Col>
+            <Col span={8}>
+              <span className={styles.bugInfoCount}>已点赞：{'10'}</span>
+              <span className={styles.bugInfoCount}>已点踩：{'10'}</span>
+              <span className={styles.bugInfoCount}>bug总数：{'10'}</span>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={8}>
+              <div className={styles.bugList}>
+                <div className={`${styles.bugListItem} ${styles.bugListItemActive}`}>
+                  <span className={styles.bugListItemNum}>Bug1:</span>邮箱校验规则不严谨
+                </div>
+                <div className={styles.bugListItem}>
+                  <span className={styles.bugListItemNum}>Bug2:</span>级联选择缺少默认值
+                </div>
+              </div>
+            </Col>
+            <Col span={8}>
+              这里是树状图
+            </Col>
+            <Col span={8}>
+              <div className={styles.bugDetail}>
+                <Row>
+                  <Col span={20}>
+
+                  </Col>
+                  <Col span={4}>热度：1</Col>
+                </Row>
+              </div>
+            </Col>
+          </Row>
+        </>
+      </Card>
+  );
+};
+
+export default connect(({ bugsList }) => ({
+  current: bugsList.current,
+}))(BugsList);

src/pages/bugs/locales/en-US.js

@@ -0,0 +1,60 @@
+export default {
+  'formandstep-form.basic.title': 'Basic form',
+  'formandstep-form.basic.description':
+    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+  'formandstep-form.email.required': 'Please enter your email!',
+  'formandstep-form.email.wrong-format': 'The email address is in the wrong format!',
+  'formandstep-form.userName.required': 'Please enter your userName!',
+  'formandstep-form.password.required': 'Please enter your password!',
+  'formandstep-form.password.twice': 'The passwords entered twice do not match!',
+  'formandstep-form.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'formandstep-form.strength.strong': 'Strength: strong',
+  'formandstep-form.strength.medium': 'Strength: medium',
+  'formandstep-form.strength.short': 'Strength: too short',
+  'formandstep-form.confirm-password.required': 'Please confirm your password!',
+  'formandstep-form.phone-number.required': 'Please enter your phone number!',
+  'formandstep-form.phone-number.wrong-format': 'Malformed phone number!',
+  'formandstep-form.verification-code.required': 'Please enter the verification code!',
+  'formandstep-form.title.required': 'Please enter a title',
+  'formandstep-form.date.required': 'Please select the start and end date',
+  'formandstep-form.goal.required': 'Please enter a description of the goal',
+  'formandstep-form.standard.required': 'Please enter a metric',
+  'formandstep-form.form.get-captcha': 'Get Captcha',
+  'formandstep-form.captcha.second': 'sec',
+  'formandstep-form.form.optional': ' (optional) ',
+  'formandstep-form.form.submit': 'Submit',
+  'formandstep-form.form.save': 'Save',
+  'formandstep-form.email.placeholder': 'Email',
+  'formandstep-form.password.placeholder': 'Password',
+  'formandstep-form.confirm-password.placeholder': 'Confirm password',
+  'formandstep-form.phone-number.placeholder': 'Phone number',
+  'formandstep-form.verification-code.placeholder': 'Verification code',
+  'formandstep-form.title.label': 'Title',
+  'formandstep-form.title.placeholder': 'Give the target a name',
+  'formandstep-form.date.label': 'Start and end date',
+  'formandstep-form.placeholder.start': 'Start date',
+  'formandstep-form.placeholder.end': 'End date',
+  'formandstep-form.goal.label': 'Goal description',
+  'formandstep-form.goal.placeholder': 'Please enter your work goals',
+  'formandstep-form.standard.label': 'Metrics',
+  'formandstep-form.standard.placeholder': 'Please enter a metric',
+  'formandstep-form.client.label': 'Client',
+  'formandstep-form.label.tooltip': 'Target service object',
+  'formandstep-form.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'formandstep-form.invites.label': 'Inviting critics',
+  'formandstep-form.invites.placeholder':
+    'Please direct @ Name / job number, you can invite up to 5 people',
+  'formandstep-form.weight.label': 'Weight',
+  'formandstep-form.weight.placeholder': 'Please enter weight',
+  'formandstep-form.public.label': 'Target disclosure',
+  'formandstep-form.label.help': 'Customers and invitees are shared by default',
+  'formandstep-form.radio.public': 'Public',
+  'formandstep-form.radio.partially-public': 'Partially public',
+  'formandstep-form.radio.private': 'Private',
+  'formandstep-form.publicUsers.placeholder': 'Open to',
+  'formandstep-form.option.A': 'Colleague A',
+  'formandstep-form.option.B': 'Colleague B',
+  'formandstep-form.option.C': 'Colleague C',
+};

src/pages/bugs/locales/zh-CN.js

@@ -0,0 +1,57 @@
+export default {
+  'formandstep-form.basic.title': '基础表单',
+  'formandstep-form.basic.description':
+    '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+  'formandstep-form.email.required': '请输入邮箱地址！',
+  'formandstep-form.email.wrong-format': '邮箱地址格式错误！',
+  'formandstep-form.userName.required': '请输入用户名!',
+  'formandstep-form.password.required': '请输入密码！',
+  'formandstep-form.password.twice': '两次输入的密码不匹配!',
+  'formandstep-form.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'formandstep-form.strength.strong': '强度：强',
+  'formandstep-form.strength.medium': '强度：中',
+  'formandstep-form.strength.short': '强度：太短',
+  'formandstep-form.confirm-password.required': '请确认密码！',
+  'formandstep-form.phone-number.required': '请输入手机号！',
+  'formandstep-form.phone-number.wrong-format': '手机号格式错误！',
+  'formandstep-form.verification-code.required': '请输入验证码！',
+  'formandstep-form.title.required': '请输入标题',
+  'formandstep-form.date.required': '请选择起止日期',
+  'formandstep-form.goal.required': '请输入目标描述',
+  'formandstep-form.standard.required': '请输入衡量标准',
+  'formandstep-form.form.get-captcha': '获取验证码',
+  'formandstep-form.captcha.second': '秒',
+  'formandstep-form.form.optional': '（选填）',
+  'formandstep-form.form.submit': '提交',
+  'formandstep-form.form.save': '保存',
+  'formandstep-form.email.placeholder': '邮箱',
+  'formandstep-form.password.placeholder': '至少6位密码，区分大小写',
+  'formandstep-form.confirm-password.placeholder': '确认密码',
+  'formandstep-form.phone-number.placeholder': '手机号',
+  'formandstep-form.verification-code.placeholder': '验证码',
+  'formandstep-form.title.label': '标题',
+  'formandstep-form.title.placeholder': '给目标起个名字',
+  'formandstep-form.date.label': '起止日期',
+  'formandstep-form.placeholder.start': '开始日期',
+  'formandstep-form.placeholder.end': '结束日期',
+  'formandstep-form.goal.label': '目标描述',
+  'formandstep-form.goal.placeholder': '请输入你的阶段性工作目标',
+  'formandstep-form.standard.label': '衡量标准',
+  'formandstep-form.standard.placeholder': '请输入衡量标准',
+  'formandstep-form.client.label': '客户',
+  'formandstep-form.label.tooltip': '目标的服务对象',
+  'formandstep-form.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+  'formandstep-form.invites.label': '邀评人',
+  'formandstep-form.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+  'formandstep-form.weight.label': '权重',
+  'formandstep-form.weight.placeholder': '请输入',
+  'formandstep-form.public.label': '目标公开',
+  'formandstep-form.label.help': '客户、邀评人默认被分享',
+  'formandstep-form.radio.public': '公开',
+  'formandstep-form.radio.partially-public': '部分公开',
+  'formandstep-form.radio.private': '不公开',
+  'formandstep-form.publicUsers.placeholder': '公开给',
+  'formandstep-form.option.A': '同事甲',
+  'formandstep-form.option.B': '同事乙',
+  'formandstep-form.option.C': '同事丙',
+};

src/pages/bugs/model.js

@@ -0,0 +1,30 @@
+import { fakeSubmitForm } from './service';
+const Model = {
+  namespace: 'bugsList',
+  state: {
+    current: 'info',
+  },
+  effects: {
+    *submitStepForm({ payload }, { call, put }) {
+      yield call(fakeSubmitForm, payload);
+      yield put({
+        type: 'saveStepFormData',
+        payload,
+      });
+      yield put({
+        type: 'saveCurrentStep',
+        payload: 'result',
+      });
+    },
+  },
+  reducers: {
+    saveCurrentStep(state, { payload }) {
+      return { ...state, current: payload };
+    },
+
+    saveStepFormData(state, { payload }) {
+      return { ...state, step: { ...state.step, ...payload } };
+    },
+  },
+};
+export default Model;

src/pages/bugs/service.js

@@ -0,0 +1,13 @@
+import request from 'umi-request';
+export async function fakeSubmitForm(params) {
+  return request('/api/forms', {
+    method: 'POST',
+    data: params,
+  });
+}
+export async function submitForm(params) {
+  return request('/api/forms', {
+    method: 'POST',
+    data: params,
+  });
+}

src/pages/bugs/style.less

@@ -0,0 +1,38 @@
+@import '~antd/es/style/themes/default.less';
+
+.card {
+  margin-bottom: 24px;
+}
+
+.bugInfoCount{
+  display: inline-block;
+  margin-right: 20px;
+}
+
+.bugList {
+  .bugListItem {
+    padding: 10px 20px;
+    border: 1px dashed #1890ff;
+    border-bottom: none;
+    border-radius: 7px;
+    max-width: 350px;
+    .bugListItemNum {
+      font-weight: bold;
+    }
+  }
+  .bugListItem:last-child{
+    border-bottom: 1px dashed #1890ff;
+  }
+  .bugListItem:hover {
+    background-color: #e6f7ff;
+  }
+  .bugListItemActive {
+    background-color: #e6f7ff;
+  }
+
+}
+.bugDetail {
+  border: 1px dashed #1890ff;
+  border-radius: 8px;
+
+}

src/pages/edit/components/Step1/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Form, Button, Divider, Input, Select } from 'antd';
 import { connect } from 'umi';
 import styles from './index.less';
@@ -17,28 +17,66 @@ const tailLayout = {
 };
 
 const Step1 = (props) => {
-  const { dispatch, data } = props;
+  const { dispatch, data, osType } = props;
   const [form] = Form.useForm();
-
+  console.log(osType)
   if (!data) {
     return null;
   }
 
   const { validateFields } = form;
 
+  useEffect(()=>{
+    dispatch({
+      type: 'editReport/getOsTypeAction',
+      payload: {examId:1945},
+    });
+  },[dispatch])
+
+  const onFinish = (values) => {
+    console.log('Success:', values);
+    let formData = new FormData();
+    formData.append("name", values.reportName);
+    formData.append("case_id", "1718");
+    formData.append("task_id", "1718");
+    formData.append("worker_id", "1");
+    formData.append("case_take_id", "1718-1718");
+    formData.append("device_model", values.deviceBrand);
+    formData.append("device_brand", values.deviceName);
+    formData.append("device_os", values.os);
+    dispatch({
+      type: 'editReport/saveReportCommonDetail',
+      payload: formData,
+    });
+
+  };
+
+  const onFinishFailed = (errorInfo) => {
+    console.log('Failed:', errorInfo);
+  };
   const onValidateForm = async () => {
-    const values = await validateFields();
-    console.log('第一步校验表单');
-    if (dispatch) {
-      dispatch({
-        type: 'editReport/saveStepFormData',
-        payload: values,
-      });
+    const isValid = await validateFields();
+    if(!isValid.outOfDate){
+      //表单验证通过，开始发送请求
+      var request = new XMLHttpRequest();
+      request.open("POST", "http://foo.com/submitform.php");
+      request.send(formData);
       dispatch({
-        type: 'editReport/saveCurrentStep',
-        payload: 'confirm',
+        type: 'editReport/getOsTypeAction',
+        payload: {examId:1945},
       });
     }
+    // if (dispatch) {
+    //   dispatch({
+    //     type: 'editReport/saveStepFormData',
+    //     payload: values,
+    //   });
+    //   dispatch({
+    //     type: 'editReport/saveCurrentStep',
+    //     payload: 'confirm',
+    //   });
+    //
+    // }
   };
 
   return (
@@ -48,27 +86,29 @@ const Step1 = (props) => {
         form={form}
         layout="horizontal"
         className={styles.stepForm}
-        hideRequiredMark
         initialValues={data}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
       >
-        <Form.Item label="报告名称" rules={[{ required: true, message: '请输入报告名称'}]}>
-          <Input placeholder="请输入报告名称" name="reportName" />
+        <Form.Item label="报告名称" name="reportName"rules={[{ required: true, message: '请输入报告名称'}]}>
+          <Input placeholder="请输入报告名称"/>
         </Form.Item>
-        <Form.Item label="设备名称" required>
-          <Input placeholder="请输入设备名称" name="deviceName" />
+        <Form.Item label="设备名称" name="deviceName" rules={[{ required: true, message: '请输入设备品牌'}]}>
+          <Input placeholder="请输入设备名称" />
         </Form.Item>
-        <Form.Item label="设备品牌" required>
-          <Input placeholder="请输入设备品牌" name="deviceBrand" />
+        <Form.Item label="设备品牌" name="deviceBrand" rules={[{ required: true, message: '请输入设备品牌'}]}>
+          <Input placeholder="请输入设备品牌" />
         </Form.Item>
-        <Form.Item label="操作系统" required>
-          <Select name="currency" placeholder="请选择操作系统">
-            <Select.Option value="Windows">Windows</Select.Option>
-            <Select.Option value="Linux">Linux</Select.Option>
-            <Select.Option value="MacOS">MacOS</Select.Option>
+        <Form.Item label="操作系统" name="os" rules={[{ required: true, message: '请输入操作系统'}]}>
+          <Select  placeholder="请选择操作系统">
+            {osType.map((option)=>{
+              return <Select.Option value={option} key={option}>{option}</Select.Option>
+            })}
           </Select>
         </Form.Item>
         <Form.Item {...tailLayout}>
-          <Button colSpan={12} type="primary" onClick={onValidateForm} style={{float:'right'}}>
+          <Button colSpan={12} type="primary" htmlType="submit"
+                  style={{float:'right'}}>
             下一步
           </Button>
         </Form.Item>
@@ -81,4 +121,5 @@ const Step1 = (props) => {
 
 export default connect(({ editReport }) => ({
   data: editReport.step,
+  osType:editReport.osType
 }))(Step1);

src/pages/edit/components/Step2/index.jsx

@@ -3,7 +3,8 @@ import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button } from 'antd
 import { connect } from 'umi';
 import styles from './index.less';
 import {
-  PlusCircleOutlined,
+  ForkOutlined,
+  PlusOutlined,
   ExclamationCircleFilled,
   UploadOutlined,
   EditOutlined,
@@ -20,7 +21,9 @@ const formItemLayout = {
 
 const Step2 = (props) => {
   const [form] = Form.useForm();
-  const { data, dispatch, submitting } = props;
+  const { data, dispatch, reportCommonInfo } = props;
+  console.log(reportCommonInfo,props)
+  const [showTaskRecommendModal, setTaskRecommendModal] = useState(false);
   const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
   const [showAddBugModal, setAddTestBugModal] = useState(false);
 
@@ -68,6 +71,7 @@ const Step2 = (props) => {
 
   return (
     <div>
+      dsdd
       <Form
         {...formItemLayout}
         form={form}
@@ -84,29 +88,28 @@ const Step2 = (props) => {
           </Col>
           <Col span={8}>
             <Form.Item label="报告名称" rules={[{ required: true, message: '请输入报告名称' }]}>
-              {'测试报告名称'}
+              {/*{reportCommonInfo.name}*/}
             </Form.Item>
           </Col>
         </Row>
         <Row>
           <Col span={8}>
             <Form.Item label="设备名称" required>
-              {'PC'}
+              {/*{reportCommonInfo.device_brand}*/}
             </Form.Item>
           </Col>
           <Col span={8}>
             <Form.Item label="设备品牌" required>
-              {'DELL'}
+              {/*{reportCommonInfo.device_model}*/}
             </Form.Item>
           </Col>
           <Col span={8}>
             <Form.Item label="操作系统" required>
-              {'Windows'}
+              {/*{reportCommonInfo.device_os}*/}
             </Form.Item>
           </Col>
         </Row>
       </Form>
-
       <Card>
         <div className={styles.reportContainer}>
           <Row gutter={10}>
@@ -115,12 +118,10 @@ const Step2 = (props) => {
                 <Row gutter={10} style={{ marginBottom: 10 }}>
                   <Col span={20}><h3>测试用例列表</h3></Col>
                   <Col span={4}>
-                    {/*<Button type="primary" size="small" onClick={() => {*/}
-                    {/*  setAddTestCaseModal(true);}}>*/}
-                    {/*  添加*/}
-                    {/*  添加*/}
-                    {/*</Button>*/}
-                    <PlusCircleOutlined className={styles.addIcon} onClick={() => setAddTestCaseModal(true)} />
+                    <Button size="small" onClick={() => setAddTestCaseModal(true)} >
+                      <PlusOutlined className={styles.addIcon}/>
+                      用例
+                    </Button>
                   </Col>
                 </Row>
               </div>
@@ -146,8 +147,19 @@ const Step2 = (props) => {
 
             <Col span={16} style={{ paddingLeft: 20 }}>
               <Row gutter={10} style={{ marginBottom: 10 }}>
-                <Col span={22}><h3>缺陷列表</h3></Col>
-                <Col span={2}><PlusCircleOutlined className={styles.addIcon} onClick={() => setAddTestBugModal(true)} /></Col>
+                <Col span={20}><h3>缺陷列表</h3></Col>
+                <Col span={2}>
+                  <Button size="small" onClick={() => setAddTestBugModal(true)} >
+                    <PlusOutlined className={styles.addIcon} />
+                    缺陷
+                  </Button>
+                </Col>
+                <Col span={2}>
+                  <Button size="small" onClick={() => setTaskRecommendModal(true)}>
+                    <ForkOutlined className={styles.addIcon}  />
+                    推荐
+                  </Button>
+                </Col>
               </Row>
               <div className={styles.testBugList}>
                 <div className={styles.testBugItem}>
@@ -354,11 +366,17 @@ const Step2 = (props) => {
           </Form.Item>
         </Form>
       </Modal>
+      <Modal title="任务推荐" visible={showTaskRecommendModal} onOk={() => setTaskRecommendModal(false)}
+             onCancel={() => setTaskRecommendModal(false)} className="addModal">
+        <div>
+          <div id="forceChart" ></div>
+        </div>
+      </Modal>
     </div>
   );
 };
 
 export default connect(({ editReport, loading }) => ({
   submitting: loading.effects['editReport/submitStepForm'],
-  data: editReport.step,
+  reportCommonInfo: editReport.reportCommonInfo,
 }))(Step2);

src/pages/edit/components/Step2/index.less

@@ -83,12 +83,6 @@
 }
 .reportContainer {
   height: 500px;
-  .addIcon {
-    :hover {
-      font-size: larger;
-    }
-  }
-
 }
 .addModalInfo {
   color: #1890ff;

src/pages/edit/index.jsx

@@ -4,24 +4,17 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { connect } from 'umi';
 import Step1 from './components/Step1';
 import Step2 from './components/Step2';
-import Step3 from './components/Step3';
 import styles from './style.less';
 const { Step } = Steps;
 
 const getCurrentStepAndComponent = (current) => {
   switch (current) {
-    case 'confirm':
+    case 'detail':
       return {
         step: 1,
         component: <Step2 />,
       };
 
-    case 'result':
-      return {
-        step: 2,
-        component: <Step3 />,
-      };
-
     case 'info':
     default:
       return {
@@ -39,13 +32,13 @@ const EditReport = ({ current }) => {
     setCurrentStep(step);
     setStepComponent(component);
   }, [current]);
+  console.log(stepComponent)
   return (
       <Card bordered={false}>
         <>
           <Steps current={currentStep} className={styles.steps}>
             <Step title="基础信息" />
             <Step title="报告详情" />
-            <Step title="完成" />
           </Steps>
           {stepComponent}
         </>

src/pages/edit/model.js

@@ -1,17 +1,24 @@
-import { fakeSubmitForm } from './service';
+import {
+  fakeSubmitForm,
+  getOsType,
+  createReportCommon,
+} from './service';
+
 const Model = {
   namespace: 'editReport',
   state: {
     current: 'info',
+    osType: [],
     step: {
       payAccount: 'ant-design@alipay.com',
       receiverAccount: 'test@example.com',
       receiverName: 'Alex',
       amount: '500',
     },
+    reportCommonInfo: {},
   },
   effects: {
-    *submitStepForm({ payload }, { call, put }) {
+    * submitStepForm({ payload }, { call, put }) {
       yield call(fakeSubmitForm, payload);
       yield put({
         type: 'saveStepFormData',
@@ -19,7 +26,33 @@ const Model = {
       });
       yield put({
         type: 'saveCurrentStep',
-        payload: 'result',
+        payload: 'detail',
+      });
+    },
+    * getOsTypeAction({ payload }, { call, put }) {
+      const { examId } = payload;
+      let res = yield call(getOsType, examId);
+      let osType = res?.result?.paper_type;
+      osType = JSON.parse(osType)['subTitles'][2]?.value;
+      yield put({
+        type: 'saveOsType',
+        payload: osType,
+      });
+    },
+    * saveReportCommonDetail({ payload }, { call, put }) {
+      let res = yield call(createReportCommon, payload);
+      //res拿到报告id,组装生成report对象
+      let report = { id: res.id };
+      for (let key of payload.keys()) {
+        report[key] = payload.get(key)
+      }
+      yield put({
+        type: 'saveReportCommonInfo',
+        payload: report,
+      });
+      yield put({
+        type: 'saveCurrentStep',
+        payload: 'detail',
       });
     },
   },
@@ -27,10 +60,15 @@ const Model = {
     saveCurrentStep(state, { payload }) {
       return { ...state, current: payload };
     },
-
     saveStepFormData(state, { payload }) {
       return { ...state, step: { ...state.step, ...payload } };
     },
+    saveOsType(state, { payload }) {
+      return { ...state, osType: payload };
+    },
+    saveReportCommonInfo(state, { payload }) {
+      return { ...state, reportCommonInfo: payload };
+    },
   },
 };
 export default Model;

src/pages/edit/service.js

@@ -5,3 +5,19 @@ export async function fakeSubmitForm(params) {
     data: params,
   });
 }
+//todo:获取操作系统的类型
+export async function getOsType(id) {
+  return request('/api/extra/getExam', {
+    method: 'get',
+    params:{
+      id
+    }
+  });
+}
+//todo:点击下一步，提交测试报告的基础信息
+export async function createReportCommon(data){
+  return request('/api/extra/uploadReport',{
+    method:'post',
+    data
+  })
+}

src/pages/form/basic-form/index.jsx

@@ -48,6 +48,7 @@ const BasicForm = (props) => {
   };
 
   const onFinish = (values) => {
+    console.log(values)
     const { dispatch } = props;
     dispatch({
       type: 'formAndbasicForm/submitRegularForm',