detailedList.jsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662
  1. import React,{ Component } from 'react';
  2. import {Button, Modal, Tag, Tooltip,} from "antd";
  3. import './index.less';
  4. import TabelContent from "../../../../common/tabelContent";
  5. import {splitUrl,getClockState} from "@/tools";
  6. import ImgList from "../../../../common/imgList";
  7. import {clockState} from "@/dataDic";
  8. import {getApprovedState, getLiquidationStatus, getNewOrderStatus, getProcessStatus} from "../../../../tools";
  9. import moment from 'moment';
  10. class DetailedList extends Component{
  11. constructor(props) {
  12. super(props);
  13. this.state= {
  14. columns: [
  15. {
  16. title: "编号",
  17. dataIndex: "key",
  18. key: "key",
  19. },
  20. {
  21. title: "面谈部门",
  22. dataIndex: "name",
  23. key: "name",
  24. },
  25. {
  26. title: "客户类型",
  27. dataIndex: "newUser",
  28. key: "newUser",
  29. render:(text)=>(
  30. text === 0 ? '新客户' :
  31. text === 1 ? '老客户' : ''
  32. )
  33. },
  34. {
  35. title: "面谈客户",
  36. dataIndex: "nickname",
  37. key: "nickname",
  38. },
  39. {
  40. title: "面谈数",
  41. dataIndex: "quantity",
  42. key: "quantity",
  43. className: 'projectTable',
  44. width: 150,
  45. onCellClick: (record, event) => {
  46. event.stopPropagation();
  47. this.setState({
  48. visible1: true,
  49. uid: record.uid,
  50. depId:record.id,
  51. })
  52. },
  53. },
  54. {
  55. title: "签单数",
  56. dataIndex: "sign",
  57. key: "sign",
  58. className: 'projectTable',
  59. width: 150,
  60. onCellClick: (record, event) => {
  61. event.stopPropagation();
  62. this.setState({
  63. visible2: true,
  64. uid: record.uid,
  65. depId:record.id,
  66. })
  67. },
  68. },
  69. ],
  70. columns1: [
  71. {
  72. title: "编号",
  73. dataIndex: "key",
  74. key: "key",
  75. width: 45
  76. },
  77. {
  78. title: "客户名称",
  79. dataIndex: "nickname",
  80. key: "nickname",
  81. width: 140,
  82. render: (text) => {
  83. return (
  84. <div style={{
  85. width:140,
  86. wordBreak:'break-all',
  87. }}>{text}</div>
  88. )
  89. },
  90. },
  91. {
  92. title: "跟单人",
  93. dataIndex: "sname",
  94. key: "sname",
  95. width: 100,
  96. render: (text) => {
  97. return (
  98. <Tooltip title={text}>
  99. <div style={{
  100. width:100,
  101. overflow:'hidden',
  102. textOverflow: "ellipsis",
  103. whiteSpace:'nowrap',
  104. }}>{text}</div>
  105. </Tooltip>
  106. )
  107. },
  108. },
  109. {
  110. title: "公出申请人",
  111. dataIndex: "aname",
  112. key: "aname",
  113. width: 100,
  114. render: (text) => {
  115. return (
  116. <Tooltip title={text}>
  117. <div style={{
  118. width:100,
  119. overflow:'hidden',
  120. textOverflow: "ellipsis",
  121. whiteSpace:'nowrap',
  122. }}>{text}</div>
  123. </Tooltip>
  124. )
  125. },
  126. },
  127. {
  128. title: "申请时间",
  129. dataIndex: "createTimes",
  130. key: "createTimes",
  131. width: 130
  132. },
  133. {
  134. title: "公出时间",
  135. dataIndex: "releaseStarts",
  136. key: "releaseStarts",
  137. width: 130,
  138. render: (text, record) => (
  139. <div>
  140. <div>{text}</div>
  141. <div style={{paddingLeft:'44px'}}>至</div>
  142. <div>{record.releaseEnds}</div>
  143. </div>
  144. )
  145. },
  146. {
  147. title: "公出地点",
  148. dataIndex: "userName",
  149. key: "userName",
  150. width: 120,
  151. render: (text) => {
  152. return (
  153. <Tooltip title={text}>
  154. <div style={{
  155. width:120,
  156. overflow:'hidden',
  157. textOverflow: "ellipsis",
  158. whiteSpace:'nowrap',
  159. }}>{text}</div>
  160. </Tooltip>
  161. )
  162. },
  163. },
  164. {
  165. title: "公出时长(时)",
  166. dataIndex: "duration",
  167. key: "duration",
  168. width: 50
  169. },
  170. {
  171. title: "打卡时间",
  172. dataIndex: "clockInTimes",
  173. key: "clockInTimes",
  174. width: 130
  175. },
  176. {
  177. title: "审核状态",
  178. dataIndex: "status",
  179. key: "status",
  180. width: 40,
  181. render: (text) => (
  182. <Tag color={getClockState(text).color}>{getClockState(text).title}</Tag>
  183. )
  184. },
  185. {
  186. title: "打卡状态",
  187. dataIndex: "clockIn",
  188. key: "clockIn",
  189. width: 60,
  190. render: (text) => (
  191. text === 1 ? '已打卡' :
  192. text === 0 ? '未打卡' : ''
  193. )
  194. },
  195. {
  196. title: "公出原因/计划",
  197. dataIndex: "remarks",
  198. key: "remarks",
  199. width: 155,
  200. render: (text) => {
  201. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  202. },
  203. },
  204. {
  205. title: "补充",
  206. dataIndex: "supplement",
  207. key: "supplement",
  208. width: 155,
  209. render: (text) => {
  210. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  211. },
  212. },
  213. {
  214. title: "审核/指导",
  215. dataIndex: "auditInfo",
  216. key: "auditInfo",
  217. width: 155,
  218. render: (text) => {
  219. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  220. },
  221. },
  222. {
  223. title: "操作",
  224. dataIndex: "annexUrl",
  225. key: "annexUrl",
  226. render: (text,record) => (
  227. <div>
  228. <Button
  229. type={"primary"}
  230. onClick={(e) => {
  231. e.stopPropagation();
  232. let arr1 = text || [];
  233. let arr2 = record.photoUrl || [];
  234. this.setState({
  235. annexUrlArr:splitUrl(arr1, ",", globalConfig.avatarHost + "/upload"),
  236. photoUrlArr:splitUrl(arr2, ",", globalConfig.avatarHost + "/upload"),
  237. },()=>{
  238. this.setState({
  239. imgListVisible:true
  240. })
  241. })
  242. }}
  243. >
  244. 查看附件
  245. </Button>
  246. </div>
  247. )
  248. },
  249. ],
  250. searchList:[
  251. {
  252. type:'departmentSelect',
  253. dataKey:'depId',
  254. placeholder:'请选择部门'
  255. },
  256. {
  257. type:'times',
  258. title:'公出时间',
  259. dataKey:'date',
  260. format: 'YYYY/MM'
  261. },
  262. ],
  263. searchList1:[
  264. {
  265. type:'select',
  266. dataKey:'status',
  267. placeholder:'请选择审核状态',
  268. selectList:()=>{
  269. let arr = [];
  270. for(let i of clockState){
  271. arr.push({
  272. value:i.id,
  273. label:i.title
  274. })
  275. }
  276. return arr;
  277. }
  278. },
  279. {
  280. type:'select',
  281. dataKey:'clockIn',
  282. placeholder:'请选择打卡状态',
  283. selectList:[
  284. {
  285. value:'0',
  286. label:'已打卡'
  287. },
  288. {
  289. value:'1',
  290. label:'未打卡'
  291. }
  292. ]
  293. },
  294. {
  295. type:'autoComplete',
  296. dataKey:'aid',
  297. api:'/api/admin/customer/listAdminByName',
  298. search:'adminName',
  299. placeholder:'请输入公出申请人'
  300. },
  301. {
  302. type:'autoComplete',
  303. dataKey:'sid',
  304. api:'/api/admin/customer/listAdminByName',
  305. search:'adminName',
  306. placeholder:'请输入跟单人'
  307. },
  308. ],
  309. columns2:[
  310. {
  311. title: "合同编号",
  312. dataIndex: "contractNo",
  313. key: "contractNo",
  314. },
  315. {
  316. title: "订单编号",
  317. dataIndex: "orderNo",
  318. key: "orderNo",
  319. },
  320. {
  321. title: "客户名称",
  322. dataIndex: "userName",
  323. key: "userName",
  324. render:text=>{
  325. return (
  326. <Tooltip title={text}>
  327. <div style={{
  328. maxWidth:'150px',
  329. overflow:'hidden',
  330. textOverflow: "ellipsis",
  331. whiteSpace:'nowrap',
  332. }}>{text}</div>
  333. </Tooltip>
  334. )
  335. }
  336. },
  337. {
  338. title: "订单部门",
  339. dataIndex: "depName",
  340. key: "depName",
  341. },
  342. {
  343. title: "下单时间",
  344. dataIndex: "createDate",
  345. key: "createTime",
  346. },
  347. {
  348. title: "合同签订时间",
  349. dataIndex: "signDate",
  350. key: "signDate",
  351. },
  352. {
  353. title: "流程状态",
  354. dataIndex: "processStatus",
  355. key: "processStatus",
  356. render: (text) => {
  357. return getProcessStatus(text);
  358. },
  359. },
  360. {
  361. title: "签单金额(万元)",
  362. dataIndex: "totalAmount",
  363. key: "totalAmount",
  364. },
  365. {
  366. title: "开票金额(万元)",
  367. dataIndex: "invoiceAmount",
  368. key: "invoiceAmount",
  369. },
  370. {
  371. title: "已收款(万元)",
  372. dataIndex: "settlementAmount",
  373. key: "settlementAmount",
  374. },
  375. {
  376. title: "结算状态",
  377. dataIndex: "liquidationStatus",
  378. key: "liquidationStatus",
  379. render: (text) => {
  380. return getLiquidationStatus(text);
  381. },
  382. },
  383. {
  384. title: "是否特批",
  385. dataIndex: "approval",
  386. key: "approval",
  387. render: (text) => {
  388. return getApprovedState(text);
  389. },
  390. },
  391. {
  392. title: "订单状态",
  393. dataIndex: "orderStatus",
  394. key: "orderStatus",
  395. render: (text) => {
  396. return getNewOrderStatus(text);
  397. },
  398. },
  399. {
  400. title: "财务负责人",
  401. dataIndex: "financeName",
  402. key: "financeName",
  403. },
  404. ],
  405. searchList2:[
  406. {
  407. type:'text',
  408. placeholder:'请输入订单编号',
  409. dataKey:'orderNo',
  410. },
  411. {
  412. type:'text',
  413. placeholder:'请输入客户名称',
  414. dataKey:'name',
  415. },
  416. {
  417. type:'text',
  418. placeholder:'请输入合同编号',
  419. dataKey:'contractNo',
  420. },
  421. {
  422. type:'select',
  423. dataKey:'liquidationStatus',
  424. placeholder:'请选择结算状态',
  425. selectList:[
  426. {
  427. value:'0',
  428. label:'首付待付请'
  429. },
  430. {
  431. value:'1',
  432. label:'尾款待付清'
  433. },
  434. {
  435. value:'2',
  436. label:'已付清'
  437. },
  438. ]
  439. },
  440. {
  441. type:'select',
  442. dataKey:'approval',
  443. placeholder:'请选择特批状态',
  444. selectList:[
  445. {
  446. value:'0',
  447. label:'非特批'
  448. },
  449. {
  450. value:'1',
  451. label:'特批'
  452. },
  453. ]
  454. },
  455. {
  456. type:'select',
  457. dataKey:'amountStatus',
  458. placeholder:'请选择签单金额',
  459. selectList:[
  460. {
  461. value:'0',
  462. label:'10万元以下'
  463. },
  464. {
  465. value:'1',
  466. label:'10~20万元'
  467. },
  468. {
  469. value:'2',
  470. label:'20~30万元'
  471. },
  472. {
  473. value:'3',
  474. label:'30~40万元'
  475. },
  476. {
  477. value:'4',
  478. label:'40万元以上'
  479. },
  480. ]
  481. },
  482. ],
  483. searchConfig:{}
  484. }
  485. }
  486. render() {
  487. return (
  488. <div>
  489. <Modal
  490. maskClosable={false}
  491. visible={this.props.visible}
  492. onOk={this.props.onCancel}
  493. onCancel={this.props.onCancel}
  494. width='1200px'
  495. title={this.props.recordInfor.name + '面谈表'}
  496. footer=''
  497. className="admin-desc-content">
  498. <div className="user-content">
  499. <TabelContent
  500. searchList={this.state.searchList}
  501. columns={this.state.columns}
  502. searchConfig={this.props.searchConfig}
  503. tabelApi={'/api/admin/provinceFollowStatisticsList'}
  504. exportApi={'/api/admin/provinceFollowStatisticsListExport'}
  505. query={{
  506. province:this.props.recordInfor.id,
  507. }}
  508. onRowClick={()=>{}}
  509. searchOperation={(value)=>{
  510. for(let i of Object.keys(value)){
  511. if(i === 'sort' || i === 'pageNo' || i === 'pageSize'){
  512. delete value[i]
  513. }
  514. }
  515. this.setState({searchConfig:value})}
  516. }
  517. dataProcessing={(data)=>{
  518. let theArr = [];
  519. for (let i = 0; i < data.data.length; i++) {
  520. let thisdata = data.data[i];
  521. thisdata.key=i + 1;
  522. theArr.push(thisdata);
  523. }
  524. return theArr;
  525. }}
  526. />
  527. </div>
  528. {this.state.visible1 && <Modal
  529. maskClosable={false}
  530. visible={this.state.visible1}
  531. onOk={()=>{
  532. this.setState({
  533. visible1:false,
  534. uid:'',
  535. depId:''
  536. })
  537. }}
  538. onCancel={()=>{
  539. this.setState({
  540. visible1:false,
  541. uid:'',
  542. depId:''
  543. })
  544. }}
  545. width='1600px'
  546. title='公出详细列表'
  547. footer=''
  548. className="admin-desc-content">
  549. <div className="user-content">
  550. <TabelContent
  551. scroll={{ x: 1200 }}
  552. searchConfig={this.state.searchConfig}
  553. searchList={this.state.searchList1}
  554. columns={this.state.columns1}
  555. tabelApi={'/api/admin/release/publicReleaseDtails'}
  556. exportApi={'/api/admin/release/publicReleaseDtails/export'}
  557. query={{
  558. uid:this.state.uid,
  559. depId:this.state.depId,
  560. releaseStart:moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),
  561. releaseEnd:moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')
  562. }}
  563. exportExecProcessing={(data)=>{
  564. data.uid = this.state.uid;
  565. data.depId = this.state.depId;
  566. return data;
  567. }}
  568. onRowClick={()=>{}}
  569. dataProcessing={(data)=>{
  570. let theArr = [];
  571. for (let i = 0; i < data.data.list.length; i++) {
  572. let thisdata = data.data.list[i];
  573. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  574. theArr.push(thisdata);
  575. }
  576. return theArr;
  577. }}
  578. />
  579. </div>
  580. </Modal>}
  581. {this.state.visible2 && <Modal
  582. maskClosable={false}
  583. visible={this.state.visible2}
  584. onOk={()=>{
  585. this.setState({
  586. visible2:false,
  587. uid:'',
  588. depId:''
  589. })
  590. }}
  591. onCancel={()=>{
  592. this.setState({
  593. visible2:false,
  594. uid:'',
  595. depId:''
  596. })
  597. }}
  598. width='1600px'
  599. title='客户订单列表'
  600. footer=''
  601. className="admin-desc-content">
  602. <div className="user-content">
  603. <TabelContent
  604. scroll={{ x: 1200 }}
  605. searchConfig={this.state.searchConfig}
  606. searchList={this.state.searchList2}
  607. columns={this.state.columns2}
  608. tabelApi={'/api/admin/newOrder/orderNewList'}
  609. query={{
  610. uid:this.state.uid,
  611. depId:this.state.depId,
  612. specially: 8,
  613. starTime:moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),
  614. endTime:moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')
  615. }}
  616. onRowClick={()=>{}}
  617. dataProcessing={(data)=>{
  618. let theArr = [];
  619. for (let i = 0; i < data.data.list.length; i++) {
  620. let thisdata = data.data.list[i];
  621. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  622. theArr.push(thisdata);
  623. }
  624. return theArr;
  625. }}
  626. />
  627. </div>
  628. </Modal>}
  629. </Modal>
  630. {this.state.imgListVisible ? <Modal
  631. maskClosable={false}
  632. visible={this.state.imgListVisible}
  633. onOk={()=>{this.setState({
  634. imgListVisible:false
  635. })}}
  636. onCancel={()=>{this.setState({
  637. imgListVisible:false
  638. })}}
  639. width='500px'
  640. title='图片'
  641. footer=''>
  642. <div>
  643. <div>申请附件</div>
  644. <ImgList fileList={this.state.annexUrlArr} domId='publicStatistics'/>
  645. <div style={{paddingTop:'35px'}}>打卡照片</div>
  646. <ImgList fileList={this.state.photoUrlArr} domId='publicStatistics1'/>
  647. </div>
  648. </Modal> : null}
  649. </div>
  650. )
  651. }
  652. }
  653. export default DetailedList;