BuildSelect2.jsx 2.1KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. import React, { useState, useEffect, useRef } from 'react';
  2. import { Select } from 'antd';
  3. import apis from '../../services/apis';
  4. import request from '../../utils/request'
  5. const { Option } = Select;
  6. function usePrevious(props) {
  7. const ref = useRef();
  8. useEffect(() => {
  9. ref.current = props;
  10. });
  11. return ref.current;
  12. }
  13. /**
  14. *
  15. *
  16. * @param {*} props
  17. * @returns
  18. */
  19. const BuildingSelect2 = props => {
  20. const [data, setData] = useState([])
  21. const [value, setValue] = useState([])
  22. const {cityId,disabled=false} = props
  23. console.log('props', props.cityId);
  24. useEffect(() => {
  25. getBuildList();
  26. }, [props.cityId])
  27. const getBuildList = e => {
  28. request({ ...apis.building.buildingSelect, params: { cityId: props.cityId, pageNum: 1, pageSize: 999 } }).then(data => {
  29. setData(data)
  30. checkValue(data)
  31. // 默认选中第一个
  32. })
  33. }
  34. const checkValue = (data) => {
  35. if (props.value) {
  36. const tempData = data.filter(f => f.buildingId == props.value)
  37. const va = (tempData.length > 0) ? props.value : '项目已下线,请重新选择项目'
  38. props.onChange(va)
  39. }
  40. }
  41. const onChange = (buildingId) => {
  42. const building = data.filter(x => buildingId === x.buildingId)[0]
  43. props.onChange(buildingId, building)
  44. // if (props.value) {
  45. // const tempData = data.filter(f => f.buildingId == props.value)
  46. // const va = (tempData.length > 0) ? props.value : '项目已下线,请重新选择项目'
  47. // props.onChange(va)
  48. // }={props.onChange}building.buildingId
  49. }
  50. return (
  51. <Select
  52. showSearch
  53. value={props.value}
  54. style={{ width: '300px' }}
  55. placeholder="请选择项目"
  56. onChange={ onChange}
  57. filterOption={(input, option) =>
  58. option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
  59. }
  60. disabled={disabled}
  61. >
  62. {data.map(building => (
  63. <Option key={building.buildingId} value={building.buildingId}>{building.buildingName}</Option>
  64. ))}
  65. </Select>
  66. )
  67. }
  68. export default BuildingSelect2