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.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}
       {/* 集成网站 */}