医学知识搜索添加类型筛选

src/components/MedicalInfo/Filters/index.jsx

@@ -0,0 +1,31 @@
+import React, {Component} from "react";
+import style from './index.less';
+import checkOnIcon from '@common/images/check_on.png';
+import checkOffIcon from '@common/images/check_off.png';
+
+class Filters extends Component {
+  constructor(props) {
+    super(props);
+  }
+  drawItem(){
+    const {data,checkeds,handleCheck} = this.props;
+    let isChecked=false;
+    return data.map((it)=>{
+      isChecked = checkeds.includes(it.val);
+      return <span onClick={()=>handleCheck(it.val)}>
+                  <img src={isChecked?checkOnIcon:checkOffIcon} alt=""/>
+                  {it.name}
+                </span>
+    })
+  }
+  render() {
+    return <div className={style["filters"]}>
+              {this.drawItem()}
+            </div>
+
+
+
+  }
+}
+
+export default Filters;

src/components/MedicalInfo/Filters/index.less

@@ -0,0 +1,13 @@
+.filters{
+  width: 380px;
+  margin-top:10px;
+  img{
+    vertical-align: text-bottom;
+    margin-right: 3px;
+  }
+  span{
+    cursor: pointer;
+    font-size: 12px;
+    margin:0 20px 4px 0;
+  }
+}

src/components/MedicalInfo/index.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import style from './index.less';
 import delIcon from '@common/images/del_nor.png';
 import {windowEventHandler,getCurrentDate,getWindowInnerHeight} from '@utils/tools'
+import Filters from './Filters';
 
 class MedicalInfo extends Component {
     constructor(props) {
@@ -12,13 +13,15 @@ class MedicalInfo extends Component {
         this.state={
           val:'',
           hasSearch: false,
-          msg:''
+          msg:'',
+          typeChecks:['0'],
         };
         this.search = this.search.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.clear = this.clear.bind(this);
         this.getSearchList = this.getSearchList.bind(this);
         this.handleEnter = this.handleEnter.bind(this);
+        this.handleTypeCheck = this.handleTypeCheck.bind(this);
     }
     getSearchList() {
         const { getAllConceptDetail,searchResult } = this.props;
@@ -48,7 +51,7 @@ class MedicalInfo extends Component {
       }
       const {handleChangeValue} = this.props;
       const val = this.$inp.current.value;
-      handleChangeValue&&handleChangeValue(val);
+      handleChangeValue&&handleChangeValue(val,this.state.typeChecks);
     }
   handleChange(){
     const value = this.$inp.current.value;
@@ -82,9 +85,30 @@ class MedicalInfo extends Component {
       this.$inp.current.focus();
       clearResult&&clearResult();
   }
+  handleTypeCheck(val){
+    let {typeChecks} = this.state;
+    //const allChecked = typeChecks.includes('0');
+    const alli = typeChecks.findIndex((it)=>it==='0');
+    const allChecked = alli!==-1;
+    if(val==='0'){      //全部与其他互斥
+      !allChecked?typeChecks=['0']:typeChecks.splice(alli,1);
+    }else{
+      allChecked&&typeChecks.splice(alli,1);
+      if(!typeChecks.includes(val)){
+        typeChecks.push(val);
+      }else{
+        const i = typeChecks.findIndex((it)=>val===it);
+        typeChecks.splice(i,1);
+      }
+    }
+    this.setState({
+      typeChecks:typeChecks
+    });
+  }
   componentDidMount(){
     const height = getWindowInnerHeight()-148;
     this.$cont.current.style.height = height+"px";
+    this.props.getFilters();
     windowEventHandler('resize', ()=>{
       if(this.$cont.current){
         const height = getWindowInnerHeight()-148;
@@ -102,8 +126,8 @@ class MedicalInfo extends Component {
     });
   }
     render() {
-        const {searchResult} = this.props;
-        const {val, hasSearch,msg} = this.state;
+        const {searchResult,filterList} = this.props;
+        const {val, hasSearch,msg,typeChecks} = this.state;
         return (
             <div className={style['search-cont']} ref={this.$cont}>
               <div className={style['search-box']}>
@@ -112,6 +136,7 @@ class MedicalInfo extends Component {
                   {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
                   <button onClick={this.search}>搜索</button>
                 </p>
+                <Filters data ={filterList} checkeds={typeChecks} handleCheck={this.handleTypeCheck}></Filters>
               </div>
               {searchResult&&searchResult.length>0?<div className={style['result']}>
                     <p className={style['title']}>查询内容</p>

src/components/MedicalInfo/index.less

@@ -56,7 +56,7 @@
         border: none;
     }
     .result{
-        margin-top:46px;
+        margin-top:95px;
         padding: 0 5px 0 0;
         height: 100%;
         box-sizing: border-box;

src/containers/MedicalInfoContainer.js

@@ -3,18 +3,21 @@ import { connect } from 'react-redux';
 import { getSearchList } from '@store/async-actions/medicalInfo';
 import MedicalInfo from '@components/MedicalInfo';
 import {getAllConceptDetail} from '../store/async-actions/pushMessage';
-import {CLEAR_INFO_SEARCH_LIST} from '@types/medicalInfo';
+import {getMedicalFilters} from '../store/async-actions/fetchModules';
+import {CLEAR_INFO_SEARCH_LIST,SET_FILTER_LIST} from '@types/medicalInfo';
 
 function mapStateToProps(state) {
+    const {medicalInfo} = state;
     return{
-        searchResult: state.medicalInfo.searchResult,
+        searchResult: medicalInfo.searchResult,
+        filterList:medicalInfo.filterList
     }
 }
 
 function mapDispatchToProps(dispatch) {
     return {
-        handleChangeValue(val){
-            dispatch(getSearchList(val))
+        handleChangeValue(val,types){
+            dispatch(getSearchList(val,types))
         },
         getAllConceptDetail(item) {
             dispatch(getAllConceptDetail(item))
@@ -23,6 +26,16 @@ function mapDispatchToProps(dispatch) {
               dispatch({
                 type:CLEAR_INFO_SEARCH_LIST
               })
+        },
+        getFilters(){
+              getMedicalFilters().then((res)=>{
+                  if(res.data.code=='0'){
+                      dispatch({
+                        type:SET_FILTER_LIST,
+                        list:res.data.data[7]
+                      })
+                  }
+              });
         }
     }
 }

src/store/async-actions/fetchModules.js

@@ -29,6 +29,7 @@ const api={
   getAllHisURL:'/inquiryInfo/hisInquirysForJz',   //全科历史病历
   downloadURL:'/inquiryInfo/exportInquirys',   //全科历史病历--导出
   addSecondDia:'/inquiryInfo/addDiagnoseSecond',   //全科历史病历--添加二次诊断
+  getMedicalTypes:'/dictionaryInfo/getList',       //获取医学知识搜索分类
 };
 
 export const getFeature = (item)=>{
@@ -36,6 +37,11 @@ export const getFeature = (item)=>{
   return datas;
 }
 
+//获取医学知识搜索分类
+export const getMedicalFilters = ()=>{
+  return json(api.getMedicalTypes,{});
+};
+
 //获取模板，多个
 export const getModules = (ids)=>{
   const {patInfo} = store.getState();

src/store/async-actions/medicalInfo.js

@@ -2,7 +2,7 @@ import { json } from "@utils/ajax";
 import { GET_SEARCH_RESULT } from '@store/types/medicalInfo';
 
 
-export const getSearchList = (val) => {
+export const getSearchList = (val,types) => {
     if(val.trim() == ''){
         const data = [];
         return (dispatch) =>  dispatch({
@@ -14,7 +14,8 @@ export const getSearchList = (val) => {
     return (dispatch, getState) => {
         json('/retrieval/getStaticKnowledge',{
             inputStr:val,
-            inputIds:[]
+            inputIds:[],
+            types
         })
         .then((res)=>{
             const data = res.data.data;

src/store/reducers/medicalInfo.js

@@ -1,9 +1,10 @@
-import { SET_SEARCH_VALUE, GET_SEARCH_RESULT ,CLEAR_INFO_SEARCH_LIST} from '../types/medicalInfo';
+import { SET_SEARCH_VALUE, GET_SEARCH_RESULT ,CLEAR_INFO_SEARCH_LIST,SET_FILTER_LIST} from '../types/medicalInfo';
 import { setSearchValue, getSearchResult } from '../actions/medicalInfo'; 
 
 const initState = {
     searchValue: '',
-    searchResult: []
+    searchResult: [],
+    filterList:[],      //搜索分类
 }
 
 export default function (state=initState, action) {
@@ -16,6 +17,9 @@ export default function (state=initState, action) {
         case CLEAR_INFO_SEARCH_LIST:
             res.searchResult=[];
             return res;
+      case SET_FILTER_LIST:
+            res.filterList = action.list;
+            return res;
         default: 
             return state;
     }

src/store/types/medicalInfo.js

@@ -1,3 +1,4 @@
 export const SET_SEARCH_VALUE = 'SET_SEARCH_VALUE';
 export const GET_SEARCH_RESULT = Symbol('GET_SEARCH_RESULT');
-export const CLEAR_INFO_SEARCH_LIST = 'CLEAR_INFO_SEARCH_LIST';
+export const CLEAR_INFO_SEARCH_LIST = 'CLEAR_INFO_SEARCH_LIST';
+export const SET_FILTER_LIST = 'SET_FILTER_LIST';