pressList.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711
  1. import React from 'react';
  2. import { Button, Input, Select, Spin, Table, message,DatePicker, Form ,Modal,Tabs} from 'antd';
  3. import $ from 'jquery/src/ajax';
  4. import moment from 'moment';
  5. import { getLiquidationStatus,getjiedian,getNewOrderStatus,getProjectStatus} from '@/tools.js';
  6. import './customer.less';
  7. const IntentionCustomer = Form.create()(React.createClass({
  8. loadData(pageNo) {
  9. this.setState({
  10. visitModul:false,
  11. loading: true,
  12. ispage:pageNo,
  13. modalVisible:false
  14. });
  15. $.ajax({
  16. method: "get",
  17. dataType: "json",
  18. crossDomain: false,
  19. url: globalConfig.context +"/api/admin/newOrder/dunOrderNewList",
  20. data: {
  21. pageNo: pageNo || 1,
  22. pageSize: this.state.pagination.pageSize,
  23. name: this.state.customerName,//名称
  24. orderNo: this.state.orderNo,//订单编号
  25. depId: this.state.departmenttSearch,//订单部门
  26. adminName:this.state.adminName,//责任人名称
  27. starTime: this.state.releaseDate[0],//开始时间
  28. endTime: this.state.releaseDate[1],//结束时间
  29. specially:1,
  30. newStatus: this.state.newStatus,
  31. },
  32. success: function(data) {
  33. let theArr = [];
  34. if(data.error.length || data.data.list == "") {
  35. if(data.error && data.error.length) {
  36. message.warning(data.error[0].message);
  37. };
  38. } else {
  39. for(let i = 0; i < data.data.list.length; i++) {
  40. let thisdata = data.data.list[i];
  41. theArr.push({
  42. key: i + 1,
  43. id:thisdata.id,//ID
  44. contractNo: thisdata.contractNo,
  45. orderNo: thisdata.orderNo,//订单编号
  46. totalAmount:thisdata.totalAmount,//签单金额
  47. settlementAmount:thisdata.settlementAmount,//已收款
  48. accountsReceivable:thisdata.accountsReceivable,//应收款
  49. uncollectedAmount:thisdata.uncollectedAmount,//应收款
  50. orderStatus:thisdata.orderStatus,//订单状态
  51. projectStatus:thisdata.projectStatus,//项目状态
  52. liquidationStatus:thisdata.liquidationStatus,//结算状态
  53. signDate:thisdata.signDate,//签单时间
  54. userName:thisdata.userName,//客户名称
  55. salesmanName:thisdata.salesmanName,//营销员名称
  56. dunSubject:thisdata.dunSubject,//催收科目
  57. startDate:thisdata.startDate,//催收启动时间
  58. depName:thisdata.depName,//部门名称
  59. contractNo:thisdata.contractNo,
  60. dunStatus: thisdata.dunStatus == 0 ? "未触发" : "已触发"
  61. });
  62. };
  63. this.state.pagination.total = data.data.totalCount;
  64. this.state.pagination.current = data.data.pageNo;
  65. };
  66. if(data.data&&data.data.list&&!data.data.list.length){
  67. this.state.pagination.total=0
  68. }
  69. this.setState({
  70. dataSource: theArr,
  71. pageNo: pageNo,
  72. pagination: this.state.pagination,
  73. selectedRowKeys:[]
  74. });
  75. }.bind(this),
  76. }).always(function() {
  77. this.setState({
  78. loading: false
  79. });
  80. }.bind(this));
  81. },
  82. loadDatas(dunId) {
  83. this.setState({
  84. loading: true,
  85. });
  86. $.ajax({
  87. method: "get",
  88. dataType: "json",
  89. crossDomain: false,
  90. url: globalConfig.context +"/api/admin/newOrder/selectDunLogList",
  91. data: {
  92. dunId:dunId,
  93. },
  94. success: function(data) {
  95. let theArr = [];
  96. if(data.error.length || data.data == "") {
  97. if(data.error && data.error.length) {
  98. message.warning(data.error[0].message);
  99. };
  100. } else {
  101. for(let i = 0; i < data.data.length; i++) {
  102. let thisdata = data.data[i];
  103. theArr.push({
  104. key: i,
  105. id:thisdata.id,//ID
  106. dunId: thisdata.dunId,//催款ID
  107. dumBy:thisdata.dumBy,//催款人
  108. dumTime:thisdata.dumDate,//催款时间
  109. remarks:thisdata.remarks,//备注
  110. });
  111. };
  112. };
  113. this.setState({
  114. dataSources: theArr,
  115. });
  116. }.bind(this),
  117. }).always(function() {
  118. this.setState({
  119. loading: false
  120. });
  121. }.bind(this));
  122. },
  123. getInitialState() {
  124. return {
  125. newStatus: 1,
  126. page: 1,
  127. releaseDate: [],
  128. selectedRowKeys: [],
  129. orgCodeUrl: [],
  130. departmentArr: [],
  131. paginations: false,
  132. pagination: {
  133. defaultCurrent: 1,
  134. defaultPageSize: 10,
  135. showQuickJumper: true,
  136. pageSize: 10,
  137. onChange: function(page) {
  138. this.loadData(page);
  139. }.bind(this),
  140. showTotal: function(total) {
  141. return "共" + total + "条数据";
  142. }
  143. },
  144. columns: [
  145. {
  146. title: "序号",
  147. dataIndex: "key",
  148. key: "key"
  149. },
  150. {
  151. title: "合同编号",
  152. dataIndex: "contractNo",
  153. key: "contractNo"
  154. },
  155. {
  156. title: "订单编号",
  157. dataIndex: "orderNo",
  158. key: "orderNo"
  159. },
  160. {
  161. title: "客户名称",
  162. dataIndex: "userName",
  163. key: "userName",
  164. render: text => {
  165. return text && text.length > 9 ? text.substr(0, 9) + "..." : text;
  166. }
  167. },
  168. {
  169. title: "订单负责人",
  170. dataIndex: "salesmanName",
  171. key: "salesmanName"
  172. },
  173. {
  174. title: "订单部门",
  175. dataIndex: "depName",
  176. key: "depName"
  177. },
  178. {
  179. title: "订单状态",
  180. dataIndex: "orderStatus",
  181. key: "orderStatus",
  182. render: text => {
  183. return getNewOrderStatus(text);
  184. }
  185. },
  186. {
  187. title: "项目状态",
  188. dataIndex: "projectStatus",
  189. key: "projectStatus",
  190. render: text => {
  191. return getProjectStatus(text);
  192. }
  193. },
  194. {
  195. title: "签单金额(万元)",
  196. dataIndex: "totalAmount",
  197. key: "totalAmount"
  198. },
  199. {
  200. title: "已收款(万元)",
  201. dataIndex: "settlementAmount",
  202. key: "settlementAmount"
  203. },
  204. {
  205. title: "未收款(万元)",
  206. dataIndex: "uncollectedAmount",
  207. key: "uncollectedAmount"
  208. },
  209. {
  210. title: "结算状态",
  211. dataIndex: "liquidationStatus",
  212. key: "liquidationStatus",
  213. render: text => {
  214. return getLiquidationStatus(text);
  215. }
  216. },
  217. {
  218. title: "催收科目",
  219. dataIndex: "dunSubject",
  220. key: "dunSubject"
  221. // render: text => {
  222. // return getjiedian(text);
  223. // }
  224. },
  225. {
  226. title: "应收款(万元)",
  227. dataIndex: "accountsReceivable",
  228. key: "accountsReceivable"
  229. },
  230. {
  231. title: "催款状态",
  232. dataIndex: "dunStatus",
  233. key: "dunStatus"
  234. },
  235. {
  236. title: "催款启动日期",
  237. dataIndex: "startDate",
  238. key: "startDate"
  239. },
  240. {
  241. title: "签单时间",
  242. dataIndex: "signDate",
  243. key: "signDate"
  244. },
  245. {
  246. title: "催收操作",
  247. dataIndex: "abc",
  248. key: "abc",
  249. render: (text, record) => {
  250. return (
  251. <div>
  252. <Button
  253. onClick={e => {
  254. e.stopPropagation(), this.visit(record);
  255. }}
  256. type="primary"
  257. >
  258. 添加催款记录
  259. </Button>
  260. </div>
  261. );
  262. }
  263. }
  264. ],
  265. data: [],
  266. dataSource: [],
  267. columnsX: [
  268. {
  269. title: "催款人",
  270. dataIndex: "dumBy",
  271. key: "dumBy"
  272. },
  273. {
  274. title: "催款时间",
  275. dataIndex: "dumTime",
  276. key: "dumTime"
  277. },
  278. {
  279. title: "催款情况",
  280. dataIndex: "remarks",
  281. key: "remarks"
  282. }
  283. ],
  284. dataSources: []
  285. };
  286. },
  287. //页面加载函数
  288. componentWillMount() {
  289. this.departmentList();
  290. this.loadData();
  291. },
  292. //进入新增拜访记录
  293. visit(record) {
  294. this.setState({
  295. visible:true,
  296. dunId:record.id
  297. })
  298. },
  299. // //整行点击
  300. tableRowClick(record) {
  301. this.setState({
  302. visibles:true,
  303. });
  304. this.loadDatas(record.id);
  305. },
  306. //新增催款记录
  307. examOk(){
  308. $.ajax({
  309. method: "post",
  310. dataType: "json",
  311. crossDomain: false,
  312. url: globalConfig.context +"/api/admin/newOrder/createDunLog",
  313. data: {
  314. dunId:this.state.dunId,
  315. dumTime:this.state.dumTime,
  316. remarks:this.state.remarks,
  317. },
  318. success: function(data) {
  319. if(data.error.length || data.data.list == "") {
  320. if(data.error && data.error.length) {
  321. message.warning(data.error[0].message);
  322. };
  323. } else {
  324. message.success("新增催款记录成功~");
  325. this.setState({
  326. visible:false,
  327. });
  328. this.loadData();
  329. this.resets();
  330. };
  331. }.bind(this),
  332. }).always(function() {
  333. this.setState({
  334. loading: false
  335. });
  336. }.bind(this));
  337. },
  338. //关闭输入理由框
  339. noCancel(){
  340. this.setState({
  341. noVisible:false
  342. })
  343. },
  344. //搜索
  345. search() {
  346. this.setState({
  347. //signBillVisible:false
  348. })
  349. this.loadData();
  350. },
  351. //重置
  352. reset() {
  353. this.setState({
  354. signBillVisible:false
  355. })
  356. this.state.orderNo='';
  357. this.state.customerName='';
  358. this.state.adminName='';
  359. this.state.departmenttSearch=undefined;
  360. this.state.releaseDate[0] = undefined;
  361. this.state.releaseDate[1] = undefined;
  362. this.loadData();
  363. },
  364. resets(){
  365. this.state.orderNo='';
  366. this.state.customerName='';
  367. this.state.adminName='';
  368. this.state.departmenttSearch=undefined;
  369. this.state.releaseDate[0] = undefined;
  370. this.state.releaseDate[1] = undefined;
  371. },
  372. getOrgCodeUrl(e) {
  373. this.setState({ orgCodeUrl: e });
  374. },
  375. //关闭详情
  376. visitCancel(){
  377. this.setState({
  378. visible:false
  379. })
  380. this.resets();
  381. },
  382. visitOk(){
  383. this.setState({
  384. visible:false
  385. })
  386. this.resets();
  387. },
  388. //关闭详情
  389. visitCancels(){
  390. this.setState({
  391. visibles:false
  392. })
  393. this.resets();
  394. },
  395. //导出
  396. exportExec(){
  397. var data = {
  398. name: this.state.customerName?this.state.customerName:undefined,//客户名称
  399. adminName:this.state.adminName?this.state.adminName:undefined,//订单负责人
  400. orderNo: this.state.orderNo?this.state.orderNo:undefined,//订单编号
  401. starTime: this.state.releaseDate[0]?this.state.releaseDate[0]:undefined,
  402. endTime: this.state.releaseDate[1]?this.state.releaseDate[1]:undefined,
  403. depId: this.state.departmenttSearch ? this.state.departmenttSearch : undefined,//订单部门
  404. specially:1,
  405. pageSize: 9999,
  406. newStatus: this.state.newStatus
  407. }
  408. window.location.href=(globalConfig.context+'/api/admin/newOrder/exportOrderDunData?'+$.param(data));
  409. },
  410. visitOks(){
  411. this.setState({
  412. visibles:false
  413. })
  414. this.resets();
  415. },
  416. //部门
  417. departmentList() {
  418. this.setState({
  419. loading: true
  420. });
  421. $.ajax({
  422. method: "get",
  423. dataType: "json",
  424. crossDomain: false,
  425. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  426. data: {
  427. },
  428. success: function(data) {
  429. let thedata = data.data;
  430. let theArr = [];
  431. if(!thedata) {
  432. if(data.error && data.error.length) {
  433. message.warning(data.error[0].message);
  434. };
  435. thedata = {};
  436. } else {
  437. thedata.map(function(item, index) {
  438. theArr.push({
  439. key: index,
  440. name: item.name,
  441. id: item.id,
  442. })
  443. })
  444. }
  445. this.setState({
  446. departmentArr: theArr,
  447. })
  448. }.bind(this),
  449. }).always(function() {
  450. this.setState({
  451. loading: false
  452. });
  453. }.bind(this));
  454. },
  455. render() {
  456. const formItemLayout = {
  457. labelCol: { span: 8 },
  458. wrapperCol: { span: 14 },
  459. };
  460. const FormItem = Form.Item;
  461. const { RangePicker } = DatePicker;
  462. const rowSelection = {
  463. selectedRowKeys: this.state.selectedRowKeys,
  464. onChange: (selectedRowKeys, selectedRows) => {
  465. this.setState({
  466. modalVisible:false,
  467. selectedRows: selectedRows.slice(-1),
  468. selectedRowKeys: selectedRowKeys.slice(-1)
  469. });
  470. },
  471. onSelect: (recordt) => {
  472. this.setState({
  473. modalVisible:false,
  474. recordt: recordt.id
  475. })
  476. },
  477. };
  478. let departmentArr = this.state.departmentArr || [];
  479. const { TabPane } = Tabs;
  480. return (
  481. <div className="user-content">
  482. <div className="content-title">
  483. <span>催款节点统计</span>
  484. </div>
  485. <div className="user-search">
  486. <Tabs
  487. defaultActiveKey="1"
  488. onChange={this.callback}
  489. className="test">
  490. <TabPane tab="导出催款列表" key="2">
  491. <Button
  492. type="primary"
  493. onClick={this.exportExec}
  494. style={{ float: "left", marginTop: 10,marginBottom: 10,marginLeft:10,marginRight:10}}
  495. >
  496. 导出催款列表
  497. </Button>
  498. </TabPane>
  499. <TabPane tab="搜索" key="1">
  500. <Input
  501. placeholder="客户名称"
  502. style={{ width: "150px", marginBottom: "10px" ,marginRight:10,marginLeft:10}}
  503. value={this.state.customerName}
  504. onChange={e => {
  505. this.setState({ customerName: e.target.value });
  506. }}
  507. />
  508. <Input
  509. placeholder="营销员名称"
  510. style={{ width: "150px", marginBottom: "10px" }}
  511. value={this.state.adminName}
  512. onChange={e => {
  513. this.setState({ adminName: e.target.value });
  514. }}
  515. />
  516. <Input
  517. placeholder="订单编号"
  518. style={{ width: "150px" }}
  519. value={this.state.orderNo}
  520. onChange={e => {
  521. this.setState({ orderNo: e.target.value });
  522. }}
  523. />
  524. <Select
  525. placeholder="选择部门"
  526. style={{ width: 150, marginRight: "10px" }}
  527. value={this.state.departmenttSearch}
  528. onChange={e => {
  529. this.setState({ departmenttSearch: e });
  530. }}
  531. >
  532. {departmentArr.map(function(item) {
  533. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  534. })}
  535. </Select>
  536. <Select
  537. placeholder="选择催款节点类型"
  538. style={{ width: 150, marginRight: "10px" }}
  539. value={this.state.newStatus == 0 ? "旧催款节点" : "新催款节点"}
  540. onChange={e => {
  541. this.setState({ newStatus: e });
  542. }}
  543. >
  544. <Select.Option key={0}>{"旧催款节点"}</Select.Option>
  545. <Select.Option key={1}>{"新催款节点"}</Select.Option>
  546. </Select>
  547. <span style={{ marginRight: "10px" }}>下单时间 :</span>
  548. <RangePicker
  549. value={[
  550. this.state.releaseDate[0]
  551. ? moment(this.state.releaseDate[0])
  552. : null,
  553. this.state.releaseDate[1]
  554. ? moment(this.state.releaseDate[1])
  555. : null
  556. ]}
  557. onChange={(data, dataString) => {
  558. this.setState({ releaseDate: dataString });
  559. }}
  560. />
  561. <Button
  562. type="primary"
  563. onClick={this.search}
  564. style={{ marginLeft: "10px",marginRight: 10}}
  565. >
  566. 搜索
  567. </Button>
  568. <Button onClick={this.reset}>重置</Button>
  569. </TabPane>
  570. </Tabs>
  571. </div>
  572. <div className="patent-table">
  573. <Spin spinning={this.state.loading}>
  574. <Table
  575. columns={this.state.columns}
  576. dataSource={this.state.dataSource}
  577. pagination={this.state.pagination}
  578. scroll={{ x: "max-content", y: 0 }}
  579. onRowClick={this.tableRowClick}
  580. bordered
  581. size="small"
  582. />
  583. </Spin>
  584. <Modal
  585. className="customeDetails"
  586. footer=""
  587. title="新增催款记录"
  588. width="500px"
  589. visible={this.state.visible}
  590. onOk={this.visitOk}
  591. onCancel={this.visitCancel}
  592. >
  593. <Form
  594. layout="horizontal"
  595. onSubmit={this.handleSubmit}
  596. id="demand-form"
  597. style={{ paddingBottom: "40px" }}
  598. >
  599. <Spin spinning={this.state.loading}>
  600. <div className="clearfix">
  601. <div className="clearfix">
  602. <FormItem
  603. className="half-item"
  604. {...formItemLayout}
  605. label="催款时间"
  606. >
  607. <DatePicker
  608. style={{
  609. marginTop: "2px",
  610. width: "240px",
  611. height: "32px"
  612. }}
  613. showTime
  614. format="YYYY-MM-DD"
  615. onOk={() => {}}
  616. value={
  617. this.state.dumTime ? moment(this.state.dumTime) : null
  618. }
  619. onChange={(data, dataString) => {
  620. this.setState({ dumTime: dataString });
  621. }}
  622. />
  623. </FormItem>
  624. </div>
  625. <div className="clearfix">
  626. <FormItem
  627. labelCol={{ span: 4 }}
  628. wrapperCol={{ span: 16 }}
  629. label="催款情况"
  630. >
  631. <Input
  632. type="textarea"
  633. placeholder="请输入催款情况"
  634. rows={4}
  635. value={this.state.remarks}
  636. onChange={e => {
  637. this.setState({ remarks: e.target.value });
  638. }}
  639. />
  640. </FormItem>
  641. </div>
  642. <div className="clearfix">
  643. <Button
  644. className="cancel"
  645. type="primary"
  646. onClick={this.examOk}
  647. style={{ marginLeft: "50px" }}
  648. htmlType="submit"
  649. >
  650. 添加
  651. </Button>
  652. <Button
  653. className="cancel"
  654. type="ghost"
  655. onClick={this.visitCancel}
  656. style={{ marginLeft: "50px" }}
  657. >
  658. 取消
  659. </Button>
  660. </div>
  661. </div>
  662. </Spin>
  663. </Form>
  664. </Modal>
  665. <Modal
  666. className="customeDetails"
  667. footer=""
  668. title="催款记录查看"
  669. width="500px"
  670. visible={this.state.visibles}
  671. onOk={this.visitOks}
  672. onCancel={this.visitCancels}
  673. >
  674. <div className="user-content">
  675. <div className="patent-table">
  676. <Spin spinning={this.state.loading}>
  677. <Table
  678. columns={this.state.columnsX}
  679. dataSource={this.state.dataSources}
  680. rowSelection={rowSelection}
  681. pagination={this.state.paginations}
  682. // onRowClick={this.tableRowClick}
  683. />
  684. </Spin>
  685. </div>
  686. </div>
  687. </Modal>
  688. </div>
  689. </div>
  690. );
  691. }
  692. }));
  693. export default IntentionCustomer;