detailedList.jsx 26 KB

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