index.jsx 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777
  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. Tooltip
  15. } from "antd";
  16. import {ShowModal,splitUrl,getClockState} from "@/tools";
  17. import {clockState} from "@/dataDic";
  18. import {ChooseList} from "../../order/orderNew/chooseList";
  19. import $ from "jquery/src/ajax";
  20. import './index.less';
  21. import moment from "moment";
  22. import ImgList from "../../../common/imgList";
  23. const {TabPane} = Tabs;
  24. const { RangePicker } = DatePicker;
  25. class PublicSummary extends Component{
  26. constructor(props) {
  27. super(props);
  28. this.state={
  29. pageNo:1,
  30. loading:false,
  31. changeList:[],
  32. annexUrlArr:[],
  33. photoUrlArr:[],
  34. imgListVisible:false,
  35. columns: [
  36. {
  37. title: "编号",
  38. dataIndex: "key",
  39. key: "key",
  40. width: 45
  41. },
  42. {
  43. title: "客户名称",
  44. dataIndex: "nickname",
  45. key: "nickname",
  46. width: 140,
  47. render: (text) => {
  48. return (
  49. <div style={{
  50. width:140,
  51. wordBreak:'break-all',
  52. }}>{text}</div>
  53. )
  54. },
  55. },
  56. {
  57. title: "跟单人",
  58. dataIndex: "sname",
  59. key: "sname",
  60. width: 100,
  61. render: (text) => {
  62. return (
  63. <Tooltip title={text}>
  64. <div style={{
  65. width:100,
  66. overflow:'hidden',
  67. textOverflow: "ellipsis",
  68. whiteSpace:'nowrap',
  69. }}>{text}</div>
  70. </Tooltip>
  71. )
  72. },
  73. },
  74. {
  75. title: "公出申请人",
  76. dataIndex: "aname",
  77. key: "aname",
  78. width: 100,
  79. render: (text) => {
  80. return (
  81. <Tooltip title={text}>
  82. <div style={{
  83. width:100,
  84. overflow:'hidden',
  85. textOverflow: "ellipsis",
  86. whiteSpace:'nowrap',
  87. }}>{text}</div>
  88. </Tooltip>
  89. )
  90. },
  91. },
  92. {
  93. title: "申请时间",
  94. dataIndex: "createTimes",
  95. key: "createTimes",
  96. width: 130
  97. },
  98. {
  99. title: "公出时间",
  100. dataIndex: "releaseStarts",
  101. key: "releaseStarts",
  102. width: 130,
  103. render: (text, record) => (
  104. <div>
  105. <div>{text}</div>
  106. <div style={{paddingLeft:'44px'}}>至</div>
  107. <div>{record.releaseEnds}</div>
  108. </div>
  109. )
  110. },
  111. {
  112. title: "公出地点",
  113. dataIndex: "userName",
  114. key: "userName",
  115. width: 120,
  116. render: (text) => {
  117. return (
  118. <Tooltip title={text}>
  119. <div style={{
  120. width:120,
  121. overflow:'hidden',
  122. textOverflow: "ellipsis",
  123. whiteSpace:'nowrap',
  124. }}>{text}</div>
  125. </Tooltip>
  126. )
  127. },
  128. },
  129. {
  130. title: "公出时长(时)",
  131. dataIndex: "duration",
  132. key: "duration",
  133. width: 50
  134. },
  135. {
  136. title: "打卡时间",
  137. dataIndex: "clockInTimes",
  138. key: "clockInTimes",
  139. width: 130
  140. },
  141. {
  142. title: "审核状态",
  143. dataIndex: "status",
  144. key: "status",
  145. width: 40,
  146. render: (text) => (
  147. <Tag color={getClockState(text).color}>{getClockState(text).title}</Tag>
  148. )
  149. },
  150. {
  151. title: "打卡状态",
  152. dataIndex: "clockIn",
  153. key: "clockIn",
  154. width: 60,
  155. render: (text) => (
  156. text === 1 ? '已打卡' :
  157. text === 0 ? '未打卡' : ''
  158. )
  159. },
  160. {
  161. title: "公出原因/计划",
  162. dataIndex: "remarks",
  163. key: "remarks",
  164. width: 155,
  165. render: (text) => {
  166. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  167. },
  168. },
  169. {
  170. title: "补充",
  171. dataIndex: "supplement",
  172. key: "supplement",
  173. width: 155,
  174. render: (text) => {
  175. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  176. },
  177. },
  178. {
  179. title: "审核/指导",
  180. dataIndex: "auditInfo",
  181. key: "auditInfo",
  182. width: 155,
  183. render: (text) => {
  184. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  185. },
  186. },
  187. {
  188. title: "操作",
  189. dataIndex: "annexUrl",
  190. key: "annexUrl",
  191. render: (text,record) => (
  192. <div>
  193. <Button
  194. type={"primary"}
  195. onClick={(e) => {
  196. e.stopPropagation();
  197. let arr1 = text || [];
  198. let arr2 = record.photoUrl || [];
  199. this.setState({
  200. annexUrlArr:splitUrl(arr1, ",", globalConfig.avatarHost + "/upload"),
  201. photoUrlArr:splitUrl(arr2, ",", globalConfig.avatarHost + "/upload"),
  202. },()=>{
  203. this.setState({
  204. imgListVisible:true
  205. })
  206. })
  207. }}
  208. >
  209. 查看附件
  210. </Button>
  211. </div>
  212. )
  213. },
  214. ],
  215. pagination: {
  216. defaultCurrent: 1,
  217. defaultPageSize: 10,
  218. showQuickJumper: true,
  219. pageSize: 10,
  220. onChange: function(page) {
  221. this.loadData(page);
  222. }.bind(this),
  223. showTotal: function(total) {
  224. return "共" + total + "条数据";
  225. }
  226. },
  227. dataSource: [],
  228. releaseDate:[],
  229. status:undefined,
  230. clockIn:undefined,
  231. depId:undefined,
  232. theTypes:undefined,
  233. theTypes1:undefined,
  234. theCustomerTypes:undefined,
  235. }
  236. this.loadData = this.loadData.bind(this);
  237. this.resetAll = this.resetAll.bind(this);
  238. this.changeList = this.changeList.bind(this);
  239. this.selectSuperId = this.selectSuperId.bind(this);
  240. this.supervisor = this.supervisor.bind(this);
  241. this.httpChange = this.httpChange.bind(this);
  242. this.blurChange = this.blurChange.bind(this);
  243. this.selectAuto = this.selectAuto.bind(this);
  244. this.httpChange1 = this.httpChange1.bind(this);
  245. this.blurChange1 = this.blurChange1.bind(this);
  246. this.selectAuto1 = this.selectAuto1.bind(this);
  247. this.getCustomer = this.getCustomer.bind(this);
  248. this.selectCustomerAuto = this.selectCustomerAuto.bind(this);
  249. this.httpCustomerChange = this.httpCustomerChange.bind(this);
  250. this.blurCustomerChange = this.blurCustomerChange.bind(this);
  251. this.exportExec = this.exportExec.bind(this);
  252. }
  253. //获取上级组织
  254. selectSuperId() {
  255. $.ajax({
  256. method: "get",
  257. dataType: "json",
  258. crossDomain: false,
  259. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  260. data:{},
  261. success: function (data) {
  262. let theArr = [];
  263. if (data.error && data.error.length === 0) {
  264. for(let i=0;i<data.data.length;i++){
  265. let theData = data.data[i];
  266. theArr.push(
  267. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  268. );
  269. };
  270. this.setState({
  271. contactsOption: theArr,
  272. });
  273. }else{
  274. message.warning(data.error[0].message);
  275. }
  276. }.bind(this),
  277. }).always(function () {
  278. this.setState({
  279. loading: false
  280. });
  281. }.bind(this));
  282. }
  283. changeList(arr) {
  284. const newArr = [];
  285. this.state.columns.forEach(item => {
  286. arr.forEach(val => {
  287. if (val === item.title) {
  288. newArr.push(item);
  289. }
  290. });
  291. });
  292. this.setState({
  293. changeList: newArr
  294. });
  295. }
  296. loadData(pageNo) {
  297. this.setState({
  298. loading:true
  299. })
  300. $.ajax({
  301. method: "get",
  302. dataType: "json",
  303. crossDomain: false,
  304. url: globalConfig.context + "/api/admin/release/publicReleaseDtails",
  305. data: {
  306. pageNo: pageNo || 1,
  307. pageSize: this.state.pagination.pageSize,
  308. releaseStart:this.state.releaseDate[0] || undefined,
  309. releaseEnd:this.state.releaseDate[1] || undefined,
  310. aid:this.state.theTypes || undefined,
  311. sid:this.state.theTypes1 || undefined,
  312. uid:this.state.theCustomerTypes,
  313. status:this.state.status,
  314. clockIn:this.state.clockIn,
  315. depId:this.state.depId || undefined
  316. },
  317. success: function(data) {
  318. ShowModal(this);
  319. let theArr = [];
  320. this.setState({
  321. loading:false
  322. })
  323. if (data.error && data.error.length === 0) {
  324. for (let i = 0; i < data.data.list.length; i++) {
  325. let thisdata = data.data.list[i];
  326. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  327. theArr.push(thisdata);
  328. }
  329. this.state.pagination.current = data.data.pageNo;
  330. this.state.pagination.total = data.data.totalCount;
  331. if (data.data && data.data.list && !data.data.list.length) {
  332. this.state.pagination.current = 0;
  333. this.state.pagination.total = 0;
  334. }
  335. this.setState({
  336. dataSource: theArr,
  337. pagination: this.state.pagination,
  338. pageNo:data.data.pageNo
  339. });
  340. }else{
  341. message.warning(data.error[0].message);
  342. }
  343. }.bind(this)
  344. }).always(
  345. function() {
  346. this.setState({
  347. loading: false
  348. });
  349. }.bind(this)
  350. );
  351. }
  352. resetAll() {
  353. this.setState({
  354. releaseDate:[],
  355. theCustomerTypes:undefined,
  356. status:undefined,
  357. clockIn:undefined,
  358. depId:undefined,
  359. auto:'',
  360. auto1:'',
  361. customer:'',
  362. theTypes:undefined,
  363. theTypes1:undefined,
  364. },()=>{
  365. this.loadData();
  366. })
  367. }
  368. supervisor(e) {
  369. $.ajax({
  370. method: "get",
  371. dataType: "json",
  372. crossDomain: false,
  373. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  374. data: {
  375. adminName: e,
  376. },
  377. success: function (data) {
  378. if (data.error && data.error.length === 0) {
  379. this.setState({
  380. customerArr: data.data,
  381. });
  382. }else{
  383. message.warning(data.error[0].message);
  384. }
  385. }.bind(this),
  386. }).always(
  387. function () {
  388. }.bind(this)
  389. );
  390. }
  391. supervisor1(e) {
  392. $.ajax({
  393. method: "get",
  394. dataType: "json",
  395. crossDomain: false,
  396. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  397. data: {
  398. adminName: e,
  399. },
  400. success: function (data) {
  401. if (data.error && data.error.length === 0) {
  402. this.setState({
  403. customerArr1: data.data,
  404. });
  405. }else{
  406. message.warning(data.error[0].message);
  407. }
  408. }.bind(this),
  409. }).always(
  410. function () {
  411. }.bind(this)
  412. );
  413. }
  414. httpChange(e) {
  415. if (e.length >= 1) {
  416. this.supervisor(e);
  417. }
  418. this.setState({
  419. auto: e,
  420. });
  421. }
  422. httpChange1(e) {
  423. if (e.length >= 1) {
  424. this.supervisor1(e);
  425. }
  426. this.setState({
  427. auto1: e,
  428. });
  429. }
  430. selectAuto(value, options) {
  431. this.setState({
  432. auto: value,
  433. });
  434. }
  435. selectAuto1(value, options) {
  436. this.setState({
  437. auto1: value,
  438. });
  439. }
  440. httpCustomerChange(e) {
  441. if (e.length >= 1) {
  442. this.getCustomer(e);
  443. }
  444. this.setState({
  445. customer: e,
  446. });
  447. }
  448. selectCustomerAuto(value, options) {
  449. this.setState({
  450. customer: value,
  451. });
  452. }
  453. getCustomer(e) {
  454. $.ajax({
  455. method: "get",
  456. dataType: "json",
  457. crossDomain: false,
  458. url: globalConfig.context + "/api/admin/customer/getUserByName",
  459. data: {
  460. name: e,
  461. },
  462. success: function (data) {
  463. if (data.error && data.error.length === 0) {
  464. this.setState({
  465. customerList: data.data,
  466. });
  467. }else{
  468. message.warning(data.error[0].message);
  469. }
  470. }.bind(this),
  471. }).always(
  472. function () {
  473. }.bind(this)
  474. );
  475. }
  476. blurCustomerChange(e) {
  477. let theType = "";
  478. let contactLists = this.state.customerList || [];
  479. if (e) {
  480. contactLists.map(function (item) {
  481. if (item.name == e.toString()) {
  482. theType = item.id;
  483. }
  484. });
  485. }
  486. this.setState({
  487. theCustomerTypes: theType,
  488. });
  489. }
  490. blurChange(e) {
  491. let theType = "";
  492. let contactLists = this.state.customerArr || [];
  493. if (e) {
  494. contactLists.map(function (item) {
  495. if (item.name == e.toString()) {
  496. theType = item.id;
  497. }
  498. });
  499. }
  500. this.setState({
  501. theTypes: theType,
  502. });
  503. }
  504. blurChange1(e) {
  505. let theType = "";
  506. let contactLists = this.state.customerArr1 || [];
  507. if (e) {
  508. contactLists.map(function (item) {
  509. if (item.name == e.toString()) {
  510. theType = item.id;
  511. }
  512. });
  513. }
  514. this.setState({
  515. theTypes1: theType,
  516. });
  517. }
  518. componentWillMount() {
  519. this.loadData();
  520. this.selectSuperId();
  521. }
  522. exportExec(){
  523. let data = {
  524. releaseStart:this.state.releaseDate[0],
  525. releaseEnd:this.state.releaseDate[1],
  526. aid:this.state.theTypes,
  527. sid:this.state.theTypes1,
  528. uid:this.state.theCustomerTypes,
  529. status:this.state.status,
  530. clockIn:this.state.clockIn,
  531. depId:this.state.depId,
  532. };
  533. for(let i of Object.keys(data)){
  534. if(i === 'status' || i === 'clockIn'){
  535. if(isNaN(parseInt(data[i]))){
  536. delete data[i]
  537. }
  538. }else if(!data[i]){
  539. delete data[i]
  540. }
  541. }
  542. window.location.href =
  543. globalConfig.context +
  544. "/api/admin/release/publicReleaseDtails/export?" +
  545. $.param(data);
  546. }
  547. render() {
  548. const dataSources = this.state.customerArr || [];
  549. const dataSources1 = this.state.customerArr1 || [];
  550. const options = dataSources.map((group) => (
  551. <Select.Option key={group.id} value={group.name}>
  552. {group.name}
  553. </Select.Option>
  554. ));
  555. const options1 = dataSources1.map((group) => (
  556. <Select.Option key={group.id} value={group.name}>
  557. {group.name}
  558. </Select.Option>
  559. ));
  560. const customerList = this.state.customerList || [];
  561. const customerOptions = customerList.map((group) => (
  562. <Select.Option key={group.id} value={group.name}>
  563. {group.name}
  564. </Select.Option>
  565. ));
  566. return (
  567. <div>
  568. <div className="user-content">
  569. <div className="content-title">
  570. <span>
  571. 公出详细列表(全部)
  572. </span>
  573. </div>
  574. <Tabs defaultActiveKey="1" className="test">
  575. <TabPane tab="搜索" key="1">
  576. <div className="user-search" style={{
  577. marginTop:'10px',
  578. marginLeft:'10px',
  579. marginRight:'10px'
  580. }}>
  581. <span style={{ marginRight: "10px" }}>
  582. <AutoComplete
  583. className="certain-category-search"
  584. dropdownClassName="certain-category-search-dropdown"
  585. dropdownMatchSelectWidth={false}
  586. style={{ width: "120px" }}
  587. dataSource={customerOptions}
  588. placeholder='输入客户名称'
  589. value={this.state.customer}
  590. onChange={this.httpCustomerChange}
  591. filterOption={true}
  592. onBlur={this.blurCustomerChange}
  593. onSelect={this.selectCustomerAuto}
  594. >
  595. <Input />
  596. </AutoComplete>
  597. </span>
  598. <span style={{ marginRight: "10px" }}>
  599. <Select
  600. placeholder="请选择审核状态"
  601. style={{ width:200,marginLeft:10}}
  602. value={this.state.status}
  603. onChange={(e) => { this.setState({ status: e }) }}>
  604. {
  605. clockState.map((v,k) => (
  606. <Select.Option key={k} value={v.id} >{v.title}</Select.Option>
  607. ))
  608. }
  609. </Select>
  610. </span>
  611. <span style={{ marginRight: "10px" }}>
  612. <Select
  613. placeholder="请选择打卡状态"
  614. style={{ width:200,marginLeft:10}}
  615. value={this.state.clockIn}
  616. onChange={(e) => { this.setState({ clockIn: e }) }}>
  617. <Select.Option value={1} >已打卡</Select.Option>
  618. <Select.Option value={0} >未打卡</Select.Option>
  619. </Select>
  620. </span>
  621. <span style={{ marginRight: "10px" }}>
  622. <AutoComplete
  623. className="certain-category-search"
  624. dropdownClassName="certain-category-search-dropdown"
  625. dropdownMatchSelectWidth={false}
  626. style={{ width: "120px" }}
  627. dataSource={options}
  628. placeholder='输入公出申请人'
  629. value={this.state.auto}
  630. onChange={this.httpChange}
  631. filterOption={true}
  632. onBlur={this.blurChange}
  633. onSelect={this.selectAuto}
  634. >
  635. <Input />
  636. </AutoComplete>
  637. </span>
  638. <span style={{ marginRight: "10px" }}>
  639. <AutoComplete
  640. className="certain-category-search"
  641. dropdownClassName="certain-category-search-dropdown"
  642. dropdownMatchSelectWidth={false}
  643. style={{ width: "120px" }}
  644. dataSource={options1}
  645. placeholder='输入跟单人'
  646. value={this.state.auto1}
  647. onChange={this.httpChange1}
  648. filterOption={true}
  649. onBlur={this.blurChange1}
  650. onSelect={this.selectAuto1}
  651. >
  652. <Input />
  653. </AutoComplete>
  654. </span>
  655. <span style={{ marginRight: "10px" }}>
  656. <Select
  657. placeholder="请选择公出部门"
  658. style={{ width:200,marginLeft:10}}
  659. value={this.state.depId}
  660. onChange={(e) => { this.setState({ depId: e }) }}
  661. notFoundContent="未获取到上级组织列表">
  662. {this.state.contactsOption}
  663. </Select>
  664. </span>
  665. <span style={{ marginRight: "10px" }}>
  666. <span style={{marginRight:'5px',marginBottom:'10px'}}>公出时间 :</span>
  667. <RangePicker
  668. style={{marginRight:'10px',marginBottom:'10px'}}
  669. value={[
  670. this.state.releaseDate[0]
  671. ? moment(this.state.releaseDate[0])
  672. : null,
  673. this.state.releaseDate[1]
  674. ? moment(this.state.releaseDate[1])
  675. : null,
  676. ]}
  677. onChange={(data, dataString) => {
  678. this.setState({ releaseDate: dataString });
  679. }}
  680. />
  681. </span>
  682. <Button type="primary" onClick={()=>{
  683. this.loadData();
  684. }} style={{marginRight:'10px',marginBottom:'10px'}}>搜索</Button>
  685. <Button onClick={this.resetAll} style={{marginRight:'10px',marginBottom:'10px'}}>重置</Button>
  686. </div>
  687. </TabPane>
  688. <TabPane tab="更改表格显示数据" key="2">
  689. <div style={{ marginLeft: 10 }}>
  690. <Spin spinning={this.state.loading}>
  691. <ChooseList
  692. columns={this.state.columns}
  693. changeFn={this.changeList}
  694. changeList={this.state.changeList}
  695. top={55}
  696. margin={11}
  697. />
  698. </Spin>
  699. </div>
  700. </TabPane>
  701. <TabPane tab="导出" key="3">
  702. <div style={{ float: "left" }}>
  703. <Button onClick={this.exportExec} style={{ margin: 10 }}>导出excel</Button>
  704. </div>
  705. </TabPane>
  706. </Tabs>
  707. <div className="patent-table">
  708. <Spin spinning={this.state.loading}>
  709. <Table
  710. bordered
  711. size="middle"
  712. scroll={{ x: 800 }}
  713. columns={
  714. this.state.changeList.length > 0
  715. ? this.state.changeList
  716. : this.state.columns
  717. }
  718. dataSource={this.state.dataSource}
  719. pagination={this.state.pagination}
  720. />
  721. </Spin>
  722. </div>
  723. </div>
  724. {this.state.imgListVisible ? <Modal
  725. maskClosable={false}
  726. visible={this.state.imgListVisible}
  727. onOk={()=>{this.setState({
  728. imgListVisible:false
  729. })}}
  730. onCancel={()=>{this.setState({
  731. imgListVisible:false
  732. })}}
  733. width='500px'
  734. title='图片'
  735. footer=''>
  736. <div>
  737. <div>申请附件</div>
  738. <ImgList fileList={this.state.annexUrlArr} domId='publicStatistics'/>
  739. <div style={{paddingTop:'35px'}}>打卡照片</div>
  740. <ImgList fileList={this.state.photoUrlArr} domId='publicStatistics1'/>
  741. </div>
  742. </Modal> : null}
  743. </div>
  744. )
  745. }
  746. }
  747. export default PublicSummary;