Skip to content

C
CivWeb
Commit b02f3882 authored by 周宏民's avatar 周宏民
Browse files
Options

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

parent 5bb3fe38
Pipeline #93685 passed with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 652 additions and 610 deletions
          src/api/service/base.js
          View file @ b02f3882
          ...@@ -64,6 +64,8 @@ export const API = { ...@@ -64,6 +64,8 @@ export const API = {
          GET_CONFIG_FILE_JSON: '/PandaCore/GCK/FileCenter/ConfigJSON', // 获取配置文件 GET_CONFIG_FILE_JSON: '/PandaCore/GCK/FileCenter/ConfigJSON', // 获取配置文件
          GET_CONFIG_FILE_LIST: '/PandaOMS/OMS/FileCenter/GetFileUrls', // 获取用户上传 GET_CONFIG_FILE_LIST: '/PandaOMS/OMS/FileCenter/GetFileUrls', // 获取用户上传
          EnableIntegrationConfig: '/PandaCore/GCK/IntegrationAuth/EnableIntegrationConfig', // 开启或关闭集成登录 EnableIntegrationConfig: '/PandaCore/GCK/IntegrationAuth/EnableIntegrationConfig', // 开启或关闭集成登录
          getWebModuleTree: '/PandaOMS/OMS/PlatformCenter/WebModuleTree', // 获取所有网站
          }; };
          const services = { const services = {
          ...@@ -331,6 +333,11 @@ const services = { ...@@ -331,6 +333,11 @@ const services = {
          method: constants.REQUEST_METHOD_GET, method: constants.REQUEST_METHOD_GET,
          type: constants.REQUEST_HTTP, type: constants.REQUEST_HTTP,
          }, },
          getWebModuleTree: {
          url: API.getWebModuleTree,
          method: constants.REQUEST_METHOD_GET,
          type: constants.REQUEST_HTTP,
          },
          }; };
          export const searchAutoCity = keywords => { export const searchAutoCity = keywords => {
          ......
          src/pages/integratedLogin/components/AddModal.js
          View file @ b02f3882
          ...@@ -16,6 +16,8 @@ import { ...@@ -16,6 +16,8 @@ import {
          Switch, Switch,
          Tooltip, Tooltip,
          } from 'antd'; } from 'antd';
          import { cloneDeep } from 'lodash';
          import { PlusOutlined, LoadingOutlined, RedoOutlined, InfoCircleOutlined } from '@ant-design/icons'; import { PlusOutlined, LoadingOutlined, RedoOutlined, InfoCircleOutlined } from '@ant-design/icons';
          import CryptoJS from 'crypto-js'; import CryptoJS from 'crypto-js';
          import { getImageUrl } from '@/utils/utils'; import { getImageUrl } from '@/utils/utils';
          ...@@ -28,7 +30,17 @@ const { Item } = Form; ...@@ -28,7 +30,17 @@ const { Item } = Form;
          const { TextArea } = Input; const { TextArea } = Input;
          const AddModal = props => { 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 [loading, setLoading] = useState(false);
          const [form] = Form.useForm(); const [form] = Form.useForm();
          const subTypes = Form.useWatch('subType', form); const subTypes = Form.useWatch('subType', form);
          ...@@ -50,8 +62,9 @@ const AddModal = props => { ...@@ -50,8 +62,9 @@ const AddModal = props => {
          const { Option } = Select; const { Option } = Select;
          const pickFiled1 = fileds => { const pickFiled1 = fileds => {
          if (form.getFieldValue(fileds)) { const filed = form.getFieldValue(fileds);
          setCheckedList1(form.getFieldValue(fileds).split(',')); if (filed) {
          setCheckedList1(filed.split(','));
          setPick(fileds); setPick(fileds);
          setIsVisibleRoles(true); setIsVisibleRoles(true);
          } else { } else {
          ...@@ -63,7 +76,8 @@ const AddModal = props => { ...@@ -63,7 +76,8 @@ const AddModal = props => {
          const groupArr = (initialArr, name) => { const groupArr = (initialArr, name) => {
          const list = {}; const list = {};
          initialArr.data.map(i => { if (!Array.isArray(initialArr)) return list;
          initialArr.map(i => {
          const ar = []; const ar = [];
          i.root.map(j => { i.root.map(j => {
          const ss = {}; const ss = {};
          ...@@ -303,26 +317,28 @@ const AddModal = props => { ...@@ -303,26 +317,28 @@ const AddModal = props => {
          } }
          }); });
          }; };
          const getRole = () => { const getRole = async () => {
          appService.LoadDepartmentAndRole().then(res => { let mData = cloneDeep(roleList);
          if (res.code === 0) { if (!mData) {
          setKeepFiled(groupArr(res.data, 'groupType')); const res = await appService.LoadDepartmentAndRole();
          const aa = groupArr(res.data, 'groupType'); mData = res.data?.data || [];
          if (type === 'edit' && pickItem.roles) { }
          const data = pickItem.roles.split(','); setKeepFiled(groupArr(mData, 'groupType'));
          const newData = []; const aa = groupArr(mData, 'groupType');
          data.forEach(item => { if (type === 'edit' && pickItem.roles) {
          const list = aa.角色.find(i => i.value === item); const data = pickItem.roles.split(',');
          if (list) newData.push(list.label); const newData = [];
          }); data.forEach(item => {
          form.setFieldsValue({ roles: newData.toString() }); if (aa['角色']) {
          const list = aa.角色.find(i => i.value === item);
          if (list) newData.push(list.label);
          } }
          } });
          }); form && form.setFieldsValue({ roles: newData.join(',') });
          }
          }; };
          useEffect(() => { useEffect(() => {
          if (visible) { if (visible) {
          getRole();
          if (type === 'edit') { if (type === 'edit') {
          const { const {
          paramName, paramName,
          ...@@ -347,7 +363,7 @@ const AddModal = props => { ...@@ -347,7 +363,7 @@ const AddModal = props => {
          subType, subType,
          name, name,
          icon, icon,
          roles: roles ? roles.split(',') : null, roles: roles || '',
          appKey, appKey,
          appSecret, appSecret,
          whiteList, whiteList,
          ...@@ -358,6 +374,9 @@ const AddModal = props => { ...@@ -358,6 +374,9 @@ const AddModal = props => {
          }); });
          setImageUrl(icon || ''); setImageUrl(icon || '');
          setImageBgUrl(backgroundImage || ''); setImageBgUrl(backgroundImage || '');
          setTimeout(() => {
          getRole();
          }, 0);
          } else { } else {
          form.setFieldsValue({ form.setFieldsValue({
          paramValue: '', paramValue: '',
          ...@@ -695,6 +714,7 @@ const AddModal = props => { ...@@ -695,6 +714,7 @@ const AddModal = props => {
          chooseGroupName={chooseGroupName} // 可选分组名 chooseGroupName={chooseGroupName} // 可选分组名
          keepFiled={keepFiled} keepFiled={keepFiled}
          dataType="name" dataType="name"
          allData={roleList}
          /> />
          </Modal> </Modal>
          ); );
          ......
          src/pages/integratedLogin/components/RolePmSite/index.js
          View file @ b02f3882
          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 { Modal, Checkbox, Tabs, Input, Button, Pagination, Empty, Tag, Divider, Radio } from 'antd';
          import { appService } from '@/api'; import { appService } from '@/api';
          import { cloneDeep } from 'lodash';
          import styles from './index.less'; import styles from './index.less';
          const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
          const { TabPane } = Tabs; const { TabPane } = Tabs;
          ...@@ -15,6 +18,7 @@ const RMSComponents = props => { ...@@ -15,6 +18,7 @@ const RMSComponents = props => {
          chooseGroupName, chooseGroupName,
          dataType, dataType,
          isRadio, isRadio,
          allData,
          } = props; } = props;
          const [checkedList, setCheckedList] = useState([]); // 选中复选框内容 const [checkedList, setCheckedList] = useState([]); // 选中复选框内容
          const [searchWord, setSearchWord] = useState(''); // 关键字 const [searchWord, setSearchWord] = useState(''); // 关键字
          ...@@ -67,102 +71,104 @@ const RMSComponents = props => { ...@@ -67,102 +71,104 @@ const RMSComponents = props => {
          setKeyValue('0'); setKeyValue('0');
          setSearchWord(''); setSearchWord('');
          }; };
          const init = async () => {
          useEffect(() => {
          if (visible) { if (visible) {
          appService.LoadDepartmentAndRole().then(res => { let mData = cloneDeep(allData);
          if (res.msg === 'Ok') { if (!mData) {
          // setFiled1(formateArrDataA1(res.data, 'groupType')); 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'); const checkArr = [];
          if (groupName == '角色') { // 角色
          setKeyValue('0'); const listdata = [];
          setKeepTabKey(0); const listId = [];
          } else if (groupName == '部门') { newCheckedList.map(checkItem => {
          setKeyValue('1'); keepFiled.current['角色'] &&
          setKeepTabKey(1); keepFiled.current['角色'].map(i => {
          } else if (groupName == '站点') { const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
          setKeyValue('2'); if (canSave) {
          setKeepTabKey(2); listdata.push(i);
          } listId.push(i.value.toString());
          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,
          });
          }); });
          setSelected(cs1); });
          const datapmId = Array.from(new Set(pmId)); const cs = selected;
          setCheckDataPm(datapmId); listdata.map(i => {
          checkArr[1] = datapmId; cs.set(i.value, {
          // 站点 value: i.label,
          const sitedata = []; type: 0,
          const siteId = []; });
          newCheckedList.map(checkItem => { });
          keepFiled.current['站点'].map(i => { setSelected(cs);
          const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem; const dataId = Array.from(new Set(listId));
          if (canSave) { setCheckDataRole(dataId); // 用于设置首次展示已选列表角色数据
          sitedata.push(i); checkArr[0] = dataId;
          siteId.push(i.value.toString()); // 部门
          } 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 => { const cs1 = selected;
          cs2.set(i.value, { pmdata.map(i => {
          value: i.label, cs1.set(i.value, {
          type: 2, 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 { } else {
          setSelected(new Map()); setSelected(new Map());
          setPageSize(45); setPageSize(45);
          ...@@ -173,6 +179,9 @@ const RMSComponents = props => { ...@@ -173,6 +179,9 @@ const RMSComponents = props => {
          setRadioValue(); setRadioValue();
          setOptionValue([]); setOptionValue([]);
          } }
          };
          useEffect(() => {
          init();
          }, [visible]); }, [visible]);
          const submitSearchUser = () => { const submitSearchUser = () => {
          ...@@ -192,194 +201,184 @@ const RMSComponents = props => { ...@@ -192,194 +201,184 @@ const RMSComponents = props => {
          setSearchWord(e.target.value); 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) => { const sreachRoles = async (type, keywords, pageSizes, pageIndex) => {
          appService let mData = cloneDeep(allData);
          .LoadDepartmentAndRole({ if (!mData) {
          const res = await appService.LoadDepartmentAndRole({
          type, type,
          keywords, keywords,
          pageSize: pageSizes, pageSize: 999,
          pageIndex, pageIndex: 1,
          }) });
          .then(res => { mData = res.data?.data || [];
          if (res.msg === 'Ok') { }
          setOptionValue(groupArr(res.data, 'groupType')); if (keywords && allData) {
          const aa = groupArr(res.data, 'groupType'); mData = mData.map(m => {
          const list = []; if (m.root) {
          let data = ''; m.root = m.root.filter(a => a.Name.includes(keywords));
          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);
          }
          } }
          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) => { const getRoles = async (type, keywords, pageSizes, pageIndex, flag, check) => {
          appService let mData = cloneDeep(allData);
          .LoadDepartmentAndRole({ if (!mData) {
          const res = await appService.LoadDepartmentAndRole({
          type, type,
          keywords, keywords,
          pageSize: pageSizes, pageSize: 999,
          pageIndex, pageIndex: 1,
          }) });
          .then(res => { mData = res.data?.data || [];
          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);
          }
          });
          }
          if (list.length === aa[type].length) { setTotal(mData.length);
          if (type == '角色') { setOptionValue(groupArr(mData, 'groupType'));
          setCheckAll(true); const aa = groupArr(mData, 'groupType');
          setIndeterminate(false); const list = [];
          } else if (type == '部门') { let data = '';
          setCheckAll1(true); if (type === '角色') {
          setIndeterminate1(false); data = 0;
          } else if (type == '站点') { } else if (type === '部门') {
          setCheckAll2(true); data = 1;
          setIndeterminate2(false); } else if (type === '站点') {
          } data = 2;
          } else if (list.length < aa[type].length && list.length !== 0) { }
          if (type == '角色') { // 首次进入调用
          setCheckAll(false); if (flag != undefined) {
          setIndeterminate(true); const listId = [];
          } else if (type == '部门') { newCheckedList.map(checkItem => {
          setCheckAll1(false); if (keepFiled.current[groupName]) {
          setIndeterminate1(true); keepFiled.current[groupName].map(i => {
          } else if (type == '站点') { const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
          setCheckAll2(false); if (canSave) {
          setIndeterminate2(true); listId.push(i.value.toString());
          }
          } 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 (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 groupArr = (initialArr, name) => {
          const list = {}; const list = {};
          initialArr.data.map(i => { if (!Array.isArray(initialArr)) return list;
          initialArr.map(i => {
          const ar = []; const ar = [];
          i.root.map(j => { i.root.map(j => {
          const ss = {}; const ss = {};
          ...@@ -813,189 +812,170 @@ const RMSComponents = props => { ...@@ -813,189 +812,170 @@ const RMSComponents = props => {
          }; };
          return ( return (
          <div className={styles.modalContainer}> <Modal
          <Modal title="权限选择"
          title="权限选择" bodyStyle={{ width: '100%', height: '590px', overflowY: 'scorll' }}
          bodyStyle={{ width: '100%', height: '590px', overflowY: 'scorll' }} width="1000px"
          width="1000px" style={{ top: '-20px' }}
          style={{ top: '-20px' }} destroyOnClose
          destroyOnClose centered
          centered cancelText="取消"
          cancelText="取消" okText="确认"
          okText="确认" {...props}
          {...props} onOk={() => onSubmit()}
          onOk={() => onSubmit()} forceRender
          forceRender // getContainer={false}
          getContainer={false} afterClose={() => {
          afterClose={() => { setKeyValue('0');
          setKeyValue('0'); setSearchWord('');
          setSearchWord(''); }}
          }} wrapClassName="roleModalContainer"
          > >
          <div className={styles.pageContent}> <div className={styles.pageContent}>
          {/* 可选列表 */} {/* 可选列表 */}
          <div className={styles.optionalList}> <div className={styles.optionalList}>
          <div className={styles.header} /> <div className={styles.header} />
          <Search <Search
          className={styles.searchInput} className={styles.searchInput}
          allowClear allowClear
          placeholder="搜索" placeholder="搜索"
          onSearch={submitSearchUser} onSearch={submitSearchUser}
          onChange={e => handleSearch(e)} onChange={e => handleSearch(e)}
          value={searchWord} value={searchWord}
          /> />
          <div className={styles.tabContent}> <div className={styles.tabContent}>
          {visible && ( {visible && (
          <Tabs type="card" activeKey={keyValue} onChange={handleParChange}> <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}>
          {chooseGroupName.indexOf('角色') !== -1 ? ( {chooseGroupName.indexOf('角色') !== -1 ? (
          <div className={styles.tagContent}> <TabPane tab="角色" key="0">
          <div className={styles.tagRol} /> <div className={styles.checkContent}>
          <div>角色</div> {emptyValue == 0 ? (
          </div> <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 ? ( {chooseGroupName.indexOf('部门') !== -1 ? (
          <div className={styles.tagContent}> <TabPane tab="部门" key="1">
          <div className={styles.tagOrg} /> <div className={styles.checkContent}>
          <div>部门</div> {emptyValue == 0 ? (
          </div> <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 ? ( {chooseGroupName.indexOf('站点') !== -1 ? (
          <div className={styles.tagContent}> <TabPane tab="站点" key="2">
          <div className={styles.tagSite} /> <div className={styles.checkContent}>
          <div>站点</div> {emptyValue == 0 ? (
          </div> <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> </Tabs>
          </div> )}
          <div className={styles.selectBox}> </div>
          {[...selected].length > 0 ? ( </div>
          <div className={styles.selectContent}> {/* 已选列表 */}
          {[...selected].map(item => ( <div className={styles.selectedList}>
          <div className={styles.selectValue} key={item[0]}> <div className={styles.header}>
          <Tag closable color={changeColor(item[1].type)} onClose={() => delSelected(item[0])}> <div className={styles.title}>已选列表</div>
          {item[1].value} <div className={styles.tagHead}>
          </Tag> {chooseGroupName.indexOf('角色') !== -1 ? (
          </div> <div className={styles.tagContent}>
          ))} <div className={styles.tagRol} />
          <div>角色</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> </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> </div>
          </Modal> </div>
          </div> </Modal>
          ); );
          }; };
          ......
          src/pages/integratedLogin/components/RolePmSite/index.less
          View file @ b02f3882
          .modalContainer { .pageContent {
          .ant-modal-body { display: flex;
          padding: 0; 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 { .selectedList {
          display: flex; position: relative;
          height: 100%; width: 40%;
          .optionalList { .header {
          position: relative; height: 40px;
          width: 68%; width: 100%;
          border-right: 1px solid #e7e7e7; background-color: #f2f1f1;
          .title { .title {
          position: absolute; position: absolute;
          ...@@ -26,184 +70,151 @@ ...@@ -26,184 +70,151 @@
          color: #00070d; color: #00070d;
          } }
          .tabContent { .tagHead {
          height: 590px; display: flex;
          position: absolute;
          top: 10px;
          left: 88px;
          .ant-tabs-content-holder { .tagContent {
          height: 523px; display: flex;
          align-items: center;
          margin-right: 11px;
          } }
          }
          .searchInput { .tagRol,
          position: absolute; .tagOrg,
          width: 200px; .tagSite {
          z-index: 1; width: 10px;
          top: 3px; height: 3px;
          right: 40px;
          .anticon svg { margin-right: 5px;
          margin-top: 0px;
          } }
          .ant-input, .tagRol {
          .ant-input-affix-wrapper { background-color: #87e8de;
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
          } }
          .ant-input-group-addon { .tagOrg {
          border-top-right-radius: 20px; background-color: #ffd591;
          border-bottom-right-radius: 20px;
          } }
          .ant-input-search-button { .tagSite {
          width: 40px; background-color: #a785dd;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
          } }
          } }
          }
          .selectBox {
          height: 528px;
          padding: 10px;
          overflow-y: scroll;
          .checkContent { .selectContent {
          display: flex; display: flex;
          flex-wrap: wrap; flex-wrap: wrap;
          margin-left: 32px; flex-direction: row;
          height: 525px;
          overflow-y: scroll; .selectValue {
          margin-bottom: 15px;
          .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;
          }
          } }
          } }
          }
          }
          }
          .footer { :global {
          padding-left: 25px; .roleModalContainer {
          .anticon svg {
          margin-top: 0px;
          }
          .ant-pagination { .@{ant-prefix}-tabs-content-holder {
          border: none; height: 523px;
          } }
          }
          .ant-tabs-nav { .@{ant-prefix}-input,
          background-color: #f2f1f1; .@{ant-prefix}-input-affix-wrapper {
          } border-top-left-radius: 20px !important;
          border-bottom-left-radius: 20px !important;
          }
          .ant-tabs-tab { .@{ant-prefix}-input-group-addon {
          background-color: #f2f1f1; border-top-right-radius: 20px !important;
          color: #666666; border-bottom-right-radius: 20px !important;
          border-top-left-radius: 5px; }
          border-top-right-radius: 5px;
          }
          .ant-tabs-tab-active { .@{ant-prefix}-input-search-button {
          background-color: #fff; width: 40px;
          color: #1685ff; border-top-right-radius: 20px !important;
          border-top-left-radius: 5px; border-bottom-right-radius: 20px !important;
          border-top-right-radius: 5px;
          }
          } }
          .selectedList { .@{ant-prefix}-pagination {
          position: relative; border: none;
          width: 40%; }
          .header { .@{ant-prefix}-checkbox-wrapper {
          height: 40px; width: 180px;
          width: 100%; margin-bottom: 10px;
          background-color: #f2f1f1; // margin-left: 6px;
          }
          .title { .@{ant-prefix}-checkbox-wrapper span {
          position: absolute; max-width: 160px;
          left: 17px; overflow: hidden;
          top: 10px; text-overflow: ellipsis;
          font-weight: 700; white-space: nowrap;
          font-size: 14px; }
          z-index: 1;
          color: #00070d;
          }
          .tagHead { .@{ant-prefix}-radio-wrapper {
          display: flex; width: 180px;
          position: absolute; margin-bottom: 10px;
          top: 10px; margin-left: 6px;
          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;
          }
          }
          }
          .selectBox { .@{ant-prefix}-radio-wrapper span {
          height: 528px; max-width: 160px;
          padding: 10px; overflow: hidden;
          overflow-y: scroll; text-overflow: ellipsis;
          white-space: nowrap;
          }
          .selectContent { .@{ant-prefix}-tabs-nav {
          display: flex; background-color: #f2f1f1;
          flex-wrap: wrap; }
          flex-direction: row;
          .selectValue { .@{ant-prefix}-tabs-tab {
          margin-bottom: 15px; background-color: #f2f1f1;
          } color: #666666;
          } border-top-left-radius: 5px;
          } border-top-right-radius: 5px;
          } }
          }
          .ant-empty-normal { .@{ant-prefix}-tabs-tab-active {
          margin: auto; 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
          View file @ b02f3882
          ...@@ -55,7 +55,8 @@ const IntegratedLogin = props => { ...@@ -55,7 +55,8 @@ const IntegratedLogin = props => {
          const [keepSystemName, setKeepSystemName] = useState([]); const [keepSystemName, setKeepSystemName] = useState([]);
          const [groupList, setGroupList] = useState([]); // 分组列表 const [groupList, setGroupList] = useState([]); // 分组列表
          const [targetType, setTargetType] = useState(''); const [targetType, setTargetType] = useState('');
          const [roleList, setRoleList] = useState([]); // 角色列表
          const [moduleList, setModuleList] = useState([]); // 网站列表
          const { Search } = Input; const { Search } = Input;
          const columns = [ const columns = [
          ...@@ -398,15 +399,38 @@ const IntegratedLogin = props => { ...@@ -398,15 +399,38 @@ const IntegratedLogin = props => {
          const onMasterBack = data => { const onMasterBack = data => {
          if (data) configSetting.current = 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 = () => { const getConfig = () => {
          appService appService
          .GetIntegratedloginSetting() .GetIntegratedloginSetting()
          .then(res => { .then(res => {
          configSetting.current = res.data || {}; configSetting.current = res.data || {};
          getData(); getData();
          getConfigData();
          }) })
          .catch(err => { .catch(err => {
          getData(); getData();
          getConfigData();
          }); });
          }; };
          useEffect(() => { useEffect(() => {
          ...@@ -480,6 +504,7 @@ const IntegratedLogin = props => { ...@@ -480,6 +504,7 @@ const IntegratedLogin = props => {
          groupList={groupList} groupList={groupList}
          destroyOnClose destroyOnClose
          keepSystemName={keepSystemName} keepSystemName={keepSystemName}
          roleList={roleList}
          /> />
          ) : null} ) : null}
          {/* 集成网站 */} {/* 集成网站 */}
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment