detailedList.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
  1. import React,{ Component } from 'react';
  2. import {
  3. Button,
  4. Modal, Select, Tag,
  5. Tooltip,
  6. } from "antd";
  7. import './index.less';
  8. import TabelContent from "../../../../common/tabelContent";
  9. import {splitUrl,getClockState} from "@/tools";
  10. import ImgList from "../../../../common/imgList";
  11. class DetailedList extends Component{
  12. constructor(props) {
  13. super(props);
  14. this.state= {
  15. columns: [
  16. {
  17. title: "编号",
  18. dataIndex: "key",
  19. key: "key",
  20. },
  21. {
  22. title: "面谈部门",
  23. dataIndex: "depName",
  24. key: "depName",
  25. },
  26. {
  27. title: "客户类型",
  28. dataIndex: "name",
  29. key: "name",
  30. },
  31. {
  32. title: "面谈客户",
  33. dataIndex: "name",
  34. key: "name",
  35. },
  36. {
  37. title: "面谈数",
  38. dataIndex: "quantity",
  39. key: "quantity",
  40. className: 'projectTable',
  41. width: 150,
  42. onCellClick: (record, event) => {
  43. event.stopPropagation();
  44. this.setState({
  45. visible1: true,
  46. aid: record.aid
  47. })
  48. },
  49. },
  50. {
  51. title: "签单数",
  52. dataIndex: "total",
  53. key: "total",
  54. className: 'projectTable',
  55. width: 150,
  56. onCellClick: (record, event) => {
  57. event.stopPropagation();
  58. this.setState({
  59. visible2: true,
  60. aid: record.aid
  61. })
  62. },
  63. },
  64. ],
  65. columns1: [
  66. {
  67. title: "编号",
  68. dataIndex: "key",
  69. key: "key",
  70. width: 45
  71. },
  72. {
  73. title: "客户名称",
  74. dataIndex: "nickname",
  75. key: "nickname",
  76. width: 140,
  77. render: (text) => {
  78. return (
  79. <div style={{
  80. width:140,
  81. wordBreak:'break-all',
  82. }}>{text}</div>
  83. )
  84. },
  85. },
  86. {
  87. title: "跟单人",
  88. dataIndex: "sname",
  89. key: "sname",
  90. width: 100,
  91. render: (text) => {
  92. return (
  93. <Tooltip title={text}>
  94. <div style={{
  95. width:100,
  96. overflow:'hidden',
  97. textOverflow: "ellipsis",
  98. whiteSpace:'nowrap',
  99. }}>{text}</div>
  100. </Tooltip>
  101. )
  102. },
  103. },
  104. {
  105. title: "公出申请人",
  106. dataIndex: "aname",
  107. key: "aname",
  108. width: 100,
  109. render: (text) => {
  110. return (
  111. <Tooltip title={text}>
  112. <div style={{
  113. width:100,
  114. overflow:'hidden',
  115. textOverflow: "ellipsis",
  116. whiteSpace:'nowrap',
  117. }}>{text}</div>
  118. </Tooltip>
  119. )
  120. },
  121. },
  122. {
  123. title: "申请时间",
  124. dataIndex: "createTimes",
  125. key: "createTimes",
  126. width: 130
  127. },
  128. {
  129. title: "公出时间",
  130. dataIndex: "releaseStarts",
  131. key: "releaseStarts",
  132. width: 130,
  133. render: (text, record) => (
  134. <div>
  135. <div>{text}</div>
  136. <div style={{paddingLeft:'44px'}}>至</div>
  137. <div>{record.releaseEnds}</div>
  138. </div>
  139. )
  140. },
  141. {
  142. title: "公出地点",
  143. dataIndex: "userName",
  144. key: "userName",
  145. width: 120,
  146. render: (text) => {
  147. return (
  148. <Tooltip title={text}>
  149. <div style={{
  150. width:120,
  151. overflow:'hidden',
  152. textOverflow: "ellipsis",
  153. whiteSpace:'nowrap',
  154. }}>{text}</div>
  155. </Tooltip>
  156. )
  157. },
  158. },
  159. {
  160. title: "公出时长(时)",
  161. dataIndex: "duration",
  162. key: "duration",
  163. width: 50
  164. },
  165. {
  166. title: "打卡时间",
  167. dataIndex: "clockInTimes",
  168. key: "clockInTimes",
  169. width: 130
  170. },
  171. {
  172. title: "审核状态",
  173. dataIndex: "status",
  174. key: "status",
  175. width: 40,
  176. render: (text) => (
  177. <Tag color={getClockState(text).color}>{getClockState(text).title}</Tag>
  178. )
  179. },
  180. {
  181. title: "打卡状态",
  182. dataIndex: "clockIn",
  183. key: "clockIn",
  184. width: 60,
  185. render: (text) => (
  186. text === 1 ? '已打卡' :
  187. text === 0 ? '未打卡' : ''
  188. )
  189. },
  190. {
  191. title: "公出原因/计划",
  192. dataIndex: "remarks",
  193. key: "remarks",
  194. width: 155,
  195. render: (text) => {
  196. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  197. },
  198. },
  199. {
  200. title: "补充",
  201. dataIndex: "supplement",
  202. key: "supplement",
  203. width: 155,
  204. render: (text) => {
  205. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  206. },
  207. },
  208. {
  209. title: "审核/指导",
  210. dataIndex: "auditInfo",
  211. key: "auditInfo",
  212. width: 155,
  213. render: (text) => {
  214. return (<div style={{wordBreak:"break-all"}}>{text}</div>)
  215. },
  216. },
  217. {
  218. title: "操作",
  219. dataIndex: "annexUrl",
  220. key: "annexUrl",
  221. render: (text,record) => (
  222. <div>
  223. <Button
  224. type={"primary"}
  225. onClick={(e) => {
  226. e.stopPropagation();
  227. let arr1 = text || [];
  228. let arr2 = record.photoUrl || [];
  229. this.setState({
  230. annexUrlArr:splitUrl(arr1, ",", globalConfig.avatarHost + "/upload"),
  231. photoUrlArr:splitUrl(arr2, ",", globalConfig.avatarHost + "/upload"),
  232. },()=>{
  233. this.setState({
  234. imgListVisible:true
  235. })
  236. })
  237. }}
  238. >
  239. 查看附件
  240. </Button>
  241. </div>
  242. )
  243. },
  244. ],
  245. }
  246. }
  247. searchList(){
  248. let arr = [
  249. {
  250. type:'departmentSelect',
  251. dataKey:'depId',
  252. placeholder:'请选择部门'
  253. },
  254. {
  255. type:'select',
  256. dataKey:'province',
  257. placeholder:'请选择省份',
  258. selectOptionList:()=>{
  259. let Province = [];
  260. provinceList.map(function(item) {
  261. let id = String(item.id)
  262. Province.push(
  263. <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
  264. )
  265. });
  266. return Province
  267. },
  268. },
  269. //0 总数量 1总金额 2总面谈
  270. {
  271. type:'select',
  272. dataKey:'sort',
  273. placeholder:'请选择排序',
  274. selectList:[
  275. {
  276. value:'0',
  277. label:'按总数量排序'
  278. },
  279. {
  280. value:'1',
  281. label:'按总金额排序'
  282. },
  283. {
  284. value:'2',
  285. label:'按总面谈排序'
  286. },
  287. ]
  288. },
  289. {
  290. type:'times',
  291. title:'公出时间',
  292. dataKey:'date',
  293. format: 'YYYY/MM'
  294. },
  295. ]
  296. return arr;
  297. }
  298. searchList1(){
  299. let arr = [
  300. {
  301. type:'autoComplete',
  302. dataKey:'orderNo',
  303. api:'/api/admin/customer/listAdminByName',
  304. search:'adminName',
  305. placeholder:'请输入客户名称'
  306. },
  307. {
  308. type:'text',
  309. dataKey:'name',
  310. placeholder:'请输入客户名称'
  311. },
  312. {
  313. type:'departmentSelect',
  314. dataKey:'depId',
  315. placeholder:'请选择部门'
  316. },
  317. {
  318. type:'text',
  319. dataKey:'contractNo',
  320. placeholder:'请输入合同编号'
  321. },
  322. {
  323. type:'select',
  324. dataKey:'liquidationStatus',
  325. placeholder:'请选择结算状态',
  326. selectList:[
  327. {
  328. value:'0',
  329. label:'首付待付请'
  330. },
  331. {
  332. value:'1',
  333. label:'尾款待付清'
  334. },
  335. {
  336. value:'2',
  337. label:'已付清'
  338. }
  339. ]
  340. },
  341. {
  342. type:'select',
  343. dataKey:'approval',
  344. placeholder:'请选择特批状态',
  345. selectList:[
  346. {
  347. value:'0',
  348. label:'非特批'
  349. },
  350. {
  351. value:'1',
  352. label:'特批'
  353. }
  354. ]
  355. },
  356. {
  357. type:'select',
  358. dataKey:'amountStatus',
  359. placeholder:'请选择签单金额',
  360. selectList:[
  361. {
  362. value:'0',
  363. label:'10万元以下'
  364. },
  365. {
  366. value:'1',
  367. label:'10~20万元'
  368. },
  369. {
  370. value:'2',
  371. label:'20~30万元'
  372. },
  373. {
  374. value:'3',
  375. label:'30~40万元'
  376. },
  377. {
  378. value:'4',
  379. label:'40万元以上'
  380. },
  381. ]
  382. },
  383. {
  384. type:'times',
  385. title:'下单时间',
  386. dataKey:['starTime','endTime'],
  387. },
  388. ]
  389. return arr;
  390. }
  391. render() {
  392. return (
  393. <div>
  394. <Modal
  395. maskClosable={false}
  396. visible={this.props.visible}
  397. onOk={this.props.onCancel}
  398. onCancel={this.props.onCancel}
  399. width='1200px'
  400. title={this.props.recordInfor.province + '面谈表'}
  401. footer=''
  402. className="admin-desc-content">
  403. <div className="user-content">
  404. <TabelContent
  405. searchList={this.searchList()}
  406. columns={this.state.columns}
  407. tabelApi={'/api/admin/provinceFollowStatisticsList'}
  408. exportApi={'/api/admin/provinceFollowStatisticsListExprot'}
  409. query={{
  410. province:this.props.recordInfor.id,
  411. }}
  412. dataProcessing={(data)=>{
  413. let theArr = [];
  414. for (let i = 0; i < data.data.length; i++) {
  415. let thisdata = data.data[i];
  416. thisdata.key=i + 1;
  417. theArr.push(thisdata);
  418. }
  419. return theArr;
  420. }}
  421. />
  422. </div>
  423. {this.state.visible1 && <Modal
  424. maskClosable={false}
  425. visible={this.state.visible1}
  426. onOk={()=>{
  427. this.setState({
  428. visible1:false
  429. })
  430. }}
  431. onCancel={()=>{
  432. this.setState({
  433. visible1:false
  434. })
  435. }}
  436. width='1600px'
  437. title='公出详细列表'
  438. footer=''
  439. className="admin-desc-content">
  440. <div className="user-content">
  441. <TabelContent
  442. searchList={this.searchList1()}
  443. columns={this.state.columns1}
  444. tabelApi={'/api/admin/release/publicReleaseDtails'}
  445. exportApi={'/api/admin/release/publicReleaseDtails/export'}
  446. dataProcessing={(data)=>{
  447. let theArr = [];
  448. for (let i = 0; i < data.data.list.length; i++) {
  449. let thisdata = data.data.list[i];
  450. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  451. theArr.push(thisdata);
  452. }
  453. return theArr;
  454. }}
  455. />
  456. </div>
  457. </Modal>}
  458. </Modal>
  459. {this.state.imgListVisible ? <Modal
  460. maskClosable={false}
  461. visible={this.state.imgListVisible}
  462. onOk={()=>{this.setState({
  463. imgListVisible:false
  464. })}}
  465. onCancel={()=>{this.setState({
  466. imgListVisible:false
  467. })}}
  468. width='500px'
  469. title='图片'
  470. footer=''>
  471. <div>
  472. <div>申请附件</div>
  473. <ImgList fileList={this.state.annexUrlArr} domId='publicStatistics'/>
  474. <div style={{paddingTop:'35px'}}>打卡照片</div>
  475. <ImgList fileList={this.state.photoUrlArr} domId='publicStatistics1'/>
  476. </div>
  477. </Modal> : null}
  478. </div>
  479. )
  480. }
  481. }
  482. export default DetailedList;