perf:新增角色关联用户

src/pages/userCenter/roleManage/RoleManage.jsx

@@ -41,6 +41,7 @@ import EditModal from './EditModal';
 import EditGroup from './EditGroup';
 import userStyles from '@/pages/userCenter/userManage/UserManage.less';
 import iconStyles from '@/assets/font/omsfont/iconfont.css';
+import UserModal from './UserModal'
 
 const { Search } = Input;
 const placeholder = '请输入功能名称';
@@ -60,6 +61,7 @@ const SiteManage = () => {
   const [currentSelectId, setCurrentSelectId] = useState([]); // 选中的树节点
   const [saveCurId, setSaveCurId] = useState([]); // 树节点ID
   const [groupVisible, setGroupVisible] = useState(false); // 分组编辑弹窗
+  const [userVisible, setUserVisible] = useState(false); // 用户关联弹窗
   const [hasData, setHasData] = useState(false);
   const [valueList, setValueList] = useState([]);
   const [dataList, setdataList] = useState([]);
@@ -289,6 +291,12 @@ const SiteManage = () => {
     setItemObj('');
     handleTreeSelect(saveCurId);
   };
+  const userModal = () => {
+    setUserVisible(false);
+    setFlag(flag + 1);
+    setItemObj('');
+    handleTreeSelect(saveCurId);
+  }
   const valueCallback = valueObj => {
     setSubList(valueObj);
   };
@@ -330,6 +338,9 @@ const SiteManage = () => {
         console.log(err);
       });
   };
+  const handleUserAttach = () => {
+    setUserVisible(true)
+  }
   return (
     <PageContainer>
       <div
@@ -389,6 +400,12 @@ const SiteManage = () => {
             onCancel={() => setGroupVisible(false)}
             confirmModal={groupModal}
           />
+          <UserModal
+            visible={userVisible}
+            itemObj={itemObj}
+            onCancel={() => setUserVisible(false)}
+            confirmModal={userModal}
+          />
           <div>
             {mulu && (
               <Tooltip title="隐藏角色栏" className={styles.hide}>
@@ -465,6 +482,16 @@ const SiteManage = () => {
                   >
                     删除角色
                   </Button>
+                  <Button
+                    type="primary"
+                    danger
+                    onClick={() => {
+                      handleUserAttach();
+                    }}
+                    disabled={!itemObj.roleID}
+                  >
+                    关联用户
+                  </Button>
                 </Space>
               </Col>
             </Row>

src/pages/userCenter/roleManage/UserModal.jsx

+import useModal from 'antd/lib/modal/useModal'
+import React, { useEffect, useState } from 'react'
+import SiteModal from '@/components/Modal/SiteModa';
+import classnames from 'classnames'
+import styles from './UserModal.less';
+import lodash, { clone } from 'lodash';
+import { Card, Empty, Pagination, Checkbox,notification } from 'antd'
+import {
+    getWebModuleTree,
+    chooseUserToStation,
+    getAllGroup,
+    getUserByStation,
+    getStationUserList,
+    groupUserPagingList,
+    addChildSiteNode,
+    getSiteTree,
+    getStationUsers
+} from '@/services/userCenter/siteManage/api';
+import {
+    UserOutlined,
+
+} from '@ant-design/icons';
+import qs from 'qs';
+const UserModal = props => {
+
+    const [dataList, setdataList] = useState([]);
+    const [total, setTotal] = useState(0); // 分页总数
+    const [page, setPage] = useState({ pageNum: 1, pageSize: 5 });
+    const [selectList, setSelectList] = useState([]); // 选择列表数据
+    const [updatePageUser, setUpdatePageUser] = useState(1);//
+    const [updateCheck, setUpdateCheck] = useState(1);
+    const [name, setName] = useState('');
+    const { itemObj,confirmModal } = props
+    const isAllChecked = index =>
+    dataList[index].Users.filter(item => item.isChecked).length ===
+    dataList[index].Users.length;
+
+
+    //切换站点，点击分页按钮，提交 
+    useEffect(() => {
+        if (!itemObj) return;
+        getList();
+    }, [updatePageUser, name]);
+    //切换站点，提交时触发已勾选列表更新
+    useEffect(() => {
+        if (!itemObj) return;
+        //getAllcheckList();
+        getAllCheckListNew()
+    }, [itemObj, updateCheck]);
+
+    //获取当前站点可编辑用户(已勾选和未勾选)分页展示
+    const getList = () => {
+        let params = {
+            id: +itemObj.roleID || '',
+            PageIndex: +page.pageNum,
+            PageSize: +page.pageSize,
+        };
+        if (name) params = { ...params, name };
+        groupUserPagingList(params).then(res => {
+            if (res.code === 0 && res.data) {
+                let { list } = res.data;
+                // 还原选择的数据
+                if (selectList.length > 0) {
+                    selectList.forEach(item => {
+                        list.forEach((value, index) => {
+                            if (item.GroupId === value.GroupId) {
+                                list[index].Users.forEach((user, userIndex) => {
+                                    if (user.userID === item.userID) {
+                                        list[index].Users[userIndex].isChecked = true;
+                                    }
+                                });
+                                let checkedLen = list[index].Users.filter(v => v.isChecked)
+                                    .length;
+                                if (checkedLen === list[index].Users.length) {
+                                    list[index].isChecked = true;
+                                }
+                            }
+                        });
+                    });
+                }
+                //handleShowModal('loading', false);
+                setdataList(lodash.cloneDeep(list));
+                setTotal(res.data.TotalCount);
+            } else {
+                //handleShowModal('loading', false);
+                setdataList(lodash.cloneDeep([]));
+            }
+        });
+    }
+    //获取当前站点所有已经勾选的用户新接口
+    const getAllCheckListNew = () => {
+        getStationUsers({
+            stationId: itemObj.roleID
+        }).then(
+            res => {
+                let list = []
+                if (res.data.length > 0) {
+
+                    res.data.map((item, index) => {
+                        list.push({
+                            GroupId: +item.OUID,
+                            GroupName: item.OUName,
+                            userName: item.userName,
+                            userID: item.userID,
+                        });
+                    })
+
+                }
+                setSelectList(lodash.cloneDeep(list));
+                setUpdatePageUser(updatePageUser + 1)
+            }
+        )
+    }
+    const onSubmit = () => {
+        let result = [];
+        let obj = {};
+        selectList.forEach(item => {
+            if (obj[item.GroupId]) {
+                obj[item.GroupId].push(item.userID);
+            } else {
+                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);
+        // 数据处理成后台需要的格式
+        if (result.length === 0)
+            return notification.warning({
+                message: '提示',
+                description: '请至少选择选择一个用户！',
+            });
+        chooseUserToStation(
+            qs.stringify({
+                userList: String(result.flat()),
+                stationID: itemObj.roleID,
+            }),
+            {
+                headers: {
+                    'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
+                },
+            },
+        )
+            .then(res => {
+
+
+                if (res.success) {
+                    setSelectList([]);
+                    setUpdateCheck(updateCheck + 1);
+                    confirmModal(itemObj.roleID)
+                    notification.success({
+                        message: '提示',
+                        duration: 3,
+                        description: '设置成功',
+                    });
+                } else {
+                    notification.error({
+                        message: '提示',
+                        duration: 15,
+                        description: res.message,
+                    });
+                }
+            })
+            .catch(err => {
+                console.log(err);
+            });
+    }
+    const handleChangeCollpase = (groupId, isShow) => {
+        let index = dataList.findIndex(item => item.GroupId === groupId);
+        if (dataList[index].children && dataList[index].children.length > 0) {
+            setdataList(lodash.cloneDeep(dataList));
+            return;
+        }
+        handleShowModal('loading', true);
+        getStationUserList({ stationID: itemObj.roleID, groupId }).then(
+            res => {
+                if (res.code === 0 && res.data) {
+                    handleShowModal('loading', false);
+                    dataList[index].children = res.data;
+                    setdataList(lodash.cloneDeep(dataList));
+                }
+            },
+        );
+    };
+    // 每组全选全不选
+    const handleChangeAll = (e, index) => {
+        dataList[index].isChecked = e.target.checked;
+        dataList[index].Users.forEach(item => {
+            item.isChecked = e.target.checked;
+            let delIndex = selectList.findIndex(
+                v => v.GroupId === dataList[index].GroupId && v.userID === item.userID,
+            );
+            if (e.target.checked) {
+                if (delIndex === -1) {
+                    selectList.push({
+                        GroupId: dataList[index].GroupId,
+                        GroupName: dataList[index].GroupName,
+                        userName: item.userName,
+                        userID: item.userID,
+                    });
+                }
+            }
+            if (!e.target.checked) {
+                selectList.splice(delIndex, 1);
+            }
+        });
+
+        setSelectList(lodash.cloneDeep(selectList));
+        setdataList(lodash.cloneDeep(dataList));
+    };
+    // 单个选择checkbox
+    const handleChangeSignel = (e, index, vIndex) => {
+        dataList[index].Users[vIndex].isChecked = e.target.checked;
+        let checked = isAllChecked(index);
+        let hasIndex = selectList.findIndex(
+            item =>
+                item.userID === dataList[index].Users[vIndex].userID &&
+                item.GroupId === dataList[index].GroupId,
+        );
+        dataList[index].isChecked = checked;
+        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,
+            });
+        } else {
+            selectList.splice(hasIndex, 1);
+        }
+        setdataList(lodash.cloneDeep(dataList));
+    };
+    // 分页
+    const handleChangePage = (pageNum, pageSize) => {
+        setPage({ pageNum, pageSize });
+        setUpdatePageUser(updatePageUser + 1);
+    };
+    // 删除已选列表
+    const handleDel = index => {
+        let { GroupId, userID } = selectList[index];
+        let outerIndex = dataList.findIndex(item => item.GroupId === GroupId);
+        if (outerIndex > -1) {
+            let innerIndex = dataList[outerIndex].Users.findIndex(
+                item => item.userID === userID,
+            );
+            dataList[outerIndex].Users[innerIndex].isChecked = false;
+            dataList[outerIndex].isChecked = isAllChecked(outerIndex);
+        }
+        selectList.splice(index, 1);
+        setSelectList(lodash.cloneDeep(selectList));
+        setdataList(lodash.cloneDeep(dataList));
+    };
+    return (
+        <SiteModal
+            {...props}
+            title="新增角色"
+            bodyStyle={{ width: '100%', minHeight: '100px' }}
+            style={{ top: 100 }}
+            width="800px"
+            destroyOnClose
+            cancelText="取消"
+            okText="确认"
+            onOk={() => onSubmit()}
+
+        >
+            <div style={{ background: '#fff' }}>
+                <Card
+                    className={classnames({
+                        [styles.cardBoxR]: true,
+                    })}
+                >
+                    {dataList.length > 0 ? (
+                        <>
+
+                            <p className={styles.siteline}>已选择列表：</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} />
+                    )}
+                    {dataList.map((item, index) => (
+                        <Panels2
+                            {...item}
+                            index={index}
+                            key={item.GroupId}
+                            handleChangeCollpase={handleChangeCollpase}
+                            handleChangeAll={handleChangeAll}
+                            handleChangeSignel={handleChangeSignel}
+                        />
+                    ))}
+                    <div style={{ textAlign: 'right' }}>
+                        <Pagination
+                            size="small"
+                            total={total}
+                            current={page.pageNum}
+                            defaultPageSize="5"
+                            onChange={handleChangePage}
+                            pageSizeOptions={['5']}
+                        />
+                    </div>
+
+                </Card>
+
+            </div>
+        </SiteModal>
+    )
+}
+
+
+const Panels2 = React.memo(props => {
+    let { index, GroupId, GroupName, Users, isChecked, isShow, color } = props;
+    return (
+        <div className={styles.sitePanel} key={GroupId} id={`siteId${GroupId}`}>
+            {/* onClick={() => props.handleChangeCollpase(GroupId, isShow)} */}
+            <div className={styles.sitePanelHead}>
+                {/* {isShow ? (
+            <UpOutlined className={styles.siteIcon} />
+          ) : (
+            <DownOutlined className={styles.siteIcon} />
+          )} */}
+                {/* <UpOutlined className={styles.siteIcon} /> */}
+                <UserOutlined className={styles.siteIcon} />
+                <p style={{ color }}>{GroupName}</p>
+            </div>
+            <div className={styles.sitePanelCon}>
+                <Checkbox
+                    key="0"
+                    className={styles.siteList}
+                    checked={isChecked}
+                    onClick={e => props.handleChangeAll(e, index)}
+                >
+                    全选
+          </Checkbox>
+                {Users.length > 0 &&
+                    Users.map((v, vIndex) => (
+                        <CheckBoxRow
+                            {...v}
+                            index={index}
+                            vIndex={vIndex}
+                            key={v.userID}
+                            handleChangeSignel={props.handleChangeSignel}
+                        />
+                    ))}
+            </div>
+        </div>
+    );
+});
+
+const CheckBoxRow = React.memo(props => {
+    let { vIndex, index, isChecked, userName } = props;
+    return (
+        <Checkbox
+            className={styles.siteList}
+            checked={isChecked}
+            onClick={e => props.handleChangeSignel(e, index, vIndex)}
+        >
+            {userName}
+        </Checkbox>
+    );
+});
+export default UserModal;
\ No newline at end of file

src/pages/userCenter/roleManage/UserModal.less

+.cardBoxR {
+    min-height: calc(100vh - 210px);
+    max-height: calc(100vh - 210px);
+    min-width: 600px;
+    overflow-y: scroll;
+}
+
+.siteList {
+    width: 199px;
+    // margin:0 0 15px 0;
+    padding: 0 0 15px 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.siteline {
+    border-top: 1px solid #eee;
+    padding-top: 15px;
+    margin-top: 20px;
+}
+.siteSelectList {
+    border: 1px solid #f5f5f5;
+    height: 200px;
+    overflow: auto;
+    margin-bottom: 50px;
+  
+    .siteSelectUl {
+      margin: 0;
+      padding: 15px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+  
+      li {
+        width: 200px;
+        height: 35px;
+        line-height: 35px;
+        background: rgba(24, 144, 255, 0.16) url('../../../assets/images/icons/close.png') no-repeat 175px;
+        background-size: 20px;
+        margin: 0 10px 10px 0;
+        cursor: pointer;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: 0 20px 0 10px;
+      }
+    }
+  }
+  .siteCheckbox .ant-collapse-content>.ant-collapse-content-box {
+    padding: 16px 16px 0;
+  }
+  
+  .siteList {
+    width: 199px;
+    // margin:0 0 15px 0;
+    padding: 0 0 15px 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  
+  .sitePanel {
+    margin: 0 0 10px 0;
+  }
+  
+  .sitePanelHead {
+    background-color: #f5f5f5;
+    padding: 8px 10px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .sitePanelHead p {
+    margin: 0;
+  }
+
+  .sitePanel .ant-checkbox-wrapper+.ant-checkbox-wrapper {
+    margin: 0
+  }
+  
+  .siteIcon {
+    color: #ccc;
+    margin: 4px 10px 0 0;
+  }
+  
+  .siteAll {
+    margin: 0 0 10px 0;
+  }
\ No newline at end of file

src/pages/userCenter/siteManageV2/siteManage.less

@@ -247,92 +247,107 @@
 }
 
 
-.siteCheckbox .ant-collapse-content > .ant-collapse-content-box{
-    padding: 16px 16px 0;
-  }
-  .siteList{
-    width:199px;
-    // margin:0 0 15px 0;
-    padding:0 0  15px 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .sitePanel{
-    margin: 0 0 10px 0;
-  }
-  .sitePanelHead{
-    background-color: #f5f5f5;
-    padding:8px 10px;
-    cursor: pointer;
-    display: flex;
-    flex-direction: row;
-  }
-  .sitePanelHead p{
+.siteCheckbox .ant-collapse-content>.ant-collapse-content-box {
+  padding: 16px 16px 0;
+}
+
+.siteList {
+  width: 199px;
+  // margin:0 0 15px 0;
+  padding: 0 0 15px 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sitePanel {
+  margin: 0 0 10px 0;
+}
+
+.sitePanelHead {
+  background-color: #f5f5f5;
+  padding: 8px 10px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+}
+
+.sitePanelHead p {
+  margin: 0;
+}
+
+.sitePanelCon {
+  border: 1px solid #f5f5f5;
+  padding: 20px;
+  padding-bottom: 0;
+  border-top: 0;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.sitePanel .ant-checkbox-wrapper+.ant-checkbox-wrapper {
+  margin: 0
+}
+
+.siteIcon {
+  color: #ccc;
+  margin: 4px 10px 0 0;
+}
+
+.siteAll {
+  margin: 0 0 10px 0;
+}
+
+.siteColor {
+  color: #f00
+}
+
+.siteCommit {
+  margin: 10px 0;
+}
+
+.siteSelectList {
+  border: 1px solid #f5f5f5;
+  height: 200px;
+  overflow: auto;
+  margin-bottom: 50px;
+
+  .siteSelectUl {
     margin: 0;
-  }
-  .sitePanelCon{
-    border:1px solid #f5f5f5;
-    padding:20px;
-    padding-bottom: 0;
-    border-top:0;
-    max-height: 200px;
-    overflow: auto;
-  }
-  .sitePanel .ant-checkbox-wrapper + .ant-checkbox-wrapper{
-    margin:0
-  }
-  .siteIcon{
-    color:#ccc;
-    margin:4px 10px 0 0;
-  }
-  .siteAll{
-    margin:0 0 10px 0;
-  }
-  .siteColor{
-    color:#f00
-  }
-  .siteCommit{
-     margin: 10px 0;
-  }
-  .siteSelectList{
-    border:1px solid #f5f5f5;
-    height: 200px;
-    overflow: auto;
-    margin-bottom: 50px;
-    .siteSelectUl{
-      margin: 0;
-      padding: 15px;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      li{
-        width:200px;
-        height: 35px;
-        line-height: 35px;
-        background: rgba(24, 144, 255,0.16) url('../../../assets/images/icons/close.png') no-repeat 175px;
-        background-size: 20px;
-        margin: 0 10px 10px 0;
-        cursor: pointer;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        padding: 0 20px 0 10px;
-      }
-    }
-  }
-  .siteline{
-    border-top: 1px solid #eee;
-    padding-top: 15px;
-    margin-top: 20px;
-  }
-  .siteBtn{
-    width:98%;
+    padding: 15px;
     display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
+    flex-wrap: wrap;
+
+    li {
+      width: 200px;
+      height: 35px;
+      line-height: 35px;
+      background: rgba(24, 144, 255, 0.16) url('../../../assets/images/icons/close.png') no-repeat 175px;
+      background-size: 20px;
+      margin: 0 10px 10px 0;
+      cursor: pointer;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding: 0 20px 0 10px;
+    }
   }
+}
+
+.siteline {
+  border-top: 1px solid #eee;
+  padding-top: 15px;
+  margin-top: 20px;
+}
+
+.siteBtn {
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
 
 .ant-modal-root {
   .ant-tree-switcher {
@@ -355,4 +370,4 @@
     overflow: auto;
     height: 50vh;
   }
-}
+}
\ No newline at end of file

src/services/common/api.js

@@ -8,4 +8,4 @@ export const getSysConfigurate = params =>
     `/CityInterface/rest/services/Common.svc/Tool/GetSysConfigurate?dicName=网关启停`,
   );
 export const gateWayConfig = params =>
-  get(`/Publish/OMS/GateWayConfig`, params);
+  get(`${PUBLISH_SERVICE}/GateWayConfig`, params);