accountDetails.jsx 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093
  1. import React, { Component } from "react";
  2. import { Form, Input, Button, message, Modal, Spin, Table } from "antd";
  3. import {
  4. ShowModal, splitUrl, getAccountName, getSecondaryAccountName,
  5. getVehicleName, getTypeName, commonAdd, dealBigMoney
  6. } from "../../../tools"
  7. import ImgList from "../../../common/imgList";
  8. import ReactToPrint from "react-to-print";
  9. import moment from "moment";
  10. import $ from "jquery/src/ajax";
  11. import './accountReview.less';
  12. const FormItem = Form.Item;
  13. class AccountDetails extends Component {
  14. constructor(props) {
  15. super(props);
  16. this.state = {
  17. editAmount: false,
  18. isTable: true,
  19. loading: false,
  20. visible: "",
  21. data: {},
  22. logvisible: false,
  23. logdataSour: [],
  24. logcolumns: [
  25. {
  26. title: "审核人",
  27. dataIndex: "auditorName",
  28. key: "auditorName"
  29. },
  30. {
  31. title: "操作",
  32. dataIndex: "status",
  33. key: "status",
  34. width: 120,
  35. render: (text, record) => {
  36. return (
  37. <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#1D4FEA"][text] }}>
  38. {["【发起】", "【通过】", "【完成】", "【驳回】", "【重新发起】"][text]}
  39. {this.state.processStatus == record.processStatus && !record.id &&
  40. <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
  41. </span>
  42. );
  43. },
  44. },
  45. {
  46. title: "操作时间",
  47. dataIndex: "createTimeStr",
  48. key: "createTimeStr",
  49. width: 88,
  50. },
  51. {
  52. title: "备注",
  53. dataIndex: "remarks",
  54. key: "remarks",
  55. render: (text, record) => {
  56. return (
  57. <div style={{ minWidth: 250 }}>{text}</div>
  58. )
  59. }
  60. }
  61. ],
  62. columns: [
  63. {
  64. title: "序号",
  65. dataIndex: "a",
  66. key: "a",
  67. width: "2%",
  68. render: (text, record, index) => {
  69. return (
  70. <div>{index + 1}</div>
  71. )
  72. }
  73. },
  74. {
  75. title: "费用时间",
  76. dataIndex: "agreeTime",
  77. key: "agreeTime",
  78. width: "6%",
  79. render: (text, record) => {
  80. return (
  81. <div>{!!text ? text : record.startTime}</div>
  82. )
  83. }
  84. },
  85. {
  86. title: "出差时长",
  87. dataIndex: "duration",
  88. key: "duration",
  89. width: "4%",
  90. render: (text, record) => {
  91. return (
  92. <div>{record.types == 1 ? text : ""}</div>
  93. )
  94. }
  95. },
  96. {
  97. title: "出差地址",
  98. dataIndex: "districtName",
  99. key: "districtName",
  100. width: "12%",
  101. render: (text, record) => {
  102. return (
  103. <div>{text}</div>
  104. )
  105. }
  106. },
  107. {
  108. title: "出差企业",
  109. dataIndex: "userNames",
  110. key: "userNames",
  111. width: "12%",
  112. render: (text, record) => {
  113. return (
  114. <div>{text}</div>
  115. )
  116. }
  117. },
  118. {
  119. title: "合同编号",
  120. dataIndex: "contractNo",
  121. key: "contractNo",
  122. width: "8%",
  123. render: (text, record) => {
  124. return (
  125. <div>{text}</div>
  126. )
  127. }
  128. },
  129. {
  130. title: "交通工具",
  131. dataIndex: "cost",
  132. key: "cost",
  133. width: "10%",
  134. render: (text, record) => {
  135. return (
  136. <div>{!!text ? text : (!!record.vehicle && record.type == 1 ? (
  137. getVehicleName(record.vehicle, record.vehicleOther) +
  138. "(" + record.startDistrict + " - " + record.endDistrict + ")"
  139. ) : getTypeName(record.type, record.typeOther))}</div>
  140. )
  141. }
  142. },
  143. {
  144. title: "费用",
  145. dataIndex: "amount",
  146. key: "amount",
  147. width: "4%",
  148. render: (text, record) => {
  149. return (
  150. <div>{text}</div>
  151. )
  152. }
  153. },
  154. {
  155. title: "实报",
  156. dataIndex: "realAmount",
  157. key: "realAmount",
  158. render: (text, record) => {
  159. return (
  160. <div style={{ color: "red", cursor: !record.cost && this.props.isOperate && "pointer" }}
  161. onClick={() => {
  162. !record.cost && this.props.isOperate &&
  163. this.setState({
  164. editAmount: true,
  165. upAmount: text,
  166. upId: record.id,
  167. })
  168. }}
  169. >{text}</div>
  170. )
  171. }
  172. },
  173. {
  174. title: "类型",
  175. dataIndex: "types",
  176. key: "types",
  177. width: "8%",
  178. render: (text, record) => {
  179. return (
  180. <div>{getAccountName(text, record.typesOther)}</div>
  181. )
  182. }
  183. },
  184. {
  185. title: "出差事由",
  186. dataIndex: "plan",
  187. key: "plan",
  188. width: "10%",
  189. render: (text, record) => {
  190. return (
  191. <div>{text}</div>
  192. )
  193. }
  194. },
  195. {
  196. title: "报销订单/部门",
  197. dataIndex: "orderNo",
  198. key: "orderNo",
  199. width: "10%",
  200. render: (text, record) => {
  201. return (
  202. <div>
  203. <div>{text}</div>
  204. <div>{record.applyDepName}</div>
  205. </div>
  206. )
  207. }
  208. },
  209. {
  210. title: "报销事由",
  211. dataIndex: "remarks",
  212. key: "remarks",
  213. width: "10%",
  214. render: (text, record) => {
  215. return (
  216. <div>{text}</div>
  217. )
  218. }
  219. },
  220. ]
  221. };
  222. }
  223. componentDidMount() {
  224. const { id } = this.props
  225. !!id && this.getDetails(id)
  226. }
  227. // 报销信息详情
  228. getDetails(id) {
  229. this.setState({
  230. loading: true,
  231. });
  232. $.ajax({
  233. method: "get",
  234. dataType: "json",
  235. crossDomain: false,
  236. url: globalConfig.context + "/api/admin/expenseAccount/mainExpense",
  237. data: { id, },
  238. success: function (data) {
  239. ShowModal(this);
  240. this.setState({
  241. loading: false,
  242. });
  243. if (data.error.length === 0) {
  244. let allData = data.data;
  245. let allList = [];
  246. for (var i = 0; i < allData.sonList.length; i++) {
  247. let dlist = allData.sonList[i].detList
  248. for (var j = 0; j < dlist.length; j++) {
  249. let obj = dlist[j]
  250. allData.sonList[0].detList[0].contractNo = allData.contractNo; // 合同编号
  251. allData.sonList[0].detList[0].orderNo = allData.orderNo; // 订单号
  252. allData.sonList[0].detList[0].applyDepName = allData.applyDepName; // 部门
  253. allData.sonList[0].detList[0].remarks = allData.remarks; // 报销事由
  254. dlist[0].duration = allData.sonList[i].duration; // 费用时间
  255. dlist[0].districtName = allData.sonList[i].districtName; // 出差地址
  256. dlist[0].userNames = allData.sonList[i].userNames; // 出差企业
  257. dlist[0].plan = allData.sonList[i].plan; // 出差事由
  258. dlist[0].types = allData.sonList[i].type; // 报销类型
  259. dlist[0].typesOther = allData.sonList[i].typeOther;
  260. if (allData.sonList[i].type == 2) { // 非业务报销
  261. obj.type = allData.sonList[i].secondaryType;
  262. obj.typeOther = allData.sonList[i].secondaryTypeOther;
  263. } else if (allData.sonList[i].type == 3 || allData.sonList[i].type == 0) { // 第三方付款 其他
  264. obj.cost = "费用"
  265. } else if (allData.sonList[i].type == 4) { // 申请借支
  266. obj.cost = "借支费用"
  267. } else if (allData.sonList[i].type == 4) { // 申请抵扣
  268. obj.cost = "抵扣费用"
  269. }
  270. allList.push(obj)
  271. }
  272. allList.push({ id: allData.sonList[i].id, cost: "小计", amount: allData.sonList[i].totalAmount, realAmount: allData.sonList[i].realAmount })
  273. }
  274. allList.push({ id: allData.id, cost: "合计", amount: allData.totalAmount, realAmount: allData.realAmount })
  275. this.setState({
  276. data: data.data,
  277. newList: allList,
  278. })
  279. // console.log(allData, "==", allList)
  280. // this.setState({
  281. // data: data.data,
  282. // imgs: data.data.attachmentUrl
  283. // ? splitUrl(data.data.attachmentUrl, ",", globalConfig.avatarHost + "/upload")
  284. // : [],
  285. // })
  286. // this.getAccountList(id)
  287. // this.getLogData(id)
  288. } else {
  289. message.warning(data.error[0].message)
  290. }
  291. }.bind(this),
  292. }).always(
  293. function () {
  294. this.setState({
  295. loading: false,
  296. });
  297. }.bind(this)
  298. );
  299. }
  300. // 报销费用详情
  301. // getAccountList(eaid) {
  302. // const { data } = this.state
  303. // $.ajax({
  304. // method: "get",
  305. // dataType: "json",
  306. // crossDomain: false,
  307. // url: globalConfig.context + "/api/admin/expenseAccount/details/list",
  308. // data: { eaid, },
  309. // success: function (datas) {
  310. // if (datas.error.length === 0) {
  311. // let sum = 0
  312. // for (var i = 0; i < datas.data.length; i++) {
  313. // sum = commonAdd(sum, datas.data[i].amount)
  314. // }
  315. // let leftList = JSON.parse(JSON.stringify(datas.data)) || []
  316. // let jsonArray = []
  317. // if (data.type != 4 && data.type != 5 && data.debitTotalAmount) {
  318. // leftList.push({ "other": "预借支", "amount": data.debitTotalAmount },)
  319. // }
  320. // if (data.type != 4 && data.type != 5) {
  321. // leftList.push(
  322. // { "other": "总金额", "amount": sum },
  323. // { "other": "实报金额", "amount": (sum > data.debitTotalAmount) ? commonAdd(sum, -data.debitTotalAmount) : 0 })
  324. // }
  325. // if (data.type == 1) {
  326. // // 差旅费
  327. // jsonArray = [
  328. // { "head": `支付公司:${data.payDepName}` },
  329. // { "head": `事由:${data.remarks}` },
  330. // { "head": `公出企业:${data.userNames}` },
  331. // { "head": `公出地点:${data.districtName}` },
  332. // { "head": `时间:${moment(data.releaseStartStr).format('YYYY-MM-DD HH:mm') + " 至 " + moment(data.releaseEndStr).format('YYYY-MM-DD HH:mm')}` },
  333. // { "head": `公出时长:${data.duration}` },
  334. // ]
  335. // } else if (data.type == 3) {
  336. // // 第三方付款
  337. // jsonArray = [
  338. // { "head": `支付公司:${data.payDepName}` },
  339. // { "head": `事由:${data.remarks}` },
  340. // ]
  341. // } else {
  342. // // 通用
  343. // jsonArray = [
  344. // { "head": `事由:${data.remarks}` },
  345. // ]
  346. // }
  347. // let newArray = []
  348. // if (jsonArray.length >= leftList.length) {
  349. // for (var i = 0; i < leftList.length; i++) {
  350. // jsonArray[i] = Object.assign(jsonArray[i], leftList[i])
  351. // }
  352. // newArray = jsonArray
  353. // } else {
  354. // for (var i = 0; i < jsonArray.length; i++) {
  355. // leftList[i] = Object.assign(jsonArray[i], leftList[i])
  356. // }
  357. // newArray = leftList
  358. // }
  359. // newArray.push({}, {})
  360. // this.setState({
  361. // list: datas.data || [],
  362. // newList: newArray,
  363. // total: sum,
  364. // })
  365. // } else {
  366. // message.warning(datas.error[0].message);
  367. // }
  368. // }.bind(this),
  369. // }).always(
  370. // function () {
  371. // this.setState({
  372. // loading: false,
  373. // });
  374. // }.bind(this)
  375. // );
  376. // }
  377. isHere(list = []) {
  378. for (var i = 0; i < list.length; i++) {
  379. if (!list[i].id) {
  380. this.setState({
  381. processStatus: list[i].processStatus
  382. })
  383. return
  384. }
  385. }
  386. }
  387. // 日志
  388. getLogData(eaid) {
  389. $.ajax({
  390. method: "get",
  391. dataType: "json",
  392. crossDomain: false,
  393. url: globalConfig.context + "/api/admin/expenseAccount/log/list",
  394. data: { eaid },
  395. success: function (data) {
  396. if (data.error.length === 0) {
  397. this.setState({
  398. logdataSour: data.data || []
  399. });
  400. this.isHere(data.data || [])
  401. } else {
  402. message.warning(data.error[0].message);
  403. }
  404. }.bind(this)
  405. }).always(
  406. function () {
  407. }.bind(this)
  408. );
  409. }
  410. // 审核
  411. toExamine(num) {
  412. const { checkData, reason } = this.state
  413. if (!reason) {
  414. message.warning("请填写审核说明~");
  415. return;
  416. }
  417. this.setState({
  418. loading: true,
  419. });
  420. $.ajax({
  421. method: "POST",
  422. dataType: "json",
  423. crossDomain: false,
  424. url: globalConfig.context + "/api/admin/expenseAccount/examine",
  425. data: {
  426. id: checkData.id,
  427. reason,
  428. status: num,//1同意 3驳回
  429. },
  430. }).done(
  431. function (data) {
  432. if (!data.error.length) {
  433. message.success("审核成功!");
  434. this.setState({
  435. visible: "",
  436. reason: "",
  437. showDetails: false,
  438. checkData: {},
  439. });
  440. this.getDetails(this.state.data.id)
  441. } else {
  442. message.warning(data.error[0].message);
  443. }
  444. }.bind(this)
  445. );
  446. }
  447. distinct(arr, key) {
  448. let hash = {};
  449. let result = [];
  450. for (let i = arr.length - 1; i >= 0; i--) {
  451. let value = arr[i][key];
  452. if (!hash[value]) {
  453. hash[value] = true;
  454. result.unshift(arr[i]);
  455. }
  456. }
  457. return result;
  458. }
  459. // 修改实报金额
  460. updateRealAmount() {
  461. this.setState({
  462. upLoading: true,
  463. })
  464. $.ajax({
  465. method: "POST",
  466. dataType: "json",
  467. crossDomain: false,
  468. url: globalConfig.context + "/api/admin/expenseAccount/updateRealAmount",
  469. data: {
  470. id: this.state.upId,
  471. amount: this.state.upAmount,
  472. },
  473. }).done(
  474. function (data) {
  475. this.setState({
  476. upLoading: false,
  477. })
  478. if (!data.error.length) {
  479. message.success("修改成功!");
  480. this.setState({
  481. editAmount: false,
  482. upId: "",
  483. });
  484. this.getDetails(this.state.data.id)
  485. } else {
  486. message.warning(data.error[0].message);
  487. }
  488. }.bind(this)
  489. );
  490. }
  491. render() {
  492. const { TextArea } = Input
  493. const { data, visible, newList, logdataSour, columns } = this.state
  494. const { onCancel } = this.props
  495. const formItemLayout = {
  496. labelCol: { span: 5 },
  497. wrapperCol: { span: 18 },
  498. };
  499. return (
  500. <Modal
  501. maskClosable={false}
  502. visible={true}
  503. onOk={false}
  504. onCancel={onCancel}
  505. width={1400}
  506. title={<span style={{ fontWeight: "bold" }}>报销详情
  507. <Button
  508. type="primary"
  509. style={{ marginLeft: 30 }}
  510. onClick={() => { this.setState({ isTable: !this.state.isTable }) }}
  511. >{this.state.isTable ? "切换列表显示" : "切换表格显示"}</Button>
  512. </span>}
  513. footer=""
  514. >
  515. <Spin spinning={this.state.loading}>
  516. <div className="m_body"
  517. ref={(e) => {
  518. this.refs.all = e;
  519. }}
  520. >
  521. {this.state.isTable
  522. ? <div className="m_table">
  523. <div className="m_title">报销明细表</div>
  524. <div className="m_head">
  525. <div>报销编号:{data.checkNo}</div>
  526. <div>申请部门:{data.applyDepName}</div>
  527. <div>收款方式:{data.bank + " " + data.accounts + " " + data.name}</div>
  528. <div>报销人:{data.aname}</div>
  529. <div>报销日期:{moment(data.createTimeStr).format('YYYY年MM月DD日')}</div>
  530. </div>
  531. <Table
  532. columns={columns}
  533. dataSource={newList}
  534. bordered
  535. size="middle"
  536. pagination={false}
  537. />
  538. {/* <div className="m_head">
  539. <div>报销公司:{data.applyDepName}</div>
  540. <div>报销人:{data.aname}</div>
  541. </div> */}
  542. </div>
  543. : <Form layout="horizontal" id="demand-form">
  544. <Spin spinning={this.state.loading}>
  545. <div className="clearfix">
  546. <FormItem
  547. {...formItemLayout}
  548. label="报销编号"
  549. >
  550. <span>{data.checkNo}</span>
  551. </FormItem>
  552. </div>
  553. <div className="clearfix">
  554. <FormItem
  555. {...formItemLayout}
  556. label="总金额"
  557. >
  558. <span>{data.totalAmount}</span>
  559. </FormItem>
  560. </div>
  561. <div className="clearfix">
  562. <FormItem
  563. {...formItemLayout}
  564. label="报销至订单"
  565. >
  566. <div>
  567. <div>{data.buyerName}</div>
  568. <div>{data.contractNo}</div>
  569. </div>
  570. </FormItem>
  571. </div>
  572. <div className="clearfix">
  573. <FormItem
  574. {...formItemLayout}
  575. label="报销时间"
  576. >
  577. <span>{data.createTimeStr}</span>
  578. </FormItem>
  579. </div>
  580. {data.type == 1 &&
  581. <div>
  582. <div style={{ fontSize: 13, fontWeight: "bold" }}>公出信息</div>
  583. <div className="clearfix">
  584. <FormItem
  585. {...formItemLayout}
  586. label="公出企业"
  587. >
  588. <span>{data.userNames}</span>
  589. </FormItem>
  590. </div>
  591. <div className="clearfix">
  592. <FormItem
  593. {...formItemLayout}
  594. label="公出地点"
  595. >
  596. <span>{data.districtName}</span>
  597. </FormItem>
  598. </div>
  599. <div className="clearfix">
  600. <FormItem
  601. {...formItemLayout}
  602. label="时间"
  603. >
  604. <span>{data.releaseStartStr} 至 {data.releaseEndStr}</span>
  605. </FormItem>
  606. </div>
  607. <div className="clearfix">
  608. <FormItem
  609. {...formItemLayout}
  610. label="公出时长"
  611. >
  612. <span>{data.duration}小时</span>
  613. </FormItem>
  614. </div>
  615. </div>}
  616. <div style={{ fontSize: 13, fontWeight: "bold" }}>报销详细</div>
  617. <div className="clearfix">
  618. <FormItem
  619. {...formItemLayout}
  620. label="报销人"
  621. >
  622. <span>{data.aname}</span>
  623. </FormItem>
  624. </div>
  625. <div className="clearfix">
  626. <FormItem
  627. {...formItemLayout}
  628. label="报销公司"
  629. >
  630. <span>{data.applyDepName}</span>
  631. </FormItem>
  632. </div>
  633. <div className="clearfix">
  634. <FormItem
  635. {...formItemLayout}
  636. label="支付公司"
  637. >
  638. <span>{data.payDepName}</span>
  639. </FormItem>
  640. </div>
  641. <div className="clearfix">
  642. <FormItem
  643. labelCol={{ span: 5 }}
  644. wrapperCol={{ span: 18 }}
  645. label="报销事由"
  646. >
  647. <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
  648. {data.remarks}
  649. </p>
  650. </FormItem>
  651. </div>
  652. <div style={{ fontSize: 13, fontWeight: "bold" }}>报销费用详细</div>
  653. {
  654. data.sonList.map(it =>
  655. <div key={it.id} style={{ borderBottom: "1px solid #000" }}>
  656. <div className="clearfix">
  657. <FormItem
  658. {...formItemLayout}
  659. label="报销金额"
  660. >
  661. <span>{it.totalAmount}(元)</span>
  662. </FormItem>
  663. </div>
  664. <div className="clearfix">
  665. <FormItem
  666. {...formItemLayout}
  667. label="报销类型"
  668. >
  669. <span>
  670. {getAccountName(it.type, it.typeOther)}
  671. {it.type == 2 && (" - " + getSecondaryAccountName(it.secondaryType, it.secondaryTypeOther))}
  672. </span>
  673. </FormItem>
  674. </div>
  675. {/* 差旅费显示 */}
  676. {it.type == 1 &&
  677. it.detList.map(item =>
  678. item.type == 1
  679. ? <div>
  680. <div className="clearfix" >
  681. <FormItem
  682. {...formItemLayout}
  683. label="交通费"
  684. >
  685. <span>
  686. {getVehicleName(item.vehicle, item.vehicleOther)}
  687. ({item.startDistrict + " - " + item.endDistrict})
  688. {item.amount}(元)
  689. </span>
  690. </FormItem>
  691. </div>
  692. </div>
  693. : <div className="clearfix" >
  694. <FormItem
  695. {...formItemLayout}
  696. label={getTypeName(item.type)}
  697. >
  698. <span>{item.amount}(元)</span>
  699. </FormItem>
  700. </div>
  701. )
  702. }
  703. {/* 通用 */}
  704. {(it.type == 0 || it.type == 2 || it.type == 4 || it.type == 5) &&
  705. it.detList.map(item =>
  706. <div className="clearfix" >
  707. {!!item.agreeTimeStr &&
  708. <FormItem
  709. {...formItemLayout}
  710. label={it.type == 5 ? "支付时间:" : "需付款时间:"}
  711. >
  712. <span>{item.agreeTimeStr.slice(0, 10)}</span>
  713. </FormItem>}
  714. <FormItem
  715. {...formItemLayout}
  716. label={it.type == 4
  717. ? "预借支金额:" : it.type == 5
  718. ? "抵扣金额:" : "金额:"}
  719. >
  720. <span>{item.amount}(元)</span>
  721. </FormItem>
  722. </div>
  723. )
  724. }
  725. {/* 第三方付款 */}
  726. {it.type == 3 &&
  727. it.detList.map(item =>
  728. <div className="clearfix" >
  729. {!!item.agreeTimeStr &&
  730. <FormItem
  731. {...formItemLayout}
  732. label="需付款时间"
  733. >
  734. <span>{item.agreeTimeStr.slice(0, 10)}</span>
  735. </FormItem>
  736. }
  737. <FormItem
  738. {...formItemLayout}
  739. label="付款方式"
  740. >
  741. <span>{["公对公转账"][item.payType]}</span>
  742. </FormItem>
  743. <FormItem
  744. {...formItemLayout}
  745. label="发票类型"
  746. >
  747. <span>{["普票", "专票"][item.invoiceType]}</span>
  748. </FormItem>
  749. <FormItem
  750. {...formItemLayout}
  751. label="发票号"
  752. >
  753. <span>{item.invoiceNo}</span>
  754. </FormItem>
  755. <FormItem
  756. {...formItemLayout}
  757. label="付款单位"
  758. >
  759. <span>{item.payerName}</span>
  760. </FormItem>
  761. <FormItem
  762. {...formItemLayout}
  763. label="开户银行"
  764. >
  765. <span>{item.openBank}</span>
  766. </FormItem>
  767. <FormItem
  768. {...formItemLayout}
  769. label="银行账户"
  770. >
  771. <span>{item.bankAccounts}</span>
  772. </FormItem>
  773. <FormItem
  774. {...formItemLayout}
  775. label="开户行地址"
  776. >
  777. <span>{item.openBankAddress}</span>
  778. </FormItem>
  779. <FormItem
  780. {...formItemLayout}
  781. label="金额(元)"
  782. >
  783. <span>{item.amount}</span>
  784. </FormItem>
  785. </div>
  786. )
  787. }
  788. <div className="clearfix">
  789. <FormItem
  790. {...formItemLayout}
  791. label="附件"
  792. >
  793. <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  794. {!!it.attachmentUrl ? <ImgList domId={it.id} fileList={splitUrl(it.attachmentUrl, ",", globalConfig.avatarHost + "/upload")} ItemWidth={'96px'} /> : <div />}
  795. </div>
  796. </FormItem>
  797. </div>
  798. </div>
  799. )
  800. }
  801. {data.type != 4 && data.debitTotalAmount &&
  802. <div className="clearfix">
  803. <FormItem
  804. {...formItemLayout}
  805. label="预借支"
  806. >
  807. <span style={{ color: "red" }}>{data.debitTotalAmount}(元)</span>
  808. </FormItem>
  809. </div>}
  810. {data.type != 4 && data.type != 5 &&
  811. <div className="clearfix">
  812. <FormItem
  813. {...formItemLayout}
  814. label="总金额"
  815. >
  816. <span style={{ color: "red" }}>{data.totalAmount}(元)</span>
  817. </FormItem>
  818. </div>}
  819. {data.type != 4 && data.type != 5 &&
  820. <div className="clearfix">
  821. <FormItem
  822. {...formItemLayout}
  823. label="实报金额"
  824. >
  825. <span style={{ color: "red" }}>{data.realAmount}(元)</span>
  826. </FormItem>
  827. </div>}
  828. <div style={{ fontSize: 13, fontWeight: "bold" }}>收款详情</div>
  829. {data.type != 3 && data.type != 5 &&
  830. <div>
  831. <div className="clearfix">
  832. <FormItem
  833. {...formItemLayout}
  834. label="收款人"
  835. >
  836. <span>{data.name}</span>
  837. </FormItem>
  838. </div>
  839. <div className="clearfix">
  840. <FormItem
  841. {...formItemLayout}
  842. label="收款银行"
  843. >
  844. <span>{data.bank}</span>
  845. </FormItem>
  846. </div>
  847. <div className="clearfix">
  848. <FormItem
  849. {...formItemLayout}
  850. label="收款账户"
  851. >
  852. <span>{data.accounts}</span>
  853. </FormItem>
  854. </div>
  855. </div>}
  856. <div style={{ fontSize: 13, fontWeight: "bold" }}>审核意见</div>
  857. <ul
  858. style={{
  859. width: "560px",
  860. overflow: "hidden",
  861. paddingLeft: "90px",
  862. position: "relative",
  863. }}
  864. >
  865. {logdataSour.map((item, index) => {
  866. return (
  867. <li
  868. key={index}
  869. style={{
  870. width: "100%",
  871. height: "auto",
  872. wordBreak: "break-all",
  873. marginBottom: "10px",
  874. }}
  875. >
  876. {/* {item.auditorName + ":" + item.status + item.remarks + "(" + item.createTimeStr + ")"} */}
  877. <span>{item.auditorName}:</span>
  878. <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#1D4FEA"][item.status] }}>
  879. {["【发起】,", "【通过】,", "【完成】,", "【驳回】,", "【重新发起】,"][item.status]}
  880. {this.state.processStatus == item.processStatus && !item.id && data.status != 0 &&
  881. <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
  882. </span>
  883. <span>{item.remarks}</span>
  884. <span>&nbsp;&nbsp;&nbsp;{item.createTimeStr}</span>
  885. </li>
  886. );
  887. })}
  888. </ul>
  889. <div className="clearfix" style={{ marginTop: 20 }}>
  890. <Button
  891. type="primary"
  892. style={{
  893. float: "right",
  894. }}
  895. onClick={() => {
  896. this.setState({
  897. logvisible: true
  898. })
  899. this.getLogData(data.id)
  900. }}
  901. >
  902. 查看日志
  903. </Button>
  904. </div>
  905. {this.props.isOperate && data.examine == 1 &&
  906. <div className="clearfix"
  907. style={{ width: 500, margin: "20px auto" }}>
  908. <TextArea
  909. rows={4}
  910. value={this.state.reason}
  911. onChange={(e) => {
  912. this.setState({
  913. reason: e.target.value,
  914. })
  915. }}
  916. placeholder="请填写审核内容"
  917. />
  918. <div
  919. style={{
  920. width: 250,
  921. display: "flex",
  922. justifyContent: "space-between",
  923. margin: "20px auto 0"
  924. }}
  925. >
  926. <Button type="primary"
  927. style={{ margin: 4 }}
  928. onClick={(e) => {
  929. this.setState({
  930. checkData: data
  931. }, () => {
  932. this.toExamine(1)
  933. })
  934. }}
  935. >同意</Button>
  936. <Button type="danger"
  937. style={{ margin: 4 }}
  938. onClick={(e) => {
  939. this.setState({
  940. checkData: data
  941. }, () => {
  942. this.toExamine(3)
  943. })
  944. }}
  945. >驳回</Button>
  946. </div>
  947. </div>
  948. }
  949. </Spin>
  950. </Form>
  951. }
  952. </div>
  953. </Spin>
  954. <ReactToPrint
  955. trigger={() => (
  956. <Button
  957. type="primary"
  958. style={{
  959. float: "right",
  960. marginTop: 10,
  961. position: "absolute",
  962. top: 0,
  963. right: 50,
  964. }}
  965. >
  966. 打印
  967. </Button>
  968. )}
  969. content={() => this.refs.all}
  970. bodyClass="print-body"
  971. />
  972. {
  973. //审核弹窗
  974. this.state.visible != "" &&
  975. <Modal
  976. width="400px"
  977. maskClosable={false}
  978. title="审核"
  979. confirmLoading={this.state.loading}
  980. visible={this.state.visible != ""}
  981. onOk={() => { this.toExamine(visible == "adopt" ? 1 : visible == "reject" && 3) }}
  982. okText={this.state.visible == "adopt" ? "通过" : this.state.visible == "reject" && "驳回"}
  983. onCancel={() => {
  984. this.setState({
  985. visible: '',
  986. reason: "",
  987. checkData: {},
  988. })
  989. }}
  990. >
  991. <TextArea
  992. rows={4}
  993. value={this.state.reason}
  994. onChange={(e) => {
  995. this.setState({
  996. reason: e.target.value,
  997. })
  998. }}
  999. placeholder="请填写审核内容"
  1000. />
  1001. </Modal>
  1002. }
  1003. {
  1004. // 审核日志
  1005. this.state.logvisible &&
  1006. <Modal
  1007. visible={this.state.logvisible}
  1008. className="admin-desc-content"
  1009. width="800px"
  1010. maskClosable={false}
  1011. title="审核日志"
  1012. footer={null}
  1013. onCancel={() => {
  1014. this.setState({
  1015. logvisible: false,
  1016. })
  1017. }}
  1018. >
  1019. <div className="patent-table">
  1020. <Spin spinning={this.state.loading}>
  1021. <Table
  1022. columns={this.state.logcolumns}
  1023. dataSource={this.state.logdataSour}
  1024. pagination={false}
  1025. bordered
  1026. size="small"
  1027. />
  1028. </Spin>
  1029. </div>
  1030. </Modal>
  1031. }
  1032. {
  1033. // 修改实报金额
  1034. this.state.editAmount &&
  1035. <Modal
  1036. visible={this.state.editAmount}
  1037. maskClosable={false}
  1038. title="修改金额"
  1039. cancelText="取消"
  1040. width={250}
  1041. okText="确认"
  1042. onOk={() => { this.updateRealAmount() }}
  1043. onCancel={() => { this.setState({ editAmount: false }) }}
  1044. >
  1045. <Input
  1046. placeholder='请输入'
  1047. type='number'
  1048. value={this.state.upAmount}
  1049. onChange={e => {
  1050. this.setState({
  1051. upAmount: e.target.value
  1052. })
  1053. }}
  1054. />
  1055. </Modal>
  1056. }
  1057. </Modal>
  1058. );
  1059. }
  1060. }
  1061. export default AccountDetails;