修改bu gbug

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

@@ -10,6 +10,12 @@ export default (triggerMs = 0) => {
         this.state.value = props.value;
       }
 
+      componentDidUpdate(preProps, preState) {
+        if (preProps.value !== this.props.value) {
+          this.setState({ value: this.props.value });
+        }
+      }
+
       onChange = (() => {
         let updb = this.props.onChange;
         if (triggerMs >= 0) {

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

@@ -4,11 +4,15 @@ import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Checkbox } f
 import { highlightSearchContentByTerms, generateUUID } from '../../../../util';
 import { dispatchLatest } from '../../../../model'; 
 
+import DebounceInput from './DebounceInput';
+
 import './ImportActionHeader.less';
 
 const { TextArea } = Input;
 const { Option } = Select;
 
+const InputDebounce = DebounceInput(300)(Input);
+
 const loadOptions = ['append', 'refresh', 'insert', 'update', 'full', 'chain', 'delete', '手工导入'];
 const updateOptions = [
   '每个交易日早间交易前加载上一交易日数据,历史资料入历史表',
@@ -501,7 +505,7 @@ const ImportActionHeader = (props) => {
                 labelAlign="left"
                 rules={[{ required: true, message: '请输入中文名称!' }]}
               >
-                <Input style={{ width: 300 }} />
+                <InputDebounce style={{ width: 300 }} />
               </Form.Item>
             </Col>
             <Col span={8}>

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

@@ -7,6 +7,7 @@ import update from 'immutability-helper';
 import { useClickAway } from 'ahooks';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 
+import DebounceInput from './DebounceInput';
 import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help';
 import { showMessage, highlightSearchContentByTerms, inputWidth } from '../../../../util';
 
@@ -15,6 +16,8 @@ const { Option } = Select;
 const type = 'DragableIndexBodyRow';
 const MENU_ID = 'model-index-menu';
 
+const InputDebounce = DebounceInput(300)(Input);
+
 const AttributesInputItem = ({ indexedAttribute = null, indexedAttributeOrder = null, attributes, onAttributeChange, onOrderChange, onDelete , className }) => {
 
   return (
@@ -282,7 +285,8 @@ const ImportActionIndex = (props) => {
 
   const [ form ] = Form.useForm();
   const [ editingKey, setEditingKey ] = useState(null);
-  const [ keyword, setKeyword ] = useState('');
+  const [ keywordCondition, setKeywordCondition ] = useState({ keyword: '', needFilter: true });
+  const { keyword, needFilter } = keywordCondition;
 
   const [ filterData, setFilterData ] = useState([]);
   const [ insertIndex, setInsertIndex ] = useState(0);
@@ -325,7 +329,24 @@ const ImportActionIndex = (props) => {
 
     setFilterData(__filterData);
 
-  }, [modelerData, keyword])
+  }, [modelerData])
+
+  useEffect(() => {
+    if (needFilter) {
+      const _filterData = (modelerData.easyDataModelerIndices||[]).filter(item => (item.name||'').indexOf(keyword)!==-1);
+
+      const __filterData = [];
+      (_filterData||[]).forEach(item => {
+  
+        __filterData.push({...item, ...{ attributesWithOrders: {
+          indexedEasyDataModelAttributes: item.indexedEasyDataModelAttributes||[],
+          indexedAttributeOrders: item.indexedAttributeOrders||[],
+        } }});
+      })
+  
+      setFilterData(__filterData);
+    }
+  }, [keywordCondition])
   
   const isEditing = (record) => record.name === editingKey;
 
@@ -334,6 +355,9 @@ const ImportActionIndex = (props) => {
 
     save().then(result => {
       if (result) {
+
+        setKeywordCondition({ keyword: '', needFilter: false });
+
         const newData = [...dataRef.current, {name: ''}];
 
         setFilterData(newData);    
@@ -347,6 +371,8 @@ const ImportActionIndex = (props) => {
     save().then(result => {
 
       if (result) {
+        setKeywordCondition({ keyword: '', needFilter: false });
+
         let newData = [...dataRef.current];
 
         const index = newData.findIndex((item) => record.name === item.name);
@@ -381,6 +407,8 @@ const ImportActionIndex = (props) => {
   const insertToBack = (record) => {
     save().then(result => {
       if (result) {
+        setKeywordCondition({ keyword: '', needFilter: false });
+
         const newData = [...dataRef.current];
         const index = newData.findIndex((item) => record.name === item.name);
 
@@ -768,9 +796,9 @@ const ImportActionIndex = (props) => {
     [dataRef.current],
   );
 
-  const onSearchInputChange = (e) => {
+  const onSearchInputChange = (value) => {
     setEditingKey(null);
-    setKeyword(e.target.value||'');
+    setKeywordCondition({ keyword: value||'', needFilter: true });
   }
 
   const displayMenu = (e) => {
@@ -805,7 +833,7 @@ const ImportActionIndex = (props) => {
             </Tooltip>
           }
           <div className='d-flex' style={{ alignItems: 'center' }}>
-            <Input 
+            <InputDebounce 
               placeholder="请输入索引名称" 
               allowClear 
               value={keyword}

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

@@ -249,7 +249,9 @@ const ImportActionTable = (props) => {
   const [ suggestOffset, setSuggestOffset ] = useState(1);
   const [ currentChangedValues, setCurrentChangedValues] = useState({});
   const [ englishSuggests, setEnglishSuggests ] = useState([]);
-  const [ keyword, setKeyword ] = useState('');
+  const [ keywordCondition, setKeywordCondition ] = useState({ keyword: '', needFilter: true });
+  const { keyword, needFilter } = keywordCondition;
+
   const [ autoTranslate, setAutoTranslate ] = useState(false);
 
   const [ filterPageCondition, setFilterPageCondition ] = useState({ pageNum: 1, pageSize: supportMaxAttributeCountPerPage, filterData: [] });
@@ -284,22 +286,17 @@ const ImportActionTable = (props) => {
 
     setFilterPageCondition({...filterPageCondition, filterData: _filterData});
 
-    if (_filterData.length > supportMaxAttributeCountPerPage) {
-      const _filterPageData = paginate(_filterData, pageNum, pageSize);
-      setFilterPageData(_filterPageData);
-    } else {
-      setFilterPageData(_filterData);
-    }
-
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modelerData])
 
   useEffect(() => {
-    let _filterData = (modelerData.easyDataModelerDataModelAttributes||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
+    if (needFilter) {
+      let _filterData = (modelerData.easyDataModelerDataModelAttributes||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
 
-    setFilterPageCondition({...filterPageCondition, ...{filterData: _filterData, pageNum: 1} });
+      setFilterPageCondition({...filterPageCondition, ...{filterData: _filterData, pageNum: 1} });
+    }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyword])
+  }, [keywordCondition])
 
   useEffect(() => {
     moveRowRef.current.pageNum = pageNum;
@@ -329,6 +326,9 @@ const ImportActionTable = (props) => {
 
     save().then(result => {
       if (result) {
+
+        setKeywordCondition({ keyword: '', needFilter: false });
+
         const iid = generateUUID();
         const newData = [...moveRowRef.current.data, {iid}];
         
@@ -354,6 +354,8 @@ const ImportActionTable = (props) => {
   const insertToFront = (record) => {
     save().then(result => {
       if (result) {
+        setKeywordCondition({ keyword: '', needFilter: false });
+
         let newData = [...moveRowRef.current.data];
         const index = newData.findIndex((item) => record.iid === item.iid);
 
@@ -369,7 +371,13 @@ const ImportActionTable = (props) => {
           edit(newData[index], false);
         }
 
-        setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
+        const _pageNum = parseInt((index+1)/supportMaxAttributeCountPerPage) + (((index+1)%supportMaxAttributeCountPerPage===0)?0:1);
+
+        setFilterPageCondition({...filterPageCondition, ...{ filterData: newData, pageNum: _pageNum}});
+
+        setTimeout(() => {
+          document.getElementById(`field-${iid}`)?.scrollIntoView();
+        }, 200)
       }
     })
   }
@@ -377,15 +385,24 @@ const ImportActionTable = (props) => {
   const insertToBack = (record) => {
     save().then(result => {
       if (result) {
+        setKeywordCondition({ keyword: '', needFilter: false });
+
         const newData = [...moveRowRef.current.data];
         const index = newData.findIndex((item) => record.iid === item.iid);
 
         const iid = generateUUID();
         newData.splice(index+1, 0, {iid});
-        setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
+
+        const _pageNum = parseInt((index+2)/supportMaxAttributeCountPerPage) + (((index+2)%supportMaxAttributeCountPerPage===0)?0:1);
+
+        setFilterPageCondition({...filterPageCondition, ...{ filterData: newData, pageNum: _pageNum}});
         
         setInsertIndex(index+1);
         edit(newData[index+1], false);
+
+        setTimeout(() => {
+          document.getElementById(`field-${iid}`)?.scrollIntoView();
+        }, 200)
       }
     })
   }
@@ -623,6 +640,7 @@ const ImportActionTable = (props) => {
 
   const onSuggestChange = (e) => {
 
+    form.resetFields();
     form.setFieldsValue({ 
       ...suggests[e.target.value]
     });
@@ -1074,7 +1092,8 @@ const ImportActionTable = (props) => {
 
   const onSearchInputChange = (value) => {
     setEditingKey('');
-    setKeyword(value||'');
+
+    setKeywordCondition({ keyword: value||'', needFilter: true });
   }
 
   const sourceOnClick = (id) => {
@@ -1098,7 +1117,9 @@ const ImportActionTable = (props) => {
     }
   }
 
-  const loadMoreSuggests = () => {
+  const loadMoreSuggests = (event) => {
+    event.stopPropagation();
+
     onValuesChange(currentChangedValues, form.getFieldsValue(), suggestOffset);
   }
 
@@ -1212,31 +1233,31 @@ const ImportActionTable = (props) => {
                       suggests && suggests.length>0 && (
                         <React.Fragment>
                         {/* <Divider orientation="left">智能推荐</Divider> */}
-                        <Radio.Group onChange={onSuggestChange} className='mb-3 ml-7'>
-                        {
-                          suggests && suggests.map((suggest, index) => {
-                            return (
-                              <Radio key={index} value={index} className='mt-3' style={{ display: 'block' }}>
-                              {`中文名称: ${suggest.cnName||''}`}
-                              {` 英文名称: ${suggest.name||''}`}
-                              {` 描述: ${suggest.remark||''}`}
-                              {' 匹配度: '}
-                              <span style={{ color: '#f50' }}>{`${suggest.recommendedStats?.score}%`}</span>
-                              { index===0 && <span style={{ color: '#f50' }}> 推荐</span> }
-                              {` 使用次数: ${suggest.recommendedStats?.referencesCount}`}
-                              {' 来源: '} 
-                              <a 
-                                href='#' 
-                                onClick={() => {
-                                  sourceOnClick(suggest.recommendedStats?.idInSource||'');
-                                }}
-                              >
-                              {`${suggest.recommendedStats?.pathInSource||''}`}</a>
-                              </Radio>
-                            )
-                          })
-                        }
-                        </Radio.Group>
+                          <Radio.Group onChange={onSuggestChange} className='mb-3 ml-7'>
+                          {
+                            suggests && suggests.map((suggest, index) => {
+                              return (
+                                <Radio key={index} value={index} className='mt-3' style={{ display: 'block' }}>
+                                {`中文名称: ${suggest.cnName||''}`}
+                                {` 英文名称: ${suggest.name||''}`}
+                                {` 描述: ${suggest.remark||''}`}
+                                {' 匹配度: '}
+                                <span style={{ color: '#f50' }}>{`${suggest.recommendedStats?.score}%`}</span>
+                                { index===0 && <span style={{ color: '#f50' }}> 推荐</span> }
+                                {` 使用次数: ${suggest.recommendedStats?.referencesCount}`}
+                                {' 来源: '} 
+                                <a 
+                                  href='#' 
+                                  onClick={() => {
+                                    sourceOnClick(suggest.recommendedStats?.idInSource||'');
+                                  }}
+                                >
+                                {`${suggest.recommendedStats?.pathInSource||''}`}</a>
+                                </Radio>
+                              )
+                            })
+                          }
+                          </Radio.Group>
                         </React.Fragment>
                       )
                     }