accountDetails.jsx 37 KB

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