模型增加搜索

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

@@ -232,7 +232,7 @@ const ImportActionTable = (props) => {
 
   useEffect(() => {
 
-    setFilterData((modelerData.easyDataModelerDataModelAttributes||[]||[]).filter(item => (item.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1));
+    setFilterData((modelerData.easyDataModelerDataModelAttributes||[]).filter(item => (item.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1));
 
   }, [modelerData, keyword])
   

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

@@ -11,6 +11,7 @@ const ModelTable = (props) => {
   const { data, onChange, loading, onItemAction, onSelect, catalogId } = props;
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
 
+
   const [modal, contextHolder] = Modal.useModal();
 
   useEffect(() => {

src/view/Manage/Model/index.jsx

 import React from 'react';
-import { Row, Col, Button } from 'antd';
+import { Row, Col, Button, Input } from 'antd';
 
 import ModelTree from './Component/ModelTree';
 import ModelTable from './Component/ModelTable';
@@ -18,15 +18,17 @@ class Model extends React.Component {
       catalogId: '',
       importModalAction: '',
       tableData: [],
+      filterTableData: [],
       loadingTableData: false, 
       selectModelerIds: [],
+      keyword: '',
     }
   }
 
   onTreeSelect = (key) => {
-    this.setState({ catalogId: key, selectModelerIds: [] }, () => {
+    this.setState({ catalogId: key, selectModelerIds: [], keyword: '' }, () => {
       if (!key || key==='') {
-        this.setState({ tableData: [] });
+        this.setState({ tableData: [], filterTableData: [] });
       } else {
         this.onTableChange();
       }
@@ -43,7 +45,9 @@ class Model extends React.Component {
           easyDataModelerCatalogId: catalogId
         },
         callback: data => {
-          this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[] });
+          this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[] }, () => {
+            this.setFilterData();
+          });
         },
         error: () => {
           this.setState({ loadingTableData: false });
@@ -60,6 +64,21 @@ class Model extends React.Component {
     this.setState({ importModalVisible: true, importModalAction: action, modelerId: id });
   }
 
+  onSearchInputChange = (e) => {
+    this.setState({ keyword: e.target.value||'' }, () => {
+      this.setFilterData();
+    });
+  }
+
+  setFilterData = () => {
+    const { keyword, tableData } = this.state;
+
+    const _filterData = (tableData||[]).filter(item => (item.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
+
+    this.setState({ filterTableData: _filterData });
+
+  }
+
   onImportBtnClick = () => {
     const { catalogId } = this.state;
     if (!catalogId || catalogId==='') {
@@ -94,7 +113,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData, loadingTableData, modelerId, selectModelerIds } = this.state;
+    const { importModalVisible, exportModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData } = this.state;
 
     return (
       <div style={{ backgroundColor: '#ECEEF3' }}>
@@ -113,12 +132,19 @@ class Model extends React.Component {
                   borderBottom: "1px solid #EFEFEF",
                 }}
               >
+                 <Input 
+                    placeholder="请输入模型名称或者英文名称" 
+                    allowClear 
+                    value={keyword}
+                    onChange={this.onSearchInputChange} 
+                    style={{ width: 240, marginLeft: 'auto' }}
+                  />
                 {/* <Button type="primary" style={{ marginLeft: 'auto' }}>提交审核</Button> */}
-                <Button type="primary" className='ml-3' style={{ marginLeft: 'auto' }}  onClick={this.onImportBtnClick}>模型创建</Button>
+                <Button type="primary" className='ml-3' onClick={this.onImportBtnClick}>模型创建</Button>
                 <Button type="primary" className='ml-3' onClick={this.onExportBtnClick}>模型导出</Button>
               </div>
               <div className='p-3'>
-                <ModelTable loading={loadingTableData} catalogId={catalogId} data={tableData} onChange={this.onTableChange} onSelect={this.onTableSelect} onItemAction={this.onTableItemAction} />
+                <ModelTable loading={loadingTableData} catalogId={catalogId} data={filterTableData} onChange={this.onTableChange} onSelect={this.onTableSelect} onItemAction={this.onTableItemAction} />
               </div>
             </div>
           </Col>