huiKuan.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import moment from "moment";
  4. import "./public.less";
  5. import {
  6. Form,
  7. Button,
  8. Input,
  9. Select,
  10. Spin,
  11. Table,
  12. message,
  13. Modal,
  14. Upload,
  15. DatePicker,
  16. Icon,
  17. } from "antd";
  18. import {
  19. getProjectStatus,
  20. getProvinceA,
  21. getInvoiceStatus,
  22. getprovince,
  23. getStatus,
  24. getPeople,
  25. splitUrl
  26. } from "@/tools";
  27. import { ChooseList } from "../../../../component/manageCenter/order/orderNew/chooseList";
  28. import "./huiKuan.less"
  29. const { RangePicker } = DatePicker;
  30. const FormItem = Form.Item;
  31. const { TextArea } = Input;
  32. const HuiKuan = React.createClass({
  33. loadData(pageNo) {
  34. this.state.data = [];
  35. this.setState({
  36. loading: true
  37. });
  38. $.ajax({
  39. method: "get",
  40. dataType: "json",
  41. crossDomain: false,
  42. url:
  43. globalConfig.context +
  44. "/api/admin/orderInvoice/approvalOrderInvoiceList",
  45. data: {
  46. pageNo: pageNo || 1,
  47. pageSize: this.state.pagination.pageSize,
  48. name: this.state.nameSearch, //客户名称
  49. userName: this.state.userName,
  50. status: this.state.status,
  51. orderNo: this.state.orderNoSearch,
  52. orderDep: this.state.departmenttList,
  53. type: 0,
  54. approval: this.state.processStatus
  55. },
  56. success: function(data) {
  57. let theArr = [];
  58. if (!data.data || !data.data.list) {
  59. if (data.error && data.error.length) {
  60. message.warning(data.error[0].message);
  61. }
  62. } else {
  63. for (let i = 0; i < data.data.list.length; i++) {
  64. let thisdata = data.data.list[i];
  65. theArr.push({
  66. key: i,
  67. id: thisdata.id,
  68. status: thisdata.status,
  69. unitName: thisdata.unitName,
  70. orderno: thisdata.orderno,
  71. name: thisdata.name,
  72. processStatus: thisdata.processStatus,
  73. projectStatus: thisdata.projectStatus,
  74. amount: thisdata.amount,
  75. sumAmount: thisdata.sumAmount,
  76. createTime: thisdata.createTime
  77. ? new Date(thisdata.createTime).toLocaleString()
  78. : "",
  79. settlementAmount: thisdata.settlementAmount,
  80. notAmount: thisdata.notAmount,
  81. approval: thisdata.approval
  82. });
  83. }
  84. }
  85. this.state.pagination.current = data.data.pageNo;
  86. this.state.pagination.total = data.data.totalCount;
  87. if (data.data && data.data.list && !data.data.list.length) {
  88. this.state.pagination.current = 0;
  89. this.state.pagination.total = 0;
  90. }
  91. this.setState({
  92. totalPage: data.data.totalPage,
  93. dataSource: theArr,
  94. pagination: this.state.pagination
  95. });
  96. }.bind(this)
  97. }).always(
  98. function() {
  99. this.setState({
  100. loading: false
  101. });
  102. }.bind(this)
  103. );
  104. },
  105. departmentList() {
  106. this.setState({
  107. loading: true
  108. });
  109. $.ajax({
  110. method: "get",
  111. dataType: "json",
  112. crossDomain: false,
  113. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  114. data: {},
  115. success: function(data) {
  116. let thedata = data.data;
  117. let theArr = [];
  118. if (!thedata) {
  119. if (data.error && data.error.length) {
  120. message.warning(data.error[0].message);
  121. }
  122. } else {
  123. thedata.map(function(item, index) {
  124. theArr.push({
  125. key: index,
  126. name: item.name,
  127. id: item.id
  128. });
  129. });
  130. }
  131. this.setState({
  132. departmentArr: theArr
  133. });
  134. }.bind(this)
  135. }).always(
  136. function() {
  137. this.setState({
  138. loading: false
  139. });
  140. }.bind(this)
  141. );
  142. },
  143. getInitialState() {
  144. return {
  145. visible: false,
  146. selectedRowKeys: [], // Check here to configure the default column
  147. loading: false,
  148. searchMore: true,
  149. assignVisible: false,
  150. releaseDate: [],
  151. totalPage: 0,
  152. boHuivisible: false,
  153. selectedRowKeys: [],
  154. selectedRows: [],
  155. // 弹出层数据
  156. modalData: {},
  157. // userName: "",
  158. contractNo: "",
  159. loading: false,
  160. reason: "",
  161. foo: 0,
  162. // 子组件改变的表格title数组
  163. changeList: undefined,
  164. pagination: {
  165. defaultCurrent: 1,
  166. defaultPageSize: 10,
  167. showQuickJumper: true,
  168. pageSize: 10,
  169. onChange: function(page) {
  170. this.loadData(page);
  171. }.bind(this),
  172. showTotal: function(total) {
  173. return "共" + total + "条数据";
  174. }
  175. },
  176. columns: [
  177. {
  178. title: "合同编号",
  179. dataIndex: "id",
  180. key: "id"
  181. // fixed: "left"
  182. },
  183. {
  184. title: "订单编号",
  185. dataIndex: "orderNo",
  186. key: "orderNo"
  187. },
  188. {
  189. title: "客户名称",
  190. dataIndex: "name",
  191. key: "name"
  192. },
  193. {
  194. title: "合同额",
  195. dataIndex: "hetong",
  196. key: "hetong"
  197. },
  198. {
  199. title: "本次回款(万元)",
  200. dataIndex: "benci",
  201. key: "benci"
  202. },
  203. {
  204. title: "回款时间",
  205. dataIndex: "huiTime",
  206. key: "huiTime"
  207. },
  208. {
  209. title: "批量导入时间",
  210. dataIndex: "daoTime",
  211. key: "daoTime"
  212. },
  213. {
  214. title: "备注",
  215. dataIndex: "remake",
  216. key: "remake"
  217. }
  218. ],
  219. columnsDate: [
  220. {
  221. title: "编号",
  222. dataIndex: "id",
  223. key: "id"
  224. },
  225. {
  226. title: "订单编号",
  227. dataIndex: "orderno",
  228. key: "orderno"
  229. },
  230. {
  231. title: "开票金额(万元)",
  232. dataIndex: "amount",
  233. key: "amount"
  234. },
  235. {
  236. title: "申请时间",
  237. dataIndex: "createTime",
  238. key: "createTime"
  239. },
  240. {
  241. title: "开票状态",
  242. dataIndex: "status",
  243. key: "status",
  244. render: text => {
  245. return getInvoiceStatus(text);
  246. }
  247. }
  248. ],
  249. dataSource: [],
  250. // dataSource: [
  251. // {
  252. // id: 1,
  253. // orderNo: "w1",
  254. // name: "张三",
  255. // hetong: 3,
  256. // benci: 1,
  257. // huiTime: "2019-10-11",
  258. // daoTime: "2019-10-11",
  259. // remake: "hhhhh",
  260. // key: "w1"
  261. // },
  262. // {
  263. // id: 2,
  264. // orderNo: "w2",
  265. // name: "王五",
  266. // hetong: 3,
  267. // benci: 1,
  268. // huiTime: "2019-10-11",
  269. // daoTime: "2019-10-11",
  270. // remake: "zzzzzz",
  271. // key: "w2"
  272. // },
  273. // {
  274. // id: 3,
  275. // orderNo: "w3",
  276. // name: "二麻子",
  277. // hetong: 3,
  278. // benci: 1,
  279. // huiTime: "2019-10-11",
  280. // daoTime: "2019-10-11",
  281. // remake: "yyyyyyy",
  282. // key: "w3"
  283. // },
  284. // {
  285. // id: 4,
  286. // orderNo: "w4",
  287. // name: "jax",
  288. // hetong: 3,
  289. // benci: 1,
  290. // huiTime: "2019-10-11",
  291. // daoTime: "2019-10-11",
  292. // remake: "bbbbbb",
  293. // key: "w4"
  294. // }
  295. // ],
  296. upLoadFlag: false,
  297. upLoad: {
  298. name: "file",
  299. action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
  300. headers: {
  301. authorization: "authorization-text"
  302. },
  303. onChange: info => {
  304. if (info.file.status !== "uploading") {
  305. console.log(info.file, info.fileList);
  306. }
  307. if (info.file.status === "done") {
  308. message.success(`${info.file.name} 文件上传成功`);
  309. this.state.upLoadFlag = true;
  310. let dataSource = [
  311. {
  312. id: 1,
  313. orderNo: "w1",
  314. name: "张三",
  315. hetong: 3,
  316. benci: 1,
  317. huiTime: "2019-10-11",
  318. daoTime: "2019-10-11",
  319. remake: "hhhhh",
  320. key: "w1"
  321. },
  322. {
  323. id: 2,
  324. orderNo: "w2",
  325. name: "王五",
  326. hetong: 3,
  327. benci: 1,
  328. huiTime: "2019-10-11",
  329. daoTime: "2019-10-11",
  330. remake: "zzzzzz",
  331. key: "w2"
  332. },
  333. {
  334. id: 3,
  335. orderNo: "w3",
  336. name: "二麻子",
  337. hetong: 3,
  338. benci: 1,
  339. huiTime: "2019-10-11",
  340. daoTime: "2019-10-11",
  341. remake: "yyyyyyy",
  342. key: "w3"
  343. },
  344. {
  345. id: 4,
  346. orderNo: "w4",
  347. name: "jax",
  348. hetong: 3,
  349. benci: 1,
  350. huiTime: "2019-10-11",
  351. daoTime: "2019-10-11",
  352. remake: "bbbbbb",
  353. key: "w4"
  354. }
  355. ]
  356. this.setState({
  357. upLoadFlag: this.state.upLoadFlag,
  358. dataSource
  359. });
  360. } else if (info.file.status === "error") {
  361. message.error(`${info.file.name} 文件上传失败`);
  362. this.state.upLoadFlag = false;
  363. this.setState({
  364. upLoadFlag: this.state.upLoadFlag
  365. });
  366. }
  367. console.log(info);
  368. }
  369. // beforeUpload: (file,fileList) => {
  370. // if (fileList.length = 1) {
  371. // this.state.upLoadFlag = true;
  372. // this.setState({
  373. // upLoadFlag: this.state.upLoadFlag
  374. // });
  375. // } else {
  376. // this.state.upLoadFlag = false;
  377. // this.setState({
  378. // upLoadFlag: this.state.upLoadFlag
  379. // });
  380. // }
  381. // }
  382. }
  383. };
  384. },
  385. search() {
  386. this.loadData();
  387. },
  388. componentWillMount() {
  389. // this.loadData();
  390. this.departmentList();
  391. },
  392. reset() {
  393. this.state.nameSearch = "";
  394. this.state.releaseDate = [];
  395. this.state.orderNoSearch = "";
  396. this.state.userName = "";
  397. this.state.departmenttList = [];
  398. // this.loadData();
  399. },
  400. changeList(arr) {
  401. const newArr = [];
  402. this.state.columns.forEach(item => {
  403. arr.forEach(val => {
  404. if (val === item.title) {
  405. newArr.push(item);
  406. }
  407. });
  408. });
  409. this.setState({
  410. changeList: newArr
  411. });
  412. },
  413. onSelectChange(selectedRowKeys) {
  414. console.log("selectedRowKeys changed: ", selectedRowKeys);
  415. this.setState({ selectedRowKeys });
  416. },
  417. showModal() {
  418. this.setState({
  419. visible: true
  420. });
  421. this.state.dataSource.forEach((item) => {
  422. if(item.key == this.state.selectedRowKeys[0]) {
  423. this.setState({
  424. modalData: item
  425. })
  426. }
  427. })
  428. },
  429. handleOk() {
  430. this.setState({ loading: true });
  431. setTimeout(() => {
  432. this.setState({ loading: false, visible: false });
  433. }, 3000);
  434. },
  435. handleCancel() {
  436. this.setState({ visible: false });
  437. },
  438. render() {
  439. const formItemLayout = {
  440. labelCol: { span: 8 },
  441. wrapperCol: { span: 14 }
  442. };
  443. var departmentArr = this.state.departmentArr || [];
  444. const { loading, selectedRowKeys, visible } = this.state;
  445. const rowSelection = {
  446. selectedRowKeys,
  447. onChange: this.onSelectChange,
  448. hideDefaultSelections: true
  449. };
  450. var departmentArr = this.state.departmentArr || [];
  451. return (
  452. <div className="user-content" style={{ position: "relative" }}>
  453. <div className="content-title">
  454. <span>回款</span>
  455. </div>
  456. <div className="user-search">
  457. <Input
  458. placeholder="合同编号"
  459. value={this.state.nameSearch}
  460. onChange={e => {
  461. this.setState({ nameSearch: e.target.value });
  462. }}
  463. />
  464. <Input
  465. placeholder="订单编号"
  466. value={this.state.orderNoSearch}
  467. onChange={e => {
  468. this.setState({ orderNoSearch: e.target.value });
  469. }}
  470. />
  471. <Input
  472. placeholder="客户名称"
  473. value={this.state.userName}
  474. onChange={e => {
  475. this.setState({ userName: e.target.value });
  476. }}
  477. />
  478. <Select
  479. placeholder="订单部门"
  480. style={{ width: 150, marginRight: 10 }}
  481. value={this.state.departmenttList}
  482. onChange={e => {
  483. this.setState({ departmenttList: e });
  484. }}
  485. >
  486. {departmentArr.map(function(item) {
  487. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  488. })}
  489. </Select>
  490. <Button
  491. type="primary"
  492. onClick={this.search}
  493. style={{ marginLeft: 10 }}
  494. >
  495. 搜索
  496. </Button>
  497. <Button onClick={this.reset}>重置</Button>
  498. </div>
  499. <ChooseList
  500. columns={this.state.columns}
  501. changeFn={this.changeList}
  502. changeList={this.state.changeList}
  503. top={55}
  504. display={"inline-block"}
  505. />
  506. <Button
  507. type="primary"
  508. style={{ marginLeft: 15 }}
  509. disabled={this.state.selectedRowKeys.length == 1 ? false : true}
  510. onClick={this.showModal}
  511. >
  512. 修改单条数据
  513. </Button>
  514. <div className="patent-table">
  515. <div
  516. class={123}
  517. style={{
  518. position: "absolute",
  519. zIndex: 99,
  520. top: 195,
  521. left: "50%",
  522. transform: "translateX(-50%)",
  523. display: this.state.dataSource.length != 0 ? "none" : "block"
  524. }}
  525. >
  526. <Upload {...this.state.upLoad}>
  527. <Button type="primary" disabled={ this.state.upLoadFlag }>
  528. <Icon type="upload" />
  529. 导入回款列表
  530. </Button>
  531. </Upload>
  532. </div>
  533. <Spin spinning={this.state.loading}>
  534. <Table
  535. columns={
  536. this.state.changeList == undefined
  537. ? this.state.columns
  538. : this.state.changeList
  539. }
  540. // scroll={{ x: 1500, y: 0 }}
  541. dataSource={this.state.dataSource}
  542. pagination={this.state.pagination}
  543. rowSelection={rowSelection}
  544. bordered
  545. />
  546. </Spin>
  547. </div>
  548. <Modal
  549. width={800}
  550. visible={visible}
  551. title="收款记录"
  552. onOk={this.handleOk}
  553. onCancel={this.handleCancel}
  554. footer={[
  555. <Button key="back" onClick={this.handleCancel}>
  556. 取消
  557. </Button>,
  558. <Button
  559. key="submit"
  560. type="primary"
  561. loading={loading}
  562. onClick={this.handleOk}
  563. >
  564. 保存
  565. </Button>
  566. ]}
  567. >
  568. <p style={{ marginBottom: 10 }}>
  569. 合同编号:{this.state.modalData.name}
  570. </p>
  571. <p style={{ marginBottom: 10 }}>
  572. 订单编号:{this.state.modalData.name}
  573. </p>
  574. <p style={{ marginBottom: 10 }}>
  575. 客户名称:{this.state.modalData.name}
  576. </p>
  577. <p style={{ marginBottom: 10 }}>
  578. 合同额(万元):
  579. <Input
  580. style={{ width: "auto" }}
  581. value={this.state.modalData.hetong}
  582. onChange={e => {
  583. let val = e.target.value;
  584. this.state.modalData.hetong = val;
  585. this.setState({ modalData: this.state.modalData });
  586. }}
  587. />
  588. </p>
  589. <p style={{ marginBottom: 10 }}>
  590. 本次回款(万元):
  591. <Input
  592. style={{ width: "auto" }}
  593. value={this.state.modalData.benci}
  594. onChange={e => {
  595. let val = e.target.value;
  596. this.state.modalData.benci = val;
  597. this.setState({ modalData: this.state.modalData });
  598. }}
  599. />
  600. </p>
  601. <p style={{ marginBottom: 10 }}>
  602. 回款时间:
  603. <DatePicker
  604. showTime
  605. placeholder="选择回款时间"
  606. value={moment(this.state.modalData.huiTime, "YYYY-MM-DD")}
  607. onChange={(v, e) => {
  608. this.state.modalData.huiTime = e;
  609. console.log(e);
  610. this.setState({ modalData: this.state.modalData });
  611. }}
  612. onOk={() => {}}
  613. />
  614. </p>
  615. <p style={{ marginBottom: 10 }}>
  616. 批量导入时间:{this.state.modalData.daoTime}
  617. </p>
  618. <p style={{ marginBottom: 10 }}>
  619. <span style={{ display: "inline-block", marginBottom: 20 }}>
  620. 备注:
  621. </span>
  622. <TextArea
  623. style={{ width: "70%" }}
  624. value={this.state.modalData.remake}
  625. onChange={e => {
  626. this.state.modalData.remake = e.target.value;
  627. console.log(e);
  628. this.setState({ modalData: this.state.modalData });
  629. }}
  630. placeholder="请输入备注信息"
  631. autosize={{ minRows: 3, maxRows: 5 }}
  632. />
  633. </p>
  634. </Modal>
  635. </div>
  636. );
  637. }
  638. });
  639. export default HuiKuan;