press.jsx 21 KB

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