Skip to content

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

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

parent 5bb3fe38
Pipeline #93685 passed with stages
          Show whitespace changes
          Inline Side-by-side
          Showing with 222 additions and 178 deletions
          src/api/service/base.js
          View file @ b02f3882
          ......@@ -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
          View file @ b02f3882
          ......@@ -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
          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 { 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
          View file @ b02f3882
          .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
          View file @ b02f3882
          ......@@ -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}
          {/* 集成网站 */}
          ......
          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