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/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;