增加模型字段搜索

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

@@ -217,14 +217,24 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
 const ImportActionTable = (props) => {
   const { modelerData, onChange, editable, supportedDatatypes, constraint, template, validateReports } = props;
   const data = modelerData.easyDataModelerDataModelAttributes||[];
-  const [form] = Form.useForm();
-  const [editingKey, setEditingKey] = useState('');
-  const [suggests, setSuggests] = useState([]);
+
+  const [ form ] = Form.useForm();
+  const [ editingKey, setEditingKey ] = useState('');
+  const [ suggests, setSuggests ] = useState([]);
+  const [ keyword, setKeyword ] = useState('');
+
+  const [ filterData, setFilterData ] = useState([]);
 
   //规则改变的时候 数据表为可编辑状态
   useEffect(() => {
     setEditingKey('');
   }, [constraint, template])
+
+  useEffect(() => {
+
+    setFilterData((modelerData.easyDataModelerDataModelAttributes||[]||[]).filter(item => (item.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1));
+
+  }, [modelerData, keyword])
   
   const isEditing = (record) => record.iid === editingKey;
 
@@ -518,7 +528,12 @@ const ImportActionTable = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
     [data],
   );
-  
+
+  const onSearchInputChange = (e) => {
+    setEditingKey('');
+    setKeyword(e.target.value||'');
+  }
+
   return (
     <div className='model-import-action-table'>
       <Divider>
@@ -532,30 +547,37 @@ const ImportActionTable = (props) => {
         }
         </>
       </Divider>
-      {
-        editable && <div className='d-flex mb-3'>
-          <Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button>
-        </div>
-      }
+      <div className='d-flex mb-3'>
+        <Input 
+          placeholder="请输入中文名称或者英文名称" 
+          allowClear 
+          value={keyword}
+          onChange={onSearchInputChange} 
+          style={{ width: 240, marginLeft: 'auto' }}
+        />
+        { 
+          editable && <Button className='ml-3' type="primary" onClick={onAddClick}  disabled={ editingKey!=='' || keyword!=='' } >新增行</Button>
+        }
+      </div>
       <DndProvider backend={HTML5Backend} >
         <Form form={form} component={false} onValuesChange={onValuesChange}>
           <Table
             components={{
               body: {
                 cell: EditableCell,
-                //编辑状态下不允许拖动
-                row: (editable&&editingKey==='')?DragableBodyRow:null,
+                //编辑或者搜索状态下不允许拖动
+                row: (editable&&editingKey===''&&keyword==='')?DragableBodyRow:null,
               },
             }}
             onRow={(record, index) => {
-              if (!editable || editingKey!=='') return null;
+              if (!editable || editingKey!=='' || keyword.length>0) return null;
 
               return {
                 index,
                 moveRow
               }
             }}
-            dataSource={data||[]}
+            dataSource={filterData||[]}
             columns={mergedColumns()}
             size='small'
             rowKey='iid'

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

 .model-import-action-table {
+
+  .yy-table {
+    max-height: 500px !important;
+    overflow: auto !important;
+  }
+
   .yy-table-expanded-row {
     .yy-radio-wrapper {
       white-space: normal !important;