import React, { PureComponent as Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { Icon, Input, AutoComplete } from 'antd'; import './Search.scss'; import { withRouter } from 'react-router'; import axios from 'axios'; import { setCurrGroup, fetchGroupMsg } from '../../../reducer/modules/group'; import { changeMenuItem } from '../../../reducer/modules/menu'; import { fetchInterfaceListMenu } from '../../../reducer/modules/interface'; const Option = AutoComplete.Option; @connect( state => ({ groupList: state.group.groupList, projectList: state.project.projectList }), { setCurrGroup, changeMenuItem, fetchGroupMsg, fetchInterfaceListMenu } ) @withRouter export default class Srch extends Component { constructor(props) { super(props); this.state = { dataSource: [] }; } static propTypes = { groupList: PropTypes.array, projectList: PropTypes.array, router: PropTypes.object, history: PropTypes.object, location: PropTypes.object, setCurrGroup: PropTypes.func, changeMenuItem: PropTypes.func, fetchInterfaceListMenu: PropTypes.func, fetchGroupMsg: PropTypes.func }; onSelect = async (value, option) => { if (option.props.type === '分组') { this.props.changeMenuItem('/group'); this.props.history.push('/group/' + option.props['id']); this.props.setCurrGroup({ group_name: value, _id: option.props['id'] - 0 }); } else if (option.props.type === '项目') { await this.props.fetchGroupMsg(option.props['groupId']); this.props.history.push('/project/' + option.props['id']); } else if (option.props.type === '接口') { await this.props.fetchInterfaceListMenu(option.props['projectId']); this.props.history.push( '/project/' + option.props['projectId'] + '/interface/api/' + option.props['id'] ); } }; handleSearch = value => { axios .get('/api/project/search?q=' + value) .then(res => { if (res.data && res.data.errcode === 0) { const dataSource = []; for (let title in res.data.data) { res.data.data[title].map(item => { switch (title) { case 'group': dataSource.push( ); break; case 'project': dataSource.push( ); break; case 'interface': dataSource.push( ); break; default: break; } }); } this.setState({ dataSource: dataSource }); } else { console.log('查询项目或分组失败'); } }) .catch(err => { console.log(err); }); }; // getDataSource(groupList){ // const groupArr =[]; // groupList.forEach(item =>{ // groupArr.push("group: "+ item["group_name"]); // }) // return groupArr; // } render() { const { dataSource } = this.state; return (
// option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 // } > } placeholder="搜索分组/项目/接口" className="search-input" />
); } }