accountReview.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794
  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, getVehicleName, getTypeName, commonAdd, dealBigMoney } from "../../../tools"
  19. import ShowModalDiv from "@/showModal.jsx";
  20. import AccountDetails from "./accountDetails";
  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. <div>
  144. {this.props.isOperate &&
  145. <Button type="primary"
  146. style={{ margin: 4 }}
  147. onClick={() => { this.download(record.attachmentUrl) }}
  148. >下载</Button>}
  149. {this.props.isOperate && record.examine == 1 &&
  150. <Button type="primary"
  151. style={{ margin: 4 }}
  152. onClick={(e) => {
  153. e.stopPropagation();
  154. this.setState({
  155. visible: "adopt",
  156. checkData: record,
  157. })
  158. }}
  159. >同意</Button>}
  160. {this.props.isOperate && record.examine == 1 &&
  161. <Button type="danger"
  162. style={{ margin: 4 }}
  163. onClick={(e) => {
  164. e.stopPropagation();
  165. this.setState({
  166. visible: "reject",
  167. checkData: record,
  168. })
  169. }}
  170. >驳回</Button>}
  171. {record.status != 0 && <Button
  172. style={{ margin: 4 }}
  173. onClick={() => {
  174. this.setState({
  175. logvisible: true
  176. })
  177. this.getLogData(record.id)
  178. }}>日志</Button>}
  179. </div>
  180. </div>
  181. )
  182. }
  183. },
  184. ],
  185. logcolumns: [
  186. {
  187. title: "审核人",
  188. dataIndex: "auditorName",
  189. key: "auditorName"
  190. },
  191. {
  192. title: "操作",
  193. dataIndex: "status",
  194. key: "status",
  195. width: 120,
  196. render: (text, record) => {
  197. return (
  198. <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#1D4FEA"][text] }}>
  199. {["【发起】", "【通过】", "【完成】", "【驳回】", "【重新发起】"][text]}
  200. {this.state.processStatus == record.processStatus && !record.id &&
  201. <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
  202. </span>
  203. );
  204. },
  205. },
  206. {
  207. title: "操作时间",
  208. dataIndex: "createTimeStr",
  209. key: "createTimeStr",
  210. width: 88,
  211. },
  212. {
  213. title: "备注",
  214. dataIndex: "remarks",
  215. key: "remarks",
  216. render: (text, record) => {
  217. return (
  218. <div style={{ minWidth: 250 }}>{text}</div>
  219. )
  220. }
  221. }
  222. ],
  223. };
  224. },
  225. componentWillMount() {
  226. this.departmentList();
  227. this.loadData();
  228. },
  229. // 列表接口
  230. loadData(pageNo) {
  231. const { searchValues, pagination } = this.state;
  232. this.setState({
  233. loading: true,
  234. });
  235. let datas = Object.assign(searchValues, {
  236. pageNo: pageNo || 1,
  237. pageSize: pagination.pageSize,
  238. processStatus: this.props.isOperate ? 1 : 2,
  239. });
  240. $.ajax({
  241. method: "get",
  242. dataType: "json",
  243. crossDomain: false,
  244. url: globalConfig.context + "/api/admin/expenseAccount/pageList",
  245. data: datas,
  246. success: function (data) {
  247. ShowModal(this);
  248. this.setState({
  249. loading: false,
  250. });
  251. if (data.error && data.error.length === 0) {
  252. if (data.data.list) {
  253. pagination.current = data.data.pageNo;
  254. pagination.total = data.data.totalCount;
  255. if (data.data && data.data.list && !data.data.list.length) {
  256. pagination.current = 0;
  257. pagination.total = 0;
  258. }
  259. this.setState({
  260. dataSource: data.data.list,
  261. pagination: this.state.pagination,
  262. pageNo: data.data.pageNo,
  263. totalAmount: data.data.totalAmount,
  264. });
  265. } else {
  266. this.setState({
  267. dataSource: data.data,
  268. pagination: false,
  269. });
  270. }
  271. } else {
  272. message.warning(data.error[0].message);
  273. }
  274. }.bind(this),
  275. }).always(
  276. function () {
  277. this.setState({
  278. loading: false,
  279. });
  280. }.bind(this)
  281. );
  282. },
  283. // 日志
  284. getLogData(eaid) {
  285. $.ajax({
  286. method: "get",
  287. dataType: "json",
  288. crossDomain: false,
  289. url: globalConfig.context + "/api/admin/expenseAccount/log/list",
  290. data: { eaid },
  291. success: function (data) {
  292. if (data.error.length === 0) {
  293. this.setState({
  294. logdataSour: data.data || []
  295. });
  296. this.isHere(data.data || [])
  297. } else {
  298. message.warning(data.error[0].message);
  299. }
  300. }.bind(this)
  301. }).always(
  302. function () {
  303. }.bind(this)
  304. );
  305. },
  306. //
  307. isHere(list = []) {
  308. for (var i = 0; i < list.length; i++) {
  309. if (!list[i].id) {
  310. this.setState({
  311. processStatus: list[i].processStatus
  312. })
  313. return
  314. }
  315. }
  316. },
  317. download(urls) {
  318. if (!urls) {
  319. message.error("暂无可下载的附件!");
  320. } else {
  321. let list = urls.split(',') || []
  322. list.forEach(e => {
  323. var aLink = document.createElement('a');
  324. aLink.download = e;
  325. aLink.href = globalConfig.context + `/open/download?fileName=${e}&delete=false`;
  326. document.body.appendChild(aLink);
  327. aLink.click();
  328. document.body.removeChild(aLink);
  329. });
  330. }
  331. },
  332. departmentList() {
  333. $.ajax({
  334. method: "get",
  335. dataType: "json",
  336. crossDomain: false,
  337. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  338. data: {},
  339. success: function (data) {
  340. let thedata = data.data;
  341. let theArr = [];
  342. if (!thedata) {
  343. if (data.error && data.error.length) {
  344. message.warning(data.error[0].message);
  345. }
  346. } else {
  347. thedata.map(function (item, index) {
  348. theArr.push({
  349. key: index,
  350. name: item.name,
  351. id: item.id
  352. });
  353. });
  354. }
  355. this.setState({
  356. departmentArr: theArr
  357. });
  358. }.bind(this)
  359. }).always(
  360. function () {
  361. }.bind(this)
  362. );
  363. },
  364. // 审核
  365. toExamine(num) {
  366. const { checkData, reason } = this.state
  367. if (!reason) {
  368. message.warning("请填写审核说明~");
  369. return;
  370. }
  371. this.setState({
  372. loading: true,
  373. });
  374. $.ajax({
  375. method: "POST",
  376. dataType: "json",
  377. crossDomain: false,
  378. url: globalConfig.context + "/api/admin/expenseAccount/examine",
  379. data: {
  380. id: checkData.id,
  381. reason,
  382. status: num,//1同意 3驳回
  383. },
  384. }).done(
  385. function (data) {
  386. if (!data.error.length) {
  387. message.success("审核成功!");
  388. this.setState({
  389. visible: "",
  390. reason: "",
  391. showDetails: false,
  392. checkData: {},
  393. });
  394. this.loadData()
  395. } else {
  396. message.warning(data.error[0].message);
  397. }
  398. }.bind(this)
  399. );
  400. },
  401. tableRowClick(e) {
  402. this.setState({
  403. showDetails: true,
  404. id: e.id,
  405. })
  406. // this.getDetails(e.id)
  407. },
  408. // 查询负责人
  409. followUp(e) {
  410. this.setState({
  411. aname: e
  412. });
  413. $.ajax({
  414. method: "get",
  415. dataType: "json",
  416. crossDomain: false,
  417. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  418. data: {
  419. adminName: e,
  420. },
  421. success: function (data) {
  422. let thedata = data.data || [];
  423. if (!thedata) {
  424. if (data.error && data.error.length) {
  425. message.warning(data.error[0].message);
  426. }
  427. thedata = {};
  428. }
  429. this.setState({
  430. fjlist: thedata,
  431. });
  432. }.bind(this),
  433. }).always(
  434. function () {
  435. this.setState({
  436. loading: false,
  437. });
  438. }.bind(this)
  439. );
  440. },
  441. // 选中负责人
  442. selectF(value) {
  443. const { searchValues, fjlist } = this.state;
  444. const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
  445. this.setState({
  446. searchValues: Object.assign(searchValues, {
  447. aid: newdataSources.find((item) => item.name == value).id,
  448. }),
  449. });
  450. },
  451. // 搜索
  452. search() {
  453. this.loadData();
  454. },
  455. // 重置
  456. reset() {
  457. this.setState({
  458. aname: "",
  459. searchValues: JSON.parse(JSON.stringify({})),
  460. }, () => {
  461. this.loadData();
  462. })
  463. },
  464. changeList(arr) {
  465. const newArr = [];
  466. this.state.columns.forEach((item) => {
  467. arr.forEach((val) => {
  468. if (val === item.title) {
  469. newArr.push(item);
  470. }
  471. });
  472. });
  473. this.setState({
  474. changeList: newArr,
  475. });
  476. },
  477. render() {
  478. const { TextArea } = Input
  479. const { searchValues, visible, } = this.state
  480. const formItemLayout = {
  481. labelCol: { span: 5 },
  482. wrapperCol: { span: 18 },
  483. };
  484. const dataSources = this.state.fjlist || [];
  485. const options = dataSources.map((group) => (
  486. <Select.Option key={group.id} value={group.name}>
  487. {group.name}
  488. </Select.Option>
  489. ));
  490. return (
  491. <div className="user-content">
  492. <ShowModalDiv ShowModal={this.state.showModal} />
  493. <div className="content-title" style={{ marginBottom: 10 }}>
  494. <span style={{ fontWeight: 900, fontSize: 16 }}>{this.props.isOperate ? "报销审核" : "报销列表"}</span>
  495. </div>
  496. <Tabs defaultActiveKey="2" className="test">
  497. <TabPane tab="搜索" key="2">
  498. <div className="user-search" style={{ marginLeft: 10 }}>
  499. <Input
  500. placeholder="合同编号"
  501. value={searchValues["contractNo"]
  502. ? searchValues["contractNo"]
  503. : ""}
  504. onChange={(e) => {
  505. searchValues["contractNo"] = e.target.value;
  506. this.setState({
  507. searchValues: searchValues,
  508. });
  509. }}
  510. />
  511. <Input
  512. placeholder="客户名称"
  513. value={searchValues["username"]
  514. ? searchValues["username"]
  515. : ""}
  516. onChange={(e) => {
  517. searchValues["username"] = e.target.value;
  518. this.setState({
  519. searchValues: searchValues,
  520. });
  521. }}
  522. />
  523. <Select
  524. style={{ width: 140 }}
  525. placeholder="报销类型"
  526. value={searchValues["type"]
  527. ? searchValues["type"]
  528. : undefined}
  529. onChange={(e) => {
  530. searchValues["type"] = e;
  531. this.setState({
  532. searchValues: searchValues,
  533. });
  534. }}
  535. >
  536. <Option value="1">差旅费</Option>
  537. <Option value="2">非业务报销</Option>
  538. <Option value="3">第三方付款</Option>
  539. <Option value="4">申请借支</Option>
  540. <Option value="5">申请抵扣</Option>
  541. <Option value="0">其他</Option>
  542. </Select>
  543. <AutoComplete
  544. className="certain-category-search"
  545. dropdownClassName="certain-category-search-dropdown"
  546. dropdownMatchSelectWidth={false}
  547. style={{ width: 140 }}
  548. dataSource={options}
  549. placeholder="报销人"
  550. value={this.state.aname}
  551. onChange={this.followUp.bind(this)}
  552. filterOption={true}
  553. onSelect={this.selectF.bind(this)}
  554. >
  555. <Input />
  556. </AutoComplete>
  557. <Select
  558. placeholder="所属部门"
  559. style={{ width: 200, marginRight: 10 }}
  560. value={searchValues["depId"]
  561. ? searchValues["depId"]
  562. : undefined}
  563. onChange={e => {
  564. searchValues["depId"] = e;
  565. this.setState({
  566. searchValues: searchValues,
  567. });
  568. }}
  569. >
  570. {this.state.departmentArr.map(function (item) {
  571. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  572. })}
  573. </Select>
  574. <Select
  575. placeholder="申请部门"
  576. style={{ width: 200, marginRight: 10 }}
  577. value={searchValues["applyDep"]
  578. ? searchValues["applyDep"]
  579. : undefined}
  580. onChange={e => {
  581. searchValues["applyDep"] = e;
  582. this.setState({
  583. searchValues: searchValues,
  584. });
  585. }}
  586. >
  587. {this.state.departmentArr.map(function (item) {
  588. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  589. })}
  590. </Select>
  591. <Select
  592. placeholder="支付部门"
  593. style={{ width: 200, marginRight: 10 }}
  594. value={searchValues["payDep"]
  595. ? searchValues["payDep"]
  596. : undefined}
  597. onChange={e => {
  598. searchValues["payDep"] = e;
  599. this.setState({
  600. searchValues: searchValues,
  601. });
  602. }}
  603. >
  604. {this.state.departmentArr.map(function (item) {
  605. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  606. })}
  607. </Select>
  608. <Select
  609. style={{ width: 140 }}
  610. placeholder="审核状态"
  611. value={searchValues["examineStatus"]
  612. ? searchValues["examineStatus"]
  613. : undefined}
  614. onChange={(e) => {
  615. searchValues["examineStatus"] = e;
  616. this.setState({
  617. searchValues: searchValues,
  618. });
  619. }}
  620. >
  621. <Option value="0">待审核</Option>
  622. <Option value="1">已审核</Option>
  623. </Select>
  624. <div style={{ marginTop: 10 }}>
  625. <span>报销时间:</span>
  626. <RangePicker
  627. style={{ width: 300 }}
  628. value={[
  629. searchValues.startTime ? moment(searchValues.startTime) : null,
  630. searchValues.endTime ? moment(searchValues.endTime) : null,
  631. ]}
  632. onChange={(data, dataString) => {
  633. this.setState({
  634. searchValues: Object.assign(searchValues, {
  635. startTime: dataString[0],
  636. endTime: dataString[1],
  637. }),
  638. });
  639. }}
  640. />
  641. <Button
  642. type="primary"
  643. onClick={this.search}
  644. style={{ margin: "0 10px" }}
  645. >
  646. 搜索
  647. </Button>
  648. <Button onClick={this.reset}>重置</Button>
  649. </div>
  650. </div>
  651. </TabPane>
  652. <TabPane tab="更改表格显示数据" key="1">
  653. <div style={{ marginLeft: 10 }}>
  654. <ChooseList
  655. columns={this.state.columns}
  656. changeFn={this.changeList}
  657. changeList={this.state.changeList}
  658. top={55}
  659. margin={11}
  660. />
  661. </div>
  662. </TabPane>
  663. </Tabs>
  664. <div className="patent-table">
  665. <Spin spinning={this.state.loading}>
  666. <Table
  667. bordered
  668. columns={
  669. this.state.changeList == undefined
  670. ? this.state.columns
  671. : this.state.changeList
  672. }
  673. dataSource={this.state.dataSource}
  674. pagination={this.state.pagination}
  675. onRowDoubleClick={this.tableRowClick.bind(this)}
  676. size="small"
  677. />
  678. </Spin>
  679. <p
  680. style={{ display: "inline-block", fontSize: "14px", color: "red" }}
  681. >
  682. {
  683. <span style={{ marginRight: 10 }}>
  684. {`金额总计(元):${this.state.totalAmount}`}
  685. </span>
  686. }
  687. </p>
  688. </div>
  689. {
  690. //审核弹窗
  691. this.state.visible != "" &&
  692. <Modal
  693. width="400px"
  694. maskClosable={false}
  695. title="审核"
  696. confirmLoading={this.state.loading}
  697. visible={this.state.visible != ""}
  698. onOk={() => { this.toExamine(visible == "adopt" ? 1 : visible == "reject" && 3) }}
  699. okText={this.state.visible == "adopt" ? "通过" : this.state.visible == "reject" && "驳回"}
  700. onCancel={() => {
  701. this.setState({
  702. visible: '',
  703. reason: "",
  704. checkData: {},
  705. })
  706. }}
  707. >
  708. <div style={{ width: "90%", margin: "0 auto" }}>
  709. <TextArea
  710. rows={4}
  711. value={this.state.reason}
  712. onChange={(e) => {
  713. this.setState({
  714. reason: e.target.value,
  715. })
  716. }}
  717. placeholder="请填写审核内容"
  718. />
  719. </div>
  720. </Modal>
  721. }
  722. {
  723. this.state.showDetails &&
  724. <AccountDetails
  725. showDetails={this.state.showDetails}
  726. id={this.state.id}
  727. isOperate={this.props.isOperate}
  728. onCancel={() => { this.setState({ showDetails: false }) }}
  729. />
  730. }
  731. {
  732. // 审核日志
  733. this.state.logvisible &&
  734. <Modal
  735. visible={this.state.logvisible}
  736. className="admin-desc-content"
  737. width="800px"
  738. maskClosable={false}
  739. title="审核日志"
  740. footer={null}
  741. onCancel={() => {
  742. this.setState({
  743. logvisible: false,
  744. })
  745. }}
  746. >
  747. <div className="patent-table">
  748. <Spin spinning={this.state.loading}>
  749. <Table
  750. columns={this.state.logcolumns}
  751. dataSource={this.state.logdataSour}
  752. pagination={false}
  753. bordered
  754. size="small"
  755. />
  756. </Spin>
  757. </div>
  758. </Modal>
  759. }
  760. </div>
  761. );
  762. },
  763. });
  764. export default AccountReview;