accountReview.jsx 36 KB

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