模型模版配置使用抽屉样式

package.json

@@ -75,6 +75,6 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://139.198.126.96:8089",
+  "proxy": "http://139.198.127.28:18762",
   "homepage": "http://myhost/data-govern"
 }

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

@@ -13,9 +13,8 @@
   }
 
   .edit-container {
-    top: 44px;
     width: 100%;
-    height: calc(100vh - 44px - 64px);
+    height: calc(100vh - 50px);
     overflow: auto;
     background: #EDF0F5;
     padding: 10px 20px;
@@ -31,7 +30,7 @@
     display: flex;
     bottom: 0; 
     width: 100%; 
-    height: 64px; 
+    height: 50px; 
     position: fixed; 
     justify-content: flex-end;
     opacity: 0.9;

src/view/Manage/ModelConfig/Component/EditTemplate.jsx

@@ -129,9 +129,9 @@ const EditTemplate = (props) => {
 
   return (
     <div className='edit-model position-relative'>
-      <div className='edit-header'>
-        <span style={{ fontSize: 16, fontWeight: 'bold', color: '#fff' }}>{title}</span>
-      </div>
+      {/* <div className='edit-header'>
+        <span style={{ fontSize: 16, fontWeight: 'bold' }}>{title}</span>
+      </div> */}
       <div className='edit-container'>
         <div className='edit-container-card'>
           <TemplateAction onChange={onActionChange} action={action} id={templateId} form={form} /> 

src/view/Manage/ModelConfig/Component/IframeDrawer.jsx

+import React from 'react'
+import { Drawer } from 'antd'
+
+const FC = (props) => {
+  const { visible, title, url, onCancel } = props
+  return (
+    <Drawer visible={visible}
+      title={title}
+      destroyOnClose
+      width='80%'
+      bodyStyle={{
+        height: '100%',
+        overflow: 'hidden',
+        padding: 0
+      }}
+      onClose={onCancel}
+    >
+      <iframe width='100%' height='100%' src={url} style={{ border: 'none' }} />
+    </Drawer>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/ModelConfig/Component/TemplateCURD.jsx

@@ -4,11 +4,17 @@ import { Table, Button, Tooltip, Modal, Divider } from 'antd';
 import { Action, TemplateId } from '../../../../util/constant';
 import { dispatch } from '../../../../model';
 import { showMessage } from '../../../../util';
+import IframeDrawer from './IframeDrawer';
 
 const TemplateCURD = (props) => {
 
   const [ templates, setTemplates ] = useState([]);
   const [ loading, setLoading ] = useState(false);
+  const [iframeDrawerParams, setIframeDrawerParams] = useState({
+    visible: false,
+    title: undefined,
+    url: undefined
+  })
 
   const [modal, contextHolder] = Modal.useModal();
 
@@ -114,11 +120,19 @@ const TemplateCURD = (props) => {
   }
 
   const editItem = (record) => {
-    window.open(`/data-govern/model-template-action?${Action}=edit&${TemplateId}=${record.id}`);
+    setIframeDrawerParams({
+      visible: true,
+      title: '模版编辑',
+      url: `/data-govern/model-template-action?${Action}=edit&${TemplateId}=${record.id}`
+    })
   }
 
   const detailItem = (record) => {
-    window.open(`/data-govern/model-template-action?${Action}=detail&${TemplateId}=${record.id}`);
+    setIframeDrawerParams({
+      visible: true,
+      title: '模版详情',
+      url: `/data-govern/model-template-action?${Action}=detail&${TemplateId}=${record.id}`
+    })
   }
 
   const deleteItem = (record) => {
@@ -143,7 +157,11 @@ const TemplateCURD = (props) => {
   }
 
   const onAddClick = () => {
-    window.open(`/data-govern/model-template-action?${Action}=add`);
+    setIframeDrawerParams({
+      visible: true,
+      title: '新增模版',
+      url: `/data-govern/model-template-action?${Action}=add`
+    })
   }
 
   return (
@@ -163,6 +181,16 @@ const TemplateCURD = (props) => {
         pagination={false} 
         sticky
       />
+      <IframeDrawer
+        {...iframeDrawerParams}
+        onCancel={() => {
+          setIframeDrawerParams({
+            visible: false,
+            title: undefined,
+            url: undefined,
+          })
+        }}
+      />
     { contextHolder }
     </div>
   );