accountReview.jsx 39 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232
  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. AutoComplete,
  14. DatePicker,
  15. Modal,
  16. } from "antd";
  17. import { ChooseList } from "../../order/orderNew/chooseList";
  18. import { ShowModal, splitUrl, getAccountName, getVehicleName, getTypeName, commonAdd } from "../../../tools"
  19. import ShowModalDiv from "@/showModal.jsx";
  20. import ImgList from "../../../common/imgList";
  21. import { accountType, accountStatus } from "@/dataDic";
  22. const FormItem = Form.Item;
  23. const { RangePicker } = DatePicker;
  24. const { TabPane } = Tabs;
  25. const AccountReview = React.createClass({
  26. getInitialState() {
  27. return {
  28. showDetails: false,
  29. data: {},
  30. logvisible: false,
  31. logdataSour: [],
  32. visible: "",
  33. reason: "",
  34. checkData: {},
  35. aname: "",
  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. {text == 0 ? record.typeOther : 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. followUp(e) {
  470. this.setState({
  471. aname: e
  472. });
  473. $.ajax({
  474. method: "get",
  475. dataType: "json",
  476. crossDomain: false,
  477. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  478. data: {
  479. adminName: e,
  480. },
  481. success: function (data) {
  482. let thedata = data.data || [];
  483. if (!thedata) {
  484. if (data.error && data.error.length) {
  485. message.warning(data.error[0].message);
  486. }
  487. thedata = {};
  488. }
  489. this.setState({
  490. fjlist: thedata,
  491. });
  492. }.bind(this),
  493. }).always(
  494. function () {
  495. this.setState({
  496. loading: false,
  497. });
  498. }.bind(this)
  499. );
  500. },
  501. // 选中负责人
  502. selectF(value) {
  503. const { searchValues, fjlist } = this.state;
  504. const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
  505. this.setState({
  506. searchValues: Object.assign(searchValues, {
  507. aid: newdataSources.find((item) => item.name == value).id,
  508. }),
  509. });
  510. },
  511. // 搜索
  512. search() {
  513. this.loadData();
  514. },
  515. // 重置
  516. reset() {
  517. this.setState({
  518. aname: "",
  519. searchValues: JSON.parse(JSON.stringify({})),
  520. }, () => {
  521. this.loadData();
  522. })
  523. },
  524. changeList(arr) {
  525. const newArr = [];
  526. this.state.columns.forEach((item) => {
  527. arr.forEach((val) => {
  528. if (val === item.title) {
  529. newArr.push(item);
  530. }
  531. });
  532. });
  533. this.setState({
  534. changeList: newArr,
  535. });
  536. },
  537. render() {
  538. const { TextArea } = Input
  539. const { searchValues, data, visible, list = [], total, } = this.state
  540. const formItemLayout = {
  541. labelCol: { span: 10 },
  542. wrapperCol: { span: 14 },
  543. };
  544. const dataSources = this.state.fjlist || [];
  545. const options = dataSources.map((group) => (
  546. <Select.Option key={group.id} value={group.name}>
  547. {group.name}
  548. </Select.Option>
  549. ));
  550. return (
  551. <div className="user-content">
  552. <ShowModalDiv ShowModal={this.state.showModal} />
  553. <div className="content-title" style={{ marginBottom: 10 }}>
  554. <span style={{ fontWeight: 900, fontSize: 16 }}>{this.props.isOperate ? "报销审核" : "报销列表"}</span>
  555. </div>
  556. <Tabs defaultActiveKey="2" className="test">
  557. <TabPane tab="搜索" key="2">
  558. <div className="user-search" style={{ marginLeft: 10 }}>
  559. <Input
  560. placeholder="合同编号"
  561. value={searchValues["contractNo"]
  562. ? searchValues["contractNo"]
  563. : ""}
  564. onChange={(e) => {
  565. searchValues["contractNo"] = e.target.value;
  566. this.setState({
  567. searchValues: searchValues,
  568. });
  569. }}
  570. />
  571. <Input
  572. placeholder="客户名称"
  573. value={searchValues["username"]
  574. ? searchValues["username"]
  575. : ""}
  576. onChange={(e) => {
  577. searchValues["username"] = e.target.value;
  578. this.setState({
  579. searchValues: searchValues,
  580. });
  581. }}
  582. />
  583. <Select
  584. style={{ width: 140 }}
  585. placeholder="报销类型"
  586. value={searchValues["type"]
  587. ? searchValues["type"]
  588. : undefined}
  589. onChange={(e) => {
  590. searchValues["type"] = e;
  591. this.setState({
  592. searchValues: searchValues,
  593. });
  594. }}
  595. >
  596. <Option value="1">差旅费</Option>
  597. <Option value="2">非业务报销</Option>
  598. <Option value="3">第三方付款</Option>
  599. <Option value="4">申请借支</Option>
  600. <Option value="5">申请抵扣</Option>
  601. <Option value="0">其他</Option>
  602. </Select>
  603. <AutoComplete
  604. className="certain-category-search"
  605. dropdownClassName="certain-category-search-dropdown"
  606. dropdownMatchSelectWidth={false}
  607. style={{ width: 140 }}
  608. dataSource={options}
  609. placeholder="报销人"
  610. value={this.state.aname}
  611. onChange={this.followUp.bind(this)}
  612. filterOption={true}
  613. onSelect={this.selectF.bind(this)}
  614. >
  615. <Input />
  616. </AutoComplete>
  617. <Select
  618. placeholder="所属部门"
  619. style={{ width: 200, marginRight: 10 }}
  620. value={searchValues["depId"]
  621. ? searchValues["depId"]
  622. : undefined}
  623. onChange={e => {
  624. searchValues["depId"] = e;
  625. this.setState({
  626. searchValues: searchValues,
  627. });
  628. }}
  629. >
  630. {this.state.departmentArr.map(function (item) {
  631. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  632. })}
  633. </Select>
  634. <Select
  635. placeholder="申请部门"
  636. style={{ width: 200, marginRight: 10 }}
  637. value={searchValues["applyDep"]
  638. ? searchValues["applyDep"]
  639. : undefined}
  640. onChange={e => {
  641. searchValues["applyDep"] = e;
  642. this.setState({
  643. searchValues: searchValues,
  644. });
  645. }}
  646. >
  647. {this.state.departmentArr.map(function (item) {
  648. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  649. })}
  650. </Select>
  651. <Select
  652. placeholder="支付部门"
  653. style={{ width: 200, marginRight: 10 }}
  654. value={searchValues["payDep"]
  655. ? searchValues["payDep"]
  656. : undefined}
  657. onChange={e => {
  658. searchValues["payDep"] = e;
  659. this.setState({
  660. searchValues: searchValues,
  661. });
  662. }}
  663. >
  664. {this.state.departmentArr.map(function (item) {
  665. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  666. })}
  667. </Select>
  668. <Select
  669. style={{ width: 140 }}
  670. placeholder="审核状态"
  671. value={searchValues["examineStatus"]
  672. ? searchValues["examineStatus"]
  673. : undefined}
  674. onChange={(e) => {
  675. searchValues["examineStatus"] = e;
  676. this.setState({
  677. searchValues: searchValues,
  678. });
  679. }}
  680. >
  681. <Option value="0">待审核</Option>
  682. <Option value="1">已审核</Option>
  683. </Select>
  684. <div style={{ marginTop: 10 }}>
  685. <span>报销时间:</span>
  686. <RangePicker
  687. style={{ width: 300 }}
  688. value={[
  689. searchValues.startTime ? moment(searchValues.startTime) : null,
  690. searchValues.endTime ? moment(searchValues.endTime) : null,
  691. ]}
  692. onChange={(data, dataString) => {
  693. this.setState({
  694. searchValues: Object.assign(searchValues, {
  695. startTime: dataString[0],
  696. endTime: dataString[1],
  697. }),
  698. });
  699. }}
  700. />
  701. <Button
  702. type="primary"
  703. onClick={this.search}
  704. style={{ margin: "0 10px" }}
  705. >
  706. 搜索
  707. </Button>
  708. <Button onClick={this.reset}>重置</Button>
  709. </div>
  710. </div>
  711. </TabPane>
  712. <TabPane tab="更改表格显示数据" key="1">
  713. <div style={{ marginLeft: 10 }}>
  714. <ChooseList
  715. columns={this.state.columns}
  716. changeFn={this.changeList}
  717. changeList={this.state.changeList}
  718. top={55}
  719. margin={11}
  720. />
  721. </div>
  722. </TabPane>
  723. </Tabs>
  724. <div className="patent-table">
  725. <Spin spinning={this.state.loading}>
  726. <Table
  727. bordered
  728. columns={
  729. this.state.changeList == undefined
  730. ? this.state.columns
  731. : this.state.changeList
  732. }
  733. dataSource={this.state.dataSource}
  734. pagination={this.state.pagination}
  735. onRowDoubleClick={this.tableRowClick.bind(this)}
  736. size="small"
  737. />
  738. </Spin>
  739. <p
  740. style={{ display: "inline-block", fontSize: "14px", color: "red" }}
  741. >
  742. {
  743. <span style={{ marginRight: 10 }}>
  744. {`金额总计(元):${this.state.totalAmount}`}
  745. </span>
  746. }
  747. </p>
  748. </div>
  749. {
  750. //审核弹窗
  751. this.state.visible != "" &&
  752. <Modal
  753. width="400px"
  754. maskClosable={false}
  755. title="审核"
  756. confirmLoading={this.state.loading}
  757. visible={this.state.visible != ""}
  758. onOk={() => { this.toExamine(visible == "adopt" ? 1 : visible == "reject" && 3) }}
  759. okText={this.state.visible == "adopt" ? "通过" : this.state.visible == "reject" && "驳回"}
  760. onCancel={() => {
  761. this.setState({
  762. visible: '',
  763. reason: "",
  764. checkData: {},
  765. })
  766. }}
  767. >
  768. <TextArea
  769. rows={4}
  770. value={this.state.reason}
  771. onChange={(e) => {
  772. this.setState({
  773. reason: e.target.value,
  774. })
  775. }}
  776. placeholder="请填写审核内容"
  777. />
  778. </Modal>
  779. }
  780. {
  781. // 报销详情
  782. this.state.showDetails &&
  783. <Modal
  784. maskClosable={false}
  785. visible={this.state.showDetails}
  786. onOk={false}
  787. onCancel={() => { this.setState({ showDetails: false }) }}
  788. width="800px"
  789. title='报销详情'
  790. footer=""
  791. >
  792. <div>
  793. <Form layout="horizontal" id="demand-form">
  794. <Spin spinning={this.state.loading}>
  795. <div className="clearfix">
  796. {data.type == 1 &&
  797. <div>
  798. <FormItem
  799. className="half-item"
  800. {...formItemLayout}
  801. label="公出企业"
  802. >
  803. <span>{data.userNames}</span>
  804. </FormItem>
  805. <FormItem
  806. className="half-item"
  807. {...formItemLayout}
  808. label="公出地点"
  809. >
  810. <span>{data.districtName}</span>
  811. </FormItem>
  812. <FormItem
  813. className="half-item"
  814. {...formItemLayout}
  815. label="时间"
  816. >
  817. <span>{data.releaseStartStr} 至 {data.releaseEndStr}</span>
  818. </FormItem>
  819. <FormItem
  820. className="half-item"
  821. {...formItemLayout}
  822. label="公出时长"
  823. >
  824. <span>{data.duration}小时</span>
  825. </FormItem>
  826. </div>}
  827. <FormItem
  828. className="half-item"
  829. {...formItemLayout}
  830. label="申请类型"
  831. >
  832. <span>{getAccountName(data.type, data.typeOther)}</span>
  833. </FormItem>
  834. <FormItem
  835. className="half-item"
  836. {...formItemLayout}
  837. label="报销至订单"
  838. >
  839. <div>
  840. <div>{data.buyerName}</div>
  841. <div>{data.contractNo}</div>
  842. </div>
  843. </FormItem>
  844. <FormItem
  845. className="half-item"
  846. {...formItemLayout}
  847. label="报销人"
  848. >
  849. <span>{data.aname}</span>
  850. </FormItem>
  851. <FormItem
  852. className="half-item"
  853. {...formItemLayout}
  854. label="报销公司"
  855. >
  856. <span>{data.appDepName}</span>
  857. </FormItem>
  858. <FormItem
  859. className="half-item"
  860. {...formItemLayout}
  861. label="支付公司"
  862. >
  863. <span>{data.payDepName}</span>
  864. </FormItem>
  865. </div>
  866. <div className="clearfix">
  867. <FormItem
  868. labelCol={{ span: 5 }}
  869. wrapperCol={{ span: 18 }}
  870. label="报销事由"
  871. >
  872. <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
  873. {data.remarks}
  874. </p>
  875. </FormItem>
  876. </div>
  877. {/* 差旅费显示 */}
  878. {data.type == 1 &&
  879. list.length > 0 && list.map(item =>
  880. item.type == 1
  881. ? <div className="clearfix" style={{ border: "1px solid #333", marginBottom: 1 }}>
  882. <FormItem
  883. className="half-item"
  884. {...formItemLayout}
  885. label="交通工具"
  886. >
  887. <span>
  888. {getVehicleName(item.vehicle, item.vehicleOther)}
  889. &nbsp;&nbsp;
  890. {!!item.startDistrict && <span>({item.startDistrict}&nbsp;⇀&nbsp;{item.endDistrict})</span>}
  891. </span>
  892. </FormItem>
  893. {/* <FormItem
  894. className="half-item"
  895. {...formItemLayout}
  896. label="地点"
  897. >
  898. <span>{item.startDistrict}
  899. <span>&nbsp;⇀&nbsp;</span>
  900. {item.endDistrict}</span>
  901. </FormItem> */}
  902. <div className="clearfix" style={{ marginBottom: "-10px" }}>
  903. <FormItem
  904. labelCol={{ span: 5 }}
  905. wrapperCol={{ span: 18 }}
  906. label="时间"
  907. >
  908. <span>{item.startTimeStr}&nbsp;&nbsp;至&nbsp;&nbsp;{item.endTimeStr}</span>
  909. </FormItem>
  910. </div>
  911. <FormItem
  912. className="half-item"
  913. {...formItemLayout}
  914. label="交通费"
  915. >
  916. <span>{item.amount}(元)</span>
  917. </FormItem>
  918. </div>
  919. : <div className="clearfix" style={{ border: "1px solid #333", marginBottom: 1 }}>
  920. <FormItem
  921. className="half-item"
  922. {...formItemLayout}
  923. label={getTypeName(item.type)}
  924. >
  925. <span>{item.amount}(元)</span>
  926. </FormItem>
  927. </div>
  928. )
  929. }
  930. {/* 通用 */}
  931. {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) &&
  932. list.length > 0 && list.map(item =>
  933. <div className="clearfix" style={{ border: "1px solid #333", marginBottom: 1 }}>
  934. {!!item.agreeTimeStr &&
  935. <FormItem
  936. className="half-item"
  937. {...formItemLayout}
  938. label={data.type == 5 ? "支付时间:" : "需付款时间:"}
  939. >
  940. <span>{item.agreeTimeStr.slice(0, 10)}</span>
  941. </FormItem>}
  942. <FormItem
  943. className="half-item"
  944. {...formItemLayout}
  945. label={data.type == 4
  946. ? "预借支金额:" : data.type == 5
  947. ? "抵扣金额:" : "金额:"}
  948. >
  949. <span>{item.amount}(元)</span>
  950. </FormItem>
  951. </div>
  952. )
  953. }
  954. {/* 第三方付款 */}
  955. {data.type == 3 &&
  956. list.length > 0 && list.map(item =>
  957. <div className="clearfix" style={{ border: "1px solid #333", marginBottom: 1 }}>
  958. {!!item.agreeTimeStr &&
  959. <FormItem
  960. className="half-item"
  961. {...formItemLayout}
  962. label="需付款时间"
  963. >
  964. <span>{item.agreeTimeStr.slice(0, 10)}</span>
  965. </FormItem>
  966. }
  967. <FormItem
  968. className="half-item"
  969. {...formItemLayout}
  970. label="付款方式"
  971. >
  972. <span>{["公对公转账"][item.payType]}</span>
  973. </FormItem>
  974. <FormItem
  975. className="half-item"
  976. {...formItemLayout}
  977. label="发票类型"
  978. >
  979. <span>{["普票", "专票"][item.invoiceType]}</span>
  980. </FormItem>
  981. <FormItem
  982. className="half-item"
  983. {...formItemLayout}
  984. label="发票号"
  985. >
  986. <span>{item.invoiceNo}</span>
  987. </FormItem>
  988. <FormItem
  989. className="half-item"
  990. {...formItemLayout}
  991. label="付款单位"
  992. >
  993. <span>{item.payerName}</span>
  994. </FormItem>
  995. <FormItem
  996. className="half-item"
  997. {...formItemLayout}
  998. label="开户银行"
  999. >
  1000. <span>{item.openBank}</span>
  1001. </FormItem>
  1002. <FormItem
  1003. className="half-item"
  1004. {...formItemLayout}
  1005. label="银行账户"
  1006. >
  1007. <span>{item.bankAccounts}</span>
  1008. </FormItem>
  1009. <FormItem
  1010. className="half-item"
  1011. {...formItemLayout}
  1012. label="开户行地址"
  1013. >
  1014. <span>{item.openBankAddress}</span>
  1015. </FormItem>
  1016. <FormItem
  1017. className="half-item"
  1018. {...formItemLayout}
  1019. label="金额(元)"
  1020. >
  1021. <span>{item.amount}</span>
  1022. </FormItem>
  1023. </div>
  1024. )
  1025. }
  1026. {data.type != 4 && data.debitTotalAmount &&
  1027. <div className="clearfix">
  1028. <FormItem
  1029. className="half-item"
  1030. {...formItemLayout}
  1031. label="预借支"
  1032. >
  1033. <span style={{ color: "red" }}>{data.debitTotalAmount}(元)</span>
  1034. </FormItem>
  1035. </div>}
  1036. {data.type != 4 && data.type != 5 &&
  1037. <div className="clearfix">
  1038. <FormItem
  1039. className="half-item"
  1040. {...formItemLayout}
  1041. label="总金额"
  1042. >
  1043. <span style={{ color: "red" }}>{total}(元)</span>
  1044. </FormItem>
  1045. </div>}
  1046. {data.type != 4 && data.type != 5 &&
  1047. <div className="clearfix">
  1048. <FormItem
  1049. className="half-item"
  1050. {...formItemLayout}
  1051. label="实报金额"
  1052. >
  1053. <span style={{ color: "red" }}>{(total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0}(元)</span>
  1054. </FormItem>
  1055. </div>}
  1056. <div className="clearfix">
  1057. <FormItem
  1058. labelCol={{ span: 5 }}
  1059. wrapperCol={{ span: 18 }}
  1060. label="附件"
  1061. >
  1062. <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  1063. {this.state.imgs ? <ImgList fileList={this.state.imgs} ItemWidth={'96px'} /> : <div />}
  1064. </div>
  1065. </FormItem>
  1066. </div>
  1067. {data.type != 3 && data.type != 5 &&
  1068. <div className="clearfix" style={{ border: "1px dashed #000" }}>
  1069. <FormItem
  1070. className="half-item"
  1071. {...formItemLayout}
  1072. label="收款人"
  1073. >
  1074. <span>{data.name}</span>
  1075. </FormItem>
  1076. <FormItem
  1077. className="half-item"
  1078. {...formItemLayout}
  1079. label="收款银行"
  1080. >
  1081. <span>{data.bank}</span>
  1082. </FormItem>
  1083. <FormItem
  1084. className="half-item"
  1085. {...formItemLayout}
  1086. label="收款账户"
  1087. >
  1088. <span>{data.accounts}</span>
  1089. </FormItem>
  1090. </div>}
  1091. <div className="clearfix" style={{ marginTop: 20 }}>
  1092. <Button
  1093. type="primary"
  1094. style={{
  1095. float: "right",
  1096. }}
  1097. onClick={() => {
  1098. this.setState({
  1099. logvisible: true
  1100. })
  1101. this.getLogData(data.id)
  1102. }}
  1103. >
  1104. 查看日志
  1105. </Button>
  1106. </div>
  1107. {this.props.isOperate && data.examine == 1 &&
  1108. <div className="clearfix"
  1109. style={{ width: 500, margin: "20px auto" }}>
  1110. <TextArea
  1111. rows={4}
  1112. value={this.state.reason}
  1113. onChange={(e) => {
  1114. this.setState({
  1115. reason: e.target.value,
  1116. })
  1117. }}
  1118. placeholder="请填写审核内容"
  1119. />
  1120. <div
  1121. style={{
  1122. width: 250,
  1123. display: "flex",
  1124. justifyContent: "space-between",
  1125. margin: "20px auto 0"
  1126. }}
  1127. >
  1128. <Button type="primary"
  1129. style={{ margin: 4 }}
  1130. onClick={(e) => {
  1131. this.setState({
  1132. checkData: data
  1133. }, () => {
  1134. this.toExamine(1)
  1135. })
  1136. }}
  1137. >同意</Button>
  1138. <Button type="danger"
  1139. style={{ margin: 4 }}
  1140. onClick={(e) => {
  1141. this.setState({
  1142. checkData: data
  1143. }, () => {
  1144. this.toExamine(3)
  1145. })
  1146. }}
  1147. >驳回</Button>
  1148. </div>
  1149. </div>
  1150. }
  1151. </Spin>
  1152. </Form>
  1153. </div>
  1154. </Modal>
  1155. }
  1156. {
  1157. // 审核日志
  1158. this.state.logvisible &&
  1159. <Modal
  1160. visible={this.state.logvisible}
  1161. className="admin-desc-content"
  1162. width="800px"
  1163. maskClosable={false}
  1164. title="审核日志"
  1165. footer={null}
  1166. onCancel={() => {
  1167. this.setState({
  1168. logvisible: false,
  1169. logdataSour: []
  1170. })
  1171. }}
  1172. >
  1173. <div className="patent-table">
  1174. <Spin spinning={this.state.loading}>
  1175. <Table
  1176. columns={this.state.logcolumns}
  1177. dataSource={this.state.logdataSour}
  1178. pagination={false}
  1179. bordered
  1180. size="small"
  1181. />
  1182. </Spin>
  1183. </div>
  1184. </Modal>
  1185. }
  1186. </div>
  1187. );
  1188. },
  1189. });
  1190. export default AccountReview;