statisticalDetails.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. import React,{Component} from "react";
  2. import {Button, message, Modal, Spin, Table, Tag, Tooltip} from "antd";
  3. import {
  4. getSocialAttribute,
  5. getChannelAllocationStatus
  6. } from "@/tools.js";
  7. import {
  8. channelAllocationStatus
  9. } from "@/dataDic.js";
  10. import $ from "jquery/src/ajax";
  11. import IntentionDetail from "./intentionDetail/intentionDetail";
  12. class StatisticalDetails extends Component{
  13. constructor(props) {
  14. super(props);
  15. this.state={
  16. columns: [
  17. {
  18. title: "客户名称",
  19. dataIndex: "userName",
  20. key: "userName",
  21. width:250,
  22. render: (text,record) => {
  23. return (
  24. <Tooltip title={text}>
  25. <div style={{
  26. maxWidth:'250px',
  27. overflow:'hidden',
  28. textOverflow: "ellipsis",
  29. whiteSpace:'nowrap',
  30. }}>
  31. {record.recovery === 1 ? <div style={{
  32. background:'#ef7207',
  33. color:'#FFF',
  34. padding: '1px 7px',
  35. borderRadius:'5px',
  36. fontSize:'12px',
  37. display: 'inline-block',
  38. marginRight:'10px'
  39. }}>
  40. 回收
  41. </div> : null}
  42. {text}
  43. </div>
  44. </Tooltip>
  45. )
  46. },
  47. },
  48. {
  49. title: "地区",
  50. dataIndex: "locationProvince",
  51. key: "locationProvince",
  52. },
  53. {
  54. title: "社会性质",
  55. dataIndex: "societyTag",
  56. key: "societyTag",
  57. render: (text) => {
  58. return getSocialAttribute(text);
  59. },
  60. },
  61. {
  62. title: "渠道专员",
  63. dataIndex: "channelName",
  64. key: "channelName",
  65. },
  66. {
  67. title: "客户联系人",
  68. dataIndex: "contacts",
  69. key: "contacts",
  70. },
  71. {
  72. title: "联系电话",
  73. dataIndex: "contactMobile",
  74. key: "contactMobile",
  75. },
  76. {
  77. title: "渠道初始时间",
  78. dataIndex: "createTimes",
  79. key: "createTimes",
  80. },
  81. {
  82. title: "分配状态",
  83. dataIndex: "status",
  84. key: "status",
  85. render: (text) => (
  86. getChannelAllocationStatus(text,true)
  87. )
  88. },
  89. {
  90. title: "当前跟进人",
  91. dataIndex: "adminName",
  92. key: "adminName",
  93. render: (text, record) => {
  94. return (
  95. record.status !== 0 ? text : ''
  96. )
  97. }
  98. },
  99. {
  100. title: "跟进操作",
  101. dataIndex: "abc",
  102. key: "abc",
  103. render: (text, record, index) => {
  104. return (
  105. <div style={{
  106. display: 'flex',
  107. flexFlow:'row',
  108. alignItems:'center',
  109. }}>
  110. <Button
  111. onClick={(e) => {
  112. e.stopPropagation();
  113. this.tableRowClick(record);
  114. }}
  115. type="primary"
  116. >
  117. 查看指导
  118. </Button>
  119. </div>
  120. );
  121. },
  122. },
  123. {
  124. title: "备注",
  125. dataIndex: "remarks",
  126. key: "remarks",
  127. render: (text) => {
  128. return (
  129. <Tooltip placement="topLeft" title={text}>
  130. <div style={{
  131. maxWidth:'150px',
  132. overflow:'hidden',
  133. textOverflow: "ellipsis",
  134. whiteSpace:'nowrap',
  135. }}>{text}</div>
  136. </Tooltip>
  137. )
  138. }
  139. }
  140. ],
  141. dataSource:[],
  142. pagination: {
  143. defaultCurrent: 1,
  144. defaultPageSize: 10,
  145. showQuickJumper: true,
  146. pageSize: 10,
  147. onChange: function (page) {
  148. this.loadData(page);
  149. }.bind(this),
  150. showTotal: function (total) {
  151. return "共" + total + "条数据";
  152. },
  153. },
  154. pageNo:1,
  155. listLoading:false,
  156. categoryArr:[],
  157. }
  158. this.tableRowClick = this.tableRowClick.bind(this);
  159. this.category = this.category.bind(this);
  160. this.detailCloseDesc = this.detailCloseDesc.bind(this);
  161. this.loadData = this.loadData.bind(this);
  162. }
  163. tableRowClick(record) {
  164. this.category();
  165. this.setState({
  166. rowData:record,
  167. modalVisible: true,
  168. basicState: true,
  169. contactState: true,
  170. modalName: record.userName
  171. })
  172. }
  173. componentWillReceiveProps (nextProps){
  174. if(nextProps.visible){
  175. this.loadData(1,nextProps);
  176. }
  177. }
  178. loadData(pageNo = 1,nextProps=this.props) {
  179. this.setState({
  180. listLoading: true,
  181. selectedRows: [],
  182. selectedRowKeys: [],
  183. });
  184. $.ajax({
  185. method: "post",
  186. dataType: "json",
  187. crossDomain: false,
  188. url: globalConfig.context + '/api/admin/customer/listChannelCustomer',
  189. data: {
  190. pageNo: pageNo || 1,
  191. pageSize: this.state.pagination.pageSize,
  192. type:nextProps.type, // 0营销员 1渠道专员 2营销总监 3营销经理 4释放 5未分配 6已分配 7已签单
  193. aid:nextProps.aid
  194. },
  195. success: function (data) {
  196. let theArr = [];
  197. if (data.error.length > 0) {
  198. message.warning(data.error[0].message);
  199. } else {
  200. if(data.data.list.length === 0 && pageNo !== 1){
  201. this.loadData(pageNo - 1)
  202. }else{
  203. for (let i = 0; i < data.data.list.length; i++) {
  204. let thisdata = data.data.list[i];
  205. let diqu =
  206. (thisdata.province == null ? "" : thisdata.province) +
  207. (thisdata.city == null ? "" : "-" + thisdata.city) +
  208. (thisdata.area == null ? "" : "-" + thisdata.area);
  209. thisdata.key = i;
  210. thisdata.id = thisdata.uid;
  211. thisdata.lastFollowTime = thisdata.lastFollowTime &&
  212. thisdata.lastFollowTime.split(" ")[0];
  213. thisdata.transferTime= thisdata.transferTime && thisdata.transferTime.split(" ")[0];
  214. thisdata.surplusFollowTime = thisdata.surplusFollowTime && thisdata.surplusFollowTime.split(" ")[0];
  215. thisdata.surplusSignTime = thisdata.surplusSignTime && thisdata.surplusSignTime.split(" ")[0];
  216. thisdata.locationProvince = diqu;
  217. theArr.push(thisdata);
  218. }
  219. this.state.pagination.current = data.data.pageNo;
  220. this.state.pagination.total = data.data.totalCount;
  221. this.setState({
  222. pageNo: data.data.pageNo,
  223. dataSource: theArr,
  224. pagination: this.state.pagination,
  225. })
  226. }
  227. }
  228. }.bind(this),
  229. }).always(
  230. function () {
  231. this.setState({
  232. listLoading: false,
  233. });
  234. }.bind(this)
  235. );
  236. }
  237. category() {
  238. $.ajax({
  239. method: "get",
  240. dataType: "json",
  241. crossDomain: false,
  242. url: globalConfig.context + "/api/admin/Varieties/getSuperList",
  243. data: {},
  244. success: function (data) {
  245. let thedata = data.data;
  246. let theArr = [];
  247. if (!thedata) {
  248. if (data.error && data.error.length) {
  249. message.warning(data.error[0].message);
  250. }
  251. thedata = {};
  252. } else {
  253. thedata.map(function (item, index) {
  254. theArr.push({
  255. value: item.id,
  256. key: item.cname,
  257. });
  258. });
  259. }
  260. this.setState({
  261. categoryArr: theArr,
  262. });
  263. }.bind(this),
  264. });
  265. }
  266. detailCloseDesc(){
  267. this.setState({
  268. rowData:'',
  269. modalVisible: false,
  270. basicState: false,
  271. contactState: false,
  272. modalName: '',
  273. },()=>{
  274. this.loadData(this.state.pageNo);
  275. })
  276. }
  277. render() {
  278. return (
  279. <Modal
  280. maskClosable={false}
  281. className="customeDetails"
  282. footer=""
  283. title={
  284. <span>
  285. <span style={{marginRight:'15px'}}>详细列表</span>
  286. <Tag color="#f50">{this.props.aName}</Tag>
  287. <Tag color="#108ee9">
  288. {
  289. this.props.type === 1?
  290. '当前客户总数':
  291. this.props.type === 4?
  292. '释放客数':
  293. this.props.type === 5?
  294. '未分配数':
  295. this.props.type === 6?
  296. '已分配数':
  297. this.props.type === 7?
  298. '已签单数': ''
  299. }
  300. </Tag>
  301. </span>
  302. }
  303. width="1200px"
  304. visible={this.props.visible}
  305. onOk={this.props.onCancel}
  306. onCancel={this.props.onCancel}
  307. >
  308. <Spin spinning={this.state.listLoading}>
  309. <Table
  310. size="middle"
  311. className={'intentionCustomerTable'}
  312. columns={this.state.columns}
  313. dataSource={this.state.dataSource}
  314. pagination={this.state.pagination}
  315. onRowClick={this.tableRowClick}
  316. />
  317. </Spin>
  318. <IntentionDetail
  319. categoryArr={this.state.categoryArr}
  320. detailApi='/api/admin/customer/findOrganizationCustomerDetail'
  321. IntentionData={this.state.rowData}
  322. modalVisible={this.state.modalVisible}
  323. name={this.state.modalName}
  324. closeDesc={this.detailCloseDesc}
  325. basicState={this.state.basicState}
  326. contactState={this.state.contactState}
  327. isGuidanceLv={true}
  328. isEditGuidanceLv={false}
  329. />
  330. </Modal>
  331. );
  332. }
  333. }
  334. export default StatisticalDetails;