样式调整

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,18 +51,25 @@ const ModelTable = (props) => {
   ];
 
   const deleteItem = (record) => {
-    dispatchLatest({
-      type: 'datamodel.deleteDataModel',
-      payload: {
-        params: {
-          id: record.id
-        }
-      },
-      callback: () => {
-        message.success('模型删除成功');
-        onChange && onChange();
+
+    modal.confirm({
+      title: '提示!',
+      content: '您确定要删除该模型吗?',
+      onOk: () => {
+        dispatchLatest({
+          type: 'datamodel.deleteDataModel',
+          payload: {
+            params: {
+              id: record.id
+            }
+          },
+          callback: () => {
+            showMessage('success', '模型删除成功');
+            onChange && onChange();
+          }
+        })
       }
-    })
+    });
   }
 
   const onSelectChange = keys => {
@@ -71,15 +82,17 @@ const ModelTable = (props) => {
   };
 
   return (
-    <>
-      <Table 
+    <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 {
-
-  constructor() {
-    super();
-    this.state = { 
-      loading: false,
-      treeData: null,
-      item: null,
-      visible: false,
-      type: null
-    };
-  }
-
-  componentDidMount() {
-    this.getTreeData();
-  }
-
-  getTreeData = () => {
-    const { onSelect } = this.props;
-
-    this.setState({ loading: true }, () => {
-
-      dispatchLatest({
-        type: 'datamodel.loadDataModelCatalog',
-        callback: data => {
+const ModelTree = (props) => {
 
-          data.key = data.id||'';
-          data.title = data.name||'';
-          data.children = data.subCatalogs||[];
+  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);
 
-          function recursion(subCatalogs) {
+  const [modal, contextHolder] = Modal.useModal();
 
-            if ((subCatalogs||[]).length===0) return;
+  useEffect(() => {
+    getTreeData();
+  }, [])
 
-            (subCatalogs||[]).forEach(catalog=> {
-              catalog.key = catalog.id||'';
-              catalog.title = catalog.name||'';
-              catalog.children = catalog.subCatalogs||[];
-              recursion(catalog.subCatalogs);
-            })
-          } 
-
-          recursion(data.subCatalogs);
-
-          this.setState({ loading: false, treeData: [ data ], item: data }, () => {
-            if (onSelect) {
-              onSelect(data.key);
-            }
-          });
-        }
-      })
+  const getTreeData = () => {
 
+    setLoading(true);
+    dispatchLatest({
+      type: 'datamodel.loadDataModelCatalog',
+      callback: data => {
+
+        data.key = data.id||'';
+        data.title = data.name||'';
+        data.children = data.subCatalogs||[];
+
+        function recursion(subCatalogs) {
+
+          if ((subCatalogs||[]).length===0) return;
+
+          (subCatalogs||[]).forEach(catalog=> {
+            catalog.key = catalog.id||'';
+            catalog.title = catalog.name||'';
+            catalog.children = catalog.subCatalogs||[];
+            recursion(catalog.subCatalogs);
+          })
+        } 
+
+        recursion(data.subCatalogs);
+        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;
     }
 
-    dispatchLatest({
-      type: 'datamodel.deleteDataModelCatalog',
-      payload: {
-        params: {
-          easyDataModelerCatalogId: item.id
-        }
-      },
-      callback: () => {
-        message.success('删除目录成功');
-        this.getTreeData();
+    modal.confirm({
+      title: '提示!',
+      content: '删除目录会删除相关的模型,您确定删除吗?',
+      onOk: () => {
+        dispatchLatest({
+          type: 'datamodel.deleteDataModelCatalog',
+          payload: {
+            params: {
+              easyDataModelerCatalogId: item.id
+            }
+          },
+          callback: () => {
+            showMessage('success', '删除目录成功');
+            getTreeData();
+          }
+        });
       }
     });
 
   }
 
-  onUpdateTreeItemModalOk = () => {
-    this.setState({ visible: false }, () => {
-      this.getTreeData();
-    })
+  const onUpdateTreeItemModalOk = () => {
+    setVisible(false);
+    getTreeData();
   }
 
-  onUpdateTreeItemModalCancel = () => {
-    this.setState({ visible: false });
+  const onUpdateTreeItemModalCancel = () => {
+    setVisible(false);
   }
 
-  render() {
-    const { loading, treeData, visible, type, item } = this.state;
-
-    return (
-      <>
-        <div
-          className='p-3'
-          style={{
-            display: 'flex',
-            borderBottom: "1px solid #EFEFEF",
-          }}
-        >
-          <Tooltip title="新增目录">
-            <Button 
-              type="primary" 
-              shape="circle" 
-              icon={<PlusOutlined />} 
-              onClick={this.add}
-            />
-          </Tooltip>
-          <Tooltip title="修改" className='ml-3'>
-            <Button 
-              type="primary" 
-              shape="circle" 
-              icon={<EditOutlined />} 
-              onClick={this.update}
-            />
-          </Tooltip>
-          <Tooltip title="刷新" className='ml-3'>
-            <Button 
-              type="primary" 
-              shape="circle" 
-              icon={<SyncOutlined />} 
-              onClick={this.refresh}
-            />
-          </Tooltip>
-          <Tooltip title="删除" className='ml-3'>
-            <Button 
-              type="primary" 
-              shape="circle" 
-              icon={<DeleteOutlined />} 
-              onClick={this.delete}
-            />
-          </Tooltip>
-        </div>
-        <div
-          className='overflow-auto p-3'
-        >
-          <Tree loading={loading} showLine showIcon={false} onSelect={this.onTreeSelect} treeData={treeData} selectedKeys={[item?item.key:'']} /> 
-        </div>
-        <UpdateTreeItemModal 
-          visible={visible} 
-          type={type}
-          item={item}
-          onOk={this.onUpdateTreeItemModalOk} 
-          onCancel={this.onUpdateTreeItemModalCancel} 
+  return (
+    <div className='model-tree'>
+      <div
+        className='p-3'
+        style={{
+          display: 'flex',
+          borderBottom: "1px solid #EFEFEF",
+        }}
+      >
+        <Tooltip title="新增目录">
+          <Button 
+            shape="circle" 
+            icon={<PlusOutlined />} 
+            onClick={add}
           />
-      </>
-    );
-  }
+        </Tooltip>
+        <Tooltip title="修改" className='ml-3'>
+          <Button 
+            shape="circle" 
+            icon={<EditOutlined />} 
+            onClick={update}
+          />
+        </Tooltip>
+        <Tooltip title="刷新" className='ml-3'>
+          <Button 
+            shape="circle" 
+            icon={<SyncOutlined />} 
+            onClick={refresh}
+          />
+        </Tooltip>
+        <Tooltip title="删除" className='ml-3'>
+          <Button 
+            shape="circle" 
+            icon={<DeleteOutlined />} 
+            onClick={deleteNode}
+          />
+        </Tooltip>
+      </div>
+      <div
+        className='p-3'
+      >
+      {
+        loading? <Spin /> : (
+          <Tree 
+            showLine 
+            showIcon={false} 
+            onSelect={onTreeSelect} 
+            treeData={treeData} 
+            selectedKeys={[item?item.key:'']} 
+          />
+        )
+      } 
+      </div>
+      <UpdateTreeItemModal 
+        visible={visible} 
+        type={type}
+        item={item}
+        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,14 +31,16 @@ class Model extends React.Component {
   onTableChange = () => {
     const { catalogId } = this.state;
 
-    dispatchLatest({
-      type: 'datamodel.getCurrentDataModelCatalog',
-      payload: {
-        easyDataModelerCatalogId: catalogId
-      },
-      callback: data => {
-        this.setState({ tableData: data.easyDataModelerDataModels||[] });
-      }
+    this.setState({ loadingTableData: true }, () => {
+      dispatchLatest({
+        type: 'datamodel.getCurrentDataModelCatalog',
+        payload: {
+          easyDataModelerCatalogId: catalogId
+        },
+        callback: data => {
+          this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[] });
+        }
+      })
     })
   }
 
@@ -59,29 +62,32 @@ 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}>
-            <ModelTree onSelect={this.onTreeSelect} />
+      <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
-              className='p-3'
-              style={{
-                display: 'flex',
-                borderBottom: "1px solid #EFEFEF",
-              }}
-            >
-              <Button type="primary" style={{marginLeft: 'auto'}}>全选</Button>
-              <Button type="primary" className='ml-3'>提交审核</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} />
+            <div style={{ backgroundColor: '#fff' }}>
+              <div
+                className='p-3'
+                style={{
+                  display: 'flex',
+                  borderBottom: "1px solid #EFEFEF",
+                }}
+              >
+                <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 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`); 
       }
     });