增加模型导出

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

@@ -3,16 +3,12 @@ import { Modal, Radio, Button } from 'antd';
 
 const modes = [
   {
-    title: '导出DDL',
-  },
-  {
-    title: '导出Erwin',
-  },
-  {
     title: '导出Excel',
+    key: 'excel',
   },
   {
-    title: '导出模型文档'
+    title: '导出Word',
+    key: 'word',
   },
 ]
 
@@ -21,36 +17,47 @@ class ExportModal extends React.Component {
   constructor() {
     super();
     this.state = {
-      confirmLoading: false
+      selectedKey: '',
     }
   }
 
-  onModeClick = (index) => {
-
+  onModeClick = (e) => {
+    this.setState({ selectedKey: e.target.value });
   }
 
   handleOk = () => {
-    const { onCancel } = this.props;
+    const { onCancel, ids } = this.props;
+    const { selectedKey } = this.state;
 
-    if (onCancel) {
-      onCancel();
+    if (selectedKey === 'excel') {
+      window.open(`/api/datamodeler/easyDataModelerExport/excel?ids=${ids.join(',')}`);
+    } else if (selectedKey === 'word') {
+      window.open(`/api/datamodeler/easyDataModelerExport/word?ids=${ids.join(',')}`);
     }
+
+    this.reset();
+    onCancel && onCancel();
+  }
+
+  reset = () => {
+    this.setState({ selectedKey: '' });
   }
 
   render() {
     const { visible, onCancel } = this.props;
-    const { confirmLoading } = this.state;
+    const { selectedKey } = this.state;
     return (
       <Modal 
         visible={visible}
         title={"导出方式"}
-        destroyOnClose
         onOk={this.handleOk}
-        onCancel={onCancel}
+        onCancel={() => {
+          this.reset();
+          onCancel && onCancel();
+        }}
         footer={[
           <Button
             key="0" 
-            loading={confirmLoading} 
             type="primary"
             onClick={this.handleOk}
           >
@@ -58,11 +65,11 @@ class ExportModal extends React.Component {
           </Button>
         ]}
       >
-        <Radio.Group>
+        <Radio.Group value={selectedKey} onChange={this.onModeClick}>
         {
           modes && modes.map((mode, index) => {
             return (
-              <Radio key={index} value={index}>
+              <Radio key={mode.key||''} value={mode.key||''}>
               { mode.title||'' }
               </Radio>
             );

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

-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Table, Space, Button, Tooltip, Modal } from 'antd';
 import { EditOutlined, CheckOutlined, ReconciliationOutlined, DeleteOutlined  } from '@ant-design/icons';
 
@@ -8,11 +8,19 @@ import './ModelTable.less';
 
 const ModelTable = (props) => {
 
-  const { data, onChange, loading, onItemAction } = props;
+  const { data, onChange, loading, onItemAction, onSelect, catalogId } = props;
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
 
   const [modal, contextHolder] = Modal.useModal();
 
+  useEffect(() => {
+
+    setSelectedRowKeys([]);
+    onSelect && onSelect([]);
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ catalogId ]);
+
   const columns = [
     {
       title: '模型名称',
@@ -82,6 +90,7 @@ const ModelTable = (props) => {
 
   const onSelectChange = keys => {
     setSelectedRowKeys(keys);
+    onSelect && onSelect(keys);
   };
 
   const rowSelection = {

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

@@ -89,7 +89,7 @@ const UpdateTreeItemModal = (props) => {
         _action = item ? 'sub' : 'root';
       }
 
-      form.setFields([{ name: 'name', errors: [] }, { name: 'remark', error: [] }])
+      form.setFields([{ name: 'name', errors: [] }, { name: 'remark', errors: [] }]);
 
       if (type === 'add') {
         form.setFieldsValue({ action: _action, name: '', remark: '' });

src/view/Manage/Model/index.jsx

@@ -19,11 +19,12 @@ class Model extends React.Component {
       importModalAction: '',
       tableData: [],
       loadingTableData: false, 
+      selectModelerIds: [],
     }
   }
 
   onTreeSelect = (key) => {
-    this.setState({ catalogId: key }, () => {
+    this.setState({ catalogId: key, selectModelerIds: [] }, () => {
       if (!key || key==='') {
         this.setState({ tableData: [] });
       } else {
@@ -51,6 +52,10 @@ class Model extends React.Component {
     })
   }
 
+  onTableSelect = (ids) => {
+    this.setState({ selectModelerIds: ids });
+  }
+
   onTableItemAction = (id, action) => {
     this.setState({ importModalVisible: true, importModalAction: action, modelerId: id });
   }
@@ -66,6 +71,12 @@ class Model extends React.Component {
   }
 
   onExportBtnClick = () => {
+    const { selectModelerIds } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择模型');
+      return;
+    }
+
     this.setState({ exportModalVisible: true });
   }
 
@@ -79,7 +90,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData, loadingTableData, modelerId } = this.state;
+    const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData, loadingTableData, modelerId, selectModelerIds } = this.state;
 
     return (
       <div style={{ backgroundColor: '#ECEEF3', height: '100%' }}>
@@ -103,7 +114,7 @@ class Model extends React.Component {
                 <Button type="primary" className='ml-3' onClick={this.onExportBtnClick}>模型导出</Button>
               </div>
               <div className='p-3'>
-                <ModelTable loading={loadingTableData} data={tableData} onChange={this.onTableChange} onItemAction={this.onTableItemAction} />
+                <ModelTable loading={loadingTableData} catalogId={catalogId} data={tableData} onChange={this.onTableChange} onSelect={this.onTableSelect} onItemAction={this.onTableItemAction} />
               </div>
             </div>
           </Col>
@@ -118,7 +129,8 @@ class Model extends React.Component {
         />
 
         <ExportModal 
-          visible={exportModalVisible} 
+          visible={exportModalVisible}
+          ids={selectModelerIds} 
           onCancel={this.onExportModalCancel} 
         />
       </div>