accountDetails.jsx 47 KB

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