模型主页面调整

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

@@ -21,7 +21,7 @@ const ExportOtherModal = (props) => {
   const onOk = async() => {
     try {
 
-      const row = await form.validateFields();
+      await form.validateFields();
       reset();
       onCancel && onCancel(modeKey);
 

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

@@ -18,7 +18,6 @@ const ImportModal = (props) => {
   const { view, catalogId, visible, onCancel } = props;
 
   const [ modeKey, setModeKey ] = useState('');
-  const [ files, setFiles ] = useState([]);
   const [ hints, setHints ] = useState([]);
   const [ confirmLoading, setConfirmLoading ] = useState(false);
 
@@ -95,7 +94,6 @@ const ImportModal = (props) => {
   const reset = () => {
     form.resetFields();
     setModeKey('');
-    setFiles([]);
     setHints([]);
     setConfirmLoading(false);
   }

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

 import React, { useState, useEffect, useRef } from "react";
-import { Space, Button, Tooltip, Modal, Divider, Pagination, Table } from 'antd';
-import { EditOutlined, DeleteOutlined, DownOutlined, UpOutlined, HistoryOutlined } from '@ant-design/icons';
+import { Button, Tooltip, Modal, Pagination, Table, Dropdown, Menu, Divider } from 'antd';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import SmoothScroll from 'smooth-scroll';
 import classnames from 'classnames';
 
 import { dispatchLatest, dispatch } from '../../../../model'; 
 import { showMessage, getQueryParam, paginate } from '../../../../util';
-import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
+import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId } from '../../../../util/constant';
 
 import './ModelTable.less';
 
 const ModelTable = (props) => {
 
-  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null } = props;
+  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, view } = props;
   
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ subData, setSubData ] = useState([]);
 
+  const moreMenu = (record) => {
+    return <Menu onClick={(e) => { onMoreMenuClick(e, record); }}>
+      <Menu.Item key='history'>
+        历史版本
+      </Menu.Item>
+      <Menu.Item key='copy'>
+        复制模型
+      </Menu.Item>
+      {
+        (record?.state?.supportedActions||[]).length>0 && record?.state?.supportedActions.map((item, index) => {
+          return (
+            <Menu.Item key={`action-${index}`}>
+            {item.cnName||''}
+            </Menu.Item>
+          );
+        }) 
+      }
+      {
+        record?.deployable && <Menu.Item key='createTable'>
+          建表
+        </Menu.Item> 
+      }
+    </Menu>
+  }
+
   const columns = [
     {
       title: '序号',
@@ -69,51 +94,68 @@ const ModelTable = (props) => {
     {
       title: '状态',
       dataIndex: 'state',
-      width: 100,
+      width: 120,
       ellipsis: true,
       render: (_, record) => {
-        return record?.state?.cnName||'';
+
+        let color = '';
+        if (record?.state?.id === '1') {
+          color = '#DE7777';
+        } else if (record?.state?.id === '2') {
+          color = '#779BDE';
+        } else if (record?.state?.id === '4') {
+          color = '#77DEBF';
+        }
+
+        return (
+          <span>
+            <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 5, marginRight: 5, backgroundColor: color  }}></span>
+            <span>{record?.state?.cnName||''}</span>
+          </span>
+        );
       }
     },
     {
       title: '操作',
       key: 'action',
-      width: 230,
+      width: 200,
       render: (_,record) => {
         return (  
-          <Space size='small'>
-            {
-              <React.Fragment>
-                <Tooltip placement='bottom' title={'修改'}>
-                  <Button icon={<EditOutlined />} size='small' disabled={!record?.editable&&!record?.permitCheckOut} onClick={() => { editItem(record); }} />
-                </Tooltip>
-                <Tooltip placement='bottom' title={'删除'}>
-                  <Button icon={<DeleteOutlined />} size='small' disabled={!record?.deletable} onClick={() => { deleteItem(record); }} />
-                </Tooltip>
-                <Tooltip placement='bottom' title={'版本历史'}>
-                  <Button icon={<HistoryOutlined />} size='small' onClick={() => { historyItem(record); }} />
-                </Tooltip>
-              </React.Fragment>
-            }
-            {
-              (record?.state?.supportedActions||[]).length>0 && record?.state?.supportedActions.map((item, index) => {
-                return (
-                  <React.Fragment>
-                  {
-                    (record.editable||record.permitCheckOut||record.deletable) && index===0 && <Divider type='vertical'  />
-                  }
-                  <Button key={index} size='small' onClick={() => { stateAction(record, item); }} >{item.cnName||''}</Button>
-                  </React.Fragment>
-                );
-              }) 
-            }
-            {
-              record?.deployable && <React.Fragment>
-                { record.editable && <Divider type='vertical'  /> }
-                <Button size='small' onClick={() => { deployAction(record); }} >建表</Button>
-              </React.Fragment> 
-            }
-          </Space>
+          <div style={{ display: 'flex', alignItems: 'center'  }}>
+            <Button 
+              type='link'
+              size='small'
+              disabled={!record?.editable&&!record?.permitCheckOut}
+              onClick={() => { editItem(record); }}
+              style={{ padding: 0 }}
+            >
+            编辑
+            </Button>
+            <div style={{ margin: '0 5px' }}>
+              <Divider type='vertical' />
+            </div>
+            <Button
+              type='link'
+              size='small'
+              disabled={!record?.deletable}
+              onClick={() => { deleteItem(record); }}
+              style={{ padding: 0 }}
+            >
+            删除
+            </Button>
+            <div style={{ margin: '0 5px' }}>
+              <Divider type='vertical' />
+            </div>
+            <Dropdown overlay={moreMenu(record)} placement="bottomLeft">
+              <Button
+                type='link'
+                size='small'
+                style={{ padding: 0 }}
+              >
+              更多<DownOutlined />
+              </Button>
+            </Dropdown>
+          </div>
         )
       }
     }
@@ -206,6 +248,21 @@ const ModelTable = (props) => {
     onItemAction && onItemAction(record, 'detail');
   }
 
+  const onMoreMenuClick = (e, record) => {
+    const { key } = e;
+    if (key === 'history') {
+      historyItem(record);
+    } else if (key === 'copy') {
+      window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(view==='dir')?(catalogId||''):''}&${ModelerId}=${record.id}`);
+    } else if (key === 'createTable') {
+      deployAction(record);
+    } else if (key.indexOf('action') !== -1) {
+      const index = (key.split('-'))[1];
+      const action = record.state?.supportedActions[index];
+      stateAction(record, action);
+    }
+  }
+
   const deployAction = (record) => {
     onAutoCreateTable && onAutoCreateTable(record);
   }
@@ -334,7 +391,7 @@ const ModelTable = (props) => {
         sticky={!modelId}
       />
       {
-        !modelId && <Pagination
+        !modelId && (data||[]).length>0 && <Pagination
           className="text-center mt-3"
           showSizeChanger
           showQuickJumper

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

@@ -6,6 +6,22 @@
   }
 
   .yy-table-thead > tr > th {
+    padding: 8px 16px !important;
+  }
+
+  .yy-table-tbody > tr > td  {
+    padding: 12px 16px !important;
+  }
+
+  .yy-table-tbody > .yy-table-measure-row > td  {
+    padding: 0px !important;
+  }
+
+  tr.yy-table-expanded-row > td {
+    background: #fff !important;
+  }
+
+  .yy-table-thead > tr > th {
     background-color: #F2F5FC !important;
   }
 
@@ -24,4 +40,12 @@
   .yy-table {
     height: auto !important;
   }
+
+  .yy-table-placeholder {
+    display: none;
+  }
+
+  .yy-table-tbody > tr > td  {
+    padding: 8px 16px !important;
+  }
 }
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -203,22 +203,6 @@ class Model extends React.Component {
     window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}`);
   }
 
-  onImportModelBtnClick = () => {
-    const { catalogId, selectModelerIds, currentView } = this.state;
-
-    if ((selectModelerIds||[]).length === 0) {
-      showMessage('info', '请先选择一个模型');
-      return;
-    }
-
-    if ((selectModelerIds||[]).length > 1) {
-      showMessage('info', '只能选择一个模型');
-      return;
-    }
-
-    window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}&${ModelerId}=${selectModelerIds[0]}`);
-  }
-
   onExportDDLBtnClick = () => {
     const { selectModelerIds, tableData } = this.state;
     if ((selectModelerIds||[]).length === 0) {
@@ -410,6 +394,7 @@ class Model extends React.Component {
       <ModelTable 
         loading={loadingTableData} 
         catalogId={catalogId} 
+        view={currentView}
         data={filterTableData} 
         offset={offset}
         onChange={this.onTableChange}