debug

src/components/AddressList/index.jsx

 import React from 'react';
 import './index.less'
+import Loading from '../Loading'
+import {WhiteSpace} from "antd-mobile";
 
 const Index = (props) => {
     const {data, onCLick} = props;
     return (
         <div className="address-box">
             {data && data.length > 0 && data.map((item, index) => item.NAME && (
-                <div key={index} onClick={() => onCLick(item.DEPTID)} className="address-item">
-                    {item.NAME || ''}
-                    <img src="/img/rarrow.png" alt="" className='icon18'/>
+                <div key={index}>
+                    <div onClick={() => onCLick(item.DEPTID)} className="address-item">
+                        {item.NAME || ''}
+                        <img src="/img/rarrow.png" alt="" className={`icon18 ${item.checked ? 'icon-checked' : 'icon-unchecked'}`}/>
+                    </div>
+                    { item.checked && item.loading && <div className="address-loading"><WhiteSpace/><Loading/><WhiteSpace/></div>}
+                    { !item.loading && item.checked && item.children && (item.children.length > 0 ? (
+                        <div className="address-item-box">
+                            {item.children.map((child, index2) => (
+                                <div className="address-item" key={index2}>
+                                    <div>
+                                        {/*<img alt="" src="" className=""/>*/}
+                                        {child.XM || ''}
+                                    </div>
+                                    <div className="address-user">
+                                        <img alt="" className='smallIco mr-5' src='/img/tel.png' />
+                                        <a className="address-phone"
+                                           // href={item.YDDH  ? `tel:${item.YDDH}` : null}
+                                        >{child.YDDH || '无'}</a>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ): <div className="address-empty">暂无数据</div>)}
+
                 </div>
             ))}
         </div>

src/components/AddressList/index.less

@@ -23,3 +23,25 @@
   padding: 10px;
   border-bottom: 1px solid rgba(239, 239, 239, 1);
 }
+
+.address-loading{
+  background: #ffffff;
+  border-bottom: 1px solid rgba(239, 239, 239, 1);
+}
+.icon-unchecked{
+  transition: transform 350ms;
+}
+.icon-checked{
+  transform: rotate(90deg);
+  transition: transform 350ms;
+}
+.address-item-box .address-item{
+  padding: 15px 40px;
+}
+.address-empty{
+  display: flex;
+  justify-content: center;
+  padding: 15px;
+  margin-bottom: 1px;
+  background: #ffffff;
+}

src/components/Loading/index.less

@@ -19,20 +19,21 @@
     background: rgba(35,35,35,0.13);
   }
   50%{
-    height: 40px;
-    margin: -15px 0;
+    height: 35px;
+    margin: -8px 0;
     background: rgba(35,35,35,0.1);
   }
 }
 .loading span:nth-child(2){
-  -webkit-animation-delay:0.2s;
+  -webkit-animation-delay: 100ms;
 }
 .loading span:nth-child(3){
-  -webkit-animation-delay:0.4s;
+  -webkit-animation-delay: 280ms
 }
 .loading span:nth-child(4){
-  -webkit-animation-delay:0.6s;
+  -webkit-animation-delay: 440ms
 }
 .loading span:nth-child(5){
-  -webkit-animation-delay:0.8s;
+  -webkit-animation-delay: 600ms
 }
+

src/pages/Communicate/AddressBook.jsx

@@ -32,8 +32,27 @@ const AddressBook = (props) => {
         getData()
     }, []);
 
-    const treeClick = (val) => {
-        props.history.push(`/bord/address/${val}`)
+    // const [userLoading, setUserLoading] = useState(false)
+    const treeClick = (DEPTID) => {
+        const newData = [...data];
+        const index = newData.findIndex(item => item.DEPTID === DEPTID);
+        const checked = newData[index].checked ? newData[index] : false;
+        newData[index] = {...newData[index], loading: true, children: [], checked: !checked};
+        setData(newData)
+        !checked && getUser(DEPTID)
+    };
+    const getUser = (DEPTID) => {
+        axiosRequest({
+            method: 'post',
+            url: `/idtAppServiceV6/oApp/getSearchAddressBook?deptId=${DEPTID}`,
+        }).then(res => {
+            const child = res.userList && res.userList.length > 0 ? res.userList : [];
+            const newData = [...data];
+            const index = newData.findIndex(item => item.DEPTID === DEPTID);
+            newData[index] = {...newData[index], loading: false, children: child, checked: true};
+            setData(newData)
+            // setData()
+        });
     };
     return (
         <Document title="通讯录">

src/pages/Communicate/Communicate.jsx

-import React, {useState, useEffect} from 'react';
-import {WhiteSpace} from 'antd-mobile'
-import AddressUser from '../../components/AddressList/AddressUser';
-import axiosRequest from '../../utils/request';
-import Skeleton from '../../components/Skeleton'
-import Document from 'react-document-title'
-import Empty from '../Empty'
-
-
-const Communicate = (props) => {
-    const [start, setStart] = useState(true);
-    const [loading, setLoading] = useState(false);
-    const [data, setData] = useState([]);
-    const [title, setTitle] = useState([])
-
-    const getData = (id) => {
-        setLoading(true);
-        axiosRequest({
-            method: 'post',
-            url: `/idtAppServiceV6/oApp/getSearchAddressBook?deptId=${id}`,
-        }).then(res => {
-            setLoading(false);
-            setStart(false)
-            setData(res.userList)
-            setTitle(res.deptList)
-        });
-    };
-    useEffect(() => {
-        const {id} = props.match.params;
-        getData(id)
-    }, []);
-
-
-    return (
-        <Document title="通讯录">
-            <div>
-                <div className='breadBox'>
-                    {title && title.length > 0 ? title[0].depts : ''}
-                </div>
-                {loading ? <div><WhiteSpace/><Skeleton/></div> : (
-                    <div className='adMainBox'>
-                        { data && !start && (data.length > 0 ?  <AddressUser data={data}/> : <Empty/>)}
-                    </div>
-                )}
-            </div>
-
-        </Document>
-    );
-};
-
-export default Communicate;
-

src/pages/EventProcessing/Process.jsx

@@ -238,7 +238,6 @@ const Process = (props) => {
                         <div id="event-option"/>
                         <WhiteSpace/>
                         {basicLoading ? <Option onChange={optionChange}/> : <Skeleton/>}
-
                     </WingBlank>
                 </div>
                 <div className="event-footer">

src/router.js

@@ -7,7 +7,6 @@ import Backlog from './pages/Backlog/Backlog'
 import Work from './pages/Work/Work'
 import WorkDetail from './pages/Work/WorkDetail'
 import Notice from './pages/Notice/Notice'
-import Communicate from './pages/Communicate/Communicate';
 import AddressBook from './pages/Communicate/AddressBook';
 import Process from './pages/EventProcessing/Process'
 import SubmitDetail from './pages/EventProcessing/SubmitDetail'
@@ -26,7 +25,6 @@ const ReactRouter = () => {
                     <CommonLayout>
                         <Route path="/bord/backlog" component={Backlog}/>
                         <Route path="/bord/work" component={Work}/>
-                        <Route path="/bord/address/:id" component={Communicate}/>
                         <Route path="/bord/addressList" component={AddressBook}/>
                         <Route path="/bord/notice" component={Notice}/>
                     </CommonLayout>