huiKuan.jsx 20 KB

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