invoiceApplyList.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import "./public.less";
  4. import {
  5. Form,
  6. Button,
  7. Input,
  8. Select,
  9. Spin,
  10. Table,
  11. message,
  12. Modal,
  13. Popconfirm,
  14. Tabs,
  15. Tooltip,
  16. } from "antd";
  17. import {
  18. getProvinceA,
  19. getInvoiceStatus,
  20. getprovince,
  21. getStatus,
  22. getPeople,
  23. splitUrl,
  24. ShowModal,
  25. getProcessStatus,
  26. } from "@/tools";
  27. import { ChooseList } from "../../../../component/manageCenter/order/orderNew/chooseList";
  28. import ShowModalDiv from "@/showModal.jsx";
  29. import OrderDesc from "../orderDetail/orderDesc";
  30. import KaiPiaoModal from "./kaiPiaoModal";
  31. import { getProjectName } from "../../../tools";
  32. import DepartmentList from "../../../common/departmentList";
  33. import LogPopup from "../../../common/logPopup";
  34. import Cascaders from "../../../common/cascaders";
  35. const FormItem = Form.Item;
  36. const { TabPane } = Tabs;
  37. const invoiceApplyList = React.createClass({
  38. loadData(pageNo) {
  39. this.state.data = [];
  40. this.setState({
  41. listLoading: true,
  42. });
  43. $.ajax({
  44. method: "get",
  45. dataType: "json",
  46. crossDomain: false,
  47. url:
  48. globalConfig.context +
  49. "/api/admin/orderInvoice/financeOrderInvoiceList",
  50. data: {
  51. pageNo: pageNo || 1,
  52. pageSize: this.state.pagination.pageSize,
  53. name: this.state.nameSearch, //客户名称
  54. orderNo: this.state.orderNoSearch,
  55. deps: this.state.departmenttList,
  56. status: this.state.statusSearch,
  57. type: 0,
  58. approval: this.state.processStatus,
  59. },
  60. success: function (data) {
  61. ShowModal(this);
  62. let theArr = [];
  63. if (!data.data || !data.data.list) {
  64. if (data.error && data.error.length) {
  65. message.warning(data.error[0].message);
  66. }
  67. } else {
  68. for (let i = 0; i < data.data.list.length; i++) {
  69. let thisdata = data.data.list[i];
  70. theArr.push({
  71. key: i,
  72. id: thisdata.id,
  73. status: thisdata.status,
  74. unitName: thisdata.unitName,
  75. orderNo: thisdata.orderno,
  76. name: thisdata.name,
  77. examineName: thisdata.examineName,
  78. processStatus: thisdata.processStatus,
  79. projectStatus: thisdata.projectStatus,
  80. amount: thisdata.amount,
  81. sumAmount: thisdata.sumAmount,
  82. createTime: thisdata.createTime
  83. ? new Date(thisdata.createTime).toLocaleString()
  84. : "",
  85. settlementAmount: thisdata.settlementAmount,
  86. notAmount: thisdata.notAmount,
  87. });
  88. }
  89. this.state.pagination.current = data.data.pageNo;
  90. this.state.pagination.total = data.data.totalCount;
  91. if (data.data && data.data.list && !data.data.list.length) {
  92. this.state.pagination.current = 0;
  93. this.state.pagination.total = 0;
  94. }
  95. this.setState({
  96. totalPage: data.data.totalPage,
  97. dataSource: theArr,
  98. pagination: this.state.pagination,
  99. });
  100. }
  101. }.bind(this),
  102. }).always(
  103. function () {
  104. this.setState({
  105. listLoading: false,
  106. });
  107. }.bind(this)
  108. );
  109. },
  110. invoiceData() {
  111. this.setState({
  112. loading: true,
  113. });
  114. $.ajax({
  115. method: "get",
  116. dataType: "json",
  117. crossDomain: false,
  118. url:
  119. globalConfig.context + "/api/admin/orderInvoice/selectByIdOrderInvoice",
  120. data: {
  121. id: this.state.id,
  122. },
  123. success: function (data) {
  124. let thisdata = data.data;
  125. let obj = {
  126. examineName: thisdata.examineName,
  127. contractNo: thisdata.contractNo,
  128. orderNo: thisdata.orderNo,
  129. approval: thisdata.approval,
  130. type: thisdata.type,
  131. status: thisdata.status,
  132. remarks: thisdata.remarks,
  133. invoiceType: thisdata.invoiceType,
  134. unitName: thisdata.unitName,
  135. taxNumber: thisdata.taxNumber,
  136. amount: thisdata.amount,
  137. banks: thisdata.banks,
  138. content: thisdata.content,
  139. unitAddress: thisdata.unitAddress,
  140. invoiceRemarks: thisdata.invoiceRemarks,
  141. unitMobile: thisdata.unitMobile,
  142. post: thisdata.post,
  143. addressee: thisdata.addressee,
  144. addresseeMobile: thisdata.addresseeMobile,
  145. addresseeProvince: thisdata.addresseeProvince,
  146. addresseeCity: thisdata.addresseeCity,
  147. addresseeArea: thisdata.addresseeArea,
  148. alreadyAmount: thisdata.alreadyAmount,
  149. recipientAddress: thisdata.recipientAddress,
  150. orgCodeUrl: thisdata.voucherUrl
  151. ? splitUrl(
  152. thisdata.voucherUrl,
  153. ",",
  154. globalConfig.avatarHost + "/upload"
  155. )
  156. : [],
  157. };
  158. this.setState({
  159. modalData: obj,
  160. });
  161. }.bind(this),
  162. }).done(
  163. function () {
  164. this.setState({
  165. loading: false,
  166. });
  167. }.bind(this)
  168. );
  169. },
  170. getInitialState() {
  171. return {
  172. Loading: false,
  173. searchMore: true,
  174. assignVisible: false,
  175. releaseDate: [],
  176. totalPage: 0,
  177. boHuivisible: false,
  178. selectedRowKeys: [],
  179. // 子组件改变的表格title数组
  180. changeList: undefined,
  181. selectedRows: [],
  182. loading: false,
  183. reason: "",
  184. foo: 0,
  185. pagination: {
  186. defaultCurrent: 1,
  187. defaultPageSize: 10,
  188. showQuickJumper: true,
  189. pageSize: 10,
  190. onChange: function (page) {
  191. this.loadData(page);
  192. }.bind(this),
  193. showTotal: function (total) {
  194. return "共" + total + "条数据";
  195. },
  196. },
  197. columns: [
  198. {
  199. title: "编号",
  200. dataIndex: "id",
  201. key: "id",
  202. // fixed: "left"
  203. },
  204. {
  205. title: "客户",
  206. dataIndex: "unitName",
  207. key: "unitName",
  208. width: 100,
  209. render: (text) => {
  210. return (
  211. <Tooltip title={text}>
  212. <div
  213. style={{
  214. maxWidth: "100px",
  215. overflow: "hidden",
  216. textOverflow: "ellipsis",
  217. whiteSpace: "nowrap",
  218. }}
  219. >
  220. {text}
  221. </div>
  222. </Tooltip>
  223. );
  224. },
  225. },
  226. {
  227. title: "跟单人/签单人",
  228. dataIndex: "name",
  229. key: "name",
  230. },
  231. {
  232. title: "开票状态",
  233. dataIndex: "status",
  234. key: "status",
  235. render: (text, record) => {
  236. // return getStatus(text);
  237. return getInvoiceStatus(text, record);
  238. },
  239. },
  240. {
  241. title: "流程状态",
  242. dataIndex: "processStatus",
  243. key: "processStatus",
  244. render: (text, record) => {
  245. return getProcessStatus(text, record.examineName, record.approval);
  246. },
  247. },
  248. {
  249. title: "项目状态",
  250. dataIndex: "projectStatus",
  251. key: "projectStatus",
  252. render: (text) => {
  253. return getProjectName(text);
  254. },
  255. },
  256. {
  257. title: "申请开票(万)",
  258. dataIndex: "amount",
  259. key: "amount",
  260. },
  261. {
  262. title: "已开票(万)",
  263. dataIndex: "sumAmount",
  264. key: "sumAmount",
  265. },
  266. {
  267. title: "已收款",
  268. dataIndex: "settlementAmount",
  269. key: "settlementAmount",
  270. },
  271. {
  272. title: "未收款",
  273. dataIndex: "notAmount",
  274. key: "notAmount",
  275. },
  276. {
  277. title: "申请时间",
  278. dataIndex: "createTime",
  279. key: "createTime",
  280. },
  281. {
  282. title: "操作",
  283. dataIndex: "caozuo",
  284. key: "caouzo",
  285. render: (text, record, index) => {
  286. return (
  287. <div>
  288. {
  289. <Button
  290. type="primary"
  291. onClick={(e) => {
  292. e.stopPropagation(), this.visit(index);
  293. }}
  294. style={{ background: "deepskyblue", border: "none" }}
  295. >
  296. 申请内容
  297. </Button>
  298. }
  299. {record.status !== 2 ? (
  300. <Popconfirm
  301. placement="top"
  302. title="确定要通过吗?"
  303. onConfirm={(e) => {
  304. e.stopPropagation();
  305. this.setState({ examine: 2 }, () => {
  306. this.sende(record);
  307. });
  308. }}
  309. okText="确定"
  310. cancelText="取消"
  311. >
  312. <Button
  313. type="primary"
  314. style={{ marginLeft: "10px" }}
  315. onClick={(e) => {
  316. e.stopPropagation();
  317. }}
  318. >
  319. 通过
  320. </Button>
  321. </Popconfirm>
  322. ) : (
  323. ""
  324. )}
  325. {record.status !== 2 ? (
  326. <Popconfirm
  327. placement="top"
  328. title="确定要拒绝吗?"
  329. onConfirm={(e) => {
  330. e.stopPropagation();
  331. this.setState({ examine: 3 }, () => {
  332. this.reject(record);
  333. });
  334. }}
  335. okText="确定"
  336. cancelText="取消"
  337. >
  338. <Button
  339. type="danger"
  340. onClick={(e) => {
  341. e.stopPropagation();
  342. }}
  343. style={{ marginLeft: "10px" }}
  344. >
  345. 拒绝
  346. </Button>
  347. </Popconfirm>
  348. ) : (
  349. ""
  350. )}
  351. {record.status === 2 ? (
  352. <Button
  353. style={{ marginLeft: "10px", color: "black" }}
  354. disabled={true}
  355. >
  356. 已通过
  357. </Button>
  358. ) : (
  359. ""
  360. )}
  361. {
  362. <Button
  363. type="primary"
  364. style={{
  365. marginLeft: "10px",
  366. background: "orangered",
  367. border: "none",
  368. }}
  369. onClick={(e) => {
  370. e.stopPropagation(), this.inRecord(record, index);
  371. }}
  372. >
  373. 开票记录
  374. </Button>
  375. }
  376. </div>
  377. );
  378. },
  379. },
  380. ],
  381. columnsDate: [
  382. {
  383. title: "编号",
  384. dataIndex: "id",
  385. key: "id",
  386. },
  387. {
  388. title: "订单编号",
  389. dataIndex: "orderno",
  390. key: "orderno",
  391. },
  392. {
  393. title: "开票金额(万元)",
  394. dataIndex: "amount",
  395. key: "amount",
  396. },
  397. {
  398. title: "申请时间",
  399. dataIndex: "createTime",
  400. key: "createTime",
  401. },
  402. {
  403. title: "开票状态",
  404. dataIndex: "status",
  405. key: "status",
  406. render: (text, record) => {
  407. return (
  408. <div>
  409. {getInvoiceStatus(text, record)} <LogPopup id={record.id} />
  410. </div>
  411. );
  412. },
  413. },
  414. ],
  415. dataSource: [],
  416. searchTime: [,],
  417. };
  418. },
  419. loadSend(record) {
  420. this.setState({
  421. loading: true,
  422. });
  423. if (this.state.examine === 3 && this.state.reason === "") {
  424. message.warning("拒绝理由不能为空!");
  425. return;
  426. }
  427. $.ajax({
  428. method: "post",
  429. dataType: "json",
  430. crossDomain: false,
  431. url: globalConfig.context + "/api/admin/orderInvoice/financeExamine",
  432. data: {
  433. id: this.state.examine === 2 ? record.id : this.state.id,
  434. examine: this.state.examine,
  435. reason: this.state.reason,
  436. },
  437. success: function () { }.bind(this),
  438. }).done(
  439. function () {
  440. this.setState({
  441. loading: false,
  442. });
  443. if (this.state.examine === 2) {
  444. message.success("通过成功!");
  445. this.loadData();
  446. } else {
  447. message.success("拒绝成功!");
  448. this.resetReason();
  449. this.rejectCancels();
  450. this.loadData();
  451. }
  452. }.bind(this)
  453. );
  454. },
  455. //重置拒绝理由
  456. resetReason() {
  457. this.setState({
  458. reason: "",
  459. });
  460. },
  461. sende(record) {
  462. this.loadSend(record);
  463. },
  464. commit() {
  465. this.loadSend();
  466. this.setState({
  467. avisible: false,
  468. });
  469. },
  470. visit(index) {
  471. this.setState(
  472. {
  473. id: this.state.dataSource[index].id,
  474. avisible: true,
  475. },
  476. () => {
  477. this.invoiceData();
  478. }
  479. );
  480. },
  481. visitCancels() {
  482. this.setState({
  483. avisible: false,
  484. });
  485. },
  486. reject(record) {
  487. this.setState({
  488. visibleR: true,
  489. id: record.id,
  490. });
  491. },
  492. rejectCancels() {
  493. this.setState({
  494. visibleR: false,
  495. });
  496. },
  497. inRecordData() {
  498. this.setState({
  499. loading: true,
  500. });
  501. $.ajax({
  502. method: "get",
  503. dataType: "json",
  504. crossDomain: false,
  505. url:
  506. globalConfig.context +
  507. "/api/admin/orderInvoice/salesmanOrderInvoiceList",
  508. data: {
  509. orderNo: this.state.orderNo2,
  510. },
  511. success: function (data) {
  512. let theArr = [];
  513. let sum = 0;
  514. if (!data.data) {
  515. if (data.error && data.error.length) {
  516. message.warning(data.error[0].message);
  517. }
  518. } else {
  519. for (let i = 0; i < data.data.list.length; i++) {
  520. let thisdata = data.data.list[i];
  521. sum += parseFloat(thisdata.amount);
  522. theArr.push({
  523. id: thisdata.id,
  524. orderno: thisdata.orderno, //订单编号
  525. amount: thisdata.amount, //签单金额
  526. createTime: thisdata.createTime, //流程状态
  527. status: thisdata.status, //结算状态
  528. rejectReason: thisdata.rejectReason,
  529. approval: thisdata.approval, //0非特批 1待审核 2审核通过
  530. examineName: thisdata.examineName,
  531. });
  532. }
  533. }
  534. this.setState({
  535. recordData: theArr,
  536. sum: sum.toFixed(6),
  537. });
  538. }.bind(this),
  539. }).done(
  540. function () {
  541. this.setState({
  542. loading: false,
  543. });
  544. }.bind(this)
  545. );
  546. },
  547. inRecord(record) {
  548. this.setState(
  549. {
  550. bvisible: true,
  551. orderNo2: record.orderNo,
  552. },
  553. () => {
  554. this.inRecordData();
  555. }
  556. );
  557. },
  558. inRecordCanl() {
  559. this.setState({
  560. bvisible: false,
  561. });
  562. },
  563. search() {
  564. this.loadData();
  565. },
  566. componentWillMount() {
  567. this.loadData();
  568. },
  569. reset() {
  570. this.state.nameSearch = "";
  571. this.state.releaseDate = [];
  572. this.state.orderNoSearch = "";
  573. this.state.processStatus = [];
  574. this.state.departmenttList = undefined;
  575. this.state.statusSearch = [];
  576. this.Cascaders.empty();
  577. this.loadData();
  578. },
  579. changeList(arr) {
  580. const newArr = [];
  581. this.state.columns.forEach((item) => {
  582. arr.forEach((val) => {
  583. if (val === item.title) {
  584. newArr.push(item);
  585. }
  586. });
  587. });
  588. this.setState({
  589. changeList: newArr,
  590. });
  591. },
  592. tableRowClick(record) {
  593. this.state.RowData = record;
  594. this.setState({
  595. showDesc: true,
  596. });
  597. },
  598. closeDesc(e, s) {
  599. this.state.showDesc = e;
  600. if (s) {
  601. this.loadData(this.state.page);
  602. }
  603. },
  604. render() {
  605. const formItemLayout = {
  606. labelCol: { span: 8 },
  607. wrapperCol: { span: 14 },
  608. };
  609. return (
  610. <div className="user-content">
  611. <ShowModalDiv ShowModal={this.state.showModal} />
  612. <div className="content-title" style={{ marginBottom: 10 }}>
  613. <span style={{ fontWeight: 900, fontSize: 16 }}>省内开票审核</span>
  614. </div>
  615. <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
  616. <TabPane tab="搜索" key="1">
  617. <div className="user-search">
  618. <Input
  619. placeholder="营销员名称"
  620. value={this.state.nameSearch}
  621. style={{ marginLeft: 10 }}
  622. onChange={(e) => {
  623. this.setState({ nameSearch: e.target.value });
  624. }}
  625. />
  626. <Input
  627. placeholder="订单编号"
  628. value={this.state.orderNoSearch}
  629. onChange={(e) => {
  630. this.setState({ orderNoSearch: e.target.value });
  631. }}
  632. />
  633. <Cascaders
  634. ref={node => this.Cascaders = node}
  635. placeholder="订单部门"
  636. id="id"
  637. name="name"
  638. children="list"
  639. height={28}
  640. onSel={(e) => {
  641. this.setState({
  642. departmenttList: JSON.stringify(e),
  643. });
  644. }}
  645. />
  646. {/* <DepartmentList
  647. value={this.state.departmenttList}
  648. onChange={(e) => {
  649. this.setState({ departmenttList: e });
  650. }}
  651. /> */}
  652. <Button
  653. type="primary"
  654. onClick={this.search}
  655. style={{ marginLeft: 10 }}
  656. >
  657. 搜索
  658. </Button>
  659. <Button onClick={this.reset}>重置</Button>
  660. </div>
  661. </TabPane>
  662. <TabPane tab="更改表格数据" key="2">
  663. <div style={{ marginTop: 10, marginLeft: 10 }}>
  664. <ChooseList
  665. columns={this.state.columns}
  666. changeFn={this.changeList}
  667. changeList={this.state.changeList}
  668. top={55}
  669. />
  670. </div>
  671. </TabPane>
  672. </Tabs>
  673. <div className="patent-table">
  674. <Spin spinning={this.state.listLoading}>
  675. <Table
  676. columns={
  677. this.state.changeList == undefined
  678. ? this.state.columns
  679. : this.state.changeList
  680. }
  681. scroll={{ x: 1500, y: 0 }}
  682. onRowClick={this.tableRowClick}
  683. dataSource={this.state.dataSource}
  684. pagination={this.state.pagination}
  685. bordered
  686. size="small"
  687. />
  688. </Spin>
  689. </div>
  690. <Modal
  691. visible={this.state.visibleR}
  692. className="admin-desc-content"
  693. footer=""
  694. title="拒绝理由"
  695. width="400px"
  696. onCancel={this.rejectCancels}
  697. >
  698. <Input.TextArea
  699. placeholder="请输入拒绝理由"
  700. rows={4}
  701. value={this.state.reason}
  702. onChange={(e) => {
  703. this.setState({ reason: e.target.value });
  704. }}
  705. ></Input.TextArea>
  706. <div className="clearfix" style={{ marginTop: "20px" }}>
  707. <Button
  708. type="primary"
  709. loading={this.state.loading}
  710. onClick={(e) => {
  711. e.stopPropagation(),
  712. this.commit();
  713. }}
  714. style={{ float: "right" }}
  715. >
  716. 提交
  717. </Button>
  718. </div>
  719. </Modal>
  720. <KaiPiaoModal
  721. visible={this.state.avisible}
  722. data={this.state.modalData}
  723. onCancel={this.visitCancels}
  724. loading={this.state.loading}
  725. />
  726. <Modal
  727. visible={this.state.bvisible}
  728. footer=""
  729. title="开票历史记录"
  730. className="admin-desc-content"
  731. width="1200px"
  732. onCancel={this.inRecordCanl}
  733. >
  734. <Spin spinning={this.state.loading}>
  735. <div className="patent-table">
  736. <Table
  737. columns={this.state.columnsDate}
  738. dataSource={this.state.recordData}
  739. pagination={false}
  740. bordered
  741. size="small"
  742. />
  743. <div className="clearfix" style={{ marginTop: "20px" }}>
  744. <FormItem
  745. className="half-item"
  746. {...formItemLayout}
  747. label={<span style={{ fontSize: "14px" }}>开票总计</span>}
  748. >
  749. <span>{this.state.sum + "(万元)"}</span>
  750. </FormItem>
  751. </div>
  752. </div>
  753. </Spin>
  754. </Modal>
  755. <OrderDesc
  756. data={this.state.RowData}
  757. showDesc={this.state.showDesc}
  758. closeDesc={this.closeDesc.bind(this)}
  759. />
  760. </div>
  761. );
  762. },
  763. });
  764. export default invoiceApplyList;