press.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744
  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. import {ChooseList} from "./chooseList";
  8. const IntentionCustomer = Form.create()(React.createClass({
  9. loadData(pageNo) {
  10. this.setState({
  11. visitModul:false,
  12. loading: true,
  13. ispage:pageNo,
  14. modalVisible:false
  15. });
  16. $.ajax({
  17. method: "get",
  18. dataType: "json",
  19. crossDomain: false,
  20. url: globalConfig.context + "/api/admin/newOrder/dunOrderNewList",
  21. data: {
  22. pageNo: pageNo || 1,
  23. pageSize: this.state.pagination.pageSize,
  24. name: this.state.customerName, //名称
  25. orderNo: this.state.orderNo, //订单编号
  26. depId: this.state.departmenttSearch, //订单部门
  27. adminName: this.state.adminName, //责任人名称
  28. starTime: this.state.releaseDate[0], //开始时间
  29. endTime: this.state.releaseDate[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. orderNo: thisdata.orderNo, //订单编号
  45. totalAmount: thisdata.totalAmount, //签单金额
  46. settlementAmount: thisdata.settlementAmount, //已收款
  47. accountsReceivable: thisdata.accountsReceivable, //应收款
  48. uncollectedAmount: thisdata.uncollectedAmount, //应收款
  49. orderStatus: thisdata.orderStatus, //订单状态
  50. projectStatus: thisdata.projectStatus, //项目状态
  51. liquidationStatus: thisdata.liquidationStatus, //结算状态
  52. signDate: thisdata.signDate, //签单时间
  53. userName: thisdata.userName, //客户名称
  54. salesmanName: thisdata.salesmanName, //营销员名称
  55. dunSubject: thisdata.dunSubject, //催收科目
  56. startDate: thisdata.startDate, //催收启动时间
  57. depName: thisdata.depName, //部门名称
  58. contractNo: thisdata.contractNo,
  59. dunStatus: thisdata.dunStatus == 0 ? "未触发" : "已触发"
  60. });
  61. }
  62. this.state.pagination.total = data.data.totalCount;
  63. }
  64. if (data.data && data.data.list && !data.data.list.length) {
  65. this.state.pagination.total = 0;
  66. }
  67. this.setState({
  68. dataSource: theArr,
  69. pageNo: pageNo,
  70. pagination: this.state.pagination,
  71. selectedRowKeys: []
  72. });
  73. }.bind(this)
  74. }).always(
  75. function() {
  76. this.setState({
  77. loading: false
  78. });
  79. }.bind(this)
  80. );
  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. visible: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. pageSize: 9999,
  404. newStatus: this.state.newStatus
  405. }
  406. window.location.href=(globalConfig.context+'/api/admin/newOrder/exportOrderDunData?'+$.param(data));
  407. },
  408. visitOks(){
  409. this.setState({
  410. visibles:false
  411. })
  412. this.resets();
  413. },
  414. //部门
  415. departmentList() {
  416. this.setState({
  417. loading: true
  418. });
  419. $.ajax({
  420. method: "get",
  421. dataType: "json",
  422. crossDomain: false,
  423. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  424. data: {
  425. },
  426. success: function(data) {
  427. let thedata = data.data;
  428. let theArr = [];
  429. if(!thedata) {
  430. if(data.error && data.error.length) {
  431. message.warning(data.error[0].message);
  432. };
  433. thedata = {};
  434. } else {
  435. thedata.map(function(item, index) {
  436. theArr.push({
  437. key: index,
  438. name: item.name,
  439. id: item.id,
  440. })
  441. })
  442. }
  443. this.setState({
  444. departmentArr: theArr,
  445. })
  446. }.bind(this),
  447. }).always(function() {
  448. this.setState({
  449. loading: false
  450. });
  451. }.bind(this));
  452. },
  453. changeList(arr) {
  454. const newArr = [];
  455. this.state.columns.forEach(item => {
  456. arr.forEach(val => {
  457. if (val === item.title) {
  458. newArr.push(item);
  459. }
  460. });
  461. });
  462. this.setState({
  463. changeList: newArr
  464. });
  465. },
  466. render() {
  467. const formItemLayout = {
  468. labelCol: { span: 8 },
  469. wrapperCol: { span: 14 },
  470. };
  471. const FormItem = Form.Item;
  472. const { RangePicker } = DatePicker;
  473. const rowSelection = {
  474. selectedRowKeys: this.state.selectedRowKeys,
  475. onChange: (selectedRowKeys, selectedRows) => {
  476. this.setState({
  477. modalVisible:false,
  478. selectedRows: selectedRows.slice(-1),
  479. selectedRowKeys: selectedRowKeys.slice(-1)
  480. });
  481. },
  482. onSelect: (recordt) => {
  483. this.setState({
  484. modalVisible:false,
  485. recordt: recordt.id
  486. })
  487. },
  488. };
  489. let departmentArr = this.state.departmentArr || [];
  490. const { TabPane } = Tabs;
  491. return (
  492. <div className="user-content">
  493. <div className="content-title" style={{ marginBottom: 10 }}>
  494. <span style={{ fontWeight: 900, fontSize: 16 }}>催款节点统计</span>
  495. </div>
  496. <div className="user-search">
  497. <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
  498. <TabPane tab="搜索" key="1">
  499. <Input
  500. placeholder="客户名称"
  501. style={{
  502. width: "150px",
  503. marginBottom: "10px",
  504. marginLeft: 10,
  505. marginRight: 10,
  506. }}
  507. value={this.state.customerName}
  508. onChange={(e) => {
  509. this.setState({ customerName: e.target.value });
  510. }}
  511. />
  512. <Input
  513. placeholder="营销员名称"
  514. style={{
  515. width: "150px",
  516. marginBottom: "10px",
  517. marginRight: 10,
  518. }}
  519. value={this.state.adminName}
  520. onChange={(e) => {
  521. this.setState({ adminName: e.target.value });
  522. }}
  523. />
  524. <Input
  525. placeholder="订单编号"
  526. style={{ width: "150px", marginRight: 10 }}
  527. value={this.state.orderNo}
  528. onChange={(e) => {
  529. this.setState({ orderNo: e.target.value });
  530. }}
  531. />
  532. <Select
  533. placeholder="选择部门"
  534. style={{ width: 150, marginRight: "10px" }}
  535. value={this.state.departmenttSearch}
  536. onChange={(e) => {
  537. this.setState({ departmenttSearch: e });
  538. }}
  539. >
  540. {departmentArr.map(function (item) {
  541. return (
  542. <Select.Option key={item.id}>{item.name}</Select.Option>
  543. );
  544. })}
  545. </Select>
  546. <Select
  547. placeholder="选择催款节点类型"
  548. style={{ width: 150, marginRight: "10px" }}
  549. value={this.state.newStatus == 0 ? "旧催款节点" : "新催款节点"}
  550. onChange={(e) => {
  551. this.setState({ newStatus: e });
  552. }}
  553. >
  554. <Select.Option key={0}>{"旧催款节点"}</Select.Option>
  555. <Select.Option key={1}>{"新催款节点"}</Select.Option>
  556. </Select>
  557. <span style={{ marginRight: "10px" }}>下单时间 :</span>
  558. <RangePicker
  559. value={[
  560. this.state.releaseDate[0]
  561. ? moment(this.state.releaseDate[0])
  562. : null,
  563. this.state.releaseDate[1]
  564. ? moment(this.state.releaseDate[1])
  565. : null,
  566. ]}
  567. onChange={(data, dataString) => {
  568. this.setState({ releaseDate: dataString });
  569. }}
  570. />
  571. <Button
  572. type="primary"
  573. onClick={this.search}
  574. style={{ marginLeft: "10px" }}
  575. >
  576. 搜索
  577. </Button>
  578. <Button onClick={this.reset}>重置</Button>
  579. </TabPane>
  580. <TabPane tab="导出催款列表" key="2">
  581. <Button
  582. type="primary"
  583. onClick={this.exportExec}
  584. style={{ marginBottom: 10, marginTop: 10, marginLeft: 10 }}
  585. >
  586. 导出催款列表
  587. </Button>
  588. </TabPane>
  589. <TabPane tab="更改表格显示数据" key="3">
  590. <div style={{ marginLeft: 10 }}>
  591. <ChooseList
  592. columns={this.state.columns}
  593. changeFn={this.changeList}
  594. changeList={this.state.changeList}
  595. top={55}
  596. margin={11}
  597. />
  598. </div>
  599. </TabPane>
  600. </Tabs>
  601. <div className="patent-table">
  602. <Spin spinning={this.state.loading}>
  603. <Table
  604. columns={
  605. this.state.changeList
  606. ? this.state.changeList
  607. : this.state.columns
  608. }
  609. dataSource={this.state.dataSource}
  610. pagination={this.state.pagination}
  611. onRowClick={this.tableRowClick}
  612. scroll={{ x: "max-content", y: 0 }}
  613. bordered
  614. size="small"
  615. />
  616. </Spin>
  617. </div>
  618. <Modal
  619. className="customeDetails"
  620. footer=""
  621. title="新增催款记录"
  622. width="500px"
  623. visible={this.state.visible}
  624. onOk={this.visitOk}
  625. onCancel={this.visitCancel}
  626. >
  627. <Form
  628. layout="horizontal"
  629. onSubmit={this.handleSubmit}
  630. id="demand-form"
  631. style={{ paddingBottom: "40px" }}
  632. >
  633. <Spin spinning={this.state.loading}>
  634. <div className="clearfix">
  635. <div className="clearfix">
  636. <FormItem
  637. className="half-item"
  638. {...formItemLayout}
  639. label="催款时间"
  640. >
  641. <DatePicker
  642. style={{
  643. marginTop: "2px",
  644. width: "240px",
  645. height: "32px",
  646. }}
  647. showTime
  648. format="YYYY-MM-DD"
  649. onOk={() => {}}
  650. value={
  651. this.state.dumTime ? moment(this.state.dumTime) : null
  652. }
  653. onChange={(data, dataString) => {
  654. this.setState({ dumTime: dataString });
  655. }}
  656. />
  657. </FormItem>
  658. </div>
  659. <div className="clearfix">
  660. <FormItem
  661. labelCol={{ span: 4 }}
  662. wrapperCol={{ span: 16 }}
  663. label="催款情况"
  664. >
  665. <Input
  666. type="textarea"
  667. placeholder="请输入催款情况"
  668. rows={4}
  669. value={this.state.remarks}
  670. onChange={(e) => {
  671. this.setState({ remarks: e.target.value });
  672. }}
  673. />
  674. </FormItem>
  675. </div>
  676. <div className="clearfix">
  677. <Button
  678. className="cancel"
  679. type="primary"
  680. onClick={this.examOk}
  681. style={{ marginLeft: "50px" }}
  682. htmlType="submit"
  683. >
  684. 添加
  685. </Button>
  686. <Button
  687. className="cancel"
  688. type="ghost"
  689. onClick={this.noCancel}
  690. style={{ marginLeft: "50px" }}
  691. >
  692. 取消
  693. </Button>
  694. </div>
  695. </div>
  696. </Spin>
  697. </Form>
  698. </Modal>
  699. <Modal
  700. className="customeDetails"
  701. footer=""
  702. title="催款记录查看"
  703. width="500px"
  704. visible={this.state.visibles}
  705. onOk={this.visitOks}
  706. onCancel={this.visitCancels}
  707. >
  708. <div className="user-content">
  709. <div className="patent-table">
  710. <Spin spinning={this.state.loading}>
  711. <Table
  712. columns={this.state.columnsX}
  713. dataSource={this.state.dataSources}
  714. rowSelection={rowSelection}
  715. pagination={this.state.paginations}
  716. // onRowClick={this.tableRowClick}
  717. />
  718. </Spin>
  719. </div>
  720. </div>
  721. </Modal>
  722. </div>
  723. </div>
  724. );
  725. }
  726. }));
  727. export default IntentionCustomer;