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,64 +508,66 @@ const SiteManage = props => {
               </Col>
             </Row>
           </Card>
-          <Card
-            className={classnames({
-              [styles.boxH]: mulu,
-              [styles.cardBoxR]: true,
-            })}
-          >
-            {/* <Checkbox className={styles.siteAll}>全选/反选</Checkbox> */}
-            <Spin spinning={visibleParams.loading}>
-              {dataList.map((item, index) => (
-                <Panels
-                  {...item}
-                  index={index}
-                  key={item.GroupId}
-                  handleChangeCollpase={handleChangeCollpase}
-                  handleChangeAll={handleChangeAll}
-                  handleChangeSignel={handleChangeSignel}
-                />
-              ))}
-            </Spin>
-            {dataList.length > 0 ? (
-              <>
-                <div style={{ textAlign: 'right' }}>
-                  <Pagination
-                    size="small"
-                    total={total}
-                    current={page.pageNum}
-                    defaultPageSize="5"
-                    onChange={handleChangePage}
-                    pageSizeOptions={['5']}
+          <div style={{ background: '#fff' }}>
+            <Card
+              className={classnames({
+                [styles.boxH]: mulu,
+                [styles.cardBoxR]: true,
+              })}
+            >
+              {/* <Checkbox className={styles.siteAll}>全选/反选</Checkbox> */}
+              <Spin spinning={visibleParams.loading}>
+                {dataList.map((item, index) => (
+                  <Panels
+                    {...item}
+                    index={index}
+                    key={item.GroupId}
+                    handleChangeCollpase={handleChangeCollpase}
+                    handleChangeAll={handleChangeAll}
+                    handleChangeSignel={handleChangeSignel}
                   />
-                </div>
-                <p>已选择列表：</p>
-                <div className={styles.siteSelectList}>
-                  <ul className={styles.siteSelectUl}>
-                    {selectList.map((item, index) => (
-                      <li
-                        key={`${item.userName}${item.GroupId}`}
-                        onClick={() => handleDel(index)}
-                      >
-                        {`${item.userName}(${item.GroupName})`}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-                <div className={styles.siteBtn}>
-                  <Button
-                    type="primary"
-                    className={styles.siteCommit}
-                    onClick={handleCommitBtn}
-                  >
-                    提交
-                  </Button>
-                </div>
-              </>
-            ) : (
-              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-            )}
-          </Card>
+                ))}
+              </Spin>
+              {dataList.length > 0 ? (
+                <>
+                  <div style={{ textAlign: 'right' }}>
+                    <Pagination
+                      size="small"
+                      total={total}
+                      current={page.pageNum}
+                      defaultPageSize="5"
+                      onChange={handleChangePage}
+                      pageSizeOptions={['5']}
+                    />
+                  </div>
+                  <p>已选择列表：</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} />
+              )}
+            </Card>
+            <div className={styles.siteBtn}>
+              <Button
+                type="primary"
+                className={styles.siteCommit}
+                onClick={handleCommitBtn}
+              >
+                提交
+              </Button>
+            </div>
+          </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