intentionDetail.jsx 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. import React from 'react';
  2. import { Modal, Tabs } from 'antd';
  3. const TabPane = Tabs.TabPane;
  4. import Basic from './detail/basic.jsx';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. import ContactPerson from './detail/contactPerson.jsx'; //联系人
  8. import Account from './detail/account.jsx'; //账户信息
  9. import Visit from './detail/visit.jsx';
  10. import Business from './detail/business.jsx';
  11. import LockBusiness from './detail/lockBusiness.jsx';
  12. import BasicPerson from './detail/basicPerson.jsx';//基本信息
  13. import Outbound from '../../components/outbound';
  14. const IntentionDetail = React.createClass({
  15. getInitialState() {
  16. return {
  17. modalVisible: false,
  18. switchState: false,
  19. contactData: [],
  20. contactState: true,
  21. IntentionState: false,
  22. businessState: false,
  23. visitState: false,
  24. accountState: false,
  25. basicState: false
  26. }
  27. },
  28. detailsModal() {
  29. this.setState({
  30. basicState: false,
  31. modalVisible: false,
  32. callnub: 1,
  33. });
  34. this.props.closeDesc(false, true);
  35. },
  36. //详情tab切换数据处理
  37. callback(e) {
  38. if (e == '1') {
  39. this.setState({
  40. IntentionState: true,
  41. contactState: false,
  42. accountState: false,
  43. visitState: false,
  44. businessState: false,
  45. basicState: true
  46. })
  47. }
  48. if (e == '2') {
  49. this.setState({
  50. IntentionState: false,
  51. contactState: true,
  52. accountState: false,
  53. visitState: false,
  54. businessState: false,
  55. basicState: false
  56. })
  57. }
  58. // if(e == '3') {
  59. // this.setState({
  60. // IntentionState:false,
  61. // contactState:false,
  62. // accountState:true,
  63. // visitState:false,
  64. // businessState:false,
  65. // basicState:false
  66. // })
  67. // }
  68. if (e == '4') {
  69. this.setState({
  70. IntentionState: false,
  71. contactState: false,
  72. accountState: false,
  73. visitState: true,
  74. businessState: false,
  75. basicState: false
  76. })
  77. }
  78. if (e == '5') {
  79. this.setState({
  80. IntentionState: false,
  81. contactState: false,
  82. accountState: false,
  83. visitState: false,
  84. businessState: true,
  85. basicState: false
  86. })
  87. }
  88. this.setState({
  89. callnub: e,
  90. })
  91. },
  92. //取消函数
  93. closeDetail(e, s) {
  94. this.setState({
  95. basicState: false,
  96. //contactState:true,
  97. modalVisible: e,
  98. })
  99. // if(s){
  100. // this.props.closeDesc(false,true)
  101. // }
  102. },
  103. componentWillReceiveProps(nextProps) {
  104. if (nextProps.modalVisible && nextProps.IntentionData.id) {
  105. this.setState({
  106. modalVisible: true,
  107. callnub: this.props.defaultActiveKey ? String(this.props.defaultActiveKey) : (this.props.detailApi.indexOf('Organization')) > 0 ? "2" : '1',
  108. })
  109. };
  110. this.setState({
  111. basicState: nextProps.basicState,
  112. contactState: nextProps.contactState,
  113. })
  114. },
  115. render() {
  116. return (
  117. <div>
  118. {this.state.modalVisible ? <Modal
  119. className="customeDetails"
  120. title={
  121. <div
  122. style={{
  123. display: "flex",
  124. flexDirection: "row",
  125. justifyContent: "space-between",
  126. }}
  127. >
  128. <span>签单客户详情</span>
  129. <span style={{ marginRight: 100 }}>
  130. <Outbound
  131. type="history"
  132. uid={this.props.IntentionData.id}
  133. />
  134. </span>
  135. </div>
  136. }
  137. width="1300px"
  138. maskClosable={false}
  139. visible={this.state.modalVisible}
  140. onOk={this.detailsModal}
  141. onCancel={this.detailsModal}
  142. footer=""
  143. >
  144. <Tabs onChange={this.callback} activeKey={this.state.callnub}>
  145. {this.props.detailApi.indexOf("Organization") > 0 ? (
  146. ""
  147. ) : (
  148. <TabPane tab="基本信息" key="1">
  149. <BasicPerson
  150. detailApi={this.props.detailApi}
  151. closeDetail={this.closeDetail}
  152. data={this.props.IntentionData}
  153. IntentionState={this.state.IntentionState}
  154. basicState={this.state.basicState}
  155. />
  156. </TabPane>
  157. )}
  158. <TabPane tab="企业&联系人详情" key="2">
  159. <ContactPerson
  160. closeDetail={this.closeDetail}
  161. name={this.props.name}
  162. data={this.props.IntentionData}
  163. contactState={this.state.contactState}
  164. onCancel={this.detailsModal}
  165. />
  166. </TabPane>
  167. {/*<TabPane tab="账户信息" key="3">*/}
  168. {/* <Account*/}
  169. {/* closeDetail={this.closeDetail}*/}
  170. {/* data={this.props.IntentionData}*/}
  171. {/* accountState={this.state.accountState}*/}
  172. {/* />*/}
  173. {/*</TabPane>*/}
  174. <TabPane tab="客户跟进" key="4">
  175. <Visit
  176. categoryArr={this.props.categoryArr}
  177. loadData={this.props.loadData}
  178. closeDetail={this.closeDetail}
  179. data={this.props.IntentionData}
  180. visitState={this.state.visitState}
  181. />
  182. </TabPane>
  183. <TabPane tab="业务意向" key="5">
  184. <Business
  185. closeDesc={this.props.closeDesc}
  186. closeDetail={this.closeDetail}
  187. data={this.props.IntentionData}
  188. businessState={this.state.businessState}
  189. />
  190. </TabPane>
  191. <TabPane tab="锁定业务" key="6">
  192. {
  193. this.state.callnub === '6' ?
  194. <LockBusiness uid={this.props.IntentionData && this.props.IntentionData.uid} id={this.props.IntentionData && this.props.IntentionData.id} /> :
  195. <div />
  196. }
  197. </TabPane>
  198. {/*
  199. <TabPane tab="业务订单" key="6">
  200. </TabPane>
  201. <TabPane tab="技术需求" key="7">
  202. </TabPane>
  203. <TabPane tab="技术成果" key="8">
  204. </TabPane>
  205. <TabPane tab="技术专家" key="9">
  206. </TabPane>
  207. */}
  208. </Tabs>
  209. </Modal> : <div />}
  210. </div>
  211. );
  212. }
  213. })
  214. export default IntentionDetail;