新增编辑模型打开一个单独的页面

src/App.js

@@ -16,6 +16,7 @@ import AssetRecycle from './view/Manage/AssetRecycle';
 import DatasourceManage from './view/Manage/DatasourceManage';
 import AssetDetail from './view/Manage/AssetManage/Component/AssetDetail';
 import ImportAction from './view/Manage/Model/Component/ImportAction';
+import EditModel from './view/Manage/Model/Component/EditModel';
 
 export const AppContext = React.createContext();
 
@@ -62,6 +63,8 @@ export class App extends React.Component {
             <Route path={`${ContextPath}/login`} component={Signin} exact />
             <Route path={`${ContextPath}/home`} component={Home} />
             <Route path={`${ContextPath}/manage`} component={Manage} />
+            <Route path={`${ContextPath}/data-model-action`} component={EditModel} exact />       
+
             <Route path={'/center-home/view/datasource-manage'} component={DatasourceManage} exact />
             <Route path={'/center-home/view/data-model'} component={Model} exact />
             <Route path={'/center-home/view/asset-map'} component={Map} exact />

src/util/constant.js

+//全文检索
 export const AnchorId = 'id';
 export const AnchorTimestamp = 'timestamp';
+
+//编辑模型
+export const Action = 'action';
+export const CatalogId = 'cid';
+export const ModelerId = 'mid';
+export const Hints = 'hints';
\ No newline at end of file

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

+import React, { useState, useEffect } from 'react';
+import { Form, Button } from 'antd';
+
+import ImportAction from './ImportAction';
+import { dispatchLatest } from '../../../../model'; 
+import { getQueryParam, showMessage } from '../../../../util';
+import { Action, CatalogId, ModelerId, Hints } from '../../../../util/constant';
+
+const EditModel = (props) => {
+
+  const [ action, setAction ] = useState('');
+  const [ catalogId, setCatalogId ] = useState('');
+  const [ modelerId, setModelerId ] = useState('');
+  const [ hints, setHints ] = useState([]);
+  const [ modelerData, setModelerData ] = useState({});
+  const [ terms, setTerms ] = useState([]);
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    const _action = getQueryParam(Action, props.location.search);
+    const _catalogId = getQueryParam(CatalogId, props.location.search);
+    const _modelerId = getQueryParam(ModelerId, props.location.search);
+    const _hintsStr = getQueryParam(Hints, props.location.search);
+
+    let _hints = [];
+    if ((_hintsStr||'') !== '') {
+      _hints = _hintsStr.split(',');
+    }
+  
+    setAction(_action);
+    setCatalogId(_catalogId);
+    setModelerId(_modelerId);
+    setHints(_hints);
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const save = async () => {
+    try {
+      const row = await form.validateFields();
+
+      const newModelerData = {...modelerData, ...row};
+
+      setConfirmLoading(true);
+      dispatchLatest({
+        type: 'datamodel.saveDataModel',
+        payload: { 
+          data: newModelerData
+        },
+        callback: data => {
+          dispatchLatest({
+            type: 'datamodel.bindCatalogDataModel',
+            payload: { 
+              params: {
+                easyDataModelCatalogId: catalogId,
+                easyDataModelerDataModelIds: data.id||''
+              }
+            },
+            callback: (data) => {
+              setConfirmLoading(false);
+
+              showMessage("success", (action==='add')?'新增模型成功':'保存模型成功')
+              setModelerId(data.id||'');
+              setAction('detail');
+            },
+            error: () => {
+              setConfirmLoading(false);
+            }
+          })
+        },
+        error: (err) => {
+          setConfirmLoading(false);
+          setTerms([err.ApiError?.message||'']);
+        }
+      })
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+
+  }
+
+  const edit = () => {
+    setAction('edit');
+  }
+
+  const onActionChange = (data) => {
+    setModelerData(data);
+  }
+
+  let title = '';
+  if (action === 'add') {
+    title = '新增模型';
+  } else if (action === 'edit') {
+    title = '模型编辑';
+  } else if (action === 'detail') {
+    title = '模型详情';
+  }
+
+  let actionBtn = null;
+
+  if (action==='add' || action==='edit') {
+    actionBtn = (
+      <Button 
+        type='primary' 
+        onClick={save}
+        loading={confirmLoading}
+      >
+      保存
+      </Button>
+    )
+  } else if (action==='detail') {
+    actionBtn = (
+      <Button type='primary' onClick={edit} >
+      编辑
+      </Button>
+    );
+  }
+
+  return (
+    <div className='position-relative'>
+      <div 
+        className='flex' 
+        style={{ 
+          width: '100%',
+          height: 44, 
+          padding: '0 15px',
+          backgroundColor: '#fff',
+          alignItems: 'center',
+          position: 'fixed', 
+          justifyContent: 'space-between', 
+          borderBottom: '1px solid #EFEFEF',
+          zIndex: 100 
+        }}
+      >
+        <span style={{ fontSize: 16, fontWeight: 'bold', color: '#000' }}>{title}</span>
+        {actionBtn}
+      </div>
+      <div className='position-absolute' style={{ top: 44 }}>
+        <div className='position-relative' style={{ margin: 15 }}>
+          <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} terms={terms} /> 
+        </div>     
+      </div>
+    </div>
+  );
+} 
+
+export default EditModel;
\ No newline at end of file

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

@@ -21,7 +21,7 @@ const ImportAction = (props) => {
 
   useEffect(() =>{
  
-    if (action==='add' && (hints||[]).length===0 && (ddl||'').length===0) return;
+    if (!action || (action==='add'&&(hints||[]).length===0&&(ddl||'').length===0)) return;
 
     //初始化form状态
     if (action==='add'||action==='edit') {
@@ -34,9 +34,7 @@ const ImportAction = (props) => {
       });
     }
 
-    if (action !== 'add') {
     setLoading(true);
-    }
 
     dispatch({
       type: 'datamodel.getAllConstraintsAndTemplates',
@@ -73,6 +71,7 @@ const ImportAction = (props) => {
         }   
       },
       callback: data => {
+        setLoading(false);
         setModelerData(data||{});
         form.setFieldsValue({ 
           cnName: data.cnName||'',
@@ -83,6 +82,9 @@ const ImportAction = (props) => {
         });
         onChange && onChange(data||{});
         getSupportedDatatypes();
+      },
+      error: () => {
+        setLoading(false);
       }
     })
   }
@@ -98,6 +100,7 @@ const ImportAction = (props) => {
         }   
       },
       callback: data => {
+        setLoading(false);
         setModelerData(data||{});
         form.setFieldsValue({ 
           cnName: data.cnName||'',

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

@@ -4,6 +4,8 @@ import { Form, Input, Row, Col, Descriptions, Select, AutoComplete } from 'antd'
 import { highlightSearchContentByTerms } from '../../../../util';
 import { dispatchLatest } from '../../../../model'; 
 
+import './ImportActionHeader.less';
+
 const { Option } = Select;
 
 const ConstraintSelect = ({ value = {}, constraints = [], onChange, ...restProps }) => {
@@ -153,6 +155,8 @@ const ImportActionHeader = (props) => {
   }
 
   return (
+    <div className='model-import-action-header'>
+    {
       editable ? (
         <Form
           form={form}
@@ -224,7 +228,7 @@ const ImportActionHeader = (props) => {
           </Row>
         </Form> 
       ) : (
-      <Descriptions>
+        <Descriptions column={5}>
           <Descriptions.Item label="中文名称">{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item>
           <Descriptions.Item label="英文名称">
           {
@@ -247,6 +251,8 @@ const ImportActionHeader = (props) => {
           <Descriptions.Item label="数据表类型">{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item>
         </Descriptions>
       ) 
+    }
+    </div>
   )
 }
 

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

+.model-import-action-header {
+  .yy-form-item {
+    margin-bottom: 10px;
+  }
+
+  .yy-descriptions-row > th, .yy-descriptions-row > td {
+    padding-bottom: 10px;
+  }
+}
\ No newline at end of file

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

-import React, { useState, useEffect } from 'react';
-import { Modal, Button, Form } from 'antd';
+import React, { useState } from 'react';
+import { Modal, Button } from 'antd';
 
-// import ImportLog from './ImportLog';
 import ImportExcel from './ImportExcel';
 import ImportExcelCopy from './ImportExcelCopy';
-import ImportDDL from './ImportDDL';
-import ImportMetadata from './ImportMetadata';
-import ImportAction from './ImportAction';
 
 import { dispatchLatest } from '../../../../model'; 
 import { showMessage } from '../../../../util';
 
 const ImportModal = (props) => {
-  const { catalogId, visible, onCancel, action, addMode, modelerId } = props;
-  const [ step, setStep ] = useState(0);
+  const { visible, onCancel, addMode } = props;
+
   const [ excelFiles, setExcelFiles ] = useState([]);
   const [ hints, setHints ] = useState([]);
-  const [ ddl, setDDL ] = useState('');
-  const [ modelerData, setModelerData ] = useState({});
   const [ confirmLoading, setConfirmLoading ] = useState(false);
-  const [ terms, setTerms ] = useState([]);
-
-  const [form] = Form.useForm();
-
-  useEffect(() => {
 
-    if (visible) {
-      if (action === 'add') {
-        setStep(0);
-      } else {
-        setStep(1);
-      }
-    }
-
-  }, [visible, catalogId, action])
-
-  const prev = () => {
-    setStep(step-1);
-  }
-
-  const next = () => {
-    if (step===0 && addMode==='excel') {
+  const onOk = () => {
+    if (addMode==='excel') {
       if ((excelFiles||[]).length === 0) {
         showMessage('warn', '请先选择文件上传');
       } else {
@@ -50,8 +25,7 @@ const ImportModal = (props) => {
           payload: { fileList: excelFiles },
           callback: data => {
             setConfirmLoading(false);
-            setHints(data||[]);
-            setStep(step+1);
+            onCancel && onCancel({ hints: data||[] });
           },
           error: () => {
             setConfirmLoading(false);
@@ -60,92 +34,30 @@ const ImportModal = (props) => {
       } 
 
       return;
-    } else if (step===0 && addMode==='excel-copy') {
+    } else if (addMode==='excel-copy') {
 
       if ((hints||[]).length === 0) {
         showMessage('warn', '请先从Excel文件中复制内容');
       } else {
-        setStep(step+1);
+        onCancel && onCancel(hints||[]);
       }
 
       return;
 
-    } else if (step===0 && addMode==='ddl') {
-
-      if ((ddl||[]).length === 0) {
-        showMessage('warn', '请先输入ddl');
-      } else {
-        setStep(step+1);
     } 
-
-      return;
-
-    }
-
-    setStep(step+1);
   }
 
   const cancel = () => {
     reset();
-    onCancel && onCancel(false);
-  }
-
-  const save = async () => {
-    try {
-      const row = await form.validateFields();
-
-      const newModelerData = {...modelerData, ...row};
-
-      setConfirmLoading(true);
-      dispatchLatest({
-        type: 'datamodel.saveDataModel',
-        payload: { 
-          data: newModelerData
-        },
-        callback: data => {
-          dispatchLatest({
-            type: 'datamodel.bindCatalogDataModel',
-            payload: { 
-              params: {
-                easyDataModelCatalogId: catalogId,
-                easyDataModelerDataModelIds: data.id||''
-              }
-            },
-            callback: () => {
-              setConfirmLoading(false);
-              reset();
-              onCancel && onCancel(true);
-            },
-            error: () => {
-              setConfirmLoading(false);
-            }
-          })
-        },
-        error: (err) => {
-          setConfirmLoading(false);
-          setTerms([err.ApiError?.message||'']);
-        }
-      })
-
-    } catch (errInfo) {
-      console.log('Validate Failed:', errInfo);
-    }
-
+    onCancel && onCancel();
   }
 
   const reset = () => {
-    setStep(0);
     setExcelFiles([]);
     setHints([]);
-    setDDL('');
-    setModelerData({});
     setConfirmLoading(false);
   }
 
-  const onActionChange = (data) => {
-    setModelerData(data);
-  }
-
   const onImportExcelChange = (files) => {
     setExcelFiles(files||[]);
   }
@@ -154,136 +66,53 @@ const ImportModal = (props) => {
     setHints(data||[]);
   }
 
-  const onImportDDLChange = (data) => {
-    setDDL(data);
-  }
-
   let title = '';
-  if (action === 'add') {
-    if (step===0 && addMode==='excel') {
+  if (addMode==='excel') {
     title = 'Excel导入';
-    } else if (step===0 && addMode==='excel-copy') {
+  } else if (addMode==='excel-copy') {
     title = 'Excel复制粘贴导入';
-    } else if (step===0 && addMode==='ddl') {
+  } else if (addMode==='ddl') {
     title = 'DDL导入';
-    } else if (step===1 && addMode==='excel') {
-      title = '模型创建-Excel导入';
-    } else if (step===1 && addMode=== 'excel-copy') {
-      title = '模型创建-Excel复制粘贴导入';
-    } else if (step===1 && addMode==='ddl') {
-      title = '模型创建-DDL导入';
-    }
-  } else if (action === 'edit') {
-    title = '模型编辑';
-  } else if (action === 'detail') {
-    title = '模型详情';
   } 
 
-  let footer = null;
-  if (action === 'add') {
-    footer = [ 
+  const footer = [ 
     <Button
       key="0" 
       type="primary"
-        style={{ display: (step!==0)?'':'none' }}
-        onClick={prev}
-      >
-      上一步
-      </Button>,
-      <Button
-        key="1" 
-        type="primary"
-        loading={confirmLoading}
-        style={{ display: (step===0)?'':'none' }}
-        onClick={next}
-      >
-      下一步
-      </Button>, 
-      <Button
-        key="2" 
-        type="primary"
-        loading={confirmLoading}
-        style={{ display: (step===1)?'':'none' }}
-        onClick={save}
-      >
-      保存
-      </Button>
-    ];
-  } else if (action === 'edit') {
-    footer = [
-      <Button
-        key="1" 
-        type="primary"
       onClick={cancel}
     >
     取消
     </Button>,
     <Button
-        key="2" 
-        type="primary"
-        loading={confirmLoading}
-        onClick={save}
-      >
-      保存
-      </Button>
-    ];
-  } else if (action === 'detail') {
-    footer = [
-      <Button
       key="1" 
       type="primary"
-        onClick={cancel}
+      loading={confirmLoading}
+      onClick={onOk}
     >
-      取消
-      </Button>
+    确定
+    </Button>,
   ];
-  }
 
   return (
     <Modal 
       forceRender
       visible={visible}
       title={title}
-      width={step===1?1300:520}
+      width={520}
       maskClosable={false}
-      onCancel={() => {
-        reset();
-        onCancel && onCancel();
-      }}
+      onCancel={cancel}
       footer={footer}
     >
-      <>
       {
         addMode==='excel' && (
-          <div style={{ display: step===0?'':'none' }}>
           <ImportExcel onChange={onImportExcelChange} {...props} />
-          </div> 
         )
       }
       {
         addMode==='excel-copy' && (
-          <div style={{ display: step===0?'':'none' }}>
           <ImportExcelCopy onChange={onImportExcelCopyChange} {...props} />
-          </div>
         )
       }
-       {
-        addMode==='ddl' && (
-          <div style={{ display: step===0?'':'none' }}>
-            <ImportDDL onChange={onImportDDLChange} {...props} />
-          </div>
-        )
-      }
-      {
-        step===0 && addMode==='erwin' && <></>
-      }
-      {
-        step===0 && addMode==='metadata' && <ImportMetadata />
-      }
-      {
-        step===1 && <ImportAction hints={hints} ddl={ddl} onChange={onActionChange} action={action} modelerId={modelerId} form={form} terms={terms} />
-      }
-      </>
     </Modal>
   )
 }

src/view/Manage/Model/index.jsx

@@ -12,6 +12,7 @@ import ImportWordModal from './Component/ImportWordModal';
 import ExportDDLModal from './Component/ExportDDLModal';
 import { showMessage, showNotifaction } from '../../../util';
 import { dispatch } from '../../../model'; 
+import { Action, CatalogId, ModelerId, Hints } from '../../../util/constant';
 
 import './index.less';
 
@@ -36,6 +37,7 @@ class Model extends React.Component {
       selectModelerNames: [],
       keyword: '',
       exportErwinLoading: false,
+      hints: []
     }
   }
 
@@ -75,7 +77,11 @@ class Model extends React.Component {
   }
 
   onTableItemAction = (id, action) => {
-    this.setState({ importModalVisible: true, importModalAction: action, modelerId: id });
+    this.setState({ importModalAction: action, modelerId: id }, () => {
+      const { catalogId, importModalAction, modelerId } = this.state;
+
+      window.open(`/data-govern/data-model-action?${Action}=${importModalAction}&${CatalogId}=${catalogId}&${ModelerId}=${modelerId}`);
+    });
   }
 
   onSearchInputChange = (e) => {
@@ -232,9 +238,16 @@ class Model extends React.Component {
     this.setState({ constraintDetailModalVisible: false });
   }
 
-  onImportModalCancel = (refresh = false) => {
-    this.setState({ importModalVisible: false });
-    refresh && this.onTableChange();
+  onImportModalCancel = (hints = []) => {
+    const { catalogId, importModalAction, modelerId } = this.state;
+
+    this.setState({ importModalVisible: false }, () => {
+      if ((hints||[]).length > 0) {
+        setTimeout(() => {
+          window.open(`/data-govern/data-model-action?${Action}=${importModalAction}&${CatalogId}=${catalogId}&${ModelerId}=${modelerId}&${Hints}=${(hints||[]).join(',')}`);
+        }, 1000);
+      }
+    });
   }
 
   onImportWordModalCancel = (refresh = false) => {
@@ -247,7 +260,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible, templateCURDModalVisible, wordTemplateModalVisible, constraintDetailModalVisible, importWordModalVisible } = this.state;
+    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible, templateCURDModalVisible, wordTemplateModalVisible, constraintDetailModalVisible, importWordModalVisible } = this.state;
 
     const content = (
       <ModelTable loading={loadingTableData} catalogId={catalogId} data={filterTableData} onChange={this.onTableChange} onSelect={this.onTableSelect} onItemAction={this.onTableItemAction} {...this.props} />
@@ -330,11 +343,8 @@ class Model extends React.Component {
 
         <ImportModal 
           visible={importModalVisible} 
-          action={importModalAction}
           addMode={importModalAddMode}
           onCancel={this.onImportModalCancel}
-          catalogId={catalogId} 
-          modelerId={modelerId}
         />
 
         <ImportWordModal