index.jsx 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import React, { Component } from "react";
  2. import { AutoComplete, Input, message, Select } from "antd";
  3. import $ from "jquery/src/ajax";
  4. class StaffSearch extends Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. superior: '',
  9. customerArr: [],
  10. loading: false,
  11. }
  12. this.httpChange = this.httpChange.bind(this);
  13. this.supervisor = this.supervisor.bind(this);
  14. this.selectAuto = this.selectAuto.bind(this);
  15. }
  16. componentDidUpdate(prevProps) {
  17. if (prevProps.valueName !== this.props.valueName) {
  18. this.setState({ superior: this.props.valueName });
  19. }
  20. }
  21. httpChange(e) {
  22. if (e.length >= 1) {
  23. this.supervisor(e);
  24. }
  25. this.setState({
  26. superior: e
  27. })
  28. this.props.onBlurText({ title: e });
  29. if (!e) {
  30. this.props.onBlurChange({ title: e, value: undefined });
  31. }
  32. }
  33. supervisor(e) {
  34. this.setState({
  35. loading: true
  36. });
  37. $.ajax({
  38. method: "post",
  39. dataType: "json",
  40. crossDomain: false,
  41. url: globalConfig.context + "/api/admin/organization/selectName",
  42. data: {
  43. name: e
  44. },
  45. success: function (data) {
  46. if (data.error.length === 0) {
  47. this.setState({
  48. customerArr: data.data,
  49. });
  50. } else {
  51. message.error(data.error[0].message)
  52. }
  53. }.bind(this),
  54. }).always(function () {
  55. this.setState({
  56. loading: false
  57. });
  58. }.bind(this));
  59. }
  60. selectAuto(value) {
  61. let theType = '';
  62. let contactLists = this.state.customerArr || [];
  63. if (value) {
  64. contactLists.map(function (item) {
  65. if (item.name == value.toString()) {
  66. theType = item.id;
  67. }
  68. });
  69. }
  70. this.setState({
  71. superior: value
  72. })
  73. this.props.onBlurChange({ title: value, value: theType });
  74. }
  75. render() {
  76. const options = this.state.customerArr.map((group, index) =>
  77. <Select.Option key={index} value={group.name}>{group.name}</Select.Option>
  78. )
  79. return (
  80. <AutoComplete
  81. className="certain-category-search"
  82. dropdownClassName="certain-category-search-dropdown"
  83. dropdownMatchSelectWidth={false}
  84. // size="large"
  85. style={{ width: this.props.width || '200px' }}
  86. dataSource={options}
  87. placeholder={this.props.placeholder}
  88. value={this.state.superior ? this.state.superior : this.props.valueName}
  89. onChange={this.httpChange}
  90. filterOption={true}
  91. onSelect={this.selectAuto}
  92. >
  93. <Input />
  94. </AutoComplete>
  95. )
  96. }
  97. }
  98. export default StaffSearch;