修改诊断搜索

src/components/DiagResultSearch/index.jsx

@@ -3,29 +3,20 @@ import style from './index.less';
 import close from './img/close.png'
 import search from './img/search.png'
 import DiagnosticItem from '@containers/DiagnosticItem'
+import { SearchOption} from '@commonComp';
 import config from '@config/index';
 import $ from 'jquery';
 class DiagResultSearch extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            showClose: false,
-            focus: true,
-            timer:null
+           
         };
-        this.searchInput = React.createRef();
-        this.handleInput = this.handleInput.bind(this);
-        this.clearInput = this.clearInput.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
-        this.handleBlur = this.handleBlur.bind(this);
+      
+        this.getSearchList =  this.getSearchList.bind(this)
 
     }
-    componentWillReceiveProps(){
-        const { searchResult, clearSearchResult } = this.props;
-        this.setState({focus: true})
-        if( searchResult && searchResult.length > 0) {
-            clearSearchResult();//清除上次搜索结果
-        }
+    componentWillReceiveProps(nextProps){
     }
     componentDidMount () {
         const that = this
@@ -38,10 +29,6 @@ class DiagResultSearch extends Component {
                     
                 } else {
                     if (e.target!= diagSearch && e.target!= addDiag && e.target.parentNode!= addDiag && !$.contains(diagSearch, e.target) ) {
-                        that.setState({
-                            showSearch: !that.props.showSearch
-                        });
-                        that.clearInput()
                         that.props.hideSearch();
                     }
 
@@ -53,63 +40,29 @@ class DiagResultSearch extends Component {
         })
     }
 
-    handleInput(value) {
-        const {  setSearchValue, getSearchResult } = this.props;
-        value.length > 0 ? this.setState({showClose: true}) : this.setState({showClose: false});
-        clearTimeout(this.state.timer);
-        let timer = setTimeout(()=>{
-            clearTimeout(this.state.timer);
-          if(value.trim() == ''){
-            return  getSearchResult('');
-          }
-          getSearchResult(value.trim());
-        },config.delayTime);
-        this.setState({
-          timer
-        });
-    }
-    clearInput() {
-        const {  setSearchValue, getSearchResult } = this.props;
-        this.searchInput.current.value = '';
-        getSearchResult('');
-        this.setState({showClose: false})
-    }
-
-    handleFocus() {
-        this.setState({focus: true})
-    }
-    handleBlur() {
-        this.setState({focus: false})
+    getSearchList(searchResult) {
+        return <div className={style['search-result']}>
+                    
+        {
+            searchResult && searchResult.map((item) => {
+                return(<div  key={item.id} className={style['search-result-item']}><DiagnosticItem title={true} item={item} clearInput={this.clearInput}/></div>)
+            })
+        }
+    </div>
     }
    
     render(){
-        const { showClose } = this.state
-        const  { show, searchResult, getSearchResult } = this.props
+        const  { show, searchResult, getSearchResult, handleChangeValue } = this.props
+       
         return(
-            show && <div id='diagSearch' className={style['search-box']}>
-                <div className={style['search']}>
-                    <input ref={this.searchInput} 
-                        type="text" 
-                        placeholder='搜索'
-                        onFocus={this.handleFocus}
-                        onBlur = {this.handleBlur}
-                        className={style['search-input']}   
-                        style = {this.state.focus ? {border: '1px solid #3B9ED0'} :{border: '1px solid #979797'}}
-                        onInput={(e)=>this.handleInput(e.target.value)}
-                        onPropertyChange={(e)=>this.handleInput(e.target.value)} 
-                        />
-                    <img  className={style['search-img']} src={search} alt="搜索"/>
-                     <img className={style['search-close']} onClick={this.clearInput} style={showClose ? '': {display: 'none'}} src={close} alt=""/>
-                </div>
-                <div className={style['search-result']}>
-                    {
-                        searchResult && searchResult.map((item) => {
-                            return(<div  key={item.id} className={style['search-result-item']}><DiagnosticItem title={true} item={item} clearInput={this.clearInput}/></div>)
-                        })
-                    }
-                </div>
+            show&&<div id='diagSearch' className={style['search-box']}>
+                <SearchOption handleChangeValue={handleChangeValue} visible={true}>
+                    {this.getSearchList(searchResult)}
+                </SearchOption>
             </div>
         )
+       
+       
     }
 }
 

src/components/DiagResultSearch/index.less

@@ -1,51 +1,48 @@
 @import "~@less/variables.less";
 .search-box {
     position: absolute;
+    top: 30px;
     width: 316px;
     margin: 0 10px 10px;
-    padding: 0 8px;
     // box-shadow: 0 6px 20px 0 #989DA3;
     background: #fff;
     z-index: 99;
     margin-bottom: 80px;
-    .llStyle;
     
 }
-.search {
-    width: 100%;
-    position: relative;
-    height: 44px;
-    padding: 10px 0px 0px 0px;
-}
-.search-input {
-    width: 300px;
-    height: 34px;
-    line-height: 34px;
-    position: relative;
-    padding: 0  30px;
-}
-.search-btn {
-    position: absolute;
-    right: 0;
-}
-.search-close {
-    position: absolute;
-    top: 17px;
-    right: 5px;
-    cursor: pointer;
+// .search {
+//     width: 100%;
+//     position: relative;
+//     height: 44px;
+//     padding: 10px 0px 0px 0px;
+// }
+// .search-input {
+//     width: 300px;
+//     height: 34px;
+//     line-height: 34px;
+//     position: relative;
+//     padding: 0  30px;
+// }
+// .search-btn {
+//     position: absolute;
+//     right: 0;
+// }
+// .search-close {
+//     position: absolute;
+//     top: 17px;
+//     right: 5px;
+//     cursor: pointer;
     
-}
-.search-img {
-    position: absolute;
-    top: 17px;
-    left: 5px;
-    cursor: pointer;
-}
+// }
+// .search-img {
+//     position: absolute;
+//     top: 17px;
+//     left: 5px;
+//     cursor: pointer;
+// }
 
 .search-result {
     max-height: 266px;
-    min-height: 80px;
-    overflow-y: auto;
 }
 
 .search-result-item {

src/containers/DiagResultSearch.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { SHOW_SEARCH,  HIDE_SEARCH, GET_SEARCH_RESULT } from '@store/types/diagnosticSearch';
-import { getSearchResult } from '@store/async-actions/diagnosticSearch';
+import { getSearchResult, getSearchList } from '@store/async-actions/diagnosticSearch';
 import DiagResultSearch from '@components/DiagResultSearch';
 
 function mapStateToProps(state) {
@@ -30,8 +30,8 @@ function mapDispatchToProps(dispatch) {
                 searchResult: []
             })
         },
-        getSearchResult:(value)=>{
-            dispatch(getSearchResult(value))
+        handleChangeValue: (val)=>{
+            dispatch(getSearchList(val))
         }
     }
 }

src/store/async-actions/diagnosticSearch.js

@@ -1,66 +1,31 @@
 import { json } from "@utils/ajax";
-import { GET_SEARCH_RESULT, SET_SEARCH_VALUE } from '@store/types/diagnosticSearch';
+import { GET_SEARCH_RESULT } from '@store/types/diagnosticSearch';
 
-export const getSearchResult = (value) =>{
-    
+
+export const getSearchList = (val) => {
+    if(val.trim() == ''){
+        const data = [];
+        return (dispatch) =>  dispatch({
+            type: GET_SEARCH_RESULT,
+            searchResult: []
+        })
+    }
+   
     return (dispatch, getState) => {
         const state = getState();
-        const url = '/api/icss/retrieval/getTagInfos'
-        const param={
-            type: 7,
-            age: state.patInfo.message.patientAge,
-            inputStr: value,
+        json('/api/icss/retrieval/getTagInfos',{
+            type:'6',
+            age:state.patInfo.message.patientAge,
+            inputStr:val,
             sexType: state.patInfo.message.sex
-        }
-        if(value === state.diagnosticSearch.searchValue) {
-            return
-        } else {
+        })
+        .then((res)=>{
+            const data = res.data.data;
             dispatch({
-                type: SET_SEARCH_VALUE,
-                searchValue: value
-            })
-            //如果搜索值为空，则直接将搜索结果设为空
-            if(value === '') {
-                dispatch({
-                    type: GET_SEARCH_RESULT,
-                    searchResult: []
-                })
-                return
-            }
-            json(url, param).then((data)=>{
-                const searchRes = data.data.data;
-                const diagList = state.diagnosticList.diagnosticList;
-                let searchResult = [];
-                if(searchRes) {
-                    for(let i = 0; i < searchRes.length; i++) {
-                        let repeat = false;
-                        for (let j = 0; j < diagList.length; j++) {
-                            if(searchRes[i].questionId === diagList[j].id) {
-                                repeat = true;
-                            } 
-                        }
-                        if(!repeat) {
-                            searchResult.push(searchRes[i])
-                        }
-                    }
-                    dispatch({
-                        type: GET_SEARCH_RESULT,
-                        searchResult: searchResult
-                    })
-                } else {
-                    dispatch({
-                        type: GET_SEARCH_RESULT,
-                        searchResult: []
-                    })
-                }
-               
-            }).catch((e)=>{
-                console.log(e)
+                type: GET_SEARCH_RESULT,
+                searchResult: data
             })
-
-
-        }
-        
+        })
     }
+};
 
-}