accountTotal.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  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. DatePicker,
  14. Modal,
  15. } from "antd";
  16. import { ChooseList } from "../../order/orderNew/chooseList";
  17. import { ShowModal, getAccountName, getSecondaryAccountName } from "../../../tools"
  18. import ShowModalDiv from "@/showModal.jsx";
  19. const FormItem = Form.Item;
  20. const { RangePicker } = DatePicker;
  21. const { TabPane } = Tabs;
  22. const AccountTotal = React.createClass({
  23. getInitialState() {
  24. return {
  25. searchValues: {
  26. targetType: 1
  27. }, // 列表筛选条件
  28. loading: false, //加载动画
  29. changeList: undefined, // 更改后的表格显示数据
  30. dataSource: [], // 列表数据
  31. departmentArr: [],
  32. pagination: {
  33. defaultCurrent: 1,
  34. defaultPageSize: 10,
  35. showQuickJumper: true,
  36. pageSize: 10,
  37. onChange: function (page) {
  38. this.loadData(page);
  39. }.bind(this),
  40. showTotal: function (total) {
  41. return "共" + total + "条数据";
  42. },
  43. },
  44. columns: [
  45. {
  46. title: "合同/客户",
  47. dataIndex: "contractNo",
  48. key: "contractNo",
  49. render: (text, record) => {
  50. return (
  51. this.state.searchValues["targetType"] == 1 ?
  52. <span>
  53. {text + " / " + record.buyerName}
  54. </span>
  55. : <span>{record.depName}</span>
  56. );
  57. },
  58. },
  59. {
  60. title: "合同总额/已收款",
  61. dataIndex: "totalAmount",
  62. key: "totalAmount",
  63. render: (text, record) => {
  64. return (
  65. <div>
  66. {text + " / " + record.settlementAmount}
  67. </div>
  68. );
  69. },
  70. },
  71. {
  72. title: "报销总额",
  73. dataIndex: "expenseAmount",
  74. key: "expenseAmount",
  75. },
  76. {
  77. title: "已付成本",
  78. dataIndex: "paymentAmount",
  79. key: "paymentAmount",
  80. },
  81. {
  82. title: "报销人数/天数/报销次数",
  83. dataIndex: "peopleCount",
  84. key: "peopleCount",
  85. render: (text, record) => {
  86. return (
  87. <div>
  88. {text + " / " + record.days + " / " + record.expenseCount}
  89. </div>
  90. );
  91. },
  92. },
  93. {
  94. title: "报销未审核/驳回次数",
  95. dataIndex: "notExamine",
  96. key: "notExamine",
  97. render: (text, record) => {
  98. return (
  99. <div>
  100. {text + " / " + record.rejectCount}
  101. </div>
  102. );
  103. },
  104. },
  105. ],
  106. };
  107. },
  108. componentWillMount() {
  109. this.departmentList();
  110. this.loadData();
  111. },
  112. // 列表接口
  113. loadData(pageNo) {
  114. const { searchValues, pagination } = this.state;
  115. this.setState({
  116. loading: true,
  117. });
  118. let datas = Object.assign(searchValues, {
  119. // pageNo: pageNo || 1,
  120. // pageSize: pagination.pageSize,
  121. });
  122. $.ajax({
  123. method: "get",
  124. dataType: "json",
  125. crossDomain: false,
  126. url: globalConfig.context + "/api/admin/expenseCounts/getCounts",
  127. data: datas,
  128. success: function (data) {
  129. ShowModal(this);
  130. this.setState({
  131. loading: false,
  132. });
  133. if (data.error && data.error.length === 0) {
  134. if (data.data) {
  135. pagination.current = data.data.pageNo;
  136. pagination.total = data.data.totalCount;
  137. if (data.data && data.data && !data.data.length) {
  138. pagination.current = 0;
  139. pagination.total = 0;
  140. }
  141. this.setState({
  142. dataSource: data.data,
  143. pagination: this.state.pagination,
  144. pageNo: data.data.pageNo,
  145. totalAmount: data.data.totalAmount,
  146. });
  147. }
  148. } else {
  149. message.warning(data.error[0].message);
  150. }
  151. }.bind(this),
  152. }).always(
  153. function () {
  154. this.setState({
  155. loading: false,
  156. });
  157. }.bind(this)
  158. );
  159. },
  160. departmentList() {
  161. $.ajax({
  162. method: "get",
  163. dataType: "json",
  164. crossDomain: false,
  165. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  166. data: {},
  167. success: function (data) {
  168. let thedata = data.data;
  169. let theArr = [];
  170. if (!thedata) {
  171. if (data.error && data.error.length) {
  172. message.warning(data.error[0].message);
  173. }
  174. } else {
  175. thedata.map(function (item, index) {
  176. theArr.push({
  177. key: index,
  178. name: item.name,
  179. id: item.id
  180. });
  181. });
  182. }
  183. this.setState({
  184. departmentArr: theArr
  185. });
  186. }.bind(this)
  187. }).always(
  188. function () {
  189. }.bind(this)
  190. );
  191. },
  192. // 搜索
  193. search() {
  194. this.loadData();
  195. },
  196. // 重置
  197. reset() {
  198. this.setState({
  199. searchValues: {
  200. targetType: 1
  201. },
  202. }, () => {
  203. this.loadData();
  204. })
  205. },
  206. changeList(arr) {
  207. const newArr = [];
  208. this.state.columns.forEach((item) => {
  209. arr.forEach((val) => {
  210. if (val === item.title) {
  211. newArr.push(item);
  212. }
  213. });
  214. });
  215. this.setState({
  216. changeList: newArr,
  217. });
  218. },
  219. export() {
  220. this.setState({
  221. exportExecLoading: true
  222. })
  223. let loading = message.loading('加载中...');
  224. let data = this.state.searchValues;
  225. $.ajax({
  226. method: "get",
  227. dataType: "json",
  228. crossDomain: false,
  229. url: globalConfig.context + "/api/admin/expenseCounts/getCounts/Export",
  230. data,
  231. success: function (data) {
  232. if (data.error.length === 0) {
  233. this.download(data.data);
  234. } else {
  235. message.warning(data.error[0].message);
  236. }
  237. }.bind(this),
  238. }).always(function () {
  239. loading();
  240. this.setState({
  241. exportExecLoading: false
  242. })
  243. }.bind(this));
  244. },
  245. // 下载
  246. download(fileName) {
  247. window.location.href = globalConfig.context + "/open/download?fileName=" + fileName
  248. },
  249. getCountsClear() {
  250. this.setState({
  251. loading: true,
  252. });
  253. $.ajax({
  254. method: "get",
  255. dataType: "json",
  256. crossDomain: false,
  257. url: globalConfig.context + "/api/admin/expenseCounts/getCountsClear",
  258. data: {},
  259. success: function (data) {
  260. ShowModal(this);
  261. this.setState({
  262. loading: false,
  263. });
  264. if (data.error && data.error.length === 0) {
  265. message.success("清除成功!")
  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. render() {
  279. const { searchValues, } = this.state
  280. return (
  281. <div className="user-content">
  282. <ShowModalDiv ShowModal={this.state.showModal} />
  283. <div className="content-title" style={{ marginBottom: 10 }}>
  284. <span style={{ fontWeight: 900, fontSize: 16 }}>报销总计</span>
  285. </div>
  286. <Tabs defaultActiveKey="2" className="test">
  287. <TabPane tab="搜索" key="2">
  288. <div className="user-search" style={{ marginLeft: 10 }}>
  289. <Select placeholder="" style={{ width: 140 }}
  290. value={searchValues["targetType"]}
  291. onChange={(e) => {
  292. searchValues["targetType"] = e;
  293. const _this = this;
  294. this.setState({
  295. searchValues: searchValues,
  296. }, () => {
  297. _this.search()
  298. });
  299. }}
  300. >
  301. <Select.Option value={0} >部门</Select.Option>
  302. <Select.Option value={1} >订单</Select.Option>
  303. </Select>
  304. {
  305. searchValues["targetType"] == 1 &&
  306. <Input
  307. placeholder="合同编号"
  308. value={searchValues["contactNo"]
  309. ? searchValues["contactNo"]
  310. : ""}
  311. onChange={(e) => {
  312. searchValues["contactNo"] = e.target.value;
  313. this.setState({
  314. searchValues: searchValues,
  315. });
  316. }}
  317. />
  318. }
  319. <Input
  320. placeholder="客户名称"
  321. value={searchValues["buyerName"]
  322. ? searchValues["buyerName"]
  323. : ""}
  324. onChange={(e) => {
  325. searchValues["buyerName"] = e.target.value;
  326. this.setState({
  327. searchValues: searchValues,
  328. });
  329. }}
  330. />
  331. <Select
  332. placeholder="所属部门"
  333. style={{ width: 200, marginRight: 10 }}
  334. value={searchValues["depId"]
  335. ? searchValues["depId"]
  336. : undefined}
  337. onChange={e => {
  338. searchValues["depId"] = e;
  339. this.setState({
  340. searchValues: searchValues,
  341. });
  342. }}
  343. >
  344. {this.state.departmentArr.map(function (item) {
  345. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  346. })}
  347. </Select>
  348. <span>报销时间:</span>
  349. <RangePicker
  350. style={{ width: 300 }}
  351. value={[
  352. searchValues.startTime ? moment(searchValues.startTime) : null,
  353. searchValues.endTime ? moment(searchValues.endTime) : null,
  354. ]}
  355. onChange={(data, dataString) => {
  356. this.setState({
  357. searchValues: Object.assign(searchValues, {
  358. startTime: dataString[0],
  359. endTime: dataString[1],
  360. }),
  361. });
  362. }}
  363. />
  364. <Button
  365. type="primary"
  366. onClick={this.search}
  367. style={{ margin: "0 10px" }}
  368. >搜索</Button>
  369. <Button onClick={this.reset}>重置</Button>
  370. <Button
  371. type="primary"
  372. onClick={this.getCountsClear}
  373. style={{ marginLeft: 10 }}
  374. >清理缓存</Button>
  375. </div>
  376. </TabPane>
  377. <TabPane tab="更改表格显示数据" key="1">
  378. <div style={{ marginLeft: 10 }}>
  379. <ChooseList
  380. columns={this.state.columns}
  381. changeFn={this.changeList}
  382. changeList={this.state.changeList}
  383. top={55}
  384. margin={11}
  385. />
  386. </div>
  387. </TabPane>
  388. <TabPane tab="导出" key="3">
  389. <div style={{ float: "left" }}>
  390. <Button
  391. type="primary"
  392. loading={this.state.exportPendingLoading}
  393. onClick={this.export}
  394. style={{ margin: 10 }}
  395. >
  396. 导出excel
  397. </Button>
  398. </div>
  399. </TabPane>
  400. </Tabs>
  401. <div className="patent-table">
  402. <Spin spinning={this.state.loading}>
  403. <Table
  404. bordered
  405. columns={
  406. this.state.changeList == undefined
  407. ? this.state.columns
  408. : this.state.changeList
  409. }
  410. dataSource={this.state.dataSource}
  411. pagination={false}
  412. size="small"
  413. />
  414. </Spin>
  415. </div>
  416. </div>
  417. );
  418. },
  419. });
  420. export default AccountTotal;