demandOrder.jsx 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631
  1. import React from 'react';
  2. import { Icon, Button, Input, InputNumber, Select, Spin, Table, message, Modal, Row, Col, DatePicker } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import moment from 'moment';
  6. import './techDemand.less';
  7. import { orderStatusList } from '../../dataDic.js';
  8. import { befoFile, getSearchUrl, getOrderStatus, companySearch } from '../../tools.js';
  9. import BatchImport from './batchImport';
  10. const DemandDetail = React.createClass({
  11. getInitialState() {
  12. return {
  13. visible: false,
  14. loading: false,
  15. columns: [
  16. {
  17. title: '状态',
  18. dataIndex: 'status',
  19. key: 'status',
  20. render: text => { return getOrderStatus(text) }
  21. }, {
  22. title: '操作时间',
  23. dataIndex: 'recordTimeFormattedDate',
  24. key: 'recordTimeFormattedDate',
  25. }, {
  26. title: '管理员',
  27. dataIndex: 'operator',
  28. key: 'operator',
  29. }, {
  30. title: '备注',
  31. dataIndex: 'comment',
  32. key: 'comment',
  33. }
  34. ],
  35. dataSource: [],
  36. };
  37. },
  38. loadLogs(id) {
  39. this.setState({
  40. loading: true
  41. });
  42. $.ajax({
  43. method: "get",
  44. dataType: "json",
  45. crossDomain: false,
  46. url: globalConfig.context + "/api/admin/portal/order/demandOrderLog",
  47. data: {
  48. demandOrderId: id
  49. },
  50. success: function (data) {
  51. let theArr = [];
  52. if (!data.data) {
  53. if (data.error && data.error.length) {
  54. message.warning(data.error[0].message);
  55. };
  56. } else {
  57. for (let i = 0; i < data.data.length; i++) {
  58. let thisdata = data.data[i];
  59. theArr.push({
  60. key: i,
  61. recordTime: thisdata.recordTime,
  62. status: thisdata.status,
  63. comment: thisdata.comment,
  64. operator: thisdata.operator,
  65. recordTimeFormattedDate: thisdata.recordTimeFormattedDate
  66. });
  67. };
  68. };
  69. this.setState({
  70. dataSource: theArr
  71. });
  72. }.bind(this),
  73. }).always(function () {
  74. this.setState({
  75. loading: false
  76. });
  77. }.bind(this));
  78. },
  79. handleSubmit(e) {
  80. //keyword长度判断
  81. if (this.state.orderStatus || this.state.comment || this.state.recordTime) {
  82. if (this.state.orderStatus && this.state.comment && this.state.recordTime) {
  83. } else {
  84. message.warning('请填写完整的状态流转记录!');
  85. return;
  86. };
  87. };
  88. this.setState({
  89. loading: true
  90. });
  91. $.ajax({
  92. method: "POST",
  93. dataType: "json",
  94. crossDomain: false,
  95. url: globalConfig.context + '/api/admin/portal/order/updateDemandOrder',
  96. data: {
  97. id: this.props.data.id,
  98. demandId: this.props.data.demandId,
  99. enclosureUrl: this.props.data.enclosureUrl,
  100. status: this.state.orderStatus || this.props.data.status,
  101. recordTimeFormattedDate: this.state.recordTime ? this.state.recordTime.format("YYYY-MM-DD HH:mm:ss") : undefined,
  102. comment: this.state.comment,
  103. intentionMoney: this.state.intentionMoney * 10000,
  104. contractMoney: this.state.contractMoney * 10000,
  105. commission: this.state.commission * 10000,
  106. serviceMoney: this.state.serviceMoney * 10000,
  107. }
  108. }).done(function (data) {
  109. this.setState({
  110. loading: false
  111. });
  112. if (!data.error.length) {
  113. message.success('保存成功!');
  114. this.handleOk();
  115. } else {
  116. message.warning(data.error[0].message);
  117. };
  118. }.bind(this));
  119. },
  120. handleCancel(e) {
  121. this.setState({
  122. visible: false,
  123. });
  124. this.props.closeDesc(false);
  125. },
  126. handleOk(e) {
  127. this.setState({
  128. visible: false,
  129. });
  130. this.props.closeDesc(false, true);
  131. },
  132. componentWillReceiveProps(nextProps) {
  133. if (!this.state.visible && nextProps.showDesc && nextProps.data) {
  134. this.loadLogs(nextProps.data.id);
  135. this.state.intentionMoney = nextProps.data.intentionMoney;
  136. this.state.contractMoney = nextProps.data.contractMoney;
  137. this.state.commission = nextProps.data.commission;
  138. this.state.serviceMoney = nextProps.data.serviceMoney;
  139. this.state.orderStatus = undefined;
  140. this.state.comment = undefined;
  141. this.state.recordTime = undefined;
  142. };
  143. this.state.visible = nextProps.showDesc;
  144. },
  145. render() {
  146. let theData = this.props.data;
  147. if (theData) {
  148. return (
  149. <div className="patent-desc">
  150. <Modal maskClosable={false} visible={this.state.visible}
  151. onOk={this.checkPatentProcess} onCancel={this.handleCancel}
  152. width='800px'
  153. footer={null}
  154. title="订单详情"
  155. className="demand-order-content">
  156. <Spin spinning={this.state.loading}>
  157. <Row>
  158. <Col span={2}>订单编号:</Col>
  159. <Col span={10}>{theData.serialNumber}</Col>
  160. <Col span={2}>订单状态:</Col>
  161. <Col span={10}>{getOrderStatus(theData.status)}</Col>
  162. </Row>
  163. <Row>
  164. <Col span={2}>需求编号:</Col>
  165. <Col span={10}>{theData.demandSerialNumber}</Col>
  166. <Col span={2}>需求名称:</Col>
  167. <Col span={10}>{theData.name}</Col>
  168. </Row>
  169. <Row>
  170. <Col span={2}>需求状态:</Col>
  171. <Col span={10}>{(() => {
  172. if (theData.deletedSign == 1) {
  173. return "已删除"
  174. } else if (theData.auditStatus != 3) {
  175. return "已下架"
  176. } else {
  177. return "正常"
  178. }
  179. })()}</Col>
  180. <Col span={2}>雇主名称:</Col>
  181. <Col span={10}>{theData.theName}</Col>
  182. </Row>
  183. <Row>
  184. <Col span={2}>相关附件:</Col>
  185. <Col span={10}>
  186. {theData.enclosureUrl ?
  187. <span className="download-file">
  188. <a onClick={() => { window.open(globalConfig.context + '/api/admin/portal/order/downloadDemandOrder?id=' + theData.id) }}>科技需求订单文件</a>
  189. </span>
  190. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}
  191. </Col>
  192. <Col span={2}>接单时间:</Col>
  193. <Col span={10}>{theData.createTimeFormattedDate}</Col>
  194. </Row>
  195. <Row>
  196. <Col span={2}>意向金:</Col>
  197. <Col span={10}>
  198. <InputNumber
  199. value={this.state.intentionMoney}
  200. onChange={(e) => { this.setState({ intentionMoney: Math.round(e * 10000) / 10000 }) }} />
  201. <span> 万元</span>
  202. </Col>
  203. <Col span={2}>合同金:</Col>
  204. <Col span={10}>
  205. <InputNumber
  206. value={this.state.contractMoney}
  207. onChange={(e) => { this.setState({ contractMoney: Math.round(e * 10000) / 10000 }) }} />
  208. <span> 万元</span>
  209. </Col>
  210. </Row>
  211. <Row>
  212. <Col span={2}>佣金:</Col>
  213. <Col span={10}>
  214. <InputNumber
  215. value={this.state.commission}
  216. onChange={(e) => { this.setState({ commission: Math.round(e * 10000) / 10000 }) }} />
  217. <span> 万元</span>
  218. </Col>
  219. <Col span={2}>服务金:</Col>
  220. <Col span={10}>
  221. <InputNumber
  222. value={this.state.serviceMoney}
  223. onChange={(e) => { this.setState({ serviceMoney: Math.round(e * 10000) / 10000 }) }} />
  224. <span> 万元</span>
  225. </Col>
  226. </Row>
  227. <p>订单状态流转记录</p>
  228. <Table columns={this.state.columns}
  229. dataSource={this.state.dataSource}
  230. pagination={false} />
  231. <Row style={{ marginTop: '20px' }}>
  232. <Col span={2}>状态:</Col>
  233. <Col span={10}>
  234. <Select style={{ width: 160 }}
  235. value={this.state.orderStatus}
  236. onChange={(e) => { this.setState({ orderStatus: e }); }}>
  237. {(() => {
  238. let theArr = [];
  239. orderStatusList.map(function (item, i) {
  240. theArr.push(<Select.Option key={item.value}>{item.key}</Select.Option>)
  241. });
  242. return theArr;
  243. })()}
  244. </Select>
  245. </Col>
  246. <Col span={2}>时间:</Col>
  247. <Col span={10}>
  248. <DatePicker
  249. value={this.state.recordTime || null}
  250. onChange={(e) => { this.setState({ recordTime: e }); }} />
  251. </Col>
  252. </Row>
  253. <Row>
  254. <Col span={2}>备注:</Col>
  255. <Col span={20}>
  256. <Input value={this.state.comment} onChange={(e) => { this.setState({ comment: e.target.value }); }} />
  257. </Col>
  258. </Row>
  259. <Row>
  260. <Col span={2}></Col>
  261. <Col span={20}>
  262. <Button style={{ marginRight: '20px' }} type="primary" onClick={this.handleSubmit}>保存</Button>
  263. <Button className="set-submit" type="ghost" onClick={this.handleCancel}>取消</Button>
  264. </Col>
  265. </Row>
  266. </Spin>
  267. </Modal>
  268. </div>
  269. );
  270. } else {
  271. return <div></div>
  272. }
  273. },
  274. });
  275. const DemandOrderList = React.createClass({
  276. loadData(pageNo, apiUrl) {
  277. this.setState({
  278. loading: true
  279. });
  280. $.ajax({
  281. method: "get",
  282. dataType: "json",
  283. crossDomain: false,
  284. url: globalConfig.context + (apiUrl || this.props['data-listApiUrl']),
  285. data: {
  286. pageNo: pageNo || 1,
  287. pageSize: this.state.pagination.pageSize,
  288. uid: this.state.uid,
  289. username: this.state.username,
  290. unitName: this.state.unitName
  291. },
  292. success: function (data) {
  293. let theArr = [];
  294. if (!data.data || !data.data.list) {
  295. if (data.error && data.error.length) {
  296. message.warning(data.error[0].message);
  297. };
  298. } else {
  299. for (let i = 0; i < data.data.list.length; i++) {
  300. let thisdata = data.data.list[i];
  301. theArr.push({
  302. key: i,
  303. id: thisdata.id, //线索单/意向单ID
  304. serialNumber: thisdata.serialNumber, //线索单/意向单编号
  305. demandId: thisdata.demandId, //科技需求ID
  306. createTime: thisdata.createTime,
  307. enclosureUrl: thisdata.enclosureUrl,
  308. status: thisdata.status, //线索单/意向单状态
  309. intentionMoney: thisdata.intentionMoney / 10000, //意向金
  310. contractMoney: thisdata.contractMoney / 10000, //合同金
  311. commission: thisdata.commission / 10000, //佣金
  312. serviceMoney: thisdata.serviceMoney / 10000, //服务金
  313. name: thisdata.name, //需求名称,
  314. demandSerialNumber: thisdata.demandSerialNumber, //科技需求编号
  315. deletedSign: thisdata.deletedSign, //科技需求删除标记
  316. auditStatus: thisdata.auditStatus, //科技需求审核状态
  317. theName: thisdata.username || thisdata.unitName, //个人用户名称
  318. uid: thisdata.uid, //个人用户ID
  319. createTimeFormattedDate: thisdata.createTimeFormattedDate, //接单时间
  320. });
  321. };
  322. }
  323. this.state.pagination.current = data.data.pageNo;
  324. this.state.pagination.total = data.data.totalCount;
  325. this.setState({
  326. dataSource: theArr,
  327. pagination: this.state.pagination
  328. });
  329. }.bind(this),
  330. }).always(function () {
  331. this.setState({
  332. loading: false
  333. });
  334. }.bind(this));
  335. },
  336. getInitialState() {
  337. return {
  338. selectedRowKeys: [],
  339. selectedRows: [],
  340. loading: false,
  341. pagination: {
  342. defaultCurrent: 1,
  343. defaultPageSize: 10,
  344. showQuickJumper: true,
  345. pageSize: 10,
  346. onChange: function (page) {
  347. this.loadData(page);
  348. }.bind(this),
  349. showTotal: function (total) {
  350. return '共' + total + '条数据';
  351. }
  352. },
  353. columns: [
  354. {
  355. title: '编号',
  356. dataIndex: 'serialNumber',
  357. key: 'serialNumber',
  358. }, {
  359. title: '需求名称',
  360. dataIndex: 'name',
  361. key: 'name',
  362. }, {
  363. title: '需求编号',
  364. dataIndex: 'demandSerialNumber',
  365. key: 'demandSerialNumber',
  366. }, {
  367. title: '雇主编号',
  368. dataIndex: 'theName',
  369. key: 'theName',
  370. }, {
  371. title: '订单状态',
  372. dataIndex: 'auditStatus',
  373. key: 'auditStatus',
  374. render: (text, record) => {
  375. if (record.deletedSign == 1) {
  376. return "已删除"
  377. } else if (record.auditStatus != 3) {
  378. return "已下架"
  379. } else {
  380. return "正常"
  381. }
  382. }
  383. }, {
  384. title: '流程状态',
  385. dataIndex: 'status',
  386. key: 'status',
  387. render: (text, record) => { return getOrderStatus(text); }
  388. }, {
  389. title: '意向金(万元)',
  390. dataIndex: 'intentionMoney',
  391. key: 'intentionMoney',
  392. }, {
  393. title: '合同金(万元)',
  394. dataIndex: 'contractMoney',
  395. key: 'contractMoney',
  396. }, {
  397. title: '佣金(万元)',
  398. dataIndex: 'commission',
  399. key: 'commission',
  400. }, {
  401. title: '服务金(万元)',
  402. dataIndex: 'serviceMoney',
  403. key: 'serviceMoney',
  404. }, {
  405. title: '接单时间',
  406. dataIndex: 'createTimeFormattedDate',
  407. key: 'createTimeFormattedDate',
  408. }
  409. ],
  410. dataSource: [],
  411. };
  412. },
  413. getCompanyList() {
  414. this.setState({
  415. loading: true
  416. });
  417. $.ajax({
  418. method: "get",
  419. dataType: "json",
  420. crossDomain: false,
  421. url: globalConfig.context + "/api/admin/demand/unitNames",
  422. success: function (data) {
  423. let theArr = [];
  424. if (!data.data) {
  425. if (data.error && data.error.length) {
  426. message.warning(data.error[0].message);
  427. };
  428. } else {
  429. data.data.map(function (item) {
  430. theArr.push(
  431. <Select.Option value={item.uid} key={item.uid}>{item.unitName}</Select.Option>
  432. )
  433. });
  434. };
  435. this.setState({
  436. companyOption: theArr
  437. });
  438. }.bind(this),
  439. }).always(function () {
  440. this.setState({
  441. loading: false
  442. });
  443. }.bind(this));
  444. },
  445. getUserList() {
  446. this.setState({
  447. loading: true
  448. });
  449. $.ajax({
  450. method: "get",
  451. dataType: "json",
  452. crossDomain: false,
  453. url: globalConfig.context + "/api/admin/demand/userNames",
  454. success: function (data) {
  455. let theArr = [];
  456. if (!data.data) {
  457. if (data.error && data.error.length) {
  458. message.warning(data.error[0].message);
  459. };
  460. } else {
  461. data.data.map(function (item) {
  462. theArr.push(
  463. <Select.Option value={item.uid} key={item.uid}>{item.username}</Select.Option>
  464. )
  465. });
  466. };
  467. this.setState({
  468. userOption: theArr
  469. });
  470. }.bind(this),
  471. }).always(function () {
  472. this.setState({
  473. loading: false
  474. });
  475. }.bind(this));
  476. },
  477. componentWillMount() {
  478. let theArr = [], typeArr = [];
  479. orderStatusList.map(function (item) {
  480. theArr.push(
  481. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  482. )
  483. });
  484. this.state.demandTypeOption = typeArr;
  485. this.state.orderStatusOption = theArr;
  486. // if (window.location.search) {
  487. // let theObj = getSearchUrl(window.location.search);
  488. // if (theObj.rid) {
  489. // theObj.id = theObj.rid;
  490. // if (theObj.rid != 'null') {
  491. // this.tableRowClick(theObj);
  492. // };
  493. // };
  494. // };
  495. this.loadData();
  496. this.getCompanyList();
  497. this.getUserList();
  498. },
  499. componentWillReceiveProps(nextProps) {
  500. if (this.props['data-listApiUrl'] != nextProps['data-listApiUrl']) {
  501. this.loadData(null, nextProps['data-listApiUrl']);
  502. this.state.selectedRowKeys = [];
  503. this.state.selectedRows = [];
  504. };
  505. },
  506. tableRowClick(record, index) {
  507. this.state.RowData = record;
  508. this.setState({
  509. showDesc: true
  510. });
  511. },
  512. delectRow() {
  513. let deletedIds = [];
  514. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  515. let rowItem = this.state.selectedRows[idx];
  516. if (rowItem.id) {
  517. deletedIds.push(rowItem.id)
  518. };
  519. };
  520. this.setState({
  521. selectedRowKeys: [],
  522. loading: deletedIds.length > 0
  523. });
  524. $.ajax({
  525. method: "POST",
  526. dataType: "json",
  527. crossDomain: false,
  528. url: globalConfig.context + "/api/admin/demand/delete",
  529. data: {
  530. ids: deletedIds
  531. }
  532. }).done(function (data) {
  533. if (!data.error.length) {
  534. message.success('删除成功!');
  535. this.setState({
  536. loading: false,
  537. });
  538. } else {
  539. message.warning(data.error[0].message);
  540. };
  541. this.loadData();
  542. }.bind(this));
  543. },
  544. addClick() {
  545. this.state.RowData = {};
  546. this.setState({
  547. showDesc: true
  548. });
  549. },
  550. closeDesc(e, s) {
  551. this.state.showDesc = e;
  552. if (s) {
  553. this.loadData();
  554. };
  555. },
  556. search() {
  557. this.loadData();
  558. },
  559. reset() {
  560. this.state.uid = undefined;
  561. this.state.username = undefined;
  562. this.state.unitName = undefined;
  563. this.state.status = undefined;
  564. this.loadData();
  565. },
  566. render() {
  567. const rowSelection = {
  568. selectedRowKeys: this.state.selectedRowKeys,
  569. onChange: (selectedRowKeys, selectedRows) => {
  570. this.setState({
  571. selectedRows: selectedRows.splice(-1),
  572. selectedRowKeys: selectedRowKeys.splice(-1)
  573. });
  574. }
  575. };
  576. const hasSelected = this.state.selectedRowKeys.length > 0;
  577. return (
  578. <div className="user-content" >
  579. <div className="content-title">
  580. {this.props['data-listApiUrl'].indexOf('org') == -1 ? <span>个人需求订单管理</span> : <span>组织需求订单管理</span>}
  581. </div>
  582. <div className="user-search">
  583. <Select placeholder="选择状态" style={{ width: 160 }}
  584. value={this.state.status}
  585. onChange={(e) => { this.setState({ status: e }) }}>
  586. {this.state.orderStatusOption}
  587. </Select>
  588. {this.props['data-listApiUrl'].indexOf('org') == -1 ? <Select placeholder="选择用户名" style={{ width: 260 }}
  589. value={this.state.username}
  590. notFoundContent="未获取到用户列表"
  591. showSearch
  592. filterOption={companySearch}
  593. onChange={(e) => { this.setState({ username: e }) }}>
  594. {this.state.userOption}
  595. </Select> :
  596. <Select placeholder="选择用户名" style={{ width: 260 }}
  597. value={this.state.unitName}
  598. notFoundContent="未获取到用户列表"
  599. showSearch
  600. filterOption={companySearch}
  601. onChange={(e) => { this.setState({ unitName: e }) }}>
  602. {this.state.companyOption}
  603. </Select>}
  604. <Button type="primary" onClick={this.search}>搜索</Button>
  605. <Button onClick={this.reset}>重置</Button>
  606. </div>
  607. <div className="patent-table">
  608. <Spin spinning={this.state.loading}>
  609. <Table columns={this.state.columns}
  610. dataSource={this.state.dataSource}
  611. //rowSelection={rowSelection}
  612. pagination={this.state.pagination}
  613. onRowClick={this.tableRowClick} />
  614. </Spin>
  615. </div>
  616. <DemandDetail
  617. data={this.state.RowData}
  618. showDesc={this.state.showDesc}
  619. closeDesc={this.closeDesc} />
  620. </div >
  621. );
  622. }
  623. });
  624. export default DemandOrderList;
  625. // <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
  626. // disabled={!hasSelected}
  627. // onClick={this.delectRow}>删除<Icon type="minus" /></Button>