press.jsx 20 KB

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