index.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. import React, { Component } from 'react';
  2. import { AutoComplete, Button, DatePicker, Input, message, Select, Spin, Table, Tabs } from "antd";
  3. import {
  4. ShowModal,
  5. } from "@/tools";
  6. import { ChooseList } from "../../order/orderNew/chooseList";
  7. import $ from "jquery/src/ajax";
  8. import './index.less';
  9. import moment from "moment";
  10. import DetailedList from './detailedList';
  11. import { object } from "prop-types";
  12. const { TabPane } = Tabs;
  13. const { RangePicker } = DatePicker;
  14. class ProjecCount extends Component {
  15. constructor(props) {
  16. super(props);
  17. this.state = {
  18. pageNo: 1,
  19. loading: false,
  20. changeList: undefined,
  21. columns: [
  22. {
  23. title: "编号",
  24. dataIndex: "key",
  25. key: "key",
  26. },
  27. {
  28. title: "公出人员",
  29. dataIndex: "name",
  30. key: "name",
  31. },
  32. {
  33. title: "非公出协单次数",
  34. dataIndex: "xds",
  35. key: "xds",
  36. },
  37. {
  38. title: "公出次数",
  39. dataIndex: "tg",
  40. key: "tg",
  41. className: 'projectTable',
  42. onCellClick: (record, event) => {
  43. event.stopPropagation();
  44. this.setState({
  45. status: 2,
  46. visible: true,
  47. aid: record.aid,
  48. title: '公出次数',
  49. aName: record.name,
  50. })
  51. }
  52. },
  53. {
  54. title: "总时长(时)",
  55. dataIndex: "duration",
  56. key: "duration",
  57. className: 'projectTable',
  58. onCellClick: (record, event) => {
  59. event.stopPropagation();
  60. this.setState({
  61. status: 2,
  62. visible: true,
  63. aid: record.aid,
  64. title: '总时长(时)',
  65. aName: record.name,
  66. })
  67. }
  68. },
  69. {
  70. title: "未审核次数",
  71. dataIndex: "wsh",
  72. key: "wsh",
  73. className: 'projectTable',
  74. onCellClick: (record, event) => {
  75. event.stopPropagation();
  76. this.setState({
  77. status: 1,
  78. visible: true,
  79. aid: record.aid,
  80. title: '未审核次数',
  81. aName: record.name,
  82. })
  83. }
  84. },
  85. {
  86. title: "驳回次数",
  87. dataIndex: "bh",
  88. key: "bh",
  89. className: 'projectTable',
  90. onCellClick: (record, event) => {
  91. event.stopPropagation();
  92. this.setState({
  93. status: 0,
  94. visible: true,
  95. aid: record.aid,
  96. title: '驳回次数',
  97. aName: record.name,
  98. })
  99. }
  100. },
  101. {
  102. title: "已打卡次数",
  103. dataIndex: "dk",
  104. key: "dk",
  105. className: 'projectTable',
  106. onCellClick: (record, event) => {
  107. event.stopPropagation();
  108. this.setState({
  109. status: undefined,
  110. clockIn: 1,
  111. visible: true,
  112. aid: record.aid,
  113. title: '已打卡次数',
  114. aName: record.name,
  115. })
  116. }
  117. },
  118. ],
  119. pagination: {
  120. defaultCurrent: 1,
  121. defaultPageSize: 10,
  122. showQuickJumper: true,
  123. pageSize: 10,
  124. onChange: function (page) {
  125. this.loadData(page);
  126. }.bind(this),
  127. showTotal: function (total) {
  128. return "共" + total + "条数据";
  129. }
  130. },
  131. dataSource: [],
  132. releaseDate: [],
  133. createReleaseDate: [],
  134. superId: undefined,
  135. clockIn: 0,
  136. }
  137. this.loadData = this.loadData.bind(this);
  138. this.resetAll = this.resetAll.bind(this);
  139. this.changeList = this.changeList.bind(this);
  140. this.selectSuperId = this.selectSuperId.bind(this);
  141. this.supervisor = this.supervisor.bind(this);
  142. this.httpChange = this.httpChange.bind(this);
  143. this.blurChange = this.blurChange.bind(this);
  144. this.selectAuto = this.selectAuto.bind(this);
  145. this.exportExec = this.exportExec.bind(this);
  146. }
  147. //获取上级组织
  148. selectSuperId() {
  149. $.ajax({
  150. method: "get",
  151. dataType: "json",
  152. crossDomain: false,
  153. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  154. data: {},
  155. success: function (data) {
  156. let theArr = [];
  157. if (data.error && data.error.length === 0) {
  158. for (let i = 0; i < data.data.length; i++) {
  159. let theData = data.data[i];
  160. theArr.push(
  161. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  162. );
  163. };
  164. this.setState({
  165. contactsOption: theArr,
  166. });
  167. } else {
  168. message.warning(data.error[0].message);
  169. }
  170. }.bind(this),
  171. }).always(function () {
  172. this.setState({
  173. loading: false
  174. });
  175. }.bind(this));
  176. }
  177. changeList(arr) {
  178. const newArr = [];
  179. this.state.columns.forEach(item => {
  180. arr.forEach(val => {
  181. if (val === item.title) {
  182. newArr.push(item);
  183. }
  184. });
  185. });
  186. this.setState({
  187. changeList: newArr
  188. });
  189. }
  190. loadData(pageNo) {
  191. this.setState({
  192. loading: true
  193. })
  194. $.ajax({
  195. method: "get",
  196. dataType: "json",
  197. crossDomain: false,
  198. url: globalConfig.context + "/api/admin/release/publicReleaseStatistics",
  199. data: {
  200. pageNo: pageNo || 1,
  201. pageSize: this.state.pagination.pageSize,
  202. clockStart: this.state.releaseDate[0] || undefined,
  203. clockEnd: this.state.releaseDate[1] || undefined,
  204. createStart: this.state.createReleaseDate[0] || undefined,
  205. createEnd: this.state.createReleaseDate[1] || undefined,
  206. depId: this.state.superId || undefined,
  207. aid: this.state.theTypes || undefined,
  208. },
  209. success: function (data) {
  210. ShowModal(this);
  211. this.setState({
  212. loading: false
  213. })
  214. let theArr = [];
  215. if (data.error && data.error.length === 0) {
  216. for (let i = 0; i < data.data.list.length; i++) {
  217. let thisdata = data.data.list[i];
  218. thisdata.key = (data.data.pageNo - 1) * data.data.pageSize + i + 1;
  219. theArr.push(thisdata);
  220. }
  221. this.state.pagination.current = data.data.pageNo;
  222. this.state.pagination.total = data.data.totalCount;
  223. if (data.data && data.data.list && !data.data.list.length) {
  224. this.state.pagination.current = 0;
  225. this.state.pagination.total = 0;
  226. }
  227. this.setState({
  228. dataSource: theArr,
  229. pagination: this.state.pagination,
  230. pageNo: data.data.pageNo
  231. });
  232. } else {
  233. message.warning(data.error[0].message);
  234. }
  235. }.bind(this)
  236. }).always(
  237. function () {
  238. this.setState({
  239. loading: false
  240. });
  241. }.bind(this)
  242. );
  243. }
  244. resetAll() {
  245. this.setState({
  246. releaseDate: [],
  247. createReleaseDate: [],
  248. superId: undefined,
  249. theTypes: undefined,
  250. auto: ''
  251. }, () => {
  252. this.loadData();
  253. })
  254. }
  255. supervisor(e) {
  256. $.ajax({
  257. method: "get",
  258. dataType: "json",
  259. crossDomain: false,
  260. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  261. data: {
  262. adminName: e,
  263. },
  264. success: function (data) {
  265. let thedata = data.data;
  266. if (!thedata) {
  267. if (data.error && data.error.length) {
  268. message.warning(data.error[0].message);
  269. }
  270. thedata = {};
  271. }
  272. this.setState({
  273. customerArr: thedata,
  274. });
  275. }.bind(this),
  276. }).always(
  277. function () {
  278. }.bind(this)
  279. );
  280. }
  281. httpChange(e) {
  282. if (e.length >= 1) {
  283. this.supervisor(e);
  284. }
  285. this.setState({
  286. auto: e,
  287. });
  288. }
  289. selectAuto(value, options) {
  290. this.setState({
  291. auto: value,
  292. });
  293. }
  294. blurChange(e) {
  295. let theType = "";
  296. let contactLists = this.state.customerArr || [];
  297. if (e) {
  298. contactLists.map(function (item) {
  299. if (item.name == e.toString()) {
  300. theType = item.id;
  301. }
  302. });
  303. }
  304. this.setState({
  305. theTypes: theType,
  306. });
  307. }
  308. componentWillMount() {
  309. this.loadData();
  310. this.selectSuperId();
  311. }
  312. // 导出
  313. exportExec() {
  314. //debugger
  315. let data = {
  316. clockStart: this.state.releaseDate[0],
  317. clockEnd: this.state.releaseDate[1],
  318. createStart: this.state.createReleaseDate[0],
  319. createEnd: this.state.createReleaseDate[1],
  320. depId: this.state.superId,
  321. aid: this.state.theTypes
  322. };
  323. for (let i of Object.keys(data)) {
  324. if (!data[i]) {
  325. delete data[i]
  326. }
  327. }
  328. window.location.href =
  329. globalConfig.context +
  330. "/api/admin/release/publicReleaseStatistics/export?" +
  331. $.param(data);
  332. }
  333. render() {
  334. const dataSources = this.state.customerArr || [];
  335. const options = dataSources.map((group) => (
  336. <Select.Option key={group.id} value={group.name}>
  337. {group.name}
  338. </Select.Option>
  339. ));
  340. return (
  341. <div className="user-content">
  342. <div className="content-title">
  343. <span>
  344. 公出统计
  345. </span>
  346. </div>
  347. <Tabs defaultActiveKey="1" className="test">
  348. <TabPane tab="搜索" key="1">
  349. <div className="user-search" style={{
  350. marginTop: '10px',
  351. marginLeft: '10px',
  352. marginRight: '10px'
  353. }}>
  354. <span style={{ marginRight: "10px" }}>
  355. <Select
  356. placeholder="请选择部门"
  357. style={{ width: 200, marginLeft: 10 }}
  358. value={this.state.superId}
  359. onChange={(e) => { this.setState({ superId: e }) }}
  360. notFoundContent="未获取到上级组织列表">
  361. {this.state.contactsOption}
  362. </Select>
  363. </span>
  364. <span style={{ marginRight: "10px" }}>
  365. <AutoComplete
  366. className="certain-category-search"
  367. dropdownClassName="certain-category-search-dropdown"
  368. dropdownMatchSelectWidth={false}
  369. style={{ width: "120px" }}
  370. dataSource={options}
  371. placeholder='输入公出申请人'
  372. value={this.state.auto}
  373. onChange={this.httpChange}
  374. filterOption={true}
  375. onBlur={this.blurChange}
  376. onSelect={this.selectAuto}
  377. >
  378. <Input />
  379. </AutoComplete>
  380. </span>
  381. <span style={{ marginRight: "10px" }}>
  382. <span style={{ marginRight: '10px', marginBottom: '10px' }}>打卡时间 :</span>
  383. <RangePicker
  384. style={{ marginRight: '10px', marginBottom: '10px' }}
  385. value={[
  386. this.state.releaseDate[0]
  387. ? moment(this.state.releaseDate[0])
  388. : null,
  389. this.state.releaseDate[1]
  390. ? moment(this.state.releaseDate[1])
  391. : null,
  392. ]}
  393. onChange={(data, dataString) => {
  394. this.setState({ releaseDate: dataString });
  395. }}
  396. />
  397. </span>
  398. <span style={{ marginRight: "10px" }}>
  399. <span style={{ marginRight: '10px', marginBottom: '10px' }}>创建时间 :</span>
  400. <RangePicker
  401. style={{ marginRight: '10px', marginBottom: '10px' }}
  402. value={[
  403. this.state.createReleaseDate[0]
  404. ? moment(this.state.createReleaseDate[0])
  405. : null,
  406. this.state.createReleaseDate[1]
  407. ? moment(this.state.createReleaseDate[1])
  408. : null,
  409. ]}
  410. onChange={(data, dataString) => {
  411. this.setState({ createReleaseDate: dataString });
  412. }}
  413. />
  414. </span>
  415. <Button type="primary" onClick={() => {
  416. this.loadData();
  417. }} style={{ marginRight: '10px', marginBottom: '10px' }}>搜索</Button>
  418. <Button onClick={this.resetAll} style={{ marginRight: '10px', marginBottom: '10px' }}>重置</Button>
  419. </div>
  420. </TabPane>
  421. <TabPane tab="更改表格显示数据" key="2">
  422. <div style={{ marginLeft: 10 }}>
  423. <ChooseList
  424. columns={this.state.columns}
  425. changeFn={this.changeList}
  426. changeList={this.state.changeList}
  427. top={55}
  428. margin={11}
  429. />
  430. </div>
  431. </TabPane>
  432. <TabPane tab="导出" key="3">
  433. <div style={{ float: "left" }}>
  434. <Button onClick={this.exportExec} style={{ margin: 10 }}>导出excel</Button>
  435. </div>
  436. </TabPane>
  437. </Tabs>
  438. <div className="patent-table">
  439. <Spin spinning={this.state.loading}>
  440. <Table
  441. bordered
  442. size="middle"
  443. scroll={{ x: 800, y: 0 }}
  444. columns={
  445. this.state.changeList
  446. ? this.state.changeList
  447. : this.state.columns
  448. }
  449. dataSource={this.state.dataSource}
  450. pagination={this.state.pagination}
  451. />
  452. </Spin>
  453. </div>
  454. {this.state.visible &&
  455. <DetailedList
  456. status={this.state.status}
  457. title={this.state.title}
  458. aid={this.state.aid}
  459. aName={this.state.aName}
  460. depId={this.state.depId}
  461. createReleaseDate={this.state.createReleaseDate}
  462. releaseDate={this.state.releaseDate}
  463. clockIn={this.state.clockIn || undefined}
  464. visible={this.state.visible}
  465. onCancel={() => {
  466. this.setState({
  467. visible: false,
  468. clockIn: 0,
  469. })
  470. }}
  471. />
  472. }
  473. </div>
  474. )
  475. }
  476. }
  477. export default ProjecCount;