调整

src/view/Manage/AssetManage/components/AssetDetail.jsx

@@ -12,11 +12,11 @@ const AssetDetail = (props)=>{
 
   useEffect(() => {
 
-    if ((id||'') !== '') {
+    if (visible && (id||'') !== '') {
       getAssetThenGetAssetName();
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ id ])
+  }, [ visible ])
 
   const getAssetThenGetAssetName = () => {
     dispatch({

src/view/Manage/AssetManage/components/AssetEdit.jsx

@@ -4,6 +4,8 @@ import { Modal, Form, Input, Space, Button } from 'antd';
 import { showMessage } from '../../../../util';
 import { dispatch } from '../../../../model';
 
+import './AssetEdit.less';
+
 const AssetEdit = (props) => {
 
   const { onCancel, visible, action, id, nodeId } = props;
@@ -118,6 +120,7 @@ const AssetEdit = (props) => {
   return (
     <Modal
       forceRender
+      className='asset-edit'
       title='资产信息'
       visible={ visible }
       width={ 600 }

src/view/Manage/AssetManage/components/AssetEdit.less

+.asset-edit {
+  .yy-form {
+    max-height: 500px !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file

src/view/Manage/AssetManage/components/AssetTable.jsx

@@ -131,6 +131,10 @@ const AssetTable = (props) =>{
     })
   }
 
+  const importAsset = () => {
+    setImportAssetVisible(true);
+  }
+
   const exportAsset = () => {
     if ((selectedKeys||[]).length === 0) {
       showMessage('warn', '请先选择资产');
@@ -202,12 +206,12 @@ const AssetTable = (props) =>{
     }
   }
 
-  const onImportAssetVisibleChange = (visible = false, refresh = false) => {
+  const onImportAssetCancel = (visible = false, refresh = false) => {
     setImportAssetVisible(visible);
     refresh && getTable();
   }
 
-  const onImportElementVisibleChange = (visible = false, tip = '') => {
+  const onImportElementCancel = (visible = false, tip = '') => {
     setImportElementVisible(visible);
 
     if (tip && tip!== '') {
@@ -220,6 +224,10 @@ const AssetTable = (props) =>{
     refresh && getTable();
   }
 
+  const onImportElementBtnClick = () => {
+    setImportElementVisible(true);
+  }
+
   const onExportElementBtnClick = () => {
     window.open('/api/dataassetmanager/elementApi/export');
   }
@@ -254,15 +262,7 @@ const AssetTable = (props) =>{
         <div>
           <Space>
             <span>资产要素:</span>
-            <Popover 
-              placement="bottom" 
-              content={<ImportElement onCancel={onImportElementVisibleChange} />} 
-              title='资产要素导入'
-              visible={importElementVisible} 
-              onVisibleChange={onImportElementVisibleChange}
-              trigger="hover">
-              <Button type="primary">导入</Button>
-            </Popover>
+            <Button type="primary" onClick={onImportElementBtnClick}>导入</Button>
             <Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
             <Popover 
               placement="bottom" 
@@ -278,17 +278,7 @@ const AssetTable = (props) =>{
             <span>资产:</span>
             <Button type="primary"  onClick={ addAsset }>新增</Button>
             <Button type="primary" danger onClick={ deleteAssets } >删除</Button>
-            <Popover 
-              placement="bottomRight" 
-              content={ <ImportAsset nodeId={nodeId} onCancel={onImportAssetVisibleChange} /> } 
-              title='资产导入'
-              visible={importAssetVisible} 
-              onVisibleChange={onImportAssetVisibleChange}
-              trigger="hover">
-              <Button type="primary">
-              导入
-              </Button>
-            </Popover>
+            <Button type="primary" onClick={importAsset} >导入</Button>
             <Button type="primary" onClick={exportAsset} >导出</Button>
           </Space>
         </div>
@@ -349,7 +339,6 @@ const AssetTable = (props) =>{
           showTotal={total => `共 ${total} 条`}
         />
       </Checkbox.Group>
-      {/* <AssetModal visible={visible.visible} attrBox={attrBox} editBox={editBox} addType={visible.addtype} handleCancle={handleCancle} nodeId={nodeId}  setPageNumber={setPageNumber} pageNumber={pageNumber}/> */}
       <AssetEdit 
         visible={assetEditVisible}
         action={assetEditAction}
@@ -362,6 +351,15 @@ const AssetTable = (props) =>{
         id={currentAssetId} 
         onCancel={onAssetDetailCancel}
       />
+      <ImportElement 
+        visible={importElementVisible}
+        onCancel={onImportElementCancel}
+      />
+      <ImportAsset 
+        visible={importAssetVisible}
+        nodeId={nodeId}
+        onCancel={onImportAssetCancel}
+      />
       {contextHolder}
     </Card>
   )

src/view/Manage/AssetManage/components/ImportAsset.jsx

 import React from 'react';
-import { Button, Upload, Space } from 'antd';
+import { Button, Upload, Modal } from 'antd';
 import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
 
 import { dispatch } from '../../../../model';
@@ -43,7 +43,7 @@ class ImportAsset extends React.Component {
             type: 'assetmanage.assetImport',
             payload: { fileList: fileList[0], params: { parentPath: data.path||'' } },
             callback: () => {
-              this.setState({ confirmLoading: false }, () => {
+              this.setState({ confirmLoading: false, fileList: [] }, () => {
                 onCancel && onCancel(false, true);
               });
             },
@@ -58,7 +58,7 @@ class ImportAsset extends React.Component {
 
   render() {
 
-    const { onCancel } = this.props;
+    const { onCancel, visible } = this.props;
     const { fileList, confirmLoading } = this.state;
 
     const uploadProps = {
@@ -79,7 +79,18 @@ class ImportAsset extends React.Component {
     };
 
     return (
-      <div style={{ width: 300 }}>
+      <Modal 
+        forceRender
+        visible={visible}
+        title='资产导入'
+        width={520}
+        confirmLoading={confirmLoading}
+        onCancel={() => {
+          this.reset();
+          onCancel && onCancel();
+        }}
+        onOk={this.onOk}
+      >
         <div>
           <Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
           模版下载
@@ -92,16 +103,7 @@ class ImportAsset extends React.Component {
             </Button>
           </Upload>
         </div>
-        <div className='mt-3 d-flex pt-3' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.06)' }} >
-          <Space style={{ marginLeft: 'auto' }}>
-            <Button onClick={() => {
-              this.reset();
-              onCancel && onCancel();
-            }}>取消</Button>
-            <Button type='primary' onClick={this.onOk} loading={confirmLoading} >确定</Button>
-          </Space>
-        </div>
-      </div>
+      </Modal>
     )
   }
 }

src/view/Manage/AssetManage/components/ImportDirectory.jsx

@@ -46,14 +46,14 @@ const ImportDirectory = (props) => {
       let payload;
       if (row.type === 'root') {
         payload = { 
-          fileList: fileList[0].originFileObj 
+          fileList: fileList[0] 
         };
       } else {
         payload = { 
           params: {
             parentPath: dir.path
           },
-          fileList: fileList[0].originFileObj 
+          fileList: fileList[0] 
         };
       }
 

src/view/Manage/AssetManage/components/ImportElement.jsx

 import React, { useState } from 'react';
-import { Button, Upload, Space } from 'antd';
+import { Button, Upload, Modal } from 'antd';
 import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
 
 import { dispatchLatest } from '../../../../model'; 
 import { showMessage } from '../../../../util';
 
 const ImportElement = (props) => {
-  const { onCancel } = props;
+  const { onCancel, visible } = props;
   const [ fileList, setFileList ] = useState([]);
   const [ confirmLoading, setConfirmLoading ] = useState(false);
 
@@ -59,7 +59,18 @@ const ImportElement = (props) => {
   }
 
   return (
-    <div style={{ width: 300 }}>
+    <Modal 
+      forceRender
+      visible={visible}
+      title='资产要素导入'
+      width={520}
+      confirmLoading={confirmLoading}
+      onCancel={() => {
+        reset();
+        onCancel && onCancel();
+      }}
+      onOk={handleOk}
+    >
       <div>
         <Button icon={<DownloadOutlined />} onClick={ downloadTemplate }>
         模版下载
@@ -72,16 +83,7 @@ const ImportElement = (props) => {
           </Button>
         </Upload>
       </div>
-      <div className='mt-3 d-flex pt-3' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.06)' }} >
-        <Space style={{ marginLeft: 'auto' }}>
-          <Button onClick={() => {
-            reset();
-            onCancel && onCancel();
-          }}>取消</Button>
-          <Button type='primary' onClick={handleOk} loading={confirmLoading} >确定</Button>
-        </Space>
-      </div>
-    </div>
+    </Modal>
   )
 }
 

src/view/Manage/Model/Component/ExportModal.jsx → src/view/Manage/Model/Component/ExportDDLModal.jsx

 import React from 'react';
-import { Modal, Radio, Button, Select, Input } from 'antd';
-import copy from "copy-to-clipboard";  
+import { Modal, Button, Select, Input } from 'antd';
 
 import { showMessage } from '../../../../util';
 import { dispatch } from '../../../../model';
 
 const { Option } = Select;
 
-const modes = [
-  {
-    title: '导出DDL',
-    key: 'ddl',
-  },
-  {
-    title: '导出Erwin',
-    key: 'erwin',
-  },
-  {
-    title: '导出Excel',
-    key: 'excel',
-  },
-  {
-    title: '导出Word',
-    key: 'word',
-  },
-]
-
-class ExportModal extends React.Component {
+class ExportDDLModal extends React.Component {
 
   constructor() {
     super();
     this.state = {
-      selectedKey: '',
       loadingDDLGenerators: false,
       ddlGenerators: [],
       selectDDLGeneratorName: null,
@@ -61,32 +40,10 @@ class ExportModal extends React.Component {
     })
   }
 
-  onModeClick = (e) => {
-    this.setState({ selectedKey: e.target.value });
-  }
-
   handleOk = () => {
-    const { onCancel, ids } = this.props;
-    const { selectedKey, ddlGenerators, loadingDDLGenerators, selectDDLGeneratorName } = this.state;
+    const { ids } = this.props;
+    const { ddlGenerators, loadingDDLGenerators, selectDDLGeneratorName } = this.state;
 
-    if (selectedKey === '') {
-      showMessage('info', '请先选择导出方式');
-      return;
-    }
-
-    if (selectedKey === 'excel') {
-
-      window.open(`/api/datamodeler/easyDataModelerExport/excel?ids=${ids.join(',')}`);
-      this.reset();
-      onCancel && onCancel();
-    
-    } else if (selectedKey === 'word') {
-      
-      window.open(`/api/datamodeler/easyDataModelerExport/word?ids=${ids.join(',')}`);
-      this.reset();
-      onCancel && onCancel();
-
-    } else if (selectedKey === 'ddl') {
 
     if (loadingDDLGenerators) {
       showMessage('info', '正在加载ddl支持的数据库类型');
@@ -122,32 +79,10 @@ class ExportModal extends React.Component {
       });
     })
 
-    } else if (selectedKey === 'erwin') {
-    
-      this.setState({ confirmLoading: true }, () => {
-        dispatch({
-          type: 'datamodel.exportERWinString',
-          payload: {
-            ids: ids.join(','),
-          },
-          callback: data => {
-            this.setState({ confirmLoading: false }, () => {
-              copy(JSON.stringify(data));
-              this.reset();
-              onCancel && onCancel(selectedKey);
-            });
-          }, 
-          error: () => {
-            this.setState({ confirmLoading: false });
-          }
-        });
-      })
-
-    }
   }
 
   reset = () => {
-    this.setState({ selectedKey: '', selectDDLGeneratorName: '', ddlExportSuccess: false, ddlExportStrings: [] });
+    this.setState({ selectDDLGeneratorName: '', ddlExportSuccess: false, ddlExportStrings: [] });
   }
 
   onModalerNameChange = (value) => {
@@ -161,9 +96,9 @@ class ExportModal extends React.Component {
 
   render() {
     const { visible, onCancel, names } = this.props;
-    const { selectedKey, ddlGenerators, loadingDDLGenerators, confirmLoading, selectDDLGeneratorName, ddlExportSuccess, ddlExportString, selectModalerNameKey } = this.state;
+    const { ddlGenerators, loadingDDLGenerators, confirmLoading, selectDDLGeneratorName, ddlExportSuccess, ddlExportString, selectModalerNameKey } = this.state;
 
-    const title = ddlExportSuccess ? 'DDL导出详情' : '导出方式';
+    const title = ddlExportSuccess ? 'DDL导出详情' : 'DDL导出';
 
     const footer = ddlExportSuccess ? ([
       <Button
@@ -228,19 +163,7 @@ class ExportModal extends React.Component {
             </div>
             <Input.TextArea value={ddlExportString||''} autoSize={{minRows:4,maxRows:20}} ></Input.TextArea>
           </> : <> 
-            <Radio.Group value={selectedKey} onChange={this.onModeClick}>
-            {
-              modes && modes.map((mode, index) => {
-                return (
-                  <Radio key={index} value={mode.key||''}>
-                  { mode.title||'' }
-                  </Radio>
-                );
-              }) 
-            }
-            </Radio.Group>
-            {
-              selectedKey==='ddl' && <div className='d-flex mt-5' style={{ alignItems: 'center' }}>
+            <div className='d-flex' style={{ alignItems: 'center' }}>
               <span className='mr-2' >数据库类型: </span>
               <Select 
                   value={selectDDLGeneratorName}
@@ -256,7 +179,6 @@ class ExportModal extends React.Component {
                 }
                 </Select>
             </div>
-            }
           </>
         }
         </>
@@ -265,4 +187,4 @@ class ExportModal extends React.Component {
   }
 }
 
-export default ExportModal
+export default ExportDDLModal;
\ No newline at end of file

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

 import React, { useState, useEffect } from 'react';
-import { Modal, Radio, Button, Form } from 'antd';
+import { Modal, Button, Form } from 'antd';
 
 // import ImportLog from './ImportLog';
 import ImportExcel from './ImportExcel';
@@ -10,29 +10,9 @@ import ImportAction from './ImportAction';
 import { dispatchLatest } from '../../../../model'; 
 import { showMessage } from '../../../../util';
 
-const modes = [
-  {
-    title: 'Excel导入',
-    key: 'excel'
-  },
-  {
-    title: 'Excel复制粘贴',
-    key: 'excel-copy',
-  },
-  // {
-  //   title: 'Erwin',
-  //   key: 'erwin',
-  // },
-  // {
-  //   title: '元数据输入',
-  //   key: 'metadata',
-  // },
-]
-
 const ImportModal = (props) => {
-  const { catalogId, visible, onCancel, action, modelerId } = props;
+  const { catalogId, visible, onCancel, action, addMode, modelerId } = props;
   const [ step, setStep ] = useState(0);
-  const [ radioValue, setRadioValue ] = useState('');
   const [ excelFiles, setExcelFiles ] = useState([]);
   const [ hints, setHints ] = useState([]);
   const [ modelerData, setModelerData ] = useState({});
@@ -46,33 +26,18 @@ const ImportModal = (props) => {
       if (action === 'add') {
         setStep(0);
       } else {
-        setStep(2);
+        setStep(1);
       }
     }
 
   }, [visible, catalogId, action])
 
-  const onRadioChange = e => {
-    setRadioValue(e.target.value);
-  };
-
   const prev = () => {
     setStep(step-1);
   }
 
   const next = () => {
-
-    if (step===0) {
-      if (radioValue === '') {
-        showMessage('warn', '请先选择创建方式');
-      } else {
-        setStep(step+1);
-      }
-
-      return;
-    }
-
-    if (step===1 && radioValue==='excel') {
+    if (step===0 && addMode==='excel') {
       if ((excelFiles||[]).length === 0) {
         showMessage('warn', '请先选择文件上传');
       } else {
@@ -93,7 +58,7 @@ const ImportModal = (props) => {
       } 
 
       return;
-    } else if (step===1 && radioValue==='excel-copy') {
+    } else if (step===0 && addMode==='excel-copy') {
 
       if ((hints||[]).length === 0) {
         showMessage('warn', '请先从Excel文件中复制内容');
@@ -157,7 +122,6 @@ const ImportModal = (props) => {
 
   const reset = () => {
     setStep(0);
-    setRadioValue('');
     setExcelFiles([]);
     setHints([]);
     setModelerData({});
@@ -178,15 +142,13 @@ const ImportModal = (props) => {
 
   let title = '';
   if (action === 'add') {
-    if (step === 0) {
-      title = '创建方式';
-    } else if (step===1 && radioValue==='excel') {
+    if (step===0 && addMode==='excel') {
       title = 'excel导入';
-    } else if (step===1 && radioValue==='excel-copy') {
+    } else if (step===0 && addMode==='excel-copy') {
       title = 'excel复制粘贴导入';
-    } else if (step===2 && radioValue==='excel') {
+    } else if (step===1 && addMode==='excel') {
       title = '模型创建-excel导入';
-    } else if (step===2 && radioValue=== 'excel-copy') {
+    } else if (step===1 && addMode=== 'excel-copy') {
       title = '模型创建-excel复制粘贴导入';
     }
   } else if (action === 'edit') {
@@ -210,7 +172,7 @@ const ImportModal = (props) => {
         key="1" 
         type="primary"
         loading={confirmLoading}
-        style={{ display: (step<2)?'':'none' }}
+        style={{ display: (step===0)?'':'none' }}
         onClick={next}
       >
       下一步
@@ -219,7 +181,7 @@ const ImportModal = (props) => {
         key="2" 
         type="primary"
         loading={confirmLoading}
-        style={{ display: (step===2)?'':'none' }}
+        style={{ display: (step===1)?'':'none' }}
         onClick={save}
       >
       保存
@@ -260,7 +222,7 @@ const ImportModal = (props) => {
       forceRender
       visible={visible}
       title={title}
-      width={step===2?1300:520}
+      width={step===1?1300:520}
       maskClosable={false}
       onCancel={() => {
         reset();
@@ -270,35 +232,19 @@ const ImportModal = (props) => {
     >
       <>
       {
-        step===0 && <> 
-          <Radio.Group value={radioValue} onChange={onRadioChange}>
-          {
-            modes && modes.map((mode, index) => {
-              return (
-                <Radio key={index} value={mode.key||''}>
-                { mode.title||'' }
-                </Radio>
-              );
-            }) 
-          }
-          </Radio.Group>
-          {/* <ImportLog /> */}
-        </>
-      }
-      {
-        step===1 && radioValue==='excel' && <ImportExcel onChange={onImportExcelChange} />
+        step===0 && addMode==='excel' && <ImportExcel onChange={onImportExcelChange} />
       }
       {
-        step===1 && radioValue==='excel-copy' && <ImportExcelCopy onChange={onImportExcelCopyChange} />
+        step===0 && addMode==='excel-copy' && <ImportExcelCopy onChange={onImportExcelCopyChange} />
       }
       {
-        step===1 && radioValue==='erwin' && <></>
+        step===0 && addMode==='erwin' && <></>
       }
       {
-        step===1 && radioValue==='metadata' && <ImportMetadata />
+        step===0 && addMode==='metadata' && <ImportMetadata />
       }
       {
-        step===2 && <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} />
+        step===1 && <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} />
       }
       </>
     </Modal>

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

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

src/view/Manage/Model/index.jsx

 import React from 'react';
-import { Row, Col, Button, Input } from 'antd';
+import { Row, Col, Button, Input, Space } from 'antd';
+import copy from "copy-to-clipboard";  
 
 import ModelTree from './Component/ModelTree';
 import ModelTable from './Component/ModelTable';
 import ImportModal from './Component/ImportModal';
-import ExportModal from './Component/ExportModal';
+import ExportDDLModal from './Component/ExportDDLModal';
 import { showMessage, showNotifaction } from '../../../util';
 import { dispatch } from '../../../model'; 
 
@@ -14,15 +15,17 @@ class Model extends React.Component {
     super();
     this.state = {
       importModalVisible: false,
-      exportModalVisible: false,
+      exportDDLModalVisible: false,
       catalogId: '',
       importModalAction: '',
+      importModalAddMode: '',
       tableData: [],
       filterTableData: [],
       loadingTableData: false, 
       selectModelerIds: [],
       selectModelerNames: [],
       keyword: '',
+      exportErwinLoading: false,
     }
   }
 
@@ -80,17 +83,27 @@ class Model extends React.Component {
 
   }
 
-  onImportBtnClick = () => {
+  onImportExcelBtnClick = () => {
     const { catalogId } = this.state;
     if (!catalogId || catalogId==='') {
       showMessage('info', '请先选择目录');
       return;
     }
 
-    this.setState({ importModalVisible: true, importModalAction: 'add' });
+    this.setState({ importModalVisible: true, importModalAction: 'add', importModalAddMode: 'excel' });
   }
 
-  onExportBtnClick = () => {
+  onImportExcelCopyBtnClick = () => {
+    const { catalogId } = this.state;
+    if (!catalogId || catalogId==='') {
+      showMessage('info', '请先选择目录');
+      return;
+    }
+
+    this.setState({ importModalVisible: true, importModalAction: 'add', importModalAddMode: 'excel-copy' });
+  }
+
+  onExportDDLBtnClick = () => {
     const { selectModelerIds, tableData } = this.state;
     if ((selectModelerIds||[]).length === 0) {
       showMessage('info', '请先选择模型');
@@ -105,7 +118,57 @@ class Model extends React.Component {
       }
     });
 
-    this.setState({ exportModalVisible: true, selectModelerNames: _selectModelerNames });
+    this.setState({ exportDDLModalVisible: true, selectModelerNames: _selectModelerNames });
+  }
+
+  onExportErwinBtnClick = () => {
+    const { selectModelerIds } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择模型');
+      return;
+    }
+
+    this.setState({ exportErwinLoading: true }, () => {
+      dispatch({
+        type: 'datamodel.exportERWinString',
+        payload: {
+          ids: selectModelerIds.join(','),
+        },
+        callback: data => {
+          this.setState({ exportErwinLoading: false }, () => {
+            copy(JSON.stringify(data));
+            showNotifaction('提示', 'Erwin信息已成功复制到剪贴板', 5);
+          });
+        }, 
+        error: () => {
+          this.setState({ exportErwinLoading: false });
+        }
+      });
+    })
+  }
+
+  onExportExcelBtnClick = () => {
+    const { selectModelerIds } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择模型');
+      return;
+    }
+
+    window.open(`/api/datamodeler/easyDataModelerExport/excel?ids=${selectModelerIds.join(',')}`);
+  }
+
+  onExportWordBtnClick = () => {
+    const { selectModelerIds } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择模型');
+      return;
+    }
+
+    window.open(`/api/datamodeler/easyDataModelerExport/word?ids=${selectModelerIds.join(',')}`);
+  }
+
+  onImportExcelVisibleChange = (visible = false, hint = null) => {
+    this.setState({ importExcelVisible: visible });
   }
 
   onImportModalCancel = (refresh = false) => {
@@ -113,16 +176,12 @@ class Model extends React.Component {
     refresh && this.onTableChange();
   }
 
-  onExportModalCancel = (selectedKey = '') => {
-    this.setState({ exportModalVisible: false });
-
-    if (selectedKey === 'erwin') {
-      showNotifaction('提示', 'Erwin信息已成功复制到剪贴板', 4);
-    }
+  onExportDDLModalCancel = () => {
+    this.setState({ exportDDLModalVisible: false });
   }
 
   render() {
-    const { importModalVisible, exportModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData, selectModelerNames } = this.state;
+    const { importModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible } = this.state;
 
     return (
       <div style={{ backgroundColor: '#ECEEF3' }}>
@@ -141,8 +200,8 @@ class Model extends React.Component {
                   justifyContent: 'space-between'
                 }}
               >
-                <div className='d-flex' style={{ alignItems: 'center' }}>
-                  <span className='mr-3'>模型搜索:</span>
+                <Space>
+                  <span>模型搜索:</span>
                   <Input 
                     placeholder="请输入模型名称或者英文名称" 
                     allowClear 
@@ -150,11 +209,27 @@ class Model extends React.Component {
                     onChange={this.onSearchInputChange} 
                     style={{ width: 240, marginLeft: 'auto' }}
                   />
+                </Space>
               </div>
-                <div className='d-flex' style={{ alignItems: 'center' }}>
-                  <Button type="primary" onClick={this.onImportBtnClick}>模型创建</Button>
-                  <Button type="primary" className='ml-3' onClick={this.onExportBtnClick}>模型导出</Button>
-                </div>
+              <div
+                className='d-flex p-3'
+                style={{
+                  borderBottom: '1px solid #EFEFEF',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Space>
+                  <span>模型创建:</span>
+                  <Button type="primary" onClick={this.onImportExcelBtnClick}>Excel导入</Button>
+                  <Button type="primary" onClick={this.onImportExcelCopyBtnClick}>Excel复制粘贴</Button>
+                </Space>  
+                <Space className='ml-5'>
+                  <span>模型导出:</span>
+                  <Button type="primary" onClick={this.onExportDDLBtnClick}>导出DDL</Button>
+                  <Button type="primary" onClick={this.onExportErwinBtnClick}loading={exportErwinLoading}>导出Erwin</Button>
+                  <Button type="primary" onClick={this.onExportExcelBtnClick}>导出Excel</Button>
+                  <Button type="primary" onClick={this.onExportWordBtnClick}>导出Word</Button>
+                </Space>
               </div>
               <div className='p-3'>
                 <ModelTable loading={loadingTableData} catalogId={catalogId} data={filterTableData} onChange={this.onTableChange} onSelect={this.onTableSelect} onItemAction={this.onTableItemAction} />
@@ -166,16 +241,17 @@ class Model extends React.Component {
         <ImportModal 
           visible={importModalVisible} 
           action={importModalAction}
+          addMode={importModalAddMode}
           onCancel={this.onImportModalCancel}
           catalogId={catalogId} 
           modelerId={modelerId}
         />
 
-        <ExportModal 
-          visible={exportModalVisible}
+        <ExportDDLModal 
+          visible={exportDDLModalVisible}
           ids={selectModelerIds} 
           names={selectModelerNames}
-          onCancel={this.onExportModalCancel} 
+          onCancel={this.onExportDDLModalCancel} 
         /> 
       </div>
     );