kede-client/js/component/manageCenter/customer/NEW/intentionCustomer/intentionDetail/intentionDetail.jsx

import React from 'react';
import { Modal, Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import Basic from './detail/basic.jsx';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import ContactPerson from './detail/contactPerson.jsx';  //联系人
import Account from './detail/account.jsx';  //账户信息
import Visit from './detail/visit.jsx';
import Business from './detail/business.jsx';
import BasicPerson from './detail/basicPerson.jsx';
import Outbound from '../../components/outbound';

const IntentionDetail = React.createClass({
  getInitialState() {
    return {
      modalVisible: false,
      switchState: false,
      contactData: [],
      contactState: true,
      IntentionState: false,
      businessState: false,
      visitState: false,
      accountState: false,
      basicState: false
    }
  },
  detailsModal() {
    this.setState({
      basicState: false,
      modalVisible: false
    })
    this.props.closeDesc(false, true)
  },
  //详情tab切换数据处理
  callback(e) {
    if (e == '1') {
      this.setState({
        IntentionState: true,
        contactState: false,
        accountState: false,
        visitState: false,
        businessState: false,
        basicState: true
      })
    }
    if (e == '2') {
      this.setState({
        IntentionState: false,
        contactState: true,
        accountState: false,
        visitState: false,
        businessState: false,
        basicState: false
      })
    }
    // if(e == '3') {
    // 	this.setState({
    // 		IntentionState:false,
    // 		contactState:false,
    // 		accountState:true,
    // 		visitState:false,
    // 		businessState:false,
    // 		basicState:false
    // 	})
    // }
    if (e == '4') {
      this.setState({
        IntentionState: false,
        contactState: false,
        accountState: false,
        visitState: true,
        businessState: false,
        basicState: false
      })
    }
    if (e == '5') {
      this.setState({
        IntentionState: false,
        contactState: false,
        accountState: false,
        visitState: false,
        businessState: true,
        basicState: false
      })
    }
    this.setState({
      callnub: e,
    })
  },
  //取消函数
  closeDetail(e, s) {
    this.setState({
      basicState: false,
      modalVisible: e,
    })
    if (s) {
      this.props.closeDesc(false, true)
    }
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.modalVisible && nextProps.IntentionData.id) {
      this.setState({
        modalVisible: true,
        callnub: this.props.isCustomerAdmin ? '2' : (nextProps.isGuidanceLv ? (nextProps.tabsKey ? nextProps.tabsKey : "4") : (nextProps.tabsKey ? nextProps.tabsKey : (nextProps.detailApi.indexOf('Organization')) > 0 ? "2" : '1')),
      })
    };
    this.setState({
      basicState: nextProps.basicState,
      contactState: nextProps.contactState,
    })
  },
  render() {
    return (
      <div>
        {this.state.modalVisible ? <Modal
          className="customeDetails"
          title={<div
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
            }}
          >
            <span>意向客户详情</span>
            <span style={{ marginRight: 100 }}>
              <Outbound
                type="private"
                uid={this.props.IntentionData.id}
              />
            </span>
          </div>}
          width='92%'
          visible={this.state.modalVisible}
          onOk={this.detailsModal}
          onCancel={this.detailsModal}
          footer=''
        >
          <Tabs onChange={this.callback} activeKey={this.state.callnub}>
            {this.props.isGuidanceLv || this.props.detailApi.indexOf('Organization') > 0 ? "" :
              <TabPane tab="基本信息" key="1">
                <BasicPerson
                  detailApi={this.props.detailApi}
                  closeDetail={this.closeDetail}
                  data={this.props.IntentionData}
                  IntentionState={this.state.IntentionState}
                  basicState={this.state.basicState}
                />

              </TabPane>}
            {!this.props.isGuidanceLv || this.props.isCustomerAdmin ? <TabPane tab="企业&联系人详情" key="2">
              <ContactPerson
                isCustomerAdmin={this.props.isCustomerAdmin}
                closeDetail={this.closeDetail}
                name={this.props.name}
                data={this.props.IntentionData}
                contactState={this.state.contactState}
                onCancel={this.detailsModal}
              />
            </TabPane> : ""}
            {/* {!this.props.isGuidanceLv ? <TabPane tab="账户信息" key="3">*/}
            {/*	<Account*/}
            {/*		 isGuidanceLv={this.props.isGuidanceLv}  //用于判断是否为跟进管理页面*/}
            {/*		 closeDetail={this.closeDetail}*/}
            {/*         data={this.props.IntentionData}*/}
            {/*         accountState={this.state.accountState}*/}
            {/*	/>*/}
            {/*</TabPane>: ""}*/}
            <TabPane tab="客户跟进" key="4">
              <Visit
                isLimit={this.props.isLimit}
                isGuidanceLv={this.props.isGuidanceLv}
                isEditGuidanceLv={this.props.isEditGuidanceLv}
                categoryArr={this.props.categoryArr}
                closeDetail={this.closeDetail}
                data={this.props.IntentionData}
                visitState={this.state.visitState}
              />
            </TabPane>
            <TabPane tab="业务意向" key="5">
              <Business
                closeDetail={this.closeDetail}
                data={this.props.IntentionData}
                businessState={this.state.businessState}
              />
            </TabPane>
          </Tabs>
        </Modal> : <div />}
      </div>
    )
  }
})
export default IntentionDetail;