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');
+  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.setFieldsValue({ roles: newData.toString() });
-        }
         }
       });
+      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,14 +71,14 @@ 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'));
-
-          keepFiled.current = groupArr(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);
@@ -85,12 +89,13 @@ const RMSComponents = props => {
         setKeyValue('2');
         setKeepTabKey(2);
       }
-          getRoles(groupName, '', pageSize, 1, 0);
+
       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) {
@@ -114,6 +119,7 @@ const RMSComponents = props => {
       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) {
@@ -137,6 +143,7 @@ const RMSComponents = props => {
       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) {
@@ -161,8 +168,7 @@ const RMSComponents = props => {
       }
       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,40 +201,29 @@ 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);
+  // 搜索时获取数据
+  const sreachRoles = async (type, keywords, pageSizes, pageIndex) => {
+    let mData = cloneDeep(allData);
+    if (!mData) {
+      const res = await appService.LoadDepartmentAndRole({
+        type,
+        keywords,
+        pageSize: 999,
+        pageIndex: 1,
+      });
+      mData = res.data?.data || [];
     }
-    if (keepTabKey == 1) {
-      getRoles('部门', searchWord, pageSizes, page);
+    if (keywords && allData) {
+      mData = mData.map(m => {
+        if (m.root) {
+          m.root = m.root.filter(a => a.Name.includes(keywords));
         }
-    if (keepTabKey == 2) {
-      getRoles('站点', searchWord, pageSizes, page);
+        return m;
+      });
     }
-    setCurrentPage(page);
-    setPageSize(pageSizes);
-  };
 
-  // 搜索时获取数据
-  const sreachRoles = (type, keywords, pageSizes, pageIndex) => {
-    appService
-      .LoadDepartmentAndRole({
-        type,
-        keywords,
-        pageSize: pageSizes,
-        pageIndex,
-      })
-      .then(res => {
-        if (res.msg === 'Ok') {
-          setOptionValue(groupArr(res.data, 'groupType'));
-          const aa = groupArr(res.data, 'groupType');
+    setOptionValue(groupArr(mData, 'groupType'));
+    const aa = groupArr(mData, 'groupType');
     const list = [];
     let data = '';
     if (type == '角色') {
@@ -276,29 +274,29 @@ const RMSComponents = props => {
       }
     }
     setCurrentPage(1);
-          setTotal(res.data.count);
-          if (res.data.count == 0) {
+    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');
+        pageSize: 999,
+        pageIndex: 1,
+      });
+      mData = res.data?.data || [];
+    }
+
+    setTotal(mData.length);
+    setOptionValue(groupArr(mData, 'groupType'));
+    const aa = groupArr(mData, 'groupType');
     const list = [];
     let data = '';
     if (type === '角色') {
@@ -312,12 +310,14 @@ const RMSComponents = props => {
     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());
             }
           });
+        }
       });
       aa[type] &&
         aa[type].map(i => {
@@ -368,18 +368,17 @@ const RMSComponents = props => {
         setIndeterminate2(false);
       }
     }
-          if (res.data.count == 0) {
+    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,7 +812,6 @@ const RMSComponents = props => {
   };
 
   return (
-    <div className={styles.modalContainer}>
     <Modal
       title="权限选择"
       bodyStyle={{ width: '100%', height: '590px', overflowY: 'scorll' }}
@@ -826,11 +824,12 @@ const RMSComponents = props => {
       {...props}
       onOk={() => onSubmit()}
       forceRender
-        getContainer={false}
+      // getContainer={false}
       afterClose={() => {
         setKeyValue('0');
         setSearchWord('');
       }}
+      wrapClassName="roleModalContainer"
     >
       <div className={styles.pageContent}>
         {/* 可选列表 */}
@@ -904,11 +903,7 @@ const RMSComponents = props => {
                             </Radio.Group>
                           ) : (
                             <>
-                                <Checkbox
-                                  indeterminate={indeterminate2}
-                                  onChange={onCheckAllChange2}
-                                  checked={checkAll2}
-                                >
+                              <Checkbox indeterminate={indeterminate2} onChange={onCheckAllChange2} checked={checkAll2}>
                                 全选
                               </Checkbox>
                               <Divider />
@@ -931,20 +926,6 @@ const RMSComponents = props => {
               </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}>
@@ -995,7 +976,6 @@ const RMSComponents = props => {
         </div>
       </div>
     </Modal>
-    </div>
   );
 };
 

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

-.modalContainer {
-  .ant-modal-body {
-    padding: 0;
-  }
-
-  .ant-modal-header {
-    padding: 28px 16px;
-  }
-
-  .pageContent {
+.pageContent {
   display: flex;
   height: 100%;
 
@@ -29,9 +20,7 @@
     .tabContent {
       height: 590px;
 
-        .ant-tabs-content-holder {
-          height: 523px;
-        }
+
     }
 
     .searchInput {
@@ -41,26 +30,7 @@
       top: 3px;
       right: 40px;
 
-        .anticon svg {
-          margin-top: 0px;
-        }
-
-        .ant-input,
-        .ant-input-affix-wrapper {
-          border-top-left-radius: 20px;
-          border-bottom-left-radius: 20px;
-        }
-
-        .ant-input-group-addon {
-          border-top-right-radius: 20px;
-          border-bottom-right-radius: 20px;
-        }
 
-        .ant-input-search-button {
-          width: 40px;
-          border-top-right-radius: 20px;
-          border-bottom-right-radius: 20px;
-        }
     }
 
     .checkContent {
@@ -70,60 +40,15 @@
       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;
-          }
-        }
+      .check {}
     }
 
     .footer {
       padding-left: 25px;
 
-        .ant-pagination {
-          border: none;
-        }
-      }
 
-      .ant-tabs-nav {
-        background-color: #f2f1f1;
     }
 
-      .ant-tabs-tab {
-        background-color: #f2f1f1;
-        color: #666666;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-      }
-
-      .ant-tabs-tab-active {
-        background-color: #fff;
-        color: #1685ff;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-      }
   }
 
   .selectedList {
@@ -196,14 +121,100 @@
       }
     }
   }
+}
+
+:global {
+  .roleModalContainer {
+    .anticon svg {
+      margin-top: 0px;
     }
 
-  .ant-empty-normal {
+    .@{ant-prefix}-tabs-content-holder {
+      height: 523px;
+    }
+
+    .@{ant-prefix}-input,
+    .@{ant-prefix}-input-affix-wrapper {
+      border-top-left-radius: 20px !important;
+      border-bottom-left-radius: 20px !important;
+    }
+
+    .@{ant-prefix}-input-group-addon {
+      border-top-right-radius: 20px !important;
+      border-bottom-right-radius: 20px !important;
+    }
+
+    .@{ant-prefix}-input-search-button {
+      width: 40px;
+      border-top-right-radius: 20px !important;
+      border-bottom-right-radius: 20px !important;
+    }
+
+    .@{ant-prefix}-pagination {
+      border: none;
+    }
+
+    .@{ant-prefix}-checkbox-wrapper {
+      width: 180px;
+      margin-bottom: 10px;
+      // margin-left: 6px;
+    }
+
+    .@{ant-prefix}-checkbox-wrapper span {
+      max-width: 160px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .@{ant-prefix}-radio-wrapper {
+      width: 180px;
+      margin-bottom: 10px;
+      margin-left: 6px;
+    }
+
+    .@{ant-prefix}-radio-wrapper span {
+      max-width: 160px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .@{ant-prefix}-tabs-nav {
+      background-color: #f2f1f1;
+    }
+
+    .@{ant-prefix}-tabs-tab {
+      background-color: #f2f1f1;
+      color: #666666;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+    }
+
+    .@{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-divider-horizontal {
+    .@{ant-prefix}-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}
       {/* 集成网站 */}