From 13e9c7438ead07518f4ac553a2fd6b79c0815765 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8D=9A=E6=96=87?= <1179111926@qq.com>
Date: Wed, 17 Aug 2022 17:55:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B1=95=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Equipment/List/Index/index.less |  15 +-
 src/pages/Equipment/List/Index/index.tsx  | 263 +++++++++++++---------
 2 files changed, 163 insertions(+), 115 deletions(-)

diff --git a/src/pages/Equipment/List/Index/index.less b/src/pages/Equipment/List/Index/index.less
index a18a666..0e088d9 100644
--- a/src/pages/Equipment/List/Index/index.less
+++ b/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;
diff --git a/src/pages/Equipment/List/Index/index.tsx b/src/pages/Equipment/List/Index/index.tsx
index c007683..d8fd0c3 100644
--- a/src/pages/Equipment/List/Index/index.tsx
+++ b/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,67 +190,82 @@ 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' }}>
-                          <i className="iconfont icon-mimaruanjianjiami mr5" />
-                          <span>收起</span>
+                        <div onClick={() => pack(e.id)}>
+                          {bool ? (
+                            <>
+                              <i className="iconfont icon-zhankaixiaojiantou" />
+                              <span>展开</span>
+                            </>
+                          ) : (
+                            <>
+                              <i className="iconfont icon-shouqixiaojiantou" />
+                              <span>收起</span>
+                            </>
+                          )}
                         </div>
                       </div>
-                      <div className={styles.li}>
-                        <i className="iconfont icon-fuwuqi"></i>
-                        <div>
-                          <p>
-                            <span>数据中心编号</span>
-                            <span>{e.physicsNum}</span>
-                          </p>
-                          <p>
-                            <span>数据中心名称</span>
-                            <span>{e.number}</span>
-                          </p>
-                        </div>
-                        <div>
-                          <p>
-                            <span>所属单位</span>
-                            <span>{e.managerNum}</span>
-                          </p>
-                          <p>
-                            <span>管理设备编号</span>
-                            <span>{e.producerId}</span>
-                          </p>
-                        </div>
-                      </div>
-                      <Row justify="end" className="mt10 mb20">
-                        <Button
-                          onClick={() => editList('1', e)}
-                          type="primary"
-                          ghost
-                        >
-                          修改设备
-                        </Button>
-                        <Button
-                          onClick={() =>
-                            downLoadLink(
-                              url + `/openi/dataCenter/resourceExport/${e.id}`,
-                            )
-                          }
-                          className="ml10"
-                          type="primary"
-                          ghost
-                        >
-                          导出初装资源
-                        </Button>
-                        <Button
-                          onClick={() => deleteList('1', e.id)}
-                          className="ml10"
-                          type="primary"
-                          danger
-                        >
-                          删除
-                        </Button>
-                      </Row>
+                      {!bool && (
+                        <Fragment>
+                          <div className={styles.li}>
+                            <i className="iconfont icon-fuwuqi"></i>
+                            <div>
+                              <p>
+                                <span>数据中心编号</span>
+                                <span>{e.physicsNum}</span>
+                              </p>
+                              <p>
+                                <span>数据中心名称</span>
+                                <span>{e.number}</span>
+                              </p>
+                            </div>
+                            <div>
+                              <p>
+                                <span>所属单位</span>
+                                <span>{e.managerNum}</span>
+                              </p>
+                              <p>
+                                <span>管理设备编号</span>
+                                <span>{e.producerId}</span>
+                              </p>
+                            </div>
+                          </div>
+                          <Row justify="end" className="mt10 mb20">
+                            <Button
+                              onClick={() => editList('1', e)}
+                              type="primary"
+                              ghost
+                            >
+                              修改设备
+                            </Button>
+                            <Button
+                              onClick={() =>
+                                downLoadLink(
+                                  url +
+                                    `/openi/dataCenter/resourceExport/${e.id}`,
+                                )
+                              }
+                              className="ml10"
+                              type="primary"
+                              ghost
+                            >
+                              导出初装资源
+                            </Button>
+                            <Button
+                              onClick={() => deleteList('1', e.id)}
+                              className="ml10"
+                              type="primary"
+                              danger
+                            >
+                              删除
+                            </Button>
+                          </Row>
+                        </Fragment>
+                      )}
                     </aside>
                   );
                 })}
@@ -257,68 +282,82 @@ 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' }}>
-                          <i className="iconfont icon-mimaruanjianjiami mr5" />
-                          <span>收起</span>
-                        </div>
-                      </div>
-                      <div className={styles.li}>
-                        <i className="iconfont icon-zhongduan"></i>
-                        <div>
-                          <p>
-                            <span>数据中心编号</span>
-                            <span>{e.physicsNum}</span>
-                          </p>
-                          <p>
-                            <span>数据中心名称</span>
-                            <span>{e.number}</span>
-                          </p>
-                        </div>
-                        <div>
-                          <p>
-                            <span>所属单位</span>
-                            <span>{e.managerNum}</span>
-                          </p>
-                          <p>
-                            <span>管理设备编号</span>
-                            <span>{e.producerId}</span>
-                          </p>
+                        <div onClick={() => pack(e.id)}>
+                          {bool ? (
+                            <>
+                              <i className="iconfont icon-zhankaixiaojiantou" />
+                              <span>展开</span>
+                            </>
+                          ) : (
+                            <>
+                              <i className="iconfont icon-shouqixiaojiantou" />
+                              <span>收起</span>
+                            </>
+                          )}
                         </div>
                       </div>
-                      <Row justify="end" className="mt10 mb20">
-                        <Button
-                          onClick={() => editList('2', e)}
-                          type="primary"
-                          ghost
-                        >
-                          修改设备
-                        </Button>
-                        <Button
-                          onClick={() =>
-                            downLoadLink(
-                              url +
-                                `/openi/localManager/resourceExport/${e.id}`,
-                            )
-                          }
-                          className="ml10"
-                          type="primary"
-                          ghost
-                        >
-                          导出初装资源
-                        </Button>
-                        <Button
-                          onClick={() => deleteList('2', e.id)}
-                          className="ml10"
-                          type="primary"
-                          danger
-                        >
-                          删除
-                        </Button>
-                      </Row>
+                      {!bool && (
+                        <Fragment>
+                          <div className={styles.li}>
+                            <i className="iconfont icon-zhongduan"></i>
+                            <div>
+                              <p>
+                                <span>数据中心编号</span>
+                                <span>{e.physicsNum}</span>
+                              </p>
+                              <p>
+                                <span>数据中心名称</span>
+                                <span>{e.number}</span>
+                              </p>
+                            </div>
+                            <div>
+                              <p>
+                                <span>所属单位</span>
+                                <span>{e.managerNum}</span>
+                              </p>
+                              <p>
+                                <span>管理设备编号</span>
+                                <span>{e.producerId}</span>
+                              </p>
+                            </div>
+                          </div>
+                          <Row justify="end" className="mt10 mb20">
+                            <Button
+                              onClick={() => editList('2', e)}
+                              type="primary"
+                              ghost
+                            >
+                              修改设备
+                            </Button>
+                            <Button
+                              onClick={() =>
+                                downLoadLink(
+                                  url +
+                                    `/openi/localManager/resourceExport/${e.id}`,
+                                )
+                              }
+                              className="ml10"
+                              type="primary"
+                              ghost
+                            >
+                              导出初装资源
+                            </Button>
+                            <Button
+                              onClick={() => deleteList('2', e.id)}
+                              className="ml10"
+                              type="primary"
+                              danger
+                            >
+                              删除
+                            </Button>
+                          </Row>
+                        </Fragment>
+                      )}
                     </aside>
                   );
                 })}