accountDetails.jsx 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986
  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. distinct(arr, key) {
  249. let hash = {};
  250. let result = [];
  251. for (let i = arr.length - 1; i >= 0; i--) {
  252. let value = arr[i][key];
  253. if (!hash[value]) {
  254. hash[value] = true;
  255. result.unshift(arr[i]);
  256. }
  257. }
  258. return result;
  259. }
  260. render() {
  261. const { TextArea } = Input
  262. const { data, visible, list = [], newList, total, logdataSour, } = this.state
  263. const { onCancel } = this.props
  264. const formItemLayout = {
  265. labelCol: { span: 5 },
  266. wrapperCol: { span: 18 },
  267. };
  268. const logArray = this.distinct(logdataSour, "auditorName")
  269. // const logArray = logdataSour.filter((item, index, arr) => {
  270. // return arr.findLastIndex((t) => t.auditorName === item.auditorName) === index;
  271. // });
  272. const reimbursement = [
  273. {
  274. title: !!data.contractNo ? `报销至订单:${data.contractNo}` : `报销至部门`,
  275. dataIndex: "head",
  276. key: "head",
  277. width: 275,
  278. render: (text, row, index) => {
  279. if (index < newList.length - 2) {
  280. return <span>{text}</span>;
  281. } else if (index == newList.length - 2) {
  282. return {
  283. children: <div style={{ display: "flex", justifyContent: "space-between" }}>
  284. <span>金额合计(大写):{data.type == 5 ? dealBigMoney(total) : (dealBigMoney((total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0))}</span>
  285. <span>¥&nbsp;&nbsp;&nbsp;{data.type == 5 ? total : (total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0}&nbsp;&nbsp;&nbsp;</span>
  286. </div>,
  287. props: {
  288. colSpan: 3,
  289. },
  290. };
  291. } else if (index == newList.length - 1) {
  292. return {
  293. children: <div>
  294. <div>
  295. {data.type == 3 && newList.map((item, index) => !!item.invoiceNo && <div key={index}>付款方式:{"公对公转账"}&nbsp;&nbsp;&nbsp;发票类型:{["普票", "专票"][item.invoiceType]}&nbsp;&nbsp;&nbsp;发票号:{item.invoiceNo}</div>)}
  296. {data.type == 3
  297. ? 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>)
  298. : data.type != 5 && <div>收款方式:{data.bank}&nbsp;&nbsp;&nbsp;{data.accounts}&nbsp;&nbsp;&nbsp;{data.name}</div>}
  299. </div>
  300. </div>,
  301. props: {
  302. colSpan: 3,
  303. },
  304. };
  305. }
  306. },
  307. },
  308. {
  309. title: '报销数',
  310. children: [
  311. {
  312. title: '付款项目',
  313. dataIndex: "type",
  314. key: "type",
  315. width: 120,
  316. render: (value, row, index) => {
  317. if (index == newList.length - 2) {
  318. return {
  319. props: {
  320. rowSpan: 0,
  321. },
  322. };
  323. } else if (index == newList.length - 1) {
  324. return {
  325. props: {
  326. rowSpan: 0,
  327. },
  328. };
  329. } else {
  330. return <div>
  331. {data.type == 1 &&
  332. // 差旅费显示
  333. <div>
  334. {!!row.other
  335. ? row.other
  336. : value == 1
  337. ? <span>{`交通费(${getVehicleName(row.vehicle, row.vehicleOther)})`}</span>
  338. : <span>{getTypeName(row.type)}</span>}
  339. </div>}
  340. {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) &&
  341. <span>{value == 4 ? "预借支金额" : value == 5 ? "抵扣金额" : !!row.other ? row.other : "申请金额"}</span>
  342. }
  343. {data.type == 3 &&
  344. <span>{!!row.other ? row.other : "申请金额"}</span>
  345. }
  346. </div>;
  347. }
  348. },
  349. },
  350. {
  351. title: '金额(元)',
  352. dataIndex: "amount",
  353. key: "amount",
  354. width: 80,
  355. render: (value, row, index) => {
  356. if (index == newList.length - 2) {
  357. return {
  358. props: {
  359. rowSpan: 0,
  360. },
  361. };
  362. } else if (index == newList.length - 1) {
  363. return {
  364. props: {
  365. rowSpan: 0,
  366. },
  367. };
  368. } else {
  369. return <span>{value}</span>;
  370. }
  371. },
  372. }
  373. ],
  374. },
  375. {
  376. title: '审核意见',
  377. dataIndex: "shyj",
  378. key: "shyj",
  379. width: 270,
  380. render: (value, row, index) => {
  381. if (index == 0) {
  382. return {
  383. children: <div>
  384. <ul
  385. style={{
  386. overflow: "hidden",
  387. position: "relative",
  388. }}
  389. >{logArray.map((item, index) => {
  390. return (
  391. // 要求只显示通过的审核
  392. (item.status == 1 || item.status == 2) &&
  393. <li
  394. key={item.auditorName}
  395. style={{
  396. height: "auto",
  397. wordBreak: "break-all",
  398. }}
  399. >
  400. <span>{item.auditorName}:</span>
  401. <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#1D4FEA"][item.status] }}>
  402. {["【发起】,", "【通过】,", "【完成】,", "【驳回】,", "【重新发起】,"][item.status]}
  403. {this.state.processStatus == item.processStatus && !item.id && data.status != 0 &&
  404. <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
  405. </span>
  406. <span>{item.remarks}</span>
  407. {/* <span>&nbsp;&nbsp;&nbsp;{item.createTimeStr}</span> */}
  408. </li>
  409. )
  410. })}
  411. </ul>
  412. </div>,
  413. props: {
  414. rowSpan: newList.length - 2,
  415. },
  416. };
  417. } else if (index == newList.length - 2) {
  418. return data.type != 0 && <span>要求付款时间:{data.type == 1 ? moment(data.agreeTimeStr).format('YYYY-MM-DD') : moment(newList[0].agreeTimeStr).format('YYYY-MM-DD')}</span>;
  419. } else if (index < newList.length - 1) {
  420. return {
  421. props: {
  422. rowSpan: 0,
  423. },
  424. };
  425. }
  426. },
  427. },
  428. ]
  429. return (
  430. <Modal
  431. maskClosable={false}
  432. visible={true}
  433. onOk={false}
  434. onCancel={onCancel}
  435. width="790px"
  436. title={<span style={{ fontWeight: "bold" }}>{"报销详情-" + getAccountName(data.type, data.typeOther)}
  437. <Button
  438. type="primary"
  439. style={{ marginLeft: 30 }}
  440. onClick={() => { this.setState({ isTable: !this.state.isTable }) }}
  441. >{this.state.isTable ? "切换列表显示" : "切换表格显示"}</Button>
  442. </span>}
  443. footer=""
  444. >
  445. <Spin spinning={this.state.loading}>
  446. <div className="m_body"
  447. ref={(e) => {
  448. this.refs.all = e;
  449. }}
  450. >
  451. {this.state.isTable
  452. ? <div className="m_table">
  453. <div className="m_title">
  454. {getAccountName(data.type, data.typeOther)}
  455. {getAccountName(data.type, data.typeOther).indexOf("报销") == -1 ? "报销清单" : "清单"}
  456. </div>
  457. <div className="m_head">
  458. <div>申请部门:{data.appDepName}</div>
  459. <div>报销日期:{moment(data.createTimeStr).format('YYYY年MM月DD日')}</div>
  460. </div>
  461. <Table
  462. columns={reimbursement}
  463. dataSource={newList}
  464. bordered
  465. size="middle"
  466. pagination={false}
  467. />
  468. <div className="m_head">
  469. <div>报销公司:{data.appDepName}</div>
  470. <div>报销人:{data.aname}</div>
  471. </div>
  472. </div>
  473. : <Form layout="horizontal" id="demand-form">
  474. <Spin spinning={this.state.loading}>
  475. {data.type == 1 &&
  476. <div>
  477. <div style={{ fontSize: 13, fontWeight: "bold" }}>公出信息</div>
  478. <div className="clearfix">
  479. <FormItem
  480. {...formItemLayout}
  481. label="公出企业"
  482. >
  483. <span>{data.userNames}</span>
  484. </FormItem>
  485. </div>
  486. <div className="clearfix">
  487. <FormItem
  488. {...formItemLayout}
  489. label="公出地点"
  490. >
  491. <span>{data.districtName}</span>
  492. </FormItem>
  493. </div>
  494. <div className="clearfix">
  495. <FormItem
  496. {...formItemLayout}
  497. label="时间"
  498. >
  499. <span>{data.releaseStartStr} 至 {data.releaseEndStr}</span>
  500. </FormItem>
  501. </div>
  502. <div className="clearfix">
  503. <FormItem
  504. {...formItemLayout}
  505. label="公出时长"
  506. >
  507. <span>{data.duration}小时</span>
  508. </FormItem>
  509. </div>
  510. </div>}
  511. <div style={{ fontSize: 13, fontWeight: "bold" }}>申请类型</div>
  512. <div className="clearfix">
  513. <FormItem
  514. {...formItemLayout}
  515. label="申请类型"
  516. >
  517. <span>{getAccountName(data.type, data.typeOther)}</span>
  518. </FormItem>
  519. </div>
  520. <div className="clearfix">
  521. <FormItem
  522. {...formItemLayout}
  523. label="报销至订单"
  524. >
  525. <div>
  526. <div>{data.buyerName}</div>
  527. <div>{data.contractNo}</div>
  528. </div>
  529. </FormItem>
  530. </div>
  531. <div className="clearfix">
  532. <FormItem
  533. {...formItemLayout}
  534. label="报销人"
  535. >
  536. <span>{data.aname}</span>
  537. </FormItem>
  538. </div>
  539. <div className="clearfix">
  540. <FormItem
  541. {...formItemLayout}
  542. label="报销公司"
  543. >
  544. <span>{data.appDepName}</span>
  545. </FormItem>
  546. </div>
  547. <div className="clearfix">
  548. <FormItem
  549. {...formItemLayout}
  550. label="支付公司"
  551. >
  552. <span>{data.payDepName}</span>
  553. </FormItem>
  554. </div>
  555. <div className="clearfix">
  556. <FormItem
  557. labelCol={{ span: 5 }}
  558. wrapperCol={{ span: 18 }}
  559. label="报销事由"
  560. >
  561. <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
  562. {data.remarks}
  563. </p>
  564. </FormItem>
  565. </div>
  566. <div style={{ fontSize: 13, fontWeight: "bold" }}>费用详细</div>
  567. {/* 差旅费显示 */}
  568. {data.type == 1 &&
  569. list.length > 0 && list.map(item =>
  570. item.type == 1
  571. ? <div>
  572. <div className="clearfix" >
  573. <FormItem
  574. {...formItemLayout}
  575. label="交通工具"
  576. >
  577. <span>
  578. {getVehicleName(item.vehicle, item.vehicleOther)}
  579. {/* &nbsp;&nbsp; */}
  580. {/* {!!item.startDistrict && <span>({item.startDistrict}&nbsp;⇀&nbsp;{item.endDistrict})</span>} */}
  581. </span>
  582. </FormItem>
  583. </div>
  584. <div className="clearfix" >
  585. <FormItem
  586. {...formItemLayout}
  587. label="地点"
  588. >
  589. <span>{item.startDistrict}
  590. <span>&nbsp;&nbsp;⇀&nbsp;&nbsp;</span>
  591. {item.endDistrict}</span>
  592. </FormItem>
  593. </div>
  594. <div className="clearfix">
  595. <FormItem
  596. labelCol={{ span: 5 }}
  597. wrapperCol={{ span: 18 }}
  598. label="时间"
  599. >
  600. <span>{item.startTimeStr}&nbsp;&nbsp;至&nbsp;&nbsp;{item.endTimeStr}</span>
  601. </FormItem>
  602. </div>
  603. <div className="clearfix">
  604. <FormItem
  605. {...formItemLayout}
  606. label="交通费"
  607. >
  608. <span>{item.amount}(元)</span>
  609. </FormItem>
  610. </div>
  611. </div>
  612. : <div className="clearfix" >
  613. <FormItem
  614. {...formItemLayout}
  615. label={getTypeName(item.type)}
  616. >
  617. <span>{item.amount}(元)</span>
  618. </FormItem>
  619. </div>
  620. )
  621. }
  622. {/* 通用 */}
  623. {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) &&
  624. list.length > 0 && list.map(item =>
  625. <div className="clearfix" >
  626. {!!item.agreeTimeStr &&
  627. <FormItem
  628. {...formItemLayout}
  629. label={data.type == 5 ? "支付时间:" : "需付款时间:"}
  630. >
  631. <span>{item.agreeTimeStr.slice(0, 10)}</span>
  632. </FormItem>}
  633. <FormItem
  634. {...formItemLayout}
  635. label={data.type == 4
  636. ? "预借支金额:" : data.type == 5
  637. ? "抵扣金额:" : "金额:"}
  638. >
  639. <span>{item.amount}(元)</span>
  640. </FormItem>
  641. </div>
  642. )
  643. }
  644. {/* 第三方付款 */}
  645. {data.type == 3 &&
  646. list.length > 0 && list.map(item =>
  647. <div className="clearfix" >
  648. {!!item.agreeTimeStr &&
  649. <FormItem
  650. {...formItemLayout}
  651. label="需付款时间"
  652. >
  653. <span>{item.agreeTimeStr.slice(0, 10)}</span>
  654. </FormItem>
  655. }
  656. <FormItem
  657. {...formItemLayout}
  658. label="付款方式"
  659. >
  660. <span>{["公对公转账"][item.payType]}</span>
  661. </FormItem>
  662. <FormItem
  663. {...formItemLayout}
  664. label="发票类型"
  665. >
  666. <span>{["普票", "专票"][item.invoiceType]}</span>
  667. </FormItem>
  668. <FormItem
  669. {...formItemLayout}
  670. label="发票号"
  671. >
  672. <span>{item.invoiceNo}</span>
  673. </FormItem>
  674. <FormItem
  675. {...formItemLayout}
  676. label="付款单位"
  677. >
  678. <span>{item.payerName}</span>
  679. </FormItem>
  680. <FormItem
  681. {...formItemLayout}
  682. label="开户银行"
  683. >
  684. <span>{item.openBank}</span>
  685. </FormItem>
  686. <FormItem
  687. {...formItemLayout}
  688. label="银行账户"
  689. >
  690. <span>{item.bankAccounts}</span>
  691. </FormItem>
  692. <FormItem
  693. {...formItemLayout}
  694. label="开户行地址"
  695. >
  696. <span>{item.openBankAddress}</span>
  697. </FormItem>
  698. <FormItem
  699. {...formItemLayout}
  700. label="金额(元)"
  701. >
  702. <span>{item.amount}</span>
  703. </FormItem>
  704. </div>
  705. )
  706. }
  707. {data.type != 4 && data.debitTotalAmount &&
  708. <div className="clearfix">
  709. <FormItem
  710. {...formItemLayout}
  711. label="预借支"
  712. >
  713. <span style={{ color: "red" }}>{data.debitTotalAmount}(元)</span>
  714. </FormItem>
  715. </div>}
  716. {data.type != 4 && data.type != 5 &&
  717. <div className="clearfix">
  718. <FormItem
  719. {...formItemLayout}
  720. label="总金额"
  721. >
  722. <span style={{ color: "red" }}>{total}(元)</span>
  723. </FormItem>
  724. </div>}
  725. {data.type != 4 && data.type != 5 &&
  726. <div className="clearfix">
  727. <FormItem
  728. {...formItemLayout}
  729. label="实报金额"
  730. >
  731. <span style={{ color: "red" }}>{(total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0}(元)</span>
  732. </FormItem>
  733. </div>}
  734. <div className="clearfix">
  735. <FormItem
  736. {...formItemLayout}
  737. label="附件"
  738. >
  739. <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  740. {this.state.imgs ? <ImgList fileList={this.state.imgs} ItemWidth={'96px'} /> : <div />}
  741. </div>
  742. </FormItem>
  743. </div>
  744. <div style={{ fontSize: 13, fontWeight: "bold" }}>收款详情</div>
  745. {data.type != 3 && data.type != 5 &&
  746. <div>
  747. <div className="clearfix">
  748. <FormItem
  749. {...formItemLayout}
  750. label="收款人"
  751. >
  752. <span>{data.name}</span>
  753. </FormItem>
  754. </div>
  755. <div className="clearfix">
  756. <FormItem
  757. {...formItemLayout}
  758. label="收款银行"
  759. >
  760. <span>{data.bank}</span>
  761. </FormItem>
  762. </div>
  763. <div className="clearfix">
  764. <FormItem
  765. {...formItemLayout}
  766. label="收款账户"
  767. >
  768. <span>{data.accounts}</span>
  769. </FormItem>
  770. </div>
  771. </div>}
  772. <div style={{ fontSize: 13, fontWeight: "bold" }}>审核意见</div>
  773. <ul
  774. style={{
  775. width: "560px",
  776. overflow: "hidden",
  777. paddingLeft: "90px",
  778. position: "relative",
  779. }}
  780. >
  781. {logdataSour.map((item, index) => {
  782. return (
  783. <li
  784. key={index}
  785. style={{
  786. width: "100%",
  787. height: "auto",
  788. wordBreak: "break-all",
  789. marginBottom: "10px",
  790. }}
  791. >
  792. {/* {item.auditorName + ":" + item.status + item.remarks + "(" + item.createTimeStr + ")"} */}
  793. <span>{item.auditorName}:</span>
  794. <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#1D4FEA"][item.status] }}>
  795. {["【发起】,", "【通过】,", "【完成】,", "【驳回】,", "【重新发起】,"][item.status]}
  796. {this.state.processStatus == item.processStatus && !item.id && data.status != 0 &&
  797. <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
  798. </span>
  799. <span>{item.remarks}</span>
  800. <span>&nbsp;&nbsp;&nbsp;{item.createTimeStr}</span>
  801. </li>
  802. );
  803. })}
  804. </ul>
  805. <div className="clearfix" style={{ marginTop: 20 }}>
  806. <Button
  807. type="primary"
  808. style={{
  809. float: "right",
  810. }}
  811. onClick={() => {
  812. this.setState({
  813. logvisible: true
  814. })
  815. this.getLogData(data.id)
  816. }}
  817. >
  818. 查看日志
  819. </Button>
  820. </div>
  821. {this.props.isOperate && data.examine == 1 &&
  822. <div className="clearfix"
  823. style={{ width: 500, margin: "20px auto" }}>
  824. <TextArea
  825. rows={4}
  826. value={this.state.reason}
  827. onChange={(e) => {
  828. this.setState({
  829. reason: e.target.value,
  830. })
  831. }}
  832. placeholder="请填写审核内容"
  833. />
  834. <div
  835. style={{
  836. width: 250,
  837. display: "flex",
  838. justifyContent: "space-between",
  839. margin: "20px auto 0"
  840. }}
  841. >
  842. <Button type="primary"
  843. style={{ margin: 4 }}
  844. onClick={(e) => {
  845. this.setState({
  846. checkData: data
  847. }, () => {
  848. this.toExamine(1)
  849. })
  850. }}
  851. >同意</Button>
  852. <Button type="danger"
  853. style={{ margin: 4 }}
  854. onClick={(e) => {
  855. this.setState({
  856. checkData: data
  857. }, () => {
  858. this.toExamine(3)
  859. })
  860. }}
  861. >驳回</Button>
  862. </div>
  863. </div>
  864. }
  865. </Spin>
  866. </Form>
  867. }
  868. </div>
  869. </Spin>
  870. <ReactToPrint
  871. trigger={() => (
  872. <Button
  873. type="primary"
  874. style={{
  875. float: "right",
  876. marginTop: 10,
  877. position: "absolute",
  878. top: 0,
  879. right: 50,
  880. }}
  881. >
  882. 打印
  883. </Button>
  884. )}
  885. content={() => this.refs.all}
  886. bodyClass="print-body"
  887. />
  888. {
  889. //审核弹窗
  890. this.state.visible != "" &&
  891. <Modal
  892. width="400px"
  893. maskClosable={false}
  894. title="审核"
  895. confirmLoading={this.state.loading}
  896. visible={this.state.visible != ""}
  897. onOk={() => { this.toExamine(visible == "adopt" ? 1 : visible == "reject" && 3) }}
  898. okText={this.state.visible == "adopt" ? "通过" : this.state.visible == "reject" && "驳回"}
  899. onCancel={() => {
  900. this.setState({
  901. visible: '',
  902. reason: "",
  903. checkData: {},
  904. })
  905. }}
  906. >
  907. <TextArea
  908. rows={4}
  909. value={this.state.reason}
  910. onChange={(e) => {
  911. this.setState({
  912. reason: e.target.value,
  913. })
  914. }}
  915. placeholder="请填写审核内容"
  916. />
  917. </Modal>
  918. }
  919. {
  920. // 审核日志
  921. this.state.logvisible &&
  922. <Modal
  923. visible={this.state.logvisible}
  924. className="admin-desc-content"
  925. width="800px"
  926. maskClosable={false}
  927. title="审核日志"
  928. footer={null}
  929. onCancel={() => {
  930. this.setState({
  931. logvisible: false,
  932. })
  933. }}
  934. >
  935. <div className="patent-table">
  936. <Spin spinning={this.state.loading}>
  937. <Table
  938. columns={this.state.logcolumns}
  939. dataSource={this.state.logdataSour}
  940. pagination={false}
  941. bordered
  942. size="small"
  943. />
  944. </Spin>
  945. </div>
  946. </Modal>
  947. }
  948. </Modal>
  949. );
  950. }
  951. }
  952. export default AccountDetails;