fix: 对关联用户模块进行优化

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

-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } 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 { cardMsg, callback, checkList, deleKey, delFlag } = props;
   const [checkedList, setCheckedList] = useState([]); // 选中列表
   const [indeterminate, setIndeterminate] = useState(false);
   const [checkAll, setCheckAll] = useState(false);
   const [plainOptions, setPlainOptions] = useState([]);
-  const prevAmount = usePrevious({ checkedList });
 
+  useEffect(() => {
+    let list = [...checkedList];
+    if (list.some(item => item === deleKey)) {
+      let newList = list.filter(item => item !== deleKey);
+      setCheckedList(newList);
+      setIndeterminate(!!newList.length && newList.length < plainOptions.length);
+      setCheckAll(newList.length === plainOptions.length);
+    }
+  }, [delFlag]);
   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 addData = (arr1, arr2) => arr2.filter(val => arr1.indexOf(val) === -1);
+  // 获取勾选删除得数据
+  const delData = (arr1, arr2) => arr1.filter(val => arr2.indexOf(val) === -1);
   // 单选监听
   const onChange = list => {
+    let newCheckList = [...checkList];
+    let arr;
+    if (checkedList.length > list.length) {
+      // 取消勾选
+      arr = delData(checkedList, list);
+      arr.forEach(item => {
+        newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
+      });
+    } else {
+      // 勾选元素
+      arr = addData(checkedList, list);
+      arr.forEach(item => {
+        let checkName = plainOptions.find(ele => ele.value === item);
+        newCheckList.push(checkName);
+      });
+    }
+    callback(newCheckList);
     setCheckedList(list);
     setIndeterminate(!!list.length && list.length < plainOptions.length);
     setCheckAll(list.length === plainOptions.length);
   };
   // 全选监听
   const onCheckAllChange = e => {
+    let newCheckList = [...checkList];
+    let arr;
+    if (e.target.checked) {
+      // 全选
+      arr = addData(checkedList, plainOptions.map(item => item.value));
+      arr.forEach(item => {
+        let checkName = plainOptions.find(ele => ele.value === item);
+        newCheckList.push(checkName);
+      });
+    } else {
+      arr = delData(checkedList, []);
+      arr.forEach(item => {
+        newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
+      });
+    }
+    callback(newCheckList);
     setCheckedList(e.target.checked ? plainOptions.map(item => item.value) : []);
     setIndeterminate(false);
     setCheckAll(e.target.checked);

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 React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Modal, Input, Button, message, Spin, Pagination, Table, Tooltip, Space } from 'antd';
+import { GetGroupUserTree } from '@/services/platform/messagemanage';
 import { getStationUsers, chooseUserToStation } from '@/services/userCenter/siteManage/api';
+import { DeleteOutlined } from '@ant-design/icons';
 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 SelectUser = props => {
+  const { confirmModal, onCancel, visible, itemObj } = props;
   const [allList, setAllist] = useState([]); // 用于展示得数据
   const [checkList, setCheckList] = useState([]); // 选中得数据集合
   const [loading, setLoading] = useState(false);
@@ -15,7 +15,9 @@ const PushTest = props => {
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [searchName, setSearchName] = useState();
-
+  const [deleKey, setDeleKey] = useState(); // 删除用户的key值
+  const [delFlag, setDelFlag] = useState(0); // 删除标识每次删除后加一
+  const cardRef = useRef();
   useEffect(() => {
     if (visible) {
       setCurrentPage(1);
@@ -28,11 +30,12 @@ const PushTest = props => {
     }
   }, [visible]);
   // 选中后得回调函数
-  const checkCallBack = useCallback((val, newCheckList) => {
-    if (val) {
+  const checkCallBack = useCallback(newCheckList => {
+    if (newCheckList) {
       setCheckList(newCheckList);
     }
   });
+
   // 监听分页
   const paginationChange = (page, pageSizes) => {
     setCurrentPage(page);
@@ -47,7 +50,9 @@ const PushTest = props => {
       pageSize: 10,
       PageIndex: 1,
     });
+    setLoading(true);
     Promise.all([p1, p2]).then(res => {
+      setLoading(false);
       if (res[0].code === 0 && res[1].code === 0) {
         setTotal(res[1].data.count);
         let listCheck = res[0].data.map(item => ({
@@ -184,19 +189,49 @@ const PushTest = props => {
         message.error('网络异常，请稍后再试');
       });
   };
-
+  // 删除角色
+  const deleteRol = key => {
+    const dataSource = [...checkList];
+    console.log(key, dataSource, 'key');
+    setCheckList(dataSource.filter(item => item.value !== key));
+    setDeleKey(key);
+    setDelFlag(delFlag + 1);
+  };
   const columns = [
     {
       title: '已选用户',
       dataIndex: 'label',
       key: 'label',
-      width: 300,
+      width: 220,
+      ellipsis: {
+        showTitle: true,
+      },
       render: (text, record) => (
         <span>
-          {record.label}({record.groupName})
+          <Tooltip placement="topLeft" title={`${record.label}(${record.groupName})`}>
+            {record.label}({record.groupName})
+          </Tooltip>
         </span>
       ),
     },
+    {
+      title: '操作',
+      align: 'center',
+      ellipsis: true,
+      width: 80,
+      render: record => (
+        <>
+          <Space>
+            <Tooltip title="清除关联用户">
+              <DeleteOutlined
+                onClick={() => deleteRol(record.value)}
+                style={{ fontSize: '16px', color: '#e86060' }}
+              />
+            </Tooltip>
+          </Space>
+        </>
+      ),
+    },
   ];
   return (
     <>
@@ -232,10 +267,13 @@ const PushTest = props => {
                 {allList.map((item, index) => (
                   <div className={styles.checkBoxContent} key={item.groupId}>
                     <CardCheck
+                      ref={cardRef}
                       cardMsg={item}
                       cardIndex={index}
                       callback={(val, newCheckList) => checkCallBack(val, newCheckList)}
                       checkList={checkList}
+                      deleKey={deleKey}
+                      delFlag={delFlag}
                     />
                   </div>
                 ))}
@@ -272,4 +310,4 @@ const PushTest = props => {
   );
 };
 
-export default PushTest;
+export default SelectUser;