模型编辑页面调整

src/index.less

@@ -111,6 +111,30 @@ div[id^='__qiankun_microapp_wrapper_'] {
   word-break: break-all; 
 }
 
+.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;
+}
+
+.yy-table-tbody > tr.yy-table-row-selected > td {
+  background: #fff !important;
+}
+
+tr.yy-table-expanded-row > td {
+  background: #fff !important;
+}
+
+.yy-table-thead > tr > th {
+  background-color: #F2F5FC !important;
+}
+
 .yy-popover-content {
   pointer-events: auto !important;
 }

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

@@ -9,6 +9,8 @@ import { getQueryParam, showMessage } from '../../../../util';
 import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Editable, StateId, VersionId } from '../../../../util/constant';
 import HistoryAndVersionDrawer from './HistoryAndVersionDrawer';
 
+import './EditModel.less';
+
 const EditModel = (props) => {
 
   const [ actionData, setActionData ] = useState({ action: '', catalogId: '', modelerId: '', hints: [],  roughModelerData: null, permitCheckOut: false, editable: false, stateId: '', versionId: '' });
@@ -159,6 +161,7 @@ const EditModel = (props) => {
         type='primary' 
         onClick={save}
         loading={confirmLoading}
+        danger
       >
       保存
       </Button>
@@ -166,63 +169,53 @@ const EditModel = (props) => {
   } else if (action === 'detail') {
     actionsBtn = (
       <Space>
-        <Button onClick={onHistory} >版本历史</Button>
         {
-          (editable==='true') && <Button type='primary' onClick={edit} >
+          (editable==='true') && <Button type='primary' onClick={edit} danger >
           编辑
           </Button>
         }
+        <Button type='primary' onClick={onHistory} danger >版本历史</Button>
       </Space>
     );
   } else if (action === 'edit') {
     actionsBtn = (
       <Space>
-        <Button onClick={cancelEdit} >
-        取消
-        </Button>
-        <Button onClick={onHistory} >
-          版本历史
-        </Button>
         <Button 
           type='primary' 
           onClick={save}
           loading={confirmLoading}
+          danger
         >
         保存
         </Button>
+        <Button type='primary' onClick={onHistory} danger >
+          版本历史
+        </Button>
+        <Button onClick={cancelEdit} >
+        取消
+        </Button>
       </Space>
     )
   } else if (action === 'flow') {
     actionsBtn = (
-      <Button onClick={onHistory} >
+      <Button type='primary' onClick={onHistory} danger>
       版本历史
       </Button>
     );
   }
 
   return (
-    <div className='position-relative'>
-      <div 
-        className='flex' 
-        style={{ 
-          width: '100%',
-          height: 64, 
-          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>
-        {actionsBtn}
+    <div className='edit-model position-relative'>
+      <div className='edit-header'>
+        <span style={{ fontSize: 16, fontWeight: 'bold', color: '#fff' }}>{title}</span>
       </div>
-      <div className='position-absolute' style={{ top: 64, width: '100%' }}>
-        <div className='position-relative' style={{ margin: 15 }}>
+      <div className='edit-container'>
+        <div className='edit-container-card'>
           <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} terms={terms} roughModelerData={roughModelerData} permitCheckOut={permitCheckOut} stateId={stateId} versionId={versionId} /> 
-        </div>     
+        </div>
+      </div>
+      <div className='edit-footer'>
+      {actionsBtn}  
       </div>
       <CatalogModal
         visible={catalogModalVisible}

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

+.edit-model {
+  .edit-header {
+    display: flex;
+    width: 100%;
+    height: 44px; 
+    padding: 0 15px;
+    background-color: #464d6e;
+    align-items: center;
+    position: fixed; 
+    justify-content: space-between; 
+    border-bottom: 1px solid #EFEFEF;
+    z-index: 100;
+  }
+
+  .edit-container {
+    top: 44px;
+    width: 100%;
+    height: calc(100vh - 44px - 64px);
+    overflow: auto;
+    background: #EDF0F5;
+    padding: 10px 20px;
+    position: absolute;
+  }
+
+  .edit-container-card {
+    padding: 20px 20px 0;
+    background: #fff;
+  }
+
+  .edit-footer {
+    display: flex;
+    bottom: 0; 
+    width: 100%; 
+    height: 64px; 
+    position: fixed; 
+    justify-content: flex-end;
+    opacity: 0.9;
+    background: #fff;
+    box-shadow: 0 -1px 4px 0 #e5e9ea;
+    padding: 0 20px;
+  }
+}
\ No newline at end of file

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

 import React, { useState, useEffect } from 'react';
-import { Spin } from 'antd';
+import { Spin, Tabs, Popover, Divider, Button, Space } from 'antd';
 import LocalStorage from 'local-storage';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 
 import ImportActionHeader from './ImportActionHeader'; 
 import ImportActionTable from './ImportActionTable';
@@ -9,6 +10,8 @@ import ImportActionPartition from './ImportActionPartition';
 
 import { dispatch } from '../../../../model'; 
 
+const { TabPane } = Tabs;
+
 const ImportAction = (props) => {
   const { action, hints, onChange, form, modelerId, terms, ddl, roughModelerData, stateId, versionId, permitCheckOut } = props;
 
@@ -20,6 +23,7 @@ const ImportAction = (props) => {
   const [ supportedDatatypes, setSupportedDatatypes ] = useState([]);
   const [ supportedPartitionTypes, setSupportedPartitionTypes ] = useState([]); 
   const [ validateReports, setValidateReports ] = useState([]);
+  const [ tabKey, setTabKey ] = useState('1');
   const [ loading, setLoading ] = useState(false);
 
   useEffect(() =>{
@@ -331,54 +335,116 @@ const ImportAction = (props) => {
     return newEasyDataModelerIndices.filter(item => (item.indexedEasyDataModelAttributes||[]).length > 0);
   }
 
-  const container = (<React.Fragment>
-    <ImportActionHeader 
-      form={form}
-      editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
-      modelerData={modelerData||{}} 
-      constraints={constraints}
-      templates={templates}
-      validateReports={validateReports}
-      onTemplateChange={onTemplateChange}
-      onConstraintChange={onConstraintChange}
-      onChange={onHeaderChange}
-      terms={terms}
-    /> 
-    <ImportActionTable 
-      modelerData={modelerData||{}}
-      constraint={constraint} 
-      template={template}
-      validateReports={validateReports}
-      supportedDatatypes={supportedDatatypes} 
-      onChange={onTableChange} 
-      editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
-      action={action} 
-      terms={terms}
-    />
-    <ImportActionIndex 
-      modelerData={modelerData||{}} 
-      constraint={constraint} 
-      template={template}
-      validateReports={validateReports}
-      onChange={onIndexChange} 
-      editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
-      terms={terms}
-    />
-    <ImportActionPartition
-      modelerData={modelerData||{}} 
-      constraint={constraint} 
-      template={template}
-      validateReports={validateReports}
-      supportedPartitionTypes={supportedPartitionTypes} 
-      onChange={onPartitionChange} 
-      editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
-      terms={terms}
-    />
-  </React.Fragment>);
- 
+  const onTabChange = (key) => {
+    setTabKey(key);
+  }
+
+  const prevStep = () => {
+    setTabKey(`${Number(tabKey)-1}`);
+  }
+
+  const nextStep = () => {
+    setTabKey(`${Number(tabKey)+1}`);
+  }
+
   return (
     <Spin spinning={loading}>
-      { container }
+      <Tabs activeKey={tabKey} onChange={onTabChange}>
+        <TabPane tab='基本信息' key='1'>
+          <ImportActionHeader 
+            form={form}
+            editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
+            modelerData={modelerData||{}} 
+            constraints={constraints}
+            templates={templates}
+            validateReports={validateReports}
+            onTemplateChange={onTemplateChange}
+            onConstraintChange={onConstraintChange}
+            onChange={onHeaderChange}
+            terms={terms}
+          /> 
+        </TabPane>
+        <TabPane 
+          tab={
+            <span>
+              <span>数据表结构</span>
+              {
+                (action!=='detail'&&action!=='flow'&&action!=='detail-version') && (
+                  <Popover content='表格可以通过拖拽来排序'>
+                    <QuestionCircleOutlined className='ml-1 pointer' /> 
+                  </Popover> 
+                )
+              }
+            </span>
+          } 
+          key='2'
+        >  
+          <ImportActionTable 
+            modelerData={modelerData||{}}
+            constraint={constraint} 
+            template={template}
+            validateReports={validateReports}
+            supportedDatatypes={supportedDatatypes} 
+            onChange={onTableChange} 
+            editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
+            action={action} 
+            terms={terms}
+          />
+        </TabPane>
+        <TabPane  
+          tab={
+            <span>
+              <span>数据表索引</span>
+              {
+                (action!=='detail'&&action!=='flow'&&action!=='detail-version') && (
+                  <Popover content='表格可以通过拖拽来排序'>
+                    <QuestionCircleOutlined className='ml-1 pointer' /> 
+                  </Popover> 
+                )
+              }
+            </span>
+          }  
+          key='3'
+        >
+          <ImportActionIndex 
+            modelerData={modelerData||{}} 
+            constraint={constraint} 
+            template={template}
+            validateReports={validateReports}
+            onChange={onIndexChange} 
+            editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
+            terms={terms}
+          />
+        </TabPane>
+        <TabPane
+          tab='数据表分区'  
+          key='4'
+        >
+          <ImportActionPartition
+            modelerData={modelerData||{}} 
+            constraint={constraint} 
+            template={template}
+            validateReports={validateReports}
+            supportedPartitionTypes={supportedPartitionTypes} 
+            onChange={onPartitionChange} 
+            editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
+            terms={terms}
+          />
+        </TabPane>
+      </Tabs>
+      {
+        action!=='detail'&&action!=='flow'&&action!=='detail-version'&&(
+          <React.Fragment>
+            <Divider style={{ margin: 0 }} />
+            <div className='flex' style={{ justifyContent: 'flex-end', height: 64, alignItems: 'center' }}>
+              <Space size='small'>
+                <Button type='primary' onClick={prevStep} disabled={tabKey==='1'} danger>上一步</Button>
+                <Button type='primary' onClick={nextStep} disabled={tabKey==='4'} danger>下一步</Button>
+              </Space>
+            </div>
+          </React.Fragment>
+        )
+      }
     </Spin>
   );
 };

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

@@ -6,6 +6,7 @@ import { dispatchLatest } from '../../../../model';
 
 import './ImportActionHeader.less';
 
+const { TextArea } = Input;
 const { Option } = Select;
 
 const ConstraintSelect = ({ value = {}, constraints = [], onChange, ...restProps }) => {
@@ -170,7 +171,7 @@ const ImportActionHeader = (props) => {
           {...formItemLayout}
           onValuesChange={onValuesChange}
         >
-          <Row gutter={10}>
+          <Row >
             <Col span={8}>
               <Form.Item
                 label="中文名称"
@@ -189,21 +190,10 @@ const ImportActionHeader = (props) => {
                 rules={[{ required: true, message: '请输入英文名称!' }]}
               >
                 <AutoComplete options={options} onSearch={onSearch} style={{ width: 300 }}  />
-                {/* <Input /> */}
-              </Form.Item>
-            </Col>
-            <Col span={8}>
-              <Form.Item
-                label="描述"
-                name="remark"
-                labelAlign="left"
-                rules={[{ required: true, message: '请输入描述!' }]}
-              >
-                <Input style={{ width: 300 }} />
               </Form.Item>
             </Col>
           </Row>
-          <Row gutter={10}>
+          <Row >
             <Col span={8}>
               <Form.Item
                 label="规范"
@@ -233,9 +223,21 @@ const ImportActionHeader = (props) => {
               </Form.Item>
             </Col>
           </Row>
+          <Row>
+            <Col span={8}>
+              <Form.Item
+                label="描述"
+                name="remark"
+                labelAlign="left"
+                rules={[{ required: true, message: '请输入描述!' }]}
+              >
+                <TextArea row={4} style={{ width: 300 }} />
+              </Form.Item>
+            </Col>
+          </Row>
         </Form> 
       ) : (
-        <Descriptions column={5}>
+        <Descriptions column={2}>
           <Descriptions.Item label="中文名称">{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item>
           <Descriptions.Item label="英文名称">
           {

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

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

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

 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Input, Form, Typography, Divider, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
-import { QuestionCircleOutlined, DeleteOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons';
+import { Input, Form, Typography, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
+import { DeleteOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
@@ -422,7 +422,7 @@ const ImportActionIndex = (props) => {
       title: '序号',
       dataIndex: 'key',
       editable: false,
-      width: 50,
+      width: 60,
       render: (_, __, index) => {
         return (index+1).toString();
       }
@@ -640,21 +640,12 @@ const ImportActionIndex = (props) => {
   }
 
   return (
-    <div className='model-import-action-index mt-7'>
-      <Divider orientation='left'>
-        <>
-        <span>数据表索引</span>
-        { editable && ( 
-            <Popover content='表格可以通过拖拽来排序'>
-              <QuestionCircleOutlined className='ml-1 pointer' /> 
-            </Popover> 
-          ) 
+    <div className='model-import-action-index'>
+      <div className='d-flex mb-3' style={{ justifyContent: editable?'space-between':'flex-end' }}>
+        { 
+          editable && <Button onClick={onAddClick} disabled={ editingKey!==null || keyword!=='' } >新建</Button>
         }
-        </>
-      </Divider>
-      <div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
         <div className='d-flex' style={{ alignItems: 'center' }}>
-          <span className='mr-3'>索引搜索:</span>
           <Input 
             placeholder="请输入索引名称" 
             allowClear 
@@ -663,11 +654,8 @@ const ImportActionIndex = (props) => {
             style={{ width: 230 }}
           />
         </div>
-        { 
-          editable && <Button className='ml-3' type="primary" onClick={onAddClick}  disabled={ editingKey!==null || keyword!=='' } >新增索引</Button>
-        }
       </div>
-      <div id="containerId">
+      <div className='mb-3' id="containerId">
         <DndProvider backend={HTML5Backend} >
           <Form form={form} component={false} onValuesChange={onValuesChange}>
             <Table

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

 import React, { useState, useEffect } from 'react';
-import { Form, Typography, Divider, Button, Select, Row, Col, Tooltip, Table } from 'antd';
+import { Form, Typography, Button, Select, Row, Col, Tooltip, Table } from 'antd';
 import { DeleteOutlined } from '@ant-design/icons';
 
 import { showMessage, highlightSearchContentByTerms } from '../../../../util';
@@ -289,7 +289,7 @@ const ImportActionPartition = (props) => {
       title: '序号',
       dataIndex: 'key',
       editable: false,
-      width: 50,
+      width: 60,
       render: (_, __, index) => {
         return (index+1).toString();
       }
@@ -393,18 +393,13 @@ const ImportActionPartition = (props) => {
   }
 
   return (
-    <div className='model-import-action-index mt-7'>
-      <Divider orientation='left'>
-        <>
-        <span>数据表分区</span>
-        </>
-      </Divider>
+    <div className='model-import-action-index'>
       {
-        editable && <div className='d-flex mb-3' style={{ justifyContent: 'flex-end' }}>
-          <Button type="primary" onClick={onAddClick}  disabled={ data||isEditing } >新增分区</Button>
+        editable && <div className='d-flex mb-3'>
+          <Button onClick={onAddClick} disabled={ data||isEditing } >新建</Button>
         </div>
       }
-      <div id="containerId">
+      <div className='mb-3' id="containerId">
         <Form form={form} component={false} onValuesChange={onValuesChange}>
           <Table
             components={{

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

 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Input, Form, Typography, Radio, Divider, Button, Popconfirm, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
-import { QuestionCircleOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons';
+import { Input, Form, Typography, Radio, Button, Popconfirm, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
+import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
@@ -489,7 +489,7 @@ const ImportActionTable = (props) => {
       title: '序号',
       dataIndex: 'key',
       editable: false,
-      width: 50,
+      width: 60,
       fixed: 'left',
       render: (text, record, index) => {
         return (index+1).toString();
@@ -553,7 +553,7 @@ const ImportActionTable = (props) => {
     },
     {
       title: '可否为空',
-      width: 80,
+      width: 100,
       dataIndex: 'nullable',
       editable: (type==='model'?true:false),
       render: (nullable, record, index) => {
@@ -610,7 +610,7 @@ const ImportActionTable = (props) => {
     },
     {
       title: '重点关注',
-      width: 80,
+      width: 100,
       dataIndex: 'needAttention',
       editable: (type==='model'?true:false),
       render: (needAttention, record, index) => {
@@ -914,20 +914,11 @@ const ImportActionTable = (props) => {
 
   return (
     <div className='model-import-action-table'>
-      <Divider orientation='left'>
-        <>
-        <span>数据表结构</span>
-        { editable && ( 
-            <Popover content='表格可以通过拖拽来排序'>
-              <QuestionCircleOutlined className='ml-1 pointer' /> 
-            </Popover> 
-          ) 
+      <div className='d-flex mb-3' style={{ justifyContent: editable?'space-between':'flex-end' }}>
+        { 
+          editable && <Button onClick={onAddClick}  disabled={ editingKey!=='' || keyword!=='' } >新建</Button>
         }
-        </>
-      </Divider>
-      <div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
         <div className='d-flex' style={{ alignItems: 'center' }}>
-          <span className='mr-3'>字段搜索:</span>
           <Input 
             placeholder="请输入中文名称或者英文名称" 
             allowClear 
@@ -936,11 +927,8 @@ const ImportActionTable = (props) => {
             style={{ width: 230 }}
           />
         </div>
-        { 
-          editable && <Button className='ml-3' type="primary" onClick={onAddClick}  disabled={ editingKey!=='' || keyword!=='' } >新增字段</Button>
-        }
       </div>
-      <div id="containerId">
+      <div className='mb-3' id="containerId">
         <DndProvider backend={HTML5Backend} >
           <Form form={form} component={false} onValuesChange={onValuesChange}>
             <Table

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

@@ -146,7 +146,7 @@ const ModelTable = (props) => {
             <div style={{ margin: '0 5px' }}>
               <Divider type='vertical' />
             </div>
-            <Dropdown overlay={moreMenu(record)} placement="bottomLeft">
+            <Dropdown overlay={moreMenu(record)} trigger={['click']} placement="bottomLeft">
               <Button
                 type='link'
                 size='small'

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

@@ -5,30 +5,6 @@
     overflow: auto !important;
   }
 
-  .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;
-  }
-
-  .yy-table-tbody > tr.yy-table-row-selected > td {
-    background: #fff !important;
-  }
-
-  tr.yy-table-expanded-row > td {
-    background: #fff !important;
-  }
-
-  .yy-table-thead > tr > th {
-    background-color: #F2F5FC !important;
-  }
-
   .yy-pro-table {
     .yy-card-body {
       padding: 0 !important;

src/view/Manage/Model/index.jsx

@@ -473,7 +473,7 @@ class Model extends React.Component {
                 </Tooltip>
               </Space>
               <Space>
-                <Dropdown overlay={moreMenu} placement="bottomLeft">
+                <Dropdown overlay={moreMenu} trigger={['click']} placement="bottomLeft">
                   <Button>更多<DownOutlined /></Button>
                 </Dropdown>
               </Space>