detailedList.jsx 29 KB

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