import React from "react";
import $ from "jquery/src/ajax";
import moment from "moment";
import "@/manageCenter/financialManage/distribute/public.less";
import { ChooseList } from "../../order/orderNew/chooseList";
import { citySelect, provinceList, areaSelect, Birthplace } from "@/areaList";
import ReactToPrint from "react-to-print";
import "./personnelList.less"
import {
  Button,
  Form,
  Input,
  Select,
  Spin,
  Table,
  message,
  Modal,
  Tabs,
  Tag,
  RangePicker,
  DatePicker,
  Radio,
  Cascader,
  Upload,
  Tooltip,
} from "antd";
import { splitUrl } from "@/tools";
import { getProvinceList } from "@/addressList";
import PicModal from "./picModal"
import AddPicModal from "./addPicModal";
const FormItem = Form.Item;
const { TabPane } = Tabs;
const { TextArea } = Input;
const PersonnelAll = React.createClass({
  loadData(pageNo) {
    this.state.data = [];
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/selectList",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        name: this.state.nameSearch,
        status: this.state.statusSearch,
        company: this.state.departmenttList,
        sex: this.state.sexSearch,
        marriage: this.state.marriageSearch,
        politicalOutlook: this.state.politicalOutlookSearch,
        birthdayMonth: this.state.birthdayMonthSearch,
        promotionStart: this.state.promotionTime[0],
        promotionEnd: this.state.promotionTime[1],
        entryStart: this.state.entryTime[0],
        entryStart: this.state.entryTime[1],
        quitStart: this.state.quitTime[0],
        quitEnd: this.state.quitTime[1],
        system: this.state.systemSearch,
        workingYears: this.state.workingYearsSearch,
        education: this.state.educationSearch,
        contractStart: this.state.contractTime[0],
        contractEnd: this.state.contractTime[1],
      },
      success: function (data) {
        let theArr = [];
        if (!data.data || !data.data.list) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.list.length; i++) {
            let thisdata = data.data.list[i];
            thisdata.key = thisdata.id;
            theArr.push(thisdata);
          }
        }
        this.state.pagination.current = data.data.pageNo;
        this.state.pagination.total = data.data.totalCount;
        if (data.data && data.data.list && !data.data.list.length) {
          this.state.pagination.current = 0;
          this.state.pagination.total = 0;
        }
        this.setState({
          dataSource: theArr,
          pagination: this.state.pagination,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  getInitialState() {
    return {
      active: "1",
      detailFlag: false,
      editWelfareData: {},
      contractList: [],
      quitList: [],
      chooseList: [],
      starArr: [],
      starArrs: [],
      annexName: "",
      annexUrl: "",
      voucherUrl: [],
      ModalData: [],
      contractTime: [],
      contactList: [],
      quitTime: [],
      promotionList: [],
      promotionTime: [],
      entryTime: [],
      pic: [],
      previewImage: "",
      peoVisible: false,
      phoneVisible: false,
      isAddPeo: false,
      searchMore: true,
      stayVisible: false,
      assignVisible: false,
      releaseDate: [],
      residence: [],
      nativePlace: [],
      now: [],
      roleName: "",
      shouKuanDate: [],
      boHuivisible: false,
      departmentArr: [],
      selectedRowKeys: [],
      selectedRows: [],
      paginations: false,
      loading: false,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      columns: [
        {
          title: "员工编号",
          dataIndex: "employeeId",
          key: "employeeId",
        },
        {
          title: "门禁编号",
          dataIndex: "doorId",
          key: "doorId",
        },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "员工状态",
          dataIndex: "statusName",
          key: "statusName",
        },
        {
          title: "所属系统",
          dataIndex: "systemName",
          key: "systemName",
        },
        {
          title: "公司名称",
          dataIndex: "depName",
          key: "depName",
        },
        {
          title: "职位名称",
          dataIndex: "jobsName",
          key: "jobsName",
        },
        {
          title: "等级名称",
          dataIndex: "starName",
          key: "starName",
        },
        {
          title: "级别",
          dataIndex: "lvlName",
          key: "lvlName",
        },
        {
          title: "入职时间",
          dataIndex: "entryTimes",
          key: "entryTimes",
        },
        {
          title: "转正时间",
          dataIndex: "promotionTimes",
          key: "promotionTimes",
          render: (text) => {
            let time = moment(text).valueOf();
            let today = Date.parse(new Date());
            let sevenDay = 604800000;
            if (time - today < sevenDay) {
              return (
                <span style={{ color: "red", fontWeight: 900 }}>{text}</span>
              );
            }
            return text;
          },
        },
        {
          title: "生日日期",
          dataIndex: "birthdays",
          key: "birthdays",
        },
        {
          title: "性别",
          dataIndex: "sex",
          key: "sex",
          render: (text) => {
            if (text == 0) {
              return "男";
            } else if (text == 1) {
              return "女";
            }
          },
        },
        {
          title: "婚姻状态",
          dataIndex: "marriageName",
          key: "marriageName",
        },
        {
          title: "子/女",
          dataIndex: "son",
          key: "son",
          render: (text, record) => {
            return <span>{text + "/" + record.girl}</span>;
          },
        },
        {
          title: "政治面貌",
          dataIndex: "politicalOutlookName",
          key: "politicalOutlookName",
        },
        {
          title: "教育经历",
          dataIndex: "educationName",
          key: "educationName",
        },
        {
          title: "毕业学校",
          dataIndex: "school",
          key: "school",
        },
        {
          title: "专业",
          dataIndex: "major",
          key: "major",
        },
        {
          title: "职称",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "晋升备注",
          dataIndex: "promotionRemarks",
          key: "promotionRemarks",
        },
        {
          title: "晋升时间",
          dataIndex: "promotionTime",
          key: "promotionTime",
        },
        {
          title: "合同时间",
          dataIndex: "contractStart",
          key: "contractStart",
          render: (text, record) => {
            let end = moment(record.contractEnd).valueOf();
            let today = Date.parse(new Date());
            let sevenDay = 604800000;
            if (text) {
              if (end - today < sevenDay) {
                return (
                  <span style={{ color: "red", fontWeight: 900 }}>
                    {text + "~" + record.contractEnd}
                  </span>
                );
              }
              return text + "~" + record.contractEnd;
            }
          },
        },
        {
          title: "手机号码",
          dataIndex: "mobile",
          key: "mobile",
        },
        {
          title: "电话",
          dataIndex: "fixedTel",
          key: "fixedTel",
        },
        {
          title: "身份证",
          dataIndex: "idCard",
          key: "idCard",
        },
        {
          title: "发证机构",
          dataIndex: "certificationAuthority",
          key: "certificationAuthority",
        },
        {
          title: "户籍地址",
          dataIndex: "residenceName",
          key: "residenceName",
        },
        {
          title: "籍贯",
          dataIndex: "nativePlaceName",
          key: "nativePlaceName",
        },
        {
          title: "现住地址",
          dataIndex: "nowName",
          key: "nowName",
        },
        {
          title: "紧急联系人",
          dataIndex: "emergencyContact",
          key: "emergencyContact",
        },
        {
          title: "紧急联系人电话",
          dataIndex: "emergencyMobile",
          key: "emergencyMobile",
        },
        {
          title: "离职时间",
          dataIndex: "quitTime",
          key: "quitTime",
        },
        {
          title: "工作年限",
          dataIndex: "workingYear",
          key: "workingYear",
        },
        {
          title: "年龄",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "出生月份",
          dataIndex: "month",
          key: "month",
        },
        {
          title: "参保时间",
          dataIndex: "insuranceStartTimes",
          key: "insuranceStartTimes",
        },
        {
          title: "停保时间",
          dataIndex: "insuranceEndTimes",
          key: "insuranceEndTimes",
        },
        {
          title: "公积金时间",
          dataIndex: "fundStartTimes",
          key: "fundStartTimes",
        },
        {
          title: "停办公积金时间",
          dataIndex: "fundEndTimes",
          key: "fundEndTimes",
        },
      ],
      dataSource: [],
      resVisible: false,
      welfareColumns: [
        {
          title: "福利类型",
          dataIndex: "type",
          key: "type",
          render: (text) => {
            if (text == 0) {
              return "社保";
            } else if (text == 1) {
              return "公积金";
            } else if (text == 2) {
              return "雇主险";
            }
          },
        },
        {
          title: "购买状态",
          dataIndex: "status",
          key: "status",
          render: (text) => {
            if (text == 0) {
              return "未购买";
            } else if (text == 1) {
              return "已购买";
            } else if (text == 2) {
              return "已停止";
            }
          },
        },
        {
          title: "购买时间",
          dataIndex: "startTimes",
          key: "startTimes",
        },
        {
          title: "停缴时间",
          dataIndex: "endTimes",
          key: "endTimes",
        },
        {
          title: "公司名称",
          dataIndex: "depName",
          key: "depName",
        },
        {
          title: "备注信息",
          dataIndex: "welfareRemarks",
          key: "welfareRemarks",
        },
      ],
      welfareColumnsEdit: [
        {
          title: "福利类型",
          dataIndex: "type",
          key: "type",
          render: (text) => {
            if (text == 0) {
              return "社保";
            } else if (text == 1) {
              return "公积金";
            } else if (text == 2) {
              return "雇主险";
            }
          },
        },
        {
          title: "购买状态",
          dataIndex: "status",
          key: "status",
          render: (text) => {
            if (text == 0) {
              return "未购买";
            } else if (text == 1) {
              return "已购买";
            } else if (text == 2) {
              return "已停止";
            }
          },
        },
        {
          title: "购买时间",
          dataIndex: "startTimes",
          key: "startTimes",
        },
        {
          title: "停缴时间",
          dataIndex: "endTimes",
          key: "endTimes",
        },
        {
          title: "公司名称",
          dataIndex: "depName",
          key: "depName",
        },
        {
          title: "备注信息",
          dataIndex: "welfareRemarks",
          key: "welfareRemarks",
        },
        {
          title: "操作",
          dataIndex: "caozuo",
          key: "caozuo",
          render: (text, record) => {
            return (
              <Button
                type="primary"
                onClick={(e) => {
                  this.welfareTable(record);
                }}
              >
                修改
              </Button>
            );
          },
        },
      ],
      table: [
        {
          key: "员工编号",
          value: "employeeId",
        },
        {
          key: "姓名",
          value: "name",
        },
        {
          key: "出生日期",
          value: "birthdays",
        },
        {
          key: "出生月份",
          value: "month",
        },
        {
          key: "门禁编号",
          value: "doorId",
        },
        {
          key: "性别",
          value: "sex",
          render: (e) => {
            if (e == 0) {
              return "男";
            } else if (e == 1) {
              return "女";
            }
          },
        },
        {
          key: "年龄",
          value: "age",
        },
        {
          key: "民族",
          value: "nation",
        },
        {
          key: "户籍地址",
          value: "residenceName",
        },
        {
          key: "籍贯",
          value: "nativePlaceName",
        },
        {
          key: "身份证",
          value: "idCard",
        },
        {
          key: "领证机关",
          value: "certificationAuthority",
        },
        {
          key: "现住地址",
          value: "nowName",
        },
        {
          key: "婚姻状态",
          value: "marriageName",
        },
        {
          key: "子/女",
          value: "son",
          render: (e, i) => {
            return e + "/" + i;
          },
        },
        {
          key: "政治面貌",
          value: "politicalOutlookName",
        },
      ],
    };
  },

  componentWillMount() {
    let areaArr = getProvinceList();
    let Area = areaSelect(areaArr);
    let Birthplaces = Birthplace(areaArr);
    this.setState({
      Area,
      Birthplaces: Birthplaces,
    });
    //城市
    let Province = [];
    areaArr.map(function (item) {
      var id = String(item.id);
      Province.push(
        <Select.Option value={id} key={item.name}>
          {item.name}
        </Select.Option>
      );
    });
    this.state.Provinces = Province;
    this.loadData();
    this.departmentList();
  },
  export() {
    const data = {
      pageSize: 9999999,
      name: this.state.nameSearch ? this.state.nameSearch : undefined,
      status: this.state.statusSearch ? this.state.statusSearch : undefined,
      company: this.state.departmenttList
        ? this.state.departmenttList
        : undefined,
      sex: this.state.sexSearch ? this.state.sexSearch : undefined,
      marriage: this.state.marriageSearch
        ? this.state.marriageSearch
        : undefined,
      politicalOutlook: this.state.politicalOutlookSearch
        ? this.state.politicalOutlookSearch
        : undefined,
      birthdayMonth: this.state.birthdayMonthSearch
        ? this.state.birthdayMonthSearch
        : undefined,
      promotionStart: this.state.promotionTime[0]
        ? this.state.promotionTime[0]
        : undefined,
      promotionEnd: this.state.promotionTime[1]
        ? this.state.promotionTime[1]
        : undefined,
      entryStart: this.state.entryTime[0] ? this.state.entryTime[0] : undefined,
      entryStart: this.state.entryTime[1] ? this.state.entryTime[1] : undefined,
      quitStart: this.state.quitTime[0] ? this.state.quitTime[0] : undefined,
      quitEnd: this.state.quitTime[1] ? this.state.quitTime[1] : undefined,
      system: this.state.systemSearch ? this.state.systemSearch : undefined,
      workingYears: this.state.workingYearsSearch
        ? this.state.workingYearsSearch
        : undefined,
      education: this.state.educationSearch
        ? this.state.educationSearch
        : undefined,
      contractStart: this.state.contractTime[0]
        ? this.state.contractTime[0]
        : undefined,
      contractEnd: this.state.contractTime[1]
        ? this.state.contractTime[1]
        : undefined,
    };
    for(let key in data) {
      if(!data[key]) {
        delete data[key]

      }
    }
    window.location.href =
      globalConfig.context +
      "/api/admin/personnel/exportPersonnelList?" +
      $.param(data);
  },
  departmentList() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id,
            });
          });
        }
        this.setState({
          departmentArr: theArr,
        });
      }.bind(this),
    });
  },

  welfareTable(record) {
    this.setState({
      editWelfareVisible: true,
    });
    if (record) {
      this.setState({
        editWelfareData: record,
      });
    } else {
      let editWelfareData = {
        status: undefined,
        id: undefined,
        depId: [],
        pdId: this.state.ModalData.id,
        type: undefined,
        welfareRemarks: undefined,
        endTimes: undefined,
        startTimes: undefined,
      };
      this.setState({
        editWelfareData
      });
    }
  },
  editWelfareDataOk() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/updateWelfare",
      data: {
        startTimes:
          this.state.editWelfareData.status == 1 ||
          this.state.editWelfareData.status == 2
            ? this.state.editWelfareData.startTimes
            : "",
        endTimes:
          this.state.editWelfareData.status == 2
            ? this.state.editWelfareData.endTimes
            : "",
        pdId: this.state.editWelfareData.pdId,
        welfareRemarks:
          this.state.editWelfareData.status == 0
            ? this.state.editWelfareData.welfareRemarks
            : "",
        type: this.state.editWelfareData.type,
        id: this.state.editWelfareData.id,
        status: this.state.editWelfareData.status,
        depId: this.state.editWelfareData.status == 0 ? "" : this.state.editWelfareData.depId,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("修改成功！");
          this.loadData();
          this.tableRowClick(this.state.ModalData);
          this.setState({
            editWelfareVisible: false,
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  getWelfareData() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/add",
      data: {
        name: this.state.name,
        doorId: this.state.doorId,
        sex: this.state.sex,
        nation: this.state.nation,
        residenceProvince: this.state.residence[0],
        residenceCity: this.state.residence[1],
        residenceArea: this.state.residence[2],
        residenceAddress: this.state.residenceAddress,
        nativePlaceProvince: this.state.nativePlace[0],
        nativePlaceCity: this.state.nativePlace[1],
        nowProvince: this.state.now[0],
        nowCity: this.state.now[1],
        nowArea: this.state.now[2],
        nowAddress: this.state.nowAddress,
        idCard: this.state.idCard,
        certificationAuthority: this.state.certificationAuthority,
        marriage: this.state.marriage,
        politicalOutlook: this.state.politicalOutlook,
        son: this.state.son,
        girl: this.state.girl,
        birthdays: this.state.birthdays,
        marriage: this.state.marriage,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("添加成功！");
          this.loadData();
          this.addPeoCancel();
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach((item) => {
      arr.forEach((val) => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr,
    });
  },
  addPeo() {
    this.setState({
      peoVisible: true,
      isAddPeo: true,
    });
  },
  addPeoCancel() {
    this.setState({
      id: undefined,
      peoVisible: false,
      isAddPeo: false,
      name: undefined,
      doorId: undefined,
      sex: undefined,
      nation: undefined,
      residence: [],
      residenceAddress: undefined,
      nativePlace: [],
      now: [],
      nowAddress: undefined,
      idCard: undefined,
      certificationAuthority: undefined,
      marriage: undefined,
      politicalOutlook: undefined,
      employeeId: undefined,
      son: undefined,
      girl: undefined,
      birthdays: undefined,
      marriage: undefined,
    });
  },
  verifyDoor() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/checkDoorId",
      data: {
        doorId: this.state.doorId,
        id: this.state.id,
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("此编号未被占用");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  verifyId() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/checkEmployeeId",
      data: {
        employeeId: this.state.employeeId,
        id: this.state.id
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("此编号未被占用");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  addOk() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/add",
      data: {
        name: this.state.name,
        doorId: this.state.doorId,
        sex: this.state.sex,
        nation: this.state.nation,
        residenceProvince: this.state.residence[0],
        residenceCity: this.state.residence[1],
        residenceArea: this.state.residence[2],
        residenceAddress: this.state.residenceAddress,
        nativePlaceProvince: this.state.nativePlace[0],
        nativePlaceCity: this.state.nativePlace[1],
        nowProvince: this.state.now[0],
        nowCity: this.state.now[1],
        nowArea: this.state.now[2],
        nowAddress: this.state.nowAddress,
        idCard: this.state.idCard,
        certificationAuthority: this.state.certificationAuthority,
        marriage: this.state.marriage,
        politicalOutlook: this.state.politicalOutlook,
        son: this.state.son,
        girl: this.state.girl,
        birthdays: this.state.birthdays,
        marriage: this.state.marriage,
        employeeId: this.state.employeeId,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("添加成功！");
          this.loadData();
          this.addPeoCancel();
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  editOk() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/update",
      data: {
        id: this.state.id,
        name: this.state.name,
        doorId: this.state.doorId,
        sex: this.state.sex,
        nation: this.state.nation,
        residenceProvince: this.state.residence[0],
        residenceCity: this.state.residence[1],
        residenceArea: this.state.residence[2],
        residenceAddress: this.state.residenceAddress,
        nativePlaceProvince: this.state.nativePlace[0],
        nativePlaceCity: this.state.nativePlace[1],
        nowProvince: this.state.now[0],
        nowCity: this.state.now[1],
        nowArea: this.state.now[2],
        nowAddress: this.state.nowAddress,
        idCard: this.state.idCard,
        certificationAuthority: this.state.certificationAuthority,
        marriage: this.state.marriage,
        politicalOutlook: this.state.politicalOutlook,
        son: this.state.son,
        girl: this.state.girl,
        birthdays: this.state.birthdays,
        employeeId: this.state.employeeId,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("修改成功！");
          this.loadData();
          this.tableRowClick(this.state.ModalData);
          this.addPeoCancel();
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  editPeo() {
    this.state.residence[0] = this.state.ModalData.residenceProvince;
    this.state.residence[1] = this.state.ModalData.residenceCity;
    this.state.residence[2] = this.state.ModalData.residenceArea;
    this.state.nativePlace[0] = this.state.ModalData.nativePlaceProvince;
    this.state.nativePlace[1] = this.state.ModalData.nativePlaceCity;
    this.state.now[0] = this.state.ModalData.nowProvince;
    this.state.now[1] = this.state.ModalData.nowCity;
    this.state.now[2] = this.state.ModalData.nowArea;
    this.setState({
      peoVisible: true,
      isAddPeo: false,
      id: this.state.ModalData.id,
      doorId: this.state.ModalData.doorId,
      name: this.state.ModalData.name,
      birthdays: this.state.ModalData.birthdays,
      sex: this.state.ModalData.sex,
      nation: this.state.ModalData.nation,
      residence: this.state.residence ? this.state.residence : [],
      residenceAddress: this.state.ModalData.residenceAddress,
      now: this.state.now ? this.state.now : [],
      nowAddress: this.state.ModalData.nowAddress,
      nativePlace: this.state.nativePlace ? this.state.nativePlace : [],
      idCard: this.state.ModalData.idCard,
      certificationAuthority: this.state.ModalData.certificationAuthority,
      marriage: this.state.ModalData.marriage,
      son: this.state.ModalData.son,
      girl: this.state.ModalData.girl,
      politicalOutlook: this.state.ModalData.politicalOutlook || this.state.ModalData.politicalOutlook == 0
        ? this.state.ModalData.politicalOutlook
        : undefined,
      marriage: this.state.ModalData.marriage,
      employeeId: this.state.ModalData.employeeId,
    });
  },
  stayModal(id) {
    this.setState({
      stayVisible: true,
    });
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/selectBypdId",
      data: {
        id: id,
      },
      success: function (data) {
        let res = data.data;
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.setState({
            id: res.id,
            status: res.status + "",
            system: res.system + "",
            jobNature: res.jobNature,
            jobNatureRemarks: res.jobNatureRemarks,
            age: res.age,
            entryTimes: res.entryTimes,
            promotionTimes: res.promotionTimes,
            company: res.company,
            lvl: res.lvl ? res.lvl + "" : [],
            jobs: res.jobs ? res.jobs + "" : [],
            star: res.star ? res.star + "" : [],
            allowance: res.allowance,
          });
          this.getList();
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  stayCancel() {
    this.setState({
      stayVisible: false,
    });
  },
  editStay() {
    if (this.state.star == "" || this.state.star == undefined) {
      message.warning("请选择星级");
      return;
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/update",
      data: {
        id: this.state.id,
        status: this.state.status,
        system: this.state.system,
        jobNature: this.state.jobNature,
        jobNatureRemarks: this.state.jobNatureRemarks,
        entryTimes: this.state.entryTimes,
        promotionTimes: this.state.promotionTimes,
        company: this.state.company,
        lvl: this.state.lvl,
        jobs: this.state.jobs,
        star: this.state.star,
        allowance: this.state.allowance,
      },
      success: function (data) {
        let res = data.data;
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.setState({
            stayVisible: false,
          });
          this.tableRowClick(this.state.ModalData);
          message.success("提交成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  phoneModal() {
    let obj = [
      {
        id: undefined,
        pdid: this.state.ModalData.id,
        emergencyContact: "",
        emergencyMobile: "",
      },
      {
        id: undefined,
        pdid: this.state.ModalData.id,
        emergencyContact: "",
        emergencyMobile: "",
      },
      {
        id: undefined,
        pdid: this.state.ModalData.id,
        emergencyContact: "",
        emergencyMobile: "",
      },
    ];
    this.setState({
      phoneVisible: true,
      id: this.state.ModalData.id,
      mobile: this.state.ModalData.mobile,
      fixedTel: this.state.ModalData.fixedTel,
      contactList: this.state.ModalData.contactList.length
        ? JSON.parse(JSON.stringify(this.state.ModalData.contactList))
        : obj,
    });
  },
  phoneCancel() {
    this.setState({
      phoneVisible: false,
    });
  },
  editPhone() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/updateContact",
      data: {
        id: this.state.id,
        mobile: this.state.mobile,
        fixedTel: this.state.fixedTel,
        contactList: JSON.stringify(this.state.contactList),
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.loadData();
          this.phoneCancel();
          this.tableRowClick(this.state.ModalData);
          message.success("修改成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  entryModal() {
    this.setState({
      entryVisible: true,
    });
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/selectBypdId",
      data: {
        id: this.state.ModalData.id,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.setState({
            id: data.data.personnelEntry ? data.data.personnelEntry.id : "",
            school: data.data.personnelEntry
              ? data.data.personnelEntry.school
              : "",
            education: data.data.personnelEntry
              ? data.data.personnelEntry.education
              : "",
            major: data.data.personnelEntry
              ? data.data.personnelEntry.major
              : "",
            title: data.data.personnelEntry
              ? data.data.personnelEntry.title
              : "",
            entryRemarks: data.data.personnelEntry
              ? data.data.personnelEntry.entryRemarks
              : "",
            annexUrl: data.data.personnelEntry
              ? data.data.personnelEntry.annexUrl
                ? data.data.personnelEntry.annexUrl
                : ""
              : "",
            annexName: data.data.personnelEntry
              ? data.data.personnelEntry.annexName
                ? data.data.personnelEntry.annexName
                : ""
              : "",
          });
          // }
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  entryCancel() {
    this.tableRowClick(this.state.ModalData);
    this.setState({
      entryVisible: false,
    });
  },
  cancel() {
    this.setState({
      visible: false,
      detailFlag: false,
      active: "1",
    });
  },
  tableRowClick(record) {
    this.setState({
      visible: true,
      id: record.id,
    });
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/selectBypdId",
      data: {
        id: record.id,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.setState({
            ModalData: data.data,
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  search() {
    this.loadData();
  },
  addPic() {
    this.setState({
      addPicModal: true,
    });
  },
  addPicModalCancel() {
    this.setState({
      addPicModal: false,
    });
  },
  getVoucherUrl(e) {
    this.setState({
      voucherUrl: e,
    });
  },
  add() {
    if (this.state.entryVisible) {
      return this.addRuzhi;
    } else if (this.state.upgradeVisible) {
      return this.addJinsheng;
    } else if (this.state.contractVisible) {
      return this.addContract;
    } else if (this.state.chooseVisible) {
      return this.addChoose;
    } else if (this.state.quitVisible) {
      return this.addQuit;
    } else if (this.state.welfareVisible) {
      return this.addWelfare;
    }
  },
  addRuzhi(e, i) {
    this.setState({
      addPicModal: false,
    });
    if (this.state.annexUrl.length > 0) {
      this.state.annexUrl += "," + e;
      this.state.annexName += "," + i;
    } else {
      this.state.annexUrl += e;
      this.state.annexName += i;
    }

    this.setState({
      annexUrl: this.state.annexUrl,
      annexName: this.state.annexName,
    });
  },
  addJinsheng(e, i) {
    this.setState({
      addPicModal: false,
    });
    if (
      this.state.promotionList.annexUrl &&
      this.state.promotionList.annexUrl.length > 0
    ) {
      this.state.promotionList.annexUrl += "," + e;
      this.state.promotionList.annexName += "," + i;
    } else {
      this.state.promotionList.annexUrl = e;
      this.state.promotionList.annexName = i;
    }
    this.setState({
      promotionList: this.state.promotionList,
    });
  },
  addContract(e, i) {
    this.setState({
      addPicModal: false,
    });
    if (
      this.state.contractList.annexUrl &&
      this.state.contractList.annexUrl.length > 0
    ) {
      this.state.contractList.annexUrl += "," + e;
      this.state.contractList.annexName += "," + i;
    } else {
      this.state.contractList.annexUrl = e;
      this.state.contractList.annexName = i;
    }
    this.setState({
      contractList: this.state.contractList,
    });
  },
  addChoose(e, i) {
    this.setState({
      addPicModal: false,
    });
    if (
      this.state.chooseList.annexUrl &&
      this.state.chooseList.annexUrl.length > 0
    ) {
      this.state.chooseList.annexUrl += "," + e;
      this.state.chooseList.annexName += "," + i;
    } else {
      this.state.chooseList.annexUrl = e;
      this.state.chooseList.annexName = i;
    }
    this.setState({
      chooseList: this.state.chooseList,
    });
  },
  addQuit(e, i) {
    this.setState({
      addPicModal: false,
    });
    if (
      this.state.quitList.annexUrl &&
      this.state.quitList.annexUrl.length > 0
    ) {
      this.state.quitList.annexUrl += "," + e;
      this.state.quitList.annexName += "," + i;
    } else {
      this.state.quitList.annexUrl = e;
      this.state.quitList.annexName = i;
    }
    this.setState({
      quitList: this.state.quitList,
    });
  },
  addWelfare(e, i) {
    this.setState({
      addPicModal: false,
    });
    if (
      this.state.ModalData.welfareAnnexUrl &&
      this.state.ModalData.welfareAnnexUrl.length > 0
    ) {
      this.state.ModalData.welfareAnnexUrl += "," + e;
      this.state.ModalData.welfareAnnexName += "," + i;
    } else {
      this.state.ModalData.welfareAnnexUrl = e;
      this.state.ModalData.welfareAnnexName = i;
    }
    this.setState({
      ModalData: this.state.ModalData,
    });
  },
  reset() {
    this.state.nameSearch = undefined;
    this.state.statusSearch = undefined;
    this.state.departmenttList = undefined;
    this.state.sexSearch = undefined;
    this.state.marriageSearch = undefined;
    this.state.politicalOutlookSearch = undefined;
    this.state.birthdayMonthSearch = undefined;
    this.state.systemSearch = undefined;
    this.state.workingYearsSearch = undefined;
    this.state.educationSearch = undefined;
    this.state.promotionTime = [];
    this.state.entryTime = [];
    this.state.quitTime = [];
    this.state.contractTime = [];
    this.loadData();
  },
  peoStatus(e) {
    if (e == 0) {
      return "在职（试用期）";
    } else if (e == 1) {
      return "在职（正式工）";
    } else if (e == 2) {
      return "离职";
    }
  },
  jobStatus(e, i) {
    if (e == 0) {
      return "全职";
    } else if (e == 1) {
      return "兼职";
    } else if (e == 2) {
      return i;
    }
  },
  educationStatus(e) {
    if (e == 0) {
      return "高中/中专";
    } else if (e == 1) {
      return "专科/高职";
    } else if (e == 2) {
      return "本科";
    } else if (e == 3) {
      return "研究生";
    } else if (e == 5) {
      return "博士";
    }
  },
  picToArr(e) {
    if (!e) return [];
    let arr = e.split(",");
    return arr;
  },
  ruzhiRemove(e) {
    let url = e.file.response.data;
    let arr = this.state.annexUrl.split(",");
    let arrName = this.state.annexName.split(",");
    let num = "";
    arr.forEach((item, index) => {
      if (item == url) {
        arr.splice(index, 1);
        num = index;
      }
    });
    arrName.splice(num, 1);
    this.setState({
      annexUrl: arr.join(","),
      annexName: arrName.join(","),
    });
  },
  jinshengRemove(e) {
    let url = e.file.response.data;
    let arr = this.state.promotionList.annexUrl.split(",");
    let arrName = this.state.promotionList.annexName.split(",");
    let num = "";
    arr.forEach((item, index) => {
      if (item == url) {
        arr.splice(index, 1);
        num = index;
      }
    });
    arrName.splice(num, 1);
    this.state.promotionList.annexUrl = arr.join(",");
    this.state.promotionList.annexName = arrName.join(",");
    this.setState({
      promotionList: this.state.promotionList,
    });
  },
  contractRemove(e) {
    let url = e.file.response.data;
    let arr = this.state.contractList.annexUrl.split(",");
    let arrName = this.state.contractList.annexName.split(",");
    let num = "";
    arr.forEach((item, index) => {
      if (item == url) {
        arr.splice(index, 1);
        num = index;
      }
    });
    arrName.splice(num, 1);
    this.state.contractList.annexUrl = arr.join(",");
    this.state.contractList.annexName = arrName.join(",");
    this.setState({
      contractList: this.state.contractList,
    });
  },
  chooseRemove(e) {
    let url = e.file.response.data;
    let arr = this.state.chooseList.annexUrl.split(",");
    let arrName = this.state.chooseList.annexName.split(",");
    let num = "";
    arr.forEach((item, index) => {
      if (item == url) {
        arr.splice(index, 1);
        num = index;
      }
    });
    arrName.splice(num, 1);
    this.state.chooseList.annexUrl = arr.join(",");
    this.state.chooseList.annexName = arrName.join(",");
    this.setState({
      chooseList: this.state.chooseList,
    });
  },
  quitRemove(e) {
    let url = e.file.response.data;
    let arr = this.state.quitList.annexUrl.split(",");
    let arrName = this.state.quitList.annexName.split(",");
    let num = "";
    arr.forEach((item, index) => {
      if (item == url) {
        arr.splice(index, 1);
        num = index;
      }
    });
    arrName.splice(num, 1);
    this.state.quitList.annexUrl = arr.join(",");
    this.state.quitList.annexName = arrName.join(",");
    this.setState({
      quitList: this.state.quitList,
    });
  },
  welfareRemove(e) {
    let url = e.file.response.data;
    let arr = this.state.ModalData.welfareAnnexUrl.split(",");
    let arrName = this.state.ModalData.welfareAnnexName.split(",");
    let num = "";
    arr.forEach((item, index) => {
      if (item == url) {
        arr.splice(index, 1);
        num = index;
      }
    });
    arrName.splice(num, 1);
    this.state.ModalData.welfareAnnexUrl = arr.join(",");
    this.state.ModalData.welfareAnnexName = arrName.join(",");
    this.setState({
      ModalData: this.state.ModalData,
    });
  },
  getList(jobs) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/selectLvlList",
      data: {},
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          let arr = data.data;
          let starArr = [];
          arr.forEach((item, index) => {
            if(jobs && item.jobs == jobs) {
              let obj = {
                star: item.lvl + "",
                starName: item.lvlName,
              };
              starArr.push(obj);
              return
            }else if (!jobs && item.jobs == this.state.jobs) {
              let obj = {
                star: item.lvl + "",
                starName: item.lvlName,
              };
              starArr.push(obj);
            }
          });
          this.setState({
            starArr,
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  getLists(jobs) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/selectLvlList",
      data: {},
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          let arr = data.data;
          let starArrs = [];
          arr.forEach((item, index) => {
            if (jobs && item.jobs == jobs) {
              let obj = {
                star: item.lvl + "",
                starName: item.lvlName,
              };
              starArrs.push(obj);
              return;
            }
            if (item.jobs == this.state.jobss) {
              let obj = {
                star: item.lvl + "",
                starName: item.lvlName,
              };
              starArrs.push(obj);
            }
          });
          this.setState({
            starArrs,
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  editRuzi() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/updateEntry",
      data: {
        id: this.state.ModalData.id,
        school: this.state.school,
        education: this.state.education,
        major: this.state.major,
        title: this.state.title,
        entryRemarks: this.state.entryRemarks,
        annexUrl: this.state.annexUrl,
        annexName: this.state.annexName,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.loadData();
          this.entryCancel();
          this.tableRowClick(this.state.ModalData);
          message.success("修改成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  upgradeCancel() {
    this.tableRowClick(this.state.ModalData);
    this.setState({
      upgradeVisible: false,
    });
  },
  contractCancel() {
    this.tableRowClick(this.state.ModalData);
    this.setState({
      contractVisible: false,
    });
  },
  chooseCancel() {
    this.tableRowClick(this.state.ModalData);
    this.setState({
      chooseVisible: false,
    });
  },
  quitCancel() {
    this.tableRowClick(this.state.ModalData);
    this.setState({
      quitVisible: false,
    });
  },
  welfareCancel() {
    this.tableRowClick(this.state.ModalData);
    this.setState({
      welfareVisible: false,
    });
  },
  upgradeModal(flag, index) {
    this.setState({
      upgradeVisible: true,
    });
    let obj = {
      id: undefined,
      pdId: this.state.ModalData.id,
      oldJobs: [],
      oldLvl: [],
      newJobs: [],
      newLvl: [],
      promotionTimes: undefined,
      promotionRemarks: undefined,
      annexUrl: "",
      annexName: "",
    };
    this.setState({
      promotionList: flag ? obj : this.state.ModalData.promotionList[index],
    });
    this.getList(flag ? undefined : this.state.ModalData.promotionList[index].oldJobs);
    this.getLists(flag ? undefined : this.state.ModalData.promotionList[index].newJobs);
  },
  contractModal(flag, index) {
    this.setState({
      contractVisible: true,
    });
    let obj = {
      id: undefined,
      pdId: this.state.ModalData.id,
      startTimes: undefined,
      endTimes: undefined,
      contractRemarks: undefined,
      annexUrl: "",
      annexName: "",
    };
    this.setState({
      contractList: flag ? obj : this.state.ModalData.contractList[index],
    });
  },
  chooseModal(flag, index) {
    this.setState({
      chooseVisible: true,
    });
    let obj = {
      id: undefined,
      pdId: this.state.ModalData.id,
      chooseStatus: undefined,
      effectTimes: undefined,
      chooseRemarks: undefined,
      annexUrl: "",
      annexName: "",
    };
    this.setState({
      chooseList: flag ? obj : this.state.ModalData.chooseList[index],
    });
  },
  quitModal(flag, index) {
    this.setState({
      quitVisible: true,
    });
    let obj = {
      id: undefined,
      pdId: this.state.ModalData.id,
      effectTimes: undefined,
      quitRemarks: undefined,
      annexUrl: "",
      annexName: "",
    };
    this.setState({
      quitList: flag ? obj : this.state.ModalData.quitList[index],
    });
  },
  welfareModal() {
    this.setState({
      welfareVisible: true,
    });
  },
  editUpgrade() {
    if(!this.state.promotionList.oldLvl.length || !this.state.promotionList.newLvl.length) {
      message.warning("请选择星级")
      return
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/updatePromotion",
      data: {
        id: this.state.promotionList.id,
        pdId: this.state.promotionList.pdId,
        oldJobs: this.state.promotionList.oldJobs,
        oldLvl: this.state.promotionList.oldLvl,
        newJobs: this.state.promotionList.newJobs,
        newLvl: this.state.promotionList.newLvl,
        promotionTimes: this.state.promotionList.promotionTimes,
        promotionRemarks: this.state.promotionList.promotionRemarks,
        annexUrl: this.state.promotionList.annexUrl,
        annexName: this.state.promotionList.annexName,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.loadData();
          this.upgradeCancel();
          message.success("修改成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  editContract() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/updateContract",
      data: {
        id: this.state.contractList.id,
        pdId: this.state.contractList.pdId,
        startTimes: this.state.contractList.startTimes,
        endTimes: this.state.contractList.endTimes,
        contractRemarks: this.state.contractList.contractRemarks,
        annexUrl: this.state.contractList.annexUrl,
        annexName: this.state.contractList.annexName,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.loadData();
          this.contractCancel();
          message.success("修改成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  editChoose() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/updateChoose",
      data: {
        id: this.state.chooseList.id,
        pdId: this.state.chooseList.pdId,
        chooseStatus: this.state.chooseList.chooseStatus,
        effectTimes: this.state.chooseList.effectTimes,
        chooseRemarks: this.state.chooseList.chooseRemarks,
        annexUrl: this.state.chooseList.annexUrl,
        annexName: this.state.chooseList.annexName,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.loadData();
          this.chooseCancel();
          message.success("修改成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  editQuit() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/updateQuit",
      data: {
        id: this.state.quitList.id,
        pdId: this.state.quitList.pdId,
        effectTimes: this.state.quitList.effectTimes,
        quitRemarks: this.state.quitList.quitRemarks,
        annexUrl: this.state.quitList.annexUrl,
        annexName: this.state.quitList.annexName,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.loadData();
          this.quitCancel();
          message.success("修改成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  editWelfare() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/updateWelfare",
      data: {
        pdId: this.state.ModalData.id,
        annexUrl: this.state.ModalData.welfareAnnexUrl,
        annexName: this.state.ModalData.welfareAnnexName,
        remarks: this.state.ModalData.welfareRemarks,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.loadData();
          this.welfareCancel();
          message.success("修改成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  render() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRows: selectedRows.slice(-1),
          selectedRowKeys: selectedRowKeys.slice(-1),
        });
      },
    };
    const { RangePicker } = DatePicker;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    let departmentArr = this.state.departmentArr || [];
    return (
      <div className="user-content">
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>人事档案统计</span>
        </div>
        <Tabs defaultActiveKey="2" onChange={this.callback} className="test">
          <TabPane tab="搜索" key="2">
            <div className="user-search" style={{ marginLeft: 10 }}>
              <Input
                placeholder="姓名"
                style={{ width: 120 }}
                value={this.state.nameSearch}
                onChange={(e) => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              <Select
                placeholder="员工状态"
                onChange={(e) => {
                  this.setState({ statusSearch: e });
                }}
                style={{ width: 120, marginRight: 10 }}
                value={this.state.statusSearch}
              >
                <Option value="0">实习生</Option>
                <Option value="1">在职（试用期）</Option>
                <Option value="2">在职（合同期）</Option>
                <Option value="3">兼职</Option>
                <Option value="4">离职</Option>
              </Select>
              <Select
                placeholder="所属公司"
                style={{ width: 120, marginRight: 10 }}
                value={this.state.departmenttList}
                onChange={(e) => {
                  this.setState({ departmenttList: e });
                }}
              >
                {departmentArr.map(function (item) {
                  return (
                    <Select.Option key={item.id}>{item.name}</Select.Option>
                  );
                })}
              </Select>
              <Select
                placeholder="性别"
                onChange={(e) => {
                  this.setState({ sexSearch: e });
                }}
                style={{ width: 120, marginRight: 10 }}
                value={this.state.sexSearch}
              >
                <Option value="0">男</Option>
                <Option value="1">女</Option>
              </Select>
              <Select
                placeholder="婚姻状态"
                onChange={(e) => {
                  this.setState({ marriageSearch: e });
                }}
                style={{ width: 120, marginRight: 10 }}
                value={this.state.marriageSearch}
              >
                <Option value="0">未婚</Option>
                <Option value="1">已婚</Option>
                <Option value="2">离异</Option>
              </Select>
              <Select
                placeholder="政治面貌"
                onChange={(e) => {
                  this.setState({ politicalOutlookSearch: e });
                }}
                style={{ width: 120, marginRight: 10 }}
                value={this.state.politicalOutlookSearch}
              >
                <Option value="0">群众</Option>
                <Option value="1">中共预备党员</Option>
                <Option value="2">中共党员</Option>
                <Option value="3">致公党员</Option>
              </Select>
              <Select
                placeholder="生日月份"
                onChange={(e) => {
                  this.setState({ birthdayMonthSearch: e });
                }}
                style={{ width: 120, marginRight: 10 }}
                value={this.state.birthdayMonthSearch}
              >
                <Option value="">全部</Option>
                <Option value="1">一月</Option>
                <Option value="2">二月</Option>
                <Option value="3">三月</Option>
                <Option value="4">四月</Option>
                <Option value="5">五月</Option>
                <Option value="6">六月</Option>
                <Option value="7">七月</Option>
                <Option value="8">八月</Option>
                <Option value="9">九月</Option>
                <Option value="10">十月</Option>
                <Option value="11">十一月</Option>
                <Option value="12">十二月</Option>
              </Select>
              <Select
                placeholder="所属系统"
                onChange={(e) => {
                  this.setState({ systemSearch: e });
                }}
                style={{ width: 120, marginRight: 10 }}
                value={this.state.systemSearch}
              >
                <Option value="0">管理系统</Option>
                <Option value="1">营销系统</Option>
                <Option value="2">技术系统</Option>
              </Select>
              <Select
                placeholder="工作年限"
                onChange={(e) => {
                  this.setState({ workingYearsSearch: e });
                }}
                style={{ width: 120, marginRight: 10 }}
                value={this.state.workingYearsSearch}
              >
                <Option value="0">0-1年</Option>
                <Option value="1">1-3年</Option>
                <Option value="2">3-10年</Option>
                <Option value="3">10年以上</Option>
              </Select>
              <Select
                placeholder="学历"
                onChange={(e) => {
                  this.setState({ educationSearch: e });
                }}
                style={{ width: 120 }}
                value={this.state.educationSearch}
              >
                <Option value="0">高中/中专</Option>
                <Option value="1">专科/高职</Option>
                <Option value="2">本科</Option>
                <Option value="3">研究生</Option>
                <Option value="5">博士</Option>
              </Select>
              <br />
              <span style={{}}>转正日期：</span>
              <RangePicker
                style={{ marginRight: 10, width: 170 }}
                value={[
                  this.state.promotionTime[0]
                    ? moment(this.state.promotionTime[0])
                    : null,
                  this.state.promotionTime[1]
                    ? moment(this.state.promotionTime[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ promotionTime: dataString });
                }}
              />
              <span style={{}}>入职时间：</span>
              <RangePicker
                style={{ marginRight: 10, width: 170 }}
                value={[
                  this.state.entryTime[0]
                    ? moment(this.state.entryTime[0])
                    : null,
                  this.state.entryTime[1]
                    ? moment(this.state.entryTime[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ entryTime: dataString });
                }}
              />
              <span style={{}}>离职时间：</span>
              <RangePicker
                style={{ marginRight: 10, width: 170 }}
                value={[
                  this.state.quitTime[0]
                    ? moment(this.state.quitTime[0])
                    : null,
                  this.state.quitTime[1]
                    ? moment(this.state.quitTime[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ quitTime: dataString });
                }}
              />
              <span style={{}}>合同时间：</span>
              <RangePicker
                style={{ marginRight: 10, width: 170 }}
                value={[
                  this.state.contractTime[0]
                    ? moment(this.state.contractTime[0])
                    : null,
                  this.state.contractTime[1]
                    ? moment(this.state.contractTime[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ contractTime: dataString });
                }}
              />

              <Button
                type="primary"
                onClick={this.search}
                style={{ marginLeft: 10 }}
              >
                搜索
              </Button>
              <Button onClick={this.reset}>重置</Button>
            </div>
          </TabPane>
          <TabPane tab="新增员工档案" key="3">
            <Button
              type="primary"
              onClick={this.addPeo}
              style={{ margin: "11px 0px 10px 10px" }}
            >
              新增员工档案
            </Button>
          </TabPane>
          <TabPane tab="导出Excel" key="4">
            <Button
              type="primary"
              onClick={this.export}
              style={{ margin: "11px 0px 10px 10px" }}
            >
              导出当前列表
            </Button>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="1">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                  columns={this.state.columns}
                  changeFn={this.changeList}
                  changeList={this.state.changeList}
                  top={55}
                  margin={11}
              />
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table" style={{ marginTop: 10 }}>
          <Spin spinning={this.state.loading}>
            <Table
              bordered
              columns={
                this.state.changeList == undefined
                  ? this.state.columns
                  : this.state.changeList
              }
              onRowClick={this.tableRowClick}
              dataSource={this.state.dataSource}
              scroll={{ x: "max-content", y: 0 }}
              pagination={this.state.pagination}
              size="small"
            />
          </Spin>
        </div>
        <Modal
          maskClosable={false}
          visible={this.state.visible}
          footer={null}
          width={1000}
          onCancel={() => {
            this.loadData();
            this.cancel();
          }}
        >
          <ReactToPrint
            trigger={() => (
              <Button
                type="primary"
                style={{
                  float: "right",
                  position:'absolute',
                  right: '20px',
                  top: '63px',
                  zIndex: 1,
                  display: this.state.detailFlag ? "block" : "none"
                }}
              >
                打印
              </Button>
            )}
            content={() => this.refs}
          />
          <Spin
            spinning={this.state.loading}
            ref={(e) => {
              this.refs = e;
            }}
          >
            <h2
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              {this.state.ModalData.name + "人事档案"}
            </h2>
            <Button
              type="primary"
              style={{ marginBottom: 15}}
              onClick={(e) => {
                this.setState({ detailFlag: !this.state.detailFlag });
              }}
            >
              {this.state.detailFlag ? "切换编辑模式" : "切换查看模式"}
            </Button>
            <ul onClick={this.editPeo} className="peo-table">
              {this.state.table.map((item) => {
                let value = item.value;
                if (item.render) {
                  let fn = item.render;
                  return (
                    <li>
                      <div className="peo-left">{item.key}</div>
                      <Tooltip
                        placement="top"
                        title={fn(
                          this.state.ModalData[value],
                          value == "son" ? this.state.ModalData.girl : 0
                        )}
                      >
                        <div className="peo-right">
                          {fn(
                            this.state.ModalData[value],
                            value == "son" ? this.state.ModalData.girl : 0
                          )}
                        </div>
                      </Tooltip>
                    </li>
                  );
                }
                return (
                  <li>
                    <div className="peo-left">{item.key}</div>
                    <Tooltip
                      placement="top"
                      title={this.state.ModalData[item.value]}
                    >
                      <div className="peo-right">
                        {this.state.ModalData[value] &&
                        this.state.ModalData[value].length > 10
                          ? this.state.ModalData[value].substring(0, 10) + "..."
                          : this.state.ModalData[value]}
                      </div>
                    </Tooltip>
                  </li>
                );
              })}
            </ul>
            {this.state.detailFlag ? (
              <div>
                <div className="title-peo">
                  <span>任职信息</span>
                  {/* <Button
                    type="primary"
                    onClick={(e) => {
                      this.stayModal(this.state.ModalData.id);
                    }}
                    style={{ position: "absolute", right: 0, height: 30 }}
                  >
                    修改任职信息
                  </Button> */}
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="员工状态"
                  >
                    {this.state.ModalData.statusName}
                  </FormItem>
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="所属系统"
                  >
                    {this.state.ModalData.systemName}
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="工作性质"
                  >
                    {this.jobStatus(
                      this.state.ModalData.jobNature,
                      this.state.ModalData.jobNatureRemarks
                    )}
                  </FormItem>
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="工龄"
                  >
                    {this.state.ModalData.workingYear}
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="入职时间"
                  >
                    {this.state.ModalData.entryTimes}
                  </FormItem>
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="转正时间"
                  >
                    {this.state.ModalData.promotionTimes}
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="所属公司"
                  >
                    {this.state.ModalData.depName}
                  </FormItem>
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="级别"
                  >
                    {this.state.ModalData.lvlName}
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="职位"
                  >
                    {this.state.ModalData.jobsName}
                  </FormItem>
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="岗位津贴"
                  >
                    {this.state.ModalData.allowance}
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="星级"
                  >
                    {this.state.ModalData.starName}
                  </FormItem>
                </div>
                <div className="title-peo">
                  <span>联系信息</span>
                  {/* <Button
                    type="primary"
                    onClick={this.phoneModal}
                    style={{ position: "absolute", right: 0, height: 30 }}
                  >
                    修改联系信息
                  </Button> */}
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="手机号码"
                  >
                    {this.state.ModalData.mobile}
                  </FormItem>
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="电话"
                  >
                    {this.state.ModalData.fixedTel}
                  </FormItem>
                </div>
                {this.state.ModalData.contactList &&
                this.state.ModalData.contactList.length > 0 ? (
                  this.state.ModalData.contactList.map((item, index) => {
                    return (
                      <div className="clearfix">
                        <FormItem
                          className="half-item"
                          labelCol={{ span: 6 }}
                          wrapperCol={{ span: 30 }}
                          label={"紧急联系人" + (index + 1)}
                        >
                          {item.emergencyContact}
                        </FormItem>
                        <FormItem
                          className="half-item"
                          labelCol={{ span: 6 }}
                          wrapperCol={{ span: 30 }}
                          label={"紧急联系人" + (index + 1) + "电话"}
                        >
                          {item.emergencyMobile}
                        </FormItem>
                      </div>
                    );
                  })
                ) : (
                  <div
                    style={{
                      textAlign: "center",
                      height: 60,
                      lineHeight: "60px",
                    }}
                  >
                    暂无紧急联系人信息
                  </div>
                )}
                <div className="title-peo">
                  <span>入职资料</span>
                  {/* <Button
                    type="primary"
                    onClick={this.entryModal}
                    style={{ position: "absolute", right: 0, height: 30 }}
                  >
                    修改入职信息
                  </Button> */}
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="毕业学校"
                  >
                    {this.state.ModalData.personnelEntry
                      ? this.state.ModalData.personnelEntry.school
                      : ""}
                  </FormItem>
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="学历"
                  >
                    {this.state.ModalData.personnelEntry
                      ? this.educationStatus(
                          this.state.ModalData.personnelEntry.education
                        )
                      : ""}
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="所学专业"
                  >
                    {this.state.ModalData.personnelEntry
                      ? this.state.ModalData.personnelEntry.major
                      : ""}
                  </FormItem>
                  <FormItem
                    className="half-item"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 30 }}
                    label="职称"
                  >
                    {this.state.ModalData.personnelEntry
                      ? this.state.ModalData.personnelEntry.title
                      : ""}
                  </FormItem>
                </div>
                <div className="clearfix" style={{ paddingLeft: 70 }}>
                  <div style={{ marginBottom: 10 }}>附件：</div>
                  <PicModal
                    remarks={
                      this.state.ModalData.personnelEntry
                        ? this.picToArr(
                            this.state.ModalData.personnelEntry.annexName
                          )
                        : []
                    }
                    picUrl={
                      this.state.ModalData.personnelEntry
                        ? this.picToArr(
                            this.state.ModalData.personnelEntry.annexUrl
                          )
                        : []
                    }
                  />
                </div>
                <div className="title-peo">
                  <span>晋升情况</span>
                  {/* <Button
                    type="primary"
                    onClick={(e) => {
                      this.upgradeModal(true);
                    }}
                    style={{ position: "absolute", right: 0, height: 30 }}
                  >
                    新增晋升信息
                  </Button> */}
                </div>
                {this.state.ModalData.promotionList &&
                this.state.ModalData.promotionList.length > 0 ? (
                  this.state.ModalData.promotionList.map((item, index) => {
                    return (
                      <div
                        style={{
                          width: "100%",
                          borderBottom: "1px dashed #ccc",
                          position: "relative",
                        }}
                      >
                        {/* <Button
                          style={{
                            position: "absolute",
                            right: "50%",
                            bottom: 10,
                            transform: "translateX(50%)",
                          }}
                          type="primary"
                          onClick={(e) => {
                            this.upgradeModal(false, index);
                          }}
                        >
                          修改信息
                        </Button> */}
                        <div className="clearfix">
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="晋升职位"
                          >
                            {item.oldJobsName + "--->" + item.newJobsName}
                          </FormItem>
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="晋升等级"
                          >
                            {item.oldLvlName + "--->" + item.newLvlName}
                          </FormItem>
                        </div>
                        <div className="clearfix">
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="晋升时间"
                          >
                            {item.promotionTimes}
                          </FormItem>
                        </div>
                        <div className="clearfix">
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="晋升备注"
                          >
                            {item.promotionRemarks}
                          </FormItem>
                        </div>
                        <div
                          className="clearfix"
                          style={{ paddingLeft: 70, marginBottom: 40 }}
                        >
                          <div style={{ marginBottom: 10 }}>附件：</div>
                          <PicModal
                            remarks={this.picToArr(item.annexName)}
                            picUrl={this.picToArr(item.annexUrl)}
                          />
                        </div>
                      </div>
                    );
                  })
                ) : (
                  <div
                    style={{
                      textAlign: "center",
                      height: 60,
                      lineHeight: "60px",
                    }}
                  >
                    暂无晋升情况
                  </div>
                )}
                <div className="title-peo">
                  <span>合同情况</span>
                  {/* <Button
                    type="primary"
                    onClick={(e) => {
                      this.contractModal(true);
                    }}
                    style={{ position: "absolute", right: 0, height: 30 }}
                  >
                    新增合同信息
                  </Button> */}
                </div>
                {this.state.ModalData.contractList &&
                this.state.ModalData.contractList.length > 0 ? (
                  this.state.ModalData.contractList.map((item, index) => {
                    return (
                      <div
                        style={{
                          width: "100%",
                          borderBottom: "1px dashed #ccc",
                          position: "relative",
                        }}
                      >
                        {/* <Button
                          style={{
                            position: "absolute",
                            right: "50%",
                            bottom: 10,
                            transform: "translateX(50%)",
                          }}
                          type="primary"
                          onClick={(e) => {
                            this.contractModal(false, index);
                          }}
                        >
                          修改信息
                        </Button> */}
                        <div className="clearfix">
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="签订时间"
                          >
                            {item.startTimes}
                          </FormItem>
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="到期时间"
                          >
                            {item.endTimes}
                          </FormItem>
                        </div>
                        <div className="clearfix">
                          <FormItem
                            style={{ width: "100%", wordBreak: "break-all" }}
                            className="half-item"
                            labelCol={{ span: 3 }}
                            wrapperCol={{ span: 30 }}
                            label="备注"
                          >
                            {item.contractRemarks}
                          </FormItem>
                        </div>
                        <div
                          className="clearfix"
                          style={{ paddingLeft: 70, marginBottom: 40 }}
                        >
                          <div style={{ marginBottom: 10 }}>附件：</div>
                          <PicModal
                            remarks={this.picToArr(item.annexName)}
                            picUrl={this.picToArr(item.annexUrl)}
                          />
                        </div>
                      </div>
                    );
                  })
                ) : (
                  <div
                    style={{
                      textAlign: "center",
                      height: 60,
                      lineHeight: "60px",
                    }}
                  >
                    暂无合同情况
                  </div>
                )}
                <div className="title-peo">
                  <span>奖惩情况</span>
                  {/* <Button
                    type="primary"
                    onClick={(e) => {
                      this.chooseModal(true);
                    }}
                    style={{ position: "absolute", right: 0, height: 30 }}
                  >
                    新增奖惩信息
                  </Button> */}
                </div>
                {this.state.ModalData.chooseList &&
                this.state.ModalData.chooseList.length > 0 ? (
                  this.state.ModalData.chooseList.map((item, index) => {
                    return (
                      <div
                        style={{
                          width: "100%",
                          borderBottom: "1px dashed #ccc",
                          position: "relative",
                        }}
                      >
                        {/* <Button
                          style={{
                            position: "absolute",
                            right: "50%",
                            bottom: 10,
                            transform: "translateX(50%)",
                          }}
                          type="primary"
                          onClick={(e) => {
                            this.chooseModal(false, index);
                          }}
                        >
                          修改信息
                        </Button> */}
                        <div className="clearfix">
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label={"状态"}
                          >
                            {item.chooseStatus == 0 ? "奖励" : "惩罚"}
                          </FormItem>
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="时间"
                          >
                            {item.effectTimes}
                          </FormItem>
                        </div>
                        <div className="clearfix">
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label={"内容"}
                          >
                            {item.chooseRemarks}
                          </FormItem>
                        </div>
                        <div
                          className="clearfix"
                          style={{ paddingLeft: 70, marginBottom: 40 }}
                        >
                          <div style={{ marginBottom: 10 }}>附件：</div>
                          <PicModal
                            remarks={this.picToArr(item.annexName)}
                            picUrl={this.picToArr(item.annexUrl)}
                          />
                        </div>
                      </div>
                    );
                  })
                ) : (
                  <div
                    style={{
                      textAlign: "center",
                      height: 60,
                      lineHeight: "60px",
                    }}
                  >
                    暂无奖惩情况
                  </div>
                )}
                <div className="title-peo">
                  <span>离职情况</span>
                  {/* <Button
                    type="primary"
                    onClick={(e) => {
                      this.quitModal(true);
                    }}
                    style={{ position: "absolute", right: 0, height: 30 }}
                  >
                    新增离职信息
                  </Button> */}
                </div>
                {this.state.ModalData.quitList &&
                this.state.ModalData.quitList.length > 0 ? (
                  this.state.ModalData.quitList.map((item, index) => {
                    return (
                      <div
                        style={{
                          width: "100%",
                          borderBottom: "1px dashed #ccc",
                          position: "relative",
                        }}
                      >
                        {/* <Button
                          style={{
                            position: "absolute",
                            right: "50%",
                            bottom: 10,
                            transform: "translateX(50%)",
                          }}
                          type="primary"
                          onClick={(e) => {
                            this.quitModal(false, index);
                          }}
                        >
                          修改信息
                        </Button> */}
                        <div className="clearfix">
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="离职时间"
                          >
                            {item.effectTimes}
                          </FormItem>
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="离职备注"
                          >
                            {item.quitRemarks}
                          </FormItem>
                        </div>
                        <div
                          className="clearfix"
                          style={{ paddingLeft: 70, marginBottom: 40 }}
                        >
                          <div style={{ marginBottom: 10 }}>附件：</div>
                          <PicModal
                            remarks={this.picToArr(item.annexName)}
                            picUrl={this.picToArr(item.annexUrl)}
                          />
                        </div>
                      </div>
                    );
                  })
                ) : (
                  <div
                    style={{
                      textAlign: "center",
                      height: 60,
                      lineHeight: "60px",
                    }}
                  >
                    暂无离职信息
                  </div>
                )}
                <div className="title-peo" style={{ marginBottom: 10 }}>
                  <span>福利情况</span>
                  {/* <Button
                    type="primary"
                    onClick={(e) => {
                      this.welfareModal();
                    }}
                    style={{ position: "absolute", right: 0, height: 30 }}
                  >
                    修改福利信息
                  </Button> */}
                </div>
                <Table
                  columns={this.state.welfareColumns}
                  dataSource={this.state.ModalData.welfareList}
                  pagination={false}
                  bordered
                  size="small"
                  scroll={{ x: "max-content", y: 0 }}
                />
                <div className="clearfix" style={{ marginTop: 10 }}>
                  <FormItem
                    className="half-item"
                    style={{ width: "100%", wordBreak: "break-all" }}
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 30 }}
                    label="备注"
                  >
                    {this.state.ModalData.welfareRemarks}
                  </FormItem>
                </div>
                <div
                  className="clearfix"
                  style={{ paddingLeft: 70, marginBottom: 0 }}
                >
                  <div style={{ marginBottom: 10 }}>附件：</div>
                  <PicModal
                    remarks={this.picToArr(
                      this.state.ModalData.welfareAnnexName
                    )}
                    picUrl={this.picToArr(this.state.ModalData.welfareAnnexUrl)}
                  />
                </div>
              </div>
            ) : (
              <Tabs
                activeKey={this.state.active}
                onChange={(e) => {
                  this.setState({ active: e });
                }}
              >
                <TabPane tab="任职信息" key={1}>
                  <div className="title-peo">
                    <span>任职信息</span>
                    <Button
                      type="primary"
                      onClick={(e) => {
                        this.stayModal(this.state.ModalData.id);
                      }}
                      style={{ position: "absolute", right: 0, height: 30 }}
                    >
                      修改任职信息
                    </Button>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="员工状态"
                    >
                      {this.state.ModalData.statusName}
                    </FormItem>
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="所属系统"
                    >
                      {this.state.ModalData.systemName}
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="工作性质"
                    >
                      {this.jobStatus(
                        this.state.ModalData.jobNature,
                        this.state.ModalData.jobNatureRemarks
                      )}
                    </FormItem>
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="工龄"
                    >
                      {this.state.ModalData.workingYear}
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="入职时间"
                    >
                      {this.state.ModalData.entryTimes}
                    </FormItem>
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="转正时间"
                    >
                      {this.state.ModalData.promotionTimes}
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="所属公司"
                    >
                      {this.state.ModalData.depName}
                    </FormItem>
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="级别"
                    >
                      {this.state.ModalData.lvlName}
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="职位"
                    >
                      {this.state.ModalData.jobsName}
                    </FormItem>
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="岗位津贴"
                    >
                      {this.state.ModalData.allowance}
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="星级"
                    >
                      {this.state.ModalData.starName}
                    </FormItem>
                  </div>
                </TabPane>
                <TabPane tab="联系信息" key={2}>
                  <div className="title-peo">
                    <span>联系信息</span>
                    <Button
                      type="primary"
                      onClick={this.phoneModal}
                      style={{ position: "absolute", right: 0, height: 30 }}
                    >
                      修改联系信息
                    </Button>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="手机号码"
                    >
                      {this.state.ModalData.mobile}
                    </FormItem>
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="电话"
                    >
                      {this.state.ModalData.fixedTel}
                    </FormItem>
                  </div>
                  {this.state.ModalData.contactList &&
                  this.state.ModalData.contactList.length > 0 ? (
                    this.state.ModalData.contactList.map((item, index) => {
                      return (
                        <div className="clearfix">
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label={"紧急联系人" + (index + 1)}
                          >
                            {item.emergencyContact}
                          </FormItem>
                          <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label={"紧急联系人" + (index + 1) + "电话"}
                          >
                            {item.emergencyMobile}
                          </FormItem>
                        </div>
                      );
                    })
                  ) : (
                    <div
                      style={{
                        textAlign: "center",
                        height: 60,
                        lineHeight: "60px",
                      }}
                    >
                      暂无紧急联系人信息
                    </div>
                  )}
                </TabPane>
                <TabPane tab="入职资料" key={3}>
                  <div className="title-peo">
                    <span>入职资料</span>
                    <Button
                      type="primary"
                      onClick={this.entryModal}
                      style={{ position: "absolute", right: 0, height: 30 }}
                    >
                      修改入职信息
                    </Button>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="毕业学校"
                    >
                      {this.state.ModalData.personnelEntry
                        ? this.state.ModalData.personnelEntry.school
                        : ""}
                    </FormItem>
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="学历"
                    >
                      {this.state.ModalData.personnelEntry
                        ? this.educationStatus(
                            this.state.ModalData.personnelEntry.education
                          )
                        : ""}
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="所学专业"
                    >
                      {this.state.ModalData.personnelEntry
                        ? this.state.ModalData.personnelEntry.major
                        : ""}
                    </FormItem>
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label="职称"
                    >
                      {this.state.ModalData.personnelEntry
                        ? this.state.ModalData.personnelEntry.title
                        : ""}
                    </FormItem>
                  </div>
                  <div className="clearfix" style={{ paddingLeft: 70 }}>
                    <div style={{ marginBottom: 10 }}>附件：</div>
                    <PicModal
                      remarks={
                        this.state.ModalData.personnelEntry
                          ? this.picToArr(
                              this.state.ModalData.personnelEntry.annexName
                            )
                          : []
                      }
                      picUrl={
                        this.state.ModalData.personnelEntry
                          ? this.picToArr(
                              this.state.ModalData.personnelEntry.annexUrl
                            )
                          : []
                      }
                    />
                  </div>
                </TabPane>
                <TabPane tab="晋升情况" key={4}>
                  <div className="title-peo">
                    <span>晋升情况</span>
                    <Button
                      type="primary"
                      onClick={(e) => {
                        this.upgradeModal(true);
                      }}
                      style={{ position: "absolute", right: 0, height: 30 }}
                    >
                      新增晋升信息
                    </Button>
                  </div>
                  {this.state.ModalData.promotionList &&
                  this.state.ModalData.promotionList.length > 0 ? (
                    this.state.ModalData.promotionList.map((item, index) => {
                      return (
                        <div
                          style={{
                            width: "100%",
                            borderBottom: "1px dashed #ccc",
                            position: "relative",
                          }}
                        >
                          <Button
                            style={{
                              position: "absolute",
                              right: "50%",
                              bottom: 10,
                              transform: "translateX(50%)",
                            }}
                            type="primary"
                            onClick={(e) => {
                              this.upgradeModal(false, index);
                            }}
                          >
                            修改信息
                          </Button>
                          <div className="clearfix">
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label="晋升职位"
                            >
                              {item.oldJobsName + "--->" + item.newJobsName}
                            </FormItem>
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label="晋升等级"
                            >
                              {item.oldLvlName + "--->" + item.newLvlName}
                            </FormItem>
                          </div>
                          <div className="clearfix">
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label="晋升时间"
                            >
                              {item.promotionTimes}
                            </FormItem>
                          </div>
                          <div className="clearfix">
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label="晋升备注"
                            >
                              {item.promotionRemarks}
                            </FormItem>
                          </div>
                          <div
                            className="clearfix"
                            style={{ paddingLeft: 70, marginBottom: 40 }}
                          >
                            <div style={{ marginBottom: 10 }}>附件：</div>
                            <PicModal
                              remarks={this.picToArr(item.annexName)}
                              picUrl={this.picToArr(item.annexUrl)}
                            />
                          </div>
                        </div>
                      );
                    })
                  ) : (
                    <div
                      style={{
                        textAlign: "center",
                        height: 60,
                        lineHeight: "60px",
                      }}
                    >
                      暂无晋升情况
                    </div>
                  )}
                </TabPane>
                <TabPane tab="合同情况" key={5}>
                  <div className="title-peo">
                    <span>合同情况</span>
                    <Button
                      type="primary"
                      onClick={(e) => {
                        this.contractModal(true);
                      }}
                      style={{ position: "absolute", right: 0, height: 30 }}
                    >
                      新增合同信息
                    </Button>
                  </div>
                  {this.state.ModalData.contractList &&
                  this.state.ModalData.contractList.length > 0 ? (
                    this.state.ModalData.contractList.map((item, index) => {
                      return (
                        <div
                          style={{
                            width: "100%",
                            borderBottom: "1px dashed #ccc",
                            position: "relative",
                          }}
                        >
                          <Button
                            style={{
                              position: "absolute",
                              right: "50%",
                              bottom: 10,
                              transform: "translateX(50%)",
                            }}
                            type="primary"
                            onClick={(e) => {
                              this.contractModal(false, index);
                            }}
                          >
                            修改信息
                          </Button>
                          <div className="clearfix">
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label="签订时间"
                            >
                              {item.startTimes}
                            </FormItem>
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label="到期时间"
                            >
                              {item.endTimes}
                            </FormItem>
                          </div>
                          <div className="clearfix">
                            <FormItem
                              style={{ width: "100%", wordBreak: "break-all" }}
                              className="half-item"
                              labelCol={{ span: 3 }}
                              wrapperCol={{ span: 30 }}
                              label="备注"
                            >
                              {item.contractRemarks}
                            </FormItem>
                          </div>
                          <div
                            className="clearfix"
                            style={{ paddingLeft: 70, marginBottom: 40 }}
                          >
                            <div style={{ marginBottom: 10 }}>附件：</div>
                            <PicModal
                              remarks={this.picToArr(item.annexName)}
                              picUrl={this.picToArr(item.annexUrl)}
                            />
                          </div>
                        </div>
                      );
                    })
                  ) : (
                    <div
                      style={{
                        textAlign: "center",
                        height: 60,
                        lineHeight: "60px",
                      }}
                    >
                      暂无合同情况
                    </div>
                  )}
                </TabPane>
                <TabPane tab="奖惩情况" key={6}>
                  <div className="title-peo">
                    <span>奖惩情况</span>
                    <Button
                      type="primary"
                      onClick={(e) => {
                        this.chooseModal(true);
                      }}
                      style={{ position: "absolute", right: 0, height: 30 }}
                    >
                      新增奖惩信息
                    </Button>
                  </div>
                  {this.state.ModalData.chooseList &&
                  this.state.ModalData.chooseList.length > 0 ? (
                    this.state.ModalData.chooseList.map((item, index) => {
                      return (
                        <div
                          style={{
                            width: "100%",
                            borderBottom: "1px dashed #ccc",
                            position: "relative",
                          }}
                        >
                          <Button
                            style={{
                              position: "absolute",
                              right: "50%",
                              bottom: 10,
                              transform: "translateX(50%)",
                            }}
                            type="primary"
                            onClick={(e) => {
                              this.chooseModal(false, index);
                            }}
                          >
                            修改信息
                          </Button>
                          <div className="clearfix">
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label={"状态"}
                            >
                              {item.chooseStatus == 0 ? "奖励" : "惩罚"}
                            </FormItem>
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label="时间"
                            >
                              {item.effectTimes}
                            </FormItem>
                          </div>
                          <div className="clearfix">
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label={"内容"}
                            >
                              {item.chooseRemarks}
                            </FormItem>
                          </div>
                          <div
                            className="clearfix"
                            style={{ paddingLeft: 70, marginBottom: 40 }}
                          >
                            <div style={{ marginBottom: 10 }}>附件：</div>
                            <PicModal
                              remarks={this.picToArr(item.annexName)}
                              picUrl={this.picToArr(item.annexUrl)}
                            />
                          </div>
                        </div>
                      );
                    })
                  ) : (
                    <div
                      style={{
                        textAlign: "center",
                        height: 60,
                        lineHeight: "60px",
                      }}
                    >
                      暂无奖惩情况
                    </div>
                  )}
                </TabPane>
                <TabPane tab="离职情况" key={7}>
                  <div className="title-peo">
                    <span>离职情况</span>
                    <Button
                      type="primary"
                      onClick={(e) => {
                        this.quitModal(true);
                      }}
                      style={{ position: "absolute", right: 0, height: 30 }}
                    >
                      新增离职信息
                    </Button>
                  </div>
                  {this.state.ModalData.quitList &&
                  this.state.ModalData.quitList.length > 0 ? (
                    this.state.ModalData.quitList.map((item, index) => {
                      return (
                        <div
                          style={{
                            width: "100%",
                            borderBottom: "1px dashed #ccc",
                            position: "relative",
                          }}
                        >
                          <Button
                            style={{
                              position: "absolute",
                              right: "50%",
                              bottom: 10,
                              transform: "translateX(50%)",
                            }}
                            type="primary"
                            onClick={(e) => {
                              this.quitModal(false, index);
                            }}
                          >
                            修改信息
                          </Button>
                          <div className="clearfix">
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label="离职时间"
                            >
                              {item.effectTimes}
                            </FormItem>
                            <FormItem
                              className="half-item"
                              labelCol={{ span: 6 }}
                              wrapperCol={{ span: 30 }}
                              label="离职备注"
                            >
                              {item.quitRemarks}
                            </FormItem>
                          </div>
                          <div
                            className="clearfix"
                            style={{ paddingLeft: 70, marginBottom: 40 }}
                          >
                            <div style={{ marginBottom: 10 }}>附件：</div>
                            <PicModal
                              remarks={this.picToArr(item.annexName)}
                              picUrl={this.picToArr(item.annexUrl)}
                            />
                          </div>
                        </div>
                      );
                    })
                  ) : (
                    <div
                      style={{
                        textAlign: "center",
                        height: 60,
                        lineHeight: "60px",
                      }}
                    >
                      暂无离职信息
                    </div>
                  )}
                </TabPane>
                <TabPane tab="福利情况" key={8}>
                  <div className="title-peo" style={{ marginBottom: 10 }}>
                    <span>福利情况</span>
                    <Button
                      type="primary"
                      onClick={(e) => {
                        this.welfareModal();
                      }}
                      style={{ position: "absolute", right: 0, height: 30 }}
                    >
                      修改福利信息
                    </Button>
                  </div>
                  <Table
                    columns={this.state.welfareColumns}
                    dataSource={this.state.ModalData.welfareList}
                    pagination={false}
                    bordered
                    size="small"
                    scroll={{ x: "max-content", y: 0 }}
                  />
                  <div className="clearfix" style={{ marginTop: 10 }}>
                    <FormItem
                      className="half-item"
                      style={{ width: "100%", wordBreak: "break-all" }}
                      labelCol={{ span: 3 }}
                      wrapperCol={{ span: 30 }}
                      label="备注"
                    >
                      {this.state.ModalData.welfareRemarks}
                    </FormItem>
                  </div>
                  <div
                    className="clearfix"
                    style={{ paddingLeft: 70, marginBottom: 0 }}
                  >
                    <div style={{ marginBottom: 10 }}>附件：</div>
                    <PicModal
                      remarks={this.picToArr(
                        this.state.ModalData.welfareAnnexName
                      )}
                      picUrl={this.picToArr(
                        this.state.ModalData.welfareAnnexUrl
                      )}
                    />
                  </div>
                </TabPane>
              </Tabs>
            )}
          </Spin>
          <Modal
            maskClosable={false}
            visible={this.state.peoVisible}
            onOk={this.checkOk}
            footer={null}
            width={800}
            style={{ position: "relative", zIndex: 9999 }}
            onCancel={() => {
              this.loadData();
              this.addPeoCancel();
            }}
          >
            <Spin spinning={this.state.loading}>
              <h2
                style={{
                  textAlign: "center",
                  paddingBottom: 10,
                  marginBottom: 10,
                }}
              >
                {this.state.isAddPeo ? "新增人事档案" : "修改人事档案"}
              </h2>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="员工编号"
                >
                  <Input
                    placeholder="请输入员工编号"
                    style={{ width: 200 }}
                    value={this.state.employeeId}
                    onChange={(e) => {
                      this.setState({
                        employeeId: e.target.value,
                      });
                    }}
                  />
                  <Button
                    disabled={
                      this.state.employeeId || this.state.employeeId == 0
                        ? false
                        : true
                    }
                    style={{ position: "absolute" }}
                    type={"primary"}
                    onClick={this.verifyId}
                  >
                    验证重复
                  </Button>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="门禁编号"
                >
                  <Input
                    style={{ width: 200 }}
                    placeholder="请输入门禁编号"
                    value={this.state.doorId}
                    onChange={(e) => {
                      this.setState({
                        doorId: e.target.value,
                      });
                    }}
                  />
                  <Button
                    disabled={
                      this.state.doorId || this.state.doorId == 0 ? false : true
                    }
                    style={{ position: "absolute" }}
                    type={"primary"}
                    onClick={this.verifyDoor}
                  >
                    验证重复
                  </Button>
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="姓名"
                >
                  <Input
                    placeholder="请输入姓名"
                    style={{ width: 200 }}
                    value={this.state.name}
                    onChange={(e) => {
                      this.setState({
                        name: e.target.value,
                      });
                    }}
                  />
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="出生日期"
                >
                  <DatePicker
                    value={
                      this.state.birthdays ? moment(this.state.birthdays) : null
                    }
                    onChange={(e, t) => {
                      this.setState({
                        birthdays: t,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="性别"
                >
                  <Radio.Group
                    onChange={(e) => {
                      this.setState({ sex: e.target.value });
                    }}
                    value={this.state.sex}
                  >
                    <Radio value={0}>男</Radio>
                    <Radio value={1}>女</Radio>
                  </Radio.Group>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="民族"
                >
                  <Input
                    placeholder="输入民族（例：汉族）"
                    style={{ width: 200 }}
                    value={this.state.nation}
                    onChange={(e) => {
                      this.setState({
                        nation: e.target.value,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="户籍地址"
                >
                  <Cascader
                    options={this.state.Area}
                    value={this.state.residence}
                    placeholder="选择城市"
                    style={{ width: "200px" }}
                    onChange={(e, pre) => {
                      this.setState({ residence: e });
                    }}
                  />
                  {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="户籍街道地址"
                >
                  <Input
                    placeholder="输入街道地址"
                    style={{ width: 200 }}
                    value={this.state.residenceAddress}
                    onChange={(e) => {
                      this.setState({
                        residenceAddress: e.target.value,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="现住地址"
                >
                  <Cascader
                    options={this.state.Area}
                    value={this.state.now}
                    placeholder="选择城市"
                    style={{ width: "200px" }}
                    onChange={(e, pre) => {
                      this.setState({ now: e });
                    }}
                  />
                  {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="现住街道地址"
                >
                  <Input
                    placeholder="输入街道地址"
                    style={{ width: 200 }}
                    value={this.state.nowAddress}
                    onChange={(e) => {
                      this.setState({
                        nowAddress: e.target.value,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="籍贯"
                >
                  <Cascader
                    options={this.state.Birthplaces}
                    value={this.state.nativePlace}
                    placeholder="选择城市"
                    style={{ width: "200px" }}
                    onChange={(e, pre) => {
                      this.setState({ nativePlace: e });
                    }}
                  />
                  {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="身份证"
                >
                  <Input
                    placeholder="输入身份证信息"
                    style={{ width: 200 }}
                    value={this.state.idCard}
                    onChange={(e) => {
                      // let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                      this.setState({
                        idCard: e.target.value,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="身份证领证机关"
                >
                  <Input
                    placeholder="输入机关名称"
                    style={{ width: 200 }}
                    value={this.state.certificationAuthority}
                    onChange={(e) => {
                      // let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                      this.setState({
                        certificationAuthority: e.target.value,
                      });
                    }}
                  />
                  {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="婚姻状态"
                >
                  <Radio.Group
                    onChange={(e) => {
                      this.setState({ marriage: e.target.value });
                    }}
                    value={this.state.marriage}
                  >
                    <Radio value={0}>未婚</Radio>
                    <Radio value={1}>已婚</Radio>
                    <Radio value={2}>离异</Radio>
                  </Radio.Group>
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="子女数量"
                >
                  <span>儿子：</span>
                  <Input
                    placeholder="输入数量"
                    style={{ width: 80 }}
                    type={"number"}
                    value={this.state.son}
                    onChange={(e) => {
                      this.setState({
                        son: e.target.value,
                      });
                    }}
                  />
                  <span style={{ marginLeft: 10 }}>女儿：</span>
                  <Input
                    placeholder="输入数量"
                    style={{ width: 80 }}
                    type={"number"}
                    value={this.state.girl}
                    onChange={(e) => {
                      this.setState({
                        girl: e.target.value,
                      });
                    }}
                  />
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="政治面貌"
                >
                  <Select
                    placeholder="请选择政治面貌"
                    style={{ width: 200 }}
                    onChange={(e) => {
                      this.setState({ politicalOutlook: e });
                    }}
                    value={this.state.politicalOutlook}
                  >
                    <Option value={0}>群众</Option>
                    <Option value={1}>中共预备党员</Option>
                    <Option value={2}>中共党员</Option>
                    <Option value={3}>致公党党员</Option>
                  </Select>
                </FormItem>
              </div>
              <Button
                type="primary"
                shape="round"
                size="large"
                style={{
                  position: "relative",
                  left: "50%",
                  transform: "translateX(-50%)",
                }}
                onClick={this.state.isAddPeo ? this.addOk : this.editOk}
              >
                保存
              </Button>
            </Spin>
          </Modal>
        </Modal>
        <Modal
          maskClosable={false}
          visible={this.state.peoVisible}
          onOk={this.checkOk}
          footer={null}
          width={800}
          style={{ position: "relative", zIndex: 9999 }}
          onCancel={() => {
            this.loadData();
            this.addPeoCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h2
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              {this.state.isAddPeo ? "新增人事档案" : "修改人事档案"}
            </h2>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="员工编号"
              >
                <Input
                  placeholder="请输入员工编号"
                  style={{ width: 200 }}
                  value={this.state.employeeId}
                  onChange={(e) => {
                    this.setState({
                      employeeId: e.target.value,
                    });
                  }}
                />
                <Button
                  disabled={
                    this.state.employeeId || this.state.employeeId == 0
                      ? false
                      : true
                  }
                  style={{ position: "absolute" }}
                  type={"primary"}
                  onClick={this.verifyId}
                >
                  验证重复
                </Button>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="门禁编号"
              >
                <Input
                  style={{ width: 200 }}
                  placeholder="请输入门禁编号"
                  value={this.state.doorId}
                  onChange={(e) => {
                    this.setState({
                      doorId: e.target.value,
                    });
                  }}
                />
                <Button
                  disabled={
                    this.state.doorId || this.state.doorId == 0 ? false : true
                  }
                  style={{ position: "absolute" }}
                  type={"primary"}
                  onClick={this.verifyDoor}
                >
                  验证重复
                </Button>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem className="half-item" {...formItemLayout} label="姓名">
                <Input
                  placeholder="请输入姓名"
                  style={{ width: 200 }}
                  value={this.state.name}
                  onChange={(e) => {
                    this.setState({
                      name: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="出生日期"
              >
                <DatePicker
                  value={
                    this.state.birthdays ? moment(this.state.birthdays) : null
                  }
                  onChange={(e, t) => {
                    this.setState({
                      birthdays: t,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem className="half-item" {...formItemLayout} label="性别">
                <Radio.Group
                  onChange={(e) => {
                    this.setState({ sex: e.target.value });
                  }}
                  value={this.state.sex}
                >
                  <Radio value={0}>男</Radio>
                  <Radio value={1}>女</Radio>
                </Radio.Group>
              </FormItem>
              <FormItem className="half-item" {...formItemLayout} label="民族">
                <Input
                  placeholder="输入民族（例：汉族）"
                  style={{ width: 200 }}
                  value={this.state.nation}
                  onChange={(e) => {
                    this.setState({
                      nation: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="户籍地址"
              >
                <Cascader
                  options={this.state.Area}
                  value={this.state.residence}
                  placeholder="选择城市"
                  style={{ width: "200px" }}
                  onChange={(e, pre) => {
                    this.setState({ residence: e });
                  }}
                />
                {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="户籍街道地址"
              >
                <Input
                  placeholder="输入街道地址"
                  style={{ width: 200 }}
                  value={this.state.residenceAddress}
                  onChange={(e) => {
                    this.setState({
                      residenceAddress: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="现住地址"
              >
                <Cascader
                  options={this.state.Area}
                  value={this.state.now}
                  placeholder="选择城市"
                  style={{ width: "200px" }}
                  onChange={(e, pre) => {
                    this.setState({ now: e });
                  }}
                />
                {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="现住街道地址"
              >
                <Input
                  placeholder="输入街道地址"
                  style={{ width: 200 }}
                  value={this.state.nowAddress}
                  onChange={(e) => {
                    this.setState({
                      nowAddress: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem className="half-item" {...formItemLayout} label="籍贯">
                <Cascader
                  options={this.state.Birthplaces}
                  value={this.state.nativePlace}
                  placeholder="选择城市"
                  style={{ width: "200px" }}
                  onChange={(e, pre) => {
                    this.setState({ nativePlace: e });
                  }}
                />
                {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="身份证"
              >
                <Input
                  placeholder="输入身份证信息"
                  style={{ width: 200 }}
                  value={this.state.idCard}
                  onChange={(e) => {
                    // let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                    this.setState({
                      idCard: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="身份证领证机关"
              >
                <Input
                  placeholder="输入机关名称"
                  style={{ width: 200 }}
                  value={this.state.certificationAuthority}
                  onChange={(e) => {
                    // let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                    this.setState({
                      certificationAuthority: e.target.value,
                    });
                  }}
                />
                {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="婚姻状态"
              >
                <Radio.Group
                  onChange={(e) => {
                    this.setState({ marriage: e.target.value });
                  }}
                  value={this.state.marriage}
                >
                  <Radio value={0}>未婚</Radio>
                  <Radio value={1}>已婚</Radio>
                  <Radio value={2}>离异</Radio>
                </Radio.Group>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="子女数量"
              >
                <span>儿子：</span>
                <Input
                  placeholder="输入数量"
                  style={{ width: 80 }}
                  type={"number"}
                  value={this.state.son}
                  onChange={(e) => {
                    this.setState({
                      son: e.target.value,
                    });
                  }}
                />
                <span style={{ marginLeft: 10 }}>女儿：</span>
                <Input
                  placeholder="输入数量"
                  style={{ width: 80 }}
                  type={"number"}
                  value={this.state.girl}
                  onChange={(e) => {
                    this.setState({
                      girl: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="政治面貌"
              >
                <Select
                  placeholder="请选择政治面貌"
                  style={{ width: 200 }}
                  onChange={(e) => {
                    this.setState({ politicalOutlook: e });
                  }}
                  value={this.state.politicalOutlook}
                >
                  <Option value={0}>群众</Option>
                  <Option value={1}>中共预备党员</Option>
                  <Option value={2}>中共党员</Option>
                  <Option value={3}>致公党党员</Option>
                </Select>
              </FormItem>
            </div>
            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.state.isAddPeo ? this.addOk : this.editOk}
            >
              保存
            </Button>
          </Spin>
        </Modal>
        <Modal
          maskClosable={false}
          visible={this.state.stayVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.stayCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h3
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              任职信息
            </h3>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="员工状态"
              >
                <Select
                  placeholder="请选择状态"
                  style={{ width: 200 }}
                  onChange={(e) => {
                    this.setState({ status: e });
                  }}
                  value={this.state.status}
                >
                  <Option value="0">实习生</Option>
                  <Option value="1">在职（试用期）</Option>
                  <Option value="2">在职（合同期）</Option>
                  <Option value="3">兼职</Option>
                  <Option value="4">已离职</Option>
                </Select>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="所属系统"
              >
                <Select
                  placeholder="请选择所属系统"
                  style={{ width: 200 }}
                  onChange={(e) => {
                    this.setState({ system: e });
                  }}
                  value={this.state.system}
                >
                  <Option value="0">管理系统</Option>
                  <Option value="1">营销系统</Option>
                  <Option value="2">技术系统</Option>
                </Select>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="工作性质"
              >
                <Radio.Group
                  onChange={(e) => {
                    this.setState({ jobNature: e.target.value });
                  }}
                  value={this.state.jobNature}
                >
                  <Radio value="0">全职</Radio>
                  <Radio value="1">兼职</Radio>
                  <Radio value="2">其他</Radio>
                </Radio.Group>
                <Input
                  placeholder="输入性质"
                  style={{
                    width: 80,
                    display:
                      this.state.jobNature == 2 ? "inline-block" : "none",
                  }}
                  value={this.state.jobNatureRemarks}
                  onChange={(e) => {
                    this.setState({
                      jobNatureRemarks: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem className="half-item" {...formItemLayout} label="工龄">
                <span>{this.state.ModalData.workingYear}</span>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="入职时间"
              >
                <DatePicker
                  value={
                    this.state.entryTimes ? moment(this.state.entryTimes) : null
                  }
                  style={{ width: 200 }}
                  onChange={(e, t) => {
                    this.setState({
                      entryTimes: t,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="转正时间"
              >
                <DatePicker
                  value={
                    this.state.promotionTimes
                      ? moment(this.state.promotionTimes)
                      : null
                  }
                  style={{ width: 200 }}
                  onChange={(e, t) => {
                    this.setState({
                      promotionTimes: t,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="所属公司"
              >
                <Select
                  placeholder="选择公司"
                  style={{ width: 200, marginRight: 10 }}
                  value={this.state.company}
                  onChange={(e) => {
                    this.setState({ company: e });
                  }}
                >
                  {departmentArr.map(function (item) {
                    return (
                      <Select.Option key={item.id}>{item.name}</Select.Option>
                    );
                  })}
                </Select>
              </FormItem>
              <FormItem className="half-item" {...formItemLayout} label="级别">
                <Select
                  placeholder="请选择所属级别"
                  style={{ width: 200 }}
                  onChange={(e) => {
                    this.setState({ lvl: e });
                  }}
                  value={this.state.lvl}
                >
                  <Option value="0">员工</Option>
                  <Option value="1">主管</Option>
                  <Option value="2">经理</Option>
                  <Option value="3">总经理</Option>
                  <Option value="4">副总裁</Option>
                  <Option value="5">副总</Option>
                  <Option value="6">总监</Option>
                  <Option value="7">董事长</Option>
                </Select>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem className="half-item" {...formItemLayout} label="职位">
                <Select
                  placeholder="选择职位"
                  style={{ width: 200, marginRight: 10 }}
                  value={this.state.jobs}
                  onChange={(e) => {
                    this.setState({ jobs: e, star: [] });
                    this.getList();
                  }}
                >
                  <Option value="1">员工</Option>
                  <Option value="2">试用营销员</Option>
                  <Option value="3">试用营销储备经理</Option>
                  <Option value="4">营销经理</Option>
                  <Option value="5">总监合伙人</Option>
                  <Option value="6">技术助理</Option>
                  <Option value="7">咨询师</Option>
                  <Option value="8">咨询师主管</Option>
                  <Option value="9">咨询师经理</Option>
                  <Option value="10">高级经理</Option>
                </Select>
              </FormItem>
              <FormItem className="half-item" {...formItemLayout} label="星级">
                <Select
                  placeholder="请选择所属星级"
                  style={{ width: 200 }}
                  onChange={(e) => {
                    this.setState({ star: e });
                  }}
                  value={this.state.star}
                >
                  {this.state.starArr
                    ? this.state.starArr.map((item, index) => {
                        return (
                          <Option value={item.star}>{item.starName}</Option>
                        );
                      })
                    : []}
                </Select>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="岗位津贴"
              >
                <Input
                  placeholder="输入金额"
                  style={{ width: 200 }}
                  value={this.state.allowance}
                  onChange={(e) => {
                    this.setState({
                      allowance: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.editStay}
            >
              保存
            </Button>
          </Spin>
        </Modal>
        <Modal
          maskClosable={false}
          visible={this.state.phoneVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.phoneCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h3
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              联系信息
            </h3>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="手机号码"
              >
                <Input
                  placeholder="输入号码"
                  style={{ width: 200 }}
                  value={this.state.mobile}
                  onChange={(e) => {
                    this.setState({
                      mobile: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="办公室电话"
              >
                <Input
                  placeholder="输入电话"
                  style={{ width: 200 }}
                  value={this.state.fixedTel}
                  onChange={(e) => {
                    this.setState({
                      fixedTel: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="紧急联系人1"
              >
                <Input
                  placeholder="请输入名字"
                  style={{ width: 200 }}
                  value={
                    this.state.contactList.length
                      ? this.state.contactList[0].emergencyContact
                      : ""
                  }
                  onChange={(e) => {
                    this.state.contactList[0].emergencyContact = e.target.value;
                    let obj = this.state.contactList;
                    this.setState({
                      contactList: obj,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="紧急联系人电话"
              >
                <Input
                  placeholder="请输入电话"
                  style={{ width: 200 }}
                  value={
                    this.state.contactList.length
                      ? this.state.contactList[0].emergencyMobile
                      : ""
                  }
                  onChange={(e) => {
                    this.state.contactList[0].emergencyMobile = e.target.value;
                    let obj = this.state.contactList;
                    this.setState({
                      contactList: obj,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="紧急联系人2"
              >
                <Input
                  placeholder="请输入名字"
                  style={{ width: 200 }}
                  value={
                    this.state.contactList.length
                      ? this.state.contactList[1].emergencyContact
                      : ""
                  }
                  onChange={(e) => {
                    this.state.contactList[1].emergencyContact = e.target.value;
                    let obj = this.state.contactList;
                    this.setState({
                      contactList: obj,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="紧急联系人电话"
              >
                <Input
                  placeholder="请输入电话"
                  style={{ width: 200 }}
                  value={
                    this.state.contactList.length
                      ? this.state.contactList[1].emergencyMobile
                      : ""
                  }
                  onChange={(e) => {
                    this.state.contactList[1].emergencyMobile = e.target.value;
                    let obj = this.state.contactList;
                    this.setState({
                      contactList: obj,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="紧急联系人3"
              >
                <Input
                  placeholder="请输入名字"
                  style={{ width: 200 }}
                  value={
                    this.state.contactList.length
                      ? this.state.contactList[2].emergencyContact
                      : ""
                  }
                  onChange={(e) => {
                    this.state.contactList[2].emergencyContact = e.target.value;
                    let obj = this.state.contactList;
                    this.setState({
                      contactList: obj,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="紧急联系人电话"
              >
                <Input
                  placeholder="请输入电话"
                  style={{ width: 200 }}
                  value={
                    this.state.contactList.length
                      ? this.state.contactList[2].emergencyMobile
                      : ""
                  }
                  onChange={(e) => {
                    this.state.contactList[2].emergencyMobile = e.target.value;
                    let obj = this.state.contactList;
                    this.setState({
                      contactList: obj,
                    });
                  }}
                />
              </FormItem>
            </div>
            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.editPhone}
            >
              保存
            </Button>
          </Spin>
        </Modal>
        <Modal
          visible={this.state.entryVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.entryCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h3
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              入职信息
            </h3>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="毕业学校"
              >
                <Input
                  placeholder="输入学校名称"
                  style={{ width: 200 }}
                  value={this.state.school}
                  onChange={(e) => {
                    this.setState({
                      school: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="学历"
              >
                <Select
                  placeholder="请选择学历"
                  style={{ width: 200 }}
                  onChange={(e) => {
                    this.setState({ education: e });
                  }}
                  value={this.state.education}
                >
                  <Option value="0">高中/中专</Option>
                  <Option value="1">专科/高职</Option>
                  <Option value="2">本科</Option>
                  <Option value="3">研究生</Option>
                  <Option value="5">博士</Option>
                </Select>
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="所学专业"
              >
                <Input
                  placeholder="请输入专业名称"
                  style={{ width: 200 }}
                  value={this.state.major}
                  onChange={(e) => {
                    this.setState({
                      major: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="职称"
              >
                <Input
                  placeholder="请输入职称"
                  style={{ width: 200 }}
                  value={this.state.title}
                  onChange={(e) => {
                    this.setState({
                      title: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="备注"
              >
                <Input
                  placeholder="请输入备注"
                  style={{ width: 200 }}
                  value={this.state.entryRemarks}
                  onChange={(e) => {
                    this.setState({
                      entryRemarks: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div
              className="clearfix"
              style={{ paddingLeft: 70, marginBottom: 10 }}
            >
              <div style={{ marginBottom: 10 }}>附件：</div>
              <PicModal
                remarks={this.picToArr(this.state.annexName)}
                picUrl={this.picToArr(this.state.annexUrl)}
                remove={this.ruzhiRemove}
              />
              <Button onClick={this.addPic}>添加附件</Button>
            </div>
            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.editRuzi}
            >
              保存
            </Button>
            <AddPicModal
              cancel={this.addPicModalCancel}
              add={this.add()}
              visible={this.state.addPicModal}
            />
          </Spin>
        </Modal>

        <Modal
          visible={this.state.upgradeVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.upgradeCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h3
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              晋升信息
            </h3>
            <div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="当前职位"
                >
                  <Select
                    placeholder="选择职位"
                    style={{ width: 200, marginRight: 10 }}
                    value={this.state.promotionList.oldJobs}
                    onChange={(e) => {
                      this.setState({ jobs: e, star: [] });
                      this.getList();
                      this.state.promotionList.oldJobs = e;
                      this.state.promotionList.oldLvl = [];
                      this.setState({
                        promotionList: this.state.promotionList,
                      });
                    }}
                  >
                    <Option value="1">员工</Option>
                    <Option value="2">试用营销员</Option>
                    <Option value="3">试用营销储备经理</Option>
                    <Option value="4">营销经理</Option>
                    <Option value="5">总监合伙人</Option>
                    <Option value="6">技术助理</Option>
                    <Option value="7">咨询师</Option>
                    <Option value="8">咨询师主管</Option>
                    <Option value="9">咨询师经理</Option>
                    <Option value="10">高级经理</Option>
                  </Select>
                </FormItem>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="当前星级"
                >
                  <Select
                    placeholder="请选择所属星级"
                    style={{ width: 200 }}
                    onChange={(e) => {
                      this.state.promotionList.oldLvl = e;
                      this.setState({
                        promotionList: this.state.promotionList,
                      });
                    }}
                    value={this.state.promotionList.oldLvl}
                  >
                    {this.state.starArr.map((item, index) => {
                      return <Option value={item.star}>{item.starName}</Option>;
                    })}
                  </Select>
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="晋升后职位"
                >
                  <Select
                    placeholder="选择职位"
                    style={{ width: 200, marginRight: 10 }}
                    value={this.state.promotionList.newJobs}
                    onChange={(e) => {
                      this.setState({ jobss: e });
                      this.getLists();
                      this.state.promotionList.newJobs = e;
                      this.state.promotionList.newLvl = [];
                      this.setState({
                        promotionList: this.state.promotionList,
                      });
                    }}
                  >
                    <Option value="1">员工</Option>
                    <Option value="2">试用营销员</Option>
                    <Option value="3">试用营销储备经理</Option>
                    <Option value="4">营销经理</Option>
                    <Option value="5">总监合伙人</Option>
                    <Option value="6">技术助理</Option>
                    <Option value="7">咨询师</Option>
                    <Option value="8">咨询师主管</Option>
                    <Option value="9">咨询师经理</Option>
                    <Option value="10">高级经理</Option>
                  </Select>
                </FormItem>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="晋升后星级"
                >
                  <Select
                    placeholder="请选择所属星级"
                    style={{ width: 200 }}
                    onChange={(e) => {
                      this.state.promotionList.newLvl = e;
                      this.setState({
                        promotionList: this.state.promotionList,
                      });
                    }}
                    value={this.state.promotionList.newLvl}
                  >
                    {this.state.starArrs.map((item, index) => {
                      return <Option value={item.star}>{item.starName}</Option>;
                    })}
                  </Select>
                </FormItem>
              </div>

              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="晋升时间"
                >
                  <DatePicker
                    value={
                      this.state.promotionList.promotionTimes
                        ? moment(this.state.promotionList.promotionTimes)
                        : null
                    }
                    style={{ width: 200 }}
                    onChange={(e, t) => {
                      this.state.promotionList.promotionTimes = t;
                      this.setState({
                        promotionList: this.state.promotionList,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="备注"
                >
                  <Input
                    placeholder="请输入备注"
                    style={{ width: 200 }}
                    value={this.state.promotionList.promotionRemarks}
                    onChange={(e) => {
                      this.state.promotionList.promotionRemarks =
                        e.target.value;
                      this.setState({
                        promotionList: this.state.promotionList,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div
                className="clearfix"
                style={{ paddingLeft: 70, marginBottom: 10 }}
              >
                <div style={{ marginBottom: 10 }}>附件：</div>
                <PicModal
                  remarks={this.picToArr(this.state.promotionList.annexName)}
                  picUrl={this.picToArr(this.state.promotionList.annexUrl)}
                  remove={this.jinshengRemove}
                />
                <Button onClick={this.addPic}>添加附件</Button>
              </div>
            </div>

            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.editUpgrade}
            >
              保存
            </Button>
            <AddPicModal
              cancel={this.addPicModalCancel}
              add={this.add()}
              visible={this.state.addPicModal}
            />
          </Spin>
        </Modal>
        <Modal
          visible={this.state.contractVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.contractCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h3
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              合同信息
            </h3>
            <div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="签订时间"
                >
                  <DatePicker
                    value={
                      this.state.contractList.startTimes
                        ? moment(this.state.contractList.startTimes)
                        : null
                    }
                    style={{ width: 200 }}
                    onChange={(e, t) => {
                      this.state.contractList.startTimes = t;
                      this.setState({
                        contractList: this.state.contractList,
                      });
                    }}
                  />
                </FormItem>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="到期时间"
                >
                  <DatePicker
                    disabledDate={(e) => {
                      let time = moment(e).valueOf();
                      let today = moment(
                        this.state.contractList.startTimes
                      ).valueOf();
                      if (time <= today) {
                        return true;
                      } else if (!this.state.contractList.startTimes) {
                        return true;
                      }
                    }}
                    value={
                      this.state.contractList.endTimes
                        ? moment(this.state.contractList.endTimes)
                        : null
                    }
                    style={{ width: 200 }}
                    onChange={(e, t) => {
                      this.state.contractList.endTimes = t;
                      this.setState({
                        contractList: this.state.contractList,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="备注"
                >
                  <Input
                    placeholder="请输入备注"
                    style={{ width: 200 }}
                    value={this.state.contractList.contractRemarks}
                    onChange={(e) => {
                      this.state.contractList.contractRemarks = e.target.value;
                      this.setState({
                        contractList: this.state.contractList,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div
                className="clearfix"
                style={{ paddingLeft: 70, marginBottom: 10 }}
              >
                <div style={{ marginBottom: 10 }}>附件：</div>
                <PicModal
                  remarks={this.picToArr(this.state.contractList.annexName)}
                  picUrl={this.picToArr(this.state.contractList.annexUrl)}
                  remove={this.contractRemove}
                />
                <Button onClick={this.addPic}>添加附件</Button>
              </div>
            </div>

            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.editContract}
            >
              保存
            </Button>
            <AddPicModal
              cancel={this.addPicModalCancel}
              add={this.add()}
              visible={this.state.addPicModal}
            />
          </Spin>
        </Modal>
        <Modal
          visible={this.state.chooseVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.chooseCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h3
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              奖惩信息
            </h3>
            <div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="类型"
                >
                  <Radio.Group
                    onChange={(e) => {
                      this.state.chooseList.chooseStatus = e.target.value;
                      this.setState({ chooseList: this.state.chooseList });
                    }}
                    value={this.state.chooseList.chooseStatus}
                  >
                    <Radio value={0}>奖励</Radio>
                    <Radio value={1}>罚款</Radio>
                  </Radio.Group>
                </FormItem>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="时间"
                >
                  <DatePicker
                    value={
                      this.state.chooseList.effectTimes
                        ? moment(this.state.chooseList.effectTimes)
                        : null
                    }
                    style={{ width: 200 }}
                    onChange={(e, t) => {
                      this.state.chooseList.effectTimes = t;
                      this.setState({
                        chooseList: this.state.chooseList,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="内容"
                >
                  <Input
                    placeholder="请输入内容"
                    style={{ width: 200 }}
                    value={this.state.chooseList.chooseRemarks}
                    onChange={(e) => {
                      this.state.chooseList.chooseRemarks = e.target.value;
                      this.setState({
                        chooseList: this.state.chooseList,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div
                className="clearfix"
                style={{ paddingLeft: 70, marginBottom: 10 }}
              >
                <div style={{ marginBottom: 10 }}>附件：</div>
                <PicModal
                  remarks={this.picToArr(this.state.chooseList.annexName)}
                  picUrl={this.picToArr(this.state.chooseList.annexUrl)}
                  remove={this.chooseRemove}
                />
                <Button onClick={this.addPic}>添加附件</Button>
              </div>
            </div>

            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.editChoose}
            >
              保存
            </Button>
            <AddPicModal
              cancel={this.addPicModalCancel}
              add={this.add()}
              visible={this.state.addPicModal}
            />
          </Spin>
        </Modal>
        <Modal
          visible={this.state.quitVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.quitCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h3
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              离职信息
            </h3>
            <div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="离职时间"
                >
                  <DatePicker
                    value={
                      this.state.quitList.effectTimes
                        ? moment(this.state.quitList.effectTimes)
                        : null
                    }
                    style={{ width: 200 }}
                    onChange={(e, t) => {
                      this.state.quitList.effectTimes = t;
                      this.setState({
                        quitList: this.state.quitList,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="备注"
                >
                  <Input
                    placeholder="请输入备注"
                    style={{ width: 200 }}
                    value={this.state.quitList.quitRemarks}
                    onChange={(e) => {
                      this.state.quitList.quitRemarks = e.target.value;
                      this.setState({
                        quitList: this.state.quitList,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div
                className="clearfix"
                style={{ paddingLeft: 70, marginBottom: 10 }}
              >
                <div style={{ marginBottom: 10 }}>附件：</div>
                <PicModal
                  remarks={this.picToArr(this.state.quitList.annexName)}
                  picUrl={this.picToArr(this.state.quitList.annexUrl)}
                  remove={this.quitRemove}
                />
                <Button onClick={this.addPic}>添加附件</Button>
              </div>
            </div>

            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.editQuit}
            >
              保存
            </Button>
            <AddPicModal
              cancel={this.addPicModalCancel}
              add={this.add()}
              visible={this.state.addPicModal}
            />
          </Spin>
        </Modal>
        <Modal
          visible={this.state.welfareVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.welfareCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h3
              style={{
                textAlign: "center",
                paddingBottom: 10,
              }}
            >
              福利信息
            </h3>
            <Button
              type="primary"
              style={{ marginBottom: 5 }}
              onClick={(e) => {
                this.welfareTable();
              }}
            >
              新建信息
            </Button>
            <div>
              <div className="clearfix" style={{ marginBottom: 10 }}>
                <Table
                  columns={this.state.welfareColumnsEdit}
                  type="textarea"
                  dataSource={this.state.ModalData.welfareList}
                  pagination={false}
                  bordered
                  size="small"
                  scroll={{ x: "max-content", y: 0 }}
                />
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="备注"
                >
                  <Input
                    placeholder="请输入备注"
                    style={{ width: 200 }}
                    value={this.state.ModalData.welfareRemarks}
                    onChange={(e) => {
                      this.state.ModalData.welfareRemarks = e.target.value;
                      this.setState({
                        ModalData: this.state.ModalData,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div
                className="clearfix"
                style={{ paddingLeft: 70, marginBottom: 10 }}
              >
                <div style={{ marginBottom: 10 }}>附件：</div>
                <PicModal
                  remarks={this.picToArr(this.state.ModalData.welfareAnnexName)}
                  picUrl={this.picToArr(this.state.ModalData.welfareAnnexUrl)}
                  remove={this.welfareRemove}
                />
                <Button onClick={this.addPic}>添加附件</Button>
              </div>
            </div>

            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.editWelfare}
            >
              保存
            </Button>
            <AddPicModal
              cancel={this.addPicModalCancel}
              add={this.add()}
              visible={this.state.addPicModal}
            />
          </Spin>
        </Modal>
        <Modal
          visible={this.state.editWelfareVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.setState({
              editWelfareVisible: false,
            });
          }}
        >
          <Spin spinning={this.state.loading}>
            <div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="福利类型"
                >
                  <Select
                    placeholder="请选择类型"
                    value={this.state.editWelfareData.type}
                    onChange={(e) => {
                      this.state.editWelfareData.type = e;
                      this.setState({
                        editWelfareData: this.state.editWelfareData,
                      });
                    }}
                    style={{ width: 120, marginRight: 10 }}
                  >
                    <Option value={0}>社保</Option>
                    <Option value={1}>公积金</Option>
                    <Option value={2}>雇主险</Option>
                  </Select>
                </FormItem>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="福利状态"
                >
                  <Select
                    placeholder="请选择状态"
                    onChange={(e) => {
                      this.state.editWelfareData.status = e;
                      this.setState({
                        editWelfareData: this.state.editWelfareData,
                      });
                    }}
                    style={{ width: 120, marginRight: 10 }}
                    value={this.state.editWelfareData.status}
                  >
                    <Option value={0}>未购买</Option>
                    <Option value={1}>已购买</Option>
                    <Option value={2}>已停止</Option>
                  </Select>
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  style={{
                    display:
                      this.state.editWelfareData.status == 1 ? "block" : "none",
                  }}
                  label="购买时间"
                >
                  <DatePicker
                    value={
                      this.state.editWelfareData.startTimes
                        ? moment(this.state.editWelfareData.startTimes)
                        : null
                    }
                    style={{ width: 200 }}
                    onChange={(e, t) => {
                      this.state.editWelfareData.startTimes = t;
                      this.setState({
                        editWelfareData: this.state.editWelfareData,
                      });
                    }}
                  />
                </FormItem>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  style={{
                    display:
                      this.state.editWelfareData.status == 2 ? "block" : "none",
                  }}
                  label="停缴时间"
                >
                  <DatePicker
                    value={
                      this.state.editWelfareData.endTimes
                        ? moment(this.state.editWelfareData.endTimes)
                        : null
                    }
                    style={{ width: 200 }}
                    onChange={(e, t) => {
                      this.state.editWelfareData.endTimes = t;
                      this.setState({
                        editWelfareData: this.state.editWelfareData,
                      });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  style={{
                    display:
                      this.state.editWelfareData.status == 1 ? "block" : "none",
                  }}
                  label="参保公司"
                >
                  <Select
                    placeholder="选择公司"
                    style={{ width: 200, marginRight: 10 }}
                    value={
                      this.state.editWelfareData.depId
                        ? this.state.editWelfareData.depId
                        : undefined
                    }
                    onChange={(e) => {
                      this.state.editWelfareData.depId = e;
                      this.setState({
                        editWelfareData: this.state.editWelfareData,
                      });
                    }}
                  >
                    {departmentArr.map(function (item) {
                      return (
                        <Select.Option key={item.id}>{item.name}</Select.Option>
                      );
                    })}
                  </Select>
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  style={{
                    display:
                      this.state.editWelfareData.status == 0 ? "block" : "none",
                  }}
                  label="未购买备注"
                >
                  <Input
                    placeholder="请输入备注信息"
                    style={{ width: 200 }}
                    value={this.state.editWelfareData.welfareRemarks}
                    onChange={(e) => {
                      this.state.editWelfareData.welfareRemarks =
                        e.target.value;
                      this.setState({
                        editWelfareData: this.state.editWelfareData,
                      });
                    }}
                  />
                </FormItem>
              </div>
            </div>
            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.editWelfareDataOk}
            >
              保存
            </Button>
          </Spin>
        </Modal>
      </div>
    );
  },
});

export default PersonnelAll;