detailedList.jsx 31 KB

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