ADD:三级页面的搜索（未完成，存档）

src/pages/bugs/index.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Cascader, Radio ,Card ,Row,Col,Select} from 'antd';
+import { Select, Radio, Card, Row, Col, Input } from 'antd';
 import { PageContainer } from '@ant-design/pro-layout';
 import { connect } from 'umi';
+
 const { Option } = Select;
 
 import BugTreeList from './components/BugTreeList';
@@ -10,35 +11,57 @@ import BugDetailModal from './components/BugDetailModal';
 
 import {
   ApartmentOutlined,
-  MoreOutlined
+  MoreOutlined,
 } from '@ant-design/icons';
 import styles from './style.less';
 
 const AllBugs = (props) => {
-  const {dispatch,commonId,reportCommonInfo,reportReview} = props;
+  const { dispatch, commonId, reportCommonInfo, reportReview, categories } = props;
   const [status, setStatus] = useState('tree');
+  const [page2List, setPage2List] = useState([]);
+  const [page3List, setPage3List] = useState([]);
+  const [page1,setPage1] = useState('')
+  const [page2,setPage2] = useState('')
+  const [page3,setPage3] = useState('')
 
   const onChange = e => {
     setStatus(e.target.value);
   };
 
-  const handlePage1Change = val => {
-    console.log(val)
-  }
+  const handlePage1Change = (val) => {
+    setPage1(val)
+    let item = categories.find(x => x.item === val);
+    setPage2List(item.children);
+  };
+
+  const handlePage2Change = (val) => {
+    setPage2(val)
+    let item = page2List.find(x => x.item === val);
+    setPage3List(item.children);
+  };
+  const handlePage3Change = val => {
+    setPage3(val)
+  };
 
-  const getReportReview = ()=>{
+  const getReportReview = () => {
     dispatch({
       type: 'allBugs/getReportReview',
       payload: {
-        report_id:reportCommonInfo.id,
-        case_take_id:`${commonId.caseId}-${commonId.examId}`
-      }
+        report_id: reportCommonInfo.id,
+        case_take_id: `${commonId.caseId}-${commonId.examId}`,
+      },
     });
-  }
+  };
 
-  useEffect(()=>{
+  useEffect(() => {
+    if(categories&&categories.length){
+      dispatch({
+        type: 'editReport/getCategories',
+        payload: { examId: commonId.examId },
+      });
+    }
     //从edit页面进来的时候就已经在redux中缓存过了，没有的话就需要重新自己获取
-    if(reportCommonInfo&&reportCommonInfo.id){
+    if (reportCommonInfo && reportCommonInfo.id) {
       dispatch({
         type: 'editReport/getReportInfo',
         payload: {
@@ -46,59 +69,84 @@ const AllBugs = (props) => {
           worker_id: commonId.userId,
         },
       }).then(getReportReview);
-    }else{
+    } else {
       getReportReview();
     }
+  }, [dispatch]);
 
-  },[dispatch])
 
   return (
-      <Card bordered={false}>
-        <>
-          <Row style={{marginBottom:40}}>
-            <Col span={16}>
-              <Radio.Group
-                onChange={onChange}
-                value={status}
-                style={{marginRight:40}}
-              >
-                <Radio.Button value="tree"><ApartmentOutlined /> 树状</Radio.Button>
-                <Radio.Button value="single"><MoreOutlined /> 单一</Radio.Button>
-              </Radio.Group>
-
+    <Card bordered={false} className={styles.allBugs}>
+      <>
+        <Row style={{ marginBottom: 40 }}>
+          <Col span={5}>
+            <Radio.Group
+              onChange={onChange}
+              value={status}
+              style={{ marginRight: 40 }}
+            >
+              <Radio.Button value="tree"><ApartmentOutlined /> 树状</Radio.Button>
+              <Radio.Button value="single"><MoreOutlined /> 单一</Radio.Button>
+            </Radio.Group>
+          </Col>
+            <Col span={11}>
               {/*三级菜单*/}
-              <Select defaultValue="lucy" style={{ width: 120 }} onChange={handlePage1Change}>
-                <Option value="jack">Jack</Option>
-              </Select>
-
-            </Col>
-            <Col span={8}>
-              <span className={styles.bugInfoCount}>已点赞：{reportReview.thumsup}</span>
-              <span className={styles.bugInfoCount}>已点踩：{reportReview.diss}</span>
-              <span className={styles.bugInfoCount}>bug总数：{reportReview.bug}</span>
-            </Col>
-          </Row>
-          <Row>
-            <Col span={8}>
-              {status === 'tree'? <BugTreeList /> : <BugSingleList/>}
+              <div className={styles.pageSelectors}>
+                <span>三级菜单：</span>
+                <Select
+                        placeholder="请选择一级界面"
+                        onSelect={(val) => {handlePage1Change(val);
+                        }}>
+                  {categories.map((item) => {
+                    return <Select.Option value={item.item} key={item.item}>{item.item}
+                    </Select.Option>;
+                  })}
+                </Select>
+                <Select placeholder="请选择二级界面"
 
-            </Col>
-            <Col span={8}>
-              这里是树状图
-            </Col>
-            <Col span={8}>
-              <div className={styles.bugDetail}>
-                <BugDetailModal/>
+                        onSelect={(val) => {
+                          handlePage2Change(val)}}>
+                  {page2List.map((item) => {
+                    return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
+                  })}
+                </Select>
+                <Select
+                        placeholder="请选择三级界面">
+                  {page3List.map((item) => {
+                    return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
+                  })}
+                </Select>
               </div>
             </Col>
-          </Row>
-        </>
-      </Card>
+
+          <Col span={8}>
+            <span className={styles.bugInfoCount}>已点赞：{reportReview.thumsup}</span>
+            <span className={styles.bugInfoCount}>已点踩：{reportReview.diss}</span>
+            <span className={styles.bugInfoCount}>bug总数：{reportReview.bug}</span>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={8}>
+            {status === 'tree' ? <BugTreeList /> : <BugSingleList />}
+
+          </Col>
+          <Col span={8}>
+            这里是树状图
+          </Col>
+          <Col span={8}>
+            <div className={styles.bugDetail}>
+              <BugDetailModal />
+            </div>
+          </Col>
+        </Row>
+      </>
+    </Card>
   );
 };
 
-export default connect(({ allBugs,editReport }) => ({
+export default connect(({ allBugs, editReport }) => ({
   commonId: editReport.commonId,
   reportCommonInfo: editReport.reportCommonInfo,
+  categories: editReport.categories,
   reportReview: allBugs.reportReview,
 }))(AllBugs);

src/pages/bugs/style.less

@@ -1,17 +1,28 @@
 @import '~antd/es/style/themes/default.less';
 
-.card {
-  margin-bottom: 24px;
-}
+.allBugs {
+  .card {
+    margin-bottom: 24px;
+  }
 
-.bugInfoCount{
-  display: inline-block;
-  margin-right: 20px;
-}
+  .bugInfoCount{
+    display: inline-block;
+    margin-right: 20px;
+  }
 
+  .bugDetail {
+    border: 1px dashed #1890ff;
+    border-radius: 8px;
+    padding: 10px 20px;
+  }
 
-.bugDetail {
-  border: 1px dashed #1890ff;
-  border-radius: 8px;
-  padding: 10px 20px;
+  .pageSelectors{
+    :global{
+      .ant-select {
+        margin-right: 10px;
+        width: 140px;
+      }
+    }
+  }
 }
+