accountDetails.jsx 48 KB

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