perf: listCardItem

src/pages/orgnazation/listCardItem.jsx

@@ -10,6 +10,8 @@ const ListCardItem = props => {
   const [allChecked, setAllChecked] = useState(false); // 全选状态
   const [checkList, setCheckList] = useState([]); // 复选框列表选中的值
   const [defaultList, setDefaultList] = useState([]); // 默认的选项
+  const [submitArr, setSubmitArr] = useState([]); // 提交的数组
+  // const submitArr = [];
   useEffect(() => {
     console.log(userList, '执行了`````');
     let arr = [];
@@ -23,10 +25,10 @@ const ListCardItem = props => {
               : ''
           }
         >
-          {obj.userName}
+          {obj.userName || obj.roleName || obj.stationName}
         </span>
       );
-      obj.value = obj.userID;
+      obj.value = obj.userID || obj.roleID || obj.stationName;
       arr.push(obj);
     });
     setDefaultList(arr);
@@ -36,7 +38,7 @@ const ListCardItem = props => {
     let arr2 = [];
     userList.map((item, index) => {
       if (item.isChecked) {
-        arr2.push(item.userID);
+        arr2.push(item.userID || item.roleID || item.stationID);
       }
     });
     setCheckList(arr2);

src/pages/userCenter/UserManage.js

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   Tree,
   Table,
@@ -38,6 +38,7 @@ const UserManage = () => {
   const time = new Date();
   const [treeLoading, setTreeLoading] = useState(false);
   const [tableLoading, setTableLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   const [treeData, setTreeData] = useState([]); // 用户机构树
   const [treeData1, setTreeData1] = useState([]);
@@ -65,7 +66,11 @@ const UserManage = () => {
   const [newOrgID, setNewOrgID] = useState();
   const [userID, setUserID] = useState();
   const [rolelist, setRolelist] = useState([]);
+
   const [stationlist, setStationlist] = useState([]);
+  const [valueList, setValueList] = useState([]);
+  const [sumList, setSumList] = useState([]);
+  const submitArr = [];
 
   const [searchUserForm] = Form.useForm();
   const [addUserForm] = Form.useForm();
@@ -75,6 +80,13 @@ const UserManage = () => {
   const [passwordForm] = Form.useForm();
   const { TabPane } = Tabs;
 
+  const getValueCallback = useCallback((value, index) => {
+    setValueList((valueList[index] = value));
+    submitArr.push(...value);
+    // console.log(sumList, 'sumList');
+    console.log(valueList, 'valueList');
+  }, []);
+
   let freezeText = '即将冻结该用户，是否确认冻结？';
   if (userState) {
     freezeText = '即将激活该用户，是否确认激活？';
@@ -345,14 +357,33 @@ const UserManage = () => {
     setTreeState(true);
   };
 
+  // 在userID变化后获取
+  useEffect(() => {
+    if (userID) {
+      console.log(userID);
+      getRoleList();
+    }
+  }, [userID]);
+
+  useEffect(() => {
+    if (sumList) {
+      console.log(sumList);
+    }
+  }, [sumList]);
+
   // 右侧表格相关操作
   const relateRole = record => {
     setRoleVisible(true);
     setUserID(record.userID);
-    getRoleList();
     // setTimeout(() => {
+    //   setUserID(record.userID);
+    //   console.log(userID);
+    // });
+
+    // setTimeout(() => {
+    //   console.log(userID);
     //   getRoleList();
-    // }, 1000);
+    // }, 500);
   };
   const changeOrg = record => {
     setChangeOrgVisible(true);
@@ -532,17 +563,7 @@ const UserManage = () => {
         message.error(err);
       });
   };
-  const listitem = list =>
-    list.map(item1 => (
-      <Col className="gutter-row" span={6} key={item1.roleID}>
-        <Checkbox defaultChecked={item1.isChecked} />
-        <span>{item1.roleName}</span>
-      </Col>
-    ));
-  const checkBox = () => {
-    console.log('123');
-  };
-  // const style = { padding: '8px 0', fontSize: '14px' };
+
   const getRoleList = () => {
     get(`/Cityinterface/rest/services/OMS.svc/W4_GetUserRelationList`, {
       _version: 9999,
@@ -554,18 +575,42 @@ const UserManage = () => {
           // const { roleList, stationList } = res;
           setRolelist(
             res.roleList.map((item, index) => {
-              item.key = index;
+              const arr = [];
+              item.roleList.map(item1 => {
+                if (item1.isChecked) {
+                  arr.push(item1.roleID);
+                }
+                return item1;
+              });
+              setSumList(...arr);
               return (
-                <>
-                  <Divider style={{ fontSize: '14px', color: '#1890FF' }}>
-                    <Checkbox onClick={checkBox} />
-                    {item.visibleTitle}
-                  </Divider>
-                  <Row gutter={16}>{listitem(item.roleList)}</Row>
-                </>
+                <ListCardItem
+                  // {...item}
+                  itemid={index}
+                  key={`item${index}key`}
+                  userList={item.roleList}
+                  OUName={item.visibleTitle}
+                  getValueCallback={getValueCallback}
+                  // searchWord={searchWord}
+                  // {...props}
+                />
               );
             }),
           );
+          setStationlist(
+            res.stationList.map((item, index) => (
+              <ListCardItem
+                // {...item}
+                itemid={index}
+                key={`item${index}key`}
+                userList={item.stationList}
+                OUName={item.visibleTitle}
+                getValueCallback={getValueCallback}
+                // searchWord={searchWord}
+                // {...props}
+              />
+            )),
+          );
         } else {
           notification.error({
             message: '提交失败',
@@ -769,21 +814,24 @@ const UserManage = () => {
               />
             </Tooltip>
           </span>
-          <Tree
-            showLine="true"
-            showIcon="true"
-            defaultExpandAll="true"
-            selectedKeys={[currentSelect]}
-            loading={treeLoading}
-            onSelect={onSelect}
-            treeData={treeData}
-          />
+          {treeData.length > 0 && (
+            <Tree
+              showLine="true"
+              showIcon="true"
+              defaultExpandAll="true"
+              selectedKeys={[currentSelect]}
+              loading={treeLoading}
+              onSelect={onSelect}
+              treeData={treeData}
+            />
+          )}
         </div>
         <div className={styles.userContainer}>
           <Table
             columns={columns}
             dataSource={tableData}
             loading={tableLoading}
+            scroll={{ scrollToFirstRowOnChange: 'true', x: true }}
           />
         </div>
         {/* 查找用户 */}
@@ -965,7 +1013,7 @@ const UserManage = () => {
               {rolelist}
             </TabPane>
             <TabPane tab="站点" key="2">
-              Content of Tab Pane 2
+              {stationlist}
             </TabPane>
           </Tabs>
         </Modal>
@@ -978,16 +1026,18 @@ const UserManage = () => {
           cancelText="取消"
           width="330px"
         >
-          <Tree
-            showLine="true"
-            showIcon="true"
-            defaultExpandAll="true"
-            // selectedKeys={[currentSelect]}
-            onSelect={props => {
-              setNewOrgID(props[0]);
-            }}
-            treeData={treeData2}
-          />
+          {treeData2.length > 0 && (
+            <Tree
+              showLine="true"
+              showIcon="true"
+              defaultExpandAll="true"
+              // selectedKeys={[currentSelect]}
+              onSelect={props => {
+                setNewOrgID(props[0]);
+              }}
+              treeData={treeData2}
+            />
+          )}
         </Modal>
         {/* 修改密码 */}
         <Modal