detailedList.jsx 31 KB

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