detailedList.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605
  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'){
  391. if(isNaN(parseInt(data[i]))){
  392. delete data[i]
  393. }
  394. }else{
  395. if(!data[i]){
  396. delete data[i]
  397. }
  398. }
  399. }
  400. window.location.href =
  401. globalConfig.context +
  402. "/api/admin/release/publicReleaseDtails/export?" +
  403. $.param(data);
  404. }
  405. render() {
  406. const dataSources = this.state.customerArr || [];
  407. const options = dataSources.map((group) => (
  408. <Select.Option key={group.id} value={group.name}>
  409. {group.name}
  410. </Select.Option>
  411. ));
  412. const customerList = this.state.customerList || [];
  413. const customerOptions = customerList.map((group) => (
  414. <Select.Option key={group.id} value={group.name}>
  415. {group.name}
  416. </Select.Option>
  417. ));
  418. return (
  419. <div>
  420. <Modal
  421. maskClosable={false}
  422. visible={this.props.visible}
  423. onOk={this.props.onCancel}
  424. onCancel={this.props.onCancel}
  425. width='1200px'
  426. title='公出详细列表'
  427. footer=''
  428. className="admin-desc-content">
  429. <div className="user-content">
  430. <Tabs defaultActiveKey="1" className="test">
  431. <TabPane tab="搜索" key="1">
  432. <div className="user-search" style={{
  433. marginTop:'10px',
  434. marginLeft:'10px',
  435. marginRight:'10px'
  436. }}>
  437. <span style={{ marginRight: "10px" }}>
  438. <AutoComplete
  439. className="certain-category-search"
  440. dropdownClassName="certain-category-search-dropdown"
  441. dropdownMatchSelectWidth={false}
  442. dropdownStyle={{ width: 120 }}
  443. style={{ width: "120px" }}
  444. dataSource={customerOptions}
  445. placeholder='输入客户名称'
  446. value={this.state.customer}
  447. onChange={this.httpCustomerChange}
  448. filterOption={true}
  449. onBlur={this.blurCustomerChange}
  450. onSelect={this.selectCustomerAuto}
  451. >
  452. <Input />
  453. </AutoComplete>
  454. </span>
  455. <span style={{ marginRight: "10px" }}>
  456. <Select
  457. placeholder="请选择审核状态"
  458. style={{ width:200,marginLeft:10}}
  459. value={this.state.status}
  460. onChange={(e) => { this.setState({ status: e }) }}>
  461. {
  462. clockState.map((v,k) => (
  463. <Select.Option key={k} value={v.id} >{v.title}</Select.Option>
  464. ))
  465. }
  466. </Select>
  467. </span>
  468. <span style={{ marginRight: "10px" }}>
  469. <Select
  470. placeholder="请选择打卡状态"
  471. style={{ width:200,marginLeft:10}}
  472. value={this.state.clockIn}
  473. onChange={(e) => { this.setState({ clockIn: e }) }}>
  474. <Select.Option value={1} >已打卡</Select.Option>
  475. <Select.Option value={0} >未打卡</Select.Option>
  476. </Select>
  477. </span>
  478. <span style={{ marginRight: "10px" }}>
  479. <AutoComplete
  480. className="certain-category-search"
  481. dropdownClassName="certain-category-search-dropdown"
  482. dropdownMatchSelectWidth={false}
  483. dropdownStyle={{ width: 120 }}
  484. style={{ width: "120px" }}
  485. dataSource={options}
  486. placeholder='输入公出申请人'
  487. value={this.state.auto}
  488. onChange={this.httpChange}
  489. filterOption={true}
  490. onBlur={this.blurChange}
  491. onSelect={this.selectAuto}
  492. >
  493. <Input />
  494. </AutoComplete>
  495. </span>
  496. <span style={{ marginRight: "10px" }}>
  497. <span style={{marginRight:'10px',marginBottom:'10px'}}>公出时间 :</span>
  498. <RangePicker
  499. style={{marginRight:'10px',marginBottom:'10px'}}
  500. value={[
  501. this.state.releaseDate[0]
  502. ? moment(this.state.releaseDate[0])
  503. : null,
  504. this.state.releaseDate[1]
  505. ? moment(this.state.releaseDate[1])
  506. : null,
  507. ]}
  508. onChange={(data, dataString) => {
  509. this.setState({ releaseDate: dataString });
  510. }}
  511. />
  512. </span>
  513. <Button type="primary" onClick={()=>{
  514. this.loadData();
  515. }} style={{marginRight:'10px',marginBottom:'10px'}}>搜索</Button>
  516. <Button onClick={this.resetAll} style={{marginRight:'10px',marginBottom:'10px'}}>重置</Button>
  517. </div>
  518. </TabPane>
  519. <TabPane tab="更改表格显示数据" key="2">
  520. <div style={{ marginLeft: 10 }}>
  521. <Spin spinning={this.state.loading}>
  522. <ChooseList
  523. columns={this.state.columns}
  524. changeFn={this.changeList}
  525. changeList={this.state.changeList}
  526. top={55}
  527. margin={11}
  528. />
  529. </Spin>
  530. </div>
  531. </TabPane>
  532. <TabPane tab="导出" key="3">
  533. <div style={{ float: "left" }}>
  534. <Button onClick={this.exportExec} style={{ margin: 10 }}>导出excel</Button>
  535. </div>
  536. </TabPane>
  537. </Tabs>
  538. <div className="patent-table">
  539. <Spin spinning={this.state.loading}>
  540. <Table
  541. bordered
  542. size="middle"
  543. scroll={{ x: 800, y: 0 }}
  544. columns={
  545. this.state.changeList.length > 0
  546. ? this.state.changeList
  547. : this.state.columns
  548. }
  549. dataSource={this.state.dataSource}
  550. pagination={this.state.pagination}
  551. />
  552. </Spin>
  553. </div>
  554. </div>
  555. </Modal>
  556. {this.state.imgListVisible ? <Modal
  557. maskClosable={false}
  558. visible={this.state.imgListVisible}
  559. onOk={()=>{this.setState({
  560. imgListVisible:false
  561. })}}
  562. onCancel={()=>{this.setState({
  563. imgListVisible:false
  564. })}}
  565. width='500px'
  566. title='图片'
  567. footer=''>
  568. <div>
  569. <div>申请附件</div>
  570. <ImgList fileList={this.state.annexUrlArr} domId='publicStatistics'/>
  571. <div style={{paddingTop:'35px'}}>打卡照片</div>
  572. <ImgList fileList={this.state.photoUrlArr} domId='publicStatistics1'/>
  573. </div>
  574. </Modal> : null}
  575. </div>
  576. )
  577. }
  578. }
  579. export default DetailedList;