statisticalDetails.jsx 11 KB

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