feat: global header breadCrumb

src/components/BasePageContainer/index.js

@@ -5,7 +5,7 @@ const BasePageContainer = props => {
   const { children, ...rest } = props;
 
   return (
-    <PageContainer {...rest} title={false}>
+    <PageContainer {...rest} pageHeaderRender={() => null}>
       {children}
     </PageContainer>
   );

src/components/GlobalHeader/RightContent.js

-import React from 'react';
-
-import { Tooltip } from 'antd';
+import React, { useContext } from 'react';
+import { RouteContext } from '@ant-design/pro-layout';
+import { Tooltip, Breadcrumb } from 'antd';
 
 import { QuestionCircleOutlined } from '@ant-design/icons';
 
@@ -12,15 +12,18 @@ import styles from './index.less';
 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}`;
   }
 
   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={
@@ -57,8 +60,8 @@ const GlobalHeaderRight = props => {
           <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/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/appConfig/AppMenu.js

@@ -162,6 +162,7 @@ const AppMenu = () => {
   // 获取当前菜单详细
   const onSelect = (props, e) => {
     // e.node.pos节点类型，根据这个渲染不同的编辑表单item,0-x一级菜单，0-0-x二级，0-0-0-x三级
+    console.log(e);
     if (e) {
       if (e.node.pos.lastIndexOf('-') === 1) {
         setNodeType(1);

src/pages/appConfig/AppMenu.less

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

src/pages/database/CurrentSolution.jsx

@@ -50,17 +50,13 @@ const CurrentSolution = () => {
           notification.error({
             message: '提示',
             description: res.message || '切换失败',
-            duration: 10,
+            duration: 15,
           });
         }
       })
       .catch(err => {
         setLoading(false);
-        notification.error({
-          message: '提示',
-          description: err,
-          duration: 3,
-        });
+        console.error(err);
       });
   };
   return (

src/pages/database/CurrentSolution.less

@@ -3,12 +3,13 @@
   align-items: center;
 }
 .cardbox{
-  min-height: 200px;
+  min-height: 100px;
 }
 .btnBox{
   margin-top: 40px;
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 .tAlign{
   text-align: center;

src/pages/database/InitDataBase.jsx

@@ -16,12 +16,18 @@ import {
 } from 'antd';
 import PageContainer from '@/components/BasePageContainer';
 import { connect } from 'react-redux';
-import { get, post } from '../../services';
 import {
   setTableSQLDirName,
   deleteConn,
   initDBv4,
   getInitDBLog,
+  getConnRecord,
+  getDataBaseConfig,
+  saveConnection,
+  getConnectionTest,
+  getDataBaseList,
+  updateConnDesc,
+  deleteInitDBLog,
   connectionTest,
 } from '@/services/database/api';
 import styles from './InitDataBase.less';
@@ -52,14 +58,15 @@ const InitDataBase = props => {
   const [modalVisible, setModalVisible] = useState(false); // 修改秒速弹窗
   const [initVisible, setInitVisible] = useState(false); // 数据库初始化弹窗
   const [initContent, setInitContent] = useState(''); // 数据库初始化内容
-  const [initLoading, setInitLoading] = useState(false);
   const [cardLoading, setCardLoading] = useState(false); // 初始化card Loading
+  const [finish, setFinish] = useState(false);
+
   // 获取数据库链接记录
   useEffect(() => {
     setTableLoading(true);
-    get(`/Cityinterface/rest/services/OMS.svc/S_GetConnRecord`, {
+    getConnRecord({
       _version: 9999,
-      dc: 1603334559186,
+      dc: Date.now(),
     })
       .then(res => {
         setTableLoading(false);
@@ -79,9 +86,9 @@ const InitDataBase = props => {
   // 获取数据库配置信息
   useEffect(() => {
     setCardLoading(true);
-    get(`/Cityinterface/rest/services/OMS.svc/S_GetDataBaseConfig`, {
+    getDataBaseConfig({
       _version: 9999,
-      dc: 1603334559186,
+      dc: Date.now(),
     })
       .then(res => {
         setCardLoading(false);
@@ -101,38 +108,58 @@ const InitDataBase = props => {
         console.error(err);
       });
   }, []);
+  // 获取日志
+  const doInitLog = () => {
+    getInitDBLog({
+      _version: 9999,
+      _dc: Date.now(),
+    })
+      .then(res => {
+        if (res.success) {
+          let arr = [];
+          arr.push(
+            res.content
+              .split(/(\r\n)|(\n)/)
+              .map((item, index) => <p key={index}>{item}</p>),
+          );
+          setInitContent(arr);
+        }
+      })
+      .catch(err => {
+        setFinish(true);
+      });
+  };
   // 数据库初始化
   const initClick = () => {
-    setInitLoading(true);
+    setInitContent('');
+    setCardLoading(true);
+    setInitVisible(true);
     let obj = form.getFieldsValue();
+    doInitLog();
+    for (let i = 0; i < 9; i++) {
+      setTimeout(() => {
+        doInitLog();
+      }, 100);
+    }
     initDBv4({
       _version: 9999,
       _dc: Date.now(),
       ...obj,
     })
       .then(res => {
-        setInitLoading(false);
+        setCardLoading(false);
         if (res.GetMe) {
-          getInitDBLog({
-            _version: 9999,
-            _dc: Date.now(),
-          }).then(res => {
-            if (res.success) {
-              setInitVisible(true);
-              setInitContent(res.content);
-            }
-            console.log(res.content.split(/[(\r\n)\r\n]+/));
-          });
+          console.log(res);
         } else {
           notification.error({
             message: '提示',
-            duration: 3,
+            duration: 15,
             description: res.Say.Message || '初始化失败',
           });
         }
       })
       .catch(err => {
-        setInitLoading(false);
+        setCardLoading(false);
         console.log(err);
       });
   };
@@ -150,7 +177,7 @@ const InitDataBase = props => {
   const onFinish = values => {
     setCardLoading(true);
     const obj = values;
-    get('/Cityinterface/rest/services/OMS.svc/S_SaveConnection', {
+    saveConnection({
       _version: 9999,
       _dc: new Date().getTime(),
       ip: obj.ip,
@@ -170,7 +197,7 @@ const InitDataBase = props => {
         } else {
           notification.error({
             message: '提示',
-            duration: 3,
+            duration: 15,
             description: res.Say.Message || '保存失败',
           });
         }
@@ -185,7 +212,7 @@ const InitDataBase = props => {
     console.log(dbForm);
     setCardLoading(true);
     const obj = form.getFieldsValue();
-    get('/Cityinterface/rest/services/OMS.svc/S_GetConnectionTest', {
+    getConnectionTest({
       _version: 9999,
       _dc: new Date().getTime(),
       ip: obj.ip,
@@ -204,7 +231,7 @@ const InitDataBase = props => {
         } else {
           notification.error({
             message: '提示',
-            duration: 3,
+            duration: 15,
             description: res.Say.Message || '连接失败',
           });
         }
@@ -212,19 +239,15 @@ const InitDataBase = props => {
       .catch(err => {
         setCardLoading(false);
         console.log(err);
-        notification.error({
-          message: '提示',
-          duration: 3,
-          description: err || '连接失败',
-        });
       });
   };
+  // 获取数据库列表
   const selectFocus = e => {
     setOption([]);
     let params = form.getFieldsValue();
-    get(`/Cityinterface/rest/services/OMS.svc/S_GetDataBaseList`, {
+    getDataBaseList({
       _version: 9999,
-      _dc: 1603334559186,
+      _dc: Date.now(),
       userName: params.userName || '',
       password: params.password || '',
       ip: params.ip || '',
@@ -235,12 +258,11 @@ const InitDataBase = props => {
         } else {
           notification.error({
             message: '通知',
-            duration: 3,
+            duration: 15,
             description: res.message,
           });
           setOption([]);
         }
-        console.log(res);
       })
       .catch(err => {
         console.error(err);
@@ -272,7 +294,7 @@ const InitDataBase = props => {
         } else {
           notification.error({
             message: '提示',
-            duration: 3,
+            duration: 15,
             description: res.message,
           });
         }
@@ -283,7 +305,6 @@ const InitDataBase = props => {
   };
   // 展示修改描述
   const changeDesc = val => {
-    console.log(val);
     setDesc(val);
     setModalVisible(true);
   };
@@ -291,12 +312,22 @@ const InitDataBase = props => {
     const { value } = e.target;
     setDesc(value);
   };
+  // 关闭弹窗
+  const handleClick = () => {
+    setInitVisible(false);
+    setInitContent('');
+    setFinish(false);
+    deleteInitDBLog({
+      _version: 9999,
+      _dc: Date.now(),
+    });
+  };
   // 弹窗确认回调
   const modalOkCallback = () => {
     console.log(form.getFieldsValue());
     const obj = form.getFieldsValue();
     // 更新描述
-    get('/Cityinterface/rest/services/OMS.svc/S_UpdateConnDesc', {
+    updateConnDesc({
       _version: 9999,
       _dc: new Date().getTime(),
       ip: obj.ip,
@@ -336,7 +367,7 @@ const InitDataBase = props => {
         } else {
           notification.error({
             message: '提示',
-            duration: 3,
+            duration: 15,
             description: res.message,
           });
         }
@@ -351,31 +382,42 @@ const InitDataBase = props => {
       title: '服务器名或IP地址',
       dataIndex: 'ip',
       key: 'ip',
+      width: 180,
+      ellipsis: true,
     },
     {
       title: '数据库名称',
       dataIndex: 'dbName',
       key: 'dbName',
+      width: 180,
+      ellipsis: true,
     },
     {
       title: '数据库用户名称',
       dataIndex: 'userName',
       key: 'userName',
+      width: 180,
+      ellipsis: true,
     },
     {
       title: '保存时间',
       dataIndex: 'saveTime',
       key: 'saveTime',
+      width: 180,
+      ellipsis: true,
     },
     {
       title: '描述',
       dataIndex: 'desc',
       key: 'desc',
+      ellipsis: true,
     },
     {
       title: '操作',
       dataIndex: 'action',
       key: 'action',
+      width: 250,
+      ellipsis: true,
       render: (text, record) => (
         <Space>
           <Button
@@ -481,9 +523,7 @@ const InitDataBase = props => {
                           initClick();
                         }}
                       >
-                        <Button type="primary" loading={initLoading}>
-                          数据库初始化
-                        </Button>
+                        <Button type="primary">数据库初始化</Button>
                       </Popconfirm>
                       {defaultSqlDir && (
                         <Select
@@ -541,8 +581,7 @@ const InitDataBase = props => {
           footer={[
             <Button
               onClick={() => {
-                setInitVisible(false);
-                setInitContent('');
+                handleClick();
               }}
               type="primary"
             >
@@ -563,13 +602,14 @@ const InitDataBase = props => {
             minHeight: '100px',
           }}
           cancelText="取消"
-          okText="确认修改"
+          okText="确认"
           destroyOnClose
         >
           <Row>
             <Col span={2} className={styles.decsBox}>
               描述：
             </Col>
+
             <Col span={22}>
               <Input
                 placeholder="请输入描述"

src/pages/database/ManagementDataBase.jsx

@@ -7,11 +7,15 @@ import {
   Modal,
   Popconfirm,
   notification,
+  Spin,
 } from 'antd';
 import PageContainer from '@/components/BasePageContainer';
-import { get } from '../../services';
 import styles from './ManagementDataBase.less';
-import { updateDateBase } from '@/services/database/api';
+import {
+  tableCheck,
+  updateDateBase,
+  databaseStandardGetLog,
+} from '@/services/database/api';
 
 const ManagementDataBase = () => {
   const [autoCheckList, setAutoCheckList] = useState([]); // 自动列表
@@ -26,7 +30,7 @@ const ManagementDataBase = () => {
   // 检查数据库表
   useEffect(() => {
     setCheckLoading(true);
-    get(`/Cityinterface/rest/services/OMS.svc/TableCheck`, {
+    tableCheck({
       _version: 9999,
       _dc: new Date().getTime(),
     })
@@ -58,7 +62,7 @@ const ManagementDataBase = () => {
   // 获取数据库升级记录
   useEffect(() => {
     setLogLoading(true);
-    get(`/Cityinterface/rest/services/OMS.svc/DatabaseStandard_GetLog`, {
+    databaseStandardGetLog({
       _version: 9999,
       _dc: new Date().getTime(),
     })
@@ -102,7 +106,7 @@ const ManagementDataBase = () => {
         } else {
           notification.error({
             message: '通知',
-            duration: 3,
+            duration: 15,
             description: res.message,
           });
         }
@@ -113,21 +117,27 @@ const ManagementDataBase = () => {
       });
   };
   const handleLog = text => {
+    console.log(text);
     let arr = [];
-    arr.push(text.split(/[(\r\n)\r\n]+/).map(item => <p>${item}</p>));
+    arr.push(text.split(/(\r\n)|(\n)/).map(item => <p>{item}</p>));
     setModalVisible(true);
-    setContent(text);
+    // setContent(text);
+    setContent(arr);
   };
   const autoCheckColumns = [
     {
       title: '表名称',
       dataIndex: 'tableName',
       key: 'tableName',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '类型',
       dataIndex: 'type',
       key: 'type',
+      width: 180,
+      ellipsis: true,
     },
     {
       title: '差异比较',
@@ -141,6 +151,7 @@ const ManagementDataBase = () => {
       dataIndex: 'tableName',
       key: 'tableName',
       width: 200,
+      ellipsis: true,
     },
     {
       title: '差异比较',
@@ -154,21 +165,29 @@ const ManagementDataBase = () => {
       title: '登录名',
       dataIndex: 'updateBy',
       key: 'updateBy',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '数据库名称',
       dataIndex: 'name',
       key: 'name',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '数据库版本',
       dataIndex: 'version',
       key: 'version',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '升级时间',
       dataIndex: 'updateTime',
       key: 'updateTime',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '版本日志',
@@ -209,38 +228,35 @@ const ManagementDataBase = () => {
       <PageContainer>
         <Card>
           <div className={styles.tableTitle}>表结构自动化修复</div>
-          <Table
-            className={styles.mgTop20}
-            columns={autoCheckColumns}
-            dataSource={autoCheckList}
-            bordered
-            loading={checkLoading}
-            size="small"
-          />
-          <div className={styles.btnBox}>
-            <Space>
-              <Button
-                type="primary"
-                onClick={handleCheck}
-                loading={checkLoading}
-              >
-                检查
-              </Button>
-              <Popconfirm
-                title="
-                是否升级当前连接数据库?"
-                okText="确认"
-                cancelText="取消"
-                onConfirm={() => {
-                  handleUpdate();
-                }}
-              >
-                <Button danger type="primary" loading={checkLoading}>
-                  升级
+          <Spin tip="loading..." spinning={checkLoading}>
+            <Table
+              className={styles.mgTop20}
+              columns={autoCheckColumns}
+              dataSource={autoCheckList}
+              bordered
+              size="small"
+            />
+            <div className={styles.btnBox}>
+              <Space>
+                <Button type="primary" onClick={handleCheck}>
+                  检查
                 </Button>
-              </Popconfirm>
-            </Space>
-          </div>
+                <Popconfirm
+                  title="
+                是否升级当前连接数据库?"
+                  okText="确认"
+                  cancelText="取消"
+                  onConfirm={() => {
+                    handleUpdate();
+                  }}
+                >
+                  <Button danger type="primary">
+                    升级
+                  </Button>
+                </Popconfirm>
+              </Space>
+            </div>
+          </Spin>
         </Card>
         <Card className={styles.mgTop20}>
           <div className={styles.tableTitle}>数据库升级记录</div>

src/pages/database/databaseConfig/mongDB/MongDBTable.jsx

@@ -111,31 +111,43 @@ const MongDBTable = props => {
       title: '标签',
       dataIndex: 'name',
       key: 'name',
+      width: '200px',
+      ellipsis: true,
     },
     {
       title: 'ip',
       dataIndex: 'ip',
       key: 'ip',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '端口',
       dataIndex: 'port',
       key: 'port',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '数据库名',
       dataIndex: 'dbName',
       key: 'dbName',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '类型',
       dataIndex: 'type',
       key: 'type',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '复制集',
       dataIndex: 'replicaSet',
       key: 'replicaSet',
+      width: 200,
+      ellipsis: true,
     },
     // {
     //   title: '用户名',
@@ -151,7 +163,6 @@ const MongDBTable = props => {
       title: '操作',
       dataIndex: 'options',
       key: 'options',
-      width: 300,
       render: (val, item) => [
         <Tag color="#2db7f5" onClick={() => handleCon(val, item)}>
           测试连接

src/pages/database/databaseConfig/mysqltable/MySQLTable.jsx

@@ -107,26 +107,36 @@ const MySQLTable = props => {
       title: '标签',
       dataIndex: 'name',
       key: 'name',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: 'IP',
       dataIndex: 'ip',
       key: 'ip',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '数据库名',
       dataIndex: 'dbName',
       key: 'dbName',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '用户名',
       dataIndex: 'userName',
       key: 'userName',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '密码',
       dataIndex: 'password',
       key: 'password',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '操作',

src/pages/database/databaseConfig/oracle/OracleTable.jsx

@@ -107,21 +107,29 @@ const OracleTable = props => {
       title: '标签',
       dataIndex: 'name',
       key: 'name',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '网络服务名/(ip:port/实例名)',
       dataIndex: 'dbName',
       key: 'dbName',
+      width: 400,
+      ellipsis: true,
     },
     {
       title: '用户名',
       dataIndex: 'userName',
       key: 'userName',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '密码',
       dataIndex: 'password',
       key: 'password',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '操作',

src/pages/database/databaseConfig/sqlServer/SQLServerTable.jsx

@@ -107,26 +107,36 @@ const SQLServerTable = props => {
       title: '标签',
       dataIndex: 'name',
       key: 'name',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: 'ip',
       dataIndex: 'ip',
       key: 'ip',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '数据库名',
       dataIndex: 'dbName',
       key: 'dbName',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '用户名',
       dataIndex: 'userName',
       key: 'userName',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '密码',
       dataIndex: 'password',
       key: 'password',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '操作',

src/pages/userCenter/UserManage.js

@@ -18,7 +18,7 @@ import {
   Spin,
 } from 'antd';
 import {
-  FileAddTwoTone,
+  UsergroupAddOutlined,
   FolderAddTwoTone,
   EditTwoTone,
   DeleteTwoTone,
@@ -29,6 +29,8 @@ import {
   StopOutlined,
   FolderOpenOutlined,
   FileOutlined,
+  DoubleLeftOutlined,
+  DoubleRightOutlined,
 } from '@ant-design/icons';
 import PageContainer from '@/components/BasePageContainer';
 // import classnames from 'classnames';
@@ -58,42 +60,46 @@ const UserManage = () => {
   const [loading, setLoading] = useState(true);
 
   const [treeData, setTreeData] = useState([]); // 用户机构树
-  const [treeData1, setTreeData1] = useState([]); // 用户机构树-备份，供更改机构使用
-  const [treeData2, setTreeData2] = useState([]);
+  const [treeState, setTreeState] = useState(true); // 树第一次加载
+  const [treeVisible, setTreeVisible] = useState(true); // 树是否可见
   const [tableData, setTableData] = useState([]); // 用户表
-  const [searchData, setSearchData] = useState([]);
-  const [currentSelectOrg, setCurrentSelectOrg] = useState([]);
+  const [orgFilters, setOrgFilters] = useState([]); // 用户列筛选
+  // const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 用户表
+  const [searchData, setSearchData] = useState([]); // 查找用户的结果表
+  const [currentSelectOrg, setCurrentSelectOrg] = useState([]); // 左侧机构数-选中组织
+  const [currentSelectOldOrg, setCurrentSelectOldOrg] = useState([]); // 更改机构时的树-选中组织
 
-  const [userVisible, setUserVisible] = useState(false);
-  const [searchUserVisible, setSearchUserVisible] = useState(false);
-  const [addOrgVisible, setAddOrgVisible] = useState(false);
-  const [editOrgVisible, setEditOrgVisible] = useState(false);
-  const [deleteOrgVisible, setDeleteOrgVisible] = useState(false);
-  const [roleVisible, setRoleVisible] = useState(false);
-  const [changeOrgVisible, setChangeOrgVisible] = useState(false);
-  const [passwordVisible, setPasswordVisible] = useState(false);
-  const [editUserVisible, setEditUserVisible] = useState(false);
-  const [treeState, setTreeState] = useState(true);
-  const [freezeUserVisible, setFreezeUserVisible] = useState(false);
-  const [deleteUserVisible, setDeleteUserVisible] = useState(false);
+  /** ***Modal弹框,是否可视**** */
+  const [userVisible, setUserVisible] = useState(false); // 添加用户
+  const [searchUserVisible, setSearchUserVisible] = useState(false); // 查找用户
+  const [addOrgVisible, setAddOrgVisible] = useState(false); // 添加机构
+  const [editOrgVisible, setEditOrgVisible] = useState(false); // 编辑机构
+  const [deleteOrgVisible, setDeleteOrgVisible] = useState(false); // 删除机构
+  const [roleVisible, setRoleVisible] = useState(false); // 用户关联
+  const [changeOrgVisible, setChangeOrgVisible] = useState(false); // 更改机构
+  const [passwordVisible, setPasswordVisible] = useState(false); // 修改密码
+  const [editUserVisible, setEditUserVisible] = useState(false); // 编辑用户
+  const [freezeUserVisible, setFreezeUserVisible] = useState(false); // 冻结用户
+  const [deleteUserVisible, setDeleteUserVisible] = useState(false); // 删除用户
 
-  const [orgTitle, setOrgTitle] = useState('机构');
-  const [tableTitle, setTableTitle] = useState('0');
-  const [orgID, setOrgID] = useState();
-  const [newOrgID, setNewOrgID] = useState();
-  const [currentUser, setCurrentUser] = useState({});
-  const [rolelist, setRolelist] = useState([]);
-  const [stationlist, setStationlist] = useState([]);
+  const [orgTitle, setOrgTitle] = useState('机构'); // 弹框标题
+  const [tableTitle, setTableTitle] = useState(0); // 表格标题
+  const [orgID, setOrgID] = useState(); // 机构ID
+  const [newOrgID, setNewOrgID] = useState(); // 更改机构新选择的ID
+  const [currentUser, setCurrentUser] = useState({}); // 当前用户
 
-  const [roleValueList, setRoleValueList] = useState({});
-  const [stationValueList, setStationValueList] = useState({});
+  const [rolelist, setRolelist] = useState([]); // 角色列表
+  const [stationlist, setStationlist] = useState([]); // 站点列表
+  const [roleValueList, setRoleValueList] = useState({}); // 勾选的角色列表
+  const [stationValueList, setStationValueList] = useState({}); // 勾选的站点列表
 
-  const [searchUserForm] = Form.useForm();
-  const [addUserForm] = Form.useForm();
-  const [addOrgForm] = Form.useForm();
-  const [editOrgForm] = Form.useForm();
-  const [editUserForm] = Form.useForm();
-  const [passwordForm] = Form.useForm();
+  /** ***表单相关**** */
+  const [searchUserForm] = Form.useForm(); // 查找用户
+  const [addUserForm] = Form.useForm(); // 添加用户
+  const [addOrgForm] = Form.useForm(); // 添加机构
+  const [editOrgForm] = Form.useForm(); // 编辑机构
+  const [editUserForm] = Form.useForm(); // 编辑用户
+  const [passwordForm] = Form.useForm(); // 修改密码
   const { TabPane } = Tabs;
 
   const getRoleValueCallback = useCallback((value, index) => {
@@ -126,6 +132,8 @@ const UserManage = () => {
       dataIndex: 'OUName',
       key: 'OUName',
       width: 150,
+      filters: orgFilters,
+      onFilter: (value, record) => record.OUName === value,
     },
     {
       title: '手机号码',
@@ -209,6 +217,22 @@ const UserManage = () => {
       ),
     },
   ];
+  const [selectionType, setSelectionType] = useState('checkbox');
+  const rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+      console.log(
+        `selectedRowKeys: ${selectedRowKeys}`,
+        'selectedRows: ',
+        selectedRows,
+      );
+    },
+    getCheckboxProps: record => ({
+      disabled: record.name === 'Disabled User', // Column configuration not to be checked
+      name: record.name,
+    }),
+  };
+
+  // 查找用户的结果表-列
   const searchColumns = [
     {
       title: '所在机构',
@@ -254,53 +278,25 @@ const UserManage = () => {
   const mapTree = org => {
     const haveChildren = Array.isArray(org.children) && org.children.length > 0;
     return {
-      title: (
-        <>
-          <span>{org.text}</span>
-          <div className={styles.iconWraper1}>
-            <Tooltip title="添加用户">
-              <FileAddTwoTone onClick={e => addUser(e, org.text, org.id)} />
-            </Tooltip>
-            <Tooltip title="添加下级机构">
-              <FolderAddTwoTone onClick={e => addSubOrg(e, org.text, org.id)} />
-            </Tooltip>
-            <Tooltip title="编辑当前机构">
-              <EditTwoTone onClick={e => editOrg(e, org.text, org.id)} />
-            </Tooltip>
-            <Tooltip title="删除当前机构">
-              <DeleteTwoTone onClick={e => deleteOrg(e, org.text, org.id)} />
-            </Tooltip>
-          </div>
-        </>
-      ),
+      title: org.text,
       key: org.id,
       // icon: org.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
       // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
       children: haveChildren ? org.children.map(i => mapTree(i)) : [],
     };
   };
-  const mapTree1 = org => {
-    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
-    return {
-      title: `${org.text}`,
-      key: org.id,
-      // icon: org.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
-      // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
-      children: haveChildren ? org.children.map(i => mapTree1(i)) : [],
-    };
-  };
-
+  // 重新渲染树
   const updateTrees = () => {
     setTreeLoading(true);
     getUserTree(-1, -1)
       .then(res => {
         if (res.length > 0) {
           setTreeLoading(false);
-          setTreeData1(res);
+          // setTreeData1(res);
           setTreeData(res);
           // 第一次加载，默认选择第一个组织
           if (treeState) {
-            onSelect([res[0].id]);
+            onSelect([res[0].id], false);
             setTreeState(false);
           }
         } else {
@@ -323,8 +319,12 @@ const UserManage = () => {
   }, []);
 
   // 获取当前机构下所有用户
-  const onSelect = props => {
+  const onSelect = (props, e) => {
+    console.log(e);
     setTableLoading(true);
+    if (e) {
+      setOrgTitle(e.node.title);
+    }
     if (!props[0]) {
       setCurrentSelectOrg(currentSelectOrg);
     } else {
@@ -335,7 +335,13 @@ const UserManage = () => {
       .then(res => {
         if (res.code === 0) {
           setTableLoading(false);
+          setOrgTitle(res.data.GroupName);
+          // 返回用户表数据结构处理，扁平化
           const temp = flatten(getUsers(res.data));
+          // 设置过滤字段
+          let arr = temp.map(item => item.OUName);
+          arr = arr.filter((value, index) => arr.indexOf(value) === index);
+          setOrgFilters(arr.map(item => ({ text: item, value: item })));
           console.log(temp);
           setTableTitle(temp.length);
           const table = temp.map((item, index) => {
@@ -347,7 +353,7 @@ const UserManage = () => {
           });
           setTableData(table);
         } else {
-          setTreeLoading(false);
+          setTableLoading(false);
           notification.error({
             message: '获取失败',
             description: res.message,
@@ -359,7 +365,7 @@ const UserManage = () => {
         message.error(err);
       });
   };
-  // 返回数据结构处理，扁平化
+  // 返回用户表数据结构处理，扁平化
   const getUsers = orgObj => {
     let result = orgObj.Users;
     result.map(item => {
@@ -377,59 +383,60 @@ const UserManage = () => {
     }
     return arr;
   };
-  const getTableTitle = () => `当前机构用户总数（ ${tableTitle} ）`;
-  // 左侧目录树相关操作
+
+  // 查找用户
   const searchUser = () => {
     setSearchUserVisible(true);
   };
-  const addUser = (e, title, id) => {
-    // e.stopPropagation();
+  // 添加用户
+  const addUser = () => {
     setUserVisible(true);
-    setOrgTitle(`在${title}下添加用户`);
-    setOrgID(id);
   };
-  const addSubOrg = (e, title, id) => {
-    // e.stopPropagation();
+  // 在根目录下添加机构
+  const addOrg = (title, id) => {
     setAddOrgVisible(true);
-    setOrgTitle(`在${title}下添加机构`);
+    setOrgTitle(title);
     setOrgID(id);
   };
-  const editOrg = (e, title, id) => {
-    // e.stopPropagation();
+  // 添加下级机构
+  const addSubOrg = () => {
+    setAddOrgVisible(true);
+  };
+  // 编辑机构
+  const editOrg = () => {
     setEditOrgVisible(true);
     editOrgForm.setFieldsValue({
-      OUName: title,
+      OUName: orgTitle,
     });
-    setOrgID(id);
   };
-  const deleteOrg = (e, title, id) => {
-    // e.stopPropagation();
+  // 删除机构
+  const deleteOrg = () => {
     setDeleteOrgVisible(true);
-    setOrgTitle(`删除组织${title}`);
-    setOrgID(id);
     // 删除后默认选择第一个组织
     setTreeState(true);
   };
 
-  // 在currentUser变化后获取
+  // 在currentUser变化后获取角色列表
   useEffect(() => {
     if (currentUser && currentUser.userID) {
       getRoleList();
     }
   }, [currentUser]);
 
-  // 右侧表格相关操作
+  /** ***右侧表格相关操作****** */
+  // 用户关联
   const relateRole = record => {
     setRoleVisible(true);
     setCurrentUser(record);
   };
-
+  // 更改机构
   const changeOrg = record => {
     setChangeOrgVisible(true);
-    setTreeData2(treeData1);
+    // setTreeData2(treeData1);
     setCurrentUser(record);
+    setCurrentSelectOldOrg(record.OUID);
   };
-
+  // 修改密码
   const changePassword = record => {
     setPasswordVisible(true);
     passwordForm.setFieldsValue({
@@ -437,7 +444,7 @@ const UserManage = () => {
     });
     setCurrentUser(record);
   };
-
+  // 编辑用户
   const editUser = record => {
     // console.log(record);
     setEditUserVisible(true);
@@ -449,12 +456,12 @@ const UserManage = () => {
     });
     setCurrentUser(record);
   };
-
+  // 冻结用户
   const freezeUser = record => {
     setFreezeUserVisible(true);
     setCurrentUser(record);
   };
-
+  // 删除用户
   const deleteUser = record => {
     setDeleteUserVisible(true);
     setCurrentUser(record);
@@ -479,6 +486,7 @@ const UserManage = () => {
       });
   };
 
+  /** ***表单提交相关操作****** */
   // 提交-添加用户
   const submitAddUser = () => {
     postAddUser({
@@ -568,7 +576,7 @@ const UserManage = () => {
         message.error(err);
       });
 
-  // 提交删除机构
+  // 提交-删除机构
   const submitDeleteOrg = () =>
     postDeleteOrg(orgID)
       .then(res => {
@@ -590,7 +598,7 @@ const UserManage = () => {
         setTableLoading(false);
         message.error(err);
       });
-
+  // 根据当前 userID 获取用户关联角色
   const getRoleList = () => {
     setLoading(true);
     getUserRelationList(currentUser.userID)
@@ -613,6 +621,7 @@ const UserManage = () => {
         message.error(err);
       });
   };
+  // 提交-关联角色
   const submitRole = () => {
     setUserRelation(
       currentUser.userID,
@@ -642,6 +651,7 @@ const UserManage = () => {
         message.error(err);
       });
   };
+  // 提交-更改机构
   const submitChangeOrg = () =>
     addToOrg(currentUser.userID, currentUser.OUID, newOrgID)
       .then(res => {
@@ -662,6 +672,7 @@ const UserManage = () => {
       .catch(err => {
         message.error(err);
       });
+  // 提交-修改密码
   const submitChangePassword = () =>
     updateUserPassword(
       currentUser.userID,
@@ -769,32 +780,14 @@ const UserManage = () => {
     <PageContainer className={styles.userManageContainer}>
       <div className={styles.contentContainer}>
         <Spin spinning={treeLoading} tip="loading...">
-          <div className={styles.orgContainer}>
-            <span style={{ padding: '8px', fontSize: '16px' }}>
-              机构列表
-              <Tooltip title="查找用户">
-                <SearchOutlined
-                  style={{
-                    fontSize: '18px',
-                    float: 'right',
-                    margin: '4px 4px 0px 12px',
-                    color: '#1890FF',
-                  }}
-                  onClick={searchUser}
-                />
-              </Tooltip>
-              <Tooltip title="添加下级机构">
-                <FolderAddTwoTone
-                  style={{
-                    fontSize: '18px',
-                    float: 'right',
-                    marginTop: '4px',
-                  }}
-                  onClick={e => addSubOrg(e, '根目录', '-1')}
-                />
-              </Tooltip>
-            </span>
-
+          <div className={treeVisible ? styles.orgContainer : styles.hide}>
+            <span style={{ margin: '10px' }}>机构列表</span>
+            <Tooltip title="添加机构">
+              <UsergroupAddOutlined
+                onClick={() => addOrg('根目录', '-1')}
+                style={{ float: 'right', color: '#1890FF', fontSize: '18px' }}
+              />
+            </Tooltip>
             {treeData.length > 0 && (
               <Tree
                 // showLine="true"
@@ -808,14 +801,56 @@ const UserManage = () => {
             )}
           </div>
         </Spin>
+        <div style={{ color: '#1890FF', marginTop: '35vh', fontSize: '18px' }}>
+          {treeVisible && (
+            <Tooltip title="隐藏目录">
+              <DoubleLeftOutlined
+                onClick={() => setTreeVisible(false)}
+                // style={{ background: 'white' }}
+              />
+            </Tooltip>
+          )}
+          {!treeVisible && (
+            <Tooltip title="显示目录">
+              <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
+            </Tooltip>
+          )}
+        </div>
         <div className={styles.userContainer}>
+          <div style={{ height: '50px' }}>
+            <p style={{ margin: '16px 0 10px 16px', display: 'inline-block' }}>
+              当前机构用户总数（
+              <span className={styles.redText}>{tableTitle}</span>）
+            </p>
+            <span style={{ float: 'right', margin: '10px' }}>
+              <Button type="primary" onClick={searchUser}>
+                查找用户
+              </Button>
+              <Button type="primary" onClick={addUser}>
+                添加用户
+              </Button>
+              <Button type="primary" onClick={addSubOrg}>
+                添加机构
+              </Button>
+              <Button type="primary" onClick={editOrg}>
+                编辑机构
+              </Button>
+              <Button type="primary" onClick={deleteOrg}>
+                删除机构
+              </Button>
+            </span>
+          </div>
           <Table
-            title={getTableTitle}
+            rowSelection={{
+              type: selectionType,
+              ...rowSelection,
+            }}
+            locale={{ filterConfirm: '确定', filterReset: '重置' }}
             bordered
             columns={columns}
             dataSource={tableData}
             loading={tableLoading}
-            scroll={{ scrollToFirstRowOnChange: 'true', x: 'max-content' }}
+            scroll={{ x: 'max-content' }}
           />
         </div>
         {/* 查找用户 */}
@@ -859,7 +894,7 @@ const UserManage = () => {
         </Modal>
         {/* 添加用户 */}
         <Modal
-          title={orgTitle}
+          title={`在${orgTitle}下添加用户`}
           visible={userVisible}
           onOk={submitAddUser}
           onCancel={() => setUserVisible(false)}
@@ -898,7 +933,7 @@ const UserManage = () => {
         </Modal>
         {/* 添加下级机构 */}
         <Modal
-          title={orgTitle}
+          title={`在${orgTitle}下添加机构`}
           visible={addOrgVisible}
           onOk={submitAddOrg}
           onCancel={() => setAddOrgVisible(false)}
@@ -920,7 +955,7 @@ const UserManage = () => {
         </Modal>
         {/* 编辑机构 */}
         <Modal
-          title={orgTitle}
+          title={`编辑${orgTitle}`}
           visible={editOrgVisible}
           onOk={submitEditOrg}
           onCancel={() => setEditOrgVisible(false)}
@@ -950,6 +985,7 @@ const UserManage = () => {
         >
           <p>即将删除该机构，是否确认删除？</p>
         </Modal>
+        {/* 用户关联 */}
         <Modal
           title="用户关联"
           visible={roleVisible}
@@ -988,6 +1024,7 @@ const UserManage = () => {
             </Tabs>
           </Spin>
         </Modal>
+        {/* 更改机构 */}
         <Modal
           title="更改机构"
           visible={changeOrgVisible}
@@ -998,16 +1035,16 @@ const UserManage = () => {
           width="330px"
         >
           <span>请选择要更改的目标机构：</span>
-          {changeOrgVisible && treeData2.length > 0 && (
+          {changeOrgVisible && treeData.length > 0 && (
             <Tree
               showIcon="true"
               showLine={{ showLeafIcon: false }}
               defaultExpandAll="true"
-              defaultSelectedKeys={[currentSelectOrg]}
+              defaultSelectedKeys={[currentSelectOldOrg]}
               onSelect={props => {
                 setNewOrgID(props[0]);
               }}
-              treeData={treeData2.map(t => mapTree1(t))}
+              treeData={treeData.map(t => mapTree(t))}
             />
           )}
         </Modal>
@@ -1072,6 +1109,7 @@ const UserManage = () => {
             </Form.Item>
           </Form>
         </Modal>
+        {/* 冻结用户 */}
         <Modal
           title="请确认"
           visible={freezeUserVisible}
@@ -1087,6 +1125,7 @@ const UserManage = () => {
             {+currentUser.state ? '激活' : '冻结'}？
           </p>
         </Modal>
+        {/* 删除用户 */}
         <Modal
           title="确认删除用户"
           visible={deleteUserVisible}

src/pages/userCenter/UserManage.less

@@ -18,14 +18,6 @@
             }
         }
     }
-
-    .freeze{
-        color:gray;
-    }
-    .freezeGray{
-        color:#1890FF;
-    }
-
     .ant-tree-treenode:hover{
         .iconWraper1>span{
             margin-left: 12px;
@@ -34,14 +26,13 @@
         }
     }
     .contentContainer{
-        min-height: calc(100vh - 194px);
+        min-height: calc(100vh - 48px);
         display: flex;
         .orgContainer{
-            width: 20%;
-            height: calc(100vh - 194px);
+            min-height: calc(100vh - 48px);
             float: left;
             padding: 10px;
-            min-width: 300px;
+            min-width: 240px;
             background: white;
             .ant-tree{
                 padding-top: 6px;
@@ -51,15 +42,33 @@
                 }
             }
         }
+        .hide{
+            display: none;
+            // width:0;
+            transition: 1s;
+        }
         .userContainer{
-            padding: 12px;
-            margin-left: 12px;
+            margin-left: 10px;
             flex: 1;
-            height: calc(100vh - 194px);
+            height: calc(100vh - 48px);
             background: white;
             .ant-table-pagination-right{
                 padding-right: 12px;
             }
+            .ant-btn-primary{
+                margin-left: 30px;
+                background: #50aefc;
+            }
+            .ant-table-thead tr th{
+                font-weight: 600;
+                color:rgba(0,0,0,0.85);
+            }
+            .ant-table-cell{
+                text-align:center;
+                overflow: hidden;
+                text-overflow:ellipsis;
+                white-space: nowrap;
+            }
         }
     }
 }

src/pages/userCenter/roleManage/RoleManage.jsx

 import React, { useState, useEffect } from 'react';
 import { Row, Col, Tree, Card, Input, Tooltip, Spin, notification } 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,
   getUserRelationList,
   setMenuToRole,
 } from '@/services/userCenter/roleManage/api';

src/pages/userCenter/roleManage/RoleManage.less

 .cardBox{
-  min-height: calc(100vh - 200px);
-  max-height: calc(100vh - 200px);
+  min-height: calc(100vh - 80px);
+  max-height: calc(100vh - 80px);
   overflow-y: scroll;
 }
 .ant-tree-node-content-wrapper-open{
@@ -26,7 +26,7 @@
   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;
 }
\ No newline at end of file

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;
@@ -29,6 +29,7 @@
 }
 .listItem{
   padding-left: 5px;
+  cursor: pointer;
 }
 .selected{
   background-color: #bae7ff;

src/services/database/api.js

@@ -17,12 +17,43 @@ import { get, post } from '@/services/index';
 export const connectionTest = params =>
   get('/DBManager/ConnectionTest', params);
 
+// 获取数据库配置信息
+export const getDataBaseConfig = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_GetDataBaseConfig', params);
+
+// 获取数据库连接记录
+export const getConnRecord = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_GetConnRecord', params);
+
+// 测试连接
+export const getConnectionTest = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_GetConnectionTest', params);
+
+// 保存数据库连接
+export const saveConnection = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_SaveConnection', params);
+
+// 获取数据库列表
+
+export const getDataBaseList = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_GetDataBaseList', params);
+
 // 数据库初始化
 export const initDBv4 = params =>
   get('/Cityinterface/rest/services/OMS.svc/S_InitDBv4', params);
+
+// 更新描述
+export const updateConnDesc = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_UpdateConnDesc', params);
+
 // 获取日志
 export const getInitDBLog = params =>
   get('/Cityinterface/rest/services/OMS.svc/S_GetInitDBLog', params);
+
+// 删除初始化日志
+export const deleteInitDBLog = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_DeleteInitDBLog', params);
+
 // 修改产品解决方案
 export const setTableSQLDirName = params =>
   get('/Cityinterface/rest/services/OMS.svc/S_SetTableSQLDirName', params);
@@ -31,13 +62,31 @@ export const setTableSQLDirName = params =>
 export const deleteConn = params =>
   get('/Cityinterface/rest/services/OMS.svc/S_DeleteConn', params);
 
+/**
+ *
+ * @解决方案管理
+ */
 // 切换解决方案配置
 export const getSolutionList = params =>
   get('/Cityinterface/rest/services/OMS.svc/W4_GetSolutionList', params);
+
 // 切换解决方案
 export const changeSolution = params =>
   get('/Cityinterface/rest/services/OMS.svc/W4_ChangeSolution', params);
-// 更新站点人员
+
+/**
+ *
+ * @数据库标准化管理
+ */
+// 检查数据库表
+export const tableCheck = params =>
+  get(`/Cityinterface/rest/services/OMS.svc/TableCheck`, params);
+
+// 获取数据库升级记录
+export const databaseStandardGetLog = params =>
+  get('/Cityinterface/rest/services/OMS.svc/DatabaseStandard_GetLog', params);
+
+// 更新
 export const updateDateBase = params =>
   get(
     '/Cityinterface/rest/services/OMS.svc/DatabaseStandard_UpdateDateBase',