detailedList.jsx 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682
  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. //0 总数量 1总金额 2总面谈
  257. {
  258. type:'select',
  259. dataKey:'sort',
  260. placeholder:'请选择排序',
  261. selectList:[
  262. {
  263. value:'0',
  264. label:'按总数量排序'
  265. },
  266. {
  267. value:'1',
  268. label:'按总金额排序'
  269. },
  270. {
  271. value:'2',
  272. label:'按总面谈排序'
  273. },
  274. ]
  275. },
  276. {
  277. type:'times',
  278. title:'公出时间',
  279. dataKey:'date',
  280. format: 'YYYY/MM'
  281. },
  282. ],
  283. searchList1:[
  284. {
  285. type:'select',
  286. dataKey:'status',
  287. placeholder:'请选择审核状态',
  288. selectList:()=>{
  289. let arr = [];
  290. for(let i of clockState){
  291. arr.push({
  292. value:i.id,
  293. label:i.title
  294. })
  295. }
  296. return arr;
  297. }
  298. },
  299. {
  300. type:'select',
  301. dataKey:'clockIn',
  302. placeholder:'请选择打卡状态',
  303. selectList:[
  304. {
  305. value:'0',
  306. label:'已打卡'
  307. },
  308. {
  309. value:'1',
  310. label:'未打卡'
  311. }
  312. ]
  313. },
  314. {
  315. type:'autoComplete',
  316. dataKey:'aid',
  317. api:'/api/admin/customer/listAdminByName',
  318. search:'adminName',
  319. placeholder:'请输入公出申请人'
  320. },
  321. {
  322. type:'autoComplete',
  323. dataKey:'sid',
  324. api:'/api/admin/customer/listAdminByName',
  325. search:'adminName',
  326. placeholder:'请输入跟单人'
  327. },
  328. ],
  329. columns2:[
  330. {
  331. title: "合同编号",
  332. dataIndex: "contractNo",
  333. key: "contractNo",
  334. },
  335. {
  336. title: "订单编号",
  337. dataIndex: "orderNo",
  338. key: "orderNo",
  339. },
  340. {
  341. title: "客户名称",
  342. dataIndex: "userName",
  343. key: "userName",
  344. render:text=>{
  345. return (
  346. <Tooltip title={text}>
  347. <div style={{
  348. maxWidth:'150px',
  349. overflow:'hidden',
  350. textOverflow: "ellipsis",
  351. whiteSpace:'nowrap',
  352. }}>{text}</div>
  353. </Tooltip>
  354. )
  355. }
  356. },
  357. {
  358. title: "订单部门",
  359. dataIndex: "depName",
  360. key: "depName",
  361. },
  362. {
  363. title: "下单时间",
  364. dataIndex: "createDate",
  365. key: "createTime",
  366. },
  367. {
  368. title: "合同签订时间",
  369. dataIndex: "signDate",
  370. key: "signDate",
  371. },
  372. {
  373. title: "流程状态",
  374. dataIndex: "processStatus",
  375. key: "processStatus",
  376. render: (text) => {
  377. return getProcessStatus(text);
  378. },
  379. },
  380. {
  381. title: "签单金额(万元)",
  382. dataIndex: "totalAmount",
  383. key: "totalAmount",
  384. },
  385. {
  386. title: "开票金额(万元)",
  387. dataIndex: "invoiceAmount",
  388. key: "invoiceAmount",
  389. },
  390. {
  391. title: "已收款(万元)",
  392. dataIndex: "settlementAmount",
  393. key: "settlementAmount",
  394. },
  395. {
  396. title: "结算状态",
  397. dataIndex: "liquidationStatus",
  398. key: "liquidationStatus",
  399. render: (text) => {
  400. return getLiquidationStatus(text);
  401. },
  402. },
  403. {
  404. title: "是否特批",
  405. dataIndex: "approval",
  406. key: "approval",
  407. render: (text) => {
  408. return getApprovedState(text);
  409. },
  410. },
  411. {
  412. title: "订单状态",
  413. dataIndex: "orderStatus",
  414. key: "orderStatus",
  415. render: (text) => {
  416. return getNewOrderStatus(text);
  417. },
  418. },
  419. {
  420. title: "财务负责人",
  421. dataIndex: "financeName",
  422. key: "financeName",
  423. },
  424. ],
  425. searchList2:[
  426. {
  427. type:'text',
  428. placeholder:'请输入订单编号',
  429. dataKey:'orderNo',
  430. },
  431. {
  432. type:'text',
  433. placeholder:'请输入客户名称',
  434. dataKey:'name',
  435. },
  436. {
  437. type:'text',
  438. placeholder:'请输入合同编号',
  439. dataKey:'contractNo',
  440. },
  441. {
  442. type:'select',
  443. dataKey:'liquidationStatus',
  444. placeholder:'请选择结算状态',
  445. selectList:[
  446. {
  447. value:'0',
  448. label:'首付待付请'
  449. },
  450. {
  451. value:'1',
  452. label:'尾款待付清'
  453. },
  454. {
  455. value:'2',
  456. label:'已付清'
  457. },
  458. ]
  459. },
  460. {
  461. type:'select',
  462. dataKey:'approval',
  463. placeholder:'请选择特批状态',
  464. selectList:[
  465. {
  466. value:'0',
  467. label:'非特批'
  468. },
  469. {
  470. value:'1',
  471. label:'特批'
  472. },
  473. ]
  474. },
  475. {
  476. type:'select',
  477. dataKey:'amountStatus',
  478. placeholder:'请选择签单金额',
  479. selectList:[
  480. {
  481. value:'0',
  482. label:'10万元以下'
  483. },
  484. {
  485. value:'1',
  486. label:'10~20万元'
  487. },
  488. {
  489. value:'2',
  490. label:'20~30万元'
  491. },
  492. {
  493. value:'3',
  494. label:'30~40万元'
  495. },
  496. {
  497. value:'4',
  498. label:'40万元以上'
  499. },
  500. ]
  501. },
  502. ],
  503. searchConfig:{}
  504. }
  505. }
  506. render() {
  507. return (
  508. <div>
  509. <Modal
  510. maskClosable={false}
  511. visible={this.props.visible}
  512. onOk={this.props.onCancel}
  513. onCancel={this.props.onCancel}
  514. width='1200px'
  515. title={this.props.recordInfor.name + '面谈表'}
  516. footer=''
  517. className="admin-desc-content">
  518. <div className="user-content">
  519. <TabelContent
  520. searchList={this.state.searchList}
  521. columns={this.state.columns}
  522. searchConfig={this.props.searchConfig}
  523. tabelApi={'/api/admin/provinceFollowStatisticsList'}
  524. exportApi={'/api/admin/provinceFollowStatisticsListExprot'}
  525. query={{
  526. province:this.props.recordInfor.id,
  527. }}
  528. onRowClick={()=>{}}
  529. searchOperation={(value)=>{
  530. for(let i of Object.keys(value)){
  531. if(i === 'sort' || i === 'pageNo' || i === 'pageSize'){
  532. delete value[i]
  533. }
  534. }
  535. this.setState({searchConfig:value})}
  536. }
  537. dataProcessing={(data)=>{
  538. let theArr = [];
  539. for (let i = 0; i < data.data.length; i++) {
  540. let thisdata = data.data[i];
  541. thisdata.key=i + 1;
  542. theArr.push(thisdata);
  543. }
  544. return theArr;
  545. }}
  546. />
  547. </div>
  548. {this.state.visible1 && <Modal
  549. maskClosable={false}
  550. visible={this.state.visible1}
  551. onOk={()=>{
  552. this.setState({
  553. visible1:false,
  554. uid:'',
  555. depId:''
  556. })
  557. }}
  558. onCancel={()=>{
  559. this.setState({
  560. visible1:false,
  561. uid:'',
  562. depId:''
  563. })
  564. }}
  565. width='1600px'
  566. title='公出详细列表'
  567. footer=''
  568. className="admin-desc-content">
  569. <div className="user-content">
  570. <TabelContent
  571. scroll={{ x: 1200 }}
  572. searchConfig={this.state.searchConfig}
  573. searchList={this.state.searchList1}
  574. columns={this.state.columns1}
  575. tabelApi={'/api/admin/release/publicReleaseDtails'}
  576. exportApi={'/api/admin/release/publicReleaseDtails/export'}
  577. query={{
  578. uid:this.state.uid,
  579. depId:this.state.depId,
  580. releaseStart:moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),
  581. releaseEnd:moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')
  582. }}
  583. exportExecProcessing={(data)=>{
  584. data.uid = this.state.uid;
  585. data.depId = this.state.depId;
  586. return data;
  587. }}
  588. onRowClick={()=>{}}
  589. dataProcessing={(data)=>{
  590. let theArr = [];
  591. for (let i = 0; i < data.data.list.length; i++) {
  592. let thisdata = data.data.list[i];
  593. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  594. theArr.push(thisdata);
  595. }
  596. return theArr;
  597. }}
  598. />
  599. </div>
  600. </Modal>}
  601. {this.state.visible2 && <Modal
  602. maskClosable={false}
  603. visible={this.state.visible2}
  604. onOk={()=>{
  605. this.setState({
  606. visible2:false,
  607. uid:'',
  608. depId:''
  609. })
  610. }}
  611. onCancel={()=>{
  612. this.setState({
  613. visible2:false,
  614. uid:'',
  615. depId:''
  616. })
  617. }}
  618. width='1600px'
  619. title='客户订单列表'
  620. footer=''
  621. className="admin-desc-content">
  622. <div className="user-content">
  623. <TabelContent
  624. scroll={{ x: 1200 }}
  625. searchConfig={this.state.searchConfig}
  626. searchList={this.state.searchList2}
  627. columns={this.state.columns2}
  628. tabelApi={'/api/admin/newOrder/orderNewList'}
  629. query={{
  630. uid:this.state.uid,
  631. depId:this.state.depId,
  632. specially: 8,
  633. starTime:moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),
  634. endTime:moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')
  635. }}
  636. onRowClick={()=>{}}
  637. dataProcessing={(data)=>{
  638. let theArr = [];
  639. for (let i = 0; i < data.data.list.length; i++) {
  640. let thisdata = data.data.list[i];
  641. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  642. theArr.push(thisdata);
  643. }
  644. return theArr;
  645. }}
  646. />
  647. </div>
  648. </Modal>}
  649. </Modal>
  650. {this.state.imgListVisible ? <Modal
  651. maskClosable={false}
  652. visible={this.state.imgListVisible}
  653. onOk={()=>{this.setState({
  654. imgListVisible:false
  655. })}}
  656. onCancel={()=>{this.setState({
  657. imgListVisible:false
  658. })}}
  659. width='500px'
  660. title='图片'
  661. footer=''>
  662. <div>
  663. <div>申请附件</div>
  664. <ImgList fileList={this.state.annexUrlArr} domId='publicStatistics'/>
  665. <div style={{paddingTop:'35px'}}>打卡照片</div>
  666. <ImgList fileList={this.state.photoUrlArr} domId='publicStatistics1'/>
  667. </div>
  668. </Modal> : null}
  669. </div>
  670. )
  671. }
  672. }
  673. export default DetailedList;