调整模型编辑

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

 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Input, Form, Typography, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
-import { DeleteOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons';
+import { Input, Form, Typography, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Space } from 'antd';
+import { DeleteOutlined, CloseOutlined, CheckOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
@@ -275,6 +275,7 @@ const ImportActionIndex = (props) => {
   const [ keyword, setKeyword ] = useState('');
 
   const [ filterData, setFilterData ] = useState([]);
+  const [ insertIndex, setInsertIndex ] = useState(0);
 
   const dataRef = useRef();
   dataRef.current = data;
@@ -312,8 +313,21 @@ const ImportActionIndex = (props) => {
     const newFilterData = [...filterData, {name: ''}];
 
     setFilterData(newFilterData);
+
+    setInsertIndex(newFilterData.length-1);
     edit(newFilterData[newFilterData.length-1]);
+  }
+
+  const insert = (record) => {
+    const newData = [...data];
+    const index = newData.findIndex((item) => record.name === item.name);
+
+    newData.splice(index+1, 0, {name: ''});
 
+    setFilterData(newData);
+
+    setInsertIndex(index+1);
+    edit(newData[index+1]);
   }
 
   const edit = (record) => {
@@ -390,7 +404,7 @@ const ImportActionIndex = (props) => {
 
       if (index === -1) {
 
-        newData.push({
+        newData.splice(insertIndex, 0 , {
           name: row.name,
           unique: row.unique,
           indexedEasyDataModelAttributes: _indexedEasyDataModelAttributes,
@@ -503,21 +517,48 @@ const ImportActionIndex = (props) => {
 
         return isEditing(record) ? (
           <>
-            <Typography.Link className='mr-3' disabled={editingKey===null} onClick={() => save()}>
+            <Typography.Link className='mr-3' disabled={editingKey===null} onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation(); 
+              save();
+            }}>
               保存
             </Typography.Link>
-            <Typography.Link disabled={editingKey===null} onClick={() => {cancel()}}>
+            <Typography.Link disabled={editingKey===null} onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation(); 
+              cancel();
+            }}>
               取消
             </Typography.Link>
             </>
         ) : (
           <>
-            <Typography.Link className='mr-3' disabled={editingKey!==null} onClick={() => edit(record)}>
-              编辑
-            </Typography.Link>
-            <Typography.Link className='mr-3' disabled={editingKey!==null} onClick={() => remove(record)}>
-              删除
-            </Typography.Link>
+            <Button 
+              className='mr-3' 
+              size='small'
+              type='text' 
+              icon={<PlusOutlined />} 
+              disabled={editingKey !== null} 
+              onClick={(event) => { 
+                event.preventDefault();
+                event.stopPropagation();
+                insert(record); 
+              }}
+            />
+
+            <Button 
+              className='mr-3' 
+              size='small'
+              type='text' 
+              icon={<MinusOutlined />} 
+              disabled={editingKey !== null} 
+              onClick={(event) => { 
+                event.preventDefault();
+                event.stopPropagation();
+                remove(record); 
+              }}
+            />
           </>
         );
       },
@@ -572,7 +613,6 @@ const ImportActionIndex = (props) => {
                 </div>
               }
               title="规则详情"
-              trigger="click"
             >     
               <a href="">详情</a>     
             </Popover>
@@ -642,6 +682,10 @@ const ImportActionIndex = (props) => {
     setKeyword(e.target.value||'');
   }
 
+  const onClickRowTriggerEdit = (record) => {
+    edit(record);
+  }
+
   let disableAdd = false, addTip = '';
   if (editingKey!==null || keyword!=='') {
     disableAdd = true;
@@ -650,22 +694,24 @@ const ImportActionIndex = (props) => {
 
   return (
     <div className='model-import-action-index'>
-      <h2>数据表索引</h2> 
-      <div className='d-flex mb-3' style={{ justifyContent: editable?'space-between':'flex-end' }}>
-        { 
-          editable && <Tooltip title={addTip}>
-            <Button onClick={onAddClick} disabled={disableAdd} >新建</Button>
-          </Tooltip>
-        }
-        <div className='d-flex' style={{ alignItems: 'center' }}>
-          <Input 
-            placeholder="请输入索引名称" 
-            allowClear 
-            value={keyword}
-            onChange={onSearchInputChange} 
-            style={{ width: inputWidth }}
-          />
-        </div>
+      <div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
+        <h2 style={{ marginBottom: 0 }}>数据表索引</h2> 
+        <Space>
+          { 
+            editable && <Tooltip title={addTip}>
+              <Button onClick={onAddClick} disabled={disableAdd} >新建</Button>
+            </Tooltip>
+          }
+          <div className='d-flex' style={{ alignItems: 'center' }}>
+            <Input 
+              placeholder="请输入索引名称" 
+              allowClear 
+              value={keyword}
+              onChange={onSearchInputChange} 
+              style={{ width: inputWidth }}
+            />
+          </div>
+        </Space>
       </div>
       <div className='mb-3' id="containerId">
         <DndProvider backend={HTML5Backend} >
@@ -683,6 +729,9 @@ const ImportActionIndex = (props) => {
 
                 return {
                   index,
+                  onClick: (event) => {
+                    onClickRowTriggerEdit(record);
+                  },
                   moveRow
                 }
               }}

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

@@ -405,14 +405,14 @@ const ImportActionPartition = (props) => {
 
   return (
     <div className='model-import-action-index'>
-      <h2>数据表分区</h2>
-      {
-        editable && <div className='d-flex mb-3'>
-          <Tooltip title={addTip}>
+      <div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
+        <h2 style={{ marginBottom: 0 }}>数据表分区</h2> 
+        {
+          editable && <Tooltip title={addTip}>
             <Button onClick={onAddClick} disabled={disableAdd} >新建</Button>
           </Tooltip>
-        </div>
-      }
+        }
+      </div>
       <div className='mb-3' id="containerId">
         <Form form={form} component={false} onValuesChange={onValuesChange}>
           <Table

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

 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Input, Form, Typography, Radio, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Pagination } from 'antd';
+import { Input, Form, Typography, Radio, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Pagination, Space } from 'antd';
 import { CloseOutlined, CheckOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -941,7 +941,6 @@ const ImportActionTable = (props) => {
                 </div>
               }
               title="规则详情"
-              trigger="click"
             >     
               <a href="">详情</a>     
             </Popover>
@@ -1066,8 +1065,9 @@ const ImportActionTable = (props) => {
 
   return (
     <div className='model-import-action-table'>
-      <h2>数据表结构</h2> 
-      <div className='d-flex mb-3' style={{ justifyContent: editable?'space-between':'flex-end' }}>
+      <div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 style={{ marginBottom: 0 }}>数据表结构</h2> 
+        <Space>
         { 
           editable && <Tooltip title={addTip}> 
             <Button onClick={onAddClick}  disabled={disableAdd} >新建</Button>
@@ -1082,6 +1082,7 @@ const ImportActionTable = (props) => {
             style={{ width: inputWidth }}
           />
         </div>
+        </Space>
       </div>
       <div className='mb-3' id="containerId">
         <DndProvider backend={HTML5Backend} >