detailedList.jsx 23 KB

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