accountDetails.jsx 39 KB

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