merge: merge

src/components/BaseFramContainer/index.js

 import { isDev } from '@/utils/tools';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import { Tabs } from 'antd';
 import React from 'react';
 import styles from './index.less';
@@ -36,6 +36,7 @@ const FrameContainer = props => {
   return (
     <PageContainer
       className={styles.container}
+      title={false}
       style={{
         display: 'flex',
         flexDirection: 'column',

src/components/BasePageContainer/index.js

+import { PageContainer } from '@ant-design/pro-layout';
+import React from 'react';
+
+const BasePageContainer = props => {
+  const { children, ...rest } = props;
+
+  return (
+    <PageContainer {...rest} pageHeaderRender={() => null}>
+      {children}
+    </PageContainer>
+  );
+};
+
+export default BasePageContainer;

src/components/GlobalHeader/RightContent.js

-import React from 'react';
-
-import { Tooltip } from 'antd';
-
-import { QuestionCircleOutlined } from '@ant-design/icons';
-
+import React, { useContext, useState } from 'react';
+import { RouteContext } from '@ant-design/pro-layout';
+import { Breadcrumb } from 'antd';
+import check from '@/components/Authorized/CheckPermissions';
+import { Link } from 'react-router-dom';
 import HeaderSearch from '../HeaderSearch';
 import NoticeIcon from '../NoticeIcon';
 import Avatar from './AvatarDropdown';
 import styles from './index.less';
 
+const routesOptions = route => {
+  const buildOption = routeConfig => ({
+    label: <Link to={routeConfig.path}>{routeConfig.name}</Link>,
+    value: routeConfig.name,
+  });
+  return route.routes
+    .map(r => {
+      if (r.authority) {
+        if (r.routes) {
+          return routesOptions(r);
+        }
+        return check(r.authority, buildOption(r), null);
+      }
+      if (r.routes) {
+        return routesOptions(r);
+      }
+      return buildOption(r);
+    })
+    .flat()
+    .filter(Boolean);
+};
+
 const GlobalHeaderRight = props => {
   const { theme, layout } = props;
   let className = styles.right;
+  const value = useContext(RouteContext);
 
   if (theme === 'dark' && layout === 'top') {
     className = `${styles.right}  ${styles.dark}`;
@@ -19,46 +41,20 @@ const GlobalHeaderRight = props => {
 
   return (
     <div className={className}>
+      {/* <span className={styles.left}>{value.title}</span> */}
+      <Breadcrumb {...value.breadcrumb} className={styles.lineHeight} />
+      <div style={{ flex: 1 }} />
       <HeaderSearch
-        className={`${styles.action} ${styles.search}`}
+        className={`${styles.action} ${styles.search} ${styles.toRight}`}
         placeholder="站内搜索"
         defaultValue=""
-        options={
-          [
-            // {
-            //   label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>,
-            //   value: 'umi ui',
-            // },
-            // {
-            //   label: <a href="next.ant.design">Ant Design</a>,
-            //   value: 'Ant Design',
-            // },
-            // {
-            //   label: <a href="https://protable.ant.design/">Pro Table</a>,
-            //   value: 'Pro Table',
-            // },
-            // {
-            //   label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
-            //   value: 'Pro Layout',
-            // },
-          ]
+        filterOption={(inputValue, option) =>
+          option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
         }
+        options={[...routesOptions(value.route)]}
       />
-      {/* <Tooltip title="使用文档">
-        <a
-          style={{
-            color: 'inherit',
-          }}
-          target="_blank"
-          href="https://pro.ant.design/docs/getting-started"
-          rel="noopener noreferrer"
-          className={styles.action}
-        >
-          <QuestionCircleOutlined />
-        </a>
-      </Tooltip> */}
-      <NoticeIcon className={styles.action} />
-      <Avatar />
+      {/* <NoticeIcon className={`${styles.action} ${styles.toRight}`} /> */}
+      <Avatar className={styles.toRight} />
       {/* <SelectLang className={styles.action} /> */}
     </div>
   );

src/components/GlobalHeader/index.less

@@ -10,8 +10,14 @@
   }
 }
 
+.lineHeight{
+  line-height: 48px;
+}
+
 .right {
   display: flex;
+  // flex: 100;
+  width: 100%;
   float: right;
   height: 48px;
   margin-left: auto;

src/components/HeaderSearch/index.js

@@ -17,6 +17,7 @@ const HeaderSearch = props => {
     placeholder,
     open,
     defaultOpen,
+    filterOption,
     ...restProps
   } = props;
 
@@ -41,6 +42,7 @@ const HeaderSearch = props => {
       className={classNames(className, styles.headerSearch)}
       onClick={() => {
         setSearchMode(true);
+        setValue('');
         if (searchMode && inputRef.current) {
           inputRef.current.focus();
         }
@@ -67,6 +69,7 @@ const HeaderSearch = props => {
           height: 28,
           marginTop: -6,
         }}
+        filterOption={filterOption}
         options={restProps.options}
         onChange={setValue}
       >

src/global.less

@@ -51,4 +51,7 @@ ol {
   body .ant-design-pro > .ant-layout {
     min-height: 100vh;
   }
+}
+.ant-pro-global-header-layout-side>div:first-child /deep/{
+  flex: 0 !important;
 }
\ No newline at end of file

src/layouts/BasicLayout.js

@@ -68,7 +68,7 @@ const BasicLayout = props => {
         return <Link to={menuItemProps.path}>{defaultDom}</Link>;
       }}
       itemRender={(route, params, routes, paths) => {
-        const first = routes.indexOf(route) === 0;
+        const first = false; // routes.indexOf(route) === 0;
         return first ? (
           <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
         ) : (

src/pages/Welcome.js

 import React from 'react';
 import { Alert, Card, Typography } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import { connect } from 'react-redux';
 import styles from './Welcome.less';
 

src/pages/appConfig/AppMenu.less

 .contentContainer{
-    // min-height: calc(100vh - 194px);
+    // min-height: calc(100vh - 48px);
     overflow-x: auto;
     display: flex;
     .menuContainer{

src/pages/appConfig/index.js

 import React from 'react';
 import { Tabs, Card } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import SevenParams from './SevenParams';
 import AppMenu from './AppMenu';
 

src/pages/database/CurrentSolution.jsx

 import React, { useState, useEffect } from 'react';
 import { Select, Card, Row, Col, Button, Spin, notification } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import { getSolutionList, changeSolution } from '@/services/database/api';
 import styles from './CurrentSolution.less';
 const { Option } = Select;

src/pages/database/InitDataBase.jsx

@@ -14,7 +14,7 @@ import {
   Popconfirm,
   Spin,
 } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import { connect } from 'react-redux';
 import {
   setTableSQLDirName,

src/pages/database/ManagementDataBase.jsx

@@ -9,7 +9,7 @@ import {
   notification,
   Spin,
 } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import styles from './ManagementDataBase.less';
 import {
   tableCheck,

src/pages/database/databaseConfig/DatabaseConfig.jsx

 import React, { useState } from 'react';
 import { Card, Tabs } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import SQLServerTable from './sqlServer/SQLServerTable';
 import OracleTable from './oracle/OracleTable';
 import MongDBTable from './mongDB/MongDBTable';

src/pages/mobileConfig/index.js

 import React, { useState, useEffect } from 'react';
 import { Card, Tabs } from 'antd';
 import ProCard from '@ant-design/pro-card';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import { miniAppSiteTree } from '@/services/mobileConfig/api';
 import SiteConfig from './SiteConfig';
 import MenuConfig from './menuconfig/MenuConfig';

src/pages/orgnazation/DefaultComponent.jsx

 import React, { useState, useEffect } from 'react';
 import { Card, TreeSelect, Space, Button, Table, Input, Row, Col } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import { connect } from 'react-redux';
 import TestModal from './ModalComponent';
 import ListCard from './ListCard';

src/pages/orgnazation/TestTable.jsx

@@ -4,7 +4,7 @@ import {
   Input,
   Button
 } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import { connect } from 'react-redux';
 import ProTable from '@ant-design/pro-table';
 import { get, post } from '../../services';

src/pages/userCenter/UserManage.js

@@ -32,7 +32,7 @@ import {
   DoubleLeftOutlined,
   DoubleRightOutlined,
 } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 // import classnames from 'classnames';
 // import { get } from '../../services';
 import styles from './UserManage.less';
@@ -60,14 +60,17 @@ const UserManage = () => {
   const [loading, setLoading] = useState(true);
 
   const [treeData, setTreeData] = useState([]); // 用户机构树
+  const [treeDataCopy, setTreeDataCopy] = useState([]); // 机构树数据备份，用于更改机构
   const [treeState, setTreeState] = useState(true); // 树第一次加载
   const [treeVisible, setTreeVisible] = useState(true); // 树是否可见
   const [tableData, setTableData] = useState([]); // 用户表
   const [orgFilters, setOrgFilters] = useState([]); // 用户列筛选
   // const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 用户表
   const [searchData, setSearchData] = useState([]); // 查找用户的结果表
+  const [searchWord, setSearchWord] = useState(''); // 关键字
+  const [userName, setUserName] = useState(''); // 查找用户的结果表
   const [currentSelectOrg, setCurrentSelectOrg] = useState([]); // 左侧机构数-选中组织
-  const [currentSelectOldOrg, setCurrentSelectOldOrg] = useState([]); // 更改机构时的树-选中组织
+  const [currentSelectOldOrg, setCurrentSelectOldOrg] = useState([]); // 更改机构时的树-原先选中组织
 
   /** ***Modal弹框,是否可视**** */
   const [userVisible, setUserVisible] = useState(false); // 添加用户
@@ -101,6 +104,13 @@ const UserManage = () => {
   const [editUserForm] = Form.useForm(); // 编辑用户
   const [passwordForm] = Form.useForm(); // 修改密码
   const { TabPane } = Tabs;
+  const { Search } = Input;
+
+  // 获取搜索框的值
+  const handleSearch = e => {
+    setSearchWord(e.target.value);
+    console.log(e.target.value);
+  };
 
   const getRoleValueCallback = useCallback((value, index) => {
     roleValueList[index] = value;
@@ -120,12 +130,30 @@ const UserManage = () => {
       key: 'loginName',
       fixed: 'left',
       width: 100,
+      render: item => (
+        <div
+          ref={r => {
+            if (r) {
+              r.innerHTML = item;
+            }
+          }}
+        />
+      ),
     },
     {
       title: '用户姓名',
       dataIndex: 'userName',
       key: 'userName',
       width: 100,
+      render: item => (
+        <div
+          ref={r => {
+            if (r) {
+              r.innerHTML = item;
+            }
+          }}
+        />
+      ),
     },
     {
       title: '所在机构',
@@ -133,7 +161,13 @@ const UserManage = () => {
       key: 'OUName',
       width: 150,
       filters: orgFilters,
-      onFilter: (value, record) => record.OUName === value,
+      onFilter: (value, record) =>
+        // let count = 0;
+        // if (record.OUName === value) {
+        //   count += 1;
+        // }
+        // setTableTitle(count);
+        record.OUName === value,
     },
     {
       title: '手机号码',
@@ -227,7 +261,7 @@ const UserManage = () => {
       );
     },
     getCheckboxProps: record => ({
-      disabled: record.name === 'Disabled User', // Column configuration not to be checked
+      // defaultChecked: selectedRowKeys.includes(`${record.id}`),
       name: record.name,
     }),
   };
@@ -292,8 +326,8 @@ const UserManage = () => {
       .then(res => {
         if (res.length > 0) {
           setTreeLoading(false);
-          // setTreeData1(res);
           setTreeData(res);
+          setTreeDataCopy(res);
           // 第一次加载，默认选择第一个组织
           if (treeState) {
             onSelect([res[0].id], false);
@@ -318,7 +352,7 @@ const UserManage = () => {
     updateTrees();
   }, []);
 
-  // 获取当前机构下所有用户
+  // 点击树节点，获取当前机构下所有用户
   const onSelect = (props, e) => {
     console.log(e);
     setTableLoading(true);
@@ -335,6 +369,7 @@ const UserManage = () => {
       .then(res => {
         if (res.code === 0) {
           setTableLoading(false);
+          setSearchWord(''); // 搜索框置空
           setOrgTitle(res.data.GroupName);
           // 返回用户表数据结构处理，扁平化
           const temp = flatten(getUsers(res.data));
@@ -365,6 +400,7 @@ const UserManage = () => {
         message.error(err);
       });
   };
+
   // 返回用户表数据结构处理，扁平化
   const getUsers = orgObj => {
     let result = orgObj.Users;
@@ -435,6 +471,7 @@ const UserManage = () => {
     // setTreeData2(treeData1);
     setCurrentUser(record);
     setCurrentSelectOldOrg(record.OUID);
+    // onSelect1([record.OUID]);
   };
   // 修改密码
   const changePassword = record => {
@@ -469,11 +506,13 @@ const UserManage = () => {
 
   // 查找用户
   const submitSearchUser = () => {
-    getUserByKey(searchUserForm.getFieldValue('key'))
+    getUserByKey(searchWord)
       .then(res => {
         if (res.success) {
           // setSearchUserVisible(false);
-          setSearchData(res.root);
+          // setSearchData(res.root);
+          setTableData(res.root);
+          setTableTitle(res.root.length);
         } else {
           notification.error({
             message: '提交失败',
@@ -779,6 +818,7 @@ const UserManage = () => {
   return (
     <PageContainer className={styles.userManageContainer}>
       <div className={styles.contentContainer}>
+        {/* 左侧机构树 */}
         <Spin spinning={treeLoading} tip="loading...">
           <div className={treeVisible ? styles.orgContainer : styles.hide}>
             <span style={{ margin: '10px' }}>机构列表</span>
@@ -816,6 +856,8 @@ const UserManage = () => {
             </Tooltip>
           )}
         </div>
+
+        {/* 右侧用户表 */}
         <div className={styles.userContainer}>
           <div style={{ height: '50px' }}>
             <p style={{ margin: '16px 0 10px 16px', display: 'inline-block' }}>
@@ -823,9 +865,19 @@ const UserManage = () => {
               <span className={styles.redText}>{tableTitle}</span>）
             </p>
             <span style={{ float: 'right', margin: '10px' }}>
-              <Button type="primary" onClick={searchUser}>
+              {/* <Button type="primary" onClick={searchUser}>
                 查找用户
-              </Button>
+              </Button> */}
+
+              <Search
+                style={{ width: 300 }}
+                placeholder="请输入登录名称/用户名称/手机号"
+                onSearch={submitSearchUser}
+                onChange={e => handleSearch(e)}
+                enterButton
+                value={searchWord}
+              />
+
               <Button type="primary" onClick={addUser}>
                 添加用户
               </Button>
@@ -845,14 +897,19 @@ const UserManage = () => {
               type: selectionType,
               ...rowSelection,
             }}
+            rowKey={record => record.userID}
             locale={{ filterConfirm: '确定', filterReset: '重置' }}
             bordered
             columns={columns}
             dataSource={tableData}
             loading={tableLoading}
             scroll={{ x: 'max-content' }}
+            pagination={{ showTotal: () => `共${tableTitle}条`, pageSize: 10 }}
           />
         </div>
+
+        {/* Modal弹框 */}
+
         {/* 查找用户 */}
         <Modal
           title="查找用户"
@@ -874,19 +931,18 @@ const UserManage = () => {
               label="关键字搜索"
               rules={[{ required: true, message: '不能为空' }]}
             >
-              <Input
-                placeholder="请输入登录名称/用户名称/手机号 ，回车键查找"
-                onPressEnter={submitSearchUser}
-              />
+              <Input placeholder="" onPressEnter={submitSearchUser} />
             </Form.Item>
           </Form>
           <Table
             bordered
+            rowKey={record => record.userID}
             columns={searchColumns}
             dataSource={searchData}
             onRow={record => ({
               onClick: () => {
                 onSelect([record.OUID]);
+                // setSelectedRowKeys([record.userID]);
                 setSearchUserVisible(false);
               },
             })}
@@ -1035,16 +1091,19 @@ const UserManage = () => {
           width="330px"
         >
           <span>请选择要更改的目标机构：</span>
-          {changeOrgVisible && treeData.length > 0 && (
+          {changeOrgVisible && treeDataCopy.length > 0 && (
             <Tree
               showIcon="true"
               showLine={{ showLeafIcon: false }}
               defaultExpandAll="true"
-              defaultSelectedKeys={[currentSelectOldOrg]}
-              onSelect={props => {
-                setNewOrgID(props[0]);
+              // 未切换时原先的节点，注意要转字符串
+              selectedKeys={[`${currentSelectOldOrg}`]}
+              onSelect={value => {
+                setNewOrgID(value[0]);
+                // 切换后选中的节点
+                setCurrentSelectOldOrg(value[0]);
               }}
-              treeData={treeData.map(t => mapTree(t))}
+              treeData={treeDataCopy.map(t => mapTree(t))}
             />
           )}
         </Modal>

src/pages/userCenter/UserManage.less

@@ -26,10 +26,10 @@
         }
     }
     .contentContainer{
-        min-height: calc(100vh - 194px);
+        min-height: calc(100vh - 78px);
         display: flex;
         .orgContainer{
-            min-height: calc(100vh - 194px);
+            min-height: calc(100vh - 78px);
             float: left;
             padding: 10px;
             min-width: 240px;
@@ -50,15 +50,19 @@
         .userContainer{
             margin-left: 10px;
             flex: 1;
-            height: calc(100vh - 194px);
+            height: calc(100vh - 78px);
+            min-width: 880px;
             background: white;
             .ant-table-pagination-right{
                 padding-right: 12px;
             }
             .ant-btn-primary{
-                margin-left: 30px;
+                margin-left: 20px;
                 background: #50aefc;
             }
+            .ant-input-search-button{
+                margin-left: 0px !important;
+            }
             .ant-table-thead tr th{
                 font-weight: 600;
                 color:rgba(0,0,0,0.85);

src/pages/userCenter/roleManage/RoleManage.less

@@ -26,8 +26,8 @@
   align-items: center;
 }
 .cardBoxR{
-  min-height: calc(100vh - 292px);
-  max-height: calc(100vh - 292px);
+  min-height: calc(100vh - 172px);
+  max-height: calc(100vh - 172px);
   overflow-y: scroll;
 }
 :global{

src/pages/userCenter/siteManage/SiteManage.jsx

@@ -12,7 +12,8 @@ import {
   Space,
 } from 'antd';
 import { FileAddTwoTone, EditTwoTone, DeleteTwoTone } from '@ant-design/icons';
-import { PageContainer, GridContent } from '@ant-design/pro-layout';
+import { GridContent } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import {
   getWebModuleTree,
   chooseUserToStation,

src/pages/userCenter/siteManage/SiteManage.less

 .cardBox{
-  height: calc(100vh - 200px);
+  height: calc(100vh - 80px);
   overflow: auto;
 }
 .cardBoxR{
-  min-height: calc(100vh - 292px);
+  min-height: calc(100vh - 172px);
 }
 .ant-tree-node-content-wrapper-open{
   display: flex;

src/pages/webConfig/index.js

 import React, { useEffect, useState } from 'react';
-import { PageContainer } from '@ant-design/pro-layout';
+import PageContainer from '@/components/BasePageContainer';
 import { Tabs } from 'antd';
 import { getWebModuleTree } from '@/services/webConfig/api';
 import styles from './index.less';