字段编辑优化

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

@@ -358,10 +358,10 @@ const ImportAction = (props) => {
   const getAllNewKeysAfterTableChange = (newModelerData) => {
 
     //分布键
-    let newDistribution = [...(newModelerData.easyDataModelerDistributionKey||[])];
+    let newDistribution = [];
 
-    (newDistribution||[]).forEach((item, index) => {
-      const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.name === _item.name);
+    (newModelerData.easyDataModelerDistributionKey||[]).forEach((item, index) => {
+      const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
 
       if (_index !== -1) {
         newDistribution.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
@@ -373,10 +373,10 @@ const ImportAction = (props) => {
     }
 
      //主键
-     let newPrimary = [...(newModelerData.easyDataModelerPrimaryKey||[])];
+     let newPrimary = [];
 
-     (newPrimary||[]).forEach((item, index) => {
-       const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.name === _item.name);
+     (newModelerData.easyDataModelerPrimaryKey||[]).forEach((item, index) => {
+       const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
  
        if (_index !== -1) {
         newPrimary.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
@@ -393,7 +393,7 @@ const ImportAction = (props) => {
     const newKeys = [];
 
     (newPartition.keys||[]).forEach((item, index) => {
-      const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.name === _item.name);
+      const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
 
       if (_index !== -1) {
         newKeys.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
@@ -406,6 +406,21 @@ const ImportAction = (props) => {
       newPartition = null;
     }
 
+    //类主键
+    let newSemiPrimary = [];
+
+    (newModelerData.semiPrimaryKey||[]).forEach((item, index) => {
+      const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
+
+      if (_index !== -1) {
+        newSemiPrimary.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
+      } 
+    })
+
+    if ((newSemiPrimary||[]).length === 0) {
+      newSemiPrimary = null;
+    }
+
     //索引
     let newEasyDataModelerIndices = [...(newModelerData.easyDataModelerIndices||[])];
     (newModelerData.easyDataModelerIndices||[]).forEach((easyDataModelerIndex, index) => {
@@ -427,7 +442,7 @@ const ImportAction = (props) => {
 
     newEasyDataModelerIndices = newEasyDataModelerIndices.filter(item => (item.indexedEasyDataModelAttributes||[]).length > 0);
 
-    return { partition: newPartition, easyDataModelerDistributionKey: newDistribution, easyDataModelerPrimaryKey: newPrimary, easyDataModelerIndices: newEasyDataModelerIndices };
+    return { partition: newPartition, easyDataModelerDistributionKey: newDistribution, easyDataModelerPrimaryKey: newPrimary, easyDataModelerIndices: newEasyDataModelerIndices, semiPrimaryKey: newSemiPrimary};
   }
 
   return (

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

@@ -82,7 +82,7 @@ const TemplateSelect = ({ value = {}, templates = [], onChange, ...restProps })
 const AttributesSelect = ({ value = [], modelerData, onChange, ...restProps }) => {
 
   const onAttributeChange = (value) => {
-    const currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.name)!==-1);
+    const currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.iid)!==-1);
 
     triggerChange(currentAttributes);
   }
@@ -94,15 +94,15 @@ const AttributesSelect = ({ value = [], modelerData, onChange, ...restProps }) =
   //value有可能为空
   value = value ? value: [];
   
-  let attributeNames = [];
+  let attributeIds = [];
   value.forEach(attribute => {
-    attributeNames.push(attribute.name);
+    attributeIds.push(attribute.iid);
   })
 
   return (
     <Select 
       onChange={(value) => { onAttributeChange && onAttributeChange(value) }} 
-      value={attributeNames} 
+      value={attributeIds} 
       placeholder='请选择字段名称'
       style={{ width: 300 }}
       mode='multiple'
@@ -111,7 +111,7 @@ const AttributesSelect = ({ value = [], modelerData, onChange, ...restProps }) =
     {
       (modelerData?.easyDataModelerDataModelAttributes||[]).map((attribute, index) => {
         return (
-          <Option key={index} value={attribute.name||''}>{attribute.name||''}</Option>
+          <Option key={index} value={attribute.iid||''}>{attribute.name||''}</Option>
         );
       })
     }
@@ -134,7 +134,7 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
   }
 
   const onAttributeChange = (value) => {
-    const currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.name)!==-1);
+    const currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.iid)!==-1);
 
     triggerChange({ keys: currentAttributes });
   }
@@ -149,9 +149,9 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
   //value有可能为空
   value = value ? value: {};
   
-  let attributeNames = [];
+  let attributeIds = [];
   (value?.keys||[]).forEach(attribute => {
-    attributeNames.push(attribute.name);
+    attributeIds.push(attribute.iid);
   })
 
   return (
@@ -173,7 +173,7 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
       </Select>
       <Select 
         onChange={(value) => { onAttributeChange && onAttributeChange(value) }} 
-        value={attributeNames} 
+        value={attributeIds} 
         placeholder='请选择字段名称'
         style={{ width: 200, marginLeft: 5 }}
         mode='multiple'
@@ -182,7 +182,7 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
       {
         (modelerData?.easyDataModelerDataModelAttributes||[]).map((attribute, index) => {
           return (
-            <Option key={index} value={attribute.name||''}>{attribute.name||''}</Option>
+            <Option key={index} value={attribute.iid||''}>{attribute.name||''}</Option>
           );
         })
       }
@@ -399,7 +399,7 @@ const ImportActionHeader = (props) => {
     setOnlyShowRequireChange(e.target.checked);
   }
 
-  let distributionDescription = '', primaryDescription = '', partitionsDescription = '';
+  let distributionDescription = '', primaryDescription = '', partitionsDescription = '', semiPrimaryDescription = '';
 
   if (!editable && modelerData) {
     //分布
@@ -438,6 +438,17 @@ const ImportActionHeader = (props) => {
     if (modelerData?.partition?.partitionType?.name) {
       partitionsDescription += '/' + modelerData?.partition?.partitionType?.name||'';
     }
+
+     //类主键
+     if (modelerData?.semiPrimaryKey) {
+      (modelerData?.semiPrimaryKey||[]).forEach((item, index) => {
+        if (index > 0) {
+          semiPrimaryDescription += ',';
+        }
+
+        semiPrimaryDescription += item.name||'';
+      })
+    }
   }
 
   return (
@@ -583,10 +594,10 @@ const ImportActionHeader = (props) => {
             <Col span={8}>  
               <Form.Item
                 label="类主键"
-                name="semiPrimaryKeysDescription"
+                name="semiPrimaryKey"
                 labelAlign="left"
               >
-                <Input style={{ width: 300 }} />
+                <AttributesSelect modelerData={modelerData} />
               </Form.Item>
             </Col>
           </Row>
@@ -650,7 +661,7 @@ const ImportActionHeader = (props) => {
               <Descriptions.Item label="分布键">{highlightSearchContentByTerms(distributionDescription||'', terms)}</Descriptions.Item>
               <Descriptions.Item label="分区键">{highlightSearchContentByTerms(partitionsDescription||'', terms)}</Descriptions.Item>
               <Descriptions.Item label="主键">{highlightSearchContentByTerms(primaryDescription||'', terms)}</Descriptions.Item>
-              <Descriptions.Item label="类主键">{highlightSearchContentByTerms(modelerData.semiPrimaryKeysDescription||'', terms)}</Descriptions.Item>
+              <Descriptions.Item label="类主键">{highlightSearchContentByTerms(semiPrimaryDescription||'', terms)}</Descriptions.Item>
               <Descriptions.Item label="加载方式">{highlightSearchContentByTerms(modelerData.dataLoadingStrategy||'', terms)}</Descriptions.Item>
               <Descriptions.Item label="更新时间">{highlightSearchContentByTerms(modelerData.dataUpdatingTiming||'', terms)}</Descriptions.Item>
               <Descriptions.Item label="维护历史">{highlightSearchContentByTerms(modelerData.maintenanceRecords||'', terms)}</Descriptions.Item> 

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

@@ -4,6 +4,8 @@ import { DeleteOutlined, CloseOutlined, CheckOutlined, PlusOutlined, MinusOutlin
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
+import { useClickAway } from 'ahooks';
+import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 
 import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help';
 import { showMessage, highlightSearchContentByTerms, inputWidth } from '../../../../util';
@@ -11,6 +13,7 @@ import { showMessage, highlightSearchContentByTerms, inputWidth } from '../../..
 const { Option } = Select;
 
 const type = 'DragableIndexBodyRow';
+const MENU_ID = 'model-index-menu';
 
 const AttributesInputItem = ({ indexedAttribute = null, indexedAttributeOrder = null, attributes, onAttributeChange, onOrderChange, onDelete , className }) => {
 
@@ -20,6 +23,7 @@ const AttributesInputItem = ({ indexedAttribute = null, indexedAttributeOrder =
         <span>字段名称:</span>
       </Col>
       <Col span={6}>
+        <span onClick={e => e.stopPropagation()}>
           <Select 
             onChange={(value) => { onAttributeChange && onAttributeChange(value) }} 
             value={indexedAttribute ? (indexedAttribute.name||'') : ''} 
@@ -33,12 +37,14 @@ const AttributesInputItem = ({ indexedAttribute = null, indexedAttributeOrder =
             })
           }
           </Select>
+        </span>
       </Col>
       <Col span={1}></Col>
       <Col span={2}>
         <span>排序:</span>
       </Col>
       <Col span={6}>
+        <span onClick={e => e.stopPropagation()}>
           <Select 
             onChange={(value) => { onOrderChange && onOrderChange(value) }} 
             value={indexedAttributeOrder||''} 
@@ -47,6 +53,7 @@ const AttributesInputItem = ({ indexedAttribute = null, indexedAttributeOrder =
             <Option value='DESC'>DESC</Option>
             <Option value='ASC'>ASC</Option>
           </Select>
+        </span>
       </Col>
       <Col span={1}></Col>
       <Col span={1}>
@@ -121,7 +128,7 @@ const AttributesInput = ({ value = {}, attributes, onChange }) => {
   };
 
   return (
-    <>
+    <React.Fragment>
       {
         (indexedEasyDataModelAttributes||[]).map((indexedAttribute, index) => {
           return (
@@ -133,13 +140,16 @@ const AttributesInput = ({ value = {}, attributes, onChange }) => {
               attributes={attributes}
               onAttributeChange={(value) => { onAttributeChange(value, index) } }
               onOrderChange={(value) => { onOrderChange(value, index) }}
-              onDelete={() => { onItemDelete(index) }}
+              onDelete={(event) => { 
+                event.stopPropagation();
+                onItemDelete(index) 
+              }}
             />
           );
         })
       }
       <Button onClick={addAttribute}>新增字段</Button>
-    </>
+    </React.Fragment>
   )
 }
 
@@ -276,10 +286,21 @@ const ImportActionIndex = (props) => {
 
   const [ filterData, setFilterData ] = useState([]);
   const [ insertIndex, setInsertIndex ] = useState(0);
+  const [ currentItem, setCurrentItem ] = useState(null);
 
   const dataRef = useRef();
   dataRef.current = data;
 
+  const tableRef = useRef(null);
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  useClickAway(() => {
+    save();
+  }, tableRef);
+  
   //规则改变的时候 数据表为可编辑状态
   useEffect(() => {
     setEditingKey(null);
@@ -308,29 +329,79 @@ const ImportActionIndex = (props) => {
   
   const isEditing = (record) => record.name === editingKey;
 
-  const onAddClick = () => {
+  const onAddClick = (event) => {
+    event.stopPropagation(); 
+
+    save().then(result => {
+      if (result) {
+        const newData = [...dataRef.current, {name: ''}];
+
+        setFilterData(newData);    
+        setInsertIndex(newData.length-1);
+        edit(newData[newData.length-1], false);   
+      }
+    })
+  }
+
+  const insertToFront = (record) => {
+    save().then(result => {
 
-    const newFilterData = [...filterData, {name: ''}];
+      if (result) {
+        let newData = [...dataRef.current];
 
-    setFilterData(newFilterData);
+        const index = newData.findIndex((item) => record.name === item.name);
 
-    setInsertIndex(newFilterData.length-1);
-    edit(newFilterData[newFilterData.length-1]);
+        if (index === -1) {
+
+          if (insertIndex === 0) {
+            newData = [{name: ''}, ...newData];
+  
+            edit(newData[0], false);
+          } else {
+            newData.splice(insertIndex, 0, {name: ''});
+            edit(newData[insertIndex], false);
           }
 
-  const insert = (record) => {
-    const newData = [...data];
+        } else if (index === 0) {
+          newData = [{name: ''}, ...newData];
+
+          setInsertIndex(0);
+          edit(newData[0], false);
+        } else {
+          newData.splice(index, 0, {name: ''});
+          setInsertIndex(index);
+          edit(newData[index], false);
+        }
+
+        setFilterData(newData);
+      }
+    })
+  }
+
+  const insertToBack = (record) => {
+    save().then(result => {
+      if (result) {
+        const newData = [...dataRef.current];
         const index = newData.findIndex((item) => record.name === item.name);
 
-    newData.splice(index+1, 0, {name: ''});
+        if (index === -1) {
+          newData.splice(insertIndex+1, 0, {name: ''});
+          setFilterData(newData);
           
+          setInsertIndex(insertIndex+1);
+          edit(newData[insertIndex+1], false);
+        } else {
+          newData.splice(index+1, 0, {name: ''});
           setFilterData(newData);
           
           setInsertIndex(index+1);
-    edit(newData[index+1]);
+          edit(newData[index+1], false);
+        }
+      }
+    })
   }
 
-  const edit = (record) => {
+  const editLogic = (record) => {
     form.setFieldsValue({
       name: '',
       attributesWithOrders: {
@@ -340,33 +411,39 @@ const ImportActionIndex = (props) => {
       unique: false,
       ...record,
     });
-    setEditingKey(record.name);
+
+    setEditingKey(record?.name);
+  }
+
+  const edit = (record, needSave = true) => {
+
+    if (needSave) {
+      save().then(result => {
+        if (result) {
+          editLogic(record);
+        }
+      })
+    } else {
+      editLogic(record);
+    }
   };
 
   const remove = (record) => {
     const newData = [...data];
     const index = newData.findIndex((item) => record.name === item.name);
+
+    if (index !== -1) {
       newData.splice(index, 1);
-    onChange && onChange(newData);
     }
 
-  const cancel = () => {
-
-    const newFilterData = [...filterData];
-
-    const index = newFilterData.findIndex((item) => editingKey === item.name);
-
-    const item = newFilterData[index];
-    if (!item.name || item.name==='') {
-      newFilterData.splice(index, 1);
-      setFilterData(newFilterData);
-    }
+    onChange && onChange(newData);
 
     setEditingKey(null);
-  };
+  }
 
   const save = async() => {
     try {
+      if (editingKey!==null) {
         const row = await form.validateFields();
 
         // console.log('row', row);  
@@ -420,12 +497,18 @@ const ImportActionIndex = (props) => {
           }});
         }
 
+        dataRef.current = newData;
+    
         onChange && onChange(newData, true);
 
         setEditingKey(null);
+      }
+
+      return true;
       
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
+      return false;
     }
   };
 
@@ -515,35 +598,16 @@ const ImportActionIndex = (props) => {
       render: (_, record) => {
         if (!editable) return null;
 
-        return isEditing(record) ? (
-          <>
-            <Typography.Link className='mr-3' disabled={editingKey===null} onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation(); 
-              save();
-            }}>
-              保存
-            </Typography.Link>
-            <Typography.Link disabled={editingKey===null} onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation(); 
-              cancel();
-            }}>
-              取消
-            </Typography.Link>
-            </>
-        ) : (
-          <>
+        return (
+          <React.Fragment>
             <Button 
               className='mr-3' 
               size='small'
               type='text' 
               icon={<PlusOutlined />} 
-              disabled={editingKey !== null} 
               onClick={(event) => { 
-                event.preventDefault();
                 event.stopPropagation();
-                insert(record); 
+                insertToFront(record); 
               }}
             />
 
@@ -552,15 +616,13 @@ const ImportActionIndex = (props) => {
               size='small'
               type='text' 
               icon={<MinusOutlined />} 
-              disabled={editingKey !== null} 
               onClick={(event) => { 
-                event.preventDefault();
                 event.stopPropagation();
                 remove(record); 
               }}
             />
-          </>
-        );
+          </React.Fragment>
+        )
       },
     },
   ]
@@ -682,14 +744,18 @@ const ImportActionIndex = (props) => {
     setKeyword(e.target.value||'');
   }
 
-  const onClickRowTriggerEdit = (record) => {
-    edit(record);
+  const displayMenu = (e) => {
+    show(e);
   }
 
-  let disableAdd = false, addTip = '';
-  if (editingKey!==null || keyword!=='') {
-    disableAdd = true;
-    addTip = '正在搜索或者编辑中,不允许新建';
+  const handleItemClick = ({ event, props, data, triggerEvent }) => {
+    const key = event.currentTarget.id;
+
+    if (key === 'up') {
+      insertToFront(currentItem);
+    } else if (key === 'down') {
+      insertToBack(currentItem);
+    }
   }
 
   return (
@@ -705,8 +771,8 @@ const ImportActionIndex = (props) => {
         </Space>
         <Space>
           { 
-            editable && <Tooltip title={addTip}>
-              <Button onClick={onAddClick} disabled={disableAdd} >新建</Button>
+            editable && <Tooltip>
+              <Button onClick={onAddClick} >新建</Button>
             </Tooltip>
           }
           <div className='d-flex' style={{ alignItems: 'center' }}>
@@ -720,7 +786,7 @@ const ImportActionIndex = (props) => {
           </div>
         </Space>
       </div>
-      <div className='mb-3' id="containerId">
+      <div className='mb-3' id="containerId" ref={tableRef}>
         <DndProvider backend={HTML5Backend} >
           <Form form={form} component={false} onValuesChange={onValuesChange}>
             <Table
@@ -732,15 +798,31 @@ const ImportActionIndex = (props) => {
                 },
               }}
               onRow={(record, index) => {
-                if (!editable || editingKey!==null || keyword.length>0) return null;
-
-                return {
+                let rowParams = {
                   index,
-                  onClick: (event) => {
-                    onClickRowTriggerEdit(record);
-                  },
-                  moveRow
+                };
+
+                if (editable) {
+                  rowParams = {...rowParams, onContextMenu: event => {
+                      setCurrentItem(record);
+                      displayMenu(event);
                     }
+                  };
+
+                  if (!isEditing(record)) {
+                    rowParams = {...rowParams, onClick: (event) => {
+                        event.stopPropagation();
+                        edit(record);
+                      }
+                    }
+
+                    if (keyword.length===0) {
+                      rowParams = {...rowParams, moveRow};
+                    }
+                  }
+                }
+
+                return rowParams;
               }}
               dataSource={filterData||[]}
               columns={mergedColumns()}
@@ -752,6 +834,15 @@ const ImportActionIndex = (props) => {
             />
           </Form>
         </DndProvider>
+
+        <RcMenu id={MENU_ID} >
+          <RcItem id="up" onClick={handleItemClick}>
+            向上插入
+          </RcItem>
+          <RcItem id="down" onClick={handleItemClick}>
+            向下插入
+          </RcItem>
+        </RcMenu>
       </div>
     </div>
   );

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

@@ -5,6 +5,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 import { useClickAway } from 'ahooks';
+import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 
 import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
 import { dispatch, dispatchLatest } from '../../../../model'; 
@@ -18,6 +19,7 @@ const { Option } = Select;
 const type = 'DragableTableBodyRow';
 const perSuggestCount = 5;
 const supportMaxAttributeCountPerPage = 100;
+const MENU_ID = 'model-attribute-menu';
 
 const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
 
@@ -251,12 +253,17 @@ const ImportActionTable = (props) => {
   const [ filterPageData, setFilterPageData ] = useState([]);
   const { pageNum, pageSize, filterData } = filterPageCondition;
   const [ insertIndex, setInsertIndex ] = useState(0);
+  const [ currentItem, setCurrentItem ] = useState(null);
 
   const moveRowRef = useRef({ data, onChange, pageNum, pageSize });
-  const tableRef = useRef(null)
+  const tableRef = useRef(null);
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
 
   useClickAway(() => {
-    editItemPrevSave();
+    save();
   }, tableRef);
 
   //规则改变的时候 数据表为可编辑状态
@@ -292,8 +299,6 @@ const ImportActionTable = (props) => {
   }, [keyword])
 
   useEffect(() => {
-
-
     moveRowRef.current.pageNum = pageNum;
     moveRowRef.current.pageSize = pageSize;
 
@@ -315,30 +320,61 @@ const ImportActionTable = (props) => {
 
   const isEditing = (record) => record?.iid === editingKey;
 
-  const onAddClick = () => {
+  const onAddClick = (event) => {
 
+    event.stopPropagation();  
+
+    save().then(result => {
+      if (result) {
         const iid = generateUUID();
-    const newFilterData = [...filterData, {iid}];
+        const newData = [...moveRowRef.current.data, {iid}];
         
-    if (newFilterData.length > supportMaxAttributeCountPerPage) {
+        if (newData.length > supportMaxAttributeCountPerPage) {
           
-      const totalNum = parseInt(newFilterData.length/supportMaxAttributeCountPerPage) + ((newFilterData.length%supportMaxAttributeCountPerPage===0)?0:1);
+          const totalNum = parseInt(newData.length/supportMaxAttributeCountPerPage) + ((newData.length%supportMaxAttributeCountPerPage===0)?0:1);
           
-      setFilterPageCondition({...filterPageCondition, ...{ filterData: newFilterData, pageNum: totalNum }});
+          setFilterPageCondition({...filterPageCondition, ...{ filterData: newData, pageNum: totalNum }});
         } else {
-      setFilterPageCondition({...filterPageCondition, ...{ filterData: newFilterData}});
+          setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
         }
     
-    setInsertIndex(newFilterData.length-1);
+        setInsertIndex(newData.length-1);
     
-    edit(newFilterData[newFilterData.length-1]);
+        edit(newData[newData.length-1], false);
         setTimeout(() => {
           document.getElementById(`field-${iid}`)?.scrollIntoView();
         }, 200)
       }
+    })
+  }
 
-  const insert = (record) => {
-    const newData = [...data];
+  const insertToFront = (record) => {
+    save().then(result => {
+      if (result) {
+        let newData = [...moveRowRef.current.data];
+        const index = newData.findIndex((item) => record.iid === item.iid);
+
+        const iid = generateUUID();
+
+        if (index === 0) {
+          newData = [{iid}, ...newData];
+          setInsertIndex(0);
+          edit(newData[0], false);
+        } else {
+          newData.splice(index, 0, {iid});
+          setInsertIndex(index);
+          edit(newData[index], false);
+        }
+
+        setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
+      }
+    })
+  }
+
+  const insertToBack = (record) => {
+    save().then(result => {
+      if (result) {
+        const newData = [...moveRowRef.current.data];
         const index = newData.findIndex((item) => record.iid === item.iid);
 
         const iid = generateUUID();
@@ -346,10 +382,12 @@ const ImportActionTable = (props) => {
         setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
         
         setInsertIndex(index+1);
-    edit(newData[index+1]);
+        edit(newData[index+1], false);
+      }
+    })
   }
 
-  const edit = (record) => {
+  const editLogic = (record) => {
     form.setFieldsValue({
       name: '',
       cnName: '',
@@ -366,41 +404,46 @@ const ImportActionTable = (props) => {
       ...record,
     });
 
-    setEditingKey(record.iid);
-    setAutoTranslate((record.name||'')==='');
+    console.log('record', record);
 
-    if ((record.cnName||'')!=='') {
-      onValuesChange({ cnName: record.cnName }, record, 1, record.iid);
-    } else if ((record.name||'')!=='') {
-      onValuesChange({ name: record.name }, record, 1, record.iid);
+    setEditingKey(record?.iid);
+    setAutoTranslate((record?.name||'')==='');
+
+    if ((record?.cnName||'')!=='') {
+      onValuesChange({ cnName: record?.cnName }, record, 1, record?.iid);
+    } else if ((record?.name||'')!=='') {
+      onValuesChange({ name: record?.name }, record, 1, record?.iid);
+    }
+  }
+
+  const edit = (record, needSave = true) => {
+    if (needSave) {
+      save().then((result) => {
+        editLogic(record);
+      }); 
+    } else {
+      editLogic(record);
     }
   };
 
   const remove = (record) => {
     const newData = [...data];
     const index = newData.findIndex((item) => record.iid === item.iid);
+
+    if (index !== -1) {
       newData.splice(index, 1);
-    onChange && onChange(newData);
     }
 
-  const cancel = () => {
-    const newFilterData = [...filterData];
-
-    const _index = (data||[]).findIndex((item) => editingKey === item.iid);
-
-    const index = newFilterData.findIndex((item) => editingKey === item.iid);
-    const item = newFilterData[index];
-    if (_index===-1 && (!item.name || item.name==='')) {
-      newFilterData.splice(index, 1);
-      setFilterPageCondition({...filterPageCondition, filterData: newFilterData  })
-    }
+    onChange && onChange(newData);
 
+    if (editingKey === record.iid) {
       setEditingKey('');
       setSuggests([]);
       setEnglishSuggests([]);
-  };
+    }
+  }
 
-  const editItemPrevSave = async(editNewItem = null) => {
+  const save = async() => {
 
     try {
 
@@ -447,6 +490,8 @@ const ImportActionTable = (props) => {
           newData.splice(index, 1, { ...item, ...row, modelingTemplateTag: null });
         }
 
+        moveRowRef.current.data = newData;
+
         onChange && onChange(newData, true);
 
         setEditingKey('');
@@ -454,12 +499,11 @@ const ImportActionTable = (props) => {
         setEnglishSuggests([]);
       }
 
-      if (editNewItem) {
-        edit(editNewItem);
-      }
+      return true;
       
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
+      return false;
     }
   };
 
@@ -824,7 +868,6 @@ const ImportActionTable = (props) => {
               !isEditing(record) && <React.Fragment>
               {
                 record?.isPossibleNewRecommendedDefinition?.possible && <Typography.Link className='mr-3' onClick={(event) => {
-                  event.preventDefault();
                   event.stopPropagation();  
                   value?.setGlobalState && value?.setGlobalState({
                     message: 'data-govern-show-standard-create',
@@ -839,7 +882,6 @@ const ImportActionTable = (props) => {
               }
               {
                 record?.isPossibleNewTerm?.possible && <Typography.Link className='mr-3' onClick={(event) => {
-                  event.preventDefault();
                   event.stopPropagation();  
                   value?.setGlobalState && value?.setGlobalState({
                     message: 'data-govern-show-standard-create',
@@ -863,11 +905,9 @@ const ImportActionTable = (props) => {
                     size='small'
                     type='text' 
                     icon={<PlusOutlined />} 
-                    disabled={editingKey !== ''} 
                     onClick={(event) => { 
-                      event.preventDefault();
                       event.stopPropagation();
-                      insert(record); 
+                      insertToFront(record); 
                     }}
                   />
 
@@ -876,9 +916,7 @@ const ImportActionTable = (props) => {
                     size='small'
                     type='text' 
                     icon={<MinusOutlined />} 
-                    disabled={editingKey !== ''} 
                     onClick={(event) => { 
-                      event.preventDefault();
                       event.stopPropagation();
                       remove(record); 
                     }}
@@ -1055,14 +1093,18 @@ const ImportActionTable = (props) => {
     onValuesChange(currentChangedValues, form.getFieldsValue(), suggestOffset);
   }
 
-  const onClickRowTriggerEdit = (record) => {
-    edit(record);
+  const displayMenu = (e) => {
+    show(e);
   }
 
-  let disableAdd = false, addTip = '';
-  if (editingKey!=='' || keyword!=='') {
-    disableAdd = true;
-    addTip = '正在搜索或者编辑中,不允许新建';
+  const handleItemClick = ({ event, props, data, triggerEvent }) => {
+    const key = event.currentTarget.id;
+
+    if (key === 'up') {
+      insertToFront(currentItem);
+    } else if (key === 'down') {
+      insertToBack(currentItem);
+    }
   }
 
   return (
@@ -1078,8 +1120,8 @@ const ImportActionTable = (props) => {
         </Space>
         <Space>
         { 
-          editable && <Tooltip title={addTip}> 
-            <Button onClick={onAddClick}  disabled={disableAdd} >新建</Button>
+          editable && <Tooltip> 
+            <Button onClick={onAddClick}>新建</Button>
           </Tooltip>  
         }
         <div className='d-flex' style={{ alignItems: 'center' }}>
@@ -1116,20 +1158,33 @@ const ImportActionTable = (props) => {
                 return 'editable-row';
               }}
               onRow={(record, index) => {
-                if (!editable || isEditing(record) || keyword.length>0) return {
-                  id: `field-${record.iid}`,
-                };
 
-                return {
+                let rowParams = {
                   index,
                   id: `field-${record.iid}`,
-                  onClick: (event) => {
-                    event.preventDefault();
+                }
+
+                if (editable) {
+                  rowParams = {...rowParams, onContextMenu: event => {
+                      setCurrentItem(record);
+                      displayMenu(event);
+                    }
+                  };
+
+                  if (!isEditing(record)) {
+                    rowParams = {...rowParams, onClick: (event) => {
                         event.stopPropagation();
-                    editItemPrevSave(record);
-                  },
-                  moveRow
+                        edit(record);
                       }
+                    }
+
+                    if (keyword.length===0) {
+                      rowParams = {...rowParams, moveRow};
+                    }
+                  }
+                }
+
+                return rowParams;
               }}
               dataSource={filterPageData||[]}
               columns={mergedColumns()}
@@ -1214,6 +1269,15 @@ const ImportActionTable = (props) => {
           />
         }
 
+        <RcMenu id={MENU_ID} >
+          <RcItem id="up" onClick={handleItemClick}>
+            向上插入
+          </RcItem>
+          <RcItem id="down" onClick={handleItemClick}>
+            向下插入
+          </RcItem>
+        </RcMenu> 
+        
       </div>
     </div>
   );