样式调整

src/index.less

@@ -10,7 +10,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #fff;
+  background-color: #ECEEF3;
 }
 
 code {
@@ -67,15 +67,15 @@ div[id^='__qiankun_microapp_wrapper_'] {
 }
 
 //ant design
-.ant-layout {
-  background-color: #eee !important;
+.yy-layout {
+  background-color: #ECEEF3 !important;
 }
 
 .yy-tabs-content-holder {
   height: 100% !important;
 }
 
-.yy-tabs-content {
+.yy-tabs-content, .yy-table {
   height: 100% !important;
   overflow: auto !important;
 }

src/layout/index.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { UserOutlined, LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined, HomeOutlined, FileOutlined, AppstoreOutlined } from "@ant-design/icons";
 
-import { ContextPath, Open } from '../util';
+import { ContextPath, Open, showMessage } from '../util';
 
 import { routes, routeMap } from '../routes';
 
@@ -30,7 +30,7 @@ const _Logout = ({session, isHome, location}) => session ?
       >
         <Menu.Item key="SignOut"
           onClick={e => dispatchLatest({type: 'user.signout',  callback: e => {
-            message.success('退出成功!')
+            showMessage('success', '退出成功!');
             window.setTimeout(e => Open(`${ContextPath}/login`, { target: '_self' }), 1000);
           }})}> 
           <LogoutOutlined />
@@ -105,7 +105,7 @@ export const ManageLayout = function ({ content, location }) {
           </Menu>
         </Sider>
 
-        <Content className="m-3" style={{ backgroundColor: '#eee' }}>
+        <Content className="m-3" style={{ backgroundColor: '#ECEEF3', height: '100%' }}>
           {content}
         </Content>
 

src/util/axios.js

 
 import axios from 'axios';
 import { message } from 'antd';
+
 import { IsArr } from './index';
+import { showMessage } from './index';
 
 const CancelToken = axios.CancelToken;
 const baseURL = '/api/';
@@ -85,7 +87,7 @@ export const SetSource = function (source) {
 
 const callback = resp => {
   if (resp.status === 401) {
-    message.warning("session过期,请重新登录!");  
+    showMessage('warn', "session过期,请重新登录!");
     //外网
     window.location.href="/center-home/view/login"
     //内网

src/view/Manage/Model/Component/ModelTable.jsx

 import React, { useState } from "react";
-import { Table, Space, Button, Tooltip, message } from 'antd';
+import { Table, Space, Button, Tooltip, Modal } from 'antd';
 import { EditOutlined, CheckOutlined, ReconciliationOutlined, DeleteOutlined  } from '@ant-design/icons';
 
 import { dispatchLatest } from '../../../../model'; 
+import { showMessage } from '../../../../util';
+import './ModelTable.less';
 
 const ModelTable = (props) => {
 
-  const { data, onChange } = props;
+  const { data, onChange, loading } = props;
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
 
+  const [modal, contextHolder] = Modal.useModal();
+
   const columns = [
     {
       title: '模型名称',
@@ -47,6 +51,11 @@ const ModelTable = (props) => {
   ];
 
   const deleteItem = (record) => {
+
+    modal.confirm({
+      title: '提示!',
+      content: '您确定要删除该模型吗?',
+      onOk: () => {
         dispatchLatest({
           type: 'datamodel.deleteDataModel',
           payload: {
@@ -55,11 +64,13 @@ const ModelTable = (props) => {
             }
           },
           callback: () => {
-        message.success('模型删除成功');
+            showMessage('success', '模型删除成功');
             onChange && onChange();
           }
         })
       }
+    });
+  }
 
   const onSelectChange = keys => {
     setSelectedRowKeys(keys);
@@ -71,15 +82,17 @@ const ModelTable = (props) => {
   };
 
   return (
-    <>
+    <div className='model-table'>
       <Table
+        loading={loading}
         rowSelection={rowSelection} 
         columns={columns} 
         rowKey={'id'}
         dataSource={data}
         pagination={false} 
       />
-    </>
+      { contextHolder }
+    </div>
   );
 }
 

src/view/Manage/Model/Component/ModelTable.less

+.model-table {
+  .yy-table {
+    height: calc(100vh - 64px - 20px - 53px - 20px) !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file

src/view/Manage/Model/Component/ModelTree.jsx

-import React from "react";
-import { Tooltip, Tree, message, Button } from "antd";
+import React, { useState, useEffect } from "react";
+import { Tooltip, Tree, Button, Modal, Spin } from "antd";
 import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined  } from '@ant-design/icons';
 
 import UpdateTreeItemModal from './UpdateTreeItemModal';
 import { dispatchLatest } from '../../../../model'; 
+import { showMessage } from '../../../../util';
+import './ModelTree.less';
 
-class ModelTree extends React.Component {
+const ModelTree = (props) => {
 
-  constructor() {
-    super();
-    this.state = { 
-      loading: false,
-      treeData: null,
-      item: null,
-      visible: false,
-      type: null
-    };
-  }
+  const { onSelect } = props;
+  const [ loading, setLoading ] = useState(false);
+  const [ treeData, setTreeData ] = useState(null);
+  const [ item, setItem ] = useState(null);
+  const [ visible, setVisible ] = useState(false);
+  const [ type, setType ] = useState(null);
 
-  componentDidMount() {
-    this.getTreeData();
-  }
+  const [modal, contextHolder] = Modal.useModal();
 
-  getTreeData = () => {
-    const { onSelect } = this.props;
+  useEffect(() => {
+    getTreeData();
+  }, [])
 
-    this.setState({ loading: true }, () => {
+  const getTreeData = () => {
 
+    setLoading(true);
     dispatchLatest({
       type: 'datamodel.loadDataModelCatalog',
       callback: data => {
@@ -48,55 +46,51 @@ class ModelTree extends React.Component {
         } 
 
         recursion(data.subCatalogs);
-
-          this.setState({ loading: false, treeData: [ data ], item: data }, () => {
-            if (onSelect) {
-              onSelect(data.key);
-            }
-          });
+        setLoading(false);
+        setTreeData([ data||{} ]);
+        setItem(data);
+        onSelect && onSelect(data.key||'');
       }
     })
-
-    })
   }
 
-  onTreeSelect = (keys,data) => {
-    const { onSelect } = this.props;
+  const onTreeSelect = (keys,data) => {
     const _item = {...data.selectedNodes[0]||[]};
 
-    this.setState({ item: _item }, () => {
-      if (onSelect) {
-        onSelect(_item.key);
-      }
-    });
+    setItem(_item);
+    onSelect && onSelect(_item.key);
   }
 
-  add = () => {
-    this.setState({ visible: true, type: 'add' });
+  const add = () => {
+    setVisible(true);
+    setType('add');
   }
 
-  update = () => {
+  const update = () => {
 
-    const { item } = this.state;
     if (!item) {
-      message.info('请先选择目录');
+      showMessage('info', '请先选择目录');
       return;
     }
 
-    this.setState({ visible: true, type: 'update' });
+    setVisible(true);
+    setType('update');
   }
 
-  refresh = () => {
-    this.getTreeData();
+  const refresh = () => {
+    getTreeData();
   }
 
-  delete = () => {
-    const { item } = this.state;
+  const deleteNode = () => {
     if (!item) {
-      message.info('请先选择目录');
+      showMessage('info', '请先选择目录');
       return;
     }
 
+    modal.confirm({
+      title: '提示!',
+      content: '删除目录会删除相关的模型,您确定删除吗?',
+      onOk: () => {
         dispatchLatest({
           type: 'datamodel.deleteDataModelCatalog',
           payload: {
@@ -105,28 +99,26 @@ class ModelTree extends React.Component {
             }
           },
           callback: () => {
-        message.success('删除目录成功');
-        this.getTreeData();
+            showMessage('success', '删除目录成功');
+            getTreeData();
           }
         });
-
       }
+    });
 
-  onUpdateTreeItemModalOk = () => {
-    this.setState({ visible: false }, () => {
-      this.getTreeData();
-    })
   }
 
-  onUpdateTreeItemModalCancel = () => {
-    this.setState({ visible: false });
+  const onUpdateTreeItemModalOk = () => {
+    setVisible(false);
+    getTreeData();
   }
 
-  render() {
-    const { loading, treeData, visible, type, item } = this.state;
+  const onUpdateTreeItemModalCancel = () => {
+    setVisible(false);
+  }
 
   return (
-      <>
+    <div className='model-tree'>
       <div
         className='p-3'
         style={{
@@ -136,52 +128,58 @@ class ModelTree extends React.Component {
       >
         <Tooltip title="新增目录">
           <Button 
-              type="primary" 
             shape="circle" 
             icon={<PlusOutlined />} 
-              onClick={this.add}
+            onClick={add}
           />
         </Tooltip>
         <Tooltip title="修改" className='ml-3'>
           <Button 
-              type="primary" 
             shape="circle" 
             icon={<EditOutlined />} 
-              onClick={this.update}
+            onClick={update}
           />
         </Tooltip>
         <Tooltip title="刷新" className='ml-3'>
           <Button 
-              type="primary" 
             shape="circle" 
             icon={<SyncOutlined />} 
-              onClick={this.refresh}
+            onClick={refresh}
           />
         </Tooltip>
         <Tooltip title="删除" className='ml-3'>
           <Button 
-              type="primary" 
             shape="circle" 
             icon={<DeleteOutlined />} 
-              onClick={this.delete}
+            onClick={deleteNode}
           />
         </Tooltip>
       </div>
       <div
-          className='overflow-auto p-3'
+        className='p-3'
       >
-          <Tree loading={loading} showLine showIcon={false} onSelect={this.onTreeSelect} treeData={treeData} selectedKeys={[item?item.key:'']} /> 
+      {
+        loading? <Spin /> : (
+          <Tree 
+            showLine 
+            showIcon={false} 
+            onSelect={onTreeSelect} 
+            treeData={treeData} 
+            selectedKeys={[item?item.key:'']} 
+          />
+        )
+      } 
       </div>
       <UpdateTreeItemModal 
         visible={visible} 
         type={type}
         item={item}
-          onOk={this.onUpdateTreeItemModalOk} 
-          onCancel={this.onUpdateTreeItemModalCancel} 
+        onOk={onUpdateTreeItemModalOk} 
+        onCancel={onUpdateTreeItemModalCancel} 
         />
-      </>
+      {contextHolder}  
+    </div>
   );
-  }
 }
 
 export default ModelTree;
\ No newline at end of file

src/view/Manage/Model/Component/ModelTree.less

+.model-tree {
+  .yy-tree-list {
+    height: calc(100vh - 64px - 20px - 53px - 20px) !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -17,7 +17,8 @@ class Model extends React.Component {
       exportModalVisible: false,
       catalogId: '',
       importModalAction: '',
-      tableData: []
+      tableData: [],
+      loadingTableData: false, 
     }
   }
 
@@ -30,15 +31,17 @@ class Model extends React.Component {
   onTableChange = () => {
     const { catalogId } = this.state;
 
+    this.setState({ loadingTableData: true }, () => {
       dispatchLatest({
         type: 'datamodel.getCurrentDataModelCatalog',
         payload: {
           easyDataModelerCatalogId: catalogId
         },
         callback: data => {
-        this.setState({ tableData: data.easyDataModelerDataModels||[] });
+          this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[] });
         }
       })
+    })
   }
 
   onImportBtnClick = () => {
@@ -59,15 +62,18 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData } = this.state;
+    const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData, loadingTableData } = this.state;
 
     return (
-      <div style={{ backgroundColor: '#fff', height: '100%' }}>
-        <Row gutter={10} style={{ height: '100%' }}>
-          <Col span={6}>
+      <div style={{ backgroundColor: '#ECEEF3', height: '100%' }}>
+        <Row style={{ height: '100%' }}>
+          <Col span={6} style={{ height: '100%' }} >
+            <div className='mr-3' style={{ backgroundColor: '#fff' }}>
               <ModelTree onSelect={this.onTreeSelect} />
+            </div>
           </Col>
           <Col span={18}>
+            <div style={{ backgroundColor: '#fff' }}>
               <div
                 className='p-3'
                 style={{
@@ -75,13 +81,13 @@ class Model extends React.Component {
                   borderBottom: "1px solid #EFEFEF",
                 }}
               >
-              <Button type="primary" style={{marginLeft: 'auto'}}>全选</Button>
-              <Button type="primary" className='ml-3'>提交审核</Button>
+                <Button type="primary" style={{ marginLeft: 'auto' }}>提交审核</Button>
                 <Button type="primary" className='ml-3' onClick={this.onImportBtnClick}>模型创建</Button>
                 <Button type="primary" className='ml-3' onClick={this.onExportBtnClick}>模型导出</Button>
               </div>
               <div className='p-3'>
-              <ModelTable data={tableData} onChange={this.onTableChange} />
+                <ModelTable loading={loadingTableData} data={tableData} onChange={this.onTableChange} />
+              </div>
             </div>
           </Col>
         </Row>

src/view/Signin/index.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import CryptoJS from "crypto-js";
 import { UserOutlined, LockOutlined } from "@ant-design/icons";
 
-import { Open, Assert, ContextPath } from '../../util';
+import { Open, Assert, ContextPath, showMessage } from '../../util';
 import { dispatchLatest } from '../../model';
 import loginBG from "../../assets/login_bg.png";
 
@@ -26,7 +26,7 @@ class Signin extends Component {
           return;
         }
         Assert(sess === "ok", "用户名或密码不正确");
-        message.success('登录成功');
+        showMessage('success', '登录成功');
         history.push(referer || `${ContextPath}/home`); 
       }
     });