fix: 重构角色管理关联角色模块

src/pages/userCenter/roleManage/RoleManage.jsx

 import React, { useState, useEffect } from 'react';
-import {
-  Row,
-  Col,
-  Card,
-  Input,
-  Spin,
-  notification,
-  Button,
-  Tooltip,
-  Space,
-  Empty,
-} from 'antd';
+import { Row, Col, Card, Input, Spin, notification, Button, Tooltip, Space, Empty } from 'antd';
 import Tree from '@/components/ExpendableTree';
 import PageContainer from '@/components/BasePageContainer';
 import {
@@ -34,10 +23,7 @@ import {
   DragGroup,
   getWebConfigTypes,
 } from '@/services/userCenter/roleManage/api';
-import ListCard, {
-  checkChildrenByCondition,
-  getId,
-} from '@/components/CheckGroup';
+import ListCard, { checkChildrenByCondition, getId } from '@/components/CheckGroup';
 // import ListCard from '@/pages/orgnazation/ListCard';
 import qs from 'qs';
 import classnames from 'classnames';
@@ -49,6 +35,7 @@ import EditGroup from './EditGroup';
 import userStyles from '@/pages/userCenter/userManage/UserManage.less';
 import iconStyles from '@/assets/font/omsfont/iconfont.css';
 import UserModal from './UserModal';
+import SelectUser from './SelectUser/SelectUser';
 import { data } from '@/pages/platformCenter/messageManage/projectManage/components/Mock';
 
 const { Search } = Input;
@@ -545,8 +532,7 @@ const SiteManage = () => {
     const dropKey = infos.node.key;
     const dragKey = infos.dragNode.key;
     const dropPos = infos.node.pos.split('-');
-    const dropPosition =
-      infos.dropPosition - Number(dropPos[dropPos.length - 1]);
+    const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]);
 
     const datas = JSON.parse(JSON.stringify(treeData));
     console.log(dropKey, 'dropKey');
@@ -633,7 +619,6 @@ const SiteManage = () => {
         }
       });
     } else {
-      console.log('444444444444');
       if (!canDrop) {
         return;
       }
@@ -641,13 +626,12 @@ const SiteManage = () => {
       if (dragObj.groupflag && dropObj.subSystemValue) {
         return;
       }
-      console.log('55555555555');
+
       let ar;
       let i;
       loop(datas, dropKey, -1, (item, index, arr, parentID) => {
         ar = arr;
         i = index;
-        console.log(item, 'arararararar');
         if (item.group) {
           id = item.group;
         } else {
@@ -695,9 +679,7 @@ const SiteManage = () => {
               <span>选择角色：</span>
             </div>
             {treeData && treeData.length > 0 && (
-              <div
-                style={{ height: 'calc(100vh - 130px)', overflowY: 'scroll' }}
-              >
+              <div style={{ height: 'calc(100vh - 130px)', overflowY: 'scroll' }}>
                 <Tree
                   showIcon
                   onSelect={handleTreeSelect}
@@ -736,7 +718,13 @@ const SiteManage = () => {
             onCancel={() => setGroupVisible(false)}
             confirmModal={groupModal}
           />
-          <UserModal
+          {/* <UserModal
+            visible={userVisible}
+            itemObj={itemObj}
+            onCancel={() => setUserVisible(false)}
+            confirmModal={userModal}
+          /> */}
+          <SelectUser
             visible={userVisible}
             itemObj={itemObj}
             onCancel={() => setUserVisible(false)}
@@ -797,10 +785,7 @@ const SiteManage = () => {
                 hasData={hasData}
               />
             ) : (
-              <Empty
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-                description="当前未选中角色"
-              />
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前未选中角色" />
             )}
           </Card>
         </div>

src/pages/userCenter/roleManage/SelectUser/CardCheck.jsx

+import React, { useState, useEffect, useRef } from 'react';
+import { Checkbox } from 'antd';
+import styles from './SelectUser.less';
+const CheckboxGroup = Checkbox.Group;
+
+const CardCheck = props => {
+  // 自定义获取改变后的值hooks
+  const usePrevious = value => {
+    const ref = useRef();
+    useEffect(() => {
+      ref.current = value;
+    });
+    return ref.current;
+  };
+  const { cardMsg, callback, checkList } = props;
+  const [checkedList, setCheckedList] = useState([]); // 选中列表
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [checkAll, setCheckAll] = useState(false);
+  const [plainOptions, setPlainOptions] = useState([]);
+  const prevAmount = usePrevious({ checkedList });
+
+  useEffect(() => {
+    setPlainOptions(cardMsg.plainOptions);
+    setCheckedList(cardMsg.checkedList);
+    setIndeterminate(cardMsg.indeterminate);
+    setCheckAll(cardMsg.checkAll);
+  }, []);
+  useEffect(() => {
+    if (prevAmount) {
+      let newCheckList = [...checkList];
+      // 当前选中的
+      let currentArr = checkedList;
+      // 上一次选中的
+      let preArr = prevAmount.checkedList;
+      currentArr = new Set(currentArr);
+      preArr = new Set(preArr);
+      // 找出相同的部分
+      let someArr = [...new Set([...currentArr].filter(x => preArr.has(x)))];
+      // 复选框事选中还是取消选中 add or del
+      let checkType;
+      if ([...currentArr].length > [...preArr].length) {
+        checkType = 'add';
+      } else if ([...currentArr].length < [...preArr].length) {
+        checkType = 'del';
+      }
+      if (checkType === 'add') {
+        // 添加新选中的元素
+        currentArr.forEach(item => {
+          if (someArr.indexOf(item) === -1) {
+            let checkName = plainOptions.find(ele => ele.value === item);
+            newCheckList.push(checkName);
+          }
+        });
+      } else if (checkType === 'del') {
+        // 删除取消勾选的元素
+        preArr.forEach(item => {
+          if (someArr.indexOf(item) === -1) {
+            newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
+          }
+        });
+      }
+      callback(checkedList, newCheckList);
+    }
+  }, [checkedList]);
+  // 单选监听
+  const onChange = list => {
+    setCheckedList(list);
+    setIndeterminate(!!list.length && list.length < plainOptions.length);
+    setCheckAll(list.length === plainOptions.length);
+  };
+  // 全选监听
+  const onCheckAllChange = e => {
+    setCheckedList(e.target.checked ? plainOptions.map(item => item.value) : []);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+  };
+  return (
+    <div className={styles.checkContent}>
+      <div className={styles.topCheckbox}>
+        <Checkbox
+          indeterminate={indeterminate}
+          onChange={e => onCheckAllChange(e)}
+          checked={checkAll}
+        >
+          {cardMsg.groupName}
+        </Checkbox>
+      </div>
+      <div className={styles.bottomCheckbox}>
+        <CheckboxGroup
+          value={checkedList}
+          onChange={list => onChange(list)}
+          style={{ display: 'flex', flexWrap: 'wrap' }}
+        >
+          {plainOptions.map(item => (
+            <Checkbox key={item.value} value={item.value}>
+              {item.label}
+            </Checkbox>
+          ))}
+        </CheckboxGroup>
+      </div>
+    </div>
+  );
+};
+
+export default CardCheck;

src/pages/userCenter/roleManage/SelectUser/SelectUser.jsx

+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal, Input, Button, message, Spin, Pagination, Table } from 'antd';
+import { GetGroupUserTree, TestPush } from '@/services/platform/messagemanage';
+import { getStationUsers, chooseUserToStation } from '@/services/userCenter/siteManage/api';
+import styles from './SelectUser.less';
+import DragTable from '@/components/DragTable/DragTable';
+import CardCheck from './CardCheck';
+
+const PushTest = props => {
+  const { confirmModal, onCancel, visible, pushTestMsg, itemObj } = props;
+  const [allList, setAllist] = useState([]); // 用于展示得数据
+  const [checkList, setCheckList] = useState([]); // 选中得数据集合
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchName, setSearchName] = useState();
+
+  useEffect(() => {
+    if (visible) {
+      setCurrentPage(1);
+      getInitialData();
+      // getData(searchName, 1, pageSize);
+    } else {
+      setCheckList([]);
+      setAllist([]);
+      setSearchName('');
+    }
+  }, [visible]);
+  // 选中后得回调函数
+  const checkCallBack = useCallback((val, newCheckList) => {
+    if (val) {
+      setCheckList(newCheckList);
+    }
+  });
+  // 监听分页
+  const paginationChange = (page, pageSizes) => {
+    setCurrentPage(page);
+    setPageSize(pageSizes);
+    getData(searchName, page, pageSizes);
+  };
+  // 获取初始数据
+  const getInitialData = () => {
+    let p1 = getStationUsers({ stationId: itemObj.roleID });
+    let p2 = GetGroupUserTree({
+      key: '',
+      pageSize: 10,
+      PageIndex: 1,
+    });
+    Promise.all([p1, p2]).then(res => {
+      if (res[0].code === 0 && res[1].code === 0) {
+        setTotal(res[1].data.count);
+        let listCheck = res[0].data.map(item => ({
+          label: item.userName,
+          value: item.userID,
+          groupName: item.OUName,
+        }));
+
+        setCheckList(listCheck);
+        // 数据处理成checkbox组件需要得形式
+        let list = res[1].data.data.map(item => {
+          let indeterminate = false;
+          let checkedList = [];
+          let checkAll = false;
+          let options = item.users.map(val => {
+            listCheck.forEach(ele => {
+              if (val.userId === ele.value) {
+                checkedList.push(ele.value);
+              }
+            });
+            return {
+              label: val.userName,
+              value: val.userId,
+              groupName: item.groupName,
+            };
+          });
+          if (checkedList.length === options.length && checkedList.length > 0) {
+            checkAll = true;
+          }
+          if (checkedList.length < options.length && checkedList.length > 0) {
+            indeterminate = true;
+          }
+          return {
+            groupName: item.groupName,
+            groupId: item.groupId,
+            indeterminate,
+            checkAll,
+            checkedList,
+            plainOptions: options,
+          };
+        });
+        setAllist(list);
+      } else if (res[0].code !== 0) {
+        message.error(res[0].msg);
+      } else {
+        message.error(res[1].msg);
+      }
+    });
+  };
+  // 提交勾选人员
+  const onFinish = () => {
+    chooseUserToStation({
+      userList: String(checkList.map(item => item.value)),
+      stationID: itemObj.roleID,
+    })
+      .then(res => {
+        if (res.code === 0) {
+          confirmModal();
+          message.success('关联成功');
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(() => {
+        message.error('网络异常，请稍后再试');
+      });
+  };
+  // 搜索
+  const onSearch = () => {
+    setCurrentPage(1);
+    getData(searchName, 1, pageSize);
+  };
+  // 重置
+  const onReset = () => {
+    setCurrentPage(1);
+    getData('', 1, pageSize);
+    setSearchName('');
+  };
+  // 搜索框监听
+  const searchChange = e => {
+    setSearchName(e.target.value);
+  };
+  // 获取数据
+  const getData = (username, page, pageSizes) => {
+    setLoading(true);
+    GetGroupUserTree({
+      key: username,
+      pageSize: pageSizes,
+      PageIndex: page,
+    })
+      .then(res => {
+        setLoading(false);
+        if (res.code === 0) {
+          setTotal(res.data.count);
+          // 数据处理成checkbox组件需要得形式
+          let list = res.data.data.map(item => {
+            let indeterminate = false;
+            let checkedList = [];
+            let checkAll = false;
+            let options = item.users.map(val => {
+              checkList.forEach(ele => {
+                if (val.userId === ele.value) {
+                  checkedList.push(ele.value);
+                }
+              });
+              return {
+                label: val.userName,
+                value: val.userId,
+                groupName: item.groupName,
+              };
+            });
+            if (checkedList.length === options.length && checkedList.length > 0) {
+              checkAll = true;
+            }
+            if (checkedList.length < options.length && checkedList.length > 0) {
+              indeterminate = true;
+            }
+            return {
+              groupName: item.groupName,
+              groupId: item.groupId,
+              indeterminate,
+              checkAll,
+              checkedList,
+              plainOptions: options,
+            };
+          });
+          setAllist(list);
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(() => {
+        setLoading(false);
+        message.error('网络异常，请稍后再试');
+      });
+  };
+
+  const columns = [
+    {
+      title: '已选用户',
+      dataIndex: 'label',
+      key: 'label',
+      width: 300,
+      render: (text, record) => (
+        <span>
+          {record.label}({record.groupName})
+        </span>
+      ),
+    },
+  ];
+  return (
+    <>
+      <Modal
+        title="关联用户"
+        visible={visible}
+        onOk={onFinish}
+        width="900px"
+        onCancel={onCancel}
+        maskClosable={false}
+        destroyOnClose
+        centered
+      >
+        <div className={styles.pushTestContent}>
+          <div className={styles.leftContent}>
+            {/* 头部搜索框 */}
+            <div className={styles.searchHeader}>
+              <Input.Search
+                value={searchName}
+                placeholder="请输入部门或用户"
+                onChange={searchChange}
+                onSearch={onSearch}
+                enterButton
+                style={{ width: '300px', marginRight: '15px' }}
+              />
+              <Button type="primary" htmlType="submit" onClick={onReset}>
+                重置
+              </Button>
+            </div>
+            {/* 复选框模块 */}
+            <Spin spinning={loading}>
+              <div className={styles.checkContainer}>
+                {allList.map((item, index) => (
+                  <div className={styles.checkBoxContent} key={item.groupId}>
+                    <CardCheck
+                      cardMsg={item}
+                      cardIndex={index}
+                      callback={(val, newCheckList) => checkCallBack(val, newCheckList)}
+                      checkList={checkList}
+                    />
+                  </div>
+                ))}
+              </div>
+            </Spin>
+            {/* 分页 */}
+            <Pagination
+              total={total}
+              showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`}
+              defaultPageSize={pageSize}
+              defaultCurrent={1}
+              current={currentPage}
+              onChange={paginationChange}
+              style={{ marginBottom: '10px', width: '500px' }}
+              size="small"
+              showQuickJumper
+            />
+          </div>
+          <div className={styles.tableRight}>
+            <Table
+              bordered
+              style={{ width: '350px', overflowX: 'hidden' }}
+              rowKey={record => record.value}
+              columns={columns}
+              dataSource={checkList}
+              pagination={false}
+              size="small"
+              scroll={{ y: 530 }}
+            />
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default PushTest;

src/pages/userCenter/roleManage/SelectUser/SelectUser.less

+.pushTestContent {
+  display: flex;
+  .searchHeader {
+    display: flex;
+  }
+  .checkContainer {
+    height: 500px;
+    width: 500px;
+    overflow-y: scroll;
+    margin: 20px 0;
+    padding-right: 5px;
+    .checkContent {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      border: 1px solid #c2cdfd;
+      border-radius: 5px;
+      margin-top: 20px;
+      min-height: 50px;
+      padding: 0 10px 10px 20px;
+      .ant-checkbox-wrapper {
+        background-color: #fff;
+      }
+      .topCheckbox {
+        height: 20px;
+        margin: -10px 0 0 0px;
+        line-height: 20px;
+      }
+      .topCheckbox > label :hover {
+        font-weight: 600;
+      }
+      .bottomCheckbox {
+        margin-top: 10px;
+        .ant-checkbox-wrapper {
+          min-width: 150px;
+          margin-left: 0;
+        }
+        // .ant-checkbox-group-item {
+        //   min-width: 150px !important;
+        // }
+        // .ant-checkbox-wrapper {
+        //   min-width: 150px !important;
+        // }
+      }
+      .checkdiv {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+  .tableRight {
+    margin-left: 10px;
+  }
+}

src/pages/userCenter/roleManage/UserModal.jsx

-import useModal from 'antd/lib/modal/useModal'
-import React, { useEffect, useState } from 'react'
+import useModal from 'antd/lib/modal/useModal';
+import React, { useEffect, useState } from 'react';
 import SiteModal from '@/components/Modal/SiteModa';
-import classnames from 'classnames'
+import classnames from 'classnames';
 import styles from './UserModal.less';
 import lodash, { clone } from 'lodash';
-import { Card, Empty, Pagination, Checkbox, notification, Input, Row, Col } from 'antd'
+import { Card, Empty, Pagination, Checkbox, notification, Input, Row, Col } from 'antd';
 import {
   getWebModuleTree,
   chooseUserToStation,
@@ -14,43 +14,42 @@ import {
   groupUserPagingList,
   addChildSiteNode,
   getSiteTree,
-    getStationUsers
+  getStationUsers,
 } from '@/services/userCenter/siteManage/api';
-import {
-    UserOutlined,
-
-} from '@ant-design/icons';
+import { UserOutlined } from '@ant-design/icons';
 import qs from 'qs';
 const { Search } = Input;
 const placeholder = '请输入机构名称';
 const UserModal = props => {
-
   const [dataList, setdataList] = useState([]);
   const [total, setTotal] = useState(0); // 分页总数
   const [page, setPage] = useState({ pageNum: 1, pageSize: 5 });
   const [selectList, setSelectList] = useState([]); // 选择列表数据
-    const [updatePageUser, setUpdatePageUser] = useState(1);//
+  const [updatePageUser, setUpdatePageUser] = useState(1); //
   const [updateCheck, setUpdateCheck] = useState(1);
   const [name, setName] = useState('');
-    const { itemObj, confirmModal } = props
+  const { itemObj, confirmModal, visible } = props;
   const isAllChecked = index =>
-        dataList[index].Users.filter(item => item.isChecked).length ===
-        dataList[index].Users.length;
+    dataList[index].Users.filter(item => item.isChecked).length === dataList[index].Users.length;
 
-
-    //切换站点，点击分页按钮，提交 
+  // 切换站点，点击分页按钮，提交
   useEffect(() => {
     if (!itemObj) return;
     getList();
   }, [updatePageUser, name]);
-    //切换站点，提交时触发已勾选列表更新
+  useEffect(() => {
+    if (!visible) {
+      setName('');
+    }
+  }, [visible]);
+  // 切换站点，提交时触发已勾选列表更新
   useEffect(() => {
     if (!itemObj) return;
-        //getAllcheckList();
-        getAllCheckListNew()
+    // getAllcheckList();
+    getAllCheckListNew();
   }, [itemObj, updateCheck]);
 
-    //获取当前站点可编辑用户(已勾选和未勾选)分页展示
+  // 获取当前站点可编辑用户(已勾选和未勾选)分页展示
   const getList = () => {
     let params = {
       id: +itemObj.roleID || '',
@@ -71,8 +70,7 @@ const UserModal = props => {
                     list[index].Users[userIndex].isChecked = true;
                   }
                 });
-                                let checkedLen = list[index].Users.filter(v => v.isChecked)
-                                    .length;
+                let checkedLen = list[index].Users.filter(v => v.isChecked).length;
                 if (checkedLen === list[index].Users.length) {
                   list[index].isChecked = true;
                 }
@@ -80,24 +78,24 @@ const UserModal = props => {
             });
           });
         }
-                //handleShowModal('loading', false);
+        // handleShowModal('loading', false);
         setdataList(lodash.cloneDeep(list));
         setTotal(res.data.TotalCount);
       } else {
-                //handleShowModal('loading', false);
+        // handleShowModal('loading', false);
+        setTotal(0);
         setdataList(lodash.cloneDeep([]));
       }
     });
-    }
-    //获取当前站点所有已经勾选的用户新接口
+  };
+  // 获取当前站点所有已经勾选的用户新接口
   const getAllCheckListNew = () => {
     getStationUsers({
-            stationId: itemObj.roleID
-        }).then(
-            res => {
-                let list = []
+      stationId: itemObj.roleID,
+    }).then(res => {
+      let list = [];
       if (res.data && res.data.length > 0) {
-                    console.log(res.data)
+        console.log(res.data);
         res.data.map((item, index) => {
           list.push({
             GroupId: +item.OUID,
@@ -105,15 +103,13 @@ const UserModal = props => {
             userName: item.userName,
             userID: item.userID,
           });
-                    })
-
+        });
       }
       setSelectList(lodash.cloneDeep(list));
       console.log(lodash.cloneDeep(list));
-                setUpdatePageUser(updatePageUser + 1)
-            }
-        )
-    }
+      setUpdatePageUser(updatePageUser + 1);
+    });
+  };
   const onSubmit = () => {
     let result = [];
     let obj = {};
@@ -148,12 +144,10 @@ const UserModal = props => {
       // },
     )
       .then(res => {
-
-
-                if (res.code===0) {
+        if (res.code === 0) {
           setSelectList([]);
           setUpdateCheck(updateCheck + 1);
-                    confirmModal(itemObj.roleID)
+          confirmModal(itemObj.roleID);
           notification.success({
             message: '提示',
             duration: 3,
@@ -170,23 +164,21 @@ const UserModal = props => {
       .catch(err => {
         console.log(err);
       });
-    }
+  };
   const handleChangeCollpase = (groupId, isShow) => {
     let index = dataList.findIndex(item => item.GroupId === groupId);
     if (dataList[index].children && dataList[index].children.length > 0) {
       setdataList(lodash.cloneDeep(dataList));
       return;
     }
-        handleShowModal('loading', true);
-        getStationUserList({ stationID: itemObj.roleID, groupId }).then(
-            res => {
+    // handleShowModal('loading', true);
+    getStationUserList({ stationID: itemObj.roleID, groupId }).then(res => {
       if (res.code === 0 && res.data) {
-                    handleShowModal('loading', false);
+        // handleShowModal('loading', false);
         dataList[index].children = res.data;
         setdataList(lodash.cloneDeep(dataList));
       }
-            },
-        );
+    });
   };
   // 每组全选全不选
   const handleChangeAll = (e, index) => {
@@ -246,9 +238,7 @@ const UserModal = props => {
     let { GroupId, userID } = selectList[index];
     let outerIndex = dataList.findIndex(item => item.GroupId === GroupId);
     if (outerIndex > -1) {
-            let innerIndex = dataList[outerIndex].Users.findIndex(
-                item => item.userID === userID,
-            );
+      let innerIndex = dataList[outerIndex].Users.findIndex(item => item.userID === userID);
       dataList[outerIndex].Users[innerIndex].isChecked = false;
       dataList[outerIndex].isChecked = isAllChecked(outerIndex);
     }
@@ -258,8 +248,9 @@ const UserModal = props => {
   };
   // 获取搜索框的值
   const handleSearch = value => {
+    setPage({ pageNum: 1, pageSize: 5 });
     setName(value);
-        getList(value);
+    // getList(value);
   };
   return (
     <SiteModal
@@ -272,7 +263,6 @@ const UserModal = props => {
       cancelText="取消"
       okText="确认"
       onOk={() => onSubmit()}
-
     >
       <div style={{ background: '#fff' }}>
         <Card
@@ -290,11 +280,9 @@ const UserModal = props => {
                 enterButton
               />
             </Col>
-
           </Row>
           {dataList.length > 0 ? (
             <>
-
               <p className={styles.siteline}>已选择列表：</p>
               <div className={styles.siteSelectList}>
                 <ul className={styles.siteSelectUl}>
@@ -332,14 +320,11 @@ const UserModal = props => {
               pageSizeOptions={['5']}
             />
           </div>
-
         </Card>
-
       </div>
     </SiteModal>
-    )
-}
-
+  );
+};
 
 const Panels2 = React.memo(props => {
   let { index, GroupId, GroupName, Users, isChecked, isShow, color } = props;
@@ -365,7 +350,6 @@ const Panels2 = React.memo(props => {
         </Checkbox>
       </div>
       <div className={styles.sitePanelCon}>
-
         {Users.length > 0 &&
           Users.map((v, vIndex) => (
             <CheckBoxRow

src/pages/userCenter/siteManageV2/siteManage.jsx

@@ -33,6 +33,8 @@ import {
   DownOutlined,
   PlusOutlined,
   ApartmentOutlined,
+  CaretUpOutlined,
+  CaretDownOutlined,
 } from '@ant-design/icons';
 
 import PageContainer from '@/components/BasePageContainer';
@@ -73,6 +75,7 @@ const SiteManageV2 = () => {
   const [currentStationOperate, setCurrentStationOperate] = useState(false);
   const [flag, setFlag] = useState(1); // 操作标致触发界面刷新
   const [dataList, setdataList] = useState([]); // 当前站点对应的分页用户列表
+  const [selectedState, setSelectedState] = useState(false); // 已选列表展开状态true为展开false为收起
   const [visibleParams, setvisibleParams] = useState({
     modalVisible: false, // 新增弹窗
     delVisible: false, // 删除弹窗
@@ -744,13 +747,25 @@ const SiteManageV2 = () => {
                   [styles.boxH]: treeVisible,
                   [styles.cardBoxR]: true,
                 })}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column ',
+                    height: 'calc(100vh - 240px)',
+                  }}
                 >
                   {/* <Checkbox className={styles.siteAll}>全选/反选</Checkbox> */}
-
                   {dataList.length > 0 && !visibleParams.loading ? (
                     <>
                       <p className={styles.siteline}>已选择列表：</p>
-                    <div className={styles.siteSelectList}>
+                      <div
+                        className={styles.siteSelectList}
+                        style={{
+                          height: selectedState ? '1200px' : '220px',
+                          transition: 'height 0.5s',
+                        }}
+                      >
                         <ul className={styles.siteSelectUl}>
                           {selectList.map((item, index) => (
                             <li
@@ -762,10 +777,38 @@ const SiteManageV2 = () => {
                           ))}
                         </ul>
                       </div>
+                      <div style={{ textAlign: 'center', margin: '10px 0' }}>
+                        <Tooltip title="收起">
+                          <CaretUpOutlined
+                            style={{
+                              fontSize: '20px',
+                              color: '#178BF6',
+                              display: selectedState ? 'block' : 'none',
+                            }}
+                            onClick={() => setSelectedState(false)}
+                          />
+                        </Tooltip>
+                        <Tooltip title="展开">
+                          <CaretDownOutlined
+                            style={{
+                              fontSize: '20px',
+                              color: '#178BF6',
+                              display: selectedState ? 'none' : 'block',
+                            }}
+                            onClick={() => setSelectedState(true)}
+                          />
+                        </Tooltip>
+                      </div>
                     </>
                   ) : (
                     <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                   )}
+                  <div
+                    style={{
+                      overflowY: 'scroll',
+                      flexGrow: '1',
+                    }}
+                  >
                     <Spin spinning={visibleParams.loading}>
                       {dataList.map((item, index) => (
                         <Panels
@@ -778,6 +821,8 @@ const SiteManageV2 = () => {
                         />
                       ))}
                     </Spin>
+                  </div>
+                </div>
               </Card>
               {dataList.length > 0 && !visibleParams.loading ? (
                 <div style={{ textAlign: 'right' }}>

src/pages/userCenter/siteManageV2/siteManage.less

@@ -91,8 +91,8 @@
     padding: 15px;
   }
   .ant-spin-container {
-    overflow-y: scroll;
-    height: calc(100vh - 410px);
+    // overflow-y: scroll;
+    // height: calc(100vh - 410px);
   }
   .ant-tree-treenode {
     width: 100% !important;
@@ -322,10 +322,8 @@
 
 .siteSelectList {
   border: 1px solid #f5f5f5;
-  max-height: 120px;
-  overflow: auto;
-  margin-bottom: 20px;
 
+  overflow: auto;
   .siteSelectUl {
     margin: 0;
     padding: 15px;