模型导出其他

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

+import React, { useState } from 'react';
+import { Modal, Button, Form, Radio } from 'antd';
+
+const exportModes = [
+  { name: '导出Erwin', key: 'erwin' },
+  { name: '导出Excel', key: 'excel' },
+  { name: '导出Word', key: 'word' },
+] 
+
+const ExportOtherModal = (props) => {
+  const { visible, onCancel } = props;
+
+  const [ modeKey, setModeKey ] = useState('');
+
+  const [ form ] = Form.useForm();
+
+  const onModeChange = (e) => {
+    setModeKey(e.target?.value);
+  }
+
+  const onOk = async() => {
+    try {
+
+      const row = await form.validateFields();
+      reset();
+      onCancel && onCancel(modeKey);
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+
+  }
+
+  const cancel = () => {
+    reset();
+    onCancel && onCancel();
+  }
+
+  const reset = () => {
+    form.resetFields();
+    setModeKey('');
+  }
+
+  const footer = [ 
+    <Button
+      key="0" 
+      onClick={cancel}
+    >
+    取消
+    </Button>,
+    <Button
+      key="1" 
+      type="primary"
+      onClick={onOk}
+    >
+    确定
+    </Button>,
+  ];
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title='模型导出'
+      width={520}
+      onCancel={cancel}
+      footer={footer}
+    >
+      <Form form={form}>
+        <Form.Item 
+          name='mode'
+          label='导出方式'
+          rules={[
+            {
+              required: true,
+              message: '请选择导出方式',
+            },
+          ]}
+        >
+          <Radio.Group onChange={onModeChange} value={modeKey}>
+          {
+            exportModes.map((item, index) => {
+
+              return (
+                <Radio 
+                  value={item.key} 
+                >
+                  {item.name}
+                </Radio>
+              );
+            })
+          }
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+
+export default ExportOtherModal;
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -12,6 +12,7 @@ import ConstraintDetailDrawer from './Component/ConstraintDetailDrawer';
 import ImportModal from './Component/ImportModal';
 import ImportStockWordDrawer from './Component/ImportStockWordDrawer';
 import ExportDDLModal from './Component/ExportDDLModal';
+import ExportOtherModal from './Component/ExportOtherModal';
 import RecatalogModal from './Component/RecatalogModal';
 import HistoryAndVersionDrawer from './Component/HistoryAndVersionDrawer';
 import StartFlowModal from './Component/StartFlowModal';
@@ -35,6 +36,7 @@ class Model extends React.Component {
       importModalVisible: false,
       importStockWordDrawerVisible: false,
       exportDDLModalVisible: false,
+      exportOtherModalVisible: false,
       recatalogModalVisible: false,
       historyAndVersionDrawerVisible: false,
       startFlowModalVisible: false,
@@ -46,7 +48,6 @@ class Model extends React.Component {
       selectModelerIds: [],
       selectModelerNames: [],
       keyword: '',
-      exportErwinLoading: false,
       hints: [],
       loadingStates: false,
       modelStates: [],
@@ -241,50 +242,8 @@ class Model extends React.Component {
     this.setState({ exportDDLModalVisible: true, selectModelerNames: _selectModelerNames, exportDDLModalReference: 'exportDDL' });
   }
 
-  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/template?ids=${selectModelerIds.join(',')}`);
+  onExportOtherBtnClick = () => {
+    this.setState({ exportOtherModalVisible: true });
   }
 
   startFlow = () => {
@@ -374,6 +333,29 @@ class Model extends React.Component {
     this.setState({ exportDDLModalVisible: false });
   }
 
+  onExportOtherModalCancel = (key='') => {
+    const { selectModelerIds } = this.state;
+
+    this.setState({ exportOtherModalVisible: false }, () => {
+      if (key === 'erwin') {
+        dispatch({
+          type: 'datamodel.exportERWinString',
+          payload: {
+            ids: selectModelerIds.join(','),
+          },
+          callback: data => {
+            copy(JSON.stringify(data));
+            showNotifaction('提示', 'Erwin信息已成功复制到剪贴板', 5);
+          }
+        });
+      } else if (key === 'excel') {
+        window.open(`/api/datamodeler/easyDataModelerExport/excel?ids=${selectModelerIds.join(',')}`);
+      } else if (key === 'word') {
+        window.open(`/api/datamodeler/easyDataModelerExport/word/template?ids=${selectModelerIds.join(',')}`);
+      }
+    });
+  }
+
   onRecatalogModalCancel = (refresh = false) => {
     this.setState({ recatalogModalVisible: false });
     if (refresh) {
@@ -411,7 +393,7 @@ class Model extends React.Component {
     if (key === 'export-ddl') {
       this.onExportDDLBtnClick();
     } else if (key === 'export-other') {
-
+      this.onExportOtherBtnClick();
     } else if (key === 'catalog-change') {
       this.onRecatalogBtnClick();
     }
@@ -422,7 +404,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, exportDDLModalVisible, templateCURDDrawerVisible, wordTemplateModalVisible, constraintDetailDrawerVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId, startFlowModalVisible, expandTree } = this.state;
+    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, exportDDLModalVisible, exportOtherModalVisible, templateCURDDrawerVisible, wordTemplateModalVisible, constraintDetailDrawerVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId, startFlowModalVisible, expandTree } = this.state;
 
     const content = (
       <ModelTable 
@@ -595,6 +577,11 @@ class Model extends React.Component {
         }
         </AppContext.Consumer>
 
+        <ExportOtherModal 
+          visible={exportOtherModalVisible}
+          onCancel={this.onExportOtherModalCancel}
+        />
+
         <RecatalogModal
           visible={recatalogModalVisible}
           ids={selectModelerIds}