detailedList.jsx 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990
  1. import React, { Component } from "react";
  2. import {
  3. AutoComplete,
  4. Button,
  5. DatePicker,
  6. Input,
  7. message,
  8. Modal,
  9. Select,
  10. Spin,
  11. Table,
  12. Tabs,
  13. Tag,
  14. Form,
  15. Upload,
  16. Tooltip,
  17. } from "antd";
  18. import { ShowModal, splitUrl, getClockState } from "@/tools";
  19. import { clockState } from "@/dataDic";
  20. import { ChooseList } from "../../order/orderNew/chooseList";
  21. import $ from "jquery/src/ajax";
  22. import "./index.less";
  23. import moment from "moment";
  24. import ImgList from "../../../common/imgList";
  25. const { TabPane } = Tabs;
  26. const { RangePicker } = DatePicker;
  27. class DetailedList extends Component {
  28. constructor(props) {
  29. super(props);
  30. this.state = {
  31. pageNo: 1,
  32. loading: false,
  33. changeList: [],
  34. annexUrlArr: [],
  35. photoUrlArr: [],
  36. imgListVisible: false,
  37. columns: [
  38. {
  39. title: "编号",
  40. dataIndex: "key",
  41. key: "key",
  42. width: 45,
  43. },
  44. {
  45. title: "客户名称",
  46. dataIndex: "nickname",
  47. key: "nickname",
  48. width: 80,
  49. render: (text) => {
  50. return (
  51. // <Tooltip title={text}>
  52. <div
  53. // style={{
  54. // width: 80,
  55. // overflow: "hidden",
  56. // textOverflow: "ellipsis",
  57. // whiteSpace: "nowrap",
  58. // }}
  59. >
  60. {text}
  61. </div>
  62. // </Tooltip>
  63. );
  64. },
  65. },
  66. {
  67. title: "跟单人",
  68. dataIndex: "sname",
  69. key: "sname",
  70. width: 80,
  71. render: (text) => {
  72. return (
  73. // <Tooltip title={text}>
  74. <div
  75. // style={{
  76. // width: 100,
  77. // overflow: "hidden",
  78. // textOverflow: "ellipsis",
  79. // whiteSpace: "nowrap",
  80. // }}
  81. >
  82. {text}
  83. </div>
  84. // </Tooltip>
  85. );
  86. },
  87. },
  88. {
  89. title: "公出申请人",
  90. dataIndex: "aname",
  91. key: "aname",
  92. width: 80,
  93. render: (text) => {
  94. return (
  95. // <Tooltip title={text}>
  96. <div
  97. // style={{
  98. // width: 100,
  99. // overflow: "hidden",
  100. // textOverflow: "ellipsis",
  101. // whiteSpace: "nowrap",
  102. // }}
  103. >
  104. {text}
  105. </div>
  106. // </Tooltip>
  107. );
  108. },
  109. },
  110. {
  111. title: "申请时间",
  112. dataIndex: "createTimes",
  113. key: "createTimes",
  114. width: 75,
  115. },
  116. {
  117. title: "公出时间",
  118. dataIndex: "releaseStarts",
  119. key: "releaseStarts",
  120. width: 130,
  121. render: (text, record) => (
  122. <div>
  123. <div>{text}</div>
  124. <div style={{ paddingLeft: "44px" }}>至</div>
  125. <div>{record.releaseEnds}</div>
  126. </div>
  127. ),
  128. },
  129. {
  130. title: "公出地点",
  131. dataIndex: "userName",
  132. key: "userName",
  133. width: 100,
  134. render: (text) => {
  135. return (
  136. // <Tooltip title={text}>
  137. <div
  138. // style={{
  139. // width: 120,
  140. // overflow: "hidden",
  141. // textOverflow: "ellipsis",
  142. // whiteSpace: "nowrap",
  143. // }}
  144. >
  145. {text}
  146. </div>
  147. // </Tooltip>
  148. );
  149. },
  150. },
  151. {
  152. title: "公出时长(时)",
  153. dataIndex: "duration",
  154. key: "duration",
  155. width: 70,
  156. },
  157. {
  158. title: "打卡时间",
  159. dataIndex: "clockInTimes",
  160. key: "clockInTimes",
  161. width: 70,
  162. },
  163. {
  164. title: "审核状态",
  165. dataIndex: "status",
  166. key: "status",
  167. width: 40,
  168. render: (text) => (
  169. <Tag color={getClockState(text).color}>
  170. {getClockState(text).title}
  171. </Tag>
  172. ),
  173. },
  174. {
  175. title: "打卡状态",
  176. dataIndex: "clockIn",
  177. key: "clockIn",
  178. width: 60,
  179. render: (text) =>
  180. text === 1 ? "已打卡" : text === 0 ? "未打卡" : "",
  181. },
  182. {
  183. title: "公出目标",
  184. dataIndex: "remarks",
  185. key: "remarks",
  186. width: 180,
  187. render: (text) => {
  188. return (
  189. <div
  190. // style={{
  191. // width: 60,
  192. // overflow: "hidden",
  193. // textOverflow: "ellipsis",
  194. // whiteSpace: "nowrap",
  195. // }}
  196. // title={text}
  197. >
  198. {text}
  199. </div>
  200. );
  201. },
  202. },
  203. {
  204. title: "公出计划",
  205. dataIndex: "plan",
  206. key: "plan",
  207. width: 200,
  208. render: (text) => {
  209. return (
  210. <div
  211. // style={{
  212. // width: 60,
  213. // overflow: "hidden",
  214. // textOverflow: "ellipsis",
  215. // whiteSpace: "nowrap",
  216. // }}
  217. // title={text}
  218. >
  219. {text}
  220. </div>
  221. );
  222. },
  223. },
  224. {
  225. title: "预计效果",
  226. dataIndex: "expectedEffect",
  227. key: "expectedEffect",
  228. width: 200,
  229. render: (text) => {
  230. return (
  231. <div
  232. // style={{
  233. // width: 60,
  234. // overflow: "hidden",
  235. // textOverflow: "ellipsis",
  236. // whiteSpace: "nowrap",
  237. // }}
  238. // title={text}
  239. >
  240. {text}
  241. </div>
  242. );
  243. },
  244. },
  245. {
  246. title: "本次公出目标总结",
  247. dataIndex: "supplement",
  248. key: "supplement",
  249. width: 200,
  250. render: (text) => {
  251. return (
  252. <div
  253. // style={{
  254. // width: 60,
  255. // overflow: "hidden",
  256. // textOverflow: "ellipsis",
  257. // whiteSpace: "nowrap",
  258. // }}
  259. // title={text}
  260. >
  261. {text}
  262. </div>
  263. );
  264. },
  265. },
  266. {
  267. title: "下一次公出计划",
  268. dataIndex: "nextPlan",
  269. key: "nextPlan",
  270. width: 180,
  271. render: (text) => {
  272. return (
  273. <div
  274. // style={{
  275. // width: 80,
  276. // overflow: "hidden",
  277. // textOverflow: "ellipsis",
  278. // whiteSpace: "nowrap",
  279. // }}
  280. // title={text}
  281. >
  282. {text}
  283. </div>
  284. );
  285. },
  286. },
  287. // {
  288. // title: "补充",
  289. // dataIndex: "supplement",
  290. // key: "supplement",
  291. // width: 60,
  292. // render: (text) => {
  293. // return (
  294. // <Tooltip title={text}>
  295. // <div style={{
  296. // width:50,
  297. // overflow:'hidden',
  298. // textOverflow: "ellipsis",
  299. // whiteSpace:'nowrap',
  300. // }}>{text}</div>
  301. // </Tooltip>
  302. // )
  303. // },
  304. // },
  305. {
  306. title: "审核/指导",
  307. dataIndex: "auditInfo",
  308. key: "auditInfo",
  309. width:200,
  310. render: (text) => {
  311. return (
  312. // <Tooltip title={text}>
  313. <div
  314. // style={{
  315. // width: 80,
  316. // overflow: "hidden",
  317. // textOverflow: "ellipsis",
  318. // whiteSpace: "nowrap",
  319. // }}
  320. >
  321. {text}
  322. </div>
  323. // </Tooltip>
  324. );
  325. },
  326. },
  327. {
  328. title: "操作",
  329. dataIndex: "annexUrl",
  330. key: "annexUrl",
  331. width: 60,
  332. render: (text, record) => (
  333. <div>
  334. <Button
  335. type={"primary"}
  336. onClick={(e) => {
  337. e.stopPropagation();
  338. let arr1 = text || [];
  339. let arr2 = record.photoUrl || [];
  340. this.setState(
  341. {
  342. annexUrlArr: splitUrl(
  343. arr1,
  344. ",",
  345. globalConfig.avatarHost + "/upload"
  346. ),
  347. photoUrlArr: splitUrl(
  348. arr2,
  349. ",",
  350. globalConfig.avatarHost + "/upload"
  351. ),
  352. },
  353. () => {
  354. this.setState({
  355. imgListVisible: true,
  356. });
  357. }
  358. );
  359. }}
  360. >
  361. 查看附件
  362. </Button>
  363. </div>
  364. ),
  365. },
  366. ],
  367. pagination: {
  368. defaultCurrent: 1,
  369. defaultPageSize: 10,
  370. showQuickJumper: true,
  371. pageSize: 10,
  372. onChange: function (page) {
  373. this.loadData(page);
  374. }.bind(this),
  375. showTotal: function (total) {
  376. return "共" + total + "条数据";
  377. },
  378. },
  379. dataSource: [],
  380. releaseDate: [],
  381. status: props.status,
  382. clockIn: props.clockIn,
  383. theTypes: props.aid,
  384. theTypes1: undefined,
  385. theCustomerTypes: undefined,
  386. };
  387. this.loadData = this.loadData.bind(this);
  388. this.resetAll = this.resetAll.bind(this);
  389. this.changeList = this.changeList.bind(this);
  390. this.selectSuperId = this.selectSuperId.bind(this);
  391. this.supervisor = this.supervisor.bind(this);
  392. this.supervisor1 = this.supervisor1.bind(this);
  393. this.httpChange = this.httpChange.bind(this);
  394. this.blurChange = this.blurChange.bind(this);
  395. this.selectAuto = this.selectAuto.bind(this);
  396. this.httpChange1 = this.httpChange1.bind(this);
  397. this.blurChange1 = this.blurChange1.bind(this);
  398. this.selectAuto1 = this.selectAuto1.bind(this);
  399. this.getCustomer = this.getCustomer.bind(this);
  400. this.selectCustomerAuto = this.selectCustomerAuto.bind(this);
  401. this.httpCustomerChange = this.httpCustomerChange.bind(this);
  402. this.blurCustomerChange = this.blurCustomerChange.bind(this);
  403. this.exportExec = this.exportExec.bind(this);
  404. }
  405. //获取上级组织
  406. selectSuperId() {
  407. $.ajax({
  408. method: "get",
  409. dataType: "json",
  410. crossDomain: false,
  411. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  412. data: {},
  413. success: function (data) {
  414. let theArr = [];
  415. if (data.error && data.error.length === 0) {
  416. for (let i = 0; i < data.data.length; i++) {
  417. let theData = data.data[i];
  418. theArr.push(
  419. <Select.Option value={theData.id} key={theData.id}>
  420. {theData.name}
  421. </Select.Option>
  422. );
  423. }
  424. this.setState({
  425. contactsOption: theArr,
  426. });
  427. } else {
  428. message.warning(data.error[0].message);
  429. }
  430. }.bind(this),
  431. }).always(
  432. function () {
  433. this.setState({
  434. loading: false,
  435. });
  436. }.bind(this)
  437. );
  438. }
  439. changeList(arr) {
  440. debugger
  441. const newArr = [];
  442. this.state.columns.forEach((item) => {
  443. arr.forEach((val) => {
  444. if (val === item.title) {
  445. newArr.push(item);
  446. }
  447. });
  448. });
  449. this.setState({
  450. changeList: newArr,
  451. });
  452. }
  453. loadData(pageNo) {
  454. this.setState({
  455. loading: true,
  456. });
  457. $.ajax({
  458. method: "get",
  459. dataType: "json",
  460. crossDomain: false,
  461. url: globalConfig.context + "/api/admin/release/publicReleaseDtails",
  462. data: {
  463. pageNo: pageNo || 1,
  464. pageSize: this.state.pagination.pageSize,
  465. releaseStart: this.state.releaseDate[0] || undefined,
  466. releaseEnd: this.state.releaseDate[1] || undefined,
  467. aid: this.state.theTypes,
  468. sid: this.state.theTypes1 || undefined,
  469. uid: this.state.theCustomerTypes,
  470. status: this.state.status,
  471. clockIn: this.state.clockIn,
  472. },
  473. success: function (data) {
  474. ShowModal(this);
  475. let theArr = [];
  476. this.setState({
  477. loading: false,
  478. });
  479. if (data.error && data.error.length === 0) {
  480. for (let i = 0; i < data.data.list.length; i++) {
  481. let thisdata = data.data.list[i];
  482. thisdata.key = (data.data.pageNo - 1) * data.data.pageSize + i + 1;
  483. theArr.push(thisdata);
  484. }
  485. this.state.pagination.current = data.data.pageNo;
  486. this.state.pagination.total = data.data.totalCount;
  487. if (data.data && data.data.list && !data.data.list.length) {
  488. this.state.pagination.current = 0;
  489. this.state.pagination.total = 0;
  490. }
  491. this.setState({
  492. dataSource: theArr,
  493. pagination: this.state.pagination,
  494. pageNo: data.data.pageNo,
  495. });
  496. } else {
  497. message.warning(data.error[0].message);
  498. }
  499. }.bind(this),
  500. }).always(
  501. function () {
  502. this.setState({
  503. loading: false,
  504. });
  505. }.bind(this)
  506. );
  507. }
  508. resetAll() {
  509. this.setState(
  510. {
  511. releaseDate: [],
  512. theCustomerTypes: undefined,
  513. status: this.props.status,
  514. clockIn: this.props.clockIn,
  515. auto: "",
  516. auto1: "",
  517. customer: "",
  518. theTypes: undefined,
  519. theTypes1: undefined,
  520. },
  521. () => {
  522. this.loadData();
  523. }
  524. );
  525. }
  526. supervisor(e) {
  527. $.ajax({
  528. method: "get",
  529. dataType: "json",
  530. crossDomain: false,
  531. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  532. data: {
  533. adminName: e,
  534. },
  535. success: function (data) {
  536. if (data.error && data.error.length === 0) {
  537. this.setState({
  538. customerArr: data.data,
  539. });
  540. } else {
  541. message.warning(data.error[0].message);
  542. }
  543. }.bind(this),
  544. }).always(function () {}.bind(this));
  545. }
  546. supervisor1(e) {
  547. $.ajax({
  548. method: "get",
  549. dataType: "json",
  550. crossDomain: false,
  551. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  552. data: {
  553. adminName: e,
  554. },
  555. success: function (data) {
  556. if (data.error && data.error.length === 0) {
  557. this.setState({
  558. customerArr1: data.data,
  559. });
  560. } else {
  561. message.warning(data.error[0].message);
  562. }
  563. }.bind(this),
  564. }).always(function () {}.bind(this));
  565. }
  566. httpChange(e) {
  567. if (e.length >= 1) {
  568. this.supervisor(e);
  569. }
  570. this.setState({
  571. auto: e,
  572. });
  573. }
  574. httpChange1(e) {
  575. if (e.length >= 1) {
  576. this.supervisor1(e);
  577. }
  578. this.setState({
  579. auto1: e,
  580. });
  581. }
  582. blurChange1(e) {
  583. let theType = "";
  584. let contactLists = this.state.customerArr1 || [];
  585. if (e) {
  586. contactLists.map(function (item) {
  587. if (item.name == e.toString()) {
  588. theType = item.id;
  589. }
  590. });
  591. }
  592. this.setState({
  593. theTypes1: theType,
  594. });
  595. }
  596. selectAuto1(value, options) {
  597. this.setState({
  598. auto1: value,
  599. });
  600. }
  601. selectAuto(value, options) {
  602. this.setState({
  603. auto: value,
  604. });
  605. }
  606. httpCustomerChange(e) {
  607. if (e.length >= 1) {
  608. this.getCustomer(e);
  609. }
  610. this.setState({
  611. customer: e,
  612. });
  613. }
  614. selectCustomerAuto(value, options) {
  615. this.setState({
  616. customer: value,
  617. });
  618. }
  619. getCustomer(e) {
  620. $.ajax({
  621. method: "get",
  622. dataType: "json",
  623. crossDomain: false,
  624. url: globalConfig.context + "/api/admin/customer/getUserByName",
  625. data: {
  626. name: e,
  627. },
  628. success: function (data) {
  629. if (data.error && data.error.length === 0) {
  630. this.setState({
  631. customerList: data.data,
  632. });
  633. } else {
  634. message.warning(data.error[0].message);
  635. }
  636. }.bind(this),
  637. }).always(function () {}.bind(this));
  638. }
  639. blurCustomerChange(e) {
  640. let theType = "";
  641. let contactLists = this.state.customerList || [];
  642. if (e) {
  643. contactLists.map(function (item) {
  644. if (item.name == e.toString()) {
  645. theType = item.id;
  646. }
  647. });
  648. }
  649. this.setState({
  650. theCustomerTypes: theType,
  651. });
  652. }
  653. blurChange(e) {
  654. let theType = "";
  655. let contactLists = this.state.customerArr || [];
  656. if (e) {
  657. customerArr1;
  658. contactLists.map(function (item) {
  659. if (item.name == e.toString()) {
  660. theType = item.id;
  661. }
  662. });
  663. }
  664. this.setState({
  665. theTypes: theType,
  666. });
  667. }
  668. componentWillMount() {
  669. this.loadData();
  670. this.selectSuperId();
  671. }
  672. exportExec() {
  673. message.config({
  674. duration: 20,
  675. });
  676. let loading = message.loading("下载中...");
  677. this.setState({
  678. exportPendingLoading: true,
  679. });
  680. let data = {
  681. releaseStart: this.state.releaseDate[0],
  682. releaseEnd: this.state.releaseDate[1],
  683. aid: this.state.theTypes,
  684. sid: this.state.theTypes1,
  685. uid: this.state.theCustomerTypes,
  686. status: this.state.status,
  687. clockIn: this.state.clockIn,
  688. };
  689. for (let i of Object.keys(data)) {
  690. if (i === "status" || i === "clockIn") {
  691. if (isNaN(parseInt(data[i]))) {
  692. delete data[i];
  693. }
  694. } else if (!data[i]) {
  695. delete data[i];
  696. }
  697. }
  698. console.log(data);
  699. $.ajax({
  700. method: "get",
  701. dataType: "json",
  702. crossDomain: false,
  703. url: globalConfig.context +
  704. "/api/admin/release/publicReleaseDtails/export?",
  705. data,
  706. success: function (data) {
  707. if (data.error.length === 0) {
  708. this.download(data.data);
  709. } else {
  710. message.warning(data.error[0].message);
  711. }
  712. }.bind(this),
  713. }).always(
  714. function () {
  715. loading();
  716. this.setState({
  717. exportPendingLoading: false,
  718. });
  719. }.bind(this)
  720. );
  721. // window.location.href =
  722. // globalConfig.context +
  723. // "/api/admin/release/publicReleaseDtails/export?" +
  724. // $.param(data);
  725. }
  726. download(fileName) {
  727. window.location.href =
  728. globalConfig.context + "/open/download?fileName=" + fileName;
  729. }
  730. render() {
  731. const dataSources = this.state.customerArr || [];
  732. const dataSources1 = this.state.customerArr1 || [];
  733. const options = dataSources.map((group) => (
  734. <Select.Option key={group.id} value={group.name}>
  735. {group.name}
  736. </Select.Option>
  737. ));
  738. const options1 = dataSources1.map((group) => (
  739. <Select.Option key={group.id} value={group.name}>
  740. {group.name}
  741. </Select.Option>
  742. ));
  743. const customerList = this.state.customerList || [];
  744. const customerOptions = customerList.map((group) => (
  745. <Select.Option key={group.id} value={group.name}>
  746. {group.name}
  747. </Select.Option>
  748. ));
  749. return (
  750. <div>
  751. <Modal
  752. maskClosable={false}
  753. visible={this.props.visible}
  754. onOk={this.props.onCancel}
  755. onCancel={this.props.onCancel}
  756. width="2000px"
  757. title={
  758. <span>
  759. <span style={{ marginRight: "15px" }}>公出详细列表</span>
  760. <Tag color="#f50">{this.props.aName}</Tag>
  761. <Tag color="#108ee9">{this.props.title}</Tag>
  762. </span>
  763. }
  764. footer=""
  765. className="admin-desc-content"
  766. >
  767. <div className="user-content">
  768. <Tabs defaultActiveKey="1" className="test">
  769. <TabPane tab="搜索" key="1">
  770. <div
  771. className="user-search"
  772. style={{
  773. marginTop: "10px",
  774. marginLeft: "10px",
  775. marginRight: "10px",
  776. }}
  777. >
  778. <span style={{ marginRight: "10px" }}>
  779. <AutoComplete
  780. className="certain-category-search"
  781. dropdownClassName="certain-category-search-dropdown"
  782. dropdownMatchSelectWidth={false}
  783. style={{ width: "120px" }}
  784. dataSource={customerOptions}
  785. placeholder="输入客户名称"
  786. value={this.state.customer}
  787. onChange={this.httpCustomerChange}
  788. filterOption={true}
  789. onBlur={this.blurCustomerChange}
  790. onSelect={this.selectCustomerAuto}
  791. >
  792. <Input />
  793. </AutoComplete>
  794. </span>
  795. <span style={{ marginRight: "10px" }}>
  796. <Select
  797. placeholder="请选择审核状态"
  798. style={{ width: 200, marginLeft: 10 }}
  799. value={this.state.status}
  800. onChange={(e) => {
  801. this.setState({ status: e });
  802. }}
  803. >
  804. {clockState.map((v, k) => (
  805. <Select.Option key={k} value={v.id}>
  806. {v.title}
  807. </Select.Option>
  808. ))}
  809. </Select>
  810. </span>
  811. <span style={{ marginRight: "10px" }}>
  812. <Select
  813. placeholder="请选择打卡状态"
  814. style={{ width: 200, marginLeft: 10 }}
  815. value={this.state.clockIn}
  816. onChange={(e) => {
  817. this.setState({ clockIn: e });
  818. }}
  819. >
  820. <Select.Option value={1}>已打卡</Select.Option>
  821. <Select.Option value={0}>未打卡</Select.Option>
  822. </Select>
  823. </span>
  824. <span style={{ marginRight: "10px" }}>
  825. <AutoComplete
  826. className="certain-category-search"
  827. dropdownClassName="certain-category-search-dropdown"
  828. dropdownMatchSelectWidth={false}
  829. style={{ width: "120px" }}
  830. dataSource={options}
  831. placeholder="输入公出申请人"
  832. value={this.state.auto}
  833. onChange={this.httpChange}
  834. filterOption={true}
  835. onBlur={this.blurChange}
  836. onSelect={this.selectAuto}
  837. >
  838. <Input />
  839. </AutoComplete>
  840. </span>
  841. <span style={{ marginRight: "10px" }}>
  842. <AutoComplete
  843. className="certain-category-search"
  844. dropdownClassName="certain-category-search-dropdown"
  845. dropdownMatchSelectWidth={false}
  846. style={{ width: "120px" }}
  847. dataSource={options1}
  848. placeholder="输入跟单人"
  849. value={this.state.auto1}
  850. onChange={this.httpChange1}
  851. filterOption={true}
  852. onBlur={this.blurChange1}
  853. onSelect={this.selectAuto1}
  854. >
  855. <Input />
  856. </AutoComplete>
  857. </span>
  858. <span style={{ marginRight: "10px" }}>
  859. <span style={{ marginRight: "5px", marginBottom: "10px" }}>
  860. 公出时间 :
  861. </span>
  862. <RangePicker
  863. style={{ marginRight: "10px", marginBottom: "10px" }}
  864. value={[
  865. this.state.releaseDate[0]
  866. ? moment(this.state.releaseDate[0])
  867. : null,
  868. this.state.releaseDate[1]
  869. ? moment(this.state.releaseDate[1])
  870. : null,
  871. ]}
  872. onChange={(data, dataString) => {
  873. this.setState({ releaseDate: dataString });
  874. }}
  875. />
  876. </span>
  877. <Button
  878. type="primary"
  879. onClick={() => {
  880. this.loadData();
  881. }}
  882. style={{ marginRight: "10px", marginBottom: "10px" }}
  883. >
  884. 搜索
  885. </Button>
  886. <Button
  887. onClick={this.resetAll}
  888. style={{ marginRight: "10px", marginBottom: "10px" }}
  889. >
  890. 重置
  891. </Button>
  892. </div>
  893. </TabPane>
  894. <TabPane tab="更改表格显示数据" key="2">
  895. <div style={{ marginLeft: 10 }}>
  896. <Spin spinning={this.state.loading}>
  897. <ChooseList
  898. columns={this.state.columns}
  899. changeFn={this.changeList}
  900. changeList={this.state.changeList}
  901. top={55}
  902. margin={11}
  903. />
  904. </Spin>
  905. </div>
  906. </TabPane>
  907. <TabPane tab="导出" key="3">
  908. <div style={{ float: "left" }}>
  909. <Button onClick={this.exportExec} style={{ margin: 10 }}>
  910. 导出excel
  911. </Button>
  912. </div>
  913. </TabPane>
  914. </Tabs>
  915. <div className="patent-table">
  916. <Spin spinning={this.state.loading}>
  917. <Table
  918. bordered
  919. size="middle"
  920. scroll={{ x: '130%', y: 0 }}
  921. columns={
  922. this.state.changeList.length > 0
  923. ? this.state.changeList
  924. : this.state.columns
  925. }
  926. dataSource={this.state.dataSource}
  927. pagination={this.state.pagination}
  928. />
  929. </Spin>
  930. </div>
  931. </div>
  932. </Modal>
  933. {this.state.imgListVisible ? (
  934. <Modal
  935. maskClosable={false}
  936. visible={this.state.imgListVisible}
  937. onOk={() => {
  938. this.setState({
  939. imgListVisible: false,
  940. });
  941. }}
  942. onCancel={() => {
  943. this.setState({
  944. imgListVisible: false,
  945. });
  946. }}
  947. width="500px"
  948. title="图片"
  949. footer=""
  950. >
  951. <div>
  952. <div>申请附件</div>
  953. <ImgList
  954. fileList={this.state.annexUrlArr}
  955. domId="publicStatistics"
  956. />
  957. <div style={{ paddingTop: "35px" }}>打卡照片</div>
  958. <ImgList
  959. fileList={this.state.photoUrlArr}
  960. domId="publicStatistics1"
  961. />
  962. </div>
  963. </Modal>
  964. ) : null}
  965. </div>
  966. );
  967. }
  968. }
  969. export default DetailedList;