模型主页面调整

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

 import React from 'react';
-import { Button, Upload } from 'antd';
+import { Button, Upload, Form, Row, Col } from 'antd';
 import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
 
 class ImportExcel extends React.Component {
@@ -50,20 +50,36 @@ class ImportExcel extends React.Component {
     };
 
     return (
-      <>
-        <div>
-          <Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
-          模版下载
-          </Button>
-        </div>
-        <div className='mt-3'>
-          <Upload {...uploadProps}>
-            <Button icon={<UploadOutlined />}>
-              选择文件上传
+      <Form.Item 
+        name='upload'
+        label='文件上传' 
+      >
+        <Row>
+          <Col span={9}>
+            <Form.Item
+              noStyle
+              rules={[
+                {
+                  required: true,
+                  message: '请选择文件上传',
+                },
+              ]}
+            >
+              <Upload {...uploadProps}>
+                <Button icon={<UploadOutlined />}>
+                  选择文件上传
+                </Button>
+              </Upload>
+            </Form.Item>
+          </Col>
+          <Col span={6}>
+            <Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
+            模版下载
             </Button>
-          </Upload>
-        </div>
-      </>
+          </Col>
+        </Row>
+        
+      </Form.Item>
     )
   }
 }

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

 import React, { useState } from 'react';
-import { Modal, Button } from 'antd';
+import { Modal, Button, Form, Radio } from 'antd';
 
+import ImportWord from './ImportWord';
 import ImportExcel from './ImportExcel';
 import ImportExcelCopy from './ImportExcelCopy';
 
 import { dispatchLatest } from '../../../../model'; 
 import { showMessage } from '../../../../util';
 
+const importModes = [
+  { name: 'Word导入', key: 'word' },
+  { name: 'Excel导入', key: 'excel' },
+  { name: 'Excel复制粘贴', key: 'excel-copy' },
+] 
+
 const ImportModal = (props) => {
-  const { visible, onCancel, addMode } = props;
+  const { catalogId, visible, onCancel } = props;
 
-  const [ excelFiles, setExcelFiles ] = useState([]);
+  const [ modeKey, setModeKey ] = useState('');
+  const [ files, setFiles ] = useState([]);
   const [ hints, setHints ] = useState([]);
   const [ confirmLoading, setConfirmLoading ] = useState(false);
 
-  const onOk = () => {
-    if (addMode==='excel') {
-      if ((excelFiles||[]).length === 0) {
-        showMessage('warn', '请先选择文件上传');
+  const [ form ] = Form.useForm();
+
+  const onModeChange = (e) => {
+    setModeKey(e.target?.value);
+  }
+
+  const onOk = async() => {
+
+    if (modeKey === '') {
+      form.setFields([{ name: 'mode', errors: ['请选择导入方式'] }]);
+      return;
+    }
+ 
+    if (modeKey==='word') {
+
+      if ((files||[]).length === 0) {
+        form.setFields([{ name: 'upload', errors: ['请选择文件上传'] }]);
+      } else {
+        setConfirmLoading(true);
+        dispatchLatest({
+          type: 'datamodel.importWordGenerateModelDraft',
+          payload: { 
+            params: {
+              catalogId,
+            },
+            files 
+          },
+          callback: data => {
+            setConfirmLoading(false);
+            reset();
+            onCancel && onCancel(true, [], data||{});
+          },
+          error: () => {
+            setConfirmLoading(false);
+          }
+        });
+      } 
+
+    } else if (modeKey==='excel') {
+
+      if ((files||[]).length === 0) {
+        form.setFields([{ name: 'upload', errors: ['请选择文件上传'] }]);
       } else {
         setConfirmLoading(true);
         dispatchLatest({
           type: 'datamodel.extractExcelContent',
-          payload: { fileList: excelFiles },
+          payload: { fileList: files },
           callback: data => {
             setConfirmLoading(false);
-            onCancel && onCancel(data||[]);
+            onCancel && onCancel(false, data||[]);
           },
           error: () => {
             setConfirmLoading(false);
@@ -33,17 +79,14 @@ const ImportModal = (props) => {
         })
       } 
 
-      return;
-    } else if (addMode==='excel-copy') {
+    } else if (modeKey==='excel-copy') {
 
       if ((hints||[]).length === 0) {
         showMessage('warn', '请先从Excel文件中复制内容');
       } else {
-        onCancel && onCancel(hints||[]);
+        onCancel && onCancel(false, hints||[]);
       }
 
-      return;
-
     } 
   }
 
@@ -53,28 +96,24 @@ const ImportModal = (props) => {
   }
 
   const reset = () => {
-    setExcelFiles([]);
+    setModeKey('');
+    setFiles([]);
     setHints([]);
     setConfirmLoading(false);
   }
 
+  const onImportWordChange = (files) => {
+    setFiles(files||[]);
+  }
+
   const onImportExcelChange = (files) => {
-    setExcelFiles(files||[]);
+    setFiles(files||[]);
   }
 
   const onImportExcelCopyChange = (data) => {
     setHints(data||[]);
   }
 
-  let title = '';
-  if (addMode==='excel') {
-    title = 'Excel导入';
-  } else if (addMode==='excel-copy') {
-    title = 'Excel复制粘贴导入';
-  } else if (addMode==='ddl') {
-    title = 'DDL导入';
-  } 
-
   const footer = [ 
     <Button
       key="0" 
@@ -97,21 +136,40 @@ const ImportModal = (props) => {
     <Modal 
       forceRender
       visible={visible}
-      title={title}
+      title='模型导入'
       width={520}
       onCancel={cancel}
       footer={footer}
     >
-      {
-        addMode==='excel' && (
-          <ImportExcel onChange={onImportExcelChange} {...props} />
-        )
-      }
-      {
-        addMode==='excel-copy' && (
-          <ImportExcelCopy onChange={onImportExcelCopyChange} {...props} />
-        )
-      }
+      <Form form={form}>
+        <Form.Item 
+          name='mode'
+          label='导入方式'
+        >
+          <Radio.Group onChange={onModeChange} value={modeKey}>
+          {
+            importModes.map((item, index) => {
+              return <Radio value={item.key} key={index}>{item.name}</Radio>;
+            })
+          }
+          </Radio.Group>
+        </Form.Item>
+        {
+          modeKey==='word' && (
+            <ImportWord onChange={onImportWordChange} {...props} />
+          )
+        }
+        {
+          modeKey==='excel' && (
+            <ImportExcel onChange={onImportExcelChange} {...props} />
+          )
+        }
+        {
+          modeKey==='excel-copy' && (
+            <ImportExcelCopy onChange={onImportExcelCopyChange} {...props} />
+          )
+        }
+      </Form>
     </Modal>
   )
 }

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

+import React, { useState, useEffect } from 'react';
+import { Button, Upload, Form } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+
+const ImportWord = (props) => {
+  const { onChange, visible } = props;
+  const [ fileList, setFileList ] = useState([]);
+
+  useEffect(() => {
+    setFileList([]);
+  }, [visible])
+
+  const uploadProps = {
+    onRemove: file => {
+
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+
+      onChange && onChange(newFileList);
+
+      setFileList(newFileList);
+    },
+    beforeUpload: file => {
+      
+      setFileList([file]);
+      return false;
+    },
+    fileList: fileList||[],
+    accept:".doc,.docx",
+  };
+
+  return (
+    <Form.Item 
+      name='upload'
+      label='文件上传' 
+    >
+      <Upload {...uploadProps}>
+        <Button icon={<UploadOutlined />}>
+          选择文件上传
+        </Button>
+      </Upload>
+    </Form.Item>
+  )
+}
+
+export default ImportWord;
\ No newline at end of file

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

-import React, { useState } from 'react';
-import { Button, Upload, Modal } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
-
-import { dispatchLatest } from '../../../../model'; 
-import { showMessage } from '../../../../util';
-
-const ImportWordModal = (props) => {
-  const { onCancel, visible, catalogId } = props;
-  const [ fileList, setFileList ] = useState([]);
-  const [ confirmLoading, setConfirmLoading ] = useState(false);
-
-  const uploadProps = {
-    onRemove: file => {
-
-      const index = fileList.indexOf(file);
-      const newFileList = fileList.slice();
-      newFileList.splice(index, 1);
-
-      setFileList(newFileList);
-    },
-    beforeUpload: file => {
-      
-      setFileList([file]);
-      return false;
-    },
-    fileList: fileList||[],
-    accept:".doc,.docx",
-  };
-
-  const handleOk = () => {
-
-    if ((fileList||[]).length === 0) {
-      showMessage('info', '请先选择Word文件上传');
-      return;
-    }
-
-    setConfirmLoading(true);
-    dispatchLatest({
-      type: 'datamodel.importWordGenerateModelDraft',
-      payload: { 
-        params: {
-          catalogId,
-        },
-        fileList 
-      },
-      callback: data => {
-        setConfirmLoading(false);
-        reset();
-        if (onCancel) {
-          onCancel(true, data||[]);
-        }
-      },
-      error: () => {
-        setConfirmLoading(false);
-      }
-    })
-  }
-
-  const reset = () => {
-    setConfirmLoading(false);
-    setFileList([]);
-  }
-
-  return (
-    <Modal 
-      forceRender
-      visible={visible}
-      title='Word导入'
-      width={520}
-      confirmLoading={confirmLoading}
-      onCancel={() => {
-        reset();
-        onCancel && onCancel();
-      }}
-      onOk={handleOk}
-    >
-      <div className='mt-3'>
-        <span className='mr-3'>Word上传:</span>
-        <Upload {...uploadProps}>
-          <Button icon={<UploadOutlined />}>
-            选择文件上传
-          </Button>
-        </Upload>
-      </div>
-    </Modal>
-  )
-}
-
-export default ImportWordModal;
\ No newline at end of file

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

@@ -5,6 +5,10 @@
     overflow: auto !important;
   }
 
+  .yy-table-thead > tr > th {
+    background-color: #F2F5FC !important;
+  }
+
   .yy-pro-table {
     .yy-card-body {
       padding: 0 !important;

src/view/Manage/Model/index.less

 .data-model {
   display: flex;
-  background-color: #F0F2F5;
+  background-color: #fff;
   height: 100%;
 
   .left {
     width: 230px;
-    background-color: #fff;
-    margin-right: 10px; 
+    border-right: 1px solid #EFEFEF;
+    overflow: hidden;
+  }
+
+  .tree-toggle-wrap {
+    position: relative;
+    width: 20px;
+    height: calc(100vh - 94px);
+  
+    .tree-toggle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      left: 0;
+      right: 0;
+      background: #f2f5fc;
+      position: absolute;
+      top: calc(50% - 40px);
+      width: 12px;
+      height: 80px;
+      border-radius: 0 12px 12px 0;
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+
+  .right {
+    width: calc(100% - 250px);
+  }
+}
+
+.data-model-collapse {
+  .left {
+    width: 0;
   }
 
   .right {
-    width:calc(100% - 240px);
-    background-color: #fff;
+    width: calc(100% - 20px);
   }
 }
\ No newline at end of file