detailedList.jsx 29 KB

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