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 "./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"
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.nameSearch,
        company: this.state.nameSearch,
        sex: this.state.nameSearch,
        marriage: this.state.nameSearch,
        politicalOutlook: this.state.nameSearch,
        birthdayMonth: this.state.nameSearch,
        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 {
      ModalData: [],
      contractTime: [],
      quitTime: [],
      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: "id",
          key: "id",
        },
        {
          title: "门禁编号",
          dataIndex: "doorId",
          key: "doorId",
        },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "员工状态",
          dataIndex: "status",
          key: "status",
          render: (text) => {
            if (text == 0) {
              return "在职（试用期）";
            } else if (text == 1) {
              return "在职（正式工）";
            } else if (text == 2) {
              return "离职";
            }
          },
        },
        {
          title: "所属系统",
          dataIndex: "system",
          key: "system",
          render: (text) => {
            if (text == 0) {
              return "管理系统";
            } else if (text == 1) {
              return "营销系统";
            } else if (text == 2) {
              return "技术系统";
            }
          },
        },
        {
          title: "公司名称",
          dataIndex: "depName",
          key: "depName",
        },
        {
          title: "职位名称",
          dataIndex: "jobsName",
          key: "jobsName",
        },
        {
          title: "等级名称",
          dataIndex: "starName",
          key: "starName",
        },
        {
          title: "入职时间",
          dataIndex: "entryTimes",
          key: "entryTimes",
        },
        {
          title: "转正时间",
          dataIndex: "promotionTimes",
          key: "promotionTimes",
        },
        {
          title: "生日日期",
          dataIndex: "birthdays",
          key: "birthdays",
        },
        {
          title: "性别",
          dataIndex: "sex",
          key: "sex",
          render: (text) => {
            if (text == 0) {
              return "男";
            } else if (text == 1) {
              return "女";
            }
          },
        },
        {
          title: "子/女",
          dataIndex: "son",
          key: "son",
          render: (text, record) => {
            return <span>{text + "/" + record.girl}</span>;
          },
        },
        {
          title: "政治面貌",
          dataIndex: "politicalOutlook",
          key: "politicalOutlook",
          render: (text) => {
            if (text == 0) {
              return "群众";
            } else if (text == 1) {
              return "中共预备党员";
            } else if (text == 2) {
              return "中共党员";
            } else if (text == 3) {
              return "致公党员";
            }
          },
        },
        {
          title: "教育经历",
          dataIndex: "education",
          key: "education",
          render: (text) => {
            if (text == 0) {
              return "高中/中专";
            } else if (text == 1) {
              return "专科/高职";
            } else if (text == 2) {
              return "本科";
            } else if (text == 3) {
              return "研究生";
            } else if (text == 5) {
              return "博士";
            }
          },
        },
        {
          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) => {
            if (text) {
              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: "quitTime",
          key: "quitTime",
        },
        {
          title: "工作年限",
          dataIndex: "workingYear",
          key: "workingYear",
        },
        {
          title: "年龄",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "出生月份",
          dataIndex: "month",
          key: "month",
        },
      ],
      dataSource: [],
      resVisible: false,
      table: [
        {
          key: "员工编号",
          value: "id",
        },
        {
          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",
        },
      ],
    };
  },
  /* 分派 */
  evaluate(record, nub) {
    this.state.assignData = record;
    this.setState(
      {
        nub,
      },
      () => {
        this.setState({
          assignVisible: true,
        });
      }
    );
  },

  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()
  },
  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)
    });
  },
  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({
      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,
      son: undefined,
      girl: undefined,
      birthdays: undefined,
      marriage: undefined,
    });
  },
  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,
      },
      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)
    );
  },
  editPeo() {

  },
  stayModal() {
    this.setState({
      stayVisible: true
    })
  },
  stayCancel() {
    this.setState({
      stayVisible: false
    })
  },
  editStay() {

  },
  phoneModal() {
    this.setState({
      phoneVisible: true
    });
  },
  phoneCancel() {
    this.setState({
      phoneVisible: false
    });
  },
  editPhone() {

  },
  entryModal() {
    this.setState({
      entryVisible: true
    });
  },
  entryCancel() {
    this.setState({
      entryVisible: false
    })
  },
  cancel() {
    this.setState({
      visible: false
    })
  },
  tableRowClick(record) {
    this.setState({
      visible: true,
    })
    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()
  },
  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) {
    let arr = e.split(",")
    console.log(arr);
    
    return arr
  },
  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="1">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={this.state.columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
          <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>
              </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, marginRight: 370 }}
                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>
              <span style={{}}>转正日期：</span>
              <RangePicker
                style={{ marginRight: 10 }}
                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 }}
                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: 21 }}
                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 }}
                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>
            <Button
              type="primary"
              onClick={this.phoneModal}
              style={{ margin: "11px 0px 10px 10px" }}
            >
              修改联系信息
            </Button>
            <Button
              type="primary"
              onClick={this.entryModal}
              style={{ margin: "11px 0px 10px 10px" }}
            >
              修改入职信息
            </Button>
          </TabPane>
          <TabPane tab="导出Excel" key="4">
            <Button type="primary" style={{ margin: "11px 0px 10px 10px" }}>
              导出当前列表
            </Button>
          </TabPane>
          <TabPane tab="查看" key="5">
            <Button
              type="primary"
              style={{ margin: "11px 0px 10px 10px" }}
              onClick={() => {}}
            >
              详情收款流水
            </Button>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <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
          visible={this.state.peoVisible}
          onOk={this.checkOk}
          footer={null}
          width={800}
          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 }}
                  disabled
                  value={this.state.contractNoSearch}
                  onChange={(e) => {
                    this.setState({
                      contractNoSearch: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="门禁编号"
              >
                <Input
                  style={{ width: 200 }}
                  placeholder="请输入门禁编号"
                  value={this.state.doorId}
                  onChange={(e) => {
                    this.setState({
                      doorId: e.target.value,
                    });
                  }}
                />
              </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 });
                    console.log(e, pre);
                  }}
                />
                {/* <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 });
                    console.log(e, pre);
                  }}
                />
                {/* <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 });
                    console.log(e, pre);
                  }}
                />
                {/* <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.editPeo}
            >
              保存
            </Button>
          </Spin>
        </Modal>
        <Modal
          visible={this.state.stayVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.stayCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h2
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              修改任职信息
            </h2>
            <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 }}
                  disabled={this.state.jobNatureRemarks == 2 ? false : true}
                  value={this.state.jobNatureRemarks}
                  onChange={(e) => {
                    this.setState({
                      jobNatureRemarks: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem className="half-item" {...formItemLayout} label="工龄">
                <span>2</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 });
                  }}
                >
                  <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>
              <FormItem className="half-item" {...formItemLayout} label="星级">
                <Select
                  placeholder="请选择所属星级"
                  style={{ width: 200 }}
                  onChange={(e) => {
                    this.setState({ star: e });
                  }}
                  value={this.state.star}
                >
                  <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"
                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
          visible={this.state.phoneVisible}
          footer={null}
          width={800}
          onCancel={() => {
            this.loadData();
            this.phoneCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h2
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              修改联系信息
            </h2>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="手机号码"
              >
                <Input
                  placeholder="输入号码"
                  style={{ width: 200 }}
                  value={this.state.phone}
                  onChange={(e) => {
                    this.setState({
                      phone: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="办公室电话"
              >
                <Input
                  placeholder="输入金额"
                  style={{ width: 200 }}
                  value={this.state.bgs}
                  onChange={(e) => {
                    this.setState({
                      bgs: 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.lianxiren}
                  onChange={(e) => {
                    this.setState({
                      lianxiren: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="紧急联系人电话"
              >
                <Input
                  placeholder="请输入电话"
                  style={{ width: 200 }}
                  value={this.state.jjphone}
                  onChange={(e) => {
                    this.setState({
                      jjphone: e.target.value,
                    });
                  }}
                />
              </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.lianxiren}
                  onChange={(e) => {
                    this.setState({
                      lianxiren: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="紧急联系人电话"
              >
                <Input
                  placeholder="请输入电话"
                  style={{ width: 200 }}
                  value={this.state.jjphone}
                  onChange={(e) => {
                    this.setState({
                      jjphone: e.target.value,
                    });
                  }}
                />
              </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.lianxiren}
                  onChange={(e) => {
                    this.setState({
                      lianxiren: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="紧急联系人电话"
              >
                <Input
                  placeholder="请输入电话"
                  style={{ width: 200 }}
                  value={this.state.jjphone}
                  onChange={(e) => {
                    this.setState({
                      jjphone: e.target.value,
                    });
                  }}
                />
              </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}>
            <h2
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              修改入职信息
            </h2>
            <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({ politicalOutlook: e });
                  }}
                  value={this.state.politicalOutlook}
                >
                  <Option value="0">高中/中专</Option>
                  <Option value="1">专科/高职</Option>
                  <Option value="2">本科</Option>
                  <Option value="3">研究生</Option>
                  <Option value="4">博士</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.zhuanye}
                  onChange={(e) => {
                    this.setState({
                      zhuanye: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="职称"
              >
                <Input
                  placeholder="请输入职称"
                  style={{ width: 200 }}
                  value={this.state.zhicheng}
                  onChange={(e) => {
                    this.setState({
                      zhicheng: 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.beizhu}
                  onChange={(e) => {
                    this.setState({
                      beizhu: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 30 }}
                label="附件"
              >
                <Upload
                  className="demandDetailShow-upload"
                  listType="picture-card"
                  fileList={
                    this.state.pic
                      ? splitUrl(
                          this.state.pic,
                          ",",
                          globalConfig.avatarHost + "/upload"
                        )
                      : []
                  }
                  onPreview={(file) => {
                    this.setState({
                      previewImage: file.url || file.thumbUrl,
                      previewVisible: true,
                    });
                  }}
                />
                <Button>添加附件</Button>
              </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.visible}
          footer={null}
          width={1000}
          onCancel={() => {
            this.loadData();
            this.cancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h2
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              {this.state.ModalData.name + "人事档案"}
            </h2>
            <ul 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>
            <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.entryTimes}
              </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>
            </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}
                    >
                      {item.emergencyContact}
                    </FormItem>
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 30 }}
                      label={"紧急联系人" + index + "电话"}
                    >
                      {item.emergencyMobile}
                    </FormItem>
                  </div>
                );
              })
            ) : (
              <div
                style={{ textAlign: "center", height: 60, lineHeight: "60px" }}
              >
                暂无紧急联系人信息
              </div>
            )}
            <div className="title-peo">
              <span>入职资料</span>
            </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>
            </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" }}
                  >
                    <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>
                      <FormItem
                        className="half-item"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 30 }}
                        label="晋升备注"
                      >
                        {item.promotionRemarks}
                      </FormItem>
                    </div>
                    <div
                      className="clearfix"
                      style={{ paddingLeft: 70, marginBottom: 10 }}
                    >
                      <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>
            </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" }}
                  >
                    <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
                        className="half-item"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 30 }}
                        label="备注"
                      >
                        {item.contractRemarks}
                      </FormItem>
                    </div>
                    <div
                      className="clearfix"
                      style={{ paddingLeft: 70, marginBottom: 10 }}
                    >
                      <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>
            </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" }}
                  >
                    <div className="clearfix">
                      <FormItem
                        className="half-item"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 30 }}
                        label={item.chooseStatus == 0 ? "奖励" : "惩罚"}
                      >
                        {item.chooseRemarks}
                      </FormItem>
                      <FormItem
                        className="half-item"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 30 }}
                        label="时间"
                      >
                        {item.effectTimes}
                      </FormItem>
                    </div>
                    <div
                      className="clearfix"
                      style={{ paddingLeft: 70, marginBottom: 10 }}
                    >
                      <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>
            </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" }}
                  >
                    <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: 10 }}
                    >
                      <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>
            )}
          </Spin>
        </Modal>
      </div>
    );
  },
});

export default PersonnelAll;
