Skip to content

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

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

parent 5bb3fe38
Pipeline #93685 passed with stages
          Expand all Hide whitespace changes
          Inline Side-by-side
          Showing with 244 additions and 182 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.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