accountReview.jsx 41 KB

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