模型使用drawer

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

@@ -21,7 +21,7 @@ const ImportAction = (props) => {
 
   useEffect(() =>{
  
-    if ((action||'')==='' || (action==='add'&&(hints||[]).length===0&&(ddl||'').length===0)&&(modelerId||'')==='') return;
+    if ((action||'')==='' || (action==='add'&&(hints||[]).length===0&&(ddl||'').length===0&&(modelerId||'')==='')) return;
 
     //初始化form状态
     if (action==='add'||action==='edit') {
@@ -155,7 +155,7 @@ const ImportAction = (props) => {
         onChange && onChange(data||{});
         getSupportedDatatypes();
 
-        if ((action==='add'&&(modelerId||''!=='')) || action==='edit') {
+        if ((action==='add'&&((modelerId||'')!=='')) || action==='edit') {
           form.setFieldsValue({ 
             cnName: data.cnName||'',
             name: data.name||'',

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

@@ -418,14 +418,6 @@ const ImportActionTable = (props) => {
     setSuggests([]);
   };
 
-  const onEnglishSuggestChange = (e) => {
-    form.setFieldsValue({
-      name: englishSuggests[e.target.value]
-    });
-
-    setEnglishSuggests([]);
-  }
-
   const columns = [
     {
       title: '序号',

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

@@ -255,7 +255,7 @@ const ModelTable = (props) => {
         rowSelection={rowSelection} 
         columns={columns} 
         rowKey={'id'}
-        dataSource={data}
+        dataSource={data||[]}
         pagination={false} 
         options={{
           density: true,

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

@@ -73,7 +73,7 @@ const TemplateAction = (props) => {
   }
 
   return (
-    <>
+    <React.Fragment>
       <TemplateActionHeader 
         form={form}
         editable={action!=='detail'} 
@@ -86,7 +86,7 @@ const TemplateAction = (props) => {
         onChange={onTableChange} 
         editable={action!=='detail'} 
       />
-    </>
+    </React.Fragment>
   );
 };
 

src/view/Manage/Model/Component/TemplateCURDModal.jsx → src/view/Manage/Model/Component/TemplateCURDDrawer.jsx

 import React, { useEffect, useState } from 'react';
-import { Table, Space, Button, Tooltip, Modal, Form } from 'antd';
+import { Table, Space, Button, Tooltip, Modal, Form, Drawer } from 'antd';
 import { EditOutlined, ReconciliationOutlined, DeleteOutlined  } from '@ant-design/icons';
 
 import TemplateAction from './TemplateAction';
 import { dispatch, dispatchLatest } from '../../../../model';
 import { showMessage } from '../../../../util';
 
-import './TemplateCURDModal.less';
-
-const TemplateCURDModal = (props) => {
+const TemplateCURDDrawer = (props) => {
 
   const { visible, onCancel } = props;
   const [ templates, setTemplates ] = useState([]);
@@ -138,6 +136,7 @@ const TemplateCURDModal = (props) => {
   }
 
   const cancel = () => {
+    console.log('cancel');
     reset();
     onCancel && onCancel(false);
   }
@@ -198,62 +197,66 @@ const TemplateCURDModal = (props) => {
     }
   }
 
-  let footer = null;
-
+  let actionComponent = null;
   if (step === 0) {
-    footer = [
-      <Button
-        key="0" 
-        onClick={cancel}
+    actionComponent = (
+      <Button 
+        type="primary" 
+        onClick={onAddClick} 
+        style={{ marginLeft: 'auto' }} 
       >
-      取消
-      </Button>,
-    ]
+      新增模版
+      </Button>
+    )
   } else if (step === 1) {
     if (action === 'detail') {
-      footer = [
+      actionComponent = (
         <Button
           key="0" 
           onClick={prev}
+          style={{ marginLeft: 'auto' }} 
         >
         返回
-        </Button>,
-      ]
+        </Button>
+      )
     } else {
-      footer = [
-        <Button
-          key="0" 
-          onClick={prev}
+      actionComponent = (
+        <Space
+         style={{ marginLeft: 'auto' }} 
         >
-        返回
-        </Button>,
-        <Button
-          key="1" 
-          type="primary"
-          loading={confirmLoading}
-          onClick={save}
-        >
-        保存
-        </Button>
-      ]
+          <Button
+            key="0" 
+            onClick={prev}
+          >
+          返回
+          </Button>,
+          <Button
+            key="1" 
+            type="primary"
+            loading={confirmLoading}
+            onClick={save}
+          >
+          保存
+          </Button>
+        </Space>
+      )
     }
   }
 
   return (
-    <Modal 
-      forceRender
-      className='template-curd-modal'
-      visible={visible}
+    <Drawer 
       title={title}
-      width={1300}
-      maskClosable={false}
-      onCancel={cancel}
-      footer={footer}
+      visible={visible}
+      width={1000}
+      closable={true}
+      onClose={() => {
+        cancel();
+      }}
     >
     {
-      step === 0 && <> 
+      step === 0 && <React.Fragment> 
         <div className='d-flex mb-3' style={{ alignItems: 'center' }}>
-          <Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} >新增模版</Button>
+        {actionComponent}
         </div>
         <Table
           loading={loading}
@@ -263,19 +266,24 @@ const TemplateCURDModal = (props) => {
           pagination={false} 
           sticky
         />
-      </>
+      </React.Fragment>
     }
     {
-      step === 1 && <TemplateAction 
-        onChange={onActionChange} 
-        action={action} 
-        id={currentTemplate.id} 
-        form={form}
-      />
+      step === 1 && <React.Fragment>
+        <div className='d-flex mb-3' style={{ alignItems: 'center' }}>
+        {actionComponent}
+        </div>
+        <TemplateAction 
+          onChange={onActionChange} 
+          action={action} 
+          id={currentTemplate.id} 
+          form={form}
+        />
+      </React.Fragment> 
     }
     { contextHolder }
-    </Modal>
+    </Drawer>
   );
 }
 
-export default TemplateCURDModal;
\ No newline at end of file
+export default TemplateCURDDrawer;
\ No newline at end of file

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

-.template-curd-modal {
-  .yy-table {
-    max-height: 600px !important;
-    overflow: auto !important;
-  }
-}
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -5,7 +5,7 @@ import copy from "copy-to-clipboard";
 import ModelTree from './Component/ModelTree';
 import ModelTable from './Component/ModelTable';
 import WordTemplateModal from './Component/WordTemplateModal';
-import TemplateCURDModal from './Component/TemplateCURDModal';
+import TemplateCURDDrawer from './Component/TemplateCURDDrawer';
 import ConstraintDetailDrawer from './Component/ConstraintDetailDrawer';
 import ImportModal from './Component/ImportModal';
 import ImportWordModal from './Component/ImportWordModal';
@@ -22,7 +22,7 @@ class Model extends React.Component {
     super();
     this.state = {
       wordTemplateModalVisible: false,
-      templateCURDModalVisible: false,
+      templateCURDDrawerVisible: false,
       constraintDetailDrawerVisible: false,
       importModalVisible: false,
       importWordModalVisible: false,
@@ -149,7 +149,7 @@ class Model extends React.Component {
   }
 
   onTemplateCURDClick = () => {
-    this.setState({ templateCURDModalVisible: true });
+    this.setState({ templateCURDDrawerVisible: true });
   }
 
   onConstraintDetailClick = () => {
@@ -196,7 +196,7 @@ class Model extends React.Component {
   }
 
   onImportModelBtnClick = () => {
-    const { catalogId, importModalAction, selectModelerIds } = this.state;
+    const { catalogId, selectModelerIds } = this.state;
     if (!catalogId || catalogId==='') {
       showMessage('info', '请先选择目录');
       return;
@@ -302,8 +302,8 @@ class Model extends React.Component {
     this.setState({ wordTemplateModalVisible: false });
   }
 
-  onTemplateCURDModalCancel = (refresh = false) => {
-    this.setState({ templateCURDModalVisible: false });
+  onTemplateCURDDrawerCancel = (refresh = false) => {
+    this.setState({ templateCURDDrawerVisible: false });
     refresh && this.onTableChange();
   }
 
@@ -312,7 +312,7 @@ class Model extends React.Component {
   }
 
   onImportModalCancel = (hints = []) => {
-    const { catalogId, importModalAction, modelerId } = this.state;
+    const { catalogId, importModalAction } = this.state;
 
     this.setState({ importModalVisible: false }, () => {
       if ((hints||[]).length > 0) {
@@ -333,7 +333,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible, templateCURDModalVisible, wordTemplateModalVisible, constraintDetailDrawerVisible, importWordModalVisible, loadingStates, modelStates, currentModelState, currentView } = this.state;
+    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible, templateCURDDrawerVisible, wordTemplateModalVisible, constraintDetailDrawerVisible, importWordModalVisible, loadingStates, modelStates, currentModelState, currentView } = this.state;
 
     const content = (
       <ModelTable loading={loadingTableData} catalogId={catalogId} data={filterTableData} view={currentView} loadingStates={loadingStates} modelStates={modelStates} currentModelState={currentModelState} keyword={keyword} onChange={this.onTableChange} onSelect={this.onTableSelect} onItemAction={this.onTableItemAction} onModelStateChange={this.onModelStateChange} onSearchInputChange={this.onSearchInputChange} {...this.props} />
@@ -402,9 +402,9 @@ class Model extends React.Component {
           onCancel={this.onWordTemplateCURDModalCancel}
         />
 
-        <TemplateCURDModal 
-          visible={templateCURDModalVisible} 
-          onCancel={this.onTemplateCURDModalCancel}
+        <TemplateCURDDrawer 
+          visible={templateCURDDrawerVisible} 
+          onCancel={this.onTemplateCURDDrawerCancel}
         />
 
         <ConstraintDetailDrawer