accountDetails.jsx 49 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423
  1. import React, { Component } from "react";
  2. import { Form, Input, Button, message, Modal, Spin, Table, Radio, Select, AutoComplete } 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 Print from 'react-print-html';
  10. import moment from "moment";
  11. import $ from "jquery/src/ajax";
  12. import './accountReview.less';
  13. const FormItem = Form.Item;
  14. const RadioGroup = Radio.Group;
  15. class AccountDetails extends Component {
  16. constructor(props) {
  17. super(props);
  18. this.state = {
  19. editA: "",
  20. isTable: true,
  21. sloading: false,
  22. loading: false,
  23. visible: "",
  24. data: {},
  25. logvisible: false,
  26. logdataSour: [],
  27. logcolumns: [
  28. {
  29. title: "审核人",
  30. dataIndex: "auditorName",
  31. key: "auditorName"
  32. },
  33. {
  34. title: "操作",
  35. dataIndex: "status",
  36. key: "status",
  37. width: 120,
  38. render: (text, record) => {
  39. return (
  40. <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#808080", "#1D4FEA"][text] }}>
  41. {["【发起】", "【通过】", "【完成】", "【驳回】", "【撤销】", "【修改】"][text]}
  42. {this.state.processStatus == record.processStatus && !record.id &&
  43. <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
  44. </span>
  45. );
  46. },
  47. },
  48. {
  49. title: "操作时间",
  50. dataIndex: "createTimeStr",
  51. key: "createTimeStr",
  52. width: 88,
  53. },
  54. {
  55. title: "备注",
  56. dataIndex: "remarks",
  57. key: "remarks",
  58. render: (text, record) => {
  59. return (
  60. <div style={{ minWidth: 250 }}>{text}</div>
  61. )
  62. }
  63. }
  64. ],
  65. columns: [
  66. {
  67. title: "序号",
  68. dataIndex: "a",
  69. key: "a",
  70. width: 40,
  71. render: (text, record, index) => {
  72. return (
  73. <div>{index + 1}</div>
  74. )
  75. }
  76. },
  77. {
  78. title: "费用时间",
  79. dataIndex: "agreeTime",
  80. key: "agreeTime",
  81. width: "10%",
  82. render: (text, record) => {
  83. return (
  84. <div>{record.types == 1
  85. ? (moment(record.releaseStart).format("YYYY-MM-DD HH:mm") + " 至 " + moment(record.releaseEnd).format("YYYY-MM-DD HH:mm")) : !!text
  86. ? text : record.startTime}</div>
  87. )
  88. }
  89. },
  90. {
  91. title: "时长",
  92. dataIndex: "duration",
  93. key: "duration",
  94. width: 40,
  95. render: (text, record) => {
  96. return (
  97. <div>{record.types == 1 ? text : ""}</div>
  98. )
  99. }
  100. },
  101. {
  102. title: "出差地址",
  103. dataIndex: "districtName",
  104. key: "districtName",
  105. width: "10%",
  106. render: (text, record) => {
  107. return (
  108. <div>{text}</div>
  109. )
  110. }
  111. },
  112. {
  113. title: "出差企业",
  114. dataIndex: "userNames",
  115. key: "userNames",
  116. width: "10%",
  117. render: (text, record) => {
  118. return (
  119. <div>{text}</div>
  120. )
  121. }
  122. },
  123. {
  124. title: "合同编号",
  125. dataIndex: "contractNo",
  126. key: "contractNo",
  127. width: "8%",
  128. render: (text, record) => {
  129. return (
  130. <div
  131. style={{ minHeight: "15px", cursor: record.types == 1 && "pointer" }}
  132. onClick={() => {
  133. this.setState({
  134. editA: "contractNo",
  135. editTit: "修改合同编号",
  136. upId: record.erid,
  137. // upUserNames: record.userNames,
  138. })
  139. }}
  140. >{text}</div>
  141. )
  142. }
  143. },
  144. {
  145. title: "类型",
  146. dataIndex: "types",
  147. key: "types",
  148. width: "6%",
  149. render: (text, record) => {
  150. return (
  151. <div style={{ color: record.publicReleaseType != null && "red", cursor: text == 0 && "pointer" }}
  152. onClick={() => {
  153. text == 0 &&
  154. this.setState({
  155. editA: "typesOther",
  156. editTit: "修改其他类型说明",
  157. upId: record.erid,
  158. upTypesOther: record.typesOther,
  159. })
  160. }}
  161. >
  162. {getAccountName(text, record.typesOther)}
  163. </div>
  164. )
  165. }
  166. },
  167. {
  168. title: "详细",
  169. dataIndex: "cost",
  170. key: "cost",
  171. width: "8%",
  172. render: (text, record) => {
  173. return (
  174. <div
  175. style={{ cursor: !text && !record.vehicle && record.type != 1 && "pointer" }}
  176. onClick={() => {
  177. !text && !record.vehicle && record.type != 1 &&
  178. this.setState({
  179. editA: "detTypeOther",
  180. editTit: "修改其他详细说明",
  181. upId: record.id,
  182. detTypeOther: record.typeOther,
  183. })
  184. }}
  185. >{!!text ? text : (!!record.vehicle && record.type == 1 ? (
  186. getVehicleName(record.vehicle, record.vehicleOther) +
  187. "(" + record.startDistrict + " - " + record.endDistrict + ")"
  188. ) : getTypeName(record.type, record.typeOther))}</div>
  189. )
  190. }
  191. },
  192. {
  193. title: "费用",
  194. dataIndex: "amount",
  195. key: "amount",
  196. width: "5%",
  197. render: (text, record) => {
  198. return (
  199. <div>{text}</div>
  200. )
  201. }
  202. },
  203. {
  204. title: "实报",
  205. dataIndex: "realAmount",
  206. key: "realAmount",
  207. width: "5%",
  208. render: (text, record) => {
  209. return (
  210. <div style={{ color: "red", cursor: !record.noEdit && this.props.isOperate && "pointer" }}
  211. onClick={() => {
  212. !record.noEdit && this.props.isOperate &&
  213. this.setState({
  214. editA: "amount",
  215. editTit: "修改金额",
  216. upAmount: text,
  217. upId: record.id,
  218. })
  219. }}
  220. >{text}</div>
  221. )
  222. }
  223. },
  224. {
  225. title: "出差事由",
  226. dataIndex: "plan",
  227. key: "plan",
  228. // width: "10%",
  229. render: (text, record) => {
  230. return (
  231. <div>{text}</div>
  232. )
  233. }
  234. },
  235. {
  236. title: "报销订单/部门",
  237. dataIndex: "orderNo",
  238. key: "orderNo",
  239. // width: "10%",
  240. render: (text, record) => {
  241. return (
  242. <div>
  243. <div>{text}</div>
  244. <div>{record.applyDepName}</div>
  245. </div>
  246. )
  247. }
  248. },
  249. // {
  250. // title: "报销事由",
  251. // dataIndex: "remarks",
  252. // key: "remarks",
  253. // // width: "10%",
  254. // render: (text, record) => {
  255. // return (
  256. // <div>{text}</div>
  257. // )
  258. // }
  259. // },
  260. ]
  261. };
  262. }
  263. componentDidMount() {
  264. const { id } = this.props
  265. !!id && this.getDetails(id)
  266. }
  267. // 报销信息详情
  268. getDetails(id) {
  269. this.setState({
  270. loading: true,
  271. });
  272. $.ajax({
  273. method: "get",
  274. dataType: "json",
  275. crossDomain: false,
  276. url: globalConfig.context + "/api/admin/expenseAccount/mainExpense",
  277. data: { id, },
  278. success: function (data) {
  279. ShowModal(this);
  280. this.setState({
  281. loading: false,
  282. });
  283. if (data.error.length === 0) {
  284. let allData = data.data;
  285. let allList = [];
  286. for (var i = 0; i < allData.sonList.length; i++) {
  287. let dlist = allData.sonList[i].detList
  288. for (var j = 0; j < dlist.length; j++) {
  289. let obj = dlist[j]
  290. allData.sonList[0].detList[0].applyDepName = allData.applyDepName; // 部门
  291. allData.sonList[0].detList[0].remarks = allData.remarks; // 报销事由
  292. dlist[0].contractNo = allData.sonList[i].contractNo; // 合同编号
  293. dlist[0].orderNo = allData.sonList[i].orderNo; // 订单号
  294. dlist[0].releaseStart = allData.sonList[i].releaseStart;
  295. dlist[0].releaseEnd = allData.sonList[i].releaseEnd; // 公出时间
  296. dlist[0].duration = allData.sonList[i].duration; // 费用时间
  297. dlist[0].districtName = allData.sonList[i].districtName; // 出差地址
  298. dlist[0].userNames = allData.sonList[i].userNames; // 出差企业
  299. dlist[0].plan = allData.sonList[i].plan; // 出差事由
  300. dlist[0].publicReleaseType = allData.sonList[i].publicReleaseType; // 公出关联
  301. dlist[0].types = allData.sonList[i].type; // 报销类型
  302. dlist[0].erid = allData.sonList[i].id; // 二级报销id
  303. dlist[0].typesOther = allData.sonList[i].typeOther;
  304. if (allData.sonList[i].type == 2) { // 非业务报销
  305. obj.type = allData.sonList[i].secondaryType;
  306. obj.typeOther = allData.sonList[i].secondaryTypeOther;
  307. } else if (allData.sonList[i].type == 3 || allData.sonList[i].type == 0) { // 第三方付款 其他
  308. obj.cost = "费用"
  309. } else if (allData.sonList[i].type == 4) { // 申请借支
  310. obj.cost = "借支费用"
  311. } else if (allData.sonList[i].type == 4) { // 申请抵扣
  312. obj.cost = "抵扣费用"
  313. }
  314. allList.push(obj)
  315. }
  316. allData.sonList[i].settlementAmount != 0 &&
  317. allList.push({ noEdit: true, id: allData.sonList[i].id, cost: "抵扣", amount: allData.sonList[i].settlementAmount, realAmount: " " })
  318. allList.push({ noEdit: true, id: allData.sonList[i].id, cost: "小计", amount: allData.sonList[i].amount, realAmount: allData.sonList[i].realAmount })
  319. }
  320. allList.push({ noEdit: true, id: allData.id, cost: "合计", amount: allData.amount, realAmount: allData.realAmount })
  321. this.setState({
  322. data: data.data,
  323. newList: allList,
  324. })
  325. // this.setState({
  326. // data: data.data,
  327. // imgs: data.data.attachmentUrl
  328. // ? splitUrl(data.data.attachmentUrl, ",", globalConfig.avatarHost + "/upload")
  329. // : [],
  330. // })
  331. // this.getAccountList(id)
  332. this.getLogData(id)
  333. } else {
  334. message.warning(data.error[0].message)
  335. }
  336. }.bind(this),
  337. }).always(
  338. function () {
  339. this.setState({
  340. loading: false,
  341. });
  342. }.bind(this)
  343. );
  344. }
  345. // 报销费用详情
  346. // getAccountList(eaid) {
  347. // const { data } = this.state
  348. // $.ajax({
  349. // method: "get",
  350. // dataType: "json",
  351. // crossDomain: false,
  352. // url: globalConfig.context + "/api/admin/expenseAccount/details/list",
  353. // data: { eaid, },
  354. // success: function (datas) {
  355. // if (datas.error.length === 0) {
  356. // let sum = 0
  357. // for (var i = 0; i < datas.data.length; i++) {
  358. // sum = commonAdd(sum, datas.data[i].amount)
  359. // }
  360. // let leftList = JSON.parse(JSON.stringify(datas.data)) || []
  361. // let jsonArray = []
  362. // if (data.type != 4 && data.type != 5 && data.debitTotalAmount) {
  363. // leftList.push({ "other": "预借支", "amount": data.debitTotalAmount },)
  364. // }
  365. // if (data.type != 4 && data.type != 5) {
  366. // leftList.push(
  367. // { "other": "总金额", "amount": sum },
  368. // { "other": "实报金额", "amount": (sum > data.debitTotalAmount) ? commonAdd(sum, -data.debitTotalAmount) : 0 })
  369. // }
  370. // if (data.type == 1) {
  371. // // 差旅费
  372. // jsonArray = [
  373. // { "head": `支付公司:${data.payDepName}` },
  374. // { "head": `事由:${data.remarks}` },
  375. // { "head": `公出企业:${data.userNames}` },
  376. // { "head": `公出地点:${data.districtName}` },
  377. // { "head": `时间:${moment(data.releaseStartStr).format('YYYY-MM-DD HH:mm') + " 至 " + moment(data.releaseEndStr).format('YYYY-MM-DD HH:mm')}` },
  378. // { "head": `公出时长:${data.duration}` },
  379. // ]
  380. // } else if (data.type == 3) {
  381. // // 第三方付款
  382. // jsonArray = [
  383. // { "head": `支付公司:${data.payDepName}` },
  384. // { "head": `事由:${data.remarks}` },
  385. // ]
  386. // } else {
  387. // // 通用
  388. // jsonArray = [
  389. // { "head": `事由:${data.remarks}` },
  390. // ]
  391. // }
  392. // let newArray = []
  393. // if (jsonArray.length >= leftList.length) {
  394. // for (var i = 0; i < leftList.length; i++) {
  395. // jsonArray[i] = Object.assign(jsonArray[i], leftList[i])
  396. // }
  397. // newArray = jsonArray
  398. // } else {
  399. // for (var i = 0; i < jsonArray.length; i++) {
  400. // leftList[i] = Object.assign(jsonArray[i], leftList[i])
  401. // }
  402. // newArray = leftList
  403. // }
  404. // newArray.push({}, {})
  405. // this.setState({
  406. // list: datas.data || [],
  407. // newList: newArray,
  408. // total: sum,
  409. // })
  410. // } else {
  411. // message.warning(datas.error[0].message);
  412. // }
  413. // }.bind(this),
  414. // }).always(
  415. // function () {
  416. // this.setState({
  417. // loading: false,
  418. // });
  419. // }.bind(this)
  420. // );
  421. // }
  422. isHere(list = []) {
  423. for (var i = 0; i < list.length; i++) {
  424. if (!list[i].id) {
  425. this.setState({
  426. processStatus: list[i].processStatus
  427. })
  428. return
  429. }
  430. }
  431. }
  432. // 日志
  433. getLogData(eaid) {
  434. $.ajax({
  435. method: "get",
  436. dataType: "json",
  437. crossDomain: false,
  438. url: globalConfig.context + "/api/admin/expenseAccount/log/list",
  439. data: { eaid },
  440. success: function (data) {
  441. if (data.error.length === 0) {
  442. this.setState({
  443. logdataSour: data.data || []
  444. });
  445. this.isHere(data.data || [])
  446. } else {
  447. message.warning(data.error[0].message);
  448. }
  449. }.bind(this)
  450. }).always(
  451. function () {
  452. }.bind(this)
  453. );
  454. }
  455. // 审核
  456. toExamine(num) {
  457. const { checkData, reason } = this.state
  458. if (!reason) {
  459. message.warning("请填写审核说明~");
  460. return;
  461. }
  462. this.setState({
  463. loading: true,
  464. });
  465. $.ajax({
  466. method: "POST",
  467. dataType: "json",
  468. crossDomain: false,
  469. url: globalConfig.context + "/api/admin/expenseAccount/examine",
  470. data: {
  471. id: checkData.id,
  472. reason,
  473. status: num,//1同意 3驳回
  474. },
  475. }).done(
  476. function (data) {
  477. if (!data.error.length) {
  478. message.success("审核成功!");
  479. this.setState({
  480. visible: "",
  481. reason: "",
  482. showDetails: false,
  483. checkData: {},
  484. });
  485. this.getDetails(this.state.data.id)
  486. this.getLogData(this.state.data.id)
  487. } else {
  488. message.warning(data.error[0].message);
  489. }
  490. }.bind(this)
  491. );
  492. }
  493. distinct(arr, key) {
  494. let hash = {};
  495. let result = [];
  496. for (let i = arr.length - 1; i >= 0; i--) {
  497. let value = arr[i][key];
  498. if (!hash[value]) {
  499. hash[value] = true;
  500. result.unshift(arr[i]);
  501. }
  502. }
  503. return result;
  504. }
  505. // 修改
  506. updateRealAmount() {
  507. const { editA } = this.state
  508. this.setState({
  509. upLoading: true,
  510. })
  511. if (editA == "typesOther" && !this.state.upTypesOther) {
  512. message.warn("其他类型说明不能为空!");
  513. return
  514. }
  515. if (editA == "remarks" && !this.state.upRemarks) {
  516. message.warn("报销事由不能为空!");
  517. return
  518. }
  519. if (editA == "contractNo" && !this.state.upOrderNo) {
  520. message.warn("请选择合同编号!");
  521. return
  522. }
  523. if (editA == "detTypeOther" && !this.state.detTypeOther) {
  524. message.warn("其他类型说明不能为空!");
  525. return
  526. }
  527. let obj1 = {
  528. id: this.state.upId,
  529. amount: this.state.upAmount,
  530. }
  531. let obj2 = {
  532. id: this.state.upId,
  533. remarks: this.state.upRemarks,
  534. }
  535. let obj3 = {
  536. id: this.state.upId,
  537. typeOther: this.state.upTypesOther,
  538. }
  539. let obj4 = {
  540. id: this.state.upId,
  541. orderNo: this.state.upOrderNo,
  542. }
  543. let obj5 = {
  544. id: this.state.upId,
  545. typeOther: this.state.detTypeOther,
  546. }
  547. $.ajax({
  548. method: "POST",
  549. dataType: "json",
  550. crossDomain: false,
  551. url: globalConfig.context + editA == "amount"
  552. ? "/api/admin/expenseAccount/updateRealAmount" : editA == "detTypeOther"
  553. ? "/api/admin/expenseAccount/updateDetailsTypeOther" : "/api/admin/expenseAccount/updateTypeOther",
  554. data: editA == "amount"
  555. ? obj1 : editA == "remarks"
  556. ? obj2 : editA == "typesOther"
  557. ? obj3 : editA == "contractNo"
  558. ? obj4 : editA == "detTypeOther" && obj5,
  559. }).done(
  560. function (data) {
  561. this.setState({
  562. upLoading: false,
  563. })
  564. if (!data.error.length) {
  565. message.success("修改成功!");
  566. this.setState({
  567. editA: "",
  568. upId: "",
  569. upUserNames: "",
  570. upUserId: "",
  571. upList: [],
  572. });
  573. this.getDetails(this.state.data.id)
  574. } else {
  575. message.warning(data.error[0].message);
  576. }
  577. }.bind(this)
  578. );
  579. }
  580. // 查询合同编号
  581. selectOrderByUid() {
  582. this.setState({
  583. sloading: true
  584. })
  585. $.ajax({
  586. method: "GET",
  587. dataType: "json",
  588. crossDomain: false,
  589. url: "/api/admin/release/selectOrderByUid",
  590. data: {
  591. uid: this.state.upUserId,
  592. },
  593. }).done(
  594. function (data) {
  595. this.setState({
  596. sloading: false
  597. })
  598. if (!data.error.length) {
  599. this.setState({
  600. upList: data.data
  601. })
  602. } else {
  603. message.warning(data.error[0].message);
  604. }
  605. }.bind(this)
  606. );
  607. }
  608. // 查询企业
  609. httpChange(e) {
  610. this.setState({
  611. upUserNames: e,
  612. });
  613. if (e.length >= 1) {
  614. this.supervisor(e);
  615. }
  616. }
  617. //
  618. supervisor(e) {
  619. $.ajax({
  620. method: "get",
  621. dataType: "json",
  622. crossDomain: false,
  623. url: globalConfig.context + "/api/admin/customer/getUserByNames",
  624. data: {
  625. name: e,
  626. type: 1,
  627. pageNo: 1,
  628. pageSize: 10,
  629. },
  630. success: function (data) {
  631. let thedata = data.data;
  632. if (!thedata) {
  633. if (data.error && data.error.length) {
  634. message.warning(data.error[0].message);
  635. }
  636. thedata = {};
  637. }
  638. this.setState({
  639. customerArr: thedata.list,
  640. });
  641. }.bind(this),
  642. }).always(
  643. function () {
  644. }.bind(this)
  645. );
  646. }
  647. selectAuto(value) {
  648. const { customerArr } = this.state
  649. this.setState({
  650. upUserId: customerArr.find((item) => item.name == value).id,
  651. });
  652. }
  653. render() {
  654. const { TextArea } = Input
  655. const { data, visible, newList, logdataSour, columns, customerArr = [] } = this.state
  656. const { onCancel } = this.props
  657. const formItemLayout = {
  658. labelCol: { span: 5 },
  659. wrapperCol: { span: 18 },
  660. };
  661. const radioStyle = {
  662. display: 'block',
  663. height: '30px',
  664. lineHeight: '30px',
  665. };
  666. const options = customerArr.map((group) => (
  667. <Select.Option key={group.id} value={group.name}>
  668. {group.name}
  669. </Select.Option>
  670. ));
  671. return (
  672. <Modal
  673. maskClosable={false}
  674. visible={true}
  675. onOk={false}
  676. onCancel={onCancel}
  677. width={1400}
  678. title={<span style={{ fontWeight: "bold" }}>报销详情
  679. <Button
  680. type="primary"
  681. style={{ marginLeft: 30 }}
  682. onClick={() => { this.setState({ isTable: !this.state.isTable }) }}
  683. >{this.state.isTable ? "切换列表显示" : "切换表格显示"}</Button>
  684. </span>}
  685. footer=""
  686. >
  687. <Spin spinning={this.state.loading}>
  688. <div className="m_body"
  689. ref={ref => {
  690. this.printTemp = ref;
  691. }}
  692. >
  693. {this.state.isTable
  694. ? <div className="m_table">
  695. <div className="m_title">报销明细表</div>
  696. <div className="m_head">
  697. <div>报销编号:{data.checkNo}</div>
  698. <div>申请部门:{data.applyDepName}</div>
  699. <div>报销人:{data.aname}</div>
  700. <div>报销日期:{moment(data.createTimeStr).format('YYYY年MM月DD日')}</div>
  701. <div
  702. style={{ cursor: "pointer" }}
  703. onClick={() => {
  704. this.setState({
  705. editA: "remarks",
  706. editTit: "修改报销事由",
  707. upId: data.id,
  708. upRemarks: data.remarks,
  709. })
  710. }}
  711. >报销事由:{data.remarks}</div>
  712. <div>收款方式:{!data.name ? "" : (data.bank + " " + data.accounts + " " + data.name)}</div>
  713. </div>
  714. <Table
  715. columns={columns}
  716. dataSource={newList}
  717. bordered
  718. size="middle"
  719. pagination={false}
  720. />
  721. <div className="m_head">
  722. <div style={{ width: "100%", marginTop: 8 }}>审核日志:
  723. {
  724. this.state.logdataSour.map(item =>
  725. item.showStatus == 0 && <span key={item.id}>【{item.auditorName}&nbsp;&nbsp;{item.createTimeStr}&nbsp;&nbsp;{item.remarks}】&nbsp;&nbsp;</span>
  726. )
  727. }
  728. </div>
  729. </div>
  730. </div>
  731. : <Form layout="horizontal" id="demand-form">
  732. <Spin spinning={this.state.loading}>
  733. <div className="clearfix">
  734. <FormItem
  735. {...formItemLayout}
  736. label="报销编号"
  737. >
  738. <span>{data.checkNo}</span>
  739. </FormItem>
  740. </div>
  741. {/* <div className="clearfix">
  742. <FormItem
  743. {...formItemLayout}
  744. label="总金额"
  745. >
  746. <span>{data.totalAmount}</span>
  747. </FormItem>
  748. </div> */}
  749. {/* <div className="clearfix">
  750. <FormItem
  751. {...formItemLayout}
  752. label="报销至订单"
  753. >
  754. <div>
  755. <div>{data.buyerName}</div>
  756. <div>{data.contractNo}</div>
  757. </div>
  758. </FormItem>
  759. </div> */}
  760. <div className="clearfix">
  761. <FormItem
  762. {...formItemLayout}
  763. label="报销时间"
  764. >
  765. <span>{data.createTimeStr}</span>
  766. </FormItem>
  767. </div>
  768. {data.type == 1 &&
  769. <div>
  770. <div style={{ fontSize: 13, fontWeight: "bold" }}>公出信息</div>
  771. <div className="clearfix">
  772. <FormItem
  773. {...formItemLayout}
  774. label="公出企业"
  775. >
  776. <span>{data.userNames}</span>
  777. </FormItem>
  778. </div>
  779. <div className="clearfix">
  780. <FormItem
  781. {...formItemLayout}
  782. label="公出地点"
  783. >
  784. <span>{data.districtName}</span>
  785. </FormItem>
  786. </div>
  787. <div className="clearfix">
  788. <FormItem
  789. {...formItemLayout}
  790. label="时间"
  791. >
  792. <span>{data.releaseStartStr} 至 {data.releaseEndStr}</span>
  793. </FormItem>
  794. </div>
  795. <div className="clearfix">
  796. <FormItem
  797. {...formItemLayout}
  798. label="公出时长"
  799. >
  800. <span>{data.duration}小时</span>
  801. </FormItem>
  802. </div>
  803. </div>}
  804. <div style={{ fontSize: 13, fontWeight: "bold" }}>报销详细</div>
  805. <div className="clearfix">
  806. <FormItem
  807. {...formItemLayout}
  808. label="报销人"
  809. >
  810. <span>{data.aname}</span>
  811. </FormItem>
  812. </div>
  813. <div className="clearfix">
  814. <FormItem
  815. {...formItemLayout}
  816. label="报销公司"
  817. >
  818. <span>{data.applyDepName}</span>
  819. </FormItem>
  820. </div>
  821. <div className="clearfix">
  822. <FormItem
  823. {...formItemLayout}
  824. label="支付公司"
  825. >
  826. <span>{data.payDepName}</span>
  827. </FormItem>
  828. </div>
  829. <div className="clearfix">
  830. <FormItem
  831. labelCol={{ span: 5 }}
  832. wrapperCol={{ span: 18 }}
  833. label="报销事由"
  834. >
  835. <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
  836. {data.remarks}
  837. </p>
  838. </FormItem>
  839. </div>
  840. <div style={{ fontSize: 13, fontWeight: "bold" }}>报销费用详细</div>
  841. {
  842. data.sonList.map(it =>
  843. <div key={it.id} style={{ borderBottom: "1px solid #000" }}>
  844. <div className="clearfix">
  845. <FormItem
  846. {...formItemLayout}
  847. label="报销金额"
  848. >
  849. <span style={{ fontWeight: "bold" }}>{it.amount}(元)</span>
  850. </FormItem>
  851. </div>
  852. <div className="clearfix">
  853. <FormItem
  854. {...formItemLayout}
  855. label="报销类型"
  856. >
  857. <span style={{ fontWeight: "bold" }}>
  858. {getAccountName(it.type, it.typeOther)}
  859. {it.type == 2 && (" - " + getSecondaryAccountName(it.secondaryType, it.secondaryTypeOther))}
  860. </span>
  861. </FormItem>
  862. </div>
  863. {
  864. !!it.publicReleaseType &&
  865. <div className="clearfix">
  866. <FormItem
  867. {...formItemLayout}
  868. label="报销来源"
  869. >
  870. <span style={{ fontWeight: "bold" }}>
  871. {["业务公出", "技术公出", "行政公出", "技术协单", "技术助手"][it.publicReleaseType]}
  872. </span>
  873. </FormItem>
  874. </div>
  875. }
  876. {
  877. !!it.contractNo ?
  878. <div className="clearfix">
  879. <FormItem
  880. {...formItemLayout}
  881. label="报销至订单"
  882. >
  883. <span style={{ fontWeight: "bold" }}>{it.contractNo}</span>
  884. </FormItem>
  885. </div>
  886. : <FormItem
  887. {...formItemLayout}
  888. label=" "
  889. ><span style={{ fontWeight: "bold" }}>报销至部门</span></FormItem>
  890. }
  891. {/* 差旅费显示 */}
  892. {it.type == 1 &&
  893. it.detList.map(item =>
  894. item.type == 1
  895. ? <div>
  896. <div className="clearfix" >
  897. <FormItem
  898. {...formItemLayout}
  899. label="交通费"
  900. >
  901. <span>
  902. {getVehicleName(item.vehicle, item.vehicleOther)}
  903. ({item.startDistrict + " - " + item.endDistrict})
  904. {item.amount}(元)
  905. </span>
  906. </FormItem>
  907. </div>
  908. </div>
  909. : <div className="clearfix" >
  910. <FormItem
  911. {...formItemLayout}
  912. label={getTypeName(item.type)}
  913. >
  914. <span>{item.amount}(元)</span>
  915. </FormItem>
  916. </div>
  917. )
  918. }
  919. {/* 通用 */}
  920. {(it.type == 0 || it.type == 2 || it.type == 4 || it.type == 5) &&
  921. it.detList.map(item =>
  922. <div className="clearfix" >
  923. {!!item.agreeTimeStr &&
  924. <FormItem
  925. {...formItemLayout}
  926. label={it.type == 5 ? "支付时间:" : "需付款时间:"}
  927. >
  928. <span>{item.agreeTimeStr.slice(0, 10)}</span>
  929. </FormItem>}
  930. <FormItem
  931. {...formItemLayout}
  932. label={it.type == 4
  933. ? "预借支金额:" : it.type == 5
  934. ? "抵扣金额:" : "金额:"}
  935. >
  936. <span>{item.amount}(元)</span>
  937. </FormItem>
  938. </div>
  939. )
  940. }
  941. {/* 第三方付款 */}
  942. {it.type == 3 &&
  943. it.detList.map(item =>
  944. <div className="clearfix" >
  945. {!!item.agreeTimeStr &&
  946. <FormItem
  947. {...formItemLayout}
  948. label="需付款时间"
  949. >
  950. <span>{item.agreeTimeStr.slice(0, 10)}</span>
  951. </FormItem>
  952. }
  953. <FormItem
  954. {...formItemLayout}
  955. label="付款方式"
  956. >
  957. <span>{["公对公转账"][item.payType]}</span>
  958. </FormItem>
  959. <FormItem
  960. {...formItemLayout}
  961. label="发票类型"
  962. >
  963. <span>{["普票", "专票"][item.invoiceType]}</span>
  964. </FormItem>
  965. <FormItem
  966. {...formItemLayout}
  967. label="发票号"
  968. >
  969. <span>{item.invoiceNo}</span>
  970. </FormItem>
  971. <FormItem
  972. {...formItemLayout}
  973. label="付款单位"
  974. >
  975. <span>{item.payerName}</span>
  976. </FormItem>
  977. <FormItem
  978. {...formItemLayout}
  979. label="开户银行"
  980. >
  981. <span>{item.openBank}</span>
  982. </FormItem>
  983. <FormItem
  984. {...formItemLayout}
  985. label="银行账户"
  986. >
  987. <span>{item.bankAccounts}</span>
  988. </FormItem>
  989. <FormItem
  990. {...formItemLayout}
  991. label="开户行地址"
  992. >
  993. <span>{item.openBankAddress}</span>
  994. </FormItem>
  995. <FormItem
  996. {...formItemLayout}
  997. label="金额(元)"
  998. >
  999. <span>{item.amount}</span>
  1000. </FormItem>
  1001. </div>
  1002. )
  1003. }
  1004. {
  1005. it.settlementAmount != 0 && it.type != 4 && it.type != 5 &&
  1006. <div className="clearfix">
  1007. <FormItem
  1008. {...formItemLayout}
  1009. label="抵扣金额"
  1010. >
  1011. <span>{it.settlementAmount}(元)</span>
  1012. </FormItem>
  1013. </div>
  1014. }
  1015. <div className="clearfix">
  1016. <FormItem
  1017. {...formItemLayout}
  1018. label="附件"
  1019. >
  1020. <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  1021. {!!it.attachmentUrl ? <ImgList domId={it.id} fileList={splitUrl(it.attachmentUrl, ",", globalConfig.avatarHost + "/upload")} ItemWidth={'96px'} /> : <div />}
  1022. </div>
  1023. </FormItem>
  1024. </div>
  1025. </div>
  1026. )
  1027. }
  1028. {data.type != 4 && data.debitTotalAmount &&
  1029. <div className="clearfix">
  1030. <FormItem
  1031. {...formItemLayout}
  1032. label="预借支"
  1033. >
  1034. <span style={{ color: "red" }}>{data.debitTotalAmount}(元)</span>
  1035. </FormItem>
  1036. </div>}
  1037. {data.type != 4 && data.type != 5 &&
  1038. <div className="clearfix">
  1039. <FormItem
  1040. {...formItemLayout}
  1041. label="本次报销金额"
  1042. >
  1043. <span style={{ color: "red", fontWeight: "bold" }}>{data.amount}(元)</span>
  1044. </FormItem>
  1045. </div>}
  1046. {data.type != 4 && data.type != 5 &&
  1047. <div className="clearfix">
  1048. <FormItem
  1049. {...formItemLayout}
  1050. label="实报金额"
  1051. >
  1052. <span style={{ color: "red", fontWeight: "bold" }}>{data.realAmount}(元)</span>
  1053. </FormItem>
  1054. </div>}
  1055. <div style={{ fontSize: 13, fontWeight: "bold" }}>收款详情</div>
  1056. {data.type != 3 && data.type != 5 &&
  1057. <div>
  1058. <div className="clearfix">
  1059. <FormItem
  1060. {...formItemLayout}
  1061. label="收款人"
  1062. >
  1063. <span>{!!data.name && data.name}</span>
  1064. </FormItem>
  1065. </div>
  1066. <div className="clearfix">
  1067. <FormItem
  1068. {...formItemLayout}
  1069. label="收款银行"
  1070. >
  1071. <span>{!!data.bank && data.bank}</span>
  1072. </FormItem>
  1073. </div>
  1074. <div className="clearfix">
  1075. <FormItem
  1076. {...formItemLayout}
  1077. label="收款账户"
  1078. >
  1079. <span>{!!data.accounts && data.accounts}</span>
  1080. </FormItem>
  1081. </div>
  1082. </div>}
  1083. <div style={{ fontSize: 13, fontWeight: "bold" }}>审核意见</div>
  1084. <ul
  1085. style={{
  1086. // width: "560px",
  1087. overflow: "hidden",
  1088. paddingLeft: "90px",
  1089. position: "relative",
  1090. }}
  1091. >
  1092. {logdataSour.map((item, index) => {
  1093. return (
  1094. <li
  1095. key={index}
  1096. style={{
  1097. width: "100%",
  1098. height: "auto",
  1099. wordBreak: "break-all",
  1100. marginBottom: "10px",
  1101. }}
  1102. >
  1103. <span>{item.auditorName}:</span>
  1104. <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#808080", "#1D4FEA"][item.status] }}>
  1105. {["【发起】,", "【通过】,", "【完成】,", "【驳回】,", "【撤销】,", "【修改】,"][item.status]}
  1106. {this.state.processStatus == item.processStatus && !item.id && data.status != 0 &&
  1107. <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
  1108. </span>
  1109. <span>{item.remarks}</span>
  1110. <span>&nbsp;&nbsp;&nbsp;{item.createTimeStr}</span>
  1111. </li>
  1112. );
  1113. })}
  1114. </ul>
  1115. <div className="clearfix" style={{ marginTop: 20 }}>
  1116. <Button
  1117. type="primary"
  1118. style={{
  1119. float: "right",
  1120. }}
  1121. onClick={() => {
  1122. this.setState({
  1123. logvisible: true
  1124. })
  1125. this.getLogData(data.id)
  1126. }}
  1127. >
  1128. 查看日志
  1129. </Button>
  1130. </div>
  1131. {false && this.props.isOperate && data.examine == 1 &&
  1132. <div className="clearfix"
  1133. style={{ width: 500, margin: "20px auto" }}>
  1134. <TextArea
  1135. rows={4}
  1136. value={this.state.reason}
  1137. onChange={(e) => {
  1138. this.setState({
  1139. reason: e.target.value,
  1140. })
  1141. }}
  1142. placeholder="请填写审核内容"
  1143. />
  1144. <div
  1145. style={{
  1146. width: 250,
  1147. display: "flex",
  1148. justifyContent: "space-between",
  1149. margin: "20px auto 0"
  1150. }}
  1151. >
  1152. <Button type="primary"
  1153. style={{ margin: 4 }}
  1154. onClick={(e) => {
  1155. this.setState({
  1156. checkData: data
  1157. }, () => {
  1158. this.toExamine(1)
  1159. })
  1160. }}
  1161. >同意</Button>
  1162. <Button type="danger"
  1163. style={{ margin: 4 }}
  1164. onClick={(e) => {
  1165. this.setState({
  1166. checkData: data
  1167. }, () => {
  1168. this.toExamine(3)
  1169. })
  1170. }}
  1171. >驳回</Button>
  1172. </div>
  1173. </div>
  1174. }
  1175. </Spin>
  1176. </Form>
  1177. }
  1178. </div>
  1179. </Spin>
  1180. <Button
  1181. type="primary"
  1182. style={{
  1183. float: "right",
  1184. marginTop: 10,
  1185. position: "absolute",
  1186. top: 0,
  1187. right: 50,
  1188. }}
  1189. onClick={() => {
  1190. Print(this.printTemp)
  1191. }}
  1192. >
  1193. 打印
  1194. </Button>
  1195. {/* <ReactToPrint
  1196. trigger={() => (
  1197. <Button
  1198. type="primary"
  1199. style={{
  1200. float: "right",
  1201. marginTop: 10,
  1202. position: "absolute",
  1203. top: 0,
  1204. right: 50,
  1205. }}
  1206. >
  1207. 打印
  1208. </Button>
  1209. )}
  1210. content={() => this.refs.all}
  1211. bodyClass="print-body"
  1212. /> */}
  1213. {
  1214. //审核弹窗
  1215. this.state.visible != "" &&
  1216. <Modal
  1217. width="400px"
  1218. maskClosable={false}
  1219. title="审核"
  1220. confirmLoading={this.state.loading}
  1221. visible={this.state.visible != ""}
  1222. onOk={() => { this.toExamine(visible == "adopt" ? 1 : visible == "reject" && 3) }}
  1223. okText={this.state.visible == "adopt" ? "通过" : this.state.visible == "reject" && "驳回"}
  1224. onCancel={() => {
  1225. this.setState({
  1226. visible: '',
  1227. reason: "",
  1228. checkData: {},
  1229. })
  1230. }}
  1231. >
  1232. <TextArea
  1233. rows={4}
  1234. value={this.state.reason}
  1235. onChange={(e) => {
  1236. this.setState({
  1237. reason: e.target.value,
  1238. })
  1239. }}
  1240. placeholder="请填写审核内容"
  1241. />
  1242. </Modal>
  1243. }
  1244. {
  1245. // 审核日志
  1246. this.state.logvisible &&
  1247. <Modal
  1248. visible={this.state.logvisible}
  1249. className="admin-desc-content"
  1250. width="800px"
  1251. maskClosable={false}
  1252. title="审核日志"
  1253. footer={null}
  1254. onCancel={() => {
  1255. this.setState({
  1256. logvisible: false,
  1257. })
  1258. }}
  1259. >
  1260. <div className="patent-table">
  1261. <Spin spinning={this.state.loading}>
  1262. <Table
  1263. columns={this.state.logcolumns}
  1264. dataSource={this.state.logdataSour}
  1265. pagination={false}
  1266. bordered
  1267. size="small"
  1268. />
  1269. </Spin>
  1270. </div>
  1271. </Modal>
  1272. }
  1273. {
  1274. // 修改
  1275. this.state.editA != "" &&
  1276. <Modal
  1277. visible={this.state.editA != ""}
  1278. maskClosable={false}
  1279. title={this.state.editTit}
  1280. cancelText="取消"
  1281. width={300}
  1282. okText="确认"
  1283. onOk={() => { this.updateRealAmount() }}
  1284. onCancel={() => { this.setState({ editA: "" }) }}
  1285. >
  1286. {
  1287. this.state.editA == "amount" &&
  1288. <Input
  1289. placeholder='请输入'
  1290. type='number'
  1291. value={this.state.upAmount}
  1292. onChange={e => {
  1293. this.setState({
  1294. upAmount: e.target.value
  1295. })
  1296. }}
  1297. />
  1298. }
  1299. {
  1300. this.state.editA == "remarks" &&
  1301. <TextArea
  1302. rows={4}
  1303. value={this.state.upRemarks}
  1304. onChange={(e) => {
  1305. this.setState({
  1306. upRemarks: e.target.value,
  1307. })
  1308. }}
  1309. placeholder="报销事由"
  1310. />
  1311. }
  1312. {
  1313. this.state.editA == "typesOther" &&
  1314. <Input
  1315. placeholder='请填写类型说明'
  1316. value={this.state.upTypesOther}
  1317. onChange={e => {
  1318. this.setState({
  1319. upTypesOther: e.target.value
  1320. })
  1321. }}
  1322. />
  1323. }
  1324. {
  1325. this.state.editA == "contractNo" &&
  1326. <div>
  1327. <div style={{ marginBottom: 20 }}>
  1328. <AutoComplete
  1329. className="certain-category-search"
  1330. dropdownClassName="certain-category-search-dropdown"
  1331. dropdownMatchSelectWidth={false}
  1332. style={{ width: 180 }}
  1333. dataSource={options}
  1334. placeholder="企业名称"
  1335. value={this.state.upUserNames}
  1336. onChange={this.httpChange.bind(this)}
  1337. filterOption={true}
  1338. onSelect={this.selectAuto.bind(this)}
  1339. >
  1340. <Input />
  1341. </AutoComplete>
  1342. <Button
  1343. disabled={!this.state.upUserId}
  1344. style={{ marginLeft: 10 }}
  1345. type="primary"
  1346. onClick={() => {
  1347. this.selectOrderByUid()
  1348. }}>搜索</Button>
  1349. </div>
  1350. <div>
  1351. <Spin spinning={this.state.sloading}>
  1352. {
  1353. !!this.state.upList && this.state.upList.length == 0 &&
  1354. <div style={{ color: "red", margin: "20px auto", textAlign: "center" }}>该企业暂无订单</div>
  1355. }
  1356. <RadioGroup
  1357. onChange={(e) => {
  1358. this.setState({
  1359. upOrderNo: e.target.value
  1360. })
  1361. }} value={this.state.upOrderNo}>
  1362. {
  1363. !!this.state.upList && this.state.upList.map(item =>
  1364. <Radio key={item.contractNo} style={radioStyle} value={item.orderNo}>编号:{item.contractNo}</Radio>
  1365. )
  1366. }
  1367. </RadioGroup>
  1368. </Spin>
  1369. </div>
  1370. </div>
  1371. }
  1372. {
  1373. this.state.editA == "detTypeOther" &&
  1374. <Input
  1375. placeholder='请填写详细说明'
  1376. value={this.state.detTypeOther}
  1377. onChange={e => {
  1378. this.setState({
  1379. detTypeOther: e.target.value
  1380. })
  1381. }}
  1382. />
  1383. }
  1384. </Modal>
  1385. }
  1386. </Modal>
  1387. );
  1388. }
  1389. }
  1390. export default AccountDetails;