pref: 优化集成登录角色选择

src/api/service/base.js

@@ -64,6 +64,8 @@ export const API = {
   GET_CONFIG_FILE_JSON: '/PandaCore/GCK/FileCenter/ConfigJSON', // 获取配置文件
   GET_CONFIG_FILE_LIST: '/PandaOMS/OMS/FileCenter/GetFileUrls', // 获取用户上传
   EnableIntegrationConfig: '/PandaCore/GCK/IntegrationAuth/EnableIntegrationConfig', // 开启或关闭集成登录
+
+  getWebModuleTree: '/PandaOMS/OMS/PlatformCenter/WebModuleTree', // 获取所有网站
 };
 
 const services = {
@@ -331,6 +333,11 @@ const services = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
+  getWebModuleTree: {
+    url: API.getWebModuleTree,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
 };
 
 export const searchAutoCity = keywords => {

src/pages/integratedLogin/components/AddModal.js

@@ -16,6 +16,8 @@ import {
   Switch,
   Tooltip,
 } from 'antd';
+import { cloneDeep } from 'lodash';
+
 import { PlusOutlined, LoadingOutlined, RedoOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import CryptoJS from 'crypto-js';
 import { getImageUrl } from '@/utils/utils';
@@ -28,7 +30,17 @@ const { Item } = Form;
 const { TextArea } = Input;
 
 const AddModal = props => {
-  const { callBackSubmit = () => {}, type, pickItem, visible, onCancel, keepSystemName, groupList, targetType } = props;
+  const {
+    callBackSubmit = () => {},
+    type,
+    pickItem,
+    visible,
+    onCancel,
+    keepSystemName,
+    groupList,
+    targetType,
+    roleList,
+  } = props;
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const subTypes = Form.useWatch('subType', form);
@@ -50,8 +62,9 @@ const AddModal = props => {
   const { Option } = Select;
 
   const pickFiled1 = fileds => {
-    if (form.getFieldValue(fileds)) {
-      setCheckedList1(form.getFieldValue(fileds).split(','));
+    const filed = form.getFieldValue(fileds);
+    if (filed) {
+      setCheckedList1(filed.split(','));
       setPick(fileds);
       setIsVisibleRoles(true);
     } else {
@@ -63,7 +76,8 @@ const AddModal = props => {
 
   const groupArr = (initialArr, name) => {
     const list = {};
-    initialArr.data.map(i => {
+    if (!Array.isArray(initialArr)) return list;
+    initialArr.map(i => {
       const ar = [];
       i.root.map(j => {
         const ss = {};
@@ -303,26 +317,28 @@ const AddModal = props => {
         }
       });
   };
-  const getRole = () => {
-    appService.LoadDepartmentAndRole().then(res => {
-      if (res.code === 0) {
-        setKeepFiled(groupArr(res.data, 'groupType'));
-        const aa = groupArr(res.data, 'groupType');
-        if (type === 'edit' && pickItem.roles) {
-          const data = pickItem.roles.split(',');
-          const newData = [];
-          data.forEach(item => {
-            const list = aa.角色.find(i => i.value === item);
-            if (list) newData.push(list.label);
-          });
-          form.setFieldsValue({ roles: newData.toString() });
+  const getRole = async () => {
+    let mData = cloneDeep(roleList);
+    if (!mData) {
+      const res = await appService.LoadDepartmentAndRole();
+      mData = res.data?.data || [];
+    }
+    setKeepFiled(groupArr(mData, 'groupType'));
+    const aa = groupArr(mData, 'groupType');
+    if (type === 'edit' && pickItem.roles) {
+      const data = pickItem.roles.split(',');
+      const newData = [];
+      data.forEach(item => {
+        if (aa['角色']) {
+          const list = aa.角色.find(i => i.value === item);
+          if (list) newData.push(list.label);
         }
-      }
-    });
+      });
+      form && form.setFieldsValue({ roles: newData.join(',') });
+    }
   };
   useEffect(() => {
     if (visible) {
-      getRole();
       if (type === 'edit') {
         const {
           paramName,
@@ -347,7 +363,7 @@ const AddModal = props => {
           subType,
           name,
           icon,
-          roles: roles ? roles.split(',') : null,
+          roles: roles || '',
           appKey,
           appSecret,
           whiteList,
@@ -358,6 +374,9 @@ const AddModal = props => {
         });
         setImageUrl(icon || '');
         setImageBgUrl(backgroundImage || '');
+        setTimeout(() => {
+          getRole();
+        }, 0);
       } else {
         form.setFieldsValue({
           paramValue: '',
@@ -695,6 +714,7 @@ const AddModal = props => {
         chooseGroupName={chooseGroupName} // 可选分组名
         keepFiled={keepFiled}
         dataType="name"
+        allData={roleList}
       />
     </Modal>
   );

src/pages/integratedLogin/components/RolePmSite/index.js

-import React, { useState, useEffect, useRef, useCallback } from 'react';
+/* eslint-disable no-use-before-define */
+/* eslint-disable eqeqeq */
+import React, { useState, useEffect, useRef } from 'react';
 import { Modal, Checkbox, Tabs, Input, Button, Pagination, Empty, Tag, Divider, Radio } from 'antd';
 import { appService } from '@/api';
 
+import { cloneDeep } from 'lodash';
 import styles from './index.less';
 const CheckboxGroup = Checkbox.Group;
 const { TabPane } = Tabs;
@@ -15,6 +18,7 @@ const RMSComponents = props => {
     chooseGroupName,
     dataType,
     isRadio,
+    allData,
   } = props;
   const [checkedList, setCheckedList] = useState([]); // 选中复选框内容
   const [searchWord, setSearchWord] = useState(''); // 关键字
@@ -67,102 +71,104 @@ const RMSComponents = props => {
     setKeyValue('0');
     setSearchWord('');
   };
-
-  useEffect(() => {
+  const init = async () => {
     if (visible) {
-      appService.LoadDepartmentAndRole().then(res => {
-        if (res.msg === 'Ok') {
-          // setFiled1(formateArrDataA1(res.data, 'groupType'));
+      let mData = cloneDeep(allData);
+      if (!mData) {
+        const res = await appService.LoadDepartmentAndRole();
+        mData = res.data?.data || [];
+      }
+      keepFiled.current = groupArr(mData, 'groupType');
+      if (groupName == '角色') {
+        setKeyValue('0');
+        setKeepTabKey(0);
+      } else if (groupName == '部门') {
+        setKeyValue('1');
+        setKeepTabKey(1);
+      } else if (groupName == '站点') {
+        setKeyValue('2');
+        setKeepTabKey(2);
+      }
 
-          keepFiled.current = groupArr(res.data, 'groupType');
-          if (groupName == '角色') {
-            setKeyValue('0');
-            setKeepTabKey(0);
-          } else if (groupName == '部门') {
-            setKeyValue('1');
-            setKeepTabKey(1);
-          } else if (groupName == '站点') {
-            setKeyValue('2');
-            setKeepTabKey(2);
-          }
-          getRoles(groupName, '', pageSize, 1, 0);
-          const checkArr = [];
-          // 角色
-          const listdata = [];
-          const listId = [];
-          newCheckedList.map(checkItem => {
-            keepFiled.current['角色'].map(i => {
-              const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
-              if (canSave) {
-                listdata.push(i);
-                listId.push(i.value.toString());
-              }
-            });
-          });
-          const cs = selected;
-          listdata.map(i => {
-            cs.set(i.value, {
-              value: i.label,
-              type: 0,
-            });
-          });
-          setSelected(cs);
-          const dataId = Array.from(new Set(listId));
-          setCheckDataRole(dataId); // 用于设置首次展示已选列表角色数据
-          checkArr[0] = dataId;
-          // 部门
-          const pmdata = [];
-          const pmId = [];
-          newCheckedList.map(checkItem => {
-            keepFiled.current['部门'].map(i => {
-              const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
-              if (canSave) {
-                pmdata.push(i);
-                pmId.push(i.value.toString());
-              }
-            });
-          });
-          const cs1 = selected;
-          pmdata.map(i => {
-            cs1.set(i.value, {
-              value: i.label,
-              type: 1,
-            });
+      const checkArr = [];
+      // 角色
+      const listdata = [];
+      const listId = [];
+      newCheckedList.map(checkItem => {
+        keepFiled.current['角色'] &&
+          keepFiled.current['角色'].map(i => {
+            const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
+            if (canSave) {
+              listdata.push(i);
+              listId.push(i.value.toString());
+            }
           });
-          setSelected(cs1);
-          const datapmId = Array.from(new Set(pmId));
-          setCheckDataPm(datapmId);
-          checkArr[1] = datapmId;
-          // 站点
-          const sitedata = [];
-          const siteId = [];
-          newCheckedList.map(checkItem => {
-            keepFiled.current['站点'].map(i => {
-              const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
-              if (canSave) {
-                sitedata.push(i);
-                siteId.push(i.value.toString());
-              }
-            });
+      });
+      const cs = selected;
+      listdata.map(i => {
+        cs.set(i.value, {
+          value: i.label,
+          type: 0,
+        });
+      });
+      setSelected(cs);
+      const dataId = Array.from(new Set(listId));
+      setCheckDataRole(dataId); // 用于设置首次展示已选列表角色数据
+      checkArr[0] = dataId;
+      // 部门
+      const pmdata = [];
+      const pmId = [];
+      newCheckedList.map(checkItem => {
+        keepFiled.current['部门'] &&
+          keepFiled.current['部门'].map(i => {
+            const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
+            if (canSave) {
+              pmdata.push(i);
+              pmId.push(i.value.toString());
+            }
           });
-          const cs2 = selected;
-          sitedata.map(i => {
-            cs2.set(i.value, {
-              value: i.label,
-              type: 2,
-            });
+      });
+      const cs1 = selected;
+      pmdata.map(i => {
+        cs1.set(i.value, {
+          value: i.label,
+          type: 1,
+        });
+      });
+      setSelected(cs1);
+      const datapmId = Array.from(new Set(pmId));
+      setCheckDataPm(datapmId);
+      checkArr[1] = datapmId;
+      // 站点
+      const sitedata = [];
+      const siteId = [];
+      newCheckedList.map(checkItem => {
+        keepFiled.current['站点'] &&
+          keepFiled.current['站点'].map(i => {
+            const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
+            if (canSave) {
+              sitedata.push(i);
+              siteId.push(i.value.toString());
+            }
           });
-          setSelected(cs2);
-          const datasiteId = Array.from(new Set(siteId));
-          setCheckDataSite(datasiteId);
-          checkArr[2] = datasiteId;
-          if (isRadio) {
-            setRadioValue(siteId[0]);
-          }
-          setSaveCheckValue(checkArr);
-          setCheckedList(checkArr);
-        }
       });
+      const cs2 = selected;
+      sitedata.map(i => {
+        cs2.set(i.value, {
+          value: i.label,
+          type: 2,
+        });
+      });
+      setSelected(cs2);
+      const datasiteId = Array.from(new Set(siteId));
+      setCheckDataSite(datasiteId);
+      checkArr[2] = datasiteId;
+      if (isRadio) {
+        setRadioValue(siteId[0]);
+      }
+      setSaveCheckValue(checkArr);
+      setCheckedList(checkArr);
+      getRoles(groupName, '', pageSize, 1, 0, checkArr);
     } else {
       setSelected(new Map());
       setPageSize(45);
@@ -173,6 +179,9 @@ const RMSComponents = props => {
       setRadioValue();
       setOptionValue([]);
     }
+  };
+  useEffect(() => {
+    init();
   }, [visible]);
 
   const submitSearchUser = () => {
@@ -192,194 +201,184 @@ const RMSComponents = props => {
     setSearchWord(e.target.value);
   };
 
-  // 监听分页
-  const paginationChange = (page, pageSizes) => {
-    setCheckAll(false);
-    setCheckAll1(false);
-    setCheckAll2(false);
-    setIndeterminate(false);
-    setIndeterminate1(false);
-    setIndeterminate2(false);
-    if (keepTabKey == 0) {
-      getRoles('角色', searchWord, pageSizes, page);
-    }
-    if (keepTabKey == 1) {
-      getRoles('部门', searchWord, pageSizes, page);
-    }
-    if (keepTabKey == 2) {
-      getRoles('站点', searchWord, pageSizes, page);
-    }
-    setCurrentPage(page);
-    setPageSize(pageSizes);
-  };
-
   // 搜索时获取数据
-  const sreachRoles = (type, keywords, pageSizes, pageIndex) => {
-    appService
-      .LoadDepartmentAndRole({
+  const sreachRoles = async (type, keywords, pageSizes, pageIndex) => {
+    let mData = cloneDeep(allData);
+    if (!mData) {
+      const res = await appService.LoadDepartmentAndRole({
         type,
         keywords,
-        pageSize: pageSizes,
-        pageIndex,
-      })
-      .then(res => {
-        if (res.msg === 'Ok') {
-          setOptionValue(groupArr(res.data, 'groupType'));
-          const aa = groupArr(res.data, 'groupType');
-          const list = [];
-          let data = '';
-          if (type == '角色') {
-            data = 0;
-          } else if (type === '部门') {
-            data = 1;
-          } else if (type === '站点') {
-            data = 2;
-          }
-          aa[type] &&
-            aa[type].map(i => {
-              if (checkedList[data].indexOf(i.value) != -1) {
-                list.push(i.value);
-              }
-            });
-          if (list.length === aa[type].length) {
-            if (type === '角色') {
-              setCheckAll(true);
-              setIndeterminate(false);
-            } else if (type === '部门') {
-              setCheckAll1(true);
-              setIndeterminate1(false);
-            } else if (type === '站点') {
-              setCheckAll2(true);
-              setIndeterminate2(false);
-            }
-          } else if (list.length < aa[type].length && list.length !== 0) {
-            if (type === '角色') {
-              setCheckAll(false);
-              setIndeterminate(true);
-            } else if (type === '部门') {
-              setCheckAll1(false);
-              setIndeterminate1(true);
-            } else if (type === '站点') {
-              setCheckAll2(false);
-              setIndeterminate2(true);
-            }
-          } else if (list.length === 0) {
-            if (type === '角色') {
-              setCheckAll(false);
-              setIndeterminate(false);
-            } else if (type === '部门') {
-              setCheckAll1(false);
-              setIndeterminate1(false);
-            } else if (type === '站点') {
-              setCheckAll2(false);
-              setIndeterminate2(false);
-            }
-          }
-          setCurrentPage(1);
-          setTotal(res.data.count);
-          if (res.data.count == 0) {
-            setEmptyValue(1);
-          } else {
-            setEmptyValue(0);
-          }
+        pageSize: 999,
+        pageIndex: 1,
+      });
+      mData = res.data?.data || [];
+    }
+    if (keywords && allData) {
+      mData = mData.map(m => {
+        if (m.root) {
+          m.root = m.root.filter(a => a.Name.includes(keywords));
         }
+        return m;
       });
+    }
+
+    setOptionValue(groupArr(mData, 'groupType'));
+    const aa = groupArr(mData, 'groupType');
+    const list = [];
+    let data = '';
+    if (type == '角色') {
+      data = 0;
+    } else if (type === '部门') {
+      data = 1;
+    } else if (type === '站点') {
+      data = 2;
+    }
+    aa[type] &&
+      aa[type].map(i => {
+        if (checkedList[data].indexOf(i.value) != -1) {
+          list.push(i.value);
+        }
+      });
+    if (list.length === aa[type].length) {
+      if (type === '角色') {
+        setCheckAll(true);
+        setIndeterminate(false);
+      } else if (type === '部门') {
+        setCheckAll1(true);
+        setIndeterminate1(false);
+      } else if (type === '站点') {
+        setCheckAll2(true);
+        setIndeterminate2(false);
+      }
+    } else if (list.length < aa[type].length && list.length !== 0) {
+      if (type === '角色') {
+        setCheckAll(false);
+        setIndeterminate(true);
+      } else if (type === '部门') {
+        setCheckAll1(false);
+        setIndeterminate1(true);
+      } else if (type === '站点') {
+        setCheckAll2(false);
+        setIndeterminate2(true);
+      }
+    } else if (list.length === 0) {
+      if (type === '角色') {
+        setCheckAll(false);
+        setIndeterminate(false);
+      } else if (type === '部门') {
+        setCheckAll1(false);
+        setIndeterminate1(false);
+      } else if (type === '站点') {
+        setCheckAll2(false);
+        setIndeterminate2(false);
+      }
+    }
+    setCurrentPage(1);
+    setTotal(mData.length);
+    if (mData.length === 0) {
+      setEmptyValue(1);
+    } else {
+      setEmptyValue(0);
+    }
   };
 
-  const getRoles = useCallback((type, keywords, pageSizes, pageIndex, flag) => {
-    appService
-      .LoadDepartmentAndRole({
+  const getRoles = async (type, keywords, pageSizes, pageIndex, flag, check) => {
+    let mData = cloneDeep(allData);
+    if (!mData) {
+      const res = await appService.LoadDepartmentAndRole({
         type,
         keywords,
-        pageSize: pageSizes,
-        pageIndex,
-      })
-      .then(res => {
-        if (res.code === 0) {
-          setTotal(res.data.count);
-          setOptionValue(groupArr(res.data, 'groupType'));
-          const aa = groupArr(res.data, 'groupType');
-          const list = [];
-          let data = '';
-          if (type === '角色') {
-            data = 0;
-          } else if (type === '部门') {
-            data = 1;
-          } else if (type === '站点') {
-            data = 2;
-          }
-          // 首次进入调用
-          if (flag != undefined) {
-            const listId = [];
-            newCheckedList.map(checkItem => {
-              keepFiled.current[groupName].map(i => {
-                const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
-                if (canSave) {
-                  listId.push(i.value.toString());
-                }
-              });
-            });
-            aa[type] &&
-              aa[type].map(i => {
-                if (listId.indexOf(i.value) != -1) {
-                  list.push(i.value);
-                }
-              });
-          } else {
-            aa[type] &&
-              aa[type].map(i => {
-                if (checkedList[data].indexOf(i.value) != -1) {
-                  list.push(i.value);
-                }
-              });
-          }
+        pageSize: 999,
+        pageIndex: 1,
+      });
+      mData = res.data?.data || [];
+    }
 
-          if (list.length === aa[type].length) {
-            if (type == '角色') {
-              setCheckAll(true);
-              setIndeterminate(false);
-            } else if (type == '部门') {
-              setCheckAll1(true);
-              setIndeterminate1(false);
-            } else if (type == '站点') {
-              setCheckAll2(true);
-              setIndeterminate2(false);
-            }
-          } else if (list.length < aa[type].length && list.length !== 0) {
-            if (type == '角色') {
-              setCheckAll(false);
-              setIndeterminate(true);
-            } else if (type == '部门') {
-              setCheckAll1(false);
-              setIndeterminate1(true);
-            } else if (type == '站点') {
-              setCheckAll2(false);
-              setIndeterminate2(true);
-            }
-          } else if (list.length === 0) {
-            if (type == '角色') {
-              setCheckAll(false);
-              setIndeterminate(false);
-            } else if (type == '部门') {
-              setCheckAll1(false);
-              setIndeterminate1(false);
-            } else if (type == '站点') {
-              setCheckAll2(false);
-              setIndeterminate2(false);
+    setTotal(mData.length);
+    setOptionValue(groupArr(mData, 'groupType'));
+    const aa = groupArr(mData, 'groupType');
+    const list = [];
+    let data = '';
+    if (type === '角色') {
+      data = 0;
+    } else if (type === '部门') {
+      data = 1;
+    } else if (type === '站点') {
+      data = 2;
+    }
+    // 首次进入调用
+    if (flag != undefined) {
+      const listId = [];
+      newCheckedList.map(checkItem => {
+        if (keepFiled.current[groupName]) {
+          keepFiled.current[groupName].map(i => {
+            const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
+            if (canSave) {
+              listId.push(i.value.toString());
             }
-          }
-          if (res.data.count == 0) {
-            setEmptyValue(1);
-          } else {
-            setEmptyValue(0);
-          }
+          });
         }
       });
-  });
+      aa[type] &&
+        aa[type].map(i => {
+          if (listId.indexOf(i.value) != -1) {
+            list.push(i.value);
+          }
+        });
+    } else {
+      aa[type] &&
+        aa[type].map(i => {
+          if (checkedList[data].indexOf(i.value) != -1) {
+            list.push(i.value);
+          }
+        });
+    }
+
+    if (list.length === aa[type].length) {
+      if (type == '角色') {
+        setCheckAll(true);
+        setIndeterminate(false);
+      } else if (type == '部门') {
+        setCheckAll1(true);
+        setIndeterminate1(false);
+      } else if (type == '站点') {
+        setCheckAll2(true);
+        setIndeterminate2(false);
+      }
+    } else if (list.length < aa[type].length && list.length !== 0) {
+      if (type == '角色') {
+        setCheckAll(false);
+        setIndeterminate(true);
+      } else if (type == '部门') {
+        setCheckAll1(false);
+        setIndeterminate1(true);
+      } else if (type == '站点') {
+        setCheckAll2(false);
+        setIndeterminate2(true);
+      }
+    } else if (list.length === 0) {
+      if (type == '角色') {
+        setCheckAll(false);
+        setIndeterminate(false);
+      } else if (type == '部门') {
+        setCheckAll1(false);
+        setIndeterminate1(false);
+      } else if (type == '站点') {
+        setCheckAll2(false);
+        setIndeterminate2(false);
+      }
+    }
+    if (mData.length === 0) {
+      setEmptyValue(1);
+    } else {
+      setEmptyValue(0);
+    }
+  };
 
   const groupArr = (initialArr, name) => {
     const list = {};
-    initialArr.data.map(i => {
+    if (!Array.isArray(initialArr)) return list;
+    initialArr.map(i => {
       const ar = [];
       i.root.map(j => {
         const ss = {};
@@ -813,189 +812,170 @@ const RMSComponents = props => {
   };
 
   return (
-    <div className={styles.modalContainer}>
-      <Modal
-        title="权限选择"
-        bodyStyle={{ width: '100%', height: '590px', overflowY: 'scorll' }}
-        width="1000px"
-        style={{ top: '-20px' }}
-        destroyOnClose
-        centered
-        cancelText="取消"
-        okText="确认"
-        {...props}
-        onOk={() => onSubmit()}
-        forceRender
-        getContainer={false}
-        afterClose={() => {
-          setKeyValue('0');
-          setSearchWord('');
-        }}
-      >
-        <div className={styles.pageContent}>
-          {/* 可选列表 */}
-          <div className={styles.optionalList}>
-            <div className={styles.header} />
-            <Search
-              className={styles.searchInput}
-              allowClear
-              placeholder="搜索"
-              onSearch={submitSearchUser}
-              onChange={e => handleSearch(e)}
-              value={searchWord}
-            />
-            <div className={styles.tabContent}>
-              {visible && (
-                <Tabs type="card" activeKey={keyValue} onChange={handleParChange}>
-                  {chooseGroupName.indexOf('角色') !== -1 ? (
-                    <TabPane tab="角色" key="0">
-                      <div className={styles.checkContent}>
-                        {emptyValue == 0 ? (
-                          <div className={styles.check}>
-                            <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
-                              全选
-                            </Checkbox>
-                            <Divider />
-                            <CheckboxGroup
-                              options={optionValue['角色']}
-                              value={checkedList[0]}
-                              onChange={onChangeListNew}
-                            />
-                          </div>
-                        ) : (
-                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
-                        )}
-                      </div>
-                    </TabPane>
-                  ) : (
-                    <></>
-                  )}
-                  {chooseGroupName.indexOf('部门') !== -1 ? (
-                    <TabPane tab="部门" key="1">
-                      <div className={styles.checkContent}>
-                        {emptyValue == 0 ? (
-                          <div className={styles.check}>
-                            <Checkbox indeterminate={indeterminate1} onChange={onCheckAllChange1} checked={checkAll1}>
-                              全选
-                            </Checkbox>
-                            <Divider />
-                            <CheckboxGroup
-                              options={optionValue['部门']}
-                              value={checkedList[1]}
-                              onChange={onChangeListNew1}
-                            />
-                          </div>
-                        ) : (
-                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
-                        )}
-                      </div>
-                    </TabPane>
-                  ) : (
-                    <></>
-                  )}
-                  {chooseGroupName.indexOf('站点') !== -1 ? (
-                    <TabPane tab="站点" key="2">
-                      <div className={styles.checkContent}>
-                        {emptyValue == 0 ? (
-                          <div className={styles.check}>
-                            {isRadio ? (
-                              <Radio.Group onChange={radioChange} value={radioValue}>
-                                {optionValue['站点']?.map(i => <Radio value={i.value}>{i.label}</Radio>)}
-                              </Radio.Group>
-                            ) : (
-                              <>
-                                <Checkbox
-                                  indeterminate={indeterminate2}
-                                  onChange={onCheckAllChange2}
-                                  checked={checkAll2}
-                                >
-                                  全选
-                                </Checkbox>
-                                <Divider />
-                                <CheckboxGroup
-                                  options={optionValue['站点']}
-                                  value={checkedList[2]}
-                                  onChange={onChangeListNew2}
-                                />
-                              </>
-                            )}
-                          </div>
-                        ) : (
-                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
-                        )}
-                      </div>
-                    </TabPane>
-                  ) : (
-                    <></>
-                  )}
-                </Tabs>
-              )}
-            </div>
-            {/* 分页 */}
-            <div className={styles.footer}>
-              <Pagination
-                size="small"
-                total={total}
-                showSizeChanger
-                defaultPageSize={pageSize}
-                defaultCurrent={1}
-                pageSizeOptions={[10, 20, 45, 100]}
-                current={currentPage}
-                onChange={paginationChange}
-                style={{ marginBottom: '10px' }}
-              />
-            </div>
-          </div>
-          {/* 已选列表 */}
-          <div className={styles.selectedList}>
-            <div className={styles.header}>
-              <div className={styles.title}>已选列表</div>
-              <div className={styles.tagHead}>
+    <Modal
+      title="权限选择"
+      bodyStyle={{ width: '100%', height: '590px', overflowY: 'scorll' }}
+      width="1000px"
+      style={{ top: '-20px' }}
+      destroyOnClose
+      centered
+      cancelText="取消"
+      okText="确认"
+      {...props}
+      onOk={() => onSubmit()}
+      forceRender
+      // getContainer={false}
+      afterClose={() => {
+        setKeyValue('0');
+        setSearchWord('');
+      }}
+      wrapClassName="roleModalContainer"
+    >
+      <div className={styles.pageContent}>
+        {/* 可选列表 */}
+        <div className={styles.optionalList}>
+          <div className={styles.header} />
+          <Search
+            className={styles.searchInput}
+            allowClear
+            placeholder="搜索"
+            onSearch={submitSearchUser}
+            onChange={e => handleSearch(e)}
+            value={searchWord}
+          />
+          <div className={styles.tabContent}>
+            {visible && (
+              <Tabs type="card" activeKey={keyValue} onChange={handleParChange}>
                 {chooseGroupName.indexOf('角色') !== -1 ? (
-                  <div className={styles.tagContent}>
-                    <div className={styles.tagRol} />
-                    <div>角色</div>
-                  </div>
+                  <TabPane tab="角色" key="0">
+                    <div className={styles.checkContent}>
+                      {emptyValue == 0 ? (
+                        <div className={styles.check}>
+                          <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
+                            全选
+                          </Checkbox>
+                          <Divider />
+                          <CheckboxGroup
+                            options={optionValue['角色']}
+                            value={checkedList[0]}
+                            onChange={onChangeListNew}
+                          />
+                        </div>
+                      ) : (
+                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
+                      )}
+                    </div>
+                  </TabPane>
                 ) : (
                   <></>
                 )}
                 {chooseGroupName.indexOf('部门') !== -1 ? (
-                  <div className={styles.tagContent}>
-                    <div className={styles.tagOrg} />
-                    <div>部门</div>
-                  </div>
+                  <TabPane tab="部门" key="1">
+                    <div className={styles.checkContent}>
+                      {emptyValue == 0 ? (
+                        <div className={styles.check}>
+                          <Checkbox indeterminate={indeterminate1} onChange={onCheckAllChange1} checked={checkAll1}>
+                            全选
+                          </Checkbox>
+                          <Divider />
+                          <CheckboxGroup
+                            options={optionValue['部门']}
+                            value={checkedList[1]}
+                            onChange={onChangeListNew1}
+                          />
+                        </div>
+                      ) : (
+                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
+                      )}
+                    </div>
+                  </TabPane>
                 ) : (
                   <></>
                 )}
                 {chooseGroupName.indexOf('站点') !== -1 ? (
-                  <div className={styles.tagContent}>
-                    <div className={styles.tagSite} />
-                    <div>站点</div>
-                  </div>
+                  <TabPane tab="站点" key="2">
+                    <div className={styles.checkContent}>
+                      {emptyValue == 0 ? (
+                        <div className={styles.check}>
+                          {isRadio ? (
+                            <Radio.Group onChange={radioChange} value={radioValue}>
+                              {optionValue['站点']?.map(i => <Radio value={i.value}>{i.label}</Radio>)}
+                            </Radio.Group>
+                          ) : (
+                            <>
+                              <Checkbox indeterminate={indeterminate2} onChange={onCheckAllChange2} checked={checkAll2}>
+                                全选
+                              </Checkbox>
+                              <Divider />
+                              <CheckboxGroup
+                                options={optionValue['站点']}
+                                value={checkedList[2]}
+                                onChange={onChangeListNew2}
+                              />
+                            </>
+                          )}
+                        </div>
+                      ) : (
+                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
+                      )}
+                    </div>
+                  </TabPane>
                 ) : (
                   <></>
                 )}
-              </div>
-            </div>
-            <div className={styles.selectBox}>
-              {[...selected].length > 0 ? (
-                <div className={styles.selectContent}>
-                  {[...selected].map(item => (
-                    <div className={styles.selectValue} key={item[0]}>
-                      <Tag closable color={changeColor(item[1].type)} onClose={() => delSelected(item[0])}>
-                        {item[1].value}
-                      </Tag>
-                    </div>
-                  ))}
+              </Tabs>
+            )}
+          </div>
+        </div>
+        {/* 已选列表 */}
+        <div className={styles.selectedList}>
+          <div className={styles.header}>
+            <div className={styles.title}>已选列表</div>
+            <div className={styles.tagHead}>
+              {chooseGroupName.indexOf('角色') !== -1 ? (
+                <div className={styles.tagContent}>
+                  <div className={styles.tagRol} />
+                  <div>角色</div>
                 </div>
               ) : (
-                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={`请选择${chooseGroupName.toString()}`} />
+                <></>
+              )}
+              {chooseGroupName.indexOf('部门') !== -1 ? (
+                <div className={styles.tagContent}>
+                  <div className={styles.tagOrg} />
+                  <div>部门</div>
+                </div>
+              ) : (
+                <></>
+              )}
+              {chooseGroupName.indexOf('站点') !== -1 ? (
+                <div className={styles.tagContent}>
+                  <div className={styles.tagSite} />
+                  <div>站点</div>
+                </div>
+              ) : (
+                <></>
               )}
             </div>
           </div>
+          <div className={styles.selectBox}>
+            {[...selected].length > 0 ? (
+              <div className={styles.selectContent}>
+                {[...selected].map(item => (
+                  <div className={styles.selectValue} key={item[0]}>
+                    <Tag closable color={changeColor(item[1].type)} onClose={() => delSelected(item[0])}>
+                      {item[1].value}
+                    </Tag>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={`请选择${chooseGroupName.toString()}`} />
+            )}
+          </div>
         </div>
-      </Modal>
-    </div>
+      </div>
+    </Modal>
   );
 };
 

src/pages/integratedLogin/components/RolePmSite/index.less

-.modalContainer {
-  .ant-modal-body {
-    padding: 0;
-  }
+.pageContent {
+  display: flex;
+  height: 100%;
+
+  .optionalList {
+    position: relative;
+    width: 68%;
+    border-right: 1px solid #e7e7e7;
+
+    .title {
+      position: absolute;
+      left: 17px;
+      top: 10px;
+      font-weight: 700;
+      font-size: 14px;
+      z-index: 1;
+      color: #00070d;
+    }
+
+    .tabContent {
+      height: 590px;
+
+
+    }
+
+    .searchInput {
+      position: absolute;
+      width: 200px;
+      z-index: 1;
+      top: 3px;
+      right: 40px;
+
+
+    }
+
+    .checkContent {
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: 32px;
+      height: 525px;
+      overflow-y: scroll;
+
+      .check {}
+    }
+
+    .footer {
+      padding-left: 25px;
+
+
+    }
 
-  .ant-modal-header {
-    padding: 28px 16px;
   }
 
-  .pageContent {
-    display: flex;
-    height: 100%;
+  .selectedList {
+    position: relative;
+    width: 40%;
 
-    .optionalList {
-      position: relative;
-      width: 68%;
-      border-right: 1px solid #e7e7e7;
+    .header {
+      height: 40px;
+      width: 100%;
+      background-color: #f2f1f1;
 
       .title {
         position: absolute;
@@ -26,184 +70,151 @@
         color: #00070d;
       }
 
-      .tabContent {
-        height: 590px;
+      .tagHead {
+        display: flex;
+        position: absolute;
+        top: 10px;
+        left: 88px;
 
-        .ant-tabs-content-holder {
-          height: 523px;
+        .tagContent {
+          display: flex;
+          align-items: center;
+          margin-right: 11px;
         }
-      }
 
-      .searchInput {
-        position: absolute;
-        width: 200px;
-        z-index: 1;
-        top: 3px;
-        right: 40px;
+        .tagRol,
+        .tagOrg,
+        .tagSite {
+          width: 10px;
+          height: 3px;
 
-        .anticon svg {
-          margin-top: 0px;
+          margin-right: 5px;
         }
 
-        .ant-input,
-        .ant-input-affix-wrapper {
-          border-top-left-radius: 20px;
-          border-bottom-left-radius: 20px;
+        .tagRol {
+          background-color: #87e8de;
         }
 
-        .ant-input-group-addon {
-          border-top-right-radius: 20px;
-          border-bottom-right-radius: 20px;
+        .tagOrg {
+          background-color: #ffd591;
         }
 
-        .ant-input-search-button {
-          width: 40px;
-          border-top-right-radius: 20px;
-          border-bottom-right-radius: 20px;
+        .tagSite {
+          background-color: #a785dd;
         }
       }
+    }
+
+    .selectBox {
+      height: 528px;
+      padding: 10px;
+      overflow-y: scroll;
 
-      .checkContent {
+      .selectContent {
         display: flex;
         flex-wrap: wrap;
-        margin-left: 32px;
-        height: 525px;
-        overflow-y: scroll;
-
-        .check {
-          .ant-checkbox-wrapper {
-            width: 180px;
-            margin-bottom: 10px;
-            margin-left: 6px;
-          }
-
-          .ant-checkbox-wrapper span {
-            max-width: 160px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          .ant-radio-wrapper {
-            width: 180px;
-            margin-bottom: 10px;
-            margin-left: 6px;
-          }
-
-          .ant-radio-wrapper span {
-            max-width: 160px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
+        flex-direction: row;
+
+        .selectValue {
+          margin-bottom: 15px;
         }
       }
+    }
+  }
+}
 
-      .footer {
-        padding-left: 25px;
+:global {
+  .roleModalContainer {
+    .anticon svg {
+      margin-top: 0px;
+    }
 
-        .ant-pagination {
-          border: none;
-        }
-      }
+    .@{ant-prefix}-tabs-content-holder {
+      height: 523px;
+    }
 
-      .ant-tabs-nav {
-        background-color: #f2f1f1;
-      }
+    .@{ant-prefix}-input,
+    .@{ant-prefix}-input-affix-wrapper {
+      border-top-left-radius: 20px !important;
+      border-bottom-left-radius: 20px !important;
+    }
 
-      .ant-tabs-tab {
-        background-color: #f2f1f1;
-        color: #666666;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-      }
+    .@{ant-prefix}-input-group-addon {
+      border-top-right-radius: 20px !important;
+      border-bottom-right-radius: 20px !important;
+    }
 
-      .ant-tabs-tab-active {
-        background-color: #fff;
-        color: #1685ff;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-      }
+    .@{ant-prefix}-input-search-button {
+      width: 40px;
+      border-top-right-radius: 20px !important;
+      border-bottom-right-radius: 20px !important;
     }
 
-    .selectedList {
-      position: relative;
-      width: 40%;
+    .@{ant-prefix}-pagination {
+      border: none;
+    }
 
-      .header {
-        height: 40px;
-        width: 100%;
-        background-color: #f2f1f1;
+    .@{ant-prefix}-checkbox-wrapper {
+      width: 180px;
+      margin-bottom: 10px;
+      // margin-left: 6px;
+    }
 
-        .title {
-          position: absolute;
-          left: 17px;
-          top: 10px;
-          font-weight: 700;
-          font-size: 14px;
-          z-index: 1;
-          color: #00070d;
-        }
+    .@{ant-prefix}-checkbox-wrapper span {
+      max-width: 160px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-        .tagHead {
-          display: flex;
-          position: absolute;
-          top: 10px;
-          left: 88px;
-
-          .tagContent {
-            display: flex;
-            align-items: center;
-            margin-right: 11px;
-          }
-
-          .tagRol,
-          .tagOrg,
-          .tagSite {
-            width: 10px;
-            height: 3px;
-
-            margin-right: 5px;
-          }
-
-          .tagRol {
-            background-color: #87e8de;
-          }
-
-          .tagOrg {
-            background-color: #ffd591;
-          }
-
-          .tagSite {
-            background-color: #a785dd;
-          }
-        }
-      }
+    .@{ant-prefix}-radio-wrapper {
+      width: 180px;
+      margin-bottom: 10px;
+      margin-left: 6px;
+    }
 
-      .selectBox {
-        height: 528px;
-        padding: 10px;
-        overflow-y: scroll;
+    .@{ant-prefix}-radio-wrapper span {
+      max-width: 160px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-        .selectContent {
-          display: flex;
-          flex-wrap: wrap;
-          flex-direction: row;
+    .@{ant-prefix}-tabs-nav {
+      background-color: #f2f1f1;
+    }
 
-          .selectValue {
-            margin-bottom: 15px;
-          }
-        }
-      }
+    .@{ant-prefix}-tabs-tab {
+      background-color: #f2f1f1;
+      color: #666666;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
     }
-  }
 
-  .ant-empty-normal {
-    margin: auto;
-  }
+    .@{ant-prefix}-tabs-tab-active {
+      background-color: #fff;
+      color: #1685ff;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+    }
+
+    .@{ant-prefix}-modal-body {
+      padding: 0;
+    }
+
+    .@{ant-prefix}-modal-header {
+      padding: 28px 16px;
+    }
+
+
+    .@{ant-prefix}-empty-normal {
+      margin: auto;
+    }
+
+    .@{ant-prefix}-divider-horizontal {
+      margin-top: 0px;
+      margin-bottom: 10px;
+    }
 
-  .ant-divider-horizontal {
-    margin-top: 0px;
-    margin-bottom: 10px;
   }
 }
\ No newline at end of file

src/pages/integratedLogin/index.js

@@ -55,7 +55,8 @@ const IntegratedLogin = props => {
   const [keepSystemName, setKeepSystemName] = useState([]);
   const [groupList, setGroupList] = useState([]); // 分组列表
   const [targetType, setTargetType] = useState('');
-
+  const [roleList, setRoleList] = useState([]); // 角色列表
+  const [moduleList, setModuleList] = useState([]); // 网站列表
   const { Search } = Input;
 
   const columns = [
@@ -398,15 +399,38 @@ const IntegratedLogin = props => {
   const onMasterBack = data => {
     if (data) configSetting.current = data;
   };
+  const getConfigData = () => {
+    appService
+      .LoadDepartmentAndRole({
+        type: '角色',
+        keywords: '',
+        pageSize: 999,
+        pageIndex: 1,
+      })
+      .then(res => {
+        setRoleList(res.data?.data || []);
+      });
+    // appService
+    //   .getWebModuleTree({
+    //     userMode: 'super',
+    //   })
+    //   .then(res => {
+    //     const data = res.data || [];
+    //     const list = data.find(d => d.text === '一般网站')?.children || [];
+    //     setModuleList(list);
+    //   });
+  };
   const getConfig = () => {
     appService
       .GetIntegratedloginSetting()
       .then(res => {
         configSetting.current = res.data || {};
         getData();
+        getConfigData();
       })
       .catch(err => {
         getData();
+        getConfigData();
       });
   };
   useEffect(() => {
@@ -480,6 +504,7 @@ const IntegratedLogin = props => {
           groupList={groupList}
           destroyOnClose
           keepSystemName={keepSystemName}
+          roleList={roleList}
         />
       ) : null}
       {/* 集成网站 */}