点击表格外取消编辑

package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "ahooks": "^3.1.7",
     "antd": "^4.18.2",
     "axios": "^0.19.0",
     "copy-to-clipboard": "^3.3.1",

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

@@ -4,6 +4,7 @@ import { CloseOutlined, CheckOutlined, PlusOutlined, MinusOutlined, QuestionCirc
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
+import { useClickAway } from 'ahooks';
 
 import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
 import { dispatch, dispatchLatest } from '../../../../model'; 
@@ -252,6 +253,11 @@ const ImportActionTable = (props) => {
   const [ insertIndex, setInsertIndex ] = useState(0);
 
   const moveRowRef = useRef({ data, onChange, pageNum, pageSize });
+  const tableRef = useRef(null)
+
+  useClickAway(() => {
+    editItemPrevSave();
+  }, tableRef);
 
   //规则改变的时候 数据表为可编辑状态
   useEffect(() => {
@@ -394,8 +400,12 @@ const ImportActionTable = (props) => {
     setEnglishSuggests([]);
   };
 
-  const save = async() => {
+  const editItemPrevSave = async(editNewItem = null) => {
+
     try {
+
+      if (editingKey!=='') {
+
         const row = await form.validateFields();
 
         if ((row.datatype.name||'')==='') {
@@ -442,6 +452,11 @@ const ImportActionTable = (props) => {
         setEditingKey('');
         setSuggests([]);
         setEnglishSuggests([]);
+      }
+
+      if (editNewItem) {
+        edit(editNewItem);
+      }
       
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -842,24 +857,6 @@ const ImportActionTable = (props) => {
             {
               editable && <React.Fragment> 
               {
-                isEditing(record) ? (
-                  <React.Fragment>
-                    <Typography.Link className='mr-3' disabled={editingKey === ''} onClick={(event) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      save();
-                    }}>
-                      保存
-                    </Typography.Link>
-                    <Typography.Link disabled={editingKey === ''} onClick={(event) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      cancel();
-                    }}>
-                      取消
-                    </Typography.Link>
-                    </React.Fragment>
-                ) : (
                 <React.Fragment>
                   <Button 
                     className='mr-3' 
@@ -887,7 +884,6 @@ const ImportActionTable = (props) => {
                     }}
                   />
                 </React.Fragment>
-                )
               }
               </React.Fragment> 
             }
@@ -1075,7 +1071,7 @@ const ImportActionTable = (props) => {
         <Space>
           <h2 style={{ marginBottom: 0 }}>数据表结构</h2> 
           { 
-            editable && <Popover content='点击行进行编辑,表格可以通过拖拽来排序'>
+            editable && <Popover content='点击行进行编辑, 点击表格外或者点击表格其他行取消编辑,表格可以通过拖拽来排序'>
               <QuestionCircleOutlined className='pointer' /> 
             </Popover> 
           }
@@ -1097,7 +1093,7 @@ const ImportActionTable = (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
@@ -1120,7 +1116,7 @@ const ImportActionTable = (props) => {
                 return 'editable-row';
               }}
               onRow={(record, index) => {
-                if (!editable || editingKey!=='' || keyword.length>0) return {
+                if (!editable || isEditing(record) || keyword.length>0) return {
                   id: `field-${record.iid}`,
                 };
 
@@ -1128,7 +1124,9 @@ const ImportActionTable = (props) => {
                   index,
                   id: `field-${record.iid}`,
                   onClick: (event) => {
-                    onClickRowTriggerEdit(record);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    editItemPrevSave(record);
                   },
                   moveRow
                 }