<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      width="1300px"
      @close="close"
      @keyup.enter.native="doSubmit"
      :visible.sync="visible">
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-tabs v-model="activeName" @tab-click="tabHandleClick" :before-leave="tabBeforeLeave">-->
<!--            <el-tab-pane v-for="(item, index) in $dictUtils.getDictList('roster_person_type')" :label="item.label" :name="item.value">-->

<!--            </el-tab-pane>-->
<!--          </el-tabs>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-form size="middle" :model="inputForm" ref="inputForm" :rules="rules" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
               label-width="140px" @submit.native.prevent>

        <el-divider content-position="left"><i class="el-icon-document"></i> 基础信息</el-divider>
        <div v-if="activeName === '1'" :key="keydiv1">
<!--        <el-row  :gutter="15">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="头像" prop="headshot"-->
<!--                          :rules="[-->
<!--                 ]">-->
<!--              <el-popover-->
<!--                placement="left"-->
<!--                trigger="hover">-->
<!--                <el-button style="width: 100%" @click="onPreview(inputForm.headshotLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>-->
<!--                <el-upload-->
<!--                  slot="reference"-->
<!--                  class="avatar-uploader"-->
<!--                  :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"-->
<!--                  :show-file-list="false"-->
<!--                  :on-success="(response, file, fileList) => {-->
<!--                    return handleAvatarSuccess(response, file, fileList, null, 'head')-->
<!--                  }"-->
<!--                  :before-upload="checkIsPic"-->
<!--                >-->
<!--                  <img style="width: 150px; height: 150px; line-height: 150px" v-if="inputForm.headshotLsUrl" :src="inputForm.headshotLsUrl"/>-->
<!--                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                </el-upload>-->
<!--              </el-popover>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-row  :gutter="15">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name"
                          :rules="[{required: true, message: '姓名不能为空', trigger: 'blur'}
                 ]">
              <el-input v-model="inputForm.name" placeholder="请填写姓名"     clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否允许登录" prop="loginFlag" :rules="[{required: true, message: '必须选择', trigger: 'blur'}]">
              <el-radio-group v-model="inputForm.loginFlag">
                <el-radio v-for="item in this.$dictUtils.getDictList('yes_no')" :label="item.value" :key="item.id">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码:" prop="newPassword" :rules="inputForm.id?[]:[{required: true, message:'密码不能为空', trigger:'blur'}]">
              <el-input v-model="inputForm.newPassword" maxlength="50" :placeholder="inputForm.id?'若不修改，请留空':'请输入密码'" show-password></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="confirmNewPassword" :rules="inputForm.id?[{validator: validatePass2, trigger: 'blur'}]:[{required: true, message:'确认密码不能为空', trigger:'blur'},{validator: validatePass2, trigger: 'blur'}]">
              <el-input v-model="inputForm.confirmNewPassword" maxlength="50" :placeholder="inputForm.id?'':'请再次输入密码'" show-password></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="访问其他服务权限" prop="otherServiceFlag" :rules="[{required: true, message: '必须选择', trigger: 'blur'}]">
              <el-radio-group size="middle" v-model="inputForm.otherServiceFlag">
                <el-radio v-for="item in $dictUtils.getDictList('yes_no')" :label="item.value" :key="item.id">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item prop="officeId" :rules="[{required: true, message: '部门不能为空', trigger: 'blur'}]" label="部门">
              <SelectTree
                ref="officeTree"
                :props="{
                  value: 'id',             // ID字段名
                  label: 'name',         // 显示名称
                  children: 'children'    // 子级字段名
                }"
                size="middle"
                :url="`/sys/office/treeData?type=2`"
                :value="inputForm.officeId"
                :clearable="true"
                :accordion="true"
                @getValue="(value) => {inputForm.officeId=value}"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司" prop="companyId">
              <el-select v-model="inputForm.companyId" style="width:100%" placeholder="请选择">
                <el-option
                  v-for="company in companyList"
                  :key="company.id"
                  :label="company.name"
                  :value="company.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleIdList">
              <el-select v-model="inputForm.roleIdList" size="middle" style="width:100%" multiple placeholder="请选择">
                <el-option
                  v-for="role in roleList"
                  :key="role.id"
                  :label="role.name"
                  :value="role.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位" prop="postIdList">
              <el-select v-model="inputForm.postIdList" @change="$forceUpdate()" style="width:100%" multiple placeholder="请选择">
                <el-option
                  v-for="item in postList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理部门" prop="manageOfficeIds">
              <SelectTree
                ref="officeTree"
                :props="{
                  value: 'id',             // ID字段名
                  label: 'name',         // 显示名称
                  children: 'children'    // 子级字段名
                }"
                size="middle"
                :url="`/sys/office/treeData?type=2`"
                :value="inputForm.manageOfficeIds"
                :clearable="false"
                :accordion="true"
                :showCheckbox="true"
                :checkStrictly="true"
                :checkOnClickNode="true"
                @getValue="(value) => {inputForm.manageOfficeIds=value}"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="职位" prop="jobPositionId"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.jobPositionId" style="width:100%" placeholder="请选择职位">
                <el-option
                  v-for="item in jobPositionList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="职务" prop="positionId"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.positionId" style="width:100%" placeholder="请选择职务">
                <el-option
                  v-for="item in positionList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="职级" prop="rankId"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.rankId" style="width:100%" placeholder="请选择职级">
                <el-option
                  v-for="item in rankList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="工号" prop="jobNo"
                          :rules="[
                 ]">
              <el-input :disabled="true" :readonly="true" v-model="inputForm.jobNo" placeholder="请填写工号"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件类型" prop="certificatesType"
                          :rules="[{required: true, message: '证件类型不能为空', trigger: 'blur'}
                 ]">
              <el-select v-model="inputForm.certificatesType" placeholder="请选择证件类型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('certificates_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号" prop="idCard" :rules="[
                    {required: true, message: '证件号不能为空', trigger: 'blur'},
                    {validator: checkIdCardRule, trigger: 'change'},
                    {validator: checkIdCardRule, trigger: 'blur'}
                  ]">
              <el-input v-model="inputForm.idCard" placeholder="请填写证件号"  clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="证件照正面" prop="certificatesFront"
                          :rules="[
                 ]">
              <el-popover
                placement="left"
                trigger="hover">
                <el-button style="width: 100%" @click="onPreview(inputForm.certificatesFrontLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>
                <el-upload
                  slot="reference"
                  class="avatar-uploader"
                  :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
                  :show-file-list="false"
                  :on-success="(response, file, fileList) => {
                    return handleAvatarSuccess(response, file, fileList, null, 'front')
                  }"
                  :before-upload="checkIsPic"
                >
                  <!--                :before-upload="beforeAvatarUpload"-->
                  <img v-if="inputForm.certificatesFrontLsUrl"
                       style="width: 150px; height: 150px; line-height: 150px"
                       :src="inputForm.certificatesFrontLsUrl"/>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件照反面" prop="certificatesBack"
                          :rules="[
                 ]">
              <el-popover
                placement="left"
                trigger="hover">
                <el-button style="width: 100%" @click="onPreview(inputForm.certificatesBackLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>
                <el-upload
                  slot="reference"
                  class="avatar-uploader"
                  :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
                  :show-file-list="false"
                  :on-success="(response, file, fileList) => {
                    return handleAvatarSuccess(response, file, fileList, null, 'back')
                  }"
                  :before-upload="checkIsPic"
                >
                  <img v-if="inputForm.certificatesBackLsUrl"
                       style="width: 150px; height: 150px; line-height: 150px"
                       :src="inputForm.certificatesBackLsUrl"/>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobile">
              <el-input v-model="inputForm.mobile" placeholder="请填写手机号码"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="合同类型" prop="contractType"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.contractType" placeholder="请选择合同类型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('roster_contract_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="员工类型" prop="workerType"
                          :rules="[{required: true, message: '员工类型不能为空', trigger: 'blur'}
                 ]">
              <el-select v-model="inputForm.workerType" placeholder="请选择员工类型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('worker_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="入职日期" prop="onboardingDate">
              <el-date-picker
                placement="bottom-start"
                style="width: 100%"
                v-model="inputForm.onboardingDate"
                type="date"
                placeholder="选择入职日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="历史工龄" prop="seniority">
              <el-input v-model="inputForm.seniority" placeholder="请填写历史工龄"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="合同公司" prop="contractCompany"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.contractCompany" placeholder="请填写合同公司"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.sex" placeholder="请选择性别" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('sex')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker
                placement="bottom-start"
                style="width: 100%"
                v-model="inputForm.birthDate"
                type="date"
                placeholder="选择出生日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="工作地点" prop="workPlace"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.workPlace" placeholder="请填写工作地点"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="联系地址" prop="contactAddress"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.contactAddress" placeholder="请填写联系地址"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="入职年度就业情形" prop="employmentSituation"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.employmentSituation" placeholder="请选择入职年度就业情形" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('employment_situation')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="工时制度" prop="workingHour"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.workingHour" placeholder="请选择入职年度就业情形" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('working_hour_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="ethnic"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.ethnic" filterable placeholder="请选择民族" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('ethnic')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="户口类型" prop="accountType"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.accountType" placeholder="请选择户口类型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('account_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="户口所在地" prop="accountAddr"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.accountAddr" placeholder="请填写户口所在地"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="籍贯" prop="origin"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.origin" placeholder="请填写籍贯"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="居住地址" prop="liveAddr"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.liveAddr" placeholder="请填写居住地址"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="最高学历" prop="highestEducation"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.highestEducation" placeholder="请选择最高学历" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('highest_education')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="政治面貌" prop="politicalFace"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.politicalFace" placeholder="请选择政治面貌" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('political_face')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="婚姻状况" prop="maritalStatus"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.maritalStatus" placeholder="请选择婚姻状况" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('marital_status')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="血型" prop="bloodType"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.bloodType" placeholder="请选择血型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('blood_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="紧急联系人姓名" prop="emergencyContactName"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.emergencyContactName" placeholder="请填写紧急联系人姓名"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="紧急联系人电话" prop="emergencyContactTel"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.emergencyContactTel" placeholder="请填写紧急联系人电话"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="配偶姓名" prop="spouseName"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.spouseName" placeholder="请填写配偶姓名"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="孩子姓名" prop="childName"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.childName" placeholder="请填写孩子姓名"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ" prop="qq">
              <el-input v-model="inputForm.qq" placeholder="请填写QQ"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信" prop="wechat"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.wechat" placeholder="请填写微信"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人邮箱" prop="email">
              <el-input v-model="inputForm.email" placeholder="请填写个人邮箱"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks"
                          :rules="[
                 ]">
              <el-input type="textarea" style="width:100%" maxlength="1000" v-model="inputForm.remarks" placeholder="请填写备注"     ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left"><i class="el-icon-document"></i> 合同信息</el-divider>
        <el-row  :gutter="15">
          <el-col :span="12">
            <el-form-item label="当前合同起始日" prop="rosterContractDTO.beginDate"
                          :rules="[
               ]">
              <el-date-picker
                placement="bottom-start"
                style="width: 100%"
                v-model="inputForm.rosterContractDTO.beginDate"
                type="date"
                placeholder="选择当前合同起始日">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前合同终止日" prop="rosterContractDTO.endDate"
                          :rules="[
               ]">
              <el-date-picker
                placement="bottom-start"
                style="width: 100%"
                v-model="inputForm.rosterContractDTO.endDate"
                type="date"
                placeholder="选择当前合同终止日">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作邮箱" prop="rosterContractDTO.workEmail">
              <el-input v-model="inputForm.rosterContractDTO.workEmail" placeholder="请填写工作邮箱"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作电话" prop="rosterContractDTO.workMobile"
                          :rules="[
               ]">
              <el-input v-model="inputForm.rosterContractDTO.workMobile" placeholder="请填写工作电话"     clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="试用期到期日" prop="rosterContractDTO.probationPeriodEndDate"
                          :rules="[
               ]">
              <el-date-picker
                placement="bottom-start"
                style="width: 100%"
                v-model="inputForm.rosterContractDTO.probationPeriodEndDate"
                type="date"
                placeholder="选择试用期到期日">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="试用期(月)" prop="rosterContractDTO.probationPeriodMonth">
              <el-input v-model="inputForm.rosterContractDTO.probationPeriodMonth" placeholder="请填写试用期(月)" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left"><i class="el-icon-document"></i> 银行卡信息</el-divider>
        <div>
          <el-row  :gutter="15" :key="index_bank" v-for="(item,index_bank) in inputForm.rosterBankCardsDTOList">
            <el-col :span="24">
              <el-form-item label="" >
                <el-divider content-position="left"> 银行卡 {{index_bank + 1}}</el-divider>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工资卡开户银行" :prop="'rosterBankCardsDTOList[' + index_bank + '].payrollCardOpenBank'"
                            :rules="[
               ]">
                <el-select v-model="inputForm.rosterBankCardsDTOList[index_bank].payrollCardOpenBank" filterable placeholder="请选择工资卡开户银行"  style="width: 100%;">
                  <el-option
                    v-for="item in $dictUtils.getDictList('bank_name')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工资卡分支行" :prop="'rosterBankCardsDTOList[' + index_bank + '].payrollCardBranches'"
                            :rules="[
               ]">
                <!--                <el-select v-model="inputForm.rosterBankCardsDTOList[index_bank].payrollCardBranches" placeholder="请选择工资卡分支行"  style="width: 100%;">-->
                <!--                  <el-option-->
                <!--                    v-for="item in $dictUtils.getDictList('bank_name')"-->
                <!--                    :key="item.value"-->
                <!--                    :label="item.label"-->
                <!--                    :value="item.value">-->
                <!--                  </el-option>-->
                <!--                </el-select>-->
                <el-input v-model="inputForm.rosterBankCardsDTOList[index_bank].payrollCardBranches" placeholder="请填写工资卡分支行"></el-input>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工资卡银行账号" :prop="'rosterBankCardsDTOList[' + index_bank + '].payrollCardBankAccount'"
                            :rules="[
                          {validator: validatorXG.isBankNum, trigger: 'change'},
                          {validator: validatorXG.isBankNum, trigger: 'blur'}
               ]">
                <el-input v-model="inputForm.rosterBankCardsDTOList[index_bank].payrollCardBankAccount" placeholder="请填写工资卡银行账号"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工资卡开户名" :prop="'rosterBankCardsDTOList[' + index_bank + '].payrollCardOpeningName'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterBankCardsDTOList[index_bank].payrollCardOpeningName" placeholder="请填写工资卡开户名"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工资卡照片" :prop="'rosterBankCardsDTOList[' + index_bank + '].payrollCardPic'"
                            :rules="[
               ]">
                <el-popover
                  placement="left"
                  trigger="hover">
                  <el-button style="width: 100%" @click="onPreview(inputForm.rosterBankCardsDTOList[index_bank].payrollCardPicLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>
                  <el-upload
                    slot="reference"
                    class="avatar-uploader"
                    :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
                    :show-file-list="false"
                    :on-success="(response, file, fileList) => {
                  return handleAvatarSuccess(response, file, fileList, index_bank, 'bank')
                }"
                    :before-upload="checkIsPic"
                  >
                    <img v-if="inputForm.rosterBankCardsDTOList[index_bank].payrollCardPicLsUrl"
                         style="width: 150px; height: 150px; line-height: 150px"
                         :src="inputForm.rosterBankCardsDTOList[index_bank].payrollCardPicLsUrl"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否为默认" :prop="'rosterBankCardsDTOList[' + index_bank + '].isDefault'"
                            :rules="[
               ]">
                <!--              <el-input v-model="inputForm.rosterBankCardsDTOList[index_bank].isDefault" placeholder="请填写试用期(月)" clearable></el-input>-->

                <el-radio @change="checkBankDefault(index_bank)" v-model="inputForm.rosterBankCardsDTOList[index_bank].isDefault" label="1" size="mini" style="margin-right: 0px" border>是</el-radio>
                <el-radio @change="checkBankDefault(index_bank)" v-model="inputForm.rosterBankCardsDTOList[index_bank].isDefault" label="2" size="mini" border>否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: center">
              <el-form-item label="" >
                <el-button style="width: 50%" type="danger" @click="delRow(index_bank,'bank')" plain>删除银行卡 {{index_bank + 1}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="" >
                <el-button style="width: 100%" type="primary" @click="addRow('bank')" plain>新增银行卡</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-divider content-position="left"><i class="el-icon-document"></i> 教育经历</el-divider>
        <div>
          <el-row  :gutter="15" :key="index_educate" v-for="(item,index_educate) in inputForm.rosterEducateDTOList">
            <el-col :span="24">
              <el-form-item label="" >
                <el-divider content-position="left"> 教育经历 {{index_educate + 1}}</el-divider>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学校" :prop="'rosterEducateDTOList[' + index_educate + '].collegeName'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterEducateDTOList[index_educate].collegeName" placeholder="请填写学校"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业" :prop="'rosterEducateDTOList[' + index_educate + '].profession'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterEducateDTOList[index_educate].profession" placeholder="请填写专业"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入校时间" :prop="'rosterEducateDTOList[' + index_educate + '].entryDate'"
                            :rules="[
               ]">
                <el-date-picker
                  placement="bottom-start"
                  style="width: 100%"
                  v-model="inputForm.rosterEducateDTOList[index_educate].entryDate"
                  type="date"
                  placeholder="选择入校时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业日期" :prop="'rosterEducateDTOList[' + index_educate + '].graduationDate'"
                            :rules="[
               ]">
                <el-date-picker
                  placement="bottom-start"
                  style="width: 100%"
                  v-model="inputForm.rosterEducateDTOList[index_educate].graduationDate"
                  type="date"
                  placeholder="选择毕业日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学历" :prop="'rosterEducateDTOList[' + index_educate + '].degree'"
                            :rules="[
               ]">
                <el-select v-model="inputForm.rosterEducateDTOList[index_educate].degree" placeholder="请选择学历"  style="width: 100%;">
                  <el-option
                    v-for="item in $dictUtils.getDictList('highest_education')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否取得学位" :prop="'rosterEducateDTOList[' + index_educate + '].haveDegree'"
                            :rules="[
               ]">
                <el-radio v-model="inputForm.rosterEducateDTOList[index_educate].haveDegree" label="1" size="mini" style="margin-right: 0px" border>是</el-radio>
                <el-radio v-model="inputForm.rosterEducateDTOList[index_educate].haveDegree" label="2" size="mini" border>否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="教育证书照1" :prop="'rosterEducateDTOList[' + index_educate + '].educationCertFirst'"
                            :rules="[
               ]">
                <el-popover
                  placement="left"
                  trigger="hover">
                  <el-button style="width: 100%" @click="onPreview(inputForm.rosterEducateDTOList[index_educate].educationCertFirstLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>
                  <el-upload
                    slot="reference"
                    class="avatar-uploader"
                    :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
                    :show-file-list="false"
                    :on-success="(response, file, fileList) => {
                  return handleAvatarSuccess(response, file, fileList, index_educate, 'educate_first')
                }"
                    :before-upload="checkIsPic"
                  >
                    <img v-if="inputForm.rosterEducateDTOList[index_educate].educationCertFirstLsUrl"
                         style="width: 150px; height: 150px; line-height: 150px"
                         :src="inputForm.rosterEducateDTOList[index_educate].educationCertFirstLsUrl"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="教育证书照2" :prop="'rosterEducateDTOList[' + index_educate + '].educationCertSecond'"
                            :rules="[
               ]">
                <el-popover
                  placement="left"
                  trigger="hover">
                  <el-button style="width: 100%" @click="onPreview(inputForm.rosterEducateDTOList[index_educate].educationCertSecondLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>
                  <el-upload
                    slot="reference"
                    class="avatar-uploader"
                    :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
                    :show-file-list="false"
                    :on-success="(response, file, fileList) => {
                  return handleAvatarSuccess(response, file, fileList, index_educate, 'educate_second')
                }"
                    :before-upload="checkIsPic"
                  >
                    <img v-if="inputForm.rosterEducateDTOList[index_educate].educationCertSecondLsUrl"
                         style="width: 150px; height: 150px; line-height: 150px"
                         :src="inputForm.rosterEducateDTOList[index_educate].educationCertSecondLsUrl"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: center">
              <el-form-item label="" >
                <el-button style="width: 50%" type="danger" @click="delRow(index_educate,'educate')" plain>删除教育经历 {{index_educate + 1}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="" >
                <el-button style="width: 100%" type="primary" @click="addRow('educate')" plain>新增教育经历</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-divider content-position="left"><i class="el-icon-document"></i> 工作经历</el-divider>
        <div>
          <el-row  :gutter="15" :key="index_work" v-for="(item,index_work) in inputForm.rosterWorkDTOList">
            <el-col :span="24">
              <el-form-item label="" >
                <el-divider content-position="left"> 工作经历 {{index_work + 1}}</el-divider>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司名称" :prop="'rosterWorkDTOList[' + index_work + '].companyName'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterWorkDTOList[index_work].companyName" placeholder="请填写公司名称"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="担任职位" :prop="'rosterWorkDTOList[' + index_work + '].posts'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterWorkDTOList[index_work].posts" placeholder="请填写担任职位"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入职日期" :prop="'rosterWorkDTOList[' + index_work + '].entryDate'"
                            :rules="[
               ]">
                <el-date-picker
                  placement="bottom-start"
                  style="width: 100%"
                  v-model="inputForm.rosterWorkDTOList[index_work].entryDate"
                  type="date"
                  placeholder="选择入职日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="离职日期" :prop="'rosterWorkDTOList[' + index_work + '].separationDate'"
                            :rules="[
               ]">
                <el-date-picker
                  placement="bottom-start"
                  style="width: 100%"
                  v-model="inputForm.rosterWorkDTOList[index_work].separationDate"
                  type="date"
                  placeholder="选择离职日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="职位描述" :prop="'rosterWorkDTOList[' + index_work + '].postDescription'"
                            :rules="[
               ]">
                <el-input type="textarea" v-model="inputForm.rosterWorkDTOList[index_work].postDescription" placeholder="请填写职位描述"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: center">
              <el-form-item label="" >
                <el-button style="width: 50%" type="danger" @click="delRow(index_work,'work')" plain>删除工作经历 {{index_work + 1}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="" >
                <el-button style="width: 100%" type="primary" @click="addRow('work')" plain>新增工作经历</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-divider content-position="left"><i class="el-icon-document"></i> 家庭成员</el-divider>
        <div>
          <el-row  :gutter="15" :key="index_family" v-for="(item,index_family) in inputForm.rosterFamilyDTOList">
            <el-col :span="24">
              <el-form-item label="" >
                <el-divider content-position="left"> 家庭成员 {{index_family + 1}}</el-divider>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="成员姓名" :prop="'rosterFamilyDTOList[' + index_family + '].name'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterFamilyDTOList[index_family].name" placeholder="请填写成员姓名"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关系" :prop="'rosterFamilyDTOList[' + index_family + '].relationship'"
                            :rules="[
               ]">
                <el-select v-model="inputForm.rosterFamilyDTOList[index_family].relationship" placeholder="请选择关系"  style="width: 100%;">
                  <el-option
                    v-for="item in $dictUtils.getDictList('family_relationship')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期" :prop="'rosterFamilyDTOList[' + index_family + '].birthDate'"
                            :rules="[
               ]">
                <el-date-picker
                  placement="bottom-start"
                  style="width: 100%"
                  v-model="inputForm.rosterFamilyDTOList[index_family].birthDate"
                  type="date"
                  placeholder="选择出生日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生证明" :prop="'rosterFamilyDTOList[' + index_family + '].birthCertificate'"
                            :rules="[
               ]">
                <el-popover
                  placement="left"
                  trigger="hover">
                  <el-button style="width: 100%" @click="onPreview(inputForm.rosterFamilyDTOList[index_family].birthCertificateLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>
                  <el-upload
                    slot="reference"
                    class="avatar-uploader"
                    :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
                    :show-file-list="false"
                    :on-success="(response, file, fileList) => {
                  return handleAvatarSuccess(response, file, fileList, index_family, 'family')
                }"
                    :before-upload="checkIsPic"
                  >
                    <img v-if="inputForm.rosterFamilyDTOList[index_family].birthCertificateLsUrl"
                         style="width: 150px; height: 150px; line-height: 150px"
                         :src="inputForm.rosterFamilyDTOList[index_family].birthCertificateLsUrl"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: center">
              <el-form-item label="" >
                <el-button style="width: 50%" type="danger" @click="delRow(index_family,'family')" plain>删除家庭成员 {{index_family + 1}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="" >
                <el-button style="width: 100%" type="primary" @click="addRow('family')" plain>新增家庭成员</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-divider content-position="left"><i class="el-icon-document"></i> 员工证书</el-divider>
        <div>
          <el-row  :gutter="15" :key="index_certificate" v-for="(item,index_certificate) in inputForm.rosterCertificateDTOList">
            <el-col :span="24">
              <el-form-item label="" >
                <el-divider content-position="left"> 员工证书 {{index_certificate + 1}}</el-divider>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证书名称" :prop="'rosterCertificateDTOList[' + index_certificate + '].certName'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterCertificateDTOList[index_certificate].certName" placeholder="请填写证书名称"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证书类型" :prop="'rosterCertificateDTOList[' + index_certificate + '].certType'"
                            :rules="[
               ]">
                <el-select v-model="inputForm.rosterCertificateDTOList[index_certificate].certType" filterable placeholder="请选择证书类型"  style="width: 100%;">
                  <el-option
                    v-for="item in $dictUtils.getDictList('cert_type')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证书编号" :prop="'rosterCertificateDTOList[' + index_certificate + '].certNo'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterCertificateDTOList[index_certificate].certNo" placeholder="请填写证书编号"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发证机构" :prop="'rosterCertificateDTOList[' + index_certificate + '].issuedInstitution'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterCertificateDTOList[index_certificate].issuedInstitution" placeholder="请填写发证机构"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发证日期" :prop="'rosterCertificateDTOList[' + index_certificate + '].issuedDate'"
                            :rules="[
               ]">
                <el-date-picker
                  placement="bottom-start"
                  style="width: 100%"
                  v-model="inputForm.rosterCertificateDTOList[index_certificate].issuedDate"
                  type="date"
                  placeholder="选择发证日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备案日期" :prop="'rosterCertificateDTOList[' + index_certificate + '].recordDate'"
                            :rules="[
               ]">
                <el-date-picker
                  placement="bottom-start"
                  style="width: 100%"
                  v-model="inputForm.rosterCertificateDTOList[index_certificate].recordDate"
                  type="date"
                  placeholder="选择备案日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="提醒日期" :prop="'rosterCertificateDTOList[' + index_certificate + '].remindDate'"
                            :rules="[
               ]">
                <el-date-picker
                  placement="bottom-start"
                  style="width: 100%"
                  v-model="inputForm.rosterCertificateDTOList[index_certificate].remindDate"
                  type="date"
                  placeholder="选择提醒日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到期日期" :prop="'rosterCertificateDTOList[' + index_certificate + '].expireDate'"
                            :rules="[
               ]">
                <el-date-picker
                  placement="bottom-start"
                  style="width: 100%"
                  v-model="inputForm.rosterCertificateDTOList[index_certificate].expireDate"
                  type="date"
                  placeholder="选择到期日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业" :prop="'rosterCertificateDTOList[' + index_certificate + '].profession'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterCertificateDTOList[index_certificate].profession" placeholder="请填写专业"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="级别" :prop="'rosterCertificateDTOList[' + index_certificate + '].level'"
                            :rules="[
               ]">
                <el-input v-model="inputForm.rosterCertificateDTOList[index_certificate].level" placeholder="请填写级别"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="描述" :prop="'rosterCertificateDTOList[' + index_certificate + '].description'"
                            :rules="[
               ]">
                <el-input type="textarea" v-model="inputForm.rosterCertificateDTOList[index_certificate].description" placeholder="请填写描述"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: center">
              <el-form-item label="" >
                <el-button style="width: 50%" type="danger" @click="delRow(index_certificate,'certificate')" plain>删除员工证书 {{index_certificate + 1}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="" >
                <el-button style="width: 100%" type="primary" @click="addRow('certificate')" plain>新增员工证书</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
<!--        <el-divider content-position="left"><i class="el-icon-document"></i> 人员资质</el-divider>-->
<!--        <div>-->
<!--          <el-row  :gutter="15" :key="index_certDto" v-for="(item,index_certDto) in inputForm.certDTOList">-->
<!--            <el-col :span="24">-->
<!--              <el-form-item label="" >-->
<!--                <el-divider content-position="left"> 人员资质 {{index_certDto + 1}}</el-divider>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="证书类型" :prop="'certDTOList[' + index_certDto + '].type'"-->
<!--                            :rules="[-->
<!--                            {required: true, message: '证书类型不能为空', trigger: 'change'}-->
<!--             ]">-->
<!--                <el-select v-model="inputForm.certDTOList[index_certDto].type" filterable @change="changeType(index_certDto)" placeholder="请选择证书类型"  style="width: 100%;">-->
<!--                  <el-option-->
<!--                    v-for="item in $dictUtils.getDictList('sys_cert_type')"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="证书编号" :prop="'certDTOList[' + index_certDto + '].no'"-->
<!--                            :rules="[-->
<!--                            {required: true, message: '证书编号不能为空', trigger: 'change'}-->
<!--             ]">-->
<!--                <el-input v-model="inputForm.certDTOList[index_certDto].no" placeholder="请填写证书编号"     clearable></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="发证机关" :prop="'certDTOList[' + index_certDto + '].authorities'"-->
<!--                            :rules="[-->
<!--             ]">-->
<!--                <el-input v-model="inputForm.certDTOList[index_certDto].authorities" placeholder="请填写发证机关"     clearable></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="发证日期" :prop="'certDTOList[' + index_certDto + '].issuedDate'"-->
<!--                            :rules="[-->
<!--             ]">-->
<!--                <el-date-picker-->
<!--                  placement="bottom-start"-->
<!--                  style="width: 100%"-->
<!--                  v-model="inputForm.certDTOList[index_certDto].issuedDate"-->
<!--                  type="date"-->
<!--                  placeholder="选择发证日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="注册日期" :prop="'certDTOList[' + index_certDto + '].enrollDate'"-->
<!--                            :rules="[-->
<!--             ]">-->
<!--                <el-date-picker-->
<!--                  placement="bottom-start"-->
<!--                  style="width: 100%"-->
<!--                  v-model="inputForm.certDTOList[index_certDto].enrollDate"-->
<!--                  type="date"-->
<!--                  placeholder="选择注册日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="到期日期" :prop="'certDTOList[' + index_certDto + '].expireDate'"-->
<!--                            :rules="[-->
<!--                            {required: true, message: '到期日期不能为空', trigger: 'blur'}-->
<!--             ]">-->
<!--                <el-date-picker-->
<!--                  placement="bottom-start"-->
<!--                  style="width: 100%"-->
<!--                  v-model="inputForm.certDTOList[index_certDto].expireDate"-->
<!--                  type="date"-->
<!--                  placeholder="选择到期日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="注册证书编号" :prop="'certDTOList[' + index_certDto + '].enrollCertNo'"-->
<!--                            :rules="[-->
<!--             ]">-->
<!--                <el-input v-model="inputForm.certDTOList[index_certDto].enrollCertNo" placeholder="请填写注册证书编号"     clearable></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="专业" :prop="'certDTOList[' + index_certDto + '].profession'"-->
<!--                            :rules="[-->
<!--             ]">-->
<!--                <el-select v-model="inputForm.certDTOList[index_certDto].profession" @change="changeProfession" placeholder="请填写专业"  style="width: 100%;">-->
<!--                  <el-option-->
<!--                    v-for="item in inputForm.certDTOList[index_certDto].professionList"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="附件" :prop="'certDTOList[' + index_certDto + '].fileUrl'"-->
<!--                            :rules="[-->
<!--               ]">-->
<!--                <el-popover-->
<!--                  placement="left"-->
<!--                  trigger="hover">-->
<!--                  <el-button style="width: 100%" @click="onPreview(inputForm.certDTOList[index_certDto].fileLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>-->
<!--                  <el-upload-->
<!--                    slot="reference"-->
<!--                    class="avatar-uploader"-->
<!--                    :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"-->
<!--                    :show-file-list="false"-->
<!--                    :on-success="(response, file, fileList) => {-->
<!--                  return handleAvatarSuccess(response, file, fileList, index_certDto, 'certDto')-->
<!--                }"-->
<!--                    :before-upload="checkIsPic"-->
<!--                  >-->
<!--                    <img v-if="inputForm.certDTOList[index_certDto].fileLsUrl"-->
<!--                         style="width: 150px; height: 150px; line-height: 150px"-->
<!--                         :src="inputForm.certDTOList[index_certDto].fileLsUrl"/>-->
<!--                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                  </el-upload>-->
<!--                </el-popover>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="24" style="text-align: center">-->
<!--              <el-form-item label="" >-->
<!--                <el-button style="width: 50%" type="danger" @click="delRow(index_certDto,'certDto')" plain>删除人员资质 {{index_certDto + 1}}</el-button>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row :gutter="15">-->
<!--            <el-col :span="24">-->
<!--              <el-form-item label="" >-->
<!--                <el-button style="width: 100%" type="primary" @click="addRow('certDto')" plain>新增人员资质</el-button>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
<!--        <el-divider content-position="left"><i class="el-icon-document"></i> 直属领导</el-divider>-->
<!--        <el-row  :gutter="15">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="汇报类型" prop="rosterLeadershipDTO.debriefType"-->
<!--                          :rules="[-->
<!--               ]">-->
<!--              <el-select v-model="inputForm.rosterLeadershipDTO.debriefType" style="width:100%" placeholder="请选择汇报类型">-->
<!--                <el-option-->
<!--                  v-for="item in $dictUtils.getDictList('debrief_type')"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="汇报对象" prop="rosterLeadershipDTO.supervisorId"-->
<!--                          :rules="[-->
<!--               ]">-->
<!--              &lt;!&ndash;              <el-select v-model="inputForm.rosterLeadershipDTO.supervisorId" style="width:100%" placeholder="请选择汇报对象">&ndash;&gt;-->
<!--              &lt;!&ndash;                <el-option&ndash;&gt;-->
<!--              &lt;!&ndash;                  v-for="item in supervisorList"&ndash;&gt;-->
<!--              &lt;!&ndash;                  :key="item.id"&ndash;&gt;-->
<!--              &lt;!&ndash;                  :label="item.name"&ndash;&gt;-->
<!--              &lt;!&ndash;                  :value="item.id">&ndash;&gt;-->
<!--              &lt;!&ndash;                </el-option>&ndash;&gt;-->
<!--              &lt;!&ndash;              </el-select>&ndash;&gt;-->
<!--              <UserSelect :limit='1' size="middle" :readonly="true" :value="inputForm.rosterLeadershipDTO.supervisorId" @getValue='(value, label) => {inputForm.rosterLeadershipDTO.supervisorId = value}'></UserSelect>-->

<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
        </div>
        <div v-if="activeName === '2'" :key="keydiv2">
          <el-row  :gutter="15">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name"
                            :rules="[{required: true, message: '姓名不能为空', trigger: 'blur'}
                 ]">
                <el-input v-model="inputForm.name" placeholder="请填写姓名"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex"
                            :rules="[
                 ]">
                <el-select v-model="inputForm.sex" placeholder="请选择性别" style="width:100%;">
                  <el-option
                    v-for="item in $dictUtils.getDictList('sex')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="inputForm.mobile" placeholder="请填写手机号码"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族" prop="ethnic"
                            :rules="[
                 ]">
                <el-select v-model="inputForm.ethnic" filterable placeholder="请选择民族" style="width:100%;">
                  <el-option
                    v-for="item in $dictUtils.getDictList('ethnic')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件类型" prop="certificatesType">
                <el-select v-model="inputForm.certificatesType" placeholder="请选择证件类型" style="width:100%;">
                  <el-option
                    v-for="item in $dictUtils.getDictList('certificates_type')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号" prop="idCard" >
                <el-input v-model="inputForm.idCard" placeholder="请填写证件号"  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件照正面" prop="certificatesFront"
                            :rules="[
                 ]">
                <el-popover
                  placement="left"
                  trigger="hover">
                  <el-button style="width: 100%" @click="onPreview(inputForm.certificatesFrontLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>
                  <el-upload
                    slot="reference"
                    class="avatar-uploader"
                    :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
                    :show-file-list="false"
                    :on-success="(response, file, fileList) => {
                    return handleAvatarSuccess(response, file, fileList, null, 'front')
                  }"
                    :before-upload="checkIsPic"
                  >
                    <!--                :before-upload="beforeAvatarUpload"-->
                    <img v-if="inputForm.certificatesFrontLsUrl"
                         style="width: 150px; height: 150px; line-height: 150px"
                         :src="inputForm.certificatesFrontLsUrl"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件照反面" prop="certificatesBack"
                            :rules="[
                 ]">
                <el-popover
                  placement="left"
                  trigger="hover">
                  <el-button style="width: 100%" @click="onPreview(inputForm.certificatesBackLsUrl)" :disabled="false" icon="el-icon-zoom-in"></el-button>
                  <el-upload
                    slot="reference"
                    class="avatar-uploader"
                    :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
                    :show-file-list="false"
                    :on-success="(response, file, fileList) => {
                    return handleAvatarSuccess(response, file, fileList, null, 'back')
                  }"
                    :before-upload="checkIsPic"
                  >
                    <img v-if="inputForm.certificatesBackLsUrl"
                         style="width: 150px; height: 150px; line-height: 150px"
                         :src="inputForm.certificatesBackLsUrl"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="血型" prop="bloodType"
                            :rules="[
                 ]">
                <el-select v-model="inputForm.bloodType" placeholder="请选择血型" style="width:100%;">
                  <el-option
                    v-for="item in $dictUtils.getDictList('blood_type')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="QQ" prop="qq">
                <el-input v-model="inputForm.qq" placeholder="请填写QQ"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信" prop="wechat"
                            :rules="[
                 ]">
                <el-input v-model="inputForm.wechat" placeholder="请填写微信"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个人邮箱" prop="email">
                <el-input v-model="inputForm.email" placeholder="请填写个人邮箱"     clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks"
                            :rules="[
                 ]">
                <el-input type="textarea" style="width:100%" maxlength="1000" v-model="inputForm.remarks" placeholder="请填写备注"     ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <!--        附件-->
      <UpLoadComponent ref="uploadComponent"></UpLoadComponent>

      <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
      <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
      <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import RankService from '@/api/rank/RankService'
  import SelectTree from '@/components/treeSelect/treeSelect.vue'
  import RankSystemTableService from '@/api/rank/RankSystemTableService'
  import JobPositionService from '@/api/position/JobPositionService'
  import RosterService from '@/api/roster/RosterService'
  import OSSService from '@/api/sys/OSSService'
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  import UpLoadComponent from '@/views/common/UpLoadComponent'
  import UserSelect from '@/components/userSelect'
  import PostService from '@/api/sys/PostService'
  import RoleService from '@/api/sys/RoleService'
  import OfficeService from '@/api/sys/OfficeService'
  export default {
    data () {
      let checkIdCard = (rule, value, callback) => {
        this.blurIdCard(value, callback)
      }
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          name: '',
          officeId: '',
          jobPositionId: '',
          positionId: '',
          rankId: '',
          jobNo: '',
          certificatesType: '',
          idCard: '',
          certificatesFront: '',
          certificatesBack: '',
          mobile: '',
          contractType: '',
          workerType: '',
          onboardingDate: '',
          seniority: '',
          contractCompany: '',
          sex: '',
          birthDate: '',
          workPlace: '',
          contactAddress: '',
          employmentSituation: '',
          workingHour: '',
          ethnic: '',
          accountType: '',
          accountAddr: '',
          origin: '',
          liveAddr: '',
          highestEducation: '',
          politicalFace: '',
          maritalStatus: '',
          bloodType: '',
          emergencyContactName: '',
          emergencyContactTel: '',
          spouseName: '',
          childName: '',
          qq: '',
          wechat: '',
          email: '',
          remarks: '',
          certificatesFrontLsUrl: '',
          certificatesBackLsUrl: '',
          rosterContractDTO: {
            baseId: '',
            beginDate: '',
            endDate: '',
            workEmail: '',
            workMobile: '',
            probationPeriodEndDate: '',
            probationPeriodMonth: ''
          },
          rosterBankCardsDTOList: [],
          rosterEducateDTOList: [],
          rosterWorkDTOList: [],
          rosterFamilyDTOList: [],
          rosterCertificateDTOList: [],
          rosterFilesDTOList: [],
          headshot: '',
          headshotLsUrl: '',
          rosterLeadershipDTO: {
            baseId: '',
            debriefType: '',
            supervisorId: ''
          },
          personType: '',
          certDTOList: [],
          postIdList: [],
          roleIdList: [],
          companyId: '',
          manageOfficeIds: '',
          newPassword: '',
          confirmNewPassword: '',
          loginFlag: '',
          otherServiceFlag: ''
        },
        jobPositionList: [],
        positionList: [],
        rankList: [],
        supervisorList: [],
        showViewer: false,
        url: '',
        rules: {
          idCard: [
            {validator: checkIdCard, trigger: 'change'},
            {validator: checkIdCard, trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '手机号码不能为空', trigger: 'blur'},
            {validator: this.validatorXG.isMobile, trigger: 'change'},
            {validator: this.validatorXG.isMobile, trigger: 'blur'}
          ],
          seniority: [
            {validator: this.validatorXG.isIntGtZero, trigger: 'change'},
            {validator: this.validatorXG.isIntGtZero, trigger: 'blur'}
          ],
          'rosterContractDTO.probationPeriodMonth': [
            {validator: this.validatorXG.isIntGtZero, trigger: 'change'},
            {validator: this.validatorXG.isIntGtZero, trigger: 'blur'}
          ],
          'rosterContractDTO.workEmail': [
            {validator: this.validator.isEmail, trigger: 'change'},
            {validator: this.validator.isEmail, trigger: 'blur'}
          ],
          email: [
            {validator: this.validator.isEmail, trigger: 'change'},
            {validator: this.validator.isEmail, trigger: 'blur'}
          ],
          qq: [
            {validator: this.validator.isQq, trigger: 'change'},
            {validator: this.validator.isQq, trigger: 'blur'}
          ]
        },
        activeName: '1',
        roleList: [],
        postList: [],
        companyList: [],
        keydiv1: '',
        keydiv2: ''
      }
    },
    rankService: null,
    rankSystemTableService: null,
    jobPositionService: null,
    rosterService: null,
    ossService: null,
    roleService: null,
    postService: null,
    officeService: null,
    watch: {
      'inputForm.officeId': {
        handler () {
          this.changeOffice(this.inputForm.officeId)
        }
      },
      'inputForm.positionId': {
        handler () {
          this.changePosition(this.inputForm.positionId)
        }
      }
    },
    created () {
      this.rankService = new RankService()
      this.rankSystemTableService = new RankSystemTableService()
      this.jobPositionService = new JobPositionService()
      this.rosterService = new RosterService()
      this.ossService = new OSSService()
      this.roleService = new RoleService()
      this.postService = new PostService()
      this.officeService = new OfficeService()
    },
    components: {
      SelectTree,
      ElImageViewer,
      UpLoadComponent,
      UserSelect
    },
    methods: {
      init (method, id, activeName) {
        this.activeName = '1'
        if (this.commonJS.isNotEmpty(activeName)) {
          this.activeName = activeName
        }
        this.queryAllPosition()
        // this.queryAllSupervisor()
        this.queryAllPost()
        this.queryAllRole()
        this.queryAllCompany()
        this.method = method
        this.inputForm = {
          name: '',
          officeId: '',
          jobPositionId: '',
          positionId: '',
          rankId: '',
          jobNo: '',
          certificatesType: '',
          idCard: '',
          certificatesFront: '',
          certificatesBack: '',
          mobile: '',
          contractType: '',
          workerType: '',
          onboardingDate: '',
          seniority: '',
          contractCompany: '',
          sex: '',
          birthDate: '',
          workPlace: '',
          contactAddress: '',
          employmentSituation: '',
          workingHour: '',
          ethnic: '',
          accountType: '',
          accountAddr: '',
          origin: '',
          liveAddr: '',
          highestEducation: '',
          politicalFace: '',
          maritalStatus: '',
          bloodType: '',
          emergencyContactName: '',
          emergencyContactTel: '',
          spouseName: '',
          childName: '',
          qq: '',
          wechat: '',
          email: '',
          remarks: '',
          certificatesFrontLsUrl: '',
          certificatesBackLsUrl: '',
          rosterContractDTO: {
            baseId: '',
            beginDate: '',
            endDate: '',
            workEmail: '',
            workMobile: '',
            probationPeriodEndDate: '',
            probationPeriodMonth: ''
          },
          rosterBankCardsDTOList: [],
          rosterEducateDTOList: [],
          rosterWorkDTOList: [],
          rosterFamilyDTOList: [],
          rosterCertificateDTOList: [],
          rosterFilesDTOList: [],
          headshot: '',
          headshotLsUrl: '',
          rosterLeadershipDTO: {
            baseId: '',
            debriefType: '',
            supervisorId: ''
          },
          personType: '',
          certDTOList: [],
          postIdList: [],
          roleIdList: [],
          companyId: '',
          manageOfficeIds: '',
          newPassword: '',
          confirmNewPassword: '',
          loginFlag: '',
          otherServiceFlag: ''
        }
        this.inputForm.id = id
        if (method === 'add') {
          this.title = `新建花名册`
        } else if (method === 'edit') {
          this.title = '修改花名册'
        } else if (method === 'view') {
          this.title = '查看花名册'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.rosterService.queryById(this.inputForm.id).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data)
              this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
              if (this.commonJS.isEmpty(this.inputForm.certDTOList)) {
                this.inputForm.certDTOList = []
              }
              this.inputForm.certDTOList.forEach(item => {
                if (item.type === '1' || item.type === '2') {
                  item.professionList = this.$dictUtils.getDictList('sys_cert_profession_build')
                } else if (item.type === '3' || item.type === '4') {
                  item.professionList = this.$dictUtils.getDictList('sys_cert_profession_cost')
                } else if (item.type === '5') {
                  item.professionList = this.$dictUtils.getDictList('sys_cert_profession_supervision')
                } else if (item.type === '6') {
                  item.professionList = this.$dictUtils.getDictList('sys_cert_profession_accounting')
                }
              })
              this.$refs.uploadComponent.newUpload(method, this.inputForm.rosterFilesDTOList, 'roster', '', '附件')
              this.loading = false
            })
          }
          if (method !== 'edit' && method !== 'view') {
            if (this.commonJS.isEmpty(this.inputForm.loginFlag)) {
              this.inputForm.loginFlag = '1'
            }
            if (this.commonJS.isEmpty(this.inputForm.otherServiceFlag)) {
              this.inputForm.otherServiceFlag = '0'
            }
            this.$refs.uploadComponent.newUpload(method, [], 'roster', '', '附件')
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            if (this.$refs.uploadComponent.checkProgress()) {
              this.loading = false
            } else {
              if (this.commonJS.isNotEmpty(this.inputForm.id)) {
                this.rosterService.checkIsSyncFailed(this.inputForm.id).then(({data}) => {
                  if (this.commonJS.isNotEmpty(data) && !data.success) {
                    // 不允许保存
                    this.$message.warning(data.message)
                    this.loading = false
                  } else {
                    this.submitTrue()
                  }
                })
              } else {
                this.submitTrue()
              }
            }
          }
        })
      },
      submitTrue () {
        this.inputForm.personType = this.activeName
        this.checkMoment()
        this.inputForm.rosterFilesDTOList = this.$refs.uploadComponent.getDataList()
        this.rosterService.save(this.inputForm).then(({data}) => {
          this.close()
          this.$message.success(data)
          this.$emit('refreshDataList')
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      close () {
        this.$refs.uploadComponent.clearUpload()
        this.$refs.inputForm.resetFields()
        this.inputForm = {
          name: '',
          officeId: '',
          jobPositionId: '',
          positionId: '',
          rankId: '',
          jobNo: '',
          certificatesType: '',
          idCard: '',
          certificatesFront: '',
          certificatesBack: '',
          mobile: '',
          contractType: '',
          workerType: '',
          onboardingDate: '',
          seniority: '',
          contractCompany: '',
          sex: '',
          birthDate: '',
          workPlace: '',
          contactAddress: '',
          employmentSituation: '',
          workingHour: '',
          ethnic: '',
          accountType: '',
          accountAddr: '',
          origin: '',
          liveAddr: '',
          highestEducation: '',
          politicalFace: '',
          maritalStatus: '',
          bloodType: '',
          emergencyContactName: '',
          emergencyContactTel: '',
          spouseName: '',
          childName: '',
          qq: '',
          wechat: '',
          email: '',
          remarks: '',
          certificatesFrontLsUrl: '',
          certificatesBackLsUrl: '',
          rosterContractDTO: {
            baseId: '',
            beginDate: '',
            endDate: '',
            workEmail: '',
            workMobile: '',
            probationPeriodEndDate: '',
            probationPeriodMonth: ''
          },
          rosterBankCardsDTOList: [],
          rosterEducateDTOList: [],
          rosterWorkDTOList: [],
          rosterFamilyDTOList: [],
          rosterCertificateDTOList: [],
          rosterFilesDTOList: [],
          headshot: '',
          headshotLsUrl: '',
          rosterLeadershipDTO: {
            baseId: '',
            debriefType: '',
            supervisorId: ''
          },
          personType: '',
          certDTOList: [],
          postIdList: [],
          roleIdList: [],
          companyId: '',
          manageOfficeIds: '',
          newPassword: '',
          confirmNewPassword: '',
          loginFlag: '',
          otherServiceFlag: ''
        }
        this.keydiv1 = Math.random()
        this.keydiv2 = Math.random()
        this.visible = false
      },
      queryAllPosition () {
        this.rankSystemTableService.queryAllPosition().then(({data}) => {
          this.positionList = JSON.parse(JSON.stringify(data))
        })
      },
      queryAllPost () {  //  查询所有岗位
        this.postService.list({current: 1, size: -1}).then(({data}) => {
          this.postList = data.records
        })
      },
      queryAllRole () {  //  查询所有角色
        this.roleService.list({current: 1, size: -1}).then(({data}) => {
          this.roleList = data.records
        })
      },
      queryAllCompany () {  //  查询所有集团
        this.officeService.getAllCompany().then(({data}) => {
          this.companyList = data
          if (this.commonJS.isNotEmpty(this.companyList)) {
            if (this.commonJS.isNotEmpty(this.companyList[0])) {
              this.inputForm.companyId = this.companyList[0].id
            }
          }
        })
      },
      queryAllSupervisor () {
        this.rosterService.queryAllSupervisor().then(({data}) => {
          this.supervisorList = JSON.parse(JSON.stringify(data))
        })
      },
      getJobPositionByOff () {
        const id = this.inputForm.officeId
        if (id !== null && id !== undefined && id !== '') {
          this.jobPositionService.getJobPositionByOff(id).then(({data}) => {
            this.jobPositionList = JSON.parse(JSON.stringify(data))
          })
        } else {
          this.jobPositionList = []
        }
      },
      changeOffice () {
        this.getJobPositionByOff()
      },
      getRankByPosition () {
        const id = this.inputForm.positionId
        if (id !== null && id !== undefined && id !== '') {
          this.rankService.getRankByPosition(id).then(({data}) => {
            this.rankList = JSON.parse(JSON.stringify(data))
          })
        } else {
          this.rankList = []
        }
      },
      changePosition () {
        this.getRankByPosition()
      },
      onPreview (url) {
        if (url !== '' && url !== undefined && url !== null) {
          this.url = url
          this.showViewer = true
        }
      },
      // 关闭查看器
      closeViewer () {
        this.url = ''
        this.showViewer = false
      },
      // 是否默认银行卡  change事件
      checkBankDefault (index) {
        if (this.inputForm.rosterBankCardsDTOList[index].isDefault === '1') {
          const list = this.inputForm.rosterBankCardsDTOList
          for (let i = 0; i < list.length; i++) {
            if (index !== i) {
              this.inputForm.rosterBankCardsDTOList[i].isDefault = '2'
            }
          }
        }
      },
      addRow (val) {
        if (val === 'bank') {
          const bankCard = {
            id: '',
            baseId: '',
            payrollCardOpenBank: '',
            payrollCardBranches: '',
            payrollCardBankAccount: '',
            payrollCardOpeningName: '',
            payrollCardPic: '',
            isDefault: '',
            payrollCardPicLsUrl: ''
          }
          this.inputForm.rosterBankCardsDTOList.push(bankCard)
        }
        if (val === 'educate') {
          const educate = {
            id: '',
            baseId: '',
            collegeName: '',
            profession: '',
            entryDate: '',
            graduationDate: '',
            haveDegree: '',
            educationCertFirst: '',
            educationCertFirstLsUrl: '',
            educationCertSecond: '',
            educationCertSecondLsUrl: '',
            degree: ''
          }
          this.inputForm.rosterEducateDTOList.push(educate)
        }
        if (val === 'work') {
          const work = {
            id: '',
            baseId: '',
            companyName: '',
            posts: '',
            entryDate: '',
            separationDate: '',
            postDescription: ''
          }
          this.inputForm.rosterWorkDTOList.push(work)
        }
        if (val === 'family') {
          const family = {
            id: '',
            baseId: '',
            name: '',
            relationship: '',
            birthDate: '',
            birthCertificate: '',
            birthCertificateLsUrl: ''
          }
          this.inputForm.rosterFamilyDTOList.push(family)
        }
        if (val === 'certificate') {
          const certificate = {
            id: '',
            baseId: '',
            certName: '',
            certType: '',
            certNo: '',
            issuedInstitution: '',
            issuedDate: '',
            recordDate: '',
            remindDate: '',
            expireDate: '',
            profession: '',
            level: '',
            description: ''
          }
          this.inputForm.rosterCertificateDTOList.push(certificate)
        }
        if (val === 'certDto') {
          const cert = {
            id: '',
            baseId: '',
            type: '',
            no: '',
            authorities: '',
            issuedDate: '',
            enrollDate: '',
            expireDate: '',
            enrollCertNo: '',
            profession: '',
            fileUrl: '',
            fileLsUrl: ''
          }
          this.inputForm.certDTOList.push(cert)
        }
      },
      delRow (index, val) {
        if (val === 'bank') {
          this.inputForm.rosterBankCardsDTOList.splice(index, 1)
        }
        if (val === 'educate') {
          this.inputForm.rosterEducateDTOList.splice(index, 1)
        }
        if (val === 'work') {
          this.inputForm.rosterWorkDTOList.splice(index, 1)
        }
        if (val === 'family') {
          this.inputForm.rosterFamilyDTOList.splice(index, 1)
        }
        if (val === 'certificate') {
          this.inputForm.rosterCertificateDTOList.splice(index, 1)
        }
        if (val === 'certDto') {
          this.inputForm.certDTOList.splice(index, 1)
        }
      },
      handleAvatarSuccess (res, file, fileList, index, val) {
        if (val === 'head') {
          this.inputForm.headshot = res.url
          this.inputForm.headshotLsUrl = res.lsUrl
        }
        if (val === 'front') {
          this.inputForm.certificatesFront = res.url
          this.inputForm.certificatesFrontLsUrl = res.lsUrl
        }
        if (val === 'back') {
          this.inputForm.certificatesBack = res.url
          this.inputForm.certificatesBackLsUrl = res.lsUrl
        }
        if (val === 'bank') {
          this.inputForm.rosterBankCardsDTOList[index].payrollCardPic = res.url
          this.inputForm.rosterBankCardsDTOList[index].payrollCardPicLsUrl = res.lsUrl
        }
        if (val === 'educate_first') {
          this.inputForm.rosterEducateDTOList[index].educationCertFirst = res.url
          this.inputForm.rosterEducateDTOList[index].educationCertFirstLsUrl = res.lsUrl
        }
        if (val === 'educate_second') {
          this.inputForm.rosterEducateDTOList[index].educationCertSecond = res.url
          this.inputForm.rosterEducateDTOList[index].educationCertSecondLsUrl = res.lsUrl
        }
        if (val === 'family') {
          this.inputForm.rosterFamilyDTOList[index].birthCertificate = res.url
          this.inputForm.rosterFamilyDTOList[index].birthCertificateLsUrl = res.lsUrl
        }
        if (val === 'certDto') {
          this.inputForm.certDTOList[index].fileUrl = res.url
          this.inputForm.certDTOList[index].fileLsUrl = res.lsUrl
        }
        this.$forceUpdate()
      },
      // 时间格式化
      checkMoment () {
        if (this.inputForm.birthDate !== null && this.inputForm.birthDate !== '' && this.inputForm.birthDate !== undefined) {
          this.inputForm.birthDate = this.moment(this.inputForm.birthDate).format('YYYY-MM-DD HH:mm:ss')
        }
        if (this.inputForm.onboardingDate !== null && this.inputForm.onboardingDate !== '' && this.inputForm.onboardingDate !== undefined) {
          this.inputForm.onboardingDate = this.moment(this.inputForm.onboardingDate).format('YYYY-MM-DD HH:mm:ss')
        }
        if (this.inputForm.rosterContractDTO.beginDate !== null && this.inputForm.rosterContractDTO.beginDate !== undefined && this.inputForm.rosterContractDTO.beginDate !== '') {
          this.inputForm.rosterContractDTO.beginDate = this.moment(this.inputForm.rosterContractDTO.beginDate).format('YYYY-MM-DD HH:mm:ss')
        }
        if (this.inputForm.rosterContractDTO.endDate !== null && this.inputForm.rosterContractDTO.endDate !== undefined && this.inputForm.rosterContractDTO.endDate !== '') {
          this.inputForm.rosterContractDTO.endDate = this.moment(this.inputForm.rosterContractDTO.endDate).format('YYYY-MM-DD HH:mm:ss')
        }
        if (this.inputForm.rosterContractDTO.probationPeriodEndDate !== null && this.inputForm.rosterContractDTO.probationPeriodEndDate !== undefined && this.inputForm.rosterContractDTO.probationPeriodEndDate !== '') {
          this.inputForm.rosterContractDTO.probationPeriodEndDate = this.moment(this.inputForm.rosterContractDTO.probationPeriodEndDate).format('YYYY-MM-DD HH:mm:ss')
        }
        this.inputForm.rosterEducateDTOList.forEach(item => {
          if (item.entryDate !== null && item.entryDate !== '' && item.entryDate !== undefined) {
            item.entryDate = this.moment(item.entryDate).format('YYYY-MM-DD HH:mm:ss')
          }
          if (item.graduationDate !== null && item.graduationDate !== '' && item.graduationDate !== undefined) {
            item.graduationDate = this.moment(item.graduationDate).format('YYYY-MM-DD HH:mm:ss')
          }
        })
        this.inputForm.rosterWorkDTOList.forEach(item => {
          if (item.entryDate !== null && item.entryDate !== '' && item.entryDate !== undefined) {
            item.entryDate = this.moment(item.entryDate).format('YYYY-MM-DD HH:mm:ss')
          }
          if (item.separationDate !== null && item.separationDate !== '' && item.separationDate !== undefined) {
            item.separationDate = this.moment(item.separationDate).format('YYYY-MM-DD HH:mm:ss')
          }
        })
        this.inputForm.rosterFamilyDTOList.forEach(item => {
          if (item.birthDate !== null && item.birthDate !== '' && item.birthDate !== undefined) {
            item.birthDate = this.moment(item.birthDate).format('YYYY-MM-DD HH:mm:ss')
          }
        })
        this.inputForm.rosterCertificateDTOList.forEach(item => {
          if (item.issuedDate !== null && item.issuedDate !== '' && item.issuedDate !== undefined) {
            item.issuedDate = this.moment(item.issuedDate).format('YYYY-MM-DD HH:mm:ss')
          }
          if (item.recordDate !== null && item.recordDate !== '' && item.recordDate !== undefined) {
            item.recordDate = this.moment(item.recordDate).format('YYYY-MM-DD HH:mm:ss')
          }
          if (item.remindDate !== null && item.remindDate !== '' && item.remindDate !== undefined) {
            item.remindDate = this.moment(item.remindDate).format('YYYY-MM-DD HH:mm:ss')
          }
          if (item.expireDate !== null && item.expireDate !== '' && item.expireDate !== undefined) {
            item.expireDate = this.moment(item.expireDate).format('YYYY-MM-DD HH:mm:ss')
          }
        })
      },
      blurIdCard (value, callback) {
        if (!this.commonJS.isEmpty(this.inputForm.certificatesType)) {
          if (this.inputForm.certificatesType === '1') {
            if (!this.commonJS.isEmpty(value)) {
              if (!this.commonJS.isIDCardNo(value)) {
                callback(new Error('居民身份证填写格式不正确'))
              } else {
                const info = this.commonJS.decomposeIdCard(value)
                this.inputForm.birthDate = info.birth
                this.inputForm.sex = info.sex
                callback()
              }
            } else {
              callback()
            }
          } else {
            callback()
          }
        } else {
          callback()
        }
      },
      checkIsPic (file) {
        return this.commonJS.isPic(file)
      },
      // tab页签点击事件，不切换点击同一个也会执行
      tabHandleClick (event) {
      },
      // tab切换前执行此方法，点击同一个页签不会执行
      tabBeforeLeave (event) {
        // 切换到员工
        if (event === '1') {
          // 给所属公司一个默认值
          if (this.commonJS.isNotEmpty(this.companyList)) {
            if (this.commonJS.isNotEmpty(this.companyList[0])) {
              if (this.commonJS.isEmpty(this.inputForm.companyId)) {
                this.inputForm.companyId = this.companyList[0].id
              }
            }
          }
        }
        // 切换为游客
        // if (event === '2') {
        //   this.inputForm = {
        //     id: this.inputForm.id,
        //     name: this.inputForm.name,
        //     certificatesType: this.inputForm.certificatesType,
        //     idCard: this.inputForm.idCard,
        //     certificatesFront: this.inputForm.certificatesFront,
        //     certificatesBack: this.inputForm.certificatesBack,
        //     mobile: this.inputForm.mobile,
        //     sex: this.inputForm.sex,
        //     ethnic: this.inputForm.ethnic,
        //     bloodType: this.inputForm.bloodType,
        //     qq: this.inputForm.qq,
        //     wechat: this.inputForm.wechat,
        //     email: this.inputForm.email,
        //     remarks: this.inputForm.remarks,
        //     certificatesFrontLsUrl: this.inputForm.certificatesFrontLsUrl,
        //     certificatesBackLsUrl: this.inputForm.certificatesBackLsUrl,
        //     officeId: '',
        //     jobPositionId: '',
        //     positionId: '',
        //     rankId: '',
        //     jobNo: '',
        //     contractType: '',
        //     workerType: '',
        //     onboardingDate: '',
        //     seniority: '',
        //     contractCompany: '',
        //     birthDate: '',
        //     workPlace: '',
        //     contactAddress: '',
        //     employmentSituation: '',
        //     workingHour: '',
        //     accountType: '',
        //     accountAddr: '',
        //     origin: '',
        //     liveAddr: '',
        //     highestEducation: '',
        //     politicalFace: '',
        //     maritalStatus: '',
        //     emergencyContactName: '',
        //     emergencyContactTel: '',
        //     spouseName: '',
        //     childName: '',
        //     rosterContractDTO: {
        //       baseId: '',
        //       beginDate: '',
        //       endDate: '',
        //       workEmail: '',
        //       workMobile: '',
        //       probationPeriodEndDate: '',
        //       probationPeriodMonth: ''
        //     },
        //     rosterBankCardsDTOList: [],
        //     rosterEducateDTOList: [],
        //     rosterWorkDTOList: [],
        //     rosterFamilyDTOList: [],
        //     rosterCertificateDTOList: [],
        //     rosterFilesDTOList: [],
        //     headshot: '',
        //     headshotLsUrl: '',
        //     rosterLeadershipDTO: {
        //       baseId: '',
        //       debriefType: '',
        //       supervisorId: ''
        //     },
        //     personType: '',
        //     certDTOList: [],
        //     postIdList: [],
        //     roleIdList: [],
        //     companyId: '',
        //     manageOfficeIds: ''
        //   }
        // }
        this.keydiv1 = Math.random()
        this.keydiv2 = Math.random()
      },
      // 身份证号rule验证
      checkIdCardRule (rule, value, callback) {
        this.blurIdCard(value, callback)
      },
      // 切换证书类型时，替换专业下拉选项
      changeType (index) {
        this.inputForm.certDTOList[index].profession = ''
        if (this.inputForm.certDTOList[index].type === '1' || this.inputForm.certDTOList[index].type === '2') {
          this.inputForm.certDTOList[index].professionList = this.$dictUtils.getDictList('sys_cert_profession_build')
        } else if (this.inputForm.certDTOList[index].type === '3' || this.inputForm.certDTOList[index].type === '4') {
          this.inputForm.certDTOList[index].professionList = this.$dictUtils.getDictList('sys_cert_profession_cost')
        } else if (this.inputForm.certDTOList[index].type === '5') {
          this.inputForm.certDTOList[index].professionList = this.$dictUtils.getDictList('sys_cert_profession_supervision')
        } else if (this.inputForm.certDTOList[index].type === '6') {
          this.inputForm.certDTOList[index].professionList = this.$dictUtils.getDictList('sys_cert_profession_accounting')
        }
      },
      changeProfession () {
        this.$forceUpdate()
      },
      validatePass2  (rule, value, callback) {
        if (value !== this.inputForm.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
    }
  }
</script>
<style scoped>
  /*/deep/ .el-form-item__content {*/
  /*  line-height: 1px;*/
  /*}*/
</style>
