pref: 站点管理更新

src/pages/userCenter/siteManage/SiteManage.jsx

@@ -25,6 +25,7 @@ import {
   getWebModuleTree,
   chooseUserToStation,
   getAllGroup,
+  getUserByStation,
   getStationUserList,
   groupUserPagingList,
 } from '@/services/userCenter/siteManage/api';
@@ -47,8 +48,7 @@ const placeholder = '请输入机构名称';
 const SiteManage = props => {
   const { userMode } = props;
   const [treeData, setTreeData] = useState([]); // 树结构数据
-  const [currentStation, setCurrentStation] = useState({}); // 当前选中站点
-  // const [searchWord, setSearchWord] = useState(''); // 关键字
+  const [currentStation, setCurrentStation] = useState(''); // 当前选中站点
   const [visibleParams, setvisibleParams] = useState({
     modalVisible: false, // 新增弹窗
     delVisible: false, // 删除弹窗
@@ -61,9 +61,11 @@ const SiteManage = props => {
   const [flag, setFlag] = useState(1);
   const [dataList, setdataList] = useState([]);
   const [mulu, setMulu] = useState(true);
-  const [selectList, setSelectList] = useState([]);
+  const [selectList, setSelectList] = useState([]); // 选择列表数据
   const [total, setTotal] = useState(0); // 分页总数
   const [page, setPage] = useState({ pageNum: 1, pageSize: 5 });
+  const [update, setUpdate] = useState(1);
+  const [update1, setUpdate1] = useState(1);
   // 侧边栏站点
   useEffect(() => {
     handleShowModal('spinLoading', true);
@@ -106,12 +108,46 @@ const SiteManage = props => {
   useEffect(() => {
     if (!currentStation.stationID) return;
     handleShowModal('loading', true);
-    // setSelectList(lodash.cloneDeep([]));
     getList();
-  }, [currentStation]);
+  }, [update]);
   useEffect(() => {
-    getList();
-  }, [page.pageNum]);
+    if (!currentStation.stationID) return;
+    getAllcheckList();
+  }, [currentStation, update1]);
+  const getAllcheckList = async () => {
+    let res = await getUserByStation({
+      stationID: currentStation.stationID,
+      _version: 9999,
+      _dc: new Date().getTime(),
+    });
+    if (res.length > 0) {
+      // 还原从后台返回的数据 选中的列表
+      let list = [];
+      // console.log(res);
+      res.forEach(item => {
+        if (item.userList.length > 0) {
+          item.userList.forEach(value => {
+            // console.log(value);
+            if (
+              value.isChecked &&
+              list.findIndex(
+                v => +v.GroupId === +item.OUID && +v.userID === +value.userID,
+              ) === -1
+            ) {
+              list.push({
+                GroupId: +item.OUID,
+                GroupName: item.OUName,
+                userName: value.userName,
+                userID: value.userID,
+              });
+            }
+          });
+        }
+      });
+      setSelectList(lodash.cloneDeep(list));
+      setUpdate(update + 1);
+    }
+  };
   const getList = name => {
     let params = {
       stationId: +currentStation.stationID || '',
@@ -122,6 +158,7 @@ const SiteManage = props => {
     groupUserPagingList(params).then(res => {
       if (res.code === 0) {
         let { list } = res.data;
+        // 还原选择的数据
         if (selectList.length > 0) {
           selectList.forEach(item => {
             list.forEach((value, index) => {
@@ -152,29 +189,7 @@ const SiteManage = props => {
   };
   // 获取搜索框的值
   const handleSearch = value => {
-    console.log(value);
     getList(value);
-    // if (value) {
-
-    //   dataList.forEach(item => {
-    //     item.color = item.GroupName.indexOf(value) > -1 ? '#f00' : '#333';
-    //   });
-    //   setdataList(lodash.cloneDeep(dataList));
-    //   setSearchWord(value);
-    // }
-  };
-  // 搜索框点击进行锚点链接跳转
-  const handleChange = value => {
-    if (value) {
-      // let index = dataList.findIndex(item => item.GroupId === value);
-      // dataList.forEach(item => {
-      //   item.color = '#333';
-      // });
-      // dataList[index].color = '#f00';
-      // setdataList(lodash.cloneDeep(dataList));
-      // let anchorElement = document.getElementById(`siteId${value}`);
-      // anchorElement.scrollIntoView();
-    }
   };
   const confirmModal = e => {
     handleShowModal('modalVisible', false);
@@ -196,6 +211,7 @@ const SiteManage = props => {
       <List.Item
         onClick={() => {
           setSelectList(lodash.cloneDeep([]));
+          setPage({ pageNum: 1, pageSize: 5 });
           setCurrentStation(t);
         }}
         key={t.id}
@@ -209,7 +225,6 @@ const SiteManage = props => {
     ));
   const handleChangeCollpase = (groupId, isShow) => {
     let index = dataList.findIndex(item => item.GroupId === groupId);
-    // dataList[index].isShow = !isShow;
     if (dataList[index].children && dataList[index].children.length > 0) {
       setdataList(lodash.cloneDeep(dataList));
       return;
@@ -240,7 +255,6 @@ const SiteManage = props => {
             GroupName: dataList[index].GroupName,
             userName: item.userName,
             userID: item.userID,
-            isChecked: dataList[index].isChecked,
           });
         }
       }
@@ -262,13 +276,12 @@ const SiteManage = props => {
         item.GroupId === dataList[index].GroupId,
     );
     dataList[index].isChecked = checked;
-    if (hasIndex === -1) {
+    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,
-        isChecked: dataList[index].isChecked,
       });
     } else {
       selectList.splice(hasIndex, 1);
@@ -289,7 +302,6 @@ const SiteManage = props => {
       dataList[outerIndex].Users[innerIndex].isChecked = false;
       dataList[outerIndex].isChecked = isAllChecked(outerIndex);
     }
-
     selectList.splice(index, 1);
     setSelectList(lodash.cloneDeep(selectList));
     setdataList(lodash.cloneDeep(dataList));
@@ -301,13 +313,14 @@ const SiteManage = props => {
     let obj = {};
     selectList.forEach(item => {
       if (obj[item.GroupId]) {
-        obj[item.GroupId] = item.isChecked
-          ? [...obj[item.GroupId], item.userID, item.GroupId]
-          : [...obj[item.GroupId], item.userID];
+        obj[item.GroupId].push(item.userID);
       } else {
-        obj[item.GroupId] = item.isChecked
-          ? [item.userID, item.GroupId]
-          : [item.userID];
+        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);
@@ -333,7 +346,7 @@ const SiteManage = props => {
 
         if (res.success) {
           setSelectList([]);
-          getList();
+          setUpdate1(update1 + 1);
           notification.success({
             message: '提示',
             duration: 3,
@@ -355,6 +368,7 @@ const SiteManage = props => {
   // 分页
   const handleChangePage = (pageNum, pageSize) => {
     setPage({ pageNum, pageSize });
+    setUpdate(update + 1);
   };
   return (
     <PageContainer>
@@ -452,7 +466,7 @@ const SiteManage = props => {
                   allowClear
                   placeholder={placeholder}
                   onSearch={handleSearch}
-                  onChange={handleChange}
+                  // onChange={handleChange}
                   enterButton
                 />
               </Col>
@@ -494,6 +508,7 @@ const SiteManage = props => {
               </Col>
             </Row>
           </Card>
+          <div style={{ background: '#fff' }}>
             <Card
               className={classnames({
                 [styles.boxH]: mulu,
@@ -530,7 +545,7 @@ const SiteManage = props => {
                     <ul className={styles.siteSelectUl}>
                       {selectList.map((item, index) => (
                         <li
-                        key={`${item.userName}${item.GroupId}`}
+                          key={`${item.userName}${item.GroupId}${index}`}
                           onClick={() => handleDel(index)}
                         >
                           {`${item.userName}(${item.GroupName})`}
@@ -538,6 +553,11 @@ const SiteManage = props => {
                       ))}
                     </ul>
                   </div>
+                </>
+              ) : (
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              )}
+            </Card>
             <div className={styles.siteBtn}>
               <Button
                 type="primary"
@@ -547,11 +567,7 @@ const SiteManage = props => {
                 提交
               </Button>
             </div>
-              </>
-            ) : (
-              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-            )}
-          </Card>
+          </div>
         </div>
       </div>
       {/* </Col>

src/pages/userCenter/siteManage/SiteManage.less

@@ -29,8 +29,8 @@
   border-bottom: 1px solid #ccc;
 }
 .cardBoxR{
-  min-height: calc(100vh - 158px);
-  max-height: calc(100vh - 158px);
+  min-height: calc(100vh - 200px);
+  max-height: calc(100vh - 200px);
   min-width: 600px;
   overflow-y: scroll;
 }
@@ -104,7 +104,8 @@
 }
 .siteList{
   width:199px;
-  margin:0 0 15px 0
+  // margin:0 0 15px 0;
+  padding:0 0  15px 0;
 }
 .sitePanel{
   margin: 0 0 10px 0;
@@ -139,7 +140,7 @@
   color:#f00
 }
 .siteCommit{
-   margin-top: 20px;
+   margin: 10px 0;
 }
 .siteSelectList{
   border:1px solid #f5f5f5;
@@ -168,8 +169,9 @@
   }
 }
 .siteBtn{
-  width:70.5vw;
-  text-align: right;
-  position: fixed;
-  bottom: 20px;
+  width:98%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
 }
\ No newline at end of file