searchInput.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. import React, { Component } from "react";
  2. import { Input, Button, Select, DatePicker } from "antd";
  3. import moment from "moment";
  4. import $ from "jquery/src/ajax";
  5. import Cascaders from "../../../../common/cascaders";
  6. // 搜索输入框
  7. class PrimaryInput extends Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = {
  11. value: this.props.searchInputData.defaultValue
  12. };
  13. this.reset = this.reset.bind(this);
  14. }
  15. componentWillReceiveProps(nextProps) {
  16. if (nextProps.reset) {
  17. this.reset();
  18. }
  19. }
  20. reset() {
  21. this.setState(
  22. {
  23. // value: this.props.searchInputData.defaultValue
  24. value: undefined
  25. },
  26. () => {
  27. this.props.searchInputData.getValue(this.state.value);
  28. }
  29. );
  30. }
  31. render() {
  32. const Datas = this.props.searchInputData;
  33. return (
  34. <Input
  35. style={{ width: Datas.width, marginRight: 10 }}
  36. placeholder={Datas.placeholder}
  37. value={this.state.value}
  38. onChange={e => {
  39. Datas.getValue(e.target.value);
  40. this.setState({ value: e.target.value });
  41. }}
  42. />
  43. );
  44. }
  45. }
  46. // 搜索选择框
  47. class PrimarySelect extends Component {
  48. constructor(props) {
  49. super(props);
  50. this.state = {
  51. value: this.props.searchSelectData.defaultValue
  52. };
  53. this.reset = this.reset.bind(this);
  54. }
  55. componentWillReceiveProps(nextProps) {
  56. if (nextProps.reset) {
  57. this.reset();
  58. }
  59. }
  60. reset() {
  61. this.setState(
  62. {
  63. value: this.props.searchSelectData.defaultValue
  64. },
  65. () => {
  66. this.props.searchSelectData.getValue(this.state.value);
  67. }
  68. );
  69. }
  70. render() {
  71. const Datas = this.props.searchSelectData;
  72. return (
  73. <Select
  74. style={{ width: Datas.width, marginRight: 10 }}
  75. placeholder={Datas.placeholder}
  76. value={this.state.value}
  77. onChange={e => {
  78. Datas.getValue(e);
  79. this.setState({
  80. value: e
  81. });
  82. }}
  83. >
  84. {Datas.content.map((item, index) => {
  85. return (
  86. <Option value={item.id} key={index}>
  87. {item.name}
  88. </Option>
  89. );
  90. })}
  91. </Select>
  92. );
  93. }
  94. }
  95. // 时间搜索框
  96. class PrimaryRangePicker extends Component {
  97. constructor(props) {
  98. super(props);
  99. this.state = {
  100. value: this.props.searchRangePickerData.defaultValue
  101. };
  102. this.reset = this.reset.bind(this);
  103. }
  104. componentWillReceiveProps(nextProps) {
  105. if (nextProps.reset) {
  106. this.reset();
  107. }
  108. }
  109. reset() {
  110. this.setState(
  111. {
  112. value: this.props.searchRangePickerData.defaultValue
  113. },
  114. () => {
  115. this.props.searchRangePickerData.getValue(this.state.value);
  116. }
  117. );
  118. }
  119. render() {
  120. const { RangePicker } = DatePicker;
  121. const Datas = this.props.searchRangePickerData;
  122. return (
  123. <RangePicker
  124. style={{ width: Datas.width, marginRight: 10 }}
  125. value={[
  126. this.state.value[0] ? moment(this.state.value[0]) : null,
  127. this.state.value[1] ? moment(this.state.value[1]) : null
  128. ]}
  129. onChange={(_data, dataString) => {
  130. Datas.getValue(dataString);
  131. this.setState({
  132. value: dataString
  133. });
  134. }}
  135. />
  136. );
  137. }
  138. }
  139. // 搜索重置组件
  140. class SearchInput extends Component {
  141. constructor(props) {
  142. super(props);
  143. this.state = {
  144. reset: false,
  145. departmentArr: [],
  146. releaseDate: [],
  147. timeTypeSearch: "1",
  148. completeSearch: "1"
  149. };
  150. this.departmentList = this.departmentList.bind(this);
  151. }
  152. departmentList() {
  153. $.ajax({
  154. method: "get",
  155. dataType: "json",
  156. crossDomain: false,
  157. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  158. data: {},
  159. success: function (data) {
  160. let thedata = data.data;
  161. let theArr = [];
  162. if (!thedata) {
  163. if (data.error && data.error.length) {
  164. message.warning(data.error[0].message);
  165. }
  166. } else {
  167. thedata.map(function (item, index) {
  168. theArr.push({
  169. key: index,
  170. name: item.name,
  171. id: item.id
  172. });
  173. });
  174. }
  175. this.setState({
  176. departmentArr: theArr
  177. });
  178. }.bind(this)
  179. });
  180. }
  181. componentWillMount() {
  182. // this.departmentList();
  183. }
  184. render() {
  185. // 输入框数据
  186. const SearchInputData = [
  187. {
  188. placeholder: "订单编号",
  189. width: 150,
  190. defaultValue: "",
  191. getValue: value => {
  192. this.setState({
  193. orderNoSearch: value,
  194. reset: false
  195. });
  196. }
  197. },
  198. {
  199. placeholder: "合同编号",
  200. width: 150,
  201. defaultValue: "",
  202. getValue: value => {
  203. this.setState({
  204. contractNoSearch: value,
  205. reset: false
  206. });
  207. }
  208. },
  209. {
  210. placeholder: "客户名称",
  211. width: 150,
  212. defaultValue: "",
  213. getValue: value => {
  214. this.setState({
  215. userNameSearch: value,
  216. reset: false
  217. });
  218. }
  219. },
  220. {
  221. placeholder: "订单负责人",
  222. width: 150,
  223. defaultValue: "",
  224. getValue: value => {
  225. this.setState({
  226. salesmanNameSearch: value,
  227. reset: false
  228. });
  229. }
  230. }
  231. ];
  232. // 选择框数据
  233. const SearchSelectData = [
  234. // {
  235. // placeholder: "订单部门",
  236. // width: 200,
  237. // defaultValue: undefined,
  238. // content: this.state.departmentArr,
  239. // getValue: value => {
  240. // this.setState({
  241. // depIdSearch: value,
  242. // reset: false
  243. // });
  244. // }
  245. // },
  246. {
  247. placeholder: "审核状态",
  248. width: 120,
  249. defaultValue: "1",
  250. content: [
  251. {
  252. name: "所有",
  253. id: "0"
  254. },
  255. {
  256. name: "未审核",
  257. id: "1"
  258. },
  259. {
  260. name: "已审核",
  261. id: "2"
  262. },
  263. {
  264. name: "退票中",
  265. id: "3"
  266. },
  267. {
  268. name: "待上传附件",
  269. id: "6"
  270. },
  271. {
  272. name: "已完成",
  273. id: "4"
  274. },
  275. {
  276. name: "已驳回",
  277. id: "5"
  278. },
  279. ],
  280. getValue: value => {
  281. this.setState({
  282. completeSearch: value,
  283. reset: false
  284. });
  285. }
  286. },
  287. {
  288. placeholder: "变更类型",
  289. width: 120,
  290. defaultValue: undefined,
  291. content: [
  292. {
  293. name: "退单退款",
  294. id: "0"
  295. },
  296. {
  297. name: "项目及金额变更",
  298. id: "1"
  299. },
  300. {
  301. name: "仅项目变更",
  302. id: "2"
  303. },
  304. {
  305. name: "仅金额变更",
  306. id: "3"
  307. },
  308. {
  309. name: "重报",
  310. id: "4"
  311. },
  312. {
  313. name: "赠送",
  314. id: "5"
  315. },
  316. {
  317. name: "退单不退款",
  318. id: "6",
  319. },
  320. {
  321. name: "仅变更合同",
  322. id: "7",
  323. },
  324. ],
  325. getValue: value => {
  326. this.setState({
  327. changeSearch: value,
  328. reset: false
  329. });
  330. }
  331. },
  332. {
  333. placeholder: "时间",
  334. width: 80,
  335. defaultValue: "1",
  336. content: [
  337. {
  338. name: "提交时间",
  339. id: "0"
  340. },
  341. {
  342. name: "下单时间",
  343. id: "1"
  344. }
  345. ],
  346. getValue: value => {
  347. this.setState({
  348. timeTypeSearch: value,
  349. reset: false
  350. });
  351. }
  352. }
  353. ];
  354. // 时间框数据
  355. const SearchRangePickerData = [
  356. {
  357. width: 200,
  358. defaultValue: [],
  359. getValue: value => {
  360. this.setState({
  361. releaseDate: value,
  362. reset: false
  363. });
  364. }
  365. }
  366. ];
  367. return (
  368. <div style={{ display: "inline-block", marginBottom: 10 }}>
  369. {SearchInputData.map((item, index) => {
  370. return (
  371. <PrimaryInput
  372. searchInputData={item}
  373. key={index}
  374. reset={this.state.reset}
  375. />
  376. );
  377. })}
  378. <Cascaders
  379. ref={node => this.Cascaders = node}
  380. placeholder="订单部门"
  381. id="id"
  382. name="name"
  383. children="list"
  384. height={28}
  385. onSel={(e) => {
  386. this.setState({
  387. deps: JSON.stringify(e)
  388. })
  389. }}
  390. />
  391. {SearchSelectData.map((item, index) => {
  392. if (this.props.isYxy) {
  393. if (item.placeholder == "审核状态") {
  394. item.content.splice(item.content.length - 1, 1)
  395. }
  396. }
  397. return (
  398. <PrimarySelect
  399. searchSelectData={item}
  400. key={index}
  401. reset={this.state.reset}
  402. />
  403. );
  404. })}
  405. {SearchRangePickerData.map((item, index) => {
  406. return (
  407. <PrimaryRangePicker
  408. searchRangePickerData={item}
  409. key={index}
  410. reset={this.state.reset}
  411. />
  412. );
  413. })}
  414. <Button
  415. type="primary"
  416. style={{ marginRight: 10, marginTop: 10 }}
  417. onClick={() => {
  418. this.props.search(this.state)
  419. }}
  420. >
  421. 搜索
  422. </Button>
  423. <Button
  424. onClick={_e => {
  425. this.setState({
  426. reset: true,
  427. deps: undefined,
  428. }, () => {
  429. this.Cascaders.empty();
  430. this.props.search(this.state)
  431. })
  432. }}
  433. style={{ marginTop: 10 }}
  434. >
  435. 重置
  436. </Button>
  437. </div>
  438. );
  439. }
  440. }
  441. export { SearchInput, PrimaryInput, PrimarySelect, PrimaryRangePicker };