kede-client/js/component/manageCenter/channelList/channelunit/detail/contactPerson.jsx

import React from "react";
import {
  Table,
  Button,
  Spin,
  message,
  Popconfirm,
  Alert,
  Modal,
  Input,
  Cascader,
  Select,
  InputNumber,
  AutoComplete,
  Tag
} from "antd";
import $ from "jquery/src/ajax";
import AddContact from "../../../customer/NEW/signCustomer/followDetail/addContact";
import "./index.less";
import { areaSelect, getProvince } from "@/NewDicProvinceList";

const TextArea = Input.TextArea;
const Option = Select.Option;

const ContactPerson = React.createClass({
  getInitialState() {
    return {
      major: 0,
      loading: false,
      addcontactModul: false,
      enterpriseName: "",
      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 (
              !this.props.isCustomerAdmin && (
                <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>
              )
            );
          },
        },
      ],
      channeOb: [
        { name: "民主党派", val: 2 },
        { name: "园区", val: 3 },
        { name: "民间组织", val: 4 },
        { name: "战略合作单位", val: 5 },
        { name: "其他", val: 1 },
      ],
      visible: "", //修改弹窗状态
      name: "",
      locationProvince: "",
      introduction: "",
      newname: "",
      dataArrar: [],
      newintroduction: "",
      newtype: 0,
      enterpriseCount: 0,
      channelIndicators: "",
      cooperationProjects: [],
    };
  },
  //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() {
    const { data } = this.props
    this.contactLists(this.props.data.id);
    this.setState({
      name: this.props.name,
      locationProvince: (data.province || "") + (!data.city ? "" : "-") + (data.city || "") + (!data.area ? "" : "-") + (data.area || ""),
      introduction: this.props.data.introduction,
      type: this.props.data.type,
      enterpriseCount: this.props.data.enterpriseCount,
      channelIndicators: this.props.data.channelIndicators,
      intendedProject: this.props.data.intendedProject,
    });
    this.queryByUid(this.props.data.id)
  },
  componentWillReceiveProps(nextProps) {
    // if (nextProps.data.id && nextProps.contactState) {
    if (nextProps.data.id) {
      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({
            interviewDistribution: data.data.interviewDistribution,
            interviewIdeas: data.data.interviewIdeas,
            // detail: data.data
          })
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },

  supervisor(value) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
      data: {
        businessName: value
      },
      success: function (data) {
        let thedata = data.data;
        if (data.error.length === 0) {
          this.setState({
            cooperationProjects: thedata,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    );
  },
  onSelect(value) {
    let arr = this.state.cooperationProjects.filter(v => v.id === value);
    let arr1 = this.state.dataArrar.filter(v => v.value === value);
    if (arr.length > 0) {
      if (arr1.length > 0) {
        message.warning('选项已存在');
      } else {
        this.state.dataArrar.push({
          label: arr[0].bname,
          value: arr[0].id,
        })
        this.setState({
          dataArrar: this.state.dataArrar
        })
      }
    }
  },
  // 修改渠道名称
  onOk() {
    if (!this.state.newname) {
      message.warning("请输入渠道名称");
      return;
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      url: globalConfig.context + "/api/admin/customer/updateUserName",
      method: "post",
      data: {
        uid: this.props.data.id,
        userName: this.state.newname,
      },
    }).done(
      function (data) {
        this.setState({
          loading: false,
        });
        if (data.error.length === 0) {
          message.success("恭喜您，更名成功！");
          this.setState({
            visible: "",
            name: this.state.newname,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  },
  // 修改信息
  updateDate() {
    const { dataArrar, visible, newintroduction, newtype, newenterpriseCount, newchannelIndicators, newinterviewIdeas, newinterviewDistribution } = this.state;
    if (dataArrar.length === 0 && visible == "city") {
      message.warning("请选择省-市-区");
      return;
    }
    if (!newintroduction && visible == "introduction") {
      message.warning("请输入简介");
      return;
    }
    if (newtype == 0 && visible == "type") {
      message.warning("请选择渠道类别");
      return;
    }
    if (!newenterpriseCount && newenterpriseCount != 0 && visible == "enterpriseCount") {
      message.warning("请输入渠道覆盖企业数");
      return;
    }
    if (!newchannelIndicators && visible == "channelIndicators") {
      message.warning("请输入渠道考核标准");
      return;
    }
    if (dataArrar.length == 0 && visible == "intendedProject") {
      message.warning("请输入面谈项目");
      return;
    }
    if (!newinterviewIdeas && visible == "interviewIdeas") {
      message.warning("请输入面谈思路及目的");
      return;
    }
    if (!newinterviewDistribution && visible == "interviewDistribution") {
      message.warning("请输入我方主要面谈及分工");
      return;
    }
    this.setState({
      loading: true,
    });
    let data = {
      uid: this.props.data.id,
    };
    if (visible == "city") {
      data.province = dataArrar[0] || undefined;
      data.city = dataArrar[1] || undefined;
      data.area = dataArrar[2] || undefined;
    }
    if (visible == "introduction") {
      data.introduction = newintroduction;
    }
    if (visible == "type") {
      data.channelType = newtype;
    }
    if (visible == "enterpriseCount") {
      data.enterpriseCount = newenterpriseCount;
    }
    if (visible == "channelIndicators") {
      data.channelIndicators = newchannelIndicators
    }
    if (visible == "intendedProject") {
      let arr = [];
      for (let i of dataArrar) {
        arr.push(i.label)
      }
      data.intendedProject = arr.join(',')
    }
    if (visible == "interviewIdeas") {
      data.interviewIdeas = newinterviewIdeas
    }
    if (visible == "interviewDistribution") {
      data.interviewDistribution = newinterviewDistribution
    }
    $.ajax({
      url: globalConfig.context +
        visible == "channelIndicators"
        ? "/api/admin/userArchives/update" : visible == "enterpriseCount"
          ? "/api/admin/userArchives/update" : visible == "interviewIdeas"
            ? "/api/admin/userArchives/update" : visible == "interviewDistribution"
              ? "/api/admin/userArchives/update" : "/api/admin/customer/updateUserDate",
      method: "post",
      data: data,
    }).done(
      function (data) {
        this.setState({
          loading: false,
        });
        if (data.error.length === 0) {
          message.success("恭喜您，更改成功！");
          this.setState({
            visible: "",
          });
          if (visible == "city") {
            this.setState({
              locationProvince: getProvince(
                dataArrar[0],
                dataArrar[1],
                dataArrar[2]
              ),
            });
          }
          if (visible == "introduction") {
            this.setState({
              introduction: newintroduction,
            });
          }
          if (visible == "type") {
            this.setState({
              type: newtype,
            });
          }
          if (visible == "enterpriseCount") {
            this.setState({
              enterpriseCount: newenterpriseCount,
            });
          }
          if (visible == "channelIndicators") {
            this.setState({
              channelIndicators: newchannelIndicators,
            });
          }
          if (visible == "intendedProject") {
            let arr = [];
            for (let i of dataArrar) {
              arr.push(i.label)
            }
            this.setState({
              intendedProject: arr.join(',')
            })
          }
          if (visible == "interviewIdeas") {
            this.setState({
              interviewIdeas: newinterviewIdeas,
            });
          }
          if (visible == "interviewDistribution") {
            this.setState({
              interviewDistribution: newinterviewDistribution,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  },

  handleCloseCooperation(removedTag) {
    let dataArrar = this.state.dataArrar.filter(tag => { return tag.value !== removedTag.value });
    this.setState({ dataArrar });
  },

  render() {
    const { visible } = this.state;
    return (
      <div>
        <div className="clearfix">
          <Alert
            message="注：已保存信息不可修改，可新增正确的信息并设置为主要联系人"
            banner
          />
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              margin: "30px 60px 30px 0px",
            }}
          >
            <div
              style={{
                fontSize: 14,
                fontWeight: "bold",
              }}
            >
              <div style={{ padding: "5px 0" }}>
                <span>渠道名称：{this.state.name}</span>
                <Button
                  type="primary"
                  style={{ marginLeft: "20px" }}
                  onClick={() => {
                    this.setState({
                      visible: "name",
                      newname: "",
                    });
                  }}
                >
                  渠道更名
                </Button>
              </div>
              <div style={{ padding: "5px 0" }}>
                <span>
                  渠道类别：{[
                    "",
                    "其他",
                    "民主党派",
                    "园区",
                    "民间组织",
                    "战略合作单位",
                  ][this.state.type]}
                </span>
                <Button
                  type="primary"
                  style={{ marginLeft: "20px" }}
                  onClick={() => {
                    this.setState({
                      visible: "type",
                      newtype: "",
                    });
                  }}
                >
                  修改
                </Button>
              </div>
              <div style={{ padding: "5px 0" }}>
                <span>
                  省-市-区：
                  {this.state.locationProvince}
                </span>
                <Button
                  type="primary"
                  style={{ marginLeft: "20px" }}
                  onClick={() => {
                    this.setState({
                      visible: "city",
                      dataArrar: [],
                    });
                  }}
                >
                  修改
                </Button>
              </div>
              <div style={{ padding: "5px 0" }}>
                <span>渠道简介：{this.state.introduction}</span>
                <Button
                  type="primary"
                  style={{ marginLeft: "20px" }}
                  onClick={() => {
                    this.setState({
                      visible: "introduction",
                      newintroduction: "",
                    });
                  }}
                >
                  修改
                </Button>
              </div>
              <div style={{ padding: "5px 0" }}>
                <span>渠道覆盖企业数：{this.state.enterpriseCount}</span>
                <Button
                  type="primary"
                  style={{ marginLeft: "20px" }}
                  onClick={() => {
                    this.setState({
                      visible: "enterpriseCount",
                      newenterpriseCount: "",
                    });
                  }}
                >
                  修改
                </Button>
              </div>
              <div style={{ padding: "5px 0" }}>
                <span>渠道考核指标：{this.state.channelIndicators}</span>
                <Button
                  type="primary"
                  style={{ marginLeft: "20px" }}
                  onClick={() => {
                    this.setState({
                      visible: "channelIndicators",
                      newchannelIndicators: "",
                    });
                  }}
                >
                  修改
                </Button>
              </div>
            </div>
            <Button
              className="ContactsList"
              type="primary"
              onClick={this.addcontact}
            >
              新增联系人
            </Button>
          </div>
        </div>
        <div className="clearfix">
          <Spin spinning={this.state.loading}>
            <Table
              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 }}>
            面谈项目&nbsp;&nbsp;&nbsp;&nbsp;
            {
              !this.props.isCustomerAdmin &&
              <Button
                type="primary"
                onClick={() => {
                  this.setState({
                    visible: "intendedProject",
                    dataArrar: [],
                  })
                }}
              >
                修改
              </Button>
            }
          </div>
          <div style={{ fontSize: 12, }}>{this.state.intendedProject || "无"}</div>
          <div style={{ fontWeight: "bold", marginTop: 10 }}>
            面谈思路及目的&nbsp;&nbsp;&nbsp;&nbsp;
            {
              !this.props.isCustomerAdmin &&
              <Button
                type="primary"
                onClick={() => {
                  this.setState({
                    visible: "interviewIdeas",
                    newinterviewIdeas: "",
                  })
                }}
              >
                修改
              </Button>
            }
          </div>
          <div style={{ fontSize: 12, }}>{this.state.interviewIdeas || "无"}</div>
          <div style={{ fontWeight: "bold", marginTop: 10 }}>
            我方主要面谈人及分工&nbsp;&nbsp;&nbsp;&nbsp;
            {
              !this.props.isCustomerAdmin &&
              <Button
                type="primary"
                onClick={() => {
                  this.setState({
                    visible: "interviewDistribution",
                    newinterviewDistribution: "",
                  })
                }}
              >
                修改
              </Button>
            }
          </div>
          <div style={{ fontSize: 12, }}>{this.state.interviewDistribution || "无"}</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={300}
          title={"信息修改"}
          visible={visible != ""}
          onCancel={() => {
            this.setState({
              visible: "",
            });
          }}
        >
          <div>
            {visible == "name" && (
              <div className="enterpriseNameContent">
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改前:</div>
                  <div className="enterpriseNameValue">{this.state.name}</div>
                </div>
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改后:</div>
                  <div className="enterpriseNameValue">
                    <Input
                      value={this.state.newname}
                      onChange={(e) => {
                        this.setState({
                          newname: e.target.value,
                        });
                      }}
                    />
                  </div>
                </div>
              </div>
            )}
            {visible == "city" && (
              <div className="enterpriseNameContent">
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改前:</div>
                  <div className="enterpriseNameValue">
                    {this.state.locationProvince}
                  </div>
                </div>
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改后:</div>
                  <div className="enterpriseNameValue">
                    <Cascader
                      options={areaSelect()}
                      placeholder="选择城市"
                      onChange={(e, pre) => {
                        this.setState({
                          dataArrar: e,
                        });
                      }}
                    />
                  </div>
                </div>
              </div>
            )}
            {visible == "introduction" && (
              <div className="enterpriseNameContent">
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改前:</div>
                  <div className="enterpriseNameValue">
                    {this.state.introduction}
                  </div>
                </div>
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改后:</div>
                  <div className="enterpriseNameValue">
                    <TextArea
                      style={{ width: "200px" }}
                      value={this.state.newintroduction}
                      onChange={(e) => {
                        this.setState({
                          newintroduction: e.target.value,
                        });
                      }}
                    />
                  </div>
                </div>
              </div>
            )}
            {visible == "type" && (
              <div className="enterpriseNameContent">
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改前:</div>
                  <div className="enterpriseNameValue">
                    {[
                      "",
                      "其他",
                      "民主党派",
                      "园区",
                      "民间组织",
                      "战略合作单位",
                    ][this.state.type]}</div>
                </div>
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改后:</div>
                  <div className="enterpriseNameValue">
                    <Select
                      style={{ width: 165 }}
                      placeholder="请选择"
                      value={this.state.newtype == 0 ? undefined : this.state.newtype}
                      onChange={(e) => {
                        this.setState({
                          newtype: e,
                        });
                      }}
                    >
                      {this.state.channeOb.map(it => (
                        <Option key={it.val}>{it.name}</Option>
                      ))}
                    </Select>
                  </div>
                </div>
              </div>
            )}
            {visible == "enterpriseCount" && (
              <div className="enterpriseNameContent">
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改前:</div>
                  <div className="enterpriseNameValue">{this.state.enterpriseCount}</div>
                </div>
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改后:</div>
                  <div className="enterpriseNameValue">
                    <InputNumber
                      value={this.state.newenterpriseCount}
                      onChange={(e) => {
                        this.setState({
                          newenterpriseCount: e,
                        });
                      }}
                    />
                  </div>
                </div>
              </div>
            )}
            {visible == "channelIndicators" && (
              <div className="enterpriseNameContent">
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改前:</div>
                  <div className="enterpriseNameValue">
                    {this.state.channelIndicators}
                  </div>
                </div>
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改后:</div>
                  <div className="enterpriseNameValue">
                    <TextArea
                      style={{ width: "200px" }}
                      value={this.state.newchannelIndicators}
                      onChange={(e) => {
                        this.setState({
                          newchannelIndicators: e.target.value,
                        });
                      }}
                    />
                  </div>
                </div>
              </div>
            )}
            {visible == "intendedProject" && (
              <div className="enterpriseNameContent">
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">意向合作项目:</div>
                  <div className="enterpriseNameValue">
                    {this.state.intendedProject}
                  </div>
                </div>
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改后:</div>
                  <div className="enterpriseNameValue">
                    <div style={{ paddingBottom: this.state.dataArrar.length === 0 ? 0 : '10px' }}>
                      {this.state.dataArrar.map((tag, index) => {
                        const isLongTag = tag.label.length > 20;
                        const tagElem = (
                          <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
                            {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
                          </Tag>
                        );
                        return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
                      })}
                    </div>
                    <div>
                      <AutoComplete
                        style={{ width: 200 }}
                        onSearch={this.supervisor}
                        onSelect={this.onSelect}
                        placeholder="请输入关键字"
                      >
                        {
                          this.state.cooperationProjects.map(function (item) {
                            return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
                          })
                        }
                      </AutoComplete>
                    </div>
                  </div>
                </div>
              </div>
            )}
            {visible == "interviewIdeas" && (
              <div className="enterpriseNameContent">
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改前:</div>
                  <div className="enterpriseNameValue">
                    {this.state.interviewIdeas}
                  </div>
                </div>
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改后:</div>
                  <div className="enterpriseNameValue">
                    <TextArea
                      style={{ width: "200px" }}
                      value={this.state.newinterviewIdeas}
                      onChange={(e) => {
                        this.setState({
                          newinterviewIdeas: e.target.value,
                        });
                      }}
                    />
                  </div>
                </div>
              </div>
            )}
            {visible == "interviewDistribution" && (
              <div className="enterpriseNameContent">
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改前:</div>
                  <div className="enterpriseNameValue">
                    {this.state.interviewDistribution}
                  </div>
                </div>
                <div className="enterpriseNameItem">
                  <div className="enterpriseNameTitle">更改后:</div>
                  <div className="enterpriseNameValue">
                    <TextArea
                      style={{ width: "200px" }}
                      value={this.state.newinterviewDistribution}
                      onChange={(e) => {
                        this.setState({
                          newinterviewDistribution: e.target.value,
                        });
                      }}
                    />
                  </div>
                </div>
              </div>
            )}
            <Popconfirm
              placement="top"
              title="确定要修改吗?"
              onConfirm={(e) => {
                e.stopPropagation();
                visible == "name" ? this.onOk() : this.updateDate();
              }}
              okText="确定"
              cancelText="取消"
            >
              <Button type="primary">确定修改</Button>
            </Popconfirm>
          </div>
        </Modal>
      </div>
    );
  },
});
export default ContactPerson;