accountDetails.jsx 34 KB

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