detailedList.jsx 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683
  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,record) => (
  186. <div style={{ display: "flex", flexDirection: "row" }}>
  187. <Tag color={getClockState(text).color}>
  188. {getClockState(text).title}
  189. </Tag>
  190. {record.updateStatus === 1 && (
  191. <Tag color="#1E90FF">改</Tag>
  192. )}
  193. </div>
  194. // <Tag color={getClockState(text).color}>{getClockState(text).title}</Tag>
  195. )
  196. },
  197. {
  198. title: "打卡状态",
  199. dataIndex: "clockIn",
  200. key: "clockIn",
  201. width: 60,
  202. render: (text) => (
  203. text === 1 ? '已打卡' :
  204. text === 0 ? '未打卡' : ''
  205. )
  206. },
  207. {
  208. title: "公出类型",
  209. dataIndex: "type",
  210. key: "type",
  211. width: 70,
  212. render: (text) =>
  213. text === 1 ? "技术公出" : text === 0 ? "业务/行政公出" : "",
  214. },
  215. {
  216. title: "公出原因/计划",
  217. dataIndex: "remarks",
  218. key: "remarks",
  219. width: 155,
  220. render: (text) => {
  221. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  222. },
  223. },
  224. {
  225. title: "补充",
  226. dataIndex: "supplement",
  227. key: "supplement",
  228. width: 155,
  229. render: (text) => {
  230. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  231. },
  232. },
  233. {
  234. title: "审核/指导",
  235. dataIndex: "auditInfo",
  236. key: "auditInfo",
  237. width: 155,
  238. render: (text) => {
  239. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  240. },
  241. },
  242. {
  243. title: "操作",
  244. dataIndex: "annexUrl",
  245. key: "annexUrl",
  246. render: (text,record) => (
  247. <div>
  248. <Button
  249. type={"primary"}
  250. onClick={(e) => {
  251. e.stopPropagation();
  252. let arr1 = text || [];
  253. let arr2 = record.photoUrl || [];
  254. this.setState({
  255. annexUrlArr:splitUrl(arr1, ",", globalConfig.avatarHost + "/upload"),
  256. photoUrlArr:splitUrl(arr2, ",", globalConfig.avatarHost + "/upload"),
  257. },()=>{
  258. this.setState({
  259. imgListVisible:true
  260. })
  261. })
  262. }}
  263. >
  264. 查看附件
  265. </Button>
  266. </div>
  267. )
  268. },
  269. ],
  270. searchList:[
  271. {
  272. type:'departmentSelect',
  273. dataKey:'depId',
  274. placeholder:'请选择部门'
  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. scroll={{ x: 0, y: 500}}
  521. searchList={this.state.searchList}
  522. columns={this.state.columns}
  523. searchConfig={this.props.searchConfig}
  524. tabelApi={'/api/admin/provinceFollowStatisticsList'}
  525. exportApi={'/api/admin/provinceFollowStatisticsListExport'}
  526. query={{
  527. province:this.props.recordInfor.id,
  528. type:this.props.recordInfor.type
  529. }}
  530. onRowClick={()=>{}}
  531. searchOperation={(value)=>{
  532. for(let i of Object.keys(value)){
  533. if(i === 'sort' || i === 'pageNo' || i === 'pageSize'){
  534. delete value[i]
  535. }
  536. }
  537. this.setState({searchConfig:value})}
  538. }
  539. dataProcessing={(data)=>{
  540. let theArr = [];
  541. for (let i = 0; i < data.data.length; i++) {
  542. let thisdata = data.data[i];
  543. thisdata.key=i + 1;
  544. theArr.push(thisdata);
  545. }
  546. return theArr;
  547. }}
  548. />
  549. </div>
  550. {this.state.visible1 && <Modal
  551. maskClosable={false}
  552. visible={this.state.visible1}
  553. onOk={()=>{
  554. this.setState({
  555. visible1:false,
  556. uid:'',
  557. depId:''
  558. })
  559. }}
  560. onCancel={()=>{
  561. this.setState({
  562. visible1:false,
  563. uid:'',
  564. depId:''
  565. })
  566. }}
  567. width='1600px'
  568. title='公出详细列表'
  569. footer=''
  570. className="admin-desc-content">
  571. <div className="user-content">
  572. <TabelContent
  573. scroll={{ x: 1200 }}
  574. searchConfig={JSON.parse(JSON.stringify(this.state.searchConfig))}
  575. searchList={this.state.searchList1}
  576. columns={this.state.columns1}
  577. tabelApi={'/api/admin/release/publicReleaseDtails'}
  578. exportApi={'/api/admin/release/publicReleaseDtails/export'}
  579. query={{
  580. uid:this.state.uid,
  581. depId:this.state.depId,
  582. releaseStart:moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),
  583. releaseEnd:moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')
  584. }}
  585. exportExecProcessing={(data)=>{
  586. data.uid = this.state.uid;
  587. data.depId = this.state.depId;
  588. return data;
  589. }}
  590. onRowClick={()=>{}}
  591. dataProcessing={(data)=>{
  592. let theArr = [];
  593. for (let i = 0; i < data.data.list.length; i++) {
  594. let thisdata = data.data.list[i];
  595. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  596. theArr.push(thisdata);
  597. }
  598. return theArr;
  599. }}
  600. />
  601. </div>
  602. </Modal>}
  603. {this.state.visible2 && <Modal
  604. maskClosable={false}
  605. visible={this.state.visible2}
  606. onOk={()=>{
  607. this.setState({
  608. visible2:false,
  609. uid:'',
  610. depId:''
  611. })
  612. }}
  613. onCancel={()=>{
  614. this.setState({
  615. visible2:false,
  616. uid:'',
  617. depId:''
  618. })
  619. }}
  620. width='1600px'
  621. title='客户订单列表'
  622. footer=''
  623. className="admin-desc-content">
  624. <div className="user-content">
  625. <TabelContent
  626. scroll={{ x: 1200 }}
  627. searchConfig={JSON.parse(JSON.stringify(this.state.searchConfig))}
  628. searchList={this.state.searchList2}
  629. columns={this.state.columns2}
  630. tabelApi={'/api/admin/newOrder/orderNewList'}
  631. query={{
  632. uid:this.state.uid,
  633. depId:this.state.depId,
  634. specially: 8,
  635. starTime:moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),
  636. endTime:moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')
  637. }}
  638. onRowClick={()=>{}}
  639. dataProcessing={(data)=>{
  640. let theArr = [];
  641. for (let i = 0; i < data.data.list.length; i++) {
  642. let thisdata = data.data.list[i];
  643. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  644. theArr.push(thisdata);
  645. }
  646. return theArr;
  647. }}
  648. />
  649. </div>
  650. </Modal>}
  651. </Modal>
  652. {this.state.imgListVisible ? <Modal
  653. maskClosable={false}
  654. visible={this.state.imgListVisible}
  655. onOk={()=>{this.setState({
  656. imgListVisible:false
  657. })}}
  658. onCancel={()=>{this.setState({
  659. imgListVisible:false
  660. })}}
  661. width='500px'
  662. title='图片'
  663. footer=''>
  664. <div>
  665. <div>申请附件</div>
  666. <ImgList fileList={this.state.annexUrlArr} domId='publicStatistics'/>
  667. <div style={{paddingTop:'35px'}}>打卡照片</div>
  668. <ImgList fileList={this.state.photoUrlArr} domId='publicStatistics1'/>
  669. </div>
  670. </Modal> : null}
  671. </div>
  672. )
  673. }
  674. }
  675. export default DetailedList;