searchInput.js 10 KB

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