修改展开

src/pages/Equipment/List/Index/index.less

@@ -101,13 +101,14 @@
       margin-top: 10px;
 
       .head {
-        height: 72px;
+        height: 62px;
         background: #ffffff;
         border-radius: 4px 4px 0 0;
         padding: 0 20px;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding-top: 10px;
 
         div {
           font-size: 14px;
@@ -120,7 +121,7 @@
         overflow: hidden;
         background: #ffffff;
         border-radius: 0 0 4px 4px;
-        padding: 0 20px;
+        padding: 0 20px 10px 20px;
 
         > aside {
           background: #ffffff;
@@ -134,9 +135,16 @@
             font-size: 14px;
             color: #232b40;
             padding: 0 20px;
-
+            margin-top: 10px;
             div {
               color: @primary-color;
+              cursor: pointer;
+              i {
+                display: inline-block;
+                font-size: 14px;
+                transform: scale(0.7);
+                margin-right: 4px;
+              }
             }
           }
         }
@@ -145,6 +153,7 @@
           display: flex;
           border: 1px solid #ebf3ff;
           border-top: 0;
+
           i {
             font-size: 34px;
             color: #a0a4f7;

src/pages/Equipment/List/Index/index.tsx

@@ -11,7 +11,7 @@ import {
   Spin,
 } from 'antd';
 import Fetch from '@/utils/fetch';
-import { useEffect, useState, FC, useRef } from 'react';
+import { useEffect, useState, FC, useRef, Fragment } from 'react';
 
 import {
   connect,
@@ -34,6 +34,7 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
   const [facilityList, setFacilityList] = useState<any[]>([]);
   const [localList, setLocalList] = useState<any[]>([]);
   const [firmList, setFirmList] = useState<any[]>([]);
+  const [packList, setPackList] = useState<any[]>([]);
   const [visible, setVisible] = useState<any>(false);
   const [loading, setLoading] = useState<boolean>(true);
   const [form] = Form.useForm();
@@ -65,6 +66,7 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
       } else {
         setLocalList(data.list || []);
       }
+      setPackList([]);
     }
     setLoading(false);
   };
@@ -125,6 +127,14 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
     setVisible(type);
   };
 
+  const pack = (id: any) => {
+    if (packList.includes(id)) {
+      setPackList(packList.filter((e: any) => e !== id));
+    } else {
+      setPackList([...packList, id]);
+    }
+  };
+
   return (
     <div className={styles.page}>
       <div className={styles.left}>
@@ -180,15 +190,27 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
               {!facilityList.length && <Empty style={{ margin: '20px 0' }} />}
               {!!facilityList.length &&
                 facilityList.map((e: any, i: number) => {
+                  const bool = packList.includes(e.id);
                   return (
                     <aside key={i}>
                       <div>
                         <span>{e.name}</span>
-                        <div style={{ visibility: 'hidden' }}>
+                        <div onClick={() => pack(e.id)}>
-                          <i className="iconfont icon-mimaruanjianjiami mr5" />
+                          {bool ? (
+                            <>
+                              <i className="iconfont icon-zhankaixiaojiantou" />
+                              <span>展开</span>
+                            </>
+                          ) : (
+                            <>
+                              <i className="iconfont icon-shouqixiaojiantou" />
                               <span>收起</span>
+                            </>
+                          )}
                         </div>
                       </div>
+                      {!bool && (
+                        <Fragment>
                           <div className={styles.li}>
                             <i className="iconfont icon-fuwuqi"></i>
                             <div>
@@ -223,7 +245,8 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
                             <Button
                               onClick={() =>
                                 downLoadLink(
-                              url + `/openi/dataCenter/resourceExport/${e.id}`,
+                                  url +
+                                    `/openi/dataCenter/resourceExport/${e.id}`,
                                 )
                               }
                               className="ml10"
@@ -241,6 +264,8 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
                               删除
                             </Button>
                           </Row>
+                        </Fragment>
+                      )}
                     </aside>
                   );
                 })}
@@ -257,15 +282,27 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
               {!localList.length && <Empty style={{ margin: '20px 0' }} />}
               {!!localList.length &&
                 localList.map((e: any, i: number) => {
+                  const bool = packList.includes(e.id);
                   return (
                     <aside key={i}>
                       <div>
                         <span>{e.name}</span>
-                        <div style={{ visibility: 'hidden' }}>
+                        <div onClick={() => pack(e.id)}>
-                          <i className="iconfont icon-mimaruanjianjiami mr5" />
+                          {bool ? (
+                            <>
+                              <i className="iconfont icon-zhankaixiaojiantou" />
+                              <span>展开</span>
+                            </>
+                          ) : (
+                            <>
+                              <i className="iconfont icon-shouqixiaojiantou" />
                               <span>收起</span>
+                            </>
+                          )}
                         </div>
                       </div>
+                      {!bool && (
+                        <Fragment>
                           <div className={styles.li}>
                             <i className="iconfont icon-zhongduan"></i>
                             <div>
@@ -319,6 +356,8 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
                               删除
                             </Button>
                           </Row>
+                        </Fragment>
+                      )}
                     </aside>
                   );
                 })}