searchInput.js 10 KB

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