kede-client/js/component/manageCenter/customer/NEW/signCustomer/intentionDetail/detail/contactPerson.jsx

import React from "react";
import {
  Table,
  Button,
  Spin,
  message,
  Alert,
  Modal,
  Input,
  InputNumber,
} from "antd";
import $ from "jquery/src/ajax";
import EnterpriseNameChange from "../../../../../../common/enterpriseNameChange";
import AddContact from "../../followDetail/addContact";
import "./index.less"
const { TextArea } = Input;

const ContactPerson = React.createClass({
  getInitialState() {
    return {
      upType: 0,
      visible: false,
      upData: {},
      detail: {},
      loading: false,
      addcontactModul: false,
      ContactsLists: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "联系人部门",
          dataIndex: "department",
          key: "department",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "联系人职务",
          dataIndex: "position",
          key: "position",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "主要联系人",
          dataIndex: "major",
          width: 100,
          key: "major",
          render: text => {
            return text == 1 ? "是" : "否";
          }
        },
        {
          title: "地区",
          dataIndex: "cityName",
          key: "cityName",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "手机号码",
          dataIndex: "mobile",
          key: "mobile",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "座机",
          dataIndex: "fixedTel",
          key: "fixedTel",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "微信",
          dataIndex: "wechat",
          key: "wechat",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "联系人QQ",
          dataIndex: "qq",
          key: "qq",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "电子邮箱",
          dataIndex: "email",
          key: "email",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "更新时间",
          dataIndex: "createTimes",
          key: "createTimes",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "跟进人",
          dataIndex: "aname",
          key: "aname",
          render: (text, record, index) => {
            if (record.id) return <div>{text}</div>
          }
        },
        {
          title: "操作",
          dataIndex: "dels",
          key: "dels",
          render: (text, record, index) => {
            return (
              <div>
                {/* 禁止管理员删除联系人 */}
                {/* {adminData.isSuperAdmin || !record.id? (
                  <Popconfirm
                    title="是否删除?"
                    onConfirm={e => {
                      this.confirmDelet(record);
                    }}
                    okText="删除"
                    cancelText="不删除"
                  >
                    <Button
                      style={{
                        marginRight: "10px",
                        color: "#ffffff",
                        background: "#f00",
                        border: "none"
                      }}
                    >
                      删除
                    </Button>
                  </Popconfirm>
                ) : (
                  ""
                )} */}
                {record.major != 1 ? (
                  <Button
                    style={{
                      marginRight: "10px",
                      color: "#ffffff",
                      background: "green",
                      border: "none"
                    }}
                    onClick={e => {
                      e.stopPropagation(), this.mainContact(record);
                    }}
                  >
                    设为主要联系人
                  </Button>
                ) : (
                  ""
                )}
              </div>
            );
          }
        }
      ]
    };
  },
  //tab2删除
  confirmDelet(e) {
    this.setState({
      loading: true
    });
    if (e.id) {
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/customer/deleteOneContact",
        data: {
          ocbId: e.id //删除的ID
        }
      }).done(
        function (data) {
          if (!data.error.length) {
            message.success("删除成功！");
            this.setState({
              loading: false
            });
          } else {
            message.warning(data.error[0].message);
          }
          this.contactLists();
        }.bind(this)
      );
    } else {
      this.contactLists();
    }
  },
  //选择主要联系人
  mainContact(record) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/updateMainContact",
      data: {
        uid: this.props.data.id,
        ocbId: record.id
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success('设为主要联系人成功！');
        this.setState({
          loading: false,
        });
      } else {
        message.warning(data.error[0].message);
      };
      this.contactLists();
    }.bind(this));
    this.state.contactList.forEach(item => {
      item.major = 0;
    });
    record.major = 1;
    // console.log(record);
    this.setState({
      contactList: this.state.contactList
    });
  },
  //tab2获取联系人详情
  contactLists(ids) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
      data: {
        uid: ids || this.props.data.id //名称1
      },
      success: function (data) {
        let theArr = [];
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.length; i++) {
            let thisdata = data.data[i];
            theArr.push({
              key: i,
              id: thisdata.id,
              name: thisdata.name,
              mobile: thisdata.mobile,
              email: thisdata.email,
              qq: thisdata.qq,
              wechat: thisdata.wechat,
              department: thisdata.department,
              position: thisdata.position,
              major: thisdata.major,
              createTimes: thisdata.createTimes,
              fixedTel: thisdata.fixedTel,
              aname: thisdata.aname,
              cityName: thisdata.provinceName + thisdata.cityName + thisdata.areaName
            });
          }
        }
        this.setState({
          contactList: theArr
        });
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  //新增
  //tab2新增联系人
  addcontact() {
    this.setState({
      addcontactModul: true
    });
  },
  componentWillMount() {
    this.contactLists(this.props.data.id);
    this.queryByUid(this.props.data.id)
  },
  detailsModal() {
    this.props.closeDetail(false, false);
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.data.id && nextProps.contactState) {
      this.contactLists(nextProps.data.id);
    }
  },
  // 查询企业信息
  queryByUid() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/userArchives/queryByUid",
      data: {
        id: this.props.data.id,
      },
      success: function (data) {
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          this.setState({
            detail: data.data
          })
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  // 修改
  update() {
    const { upData } = this.state
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/userArchives/update",
      data: upData,
      success: function (data) {
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          message.success("修改成功！")
          this.queryByUid()
          this.setState({
            visible: false
          })
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  onUpCancel() {
    this.setState({
      visible: false
    })
  },

  render() {
    const { detail, upType, upData } = this.state
    return (
      <div>
        <div className="clearfix">
          <Alert message="注：已保存信息不可修改，可新增正确的信息并设置为主要联系人" banner />
          <span
            style={{
              fontSize: 14,
              fontWeight: "bold",
              marginTop: 20,
              display: "inline-block",
            }}
          >
            公司名称：{this.state.enterpriseName ? this.state.enterpriseName : this.props.name}
            <EnterpriseNameChange
              type='modify'
              changeOtherInfor
              style={{ marginLeft: '20px' }}
              enterpriseId={this.props.data.uid}
              enterpriseName={this.props.name}
              data={this.props.data}
              onCancel={this.props.onCancel}
              onChangeSuccess={(value) => {
                this.setState({
                  enterpriseName: value
                })
              }} />
          </span>
          <Button
            className="ContactsList"
            type="primary"
            onClick={this.addcontact}
          >
            新增联系人
          </Button>
        </div>
        <div className="clearfix">
          <Spin spinning={this.state.loading}>
            <Table
              size="middle"
              pagination={false}
              columns={this.state.ContactsLists}
              dataSource={this.state.contactList}
            />
          </Spin>
        </div>

        <div style={{
          fontSize: 14,
          marginTop: 20,
        }}>
          <div style={{ fontWeight: "bold", marginBottom: 5, color: "#58A3FF" }}>企业情况及前期准备工作</div>
          <div style={{ fontWeight: "bold", marginTop: 10 }}>
            1.知识产权情况&nbsp;&nbsp;
            <Button
              type="primary"
              onClick={() => {
                this.setState({
                  visible: true,
                  upType: 1,
                  upData: {
                    uid: this.props.data.id,
                    id: detail.id || undefined,
                    inventionPatentCount: detail.inventionPatentCount,
                    utilityModelCount: detail.utilityModelCount,
                    appearancePatentCount: detail.appearancePatentCount,
                    softwareWorksCount: detail.softwareWorksCount,
                    otherCount: detail.otherCount,
                  }
                })
              }}
            >
              修改
            </Button>
          </div>
          <div style={{ fontSize: 12, }}>
            专利总数&nbsp;{detail.patentCount || 0}&nbsp;&nbsp;&nbsp;&nbsp;
            发明专利&nbsp;{detail.inventionPatentCount || 0}&nbsp;&nbsp;&nbsp;&nbsp;
            实用新型&nbsp;{detail.utilityModelCount || 0}&nbsp;&nbsp;&nbsp;&nbsp;
            外观专利&nbsp;{detail.appearancePatentCount || 0}&nbsp;&nbsp;&nbsp;&nbsp;
            软著&nbsp;{detail.softwareWorksCount || 0}&nbsp;&nbsp;&nbsp;&nbsp;
            其他&nbsp;{detail.otherCount || 0}&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div style={{ fontWeight: "bold", marginTop: 10 }}>
            2.财务数据<span style={{ color: "red" }}>（包括营收、税收、资产、研发费用等）</span>&nbsp;&nbsp;
            <Button
              type="primary"
              onClick={() => {
                this.setState({
                  visible: true,
                  upType: 2,
                  upData: {
                    uid: this.props.data.id,
                    id: detail.id || undefined,
                    financialData: detail.financialData,
                  }
                })
              }}
            >
              修改
            </Button>
          </div>
          <div style={{ fontSize: 12, }}>{detail.financialData || "无"}</div>
          <div style={{ fontWeight: "bold", marginTop: 10 }}>
            3.前期沟通<span style={{ color: "red" }}>（客户的难处、需求）</span>&nbsp;&nbsp;
            <Button
              type="primary"
              onClick={() => {
                this.setState({
                  visible: true,
                  upType: 3,
                  upData: {
                    uid: this.props.data.id,
                    id: detail.id || undefined,
                    earlyCommunication: detail.earlyCommunication,
                  }
                })
              }}
            >
              修改
            </Button>
          </div>
          <div style={{ fontSize: 12, }}>{detail.earlyCommunication || "无"}</div>
          <div style={{ fontWeight: "bold", marginTop: 10 }}>
            4.面谈思路及目的&nbsp;&nbsp;
            <Button
              type="primary"
              onClick={() => {
                this.setState({
                  visible: true,
                  upType: 4,
                  upData: {
                    uid: this.props.data.id,
                    id: detail.id || undefined,
                    interviewIdeas: detail.interviewIdeas,
                  }
                })
              }}
            >
              修改
            </Button>
          </div>
          <div style={{ fontSize: 12, }}>{detail.interviewIdeas || "无"}</div>
        </div>

        <AddContact
          addcontactModul={this.state.addcontactModul}
          uids={this.props.data.id}
          closeFollow={() => {
            this.setState({
              addcontactModul: false
            }, () => {
              this.contactLists()
            })
          }}
        />
        <Modal
          footer={null}
          maskClosable={false}
          width="400px"
          title='信息修改'
          visible={this.state.visible}
          onCancel={this.onUpCancel}
        >
          <div>
            {
              upType == 1 &&
              <div>
                <div className='enterpriseNameItem'>
                  <div className='enterpriseNameTitle'>发明专利:</div>
                  <div className='enterpriseNameValue'>
                    <InputNumber
                      value={upData.inventionPatentCount || 0}
                      onChange={e => {
                        this.setState({
                          upData: Object.assign(upData, {
                            inventionPatentCount: e,
                          }),
                        })
                      }}
                    />
                  </div>
                </div>
                <div className='enterpriseNameItem'>
                  <div className='enterpriseNameTitle'>实用新型:</div>
                  <div className='enterpriseNameValue'>
                    <InputNumber
                      value={upData.utilityModelCount || 0}
                      onChange={e => {
                        this.setState({
                          upData: Object.assign(upData, {
                            utilityModelCount: e,
                          }),
                        })
                      }}
                    />
                  </div>
                </div>
                <div className='enterpriseNameItem'>
                  <div className='enterpriseNameTitle'>外观专利:</div>
                  <div className='enterpriseNameValue'>
                    <InputNumber
                      value={upData.appearancePatentCount || 0}
                      onChange={e => {
                        this.setState({
                          upData: Object.assign(upData, {
                            appearancePatentCount: e,
                          }),
                        })
                      }}
                    />
                  </div>
                </div>
                <div className='enterpriseNameItem'>
                  <div className='enterpriseNameTitle'>软著:</div>
                  <div className='enterpriseNameValue'>
                    <InputNumber
                      value={upData.softwareWorksCount || 0}
                      onChange={e => {
                        this.setState({
                          upData: Object.assign(upData, {
                            softwareWorksCount: e,
                          }),
                        })
                      }}
                    />
                  </div>
                </div>
                <div className='enterpriseNameItem'>
                  <div className='enterpriseNameTitle'>其他:</div>
                  <div className='enterpriseNameValue'>
                    <InputNumber
                      value={upData.otherCount || 0}
                      onChange={e => {
                        this.setState({
                          upData: Object.assign(upData, {
                            otherCount: e,
                          }),
                        })
                      }}
                    />
                  </div>
                </div>
              </div>
            }
            {
              upType == 2 &&
              <div>
                <div className='enterpriseNameItem'>
                  <div className='enterpriseNameTitle'>财务数据:</div>
                  <div className='enterpriseNameValue'>
                    <TextArea
                      style={{ width: "250px" }}
                      rows={4}
                      value={upData.financialData}
                      onChange={e => {
                        this.setState({
                          upData: Object.assign(upData, {
                            financialData: e.target.value,
                          }),
                        })
                      }}
                    />
                  </div>
                </div>
              </div>
            }
            {
              upType == 3 &&
              <div>
                <div className='enterpriseNameItem'>
                  <div className='enterpriseNameTitle'>前期沟通:</div>
                  <div className='enterpriseNameValue'>
                    <TextArea
                      style={{ width: "250px" }}
                      rows={4}
                      value={upData.earlyCommunication}
                      onChange={e => {
                        this.setState({
                          upData: Object.assign(upData, {
                            earlyCommunication: e.target.value,
                          }),
                        })
                      }}
                    />
                  </div>
                </div>
              </div>
            }
            {
              upType == 4 &&
              <div>
                <div className='enterpriseNameItem'>
                  <div className='enterpriseNameTitle'>面谈思路及目的:</div>
                  <div className='enterpriseNameValue'>
                    <TextArea
                      style={{ width: "250px" }}
                      rows={4}
                      value={upData.interviewIdeas}
                      onChange={e => {
                        this.setState({
                          upData: Object.assign(upData, {
                            interviewIdeas: e.target.value,
                          }),
                        })
                      }}
                    />
                  </div>
                </div>
              </div>
            }

            <div>
              <Button type='primary'
                onClick={this.update}
              >
                确定修改
              </Button>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
});
export default ContactPerson;