pressList.jsx 20 KB

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