import React from "react";
import $ from "jquery/src/ajax";
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,
} from "antd";
import {} from "@/tools";
import { getProvinceList } from "@/addressList";
const FormItem = Form.Item;
const { TabPane } = Tabs;
const { TextArea } = Input;
const PersonnelAll = React.createClass({
  loadData(pageNo) {
    this.state.data = [];
    this.setState({
      page: pageNo,
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/orderTaskList",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        specially: 1, //经理
        name: this.state.nameSearch, //客户名称
        orderNo: this.state.orderNoSearch, //订单编号
        taskId: this.state.taskNoSearch, //任务编号
        depId: this.state.departmenttSearch, //订单部门
        taskStatus: this.state.taskStatus, //任务状态
        adminName: this.state.adminName, //任务受理人
        outsource: 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];
            if (thisdata.splitList) {
              thisdata.splitList.forEach((item) => {
                item.key = item.id;
              });
            }
            theArr.push({
              key: thisdata.id,
              orderNo: thisdata.orderNo, //订单编号
              id: thisdata.id, //任务ID
              taskName: thisdata.taskName, //名称
              cname: thisdata.cname, //项目品类
              receiverName: thisdata.receiverName, //受理人
              projectStatus: thisdata.projectStatus, //项目状态
              taskStatus: thisdata.taskStatus, //任务状态
              taskDate: thisdata.taskDate, //分配时间
              commodityQuantity: thisdata.commodityQuantity, //数量
              userName: thisdata.userName, //用户名
              depName: thisdata.depName, //部门名称
              splitStatus: thisdata.splitStatus, //拆分状态
              splitList: thisdata.splitList,
            });
          }
        }
        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 {
      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: "name",
          key: "name",
        },
      ],
      dataSource: [],
      resVisible: false,
    };
  },
  /* 分派 */
  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() {

  },
  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="订单编号"
                value={this.state.orderNoSearch}
                onChange={(e) => {
                  this.setState({ orderNoSearch: e.target.value });
                }}
              />
              <Input
                placeholder="客户名称"
                value={this.state.nameSearch}
                onChange={(e) => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              <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>
              <Input
                placeholder="合同编号"
                value={this.state.contractNoSearch}
                onChange={(e) => {
                  this.setState({
                    contractNoSearch: e.target.value,
                  });
                }}
              />
              <Select
                placeholder="流程状态"
                onChange={(e) => {
                  this.setState({ processStatusSearch: e });
                }}
                style={{ width: 120, marginRight: 5 }}
                value={this.state.processStatusSearch}
              >
                <Option value="3">未分配</Option>
                <Option value="4">已分配</Option>
                <Option value="9">已驳回</Option>
              </Select>
              <Select
                placeholder="结算状态"
                onChange={(e) => {
                  this.setState({ liquidationStatus: e });
                }}
                style={{ width: 120, marginRight: 5 }}
                value={this.state.liquidationStatus}
              >
                <Option value="0">首付待付清</Option>
                <Option value="1">尾款待付清</Option>
                <Option value="2">已付清</Option>
              </Select>
              <Select
                style={{ width: 120 }}
                placeholder="签单金额"
                value={this.state.amountStatus}
                onChange={(e) => {
                  this.setState({
                    amountStatus: e,
                  });
                }}
              >
                <Option value="0">10万元以下</Option>
                <Option value="1">10~20万元</Option>
                <Option value="2">20~30万元</Option>
                <Option value="3">30~40万元</Option>
                <Option value="4">40万元以上</Option>
              </Select>
              <span style={{}}>下单日期:</span>
              <RangePicker
                value={[
                  this.state.releaseDate[0]
                    ? moment(this.state.releaseDate[0])
                    : null,
                  this.state.releaseDate[1]
                    ? moment(this.state.releaseDate[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ releaseDate: dataString });
                }}
              />
              <span style={{}}>最近收款:</span>
              <RangePicker
                value={[
                  this.state.shouKuanDate[0]
                    ? moment(this.state.shouKuanDate[0])
                    : null,
                  this.state.shouKuanDate[1]
                    ? moment(this.state.shouKuanDate[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ shouKuanDate: 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.stayModal}
              style={{ margin: "11px 0px 10px 10px" }}
            >
              修改任职信息
            </Button>
            <Button
              type="primary"
              onClick={this.phoneModal}
              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
              }
              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
                  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.native}
                  placeholder="选择城市"
                  style={{ width: "200px" }}
                  onChange={(e, pre) => {
                    this.setState({ native: 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({ zhiwei: e });
                  }}
                  value={this.state.zhiwei}
                >
                  <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.jobNature == 2 ? false : true}
                  value={this.state.xingzhi}
                  onChange={(e) => {
                    this.setState({
                      xingzhi: 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
                  style={{ width: 200 }}
                  onChange={(e, t) => {
                    this.setState({
                      ruzhi: t,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="转正时间"
              >
                <DatePicker
                  style={{ width: 200 }}
                  onChange={(e, t) => {
                    this.setState({
                      zhuanzheng: t,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="所属公司"
              >
                <Select
                  placeholder="选择公司"
                  style={{ width: 200, marginRight: 10 }}
                  value={this.state.suoxuangongs}
                  onChange={(e) => {
                    this.setState({ suoxuangongs: 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({ jibie: e });
                  }}
                  value={this.state.jibie}
                >
                  <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.zhiwei}
                  onChange={(e) => {
                    this.setState({ zhiwei: 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({ xingji: e });
                  }}
                  value={this.state.xingji}
                >
                  <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.jintie}
                  onChange={(e) => {
                    this.setState({
                      jintie: 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="紧急联系人"
              >
                <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>
      </div>
    );
  },
});

export default PersonnelAll;
