推荐优化

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

@@ -14,7 +14,7 @@ import { dispatch, dispatchLatest } from '../../../../model';
 import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help';
 import { AppContext } from '../../../../App';
 import DebounceInput from './DebounceInput';
-import SuggestTable from './SuggestTable';
+import Suggest from './suggest';
 import { AttentionSvg, UnAttentionSvg } from './ModelSvg';
 import { EditModelContext } from './ContextManage';
 import { ValidateTip } from './ImportActionHeader';
@@ -152,12 +152,13 @@ export const EditableCell = ({
   index,
   datatypes,
   require,
+  onPressEnter,
   children,
   ...restProps
 }) => {
   let editingComponent = null;
   if (editing) {
-    let inputNode = <InputDebounce />;
+    let inputNode = <InputDebounce onPressEnter={() => { onPressEnter?.() }} />;
 
     if (inputType === 'check') {
       inputNode = <Checkbox />;
@@ -256,11 +257,6 @@ export const ImportActionTable = (props) => {
 
   const [ form ] = Form.useForm();
   const [ editingKey, setEditingKey ] = useState('');
-  const [ loadingSuggest, setLoadingSuggest ] = useState(false);
-  const [ suggests, setSuggests ] = useState([]);
-  const [ suggestHaveMore, setSuggestHaveMore ] = useState(false);
-  const [ suggestOffset, setSuggestOffset ] = useState(1);
-  const [ currentChangedValues, setCurrentChangedValues] = useState({});
   const [ englishSuggests, setEnglishSuggests ] = useState([]);
   const [ keywordCondition, setKeywordCondition ] = useState({ keyword: '', needFilter: true });
   const { keyword, needFilter } = keywordCondition;
@@ -271,6 +267,12 @@ export const ImportActionTable = (props) => {
   const { pageNum, pageSize, filterData } = filterPageCondition;
   const [ insertIndex, setInsertIndex ] = useState(0);
   const [ currentItem, setCurrentItem ] = useState(null);
+  const [suggestParams, setSuggestParams] = useState({
+    visible: false,
+    name: undefined,
+    cnName: undefined,
+    triggerType: undefined,
+  })
 
   const { attrIsEditingFunction } = useContext(EditModelContext);
 
@@ -837,7 +839,6 @@ export const ImportActionTable = (props) => {
         }
 
         setEditingKey('');
-        setSuggests([]);
         setEnglishSuggests([]);
       }
 
@@ -858,70 +859,6 @@ export const ImportActionTable = (props) => {
       ownPrimaryKey = (modelerData.easyDataModelerPrimaryKey.filter(item => item.name===allValues.name).length>0);
     }
 
-    if (changedValues.hasOwnProperty('cnName') || changedValues.hasOwnProperty('name')) {
-
-      if (offset === 1) {
-        setSuggests([]);
-      }
-
-      const newData = [...data];
-      const index = newData.findIndex((item) => iid === item.iid);
-
-      if (index === -1) {
-        newData.splice(0, 0, { iid, ...allValues});
-      } else if (index !== -1) {
-        const item = newData[index];
-        newData.splice(index, 1, { ...item, ...allValues });
-      }
-
-      setSuggestHaveMore(false);
-      setCurrentChangedValues(changedValues);
-
-      function getSuggest() {
-        setLoadingSuggest(true);
-        dispatchLatest({
-          type: 'datamodel.suggest',
-          payload: {
-            params: {
-              name: allValues.name||'',
-              cnName: allValues.cnName||'',
-              topN: (offset+perSuggestCount-1),
-              offset
-            }
-          },
-          callback: data => {
-            setLoadingSuggest(false);
-
-            if (changedValues.hasOwnProperty('cnName')) {
-  
-              const moreSuggests = (data||[]).length>0?(data[0].suggestions||[]):[];
-              const newSuggests = (offset===1 ? moreSuggests : [...suggests, ...moreSuggests]);
-  
-              if (moreSuggests.length === perSuggestCount) {
-                setSuggestHaveMore(true);
-              }
-  
-              setSuggestOffset(newSuggests.length+1);
-              setSuggests(newSuggests);
-  
-            } else if (changedValues.hasOwnProperty('name')) {
-              const moreSuggests = (data||[]).length>1?(data[1].suggestions||[]):[];
-              const newSuggests = (offset===1 ? moreSuggests : [...suggests, ...moreSuggests]);
-  
-              if (moreSuggests.length === perSuggestCount) {
-                setSuggestHaveMore(true);
-              }
-  
-              setSuggestOffset(newSuggests.length+1);
-              setSuggests(newSuggests);
-            }
-          },
-          error: () => {
-            setLoadingSuggest(false);
-          }
-        })
-      }
-
     if (changedValues.hasOwnProperty('cnName')) {
       if (autoTranslateRef.current) {
         dispatchLatest({
@@ -935,17 +872,11 @@ export const ImportActionTable = (props) => {
             if ((data?.translated||'') !== '') {
               form.setFieldsValue({ name: data?.translated||'' });
             }
-              getSuggest();
           }
         })
-        } else {
-          getSuggest();
       } 
     } else if (changedValues.hasOwnProperty('name')) {
       autoTranslateRef.current(changedValues.name==='');
-        getSuggest();
-      }
-
     } else if(changedValues.hasOwnProperty('notNull') ) {
       if (!changedValues.notNull && ownPrimaryKey) {
         showMessage('info', '主键不允许为空');
@@ -965,10 +896,26 @@ export const ImportActionTable = (props) => {
     form.setFieldsValue({ 
       ...restRecord
     });
-
-    setSuggests([]);
   };
 
+  const onColumnPressEnter = (title) => {
+    if (title === '中文名称') {
+      setSuggestParams({
+        visible: true,
+        name: form?.getFieldValue('name'),
+        cnName: form?.getFieldValue('cnName'),
+        triggerType: 'cnName',
+      })
+    } else if (title === '英文名称') {
+      setSuggestParams({
+        visible: true,
+        name: form?.getFieldValue('name'),
+        cnName: form?.getFieldValue('cnName'),
+        triggerType: 'name',
+      })
+    }
+  }
+
   const mergedColumns = () => {
     if (editable) {
       const _columns = cols.map((col) => {
@@ -1004,7 +951,10 @@ export const ImportActionTable = (props) => {
             colTitle: col.title,
             editing: isEditing(record),
             datatypes: supportedDatatypes,
-            require: col.require
+            require: col.require,
+            onPressEnter: () => {
+              onColumnPressEnter(col.title)
+            }
           }),
         };
       });
@@ -1049,20 +999,6 @@ export const ImportActionTable = (props) => {
     setKeywordCondition({ keyword: value||'', needFilter: true });
   }
 
-  const loadMoreSuggests = (event) => {
-    event.stopPropagation();
-
-    onValuesChange(currentChangedValues, form.getFieldsValue(), suggestOffset);
-  }
-
-  const closeSuggests = (event) => {
-    event.stopPropagation();
-
-    setSuggestHaveMore(false);
-    setSuggests([]);
-    setSuggestOffset(1);
-  }
-
   const displayMenu = (e) => {
     show(e);
   }
@@ -1232,34 +1168,6 @@ export const ImportActionTable = (props) => {
                   //解决屏幕尺寸窄时,字段不好横向拖动的问题
                   y: tableWidth>1500?'100%':630,
                 }}
-                expandable={{
-                  columnWidth: 0,
-                  expandedRowRender: record => (
-                    <React.Fragment>
-                    {
-                      editingKey!=='' && <React.Fragment>
-                      {
-                        suggests && suggests.length>0 && (
-                          <SuggestTable suggests={suggests} onSelect={onSuggestChange} />
-                        )
-                      }
-                      </React.Fragment>
-                    }
-                    <div className='flex pt-3' style={{ justifyContent: 'center' }}>
-                      <Tooltip title={!suggestHaveMore?'没有更多推荐字段': ''}>
-                        <Button onClick={loadMoreSuggests} disabled={!suggestHaveMore} loading={loadingSuggest}>加载更多</Button>
-                      </Tooltip>
-                      <Button className='ml-3' onClick={closeSuggests}>收起推荐</Button>
-                    </div> 
-
-                    </React.Fragment>
-                  ),
-                  expandIcon: ({ expanded, onExpand, record }) => {
-                    return null;
-                  },
-                  rowExpandable: record => (editingKey!==''&&((suggests||[]).length>0 || (englishSuggests||[]).length>0)),
-                  expandedRowKeys: [editingKey]
-                }}
               />
             </Form>
           </DndProvider>
@@ -1284,6 +1192,21 @@ export const ImportActionTable = (props) => {
           />
         }
 
+        <div onClick={(e) => { e.stopPropagation() }}>
+          <Suggest 
+            {...suggestParams}
+            onCancel={() => {
+              setSuggestParams({
+                visible: false,
+                name: undefined,
+                cnName: undefined,
+                triggerType: undefined,
+              })
+            }}
+            onOk={onSuggestChange}
+          />
+        </div>
+
         <RcMenu id={MENU_ID} >
           {
             (menuData??[]).map(item => (

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

-.suggest-table {
-  .yy-table {
-    margin: 0 !important;
-    max-height: 300px !important;
-    overflow: auto !important;
-  }
-}
\ No newline at end of file