refactor: 重构

src/components/CheckGroup/index.jsx

-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { Spin, Button, Empty } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Spin, Button } from 'antd';
 import _ from 'lodash';
 import ListCardItem from './ItemCard';
-import { get, post } from '@/services';
 import styles from './ItemCard.less';
 
 const tip = 'loading...';
@@ -19,67 +18,34 @@ export const checkChildrenByCondition = (item, fn, tag = 'every') => {
 };
 
 const ListCard = props => {
-  const { ouid, searchWord, onCommit = () => {}, itemObj } = props;
+  const {
+    ouid,
+    searchWord,
+    onCommit = () => {},
+    dataList,
+    onChange,
+    checkList,
+    loading,
+  } = props;
   const [valueList, setValueList] = useState([]);
-  const [dataList, setdataList] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [mapObj, setMapObj] = useState({});
+
+  useEffect(() => {
+    setValueList(checkList);
+  }, [dataList]);
 
   const updateValueList = (checkedKeys, childrenKeys) => {
+    // eslint-disable-next-line no-console
     console.time('updateValueList:');
     const removekeys = _.difference(childrenKeys, checkedKeys);
     let result = _.uniq(_.union(checkedKeys, valueList));
     _.remove(result, v => removekeys.includes(v));
     setValueList(result);
+    // eslint-disable-next-line no-unused-expressions
+    onChange && onChange(result);
+    // eslint-disable-next-line no-console
     console.timeEnd('updateValueList:');
   };
 
-  useEffect(() => {
-    setLoading(true);
-    const defaultConfig = {
-      optionsList: [],
-      title: '默认组',
-      id: '',
-    };
-    // /Cityinterface/rest/services/OMS.svc/P_GetUserByStation
-    //
-    //  /Cityinterface/rest/services/OMS.svc/U_GetUserListForBatchOper
-    get('/Cityinterface/rest/services/OMS.svc/W4_GetMenuByRoleWithLevel', {
-      // OUID:ouid||'',
-      // stationID: ouid || '',
-      roleID: itemObj.roleID,
-      subSystemValue: itemObj.subSystemValue,
-      subSystemName: itemObj.subSystemValue,
-      _version: 9999,
-      _dc: new Date().getTime(),
-    })
-      .then(res => {
-        const list = [];
-        // eslint-disable-next-line no-unused-expressions
-        res.success &&
-          res.root.forEach(item => {
-            list.push({ ...defaultConfig, ...item });
-          });
-        setdataList(list);
-        setValueList(
-          list
-            .map(l =>
-              checkChildrenByCondition(
-                l,
-                it => (it.isChecked ? [getId(it)] : []),
-                'map',
-              ).flat(Infinity),
-            )
-            .flat(Infinity)
-            .filter(Boolean),
-        );
-        setLoading(false);
-      })
-      .catch(err => {
-        console.error(err);
-        setLoading(false);
-      });
-  }, [ouid]);
   return (
     <div>
       {loading ? (
@@ -97,21 +63,6 @@ const ListCard = props => {
         />
       ) : (
         <>
-          {dataList.some(d => d.type === 'widgetUIPage') && (
-            <ListCardItem
-              item={{
-                type: 'widgetGroup',
-                searchWord,
-                children: dataList.filter(d => d.type === 'widgetUIPage'),
-                text: '地图组件',
-                itemid: '9999',
-              }}
-              ouid={ouid}
-              updateValueList={updateValueList}
-              valueList={valueList}
-              searchWord={searchWord}
-            />
-          )}
           {dataList &&
             dataList.length > 0 &&
             dataList
@@ -131,7 +82,10 @@ const ListCard = props => {
       )}
       {true && !loading && dataList && (
         <div className={styles.btnBox}>
-          <Button type="primary" onClick={() => onCommit(valueList)}>
+          <Button
+            type="primary"
+            onClick={() => onCommit(valueList.filter(Boolean))}
+          >
             提交
           </Button>
         </div>

src/pages/userCenter/roleManage/RoleManage.jsx

@@ -15,7 +15,10 @@ import {
   setMenuToRole,
   getRoleGroupList,
 } from '@/services/userCenter/roleManage/api';
-import ListCard from '@/components/CheckGroup';
+import ListCard, {
+  checkChildrenByCondition,
+  getId,
+} from '@/components/CheckGroup';
 // import ListCard from '@/pages/orgnazation/ListCard';
 import qs from 'qs';
 import styles from '@/pages/userCenter/roleManage/RoleManage.less';
@@ -23,6 +26,7 @@ import AddModal from './AddModal';
 import DelModal from './DelModal';
 import EditModal from './EditModal';
 import EditGroup from './EditGroup';
+import { get } from '@/services';
 const { Search } = Input;
 const placeholder = '请输入功能名称';
 const SiteManage = () => {
@@ -39,6 +43,11 @@ const SiteManage = () => {
   const [spinLoading, setSpinLoading] = useState(false);
   const [currentSelectId, setCurrentSelectId] = useState([]); // 选中的树节点
   const [groupVisible, setGroupVisible] = useState(false); // 分组编辑弹窗
+
+  const [valueList, setValueList] = useState([]);
+  const [dataList, setdataList] = useState([]);
+  const [loading, setLoading] = useState(true);
+
   // 点击树的回调
   const handleTreeSelect = (e, treenode) => {
     const { node } = treenode;
@@ -55,12 +64,12 @@ const SiteManage = () => {
         setRoleID(saveTreeId);
       }
     } else {
+      //
     }
   };
   useEffect(() => {
     setSpinLoading(true);
     getRoleGroupList({ userID: 1 }).then(res => {
-      console.log(res, 'res');
       setSpinLoading(false);
       if (res.code === 0) {
         const { roleList } = res.data;
@@ -69,6 +78,65 @@ const SiteManage = () => {
       }
     });
   }, [flag]);
+
+  const buildMap = list => {
+    const mapObj = {
+      type: 'widgetGroup',
+      searchWord,
+      children: list.filter(l => l.type === 'widgetUIPage'),
+      text: '地图组件',
+      itemid: '9999',
+    };
+
+    return list.some(l => l.type === 'widgetUIPage')
+      ? [mapObj, ...list.filter(l => l.type !== 'widgetUIPage')]
+      : list;
+  };
+
+  useEffect(() => {
+    if (!roleID) return;
+    setLoading(true);
+    const defaultConfig = {
+      optionsList: [],
+      title: '默认组',
+      id: '',
+    };
+
+    get('/Cityinterface/rest/services/OMS.svc/W4_GetMenuByRoleWithLevel', {
+      roleID: itemObj.roleID,
+      subSystemValue: itemObj.subSystemValue,
+      subSystemName: itemObj.subSystemValue,
+      _version: 9999,
+      _dc: new Date().getTime(),
+    })
+      .then(res => {
+        const list = [];
+        // eslint-disable-next-line no-unused-expressions
+        res.success &&
+          res.root.forEach(item => {
+            list.push({ ...defaultConfig, ...item });
+          });
+        const finalList = buildMap(list);
+        setdataList(finalList);
+        setValueList(
+          finalList
+            .map(l =>
+              checkChildrenByCondition(
+                l,
+                it => (it.isChecked ? [getId(it)] : []),
+                'map',
+              ).flat(Infinity),
+            )
+            .flat(Infinity)
+            .filter(Boolean),
+        );
+        setLoading(false);
+      })
+      .catch(err => {
+        setLoading(false);
+      });
+  }, [roleID]);
+
   const handleAdd = e => {
     setModalVisible(true);
   };
@@ -302,7 +370,9 @@ const SiteManage = () => {
           <Card className={styles.cardBoxR}>
             {roleID && (
               <ListCard
-                ouid={roleID}
+                loading={loading}
+                checkList={valueList}
+                dataList={dataList}
                 itemObj={itemObj}
                 searchWord={searchWord}
                 onCommit={handleCommit}