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,
-    getAllGroup,
-    getUserByStation,
-    getStationUserList,
-    groupUserPagingList,
-    addChildSiteNode,
-    getSiteTree,
-    getStationUsers
+  getWebModuleTree,
+  chooseUserToStation,
+  getAllGroup,
+  getUserByStation,
+  getStationUserList,
+  groupUserPagingList,
+  addChildSiteNode,
+  getSiteTree,
+  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 [updateCheck, setUpdateCheck] = useState(1);
+  const [name, setName] = useState('');
+  const { itemObj, confirmModal, visible } = props;
+  const isAllChecked = index =>
+    dataList[index].Users.filter(item => item.isChecked).length === dataList[index].Users.length;
 
-    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 [updateCheck, setUpdateCheck] = useState(1);
-    const [name, setName] = useState('');
-    const { itemObj, confirmModal } = props
-    const isAllChecked = index =>
-        dataList[index].Users.filter(item => item.isChecked).length ===
-        dataList[index].Users.length;
-
-
-    //切换站点，点击分页按钮，提交 
-    useEffect(() => {
-        if (!itemObj) return;
-        getList();
-    }, [updatePageUser, name]);
-    //切换站点，提交时触发已勾选列表更新
-    useEffect(() => {
-        if (!itemObj) return;
-        //getAllcheckList();
-        getAllCheckListNew()
-    }, [itemObj, updateCheck]);
-
-    //获取当前站点可编辑用户(已勾选和未勾选)分页展示
-    const getList = () => {
-        let params = {
-            id: +itemObj.roleID || '',
-            PageIndex: +page.pageNum,
-            PageSize: +page.pageSize,
-        };
-        if (name) params = { ...params, name };
-        groupUserPagingList(params).then(res => {
-            if (res.code === 0 && res.data) {
-                let { list } = res.data;
-                // 还原选择的数据
-                if (selectList.length > 0) {
-                    selectList.forEach(item => {
-                        list.forEach((value, index) => {
-                            if (item.GroupId === value.GroupId) {
-                                list[index].Users.forEach((user, userIndex) => {
-                                    if (user.userID === item.userID) {
-                                        list[index].Users[userIndex].isChecked = true;
-                                    }
-                                });
-                                let checkedLen = list[index].Users.filter(v => v.isChecked)
-                                    .length;
-                                if (checkedLen === list[index].Users.length) {
-                                    list[index].isChecked = true;
-                                }
-                            }
-                        });
-                    });
-                }
-                //handleShowModal('loading', false);
-                setdataList(lodash.cloneDeep(list));
-                setTotal(res.data.TotalCount);
-            } else {
-                //handleShowModal('loading', false);
-                setdataList(lodash.cloneDeep([]));
-            }
-        });
-    }
-    //获取当前站点所有已经勾选的用户新接口
-    const getAllCheckListNew = () => {
-        getStationUsers({
-            stationId: itemObj.roleID
-        }).then(
-            res => {
-                let list = []
-                if (res.data && res.data.length > 0) {
-                    console.log(res.data)
-                    res.data.map((item, index) => {
-                        list.push({
-                            GroupId: +item.OUID,
-                            GroupName: item.OUName,
-                            userName: item.userName,
-                            userID: item.userID,
-                        });
-                    })
-
-                }
-                setSelectList(lodash.cloneDeep(list));
-                console.log(lodash.cloneDeep(list));
-                setUpdatePageUser(updatePageUser + 1)
-            }
-        )
+  // 切换站点，点击分页按钮，提交
+  useEffect(() => {
+    if (!itemObj) return;
+    getList();
+  }, [updatePageUser, name]);
+  useEffect(() => {
+    if (!visible) {
+      setName('');
     }
-    const onSubmit = () => {
-        let result = [];
-        let obj = {};
-        selectList.forEach(item => {
-            if (obj[item.GroupId]) {
-                obj[item.GroupId].push(item.userID);
-            } else {
-                obj[item.GroupId] = [item.userID];
-            }
-        });
-        // dataList.forEach(item => {
-        //     if (obj[item.GroupId] && item.Users.length === obj[item.GroupId].length) {
-        //         obj[item.GroupId].push(item.GroupId);
-        //     }
-        // });
-        result = Object.values(obj);
-        // 数据处理成后台需要的格式
-        if (result.length === 0)
-            return notification.warning({
-                message: '提示',
-                description: '请至少选择选择一个用户！',
-            });
-        chooseUserToStation(
-            {
-                userList: String(result.flat()),
-                stationID: itemObj.roleID,
-            },
-            // {
-            //     headers: {
-            //         'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
-            //     },
-            // },
-        )
-            .then(res => {
+  }, [visible]);
+  // 切换站点，提交时触发已勾选列表更新
+  useEffect(() => {
+    if (!itemObj) return;
+    // getAllcheckList();
+    getAllCheckListNew();
+  }, [itemObj, updateCheck]);
 
-
-                if (res.code===0) {
-                    setSelectList([]);
-                    setUpdateCheck(updateCheck + 1);
-                    confirmModal(itemObj.roleID)
-                    notification.success({
-                        message: '提示',
-                        duration: 3,
-                        description: '设置成功',
-                    });
-                } else {
-                    notification.error({
-                        message: '提示',
-                        duration: 15,
-                        description: res.message,
-                    });
+  // 获取当前站点可编辑用户(已勾选和未勾选)分页展示
+  const getList = () => {
+    let params = {
+      id: +itemObj.roleID || '',
+      PageIndex: +page.pageNum,
+      PageSize: +page.pageSize,
+    };
+    if (name) params = { ...params, name };
+    groupUserPagingList(params).then(res => {
+      if (res.code === 0 && res.data) {
+        let { list } = res.data;
+        // 还原选择的数据
+        if (selectList.length > 0) {
+          selectList.forEach(item => {
+            list.forEach((value, index) => {
+              if (item.GroupId === value.GroupId) {
+                list[index].Users.forEach((user, userIndex) => {
+                  if (user.userID === item.userID) {
+                    list[index].Users[userIndex].isChecked = true;
+                  }
+                });
+                let checkedLen = list[index].Users.filter(v => v.isChecked).length;
+                if (checkedLen === list[index].Users.length) {
+                  list[index].isChecked = true;
                 }
-            })
-            .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 => {
-                if (res.code === 0 && res.data) {
-                    handleShowModal('loading', false);
-                    dataList[index].children = res.data;
-                    setdataList(lodash.cloneDeep(dataList));
-                }
-            },
-        );
-    };
-    // 每组全选全不选
-    const handleChangeAll = (e, index) => {
-        dataList[index].isChecked = e.target.checked;
-        dataList[index].Users.forEach(item => {
-            item.isChecked = e.target.checked;
-            let delIndex = selectList.findIndex(
-                v => v.GroupId === dataList[index].GroupId && v.userID === item.userID,
-            );
-            if (e.target.checked) {
-                if (delIndex === -1) {
-                    selectList.push({
-                        GroupId: dataList[index].GroupId,
-                        GroupName: dataList[index].GroupName,
-                        userName: item.userName,
-                        userID: item.userID,
-                    });
-                }
-            }
-            if (!e.target.checked) {
-                selectList.splice(delIndex, 1);
-            }
+        // handleShowModal('loading', false);
+        setdataList(lodash.cloneDeep(list));
+        setTotal(res.data.TotalCount);
+      } else {
+        // handleShowModal('loading', false);
+        setTotal(0);
+        setdataList(lodash.cloneDeep([]));
+      }
+    });
+  };
+  // 获取当前站点所有已经勾选的用户新接口
+  const getAllCheckListNew = () => {
+    getStationUsers({
+      stationId: itemObj.roleID,
+    }).then(res => {
+      let list = [];
+      if (res.data && res.data.length > 0) {
+        console.log(res.data);
+        res.data.map((item, index) => {
+          list.push({
+            GroupId: +item.OUID,
+            GroupName: item.OUName,
+            userName: item.userName,
+            userID: item.userID,
+          });
         });
-
-        setSelectList(lodash.cloneDeep(selectList));
-        setdataList(lodash.cloneDeep(dataList));
-    };
-    // 单个选择checkbox
-    const handleChangeSignel = (e, index, vIndex) => {
-        dataList[index].Users[vIndex].isChecked = e.target.checked;
-        let checked = isAllChecked(index);
-        let hasIndex = selectList.findIndex(
-            item =>
-                item.userID === dataList[index].Users[vIndex].userID &&
-                item.GroupId === dataList[index].GroupId,
-        );
-        dataList[index].isChecked = checked;
-        if (e.target.checked && hasIndex === -1) {
-            selectList.push({
-                GroupId: dataList[index].GroupId,
-                GroupName: dataList[index].GroupName,
-                userName: dataList[index].Users[vIndex].userName,
-                userID: dataList[index].Users[vIndex].userID,
-            });
+      }
+      setSelectList(lodash.cloneDeep(list));
+      console.log(lodash.cloneDeep(list));
+      setUpdatePageUser(updatePageUser + 1);
+    });
+  };
+  const onSubmit = () => {
+    let result = [];
+    let obj = {};
+    selectList.forEach(item => {
+      if (obj[item.GroupId]) {
+        obj[item.GroupId].push(item.userID);
+      } else {
+        obj[item.GroupId] = [item.userID];
+      }
+    });
+    // dataList.forEach(item => {
+    //     if (obj[item.GroupId] && item.Users.length === obj[item.GroupId].length) {
+    //         obj[item.GroupId].push(item.GroupId);
+    //     }
+    // });
+    result = Object.values(obj);
+    // 数据处理成后台需要的格式
+    if (result.length === 0)
+      return notification.warning({
+        message: '提示',
+        description: '请至少选择选择一个用户！',
+      });
+    chooseUserToStation(
+      {
+        userList: String(result.flat()),
+        stationID: itemObj.roleID,
+      },
+      // {
+      //     headers: {
+      //         'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
+      //     },
+      // },
+    )
+      .then(res => {
+        if (res.code === 0) {
+          setSelectList([]);
+          setUpdateCheck(updateCheck + 1);
+          confirmModal(itemObj.roleID);
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: '设置成功',
+          });
         } else {
-            selectList.splice(hasIndex, 1);
+          notification.error({
+            message: '提示',
+            duration: 15,
+            description: res.message,
+          });
         }
+      })
+      .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 => {
+      if (res.code === 0 && res.data) {
+        // handleShowModal('loading', false);
+        dataList[index].children = res.data;
         setdataList(lodash.cloneDeep(dataList));
-    };
-    // 分页
-    const handleChangePage = (pageNum, pageSize) => {
-        setPage({ pageNum, pageSize });
-        setUpdatePageUser(updatePageUser + 1);
-    };
-    // 删除已选列表
-    const handleDel = index => {
-        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,
-            );
-            dataList[outerIndex].Users[innerIndex].isChecked = false;
-            dataList[outerIndex].isChecked = isAllChecked(outerIndex);
+      }
+    });
+  };
+  // 每组全选全不选
+  const handleChangeAll = (e, index) => {
+    dataList[index].isChecked = e.target.checked;
+    dataList[index].Users.forEach(item => {
+      item.isChecked = e.target.checked;
+      let delIndex = selectList.findIndex(
+        v => v.GroupId === dataList[index].GroupId && v.userID === item.userID,
+      );
+      if (e.target.checked) {
+        if (delIndex === -1) {
+          selectList.push({
+            GroupId: dataList[index].GroupId,
+            GroupName: dataList[index].GroupName,
+            userName: item.userName,
+            userID: item.userID,
+          });
         }
-        selectList.splice(index, 1);
-        setSelectList(lodash.cloneDeep(selectList));
-        setdataList(lodash.cloneDeep(dataList));
-    };
-    // 获取搜索框的值
-    const handleSearch = value => {
-        setName(value);
-        getList(value);
-    };
-    return (
-        <SiteModal
-            {...props}
-            title="关联用户"
-            bodyStyle={{ width: '100%', minHeight: '100px' }}
-            style={{ top: 100 }}
-            width="800px"
-            destroyOnClose
-            cancelText="取消"
-            okText="确认"
-            onOk={() => onSubmit()}
+      }
+      if (!e.target.checked) {
+        selectList.splice(delIndex, 1);
+      }
+    });
 
+    setSelectList(lodash.cloneDeep(selectList));
+    setdataList(lodash.cloneDeep(dataList));
+  };
+  // 单个选择checkbox
+  const handleChangeSignel = (e, index, vIndex) => {
+    dataList[index].Users[vIndex].isChecked = e.target.checked;
+    let checked = isAllChecked(index);
+    let hasIndex = selectList.findIndex(
+      item =>
+        item.userID === dataList[index].Users[vIndex].userID &&
+        item.GroupId === dataList[index].GroupId,
+    );
+    dataList[index].isChecked = checked;
+    if (e.target.checked && hasIndex === -1) {
+      selectList.push({
+        GroupId: dataList[index].GroupId,
+        GroupName: dataList[index].GroupName,
+        userName: dataList[index].Users[vIndex].userName,
+        userID: dataList[index].Users[vIndex].userID,
+      });
+    } else {
+      selectList.splice(hasIndex, 1);
+    }
+    setdataList(lodash.cloneDeep(dataList));
+  };
+  // 分页
+  const handleChangePage = (pageNum, pageSize) => {
+    setPage({ pageNum, pageSize });
+    setUpdatePageUser(updatePageUser + 1);
+  };
+  // 删除已选列表
+  const handleDel = index => {
+    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);
+      dataList[outerIndex].Users[innerIndex].isChecked = false;
+      dataList[outerIndex].isChecked = isAllChecked(outerIndex);
+    }
+    selectList.splice(index, 1);
+    setSelectList(lodash.cloneDeep(selectList));
+    setdataList(lodash.cloneDeep(dataList));
+  };
+  // 获取搜索框的值
+  const handleSearch = value => {
+    setPage({ pageNum: 1, pageSize: 5 });
+    setName(value);
+    // getList(value);
+  };
+  return (
+    <SiteModal
+      {...props}
+      title="关联用户"
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      style={{ top: 100 }}
+      width="800px"
+      destroyOnClose
+      cancelText="取消"
+      okText="确认"
+      onOk={() => onSubmit()}
+    >
+      <div style={{ background: '#fff' }}>
+        <Card
+          className={classnames({
+            [styles.cardBoxR]: true,
+          })}
         >
-            <div style={{ background: '#fff' }}>
-                <Card
-                    className={classnames({
-                        [styles.cardBoxR]: true,
-                    })}
-                >
-                    <Row align="middle">
-                        <Col span={8}>
-                            <Search
-                                allowClear
-                                placeholder={placeholder}
-                                onSearch={handleSearch}
-                                // onChange={handleChange}
-                                enterButton
-                            />
-                        </Col>
-
-                    </Row>
-                    {dataList.length > 0 ? (
-                        <>
-
-                            <p className={styles.siteline}>已选择列表：</p>
-                            <div className={styles.siteSelectList}>
-                                <ul className={styles.siteSelectUl}>
-                                    {selectList.map((item, index) => (
-                                        <li
-                                            key={`${item.userName}${item.GroupId}${index}`}
-                                            onClick={() => handleDel(index)}
-                                        >
-                                            {`${item.userName}(${item.GroupName})`}
-                                        </li>
-                                    ))}
-                                </ul>
-                            </div>
-                        </>
-                    ) : (
-                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-                    )}
-                    {dataList.map((item, index) => (
-                        <Panels2
-                            {...item}
-                            index={index}
-                            key={item.GroupId}
-                            handleChangeCollpase={handleChangeCollpase}
-                            handleChangeAll={handleChangeAll}
-                            handleChangeSignel={handleChangeSignel}
-                        />
-                    ))}
-                    <div style={{ textAlign: 'right' }}>
-                        <Pagination
-                            size="small"
-                            total={total}
-                            current={page.pageNum}
-                            defaultPageSize="5"
-                            onChange={handleChangePage}
-                            pageSizeOptions={['5']}
-                        />
-                    </div>
-
-                </Card>
-
-            </div>
-        </SiteModal>
-    )
-}
-
+          <Row align="middle">
+            <Col span={8}>
+              <Search
+                allowClear
+                placeholder={placeholder}
+                onSearch={handleSearch}
+                // onChange={handleChange}
+                enterButton
+              />
+            </Col>
+          </Row>
+          {dataList.length > 0 ? (
+            <>
+              <p className={styles.siteline}>已选择列表：</p>
+              <div className={styles.siteSelectList}>
+                <ul className={styles.siteSelectUl}>
+                  {selectList.map((item, index) => (
+                    <li
+                      key={`${item.userName}${item.GroupId}${index}`}
+                      onClick={() => handleDel(index)}
+                    >
+                      {`${item.userName}(${item.GroupName})`}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </>
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          )}
+          {dataList.map((item, index) => (
+            <Panels2
+              {...item}
+              index={index}
+              key={item.GroupId}
+              handleChangeCollpase={handleChangeCollpase}
+              handleChangeAll={handleChangeAll}
+              handleChangeSignel={handleChangeSignel}
+            />
+          ))}
+          <div style={{ textAlign: 'right' }}>
+            <Pagination
+              size="small"
+              total={total}
+              current={page.pageNum}
+              defaultPageSize="5"
+              onChange={handleChangePage}
+              pageSizeOptions={['5']}
+            />
+          </div>
+        </Card>
+      </div>
+    </SiteModal>
+  );
+};
 
 const Panels2 = React.memo(props => {
-    let { index, GroupId, GroupName, Users, isChecked, isShow, color } = props;
-    return (
-        <div className={styles.sitePanel} key={GroupId} id={`siteId${GroupId}`}>
-            {/* onClick={() => props.handleChangeCollpase(GroupId, isShow)} */}
-            <div className={styles.sitePanelHead}>
-                {/* {isShow ? (
+  let { index, GroupId, GroupName, Users, isChecked, isShow, color } = props;
+  return (
+    <div className={styles.sitePanel} key={GroupId} id={`siteId${GroupId}`}>
+      {/* onClick={() => props.handleChangeCollpase(GroupId, isShow)} */}
+      <div className={styles.sitePanelHead}>
+        {/* {isShow ? (
             <UpOutlined className={styles.siteIcon} />
           ) : (
             <DownOutlined className={styles.siteIcon} />
           )} */}
-                {/* <UpOutlined className={styles.siteIcon} /> */}
-                <UserOutlined className={styles.siteIcon} />
-                <p style={{ color }}>{GroupName}</p>
-                <Checkbox
-                    key="0"
-                    className={styles.siteListTitle}
-                    checked={isChecked}
-                    onClick={e => props.handleChangeAll(e, index)}
-                >
-                    全选
-          </Checkbox>
-            </div>
-            <div className={styles.sitePanelCon}>
-
-                {Users.length > 0 &&
-                    Users.map((v, vIndex) => (
-                        <CheckBoxRow
-                            {...v}
-                            index={index}
-                            vIndex={vIndex}
-                            key={v.userID}
-                            handleChangeSignel={props.handleChangeSignel}
-                        />
-                    ))}
-            </div>
-        </div>
-    );
-});
-
-const CheckBoxRow = React.memo(props => {
-    let { vIndex, index, isChecked, userName } = props;
-    return (
+        {/* <UpOutlined className={styles.siteIcon} /> */}
+        <UserOutlined className={styles.siteIcon} />
+        <p style={{ color }}>{GroupName}</p>
         <Checkbox
-            className={styles.siteList}
-            checked={isChecked}
-            onClick={e => props.handleChangeSignel(e, index, vIndex)}
+          key="0"
+          className={styles.siteListTitle}
+          checked={isChecked}
+          onClick={e => props.handleChangeAll(e, index)}
         >
-            {userName}
+          全选
         </Checkbox>
-    );
+      </div>
+      <div className={styles.sitePanelCon}>
+        {Users.length > 0 &&
+          Users.map((v, vIndex) => (
+            <CheckBoxRow
+              {...v}
+              index={index}
+              vIndex={vIndex}
+              key={v.userID}
+              handleChangeSignel={props.handleChangeSignel}
+            />
+          ))}
+      </div>
+    </div>
+  );
+});
+
+const CheckBoxRow = React.memo(props => {
+  let { vIndex, index, isChecked, userName } = props;
+  return (
+    <Checkbox
+      className={styles.siteList}
+      checked={isChecked}
+      onClick={e => props.handleChangeSignel(e, index, vIndex)}
+    >
+      {userName}
+    </Checkbox>
+  );
 });
-export default UserModal;
\ No newline at end of file
+export default UserModal;

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, // 删除弹窗
@@ -745,39 +748,81 @@ const SiteManageV2 = () => {
                   [styles.cardBoxR]: true,
                 })}
               >
-                {/* <Checkbox className={styles.siteAll}>全选/反选</Checkbox> */}
-
-                {dataList.length > 0 && !visibleParams.loading ? (
-                  <>
-                    <p className={styles.siteline}>已选择列表：</p>
-                    <div className={styles.siteSelectList}>
-                      <ul className={styles.siteSelectUl}>
-                        {selectList.map((item, index) => (
-                          <li
-                            key={`${item.userName}${item.GroupId}${index}`}
-                            onClick={() => handleDel(index)}
-                          >
-                            {`${item.userName}(${item.GroupName})`}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </>
-                ) : (
-                  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-                )}
-                <Spin spinning={visibleParams.loading}>
-                  {dataList.map((item, index) => (
-                    <Panels
-                      {...item}
-                      index={index}
-                      key={item.GroupId}
-                      handleChangeCollpase={handleChangeCollpase}
-                      handleChangeAll={handleChangeAll}
-                      handleChangeSignel={handleChangeSignel}
-                    />
-                  ))}
-                </Spin>
+                <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}
+                        style={{
+                          height: selectedState ? '1200px' : '220px',
+                          transition: 'height 0.5s',
+                        }}
+                      >
+                        <ul className={styles.siteSelectUl}>
+                          {selectList.map((item, index) => (
+                            <li
+                              key={`${item.userName}${item.GroupId}${index}`}
+                              onClick={() => handleDel(index)}
+                            >
+                              {`${item.userName}(${item.GroupName})`}
+                            </li>
+                          ))}
+                        </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
+                          {...item}
+                          index={index}
+                          key={item.GroupId}
+                          handleChangeCollpase={handleChangeCollpase}
+                          handleChangeAll={handleChangeAll}
+                          handleChangeSignel={handleChangeSignel}
+                        />
+                      ))}
+                    </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;