shouKuang.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import moment from "moment";
  4. import "./public.less";
  5. import {
  6. Button,
  7. Form,
  8. Input,
  9. Spin,
  10. Table,
  11. Select,
  12. message,
  13. DatePicker,
  14. Modal
  15. } from "antd";
  16. import OrderDesc from "../orderDetail/orderDesc";
  17. import Receivable from "./receivable";
  18. import Assign from "@/manageCenter/publicComponent/assign";
  19. import { getLiquidationStatus, getProcessStatus, getApproval } from "@/tools";
  20. import { ChooseList } from "../../order/orderNew/chooseList"
  21. const FormItem = Form.Item;
  22. const ShouKuang = React.createClass({
  23. departmentList() {
  24. this.setState({
  25. loading: true
  26. });
  27. $.ajax({
  28. method: "get",
  29. dataType: "json",
  30. crossDomain: false,
  31. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  32. data: {},
  33. success: function(data) {
  34. let thedata = data.data;
  35. let theArr = [];
  36. if (!thedata) {
  37. if (data.error && data.error.length) {
  38. message.warning(data.error[0].message);
  39. }
  40. } else {
  41. thedata.map(function(item, index) {
  42. theArr.push({
  43. key: index,
  44. name: item.name,
  45. id: item.id
  46. });
  47. });
  48. }
  49. this.setState({
  50. departmentArr: theArr
  51. });
  52. }.bind(this)
  53. }).always(
  54. function() {
  55. this.setState({
  56. loading: false
  57. });
  58. }.bind(this)
  59. );
  60. },
  61. loadData(pageNo) {
  62. this.state.data = [];
  63. this.setState({
  64. selectedRowKeys: [],
  65. selectedRowKey: [],
  66. page: pageNo,
  67. loading: true
  68. });
  69. $.ajax({
  70. method: "get",
  71. dataType: "json",
  72. crossDomain: false,
  73. url: globalConfig.context + "/api/admin/financial/financeList",
  74. data: {
  75. pageNo: pageNo || 1,
  76. pageSize: this.state.pagination.pageSize,
  77. buyerName: this.state.nameSearch, //客户名称
  78. orderNo: this.state.orderNoSearch,
  79. startTime: this.state.releaseDate[0],
  80. endTime: this.state.releaseDate[1],
  81. departmentId: this.state.departmenttList,
  82. processStatus: this.state.processStatusSearch,
  83. contractNo: this.state.contractNoSearch
  84. },
  85. success: function(data) {
  86. let theArr = [];
  87. if (!data.data || !data.data.list) {
  88. if (data.error && data.error.length) {
  89. message.warning(data.error[0].message);
  90. }
  91. } else {
  92. for (let i = 0; i < data.data.list.length; i++) {
  93. let thisdata = data.data.list[i];
  94. theArr.push({
  95. key: i,
  96. orderNo: thisdata.orderNo,
  97. orderType: thisdata.orderType,
  98. orderStatus: thisdata.orderStatus,
  99. sellerName: thisdata.sellerName,
  100. processStatus: thisdata.processStatus,
  101. liquidationStatus: thisdata.liquidationStatus,
  102. approval: thisdata.approval,
  103. buyerName: thisdata.buyerName,
  104. actuallyTotalAmount: thisdata.actuallyTotalAmount,
  105. signTime: thisdata.signTime,
  106. companyId: thisdata.companyId,
  107. companyName: thisdata.companyName,
  108. buyerId: thisdata.buyerId,
  109. buyerName: thisdata.buyerName,
  110. contractNo: thisdata.contractNo,
  111. createTime: thisdata.createTime,
  112. departmentName: thisdata.departmentName
  113. });
  114. }
  115. }
  116. this.state.pagination.current = data.data.pageNo;
  117. this.state.pagination.total = data.data.totalCount;
  118. if (data.data && data.data.list && !data.data.list.length) {
  119. this.state.pagination.current = 0;
  120. this.state.pagination.total = 0;
  121. }
  122. this.setState({
  123. totalPage: data.data.totalPage,
  124. dataSource: theArr,
  125. pagination: this.state.pagination
  126. });
  127. }.bind(this)
  128. }).always(
  129. function() {
  130. this.setState({
  131. loading: false
  132. });
  133. }.bind(this)
  134. );
  135. },
  136. getInitialState() {
  137. return {
  138. searchMore: true,
  139. assignVisibleX: false,
  140. assignVisibleY: false,
  141. releaseDate: [],
  142. assignDataX: [],
  143. assignDataY: [],
  144. totalPage: 0,
  145. processStatusSearch: "3",
  146. boHuivisible: false,
  147. selectedRowKeys: [],
  148. selectedRows: [],
  149. loading: false,
  150. pagination: {
  151. defaultCurrent: 1,
  152. defaultPageSize: 10,
  153. showQuickJumper: true,
  154. pageSize: 10,
  155. onChange: function(page) {
  156. this.loadData(page);
  157. }.bind(this),
  158. showTotal: function(total) {
  159. return "共" + total + "条数据";
  160. }
  161. },
  162. // 子组件改变的表格title数组
  163. changeList: undefined,
  164. columns: [
  165. {
  166. title: "订单编号",
  167. dataIndex: "orderNo",
  168. key: "orderNo",
  169. // fixed: "left"
  170. },
  171. {
  172. title: "签单日期",
  173. dataIndex: "signTime",
  174. key: "signTime"
  175. },
  176. {
  177. title: "下单日期",
  178. dataIndex: "createTime",
  179. key: "createTime"
  180. },
  181. {
  182. title: "已收款(万元)",
  183. dataIndex: "actuallyTotalAmount",
  184. key: "actuallyTotalAmount"
  185. },
  186. {
  187. title: "客户名称",
  188. dataIndex: "buyerName",
  189. key: "buyerName"
  190. },
  191. {
  192. title: "流程状态",
  193. dataIndex: "processStatus",
  194. key: "processStatus",
  195. render: text => {
  196. return getProcessStatus(text);
  197. }
  198. },
  199. {
  200. title: "订单部门",
  201. dataIndex: "departmentName",
  202. key: "departmentName"
  203. },
  204. {
  205. title: "特批状态",
  206. dataIndex: "approval",
  207. key: "approval",
  208. render: text => {
  209. return getApproval(text);
  210. }
  211. },
  212. {
  213. title: "合同编号",
  214. dataIndex: "contractNo",
  215. key: "contractNo"
  216. },
  217. // {
  218. // title: '订单状态',
  219. // dataIndex: 'orderStatus',
  220. // key: 'orderStatus',
  221. // render: text => { return getNewOrderStatus(text)}
  222. // },
  223. {
  224. title: "订单负责人",
  225. dataIndex: "sellerName",
  226. key: "sellerName"
  227. },
  228. {
  229. title: "结算状态",
  230. dataIndex: "liquidationStatus",
  231. key: "liquidationStatus",
  232. render: text => {
  233. return getLiquidationStatus(text);
  234. }
  235. },
  236. {
  237. title: "操作",
  238. dataIndex: "caozuo",
  239. key: "caouzo",
  240. render: (text, recard) => {
  241. return (
  242. <div>
  243. {recard.liquidationStatus < 2 &&
  244. (recard.approval === 1 || recard.approval === 2) ? (
  245. <Button
  246. style={{ background: "rgb(192,192,192)" }}
  247. onClick={e => {
  248. e.stopPropagation(), this.evaluateX(recard);
  249. }}
  250. >
  251. 收款
  252. </Button>
  253. ) : (
  254. <Button
  255. type="primary"
  256. onClick={e => {
  257. e.stopPropagation(), this.evaluateX(recard);
  258. }}
  259. >
  260. 收款
  261. </Button>
  262. )}
  263. {recard.approval === 2 && recard.processStatus < 4 ? (
  264. <Button
  265. type="primary"
  266. onClick={e => {
  267. e.stopPropagation(), this.evaluateZ(recard);
  268. }}
  269. style={{ marginLeft: "5px" }}
  270. >
  271. 通过
  272. </Button>
  273. ) : (
  274. ""
  275. )}
  276. {!(
  277. recard.actuallyTotalAmount &&
  278. Number(recard.actuallyTotalAmount) > 0
  279. ) && (
  280. <Button
  281. type="danger"
  282. style={{ marginLeft: "5px" }}
  283. onClick={e => {
  284. e.stopPropagation(), this.reject(recard);
  285. }}
  286. >
  287. 驳回
  288. </Button>
  289. )}
  290. {
  291. <Button
  292. type="primary"
  293. style={{ marginLeft: "5px" }}
  294. onClick={e => {
  295. e.stopPropagation(), this.evaluateY(recard, "财务专员");
  296. }}
  297. >
  298. 转交
  299. </Button>
  300. }
  301. </div>
  302. );
  303. }
  304. }
  305. ],
  306. dataSource: [],
  307. searchTime: [,]
  308. };
  309. },
  310. // 特批通过
  311. evaluateZ(record) {
  312. $.ajax({
  313. method: "POST",
  314. dataType: "json",
  315. crossDomain: false,
  316. url: globalConfig.context + "/api/admin/financial/financeApproval",
  317. data: {
  318. orderNo: record.orderNo
  319. }
  320. }).done(
  321. function(data) {
  322. if (!data.error.length) {
  323. message.success("通过成功!");
  324. this.setState({
  325. loading: false
  326. });
  327. this.loadData();
  328. } else {
  329. message.warning(data.error[0].message);
  330. }
  331. }.bind(this)
  332. );
  333. },
  334. /* 收款 */
  335. evaluateX(recard) {
  336. this.state.assignDataX = recard;
  337. this.setState({
  338. assignVisibleX: true
  339. });
  340. },
  341. /* 转交 */
  342. evaluateY(recard, nub) {
  343. this.state.assignDataY = recard;
  344. this.setState({
  345. nub,
  346. assignVisibleY: true
  347. });
  348. },
  349. /* 驳回 */
  350. reject(recard) {
  351. this.setState({
  352. bohuiData: recard,
  353. boHuiVisible: true,
  354. content: ""
  355. });
  356. },
  357. boHuiOk() {
  358. this.setState({
  359. boHuiVisible: false
  360. });
  361. if (
  362. this.state.pagination.current == this.state.totalPage &&
  363. this.state.pagination.total % 10 == 1
  364. ) {
  365. this.loadData(this.state.page - 1);
  366. } else {
  367. this.loadData(this.state.page);
  368. }
  369. },
  370. boHuiCancel() {
  371. this.setState({
  372. boHuiVisible: false
  373. });
  374. },
  375. componentWillMount() {
  376. this.loadData();
  377. this.departmentList();
  378. },
  379. tableRowClick(record) {
  380. this.state.RowData = record;
  381. this.setState({
  382. showDesc: true
  383. });
  384. },
  385. closeDesc(e, s) {
  386. this.state.showDesc = e;
  387. if (s) {
  388. this.loadData(this.state.page);
  389. }
  390. },
  391. closeAssignX(e, s) {
  392. this.state.assignDataX = {};
  393. this.state.assignVisibleX = e;
  394. if (s) {
  395. this.loadData(this.state.page);
  396. }
  397. },
  398. closeAssignY(e, s) {
  399. this.state.assignDataY = {};
  400. this.state.assignVisibleY = e;
  401. if (s) {
  402. this.loadData(this.state.page);
  403. }
  404. },
  405. search() {
  406. this.loadData();
  407. },
  408. reset() {
  409. this.state.nameSearch = "";
  410. this.state.releaseDate = [];
  411. this.state.orderNoSearch = "";
  412. this.state.departmenttList = undefined;
  413. this.state.processStatus = [];
  414. this.state.contractNoSearch = "";
  415. this.loadData();
  416. },
  417. //驳回
  418. boHuiSubmit(e) {
  419. e.preventDefault();
  420. if (!this.state.content) {
  421. message.warning("请填写驳回原因");
  422. return false;
  423. }
  424. this.setState({
  425. loading: true
  426. });
  427. $.ajax({
  428. method: "POST",
  429. dataType: "json",
  430. crossDomain: false,
  431. url: globalConfig.context + "/api/admin/financial/reject",
  432. data: {
  433. orderNo: this.state.bohuiData.orderNo,
  434. reason: this.state.content
  435. }
  436. }).done(
  437. function(data) {
  438. if (!data.error.length) {
  439. message.success("驳回成功!");
  440. this.setState({
  441. loading: false
  442. });
  443. this.boHuiOk();
  444. } else {
  445. message.warning(data.error[0].message);
  446. }
  447. }.bind(this)
  448. );
  449. },
  450. searchSwitch() {
  451. this.setState({
  452. searchMore: !this.state.searchMore
  453. });
  454. },
  455. changeList(arr) {
  456. const newArr = [];
  457. this.state.columns.forEach(item => {
  458. arr.forEach(val => {
  459. if (val === item.title) {
  460. newArr.push(item);
  461. }
  462. });
  463. });
  464. this.setState({
  465. changeList: newArr
  466. });
  467. },
  468. render() {
  469. const { RangePicker } = DatePicker;
  470. var departmentArr = this.state.departmentArr || [];
  471. return (
  472. <div className="user-content">
  473. <div className="content-title">
  474. <span>收款结算</span>
  475. </div>
  476. <div className="user-search">
  477. <Input
  478. placeholder="订单编号"
  479. value={this.state.orderNoSearch}
  480. onChange={e => {
  481. this.setState({ orderNoSearch: e.target.value });
  482. }}
  483. />
  484. <Input
  485. placeholder="客户名称"
  486. value={this.state.nameSearch}
  487. onChange={e => {
  488. this.setState({ nameSearch: e.target.value });
  489. }}
  490. />
  491. <Select
  492. placeholder="订单部门"
  493. style={{ width: 150, marginRight: 10 }}
  494. value={this.state.departmenttList}
  495. onChange={e => {
  496. this.setState({ departmenttList: e });
  497. }}
  498. >
  499. {departmentArr.map(function(item) {
  500. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  501. })}
  502. </Select>
  503. <Input
  504. placeholder="合同编号"
  505. value={this.state.contractNoSearch}
  506. onChange={e => {
  507. this.setState({
  508. contractNoSearch: e.target.value
  509. });
  510. }}
  511. />
  512. <Select
  513. placeholder="流程状态"
  514. onChange={e => {
  515. this.setState({ processStatusSearch: e });
  516. }}
  517. style={{ width: 160, marginRight: 5 }}
  518. value={this.state.processStatusSearch}
  519. >
  520. <Option value="3">未分配</Option>
  521. <Option value="4">已分配</Option>
  522. </Select>
  523. <span style={{ marginRight: 10 }}>下单日期:</span>
  524. <RangePicker
  525. value={[
  526. this.state.releaseDate[0]
  527. ? moment(this.state.releaseDate[0])
  528. : null,
  529. this.state.releaseDate[1]
  530. ? moment(this.state.releaseDate[1])
  531. : null
  532. ]}
  533. onChange={(data, dataString) => {
  534. this.setState({ releaseDate: dataString });
  535. }}
  536. />
  537. <Button
  538. type="primary"
  539. onClick={this.search}
  540. style={{ marginLeft: 10 }}
  541. >
  542. 搜索
  543. </Button>
  544. <Button onClick={this.reset}>重置</Button>
  545. </div>
  546. <ChooseList
  547. columns={this.state.columns}
  548. changeFn={this.changeList}
  549. changeList={this.state.changeList}
  550. top={55}
  551. />
  552. <div className="patent-table">
  553. <Spin spinning={this.state.loading}>
  554. <Table
  555. bordered
  556. columns={
  557. this.state.changeList == undefined
  558. ? this.state.columns
  559. : this.state.changeList
  560. }
  561. dataSource={this.state.dataSource}
  562. rowSelection={false}
  563. scroll={{ x: true, y: 0 }}
  564. pagination={this.state.pagination}
  565. onRowClick={this.tableRowClick.bind(this)}
  566. />
  567. </Spin>
  568. </div>
  569. <Assign
  570. title="任务"
  571. selApi={"/api/admin/newOrder/updateFinance"}
  572. data={this.state.assignDataY}
  573. showDesc={this.state.assignVisibleY}
  574. closeDesc={this.closeAssignY.bind(this)}
  575. // fenpaiData={8}
  576. specially={0}
  577. roleName={this.state.nub}
  578. requestMethod={"get"}
  579. />
  580. <OrderDesc
  581. data={this.state.RowData}
  582. showDesc={this.state.showDesc}
  583. closeDesc={this.closeDesc.bind(this)}
  584. />
  585. <Receivable
  586. title="收款记录"
  587. api="/api/admin/financial/addReceiptsFlow"
  588. data={this.state.assignDataX}
  589. showDesc={this.state.assignVisibleX}
  590. closeDesc={this.closeAssignX.bind(this)}
  591. />
  592. <Modal
  593. visible={this.state.boHuiVisible}
  594. width="400px"
  595. title="驳回备注"
  596. footer=""
  597. onOk={this.boHuiOk}
  598. onCancel={this.boHuiCancel}
  599. >
  600. <Form layout="horizontal" onSubmit={this.boHuiSubmit}>
  601. <Spin spinning={this.state.loading}>
  602. <FormItem
  603. labelCol={{ span: 5 }}
  604. wrapperCol={{ span: 16 }}
  605. label={
  606. <span>
  607. <strong style={{ color: "#f00" }}>*</strong>驳回原因
  608. </span>
  609. }
  610. >
  611. <Input
  612. type="textarea"
  613. rows={4}
  614. placeholder="请输入驳回原因"
  615. value={this.state.content}
  616. onChange={e => {
  617. this.setState({ content: e.target.value });
  618. }}
  619. />
  620. </FormItem>
  621. <FormItem wrapperCol={{ span: 12, offset: 5 }}>
  622. <Button
  623. type="primary"
  624. htmlType="submit"
  625. style={{ marginRight: 20 }}
  626. >
  627. 驳回
  628. </Button>
  629. <Button
  630. type="default"
  631. onClick={() => {
  632. this.boHuiCancel();
  633. }}
  634. >
  635. 取消
  636. </Button>
  637. </FormItem>
  638. </Spin>
  639. </Form>
  640. </Modal>
  641. </div>
  642. );
  643. }
  644. });
  645. export default ShouKuang;