accountReview.jsx 36 KB

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