<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      width="1200px"
      @close="close(),closeXTable()"
      @keyup.enter.native="doSubmit"
      :visible.sync="visible">
      <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''" :disabled="method==='view'"
               label-width="150px" >

        <el-row  :gutter="15">
          <el-col :span="10">
            <el-form-item label="工号" prop="jobNo">
              <el-input v-model="inputForm.jobNo" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10" style="position:relative">
            <el-form-item label="姓名" prop="name"
                          :rules="[
                  {required: true, message:'请输入姓名', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.name"></el-input>
            </el-form-item>
            <el-form-item label=""  prop="headPortraitUrl"
                          style="position:absolute;top:0px;left:350px">
              <el-popover
                placement="right-end"
                trigger="hover">
                <el-button @click="showPhoto(inputForm.headPortraitUrl)">查看</el-button>
                <el-upload slot="reference"
                           class="avatar-uploader"
                           :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=headPortraitUrl`"
                           :on-success="handleAvatarSuccess1"
                           :before-upload="beforeAvatarUpload"
                           :show-file-list="false">
                  <img v-if="inputForm.headPortraitUrl" :src="inputForm.headPortraitUrl" class="avatar-uploader">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <div>头像</div>
                </el-upload>
              </el-popover>
            </el-form-item>
          </el-col>

          <el-col :span="10" >
            <el-form-item label="性别" prop="sex">
              <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="10">
            <el-form-item label="民族" prop="nation">
              <el-select v-model="inputForm.nation" placeholder="请选择民族" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('sys_user_nation')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="身份证号码" prop="idCard"
                          :rules="[
                  {required: true, message:'请输入身份证号码', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.idCard"
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                        oninput="if(value.length>18)value=value.slice(0,18)"
                        @input="validID(null, inputForm.idCard)">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="inputForm.age" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                :disabled="true"
                v-model="inputForm.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="选择出生日期"
                style="width: 318px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="inputForm.email" placeholder="请填写电子邮箱"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="移动电话" prop="mobilePhone">
              <el-input v-model="inputForm.mobilePhone"
                        placeholder="请填写移动电话"
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                        oninput="if(value.length>11)value=value.slice(0,11)">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="座机" prop="phone">
              <el-input v-model="inputForm.phone" placeholder="请填写座机"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="员工状态" prop="userType">
              <el-select v-model="inputForm.userType" placeholder="请选择员工状态" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('sys_user_status')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="银行卡号" prop="bankNumber">
              <el-input v-model="inputForm.bankNumber" placeholder="请填写银行卡号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="婚姻状况" prop="maritalStatus">
              <el-select v-model="inputForm.maritalStatus" placeholder="请选择婚姻状况" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('sys_user_marriage')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="政治面貌" prop="politicalOutlook">
              <el-select v-model="inputForm.politicalOutlook" placeholder="请选择婚姻状况" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('sys_user_political_outlook')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="籍贯" prop="nativePlace"
                          :rules="[
                     {required: true, message:'请选择籍贯', trigger:'blur'}
                   ]">
              <SelectTree
                ref="areaTree"
                :props="{
                        value: 'id',             // ID字段名
                        label: 'name',         // 显示名称
                        children: 'children'    // 子级字段名
                      }"
                url="/sys/area/treeData"
                :value="inputForm.nativePlace"
                :clearable="true"
                :accordion="true"
                v-if="visible"
                @getValue="(value) => {inputForm.nativePlace=value}"/>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="户口所在地" prop="registeredResidence">
              <el-input v-model="inputForm.registeredResidence" placeholder="请填写户口所在地"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="常住地址" prop="permanentAddress">
              <el-input v-model="inputForm.permanentAddress" placeholder="请填写常住地址"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="社保账号" prop="socialInsuranceNo">
              <el-input v-model="inputForm.socialInsuranceNo" placeholder="请填写社保账号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="医保账号" prop="medicalInsuranceNo">
              <el-input v-model="inputForm.medicalInsuranceNo" placeholder="请填写医保账号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="公积金账号" prop="accumulationFundNo">
              <el-input v-model="inputForm.accumulationFundNo" placeholder="请填写公积金账号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="微信号" prop="wx">
              <el-input v-model="inputForm.wx" placeholder="请填写微信号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="QQ号" prop="qq">
              <el-input v-model="inputForm.qq" placeholder="请填写QQ号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="入职日期" prop="entryDate">
              <el-date-picker
                v-model="inputForm.entryDate"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="选择出入职日期"
                style="width: 318px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="试用岗位" prop="probationPosition">
              <el-input v-model="inputForm.probationPosition" placeholder="请填写试用岗位"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="试用期(月)" prop="probationTime">
              <el-input v-model="inputForm.probationTime" placeholder="请填写试用期(月)"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="试用期结束日期" prop="probationEndDate">
              <el-date-picker
                v-model="inputForm.probationEndDate"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="选择试用期结束日期"
                style="width: 318px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="部门" prop="department"
                          :rules="[
                            {required: true, message: '请选择部门', trigger: 'blur'}
                            ]">
              <SelectTree
                ref="officeTree"
                :props="{
                    value: 'id',             // ID字段名
                    label: 'name',         // 显示名称
                    children: 'children'    // 子级字段名
                  }"

                :url="`/sys/office/treeData?type=2`"
                :value="inputForm.department"
                :clearable="true"
                :accordion="true"
                @getValue="(value) => {inputForm.department=value}"/>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="岗位" prop="positions"
                          :rules="[
                            {required: true, message: '请选择岗位', trigger: 'blur'}
                            ]">
              <el-select v-model="inputForm.positions" 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="10">
            <el-form-item label="最高学历" prop="highestEducation"
                          :rules="[
                            {required: true, message: '请填写最高学历', trigger: 'blur'}
                            ]">
              <el-input v-model="inputForm.highestEducation" placeholder="请填写最高学历"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注" prop="remarks">
          <el-input v-model="inputForm.remarks"
                    type="textarea"
                    :rows="5"
                    placeholder="请输入备注"
                    show-word-limit>
          </el-input>
        </el-form-item>

        <el-form-item label="个人简介" prop="personalProfile">
          <el-input v-model="inputForm.personalProfile"
                    type="textarea"
                    :rows="5"
                    placeholder="请输入个人简介"
                    show-word-limit>
          </el-input>
        </el-form-item>

        <el-form-item v-if="method === 'view' || method === 'edit'" label="手签章" prop="signatureUrl">
          <el-popover
            placement="right-end"
            trigger="hover">
            <el-button @click="showPhoto(inputForm.signatureUrl)">查看</el-button>
            <el-upload slot="reference"
                       class="avatar-uploader"
                       :action="`${$http.BASE_URL}/sys/userInfo/webupload/upload?uploadPath=signatureUrl`"
                       :on-success="handleAvatarSuccess2"
                       :before-upload="beforeAvatarUpload"
                       :show-file-list="false">
              <img v-if="inputForm.signatureUrl" :src="urlStart" class="avatar-uploader">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-popover>
        </el-form-item>

        <el-form-item v-else-if="method === 'add'" label="手签章" prop="signatureUrl">
          <el-popover
            placement="right-end"
            trigger="hover">
            <el-button @click="showPhoto(inputForm.signatureUrl)">查看</el-button>
            <el-upload slot="reference"
                       class="avatar-uploader"
                       :action="`${$http.BASE_URL}/sys/userInfo/webupload/upload?uploadPath=signatureUrl`"
                       :on-success="handleAvatarSuccess2"
                       :before-upload="beforeAvatarUpload"
                       :show-file-list="false">
              <img v-if="inputForm.signatureUrl" :src="urlStart" class="avatar-uploader">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-popover>
        </el-form-item>

        <el-form-item label="教育经历" prop="sysUserEducations">
          <vxe-toolbar>
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('education')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>

        <vxe-table
          border
          show-overflow
          ref="xTable1"
          class="vxe-table-element"
          :data="sysUserEducations"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'row', showStatus: true, autoClear: true}"
        >

          <vxe-table-column field="schoolName" title="毕业院校" :edit-render="{}">
            <template v-slot:edit="scope" >
              <el-input v-model="scope.row.schoolName" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="major" title="所学专业" :edit-render="{}">
            <template v-slot:edit="scope" >
              <el-input v-model="scope.row.major" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="education" title="学历"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_education')}">
            <template v-slot:edit="scope" >
              <vxe-select v-model="scope.row.education" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_education')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="degree" title="学位"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_degree')}">
            <template v-slot:edit="scope" >
              <vxe-select v-model="scope.row.degree" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_degree')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="educationType" title="学历性质"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_education_type')}">
            <template v-slot:edit="scope" >
              <vxe-select v-model="scope.row.educationType" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_education_type')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="entranceDate" title="入学日期" :edit-render="{}">
            <template v-slot:edit="scope" >
              <vxe-input v-model="scope.row.entranceDate" placeholder="入学日期" type="date" transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="graduationDate" title="毕业日期" :edit-render="{}">
            <template v-slot:edit="scope" >
              <vxe-input v-model="scope.row.graduationDate" placeholder="毕业日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="educationCertificateUrl" title="学历证书" :edit-render="{}">
            <template v-slot="{row}">
              <img class="img" :src="row.educationCertificateUrl"/>
            </template>
            <template v-slot:edit="scope" >
              <el-upload
                class="avatar"
                :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=educationCertificateUrl`"
                :on-success="(res,file)=> handleAvatarSuccess3(res,file,scope)"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false">
                <img :src="scope.row.educationCertificateUrl" class="avatar">
              </el-upload>
            </template>
          </vxe-table-column>
          <vxe-table-column field="degreeCertificateUrl" title="学位证书" :edit-render="{}">
            <template v-slot="{row}">
              <img class="img" :src="row.degreeCertificateUrl"/>
            </template>
            <template v-slot:edit="scope" >
              <el-upload
                class="avatar"
                :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=degreeCertificateUrl`"
                :on-success="(res,file)=> handleAvatarSuccess4(res,file,scope)"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false">
                <img :src="scope.row.degreeCertificateUrl" class="avatar">
              </el-upload>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'education')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="劳动关系" prop="sysUserContracts">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('contract')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>

        <vxe-table
          border
          show-overflow
          ref="xTable2"
          class="vxe-table-element"
          :data="sysUserContracts"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >

          <vxe-table-column field="contractType" title="合同类型"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_contract_type')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.contractType" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_contract_type')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="contractNumber" title="合同编号" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.contractNumber" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="contractPeriod" title="合同期限" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.contractPeriod" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="contractBeginDate" title="合同起始日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.contractBeginDate" placeholder="合同起始日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="contractEndDate" title="合同终止日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.contractEndDate" placeholder="合同终止日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="probationEndDate" title="试用期结束日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.probationEndDate" placeholder="试用期结束日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="processingDate" title="办理日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.processingDate" placeholder="办理日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
            <template v-slot="{row}">
              <img class="img" :src="row.fileUrl"/>
            </template>
            <template v-slot:edit="scope" >
              <el-upload
                class="avatar"
                :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                :on-success="(res,file)=> handleAvatarSuccess5(res,file,scope)"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false">
                <img v-if="scope.row.fileUrl" :src="scope.row.fileUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-table"></i>
              </el-upload>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'contract')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="外语语种" prop="sysUserLanguages">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('languages')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable3"
          class="vxe-table-element"
          :data="sysUserLanguages"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="languages" title="语种"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_languages')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.languages" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_languages')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="level" title="熟练程度"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_proficiency')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.level" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_proficiency')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="certificateName" title="证书名称" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.certificateName" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="getDate" title="获证日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.getDate" placeholder="获证日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
            <template v-slot="{row}">
              <img class="img" :src="row.fileUrl"/>
            </template>
            <template v-slot:edit="scope" >
              <el-upload
                class="avatar"
                :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                :on-success="(res,file)=> handleAvatarSuccess6(res,file,scope)"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false">
                <img v-if="scope.row.fileUrl" :src="scope.row.fileUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-table"></i>
              </el-upload>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'languages')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="工作经历" prop="sysUserWorks">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('work')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable4"
          class="vxe-table-element"
          :data="sysUserWorks"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="workName" title="所在单位" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.workName" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="workDepartment" title="工作部门" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.workDepartment" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="workPost" title="职务或岗位" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.workPost" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="beginDate" title="起始日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.beginDate" placeholder="起始日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="endDate" title="终止日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.endDate" placeholder="终止日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="witness" title="证明人" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.witness" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="witnessPhone" title="证明人联系方式" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.witnessPhone" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'work')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="执业资格证书" prop="sysUserCertificates">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('certificate')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable5"
          class="vxe-table-element"
          :data="sysUserCertificates"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="certificateName" title="证书名称"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_certificate_name')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.certificateName" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_certificate_name')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="certificateNumber" title="证书编码" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.certificateNumber" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="regineDate" title="注册日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.regineDate" placeholder="注册日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="issueDate" title="发证日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.issueDate" placeholder="发证日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="issuingAuthority" title="发证机关" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.issuingAuthority" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="major" title="专业"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_major')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.major" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_major')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
            <template v-slot="{row}">
              <img class="img" :src="row.fileUrl"/>
            </template>
            <template v-slot:edit="scope" >
              <el-upload
                class="avatar"
                :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                :on-success="(res,file)=> handleAvatarSuccess7(res,file,scope)"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false">
                <img v-if="scope.row.fileUrl" :src="scope.row.fileUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-table"></i>
              </el-upload>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'certificate')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="职称" prop="sysUserTitles">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('title')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable6"
          class="vxe-table-element"
          :data="sysUserTitles"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="titleName" title="职称名称" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.titleName" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="titleLevel" title="职称等级" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.titleLevel" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="getDate" title="取得日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.getDate" placeholder="取得日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="getAccess" title="取得途径" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.getAccess" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="approvedBy" title="审批单位" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.approvedBy" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
            <template v-slot="{row}">
              <img class="img" :src="row.fileUrl"/>
            </template>
            <template v-slot:edit="scope" >
              <el-upload
                class="avatar"
                :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                :on-success="(res,file)=> handleAvatarSuccess8(res,file,scope)"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false">
                <img v-if="scope.row.fileUrl" :src="scope.row.fileUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-table"></i>
              </el-upload>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'title')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="家庭情况" prop="sysUserFamilys">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('family')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable7"
          class="vxe-table-element"
          :data="sysUserFamilys"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="relationship" title="与本人关系" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.relationship" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="name" title="成员姓名" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.name" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="idCard" title="身份证号码" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.idCard" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="sex" title="成员性别"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sex')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.sex" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sex')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="linkmanPhone" title="成员联系方式" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.linkmanPhone" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'family')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="培训经历" prop="sysUserTrains">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('train')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable8"
          class="vxe-table-element"
          :data="sysUserTrains"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="trainName" title="培训名称" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.trainName" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="trainInstitution" title="培训机构" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.trainInstitution" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="trainAddress" title="培训地点" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.trainAddress" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="trainBeginDate" title="培训起始日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.trainBeginDate" placeholder="培训起始日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="trainEndDate" title="培训终止日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.trainEndDate" placeholder="培训终止日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="trainLevel" title="培训类型"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_training_type')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.trainLevel" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_training_type')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="time" title="学时" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.time" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="certificate" title="所获证书" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.certificate" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
            <template v-slot="{row}">
              <img class="img" :src="row.fileUrl"/>
            </template>
            <template v-slot:edit="scope" >
              <el-upload
                class="avatar"
                :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                :on-success="(res,file)=> handleAvatarSuccess9(res,file,scope)"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false">
                <img v-if="scope.row.fileUrl" :src="scope.row.fileUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-table"></i>
              </el-upload>
            </template>
          </vxe-table-column>
          <vxe-table-column field="remarks" title="备注" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.remarks" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'train')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="社会及行业职务" prop="sysUserDuties">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('duties')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable9"
          class="vxe-table-element"
          :data="sysUserDuties"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="postName" title="职务名称" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.postName" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="postBeginDate" title="任职开始日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.postBeginDate" placeholder="任职开始日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="postEndDate" title="任职结束日期" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.postEndDate" placeholder="任职结束日期" type="date"transfer></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="postOffice" title="任职机构" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.postOffice" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'duties')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="奖惩情况" prop="sysUserRewards">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('rewards')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable10"
          class="vxe-table-element"
          :data="sysUserRewards"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="rewardsType" title="奖惩类型"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_rewards')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.rewardsType" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_rewards')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="rewardsName" title="奖惩名称" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.rewardsName" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="time" title="时间" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.time" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="level" title="级别" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.level" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="reason" title="原因" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.reason" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="grantingAuthority" title="授予机构" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.grantingAuthority" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'rewards')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="工作业绩" prop="sysUserAchievements">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('achievement')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable11"
          class="vxe-table-element"
          :data="sysUserAchievements"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="projectName" title="项目名称" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.projectName" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="projectClient" title="委托方" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.projectClient" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="engineeringClassification" title="工程分类" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.engineeringClassification" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="number" title="规模类型/单位/数量" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.number" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="post" title="担任职务"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_post')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.post" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_post')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="content" title="参与内容" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.content" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'achievement')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <el-form-item style="margin-top: 20px" label="电子档案" prop="sysUserArchives">
          <vxe-toolbar >
            <template #buttons>
              <vxe-button status="primary" :disabled="method==='view'" size="mini" @click="insertEvent('archives')">新增</vxe-button>
            </template>
          </vxe-toolbar>
        </el-form-item>
        <vxe-table
          border
          show-overflow
          ref="xTable12"
          class="vxe-table-element"
          :data="sysUserArchives"
          style="margin-left: 5em"
          @cell-click="dbclickFun"
          @edit-closed=""
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
        >
          <vxe-table-column field="archivesName" title="项目名称"
                            :edit-render="{name: '$select', options: $dictUtils.getDictList('sys_user_archives')}">
            <template v-slot:edit="scope">
              <vxe-select v-model="scope.row.archivesName" transfer>
                <vxe-option
                  v-for="item in $dictUtils.getDictList('sys_user_archives')"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="archivesNo" title="编号" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.archivesNo" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
            <template v-slot="{row}">
              <img class="img" :src="row.fileUrl"/>
            </template>
            <template v-slot:edit="scope" >
              <el-upload
                class="avatar"
                :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                :on-success="(res,file)=> handleAvatarSuccess10(res,file,scope)"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false">
                <img v-if="scope.row.fileUrl" :src="scope.row.fileUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-table"></i>
              </el-upload>
            </template>
          </vxe-table-column>
          <vxe-table-column field="verification" title="验证" :edit-render="{}">
            <template v-slot:edit="scope">
              <el-input v-model="scope.row.verification" ></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'archives')">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>

      </el-form>

      <el-image-viewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="[url]"
        zIndex="9999"/>
      <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="close(),closeXTable()" 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 UserInfoService from '@/api/sys/UserInfoService'
  import SelectTree from '@/components/treeSelect/treeSelect.vue'
  import PostService from '@/api/sys/PostService'
  import OSSSerive, {
    httpRequest,
    handleRemove,
    fileName
  } from '@/api/sys/OSSService'
  import moment from 'moment'
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  export default {
    data () {
      return {
        urlStart: '',
        scope: {},
        visable: false,
        gridData: [],
        radio: 0,
        tableData: [],
        dataList: [],
        dataListNew: [],
        title: '',
        method: '',
        visible: false,
        loading: false,
        returnForm: {

        },
        postList: [],
        inputForm: {
          // 判断是否为当前登录人参数
          permissionFlag: '',
          jobNo: '',
          name: '',
          sex: '',
          nation: '',
          idCard: '',
          age: '',
          birthday: '',
          email: '',
          mobilePhone: '',
          phone: '',
          userType: '',
          bankNumber: '',
          maritalStatus: '',
          politicalOutlook: '',
          nativePlace: '',
          registeredResidence: '',
          permanentAddress: '',
          socialInsuranceNo: '',
          medicalInsuranceNo: '',
          accumulationFundNo: '',
          wx: '',
          qq: '',
          entryDate: '',
          probationPosition: '',
          probationTime: '',
          probationEndDate: '',
          department: '',
          position: '',
          positions: [],
          highestEducation: '',
          remarks: '',
          personalProfile: '',
          headPortraitUrl: '',
          signatureUrl: ''
        },
        sysUserEducations: [],
        sysUserEducation: {
          schoolName: '',
          major: '',
          education: '',
          degree: '',
          educationType: '',
          entranceDate: '',
          graduationDate: '',
          educationCertificateUrl: '',
          degreeCertificateUrl: ''
        },
        sysUserContracts: [],
        sysUserContract: {
          contractType: '',
          contractNumber: '',
          contractPeriod: '',
          contractBeginDate: '',
          contractEndDate: '',
          probationEndDate: '',
          processingDate: '',
          fileUrl: ''
        },
        sysUserLanguages: [],
        sysUserLanguage: {
          languages: '',
          level: '',
          certificateName: '',
          getDate: '',
          fileUrl: ''
        },
        sysUserWorks: [],
        sysUserWork: {
          workName: '',
          workDepartment: '',
          workPost: '',
          beginDate: '',
          endDate: '',
          witness: '',
          witnessPhone: ''
        },
        sysUserCertificates: [],
        sysUserCertificate: {
          certificateName: '',
          certificateNumber: '',
          regineDate: '',
          issueDate: '',
          IssuingAuthority: '',
          major: '',
          fileUrl: ''
        },
        sysUserTitles: [],
        sysUserTitle: {
          titleName: '',
          titleLevel: '',
          getDate: '',
          getAccess: '',
          approvedBy: '',
          fileUrl: ''
        },
        sysUserFamilys: [],
        sysUserFamily: {
          relationship: '',
          name: '',
          idCard: '',
          sex: '',
          linkmanPhone: ''
        },
        sysUserTrains: [],
        sysUserTrain: {
          trainName: '',
          trainInstitution: '',
          trainAddress: '',
          trainBeginDate: '',
          trainEndDate: '',
          trainLevel: '',
          time: '',
          certificate: '',
          fileUrl: '',
          remarks: ''
        },
        sysUserDuties: [],
        sysUserDutie: {
          postName: '',
          postBeginDate: '',
          postEndDate: '',
          postOffice: ''
        },
        sysUserRewards: [],
        sysUserReward: {
          rewardsType: '',
          rewardsName: '',
          time: '',
          level: '',
          reason: '',
          grantingAuthority: ''
        },
        sysUserAchievements: [],
        sysUserAchievement: {
          projectName: '',
          projectClient: '',
          engineeringClassification: '',
          number: '',
          post: '',
          content: ''
        },
        sysUserArchives: [],
        sysUserArchive: {
          archivesName: '',
          archivesNo: '',
          fileUrl: '',
          verification: ''
        },
        filesArra2: [],
        fileList: [],
        isFlag: true,
        showViewer: false, // 显示查看器
        url: '',
        rowurl: '',
        src: '',
        showVi: true,
        onedit: false,
        type: ''
      }
    },
    components: {
      ElImageViewer,
      SelectTree
    },
    ossService: null,
    userInfoService: null,
    postService: null,
    created () {
      this.ossService = new OSSSerive()
      this.userInfoService = new UserInfoService()
      this.postService = new PostService()
    },
    methods: {
      handleAvatarSuccess1 (res, file) {
        this.inputForm.headPortraitUrl = res.url
        this.$forceUpdate()
      },
      handleAvatarSuccess2 (res, file) {
        this.inputForm.signatureUrl = res.url
        this.$forceUpdate()
      },
      handleAvatarSuccess3 (res, file, scope) {
        this.sysUserEducations[scope.$rowIndex].educationCertificateUrl = res.url
        this.$forceUpdate()
      },
      handleAvatarSuccess4 (res, file, scope) {
        this.sysUserEducations[scope.$rowIndex].degreeCertificateUrl = res.url
        this.$forceUpdate()
      },
      handleAvatarSuccess5 (res, file, scope) {
        this.sysUserContracts[scope.$rowIndex].fileUrl = res.url
        this.$forceUpdate()
      },
      handleAvatarSuccess6 (res, file, scope) {
        this.sysUserLanguages[scope.$rowIndex].fileUrl = res.url
        this.$forceUpdate()
      },
      handleAvatarSuccess7 (res, file, scope) {
        this.sysUserCertificates[scope.$rowIndex].fileUrl = res.url
        this.$forceUpdate()
      },
      handleAvatarSuccess8 (res, file, scope) {
        this.sysUserTitles[scope.$rowIndex].fileUrl = res.url
        this.$forceUpdate()
      },
      handleAvatarSuccess9 (res, file, scope) {
        this.sysUserTrains[scope.$rowIndex].fileUrl = res.url
        this.$forceUpdate()
      },
      handleAvatarSuccess10 (res, file, scope) {
        this.sysUserArchives[scope.$rowIndex].fileUrl = res.url
        this.$forceUpdate()
      },

      beforeAvatarUpload (file) {
        const isJPG = file.type.indexOf('image/') >= 0
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          console.log('上传LOGO只能是图片格式!')
          this.$message.error('上传LOGO只能是图片格式!')
          return false
        }
        if (!isLt2M) {
          console.log('上传LOGO大小不能超过 2MB!')
          this.$message.error('上传LOGO大小不能超过 2MB!')
          return false
        }
        return true
      },
      async toHref (row) {
        const link = document.createElement('a')
        if (row.id === null || row.id === undefined || row.id === '') {
          await this.ossService.getTemporaryUrl(row.raw.url).then((data) => {
            const url = data.data // 完整的url则直接使用
            // 这里是将url转成blob地址，
            fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
              link.href = URL.createObjectURL(blob)
              console.log(link.href)
              link.download = row.name || '' // 下载文件的名字
              // a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字
              document.body.appendChild(link)
              link.click()
              // 在资源下载完成后 清除 占用的缓存资源
              window.URL.revokeObjectURL(link.href)
              document.body.removeChild(link)
            })
          })
        } else {
          const url = row.temporaryUrl // 完整的url则直接使用
          // 这里是将url转成blob地址，
          fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
            link.href = URL.createObjectURL(blob)
            console.log(link.href)
            link.download = row.name || '' // 下载文件的名字
            // a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字
            document.body.appendChild(link)
            link.click()
            // 在资源下载完成后 清除 占用的缓存资源
            window.URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          })
        }
      },
      onPreview (url) {
        this.url = url
        this.showViewer = true
      },
      // 关闭查看器
      closeViewer () {
        this.url = ''
        this.showViewer = false
      },
      init (method, id) {
        this.dataList = []
        this.dataListNew = []
        this.ossService.findFileList(id).then(({data}) => {
          data.forEach((item) => {
            item.name = item.attachmentName
            this.dataList.push(item)
            this.dataListNew.push(item)
          })
        })
        this.method = method
        this.inputForm = {
          // 判断是否为当前登录人参数
          permissionFlag: '',
          jobNo: '',
          name: '',
          sex: '',
          nation: '',
          idCard: '',
          age: '',
          birthday: '',
          email: '',
          mobilePhone: '',
          phone: '',
          userType: '',
          bankNumber: '',
          maritalStatus: '',
          politicalOutlook: '',
          nativePlace: '',
          registeredResidence: '',
          permanentAddress: '',
          socialInsuranceNo: '',
          medicalInsuranceNo: '',
          accumulationFundNo: '',
          wx: '',
          qq: '',
          entryDate: '',
          probationPosition: '',
          probationTime: '',
          probationEndDate: '',
          department: '',
          position: '',
          positions: [],
          highestEducation: '',
          remarks: '',
          personalProfile: '',
          sysUserEducations: [],
          sysUserEducation: {
            schoolName: '',
            major: '',
            education: '',
            degree: '',
            educationType: '',
            entranceDate: '',
            graduationDate: '',
            educationCertificateUrl: '',
            degreeCertificateUrl: ''
          },
          sysUserContracts: [],
          sysUserContract: {
            contractType: '',
            contractNumber: '',
            contractPeriod: '',
            contractBeginDate: '',
            contractEndDate: '',
            probationEndDate: '',
            processingDate: '',
            fileUrl: ''
          },
          sysUserLanguages: [],
          sysUserLanguage: {
            languages: '',
            level: '',
            certificateName: '',
            getDate: '',
            fileUrl: ''
          },
          sysUserWorks: [],
          sysUserWork: {
            workName: '',
            workDepartment: '',
            workPost: '',
            beginDate: '',
            endDate: '',
            witness: '',
            witnessPhone: ''
          },
          sysUserCertificates: [],
          sysUserCertificate: {
            certificateName: '',
            certificateNumber: '',
            regineDate: '',
            issueDate: '',
            IssuingAuthority: '',
            major: '',
            fileUrl: ''
          },
          sysUserTitles: [],
          sysUserTitle: {
            titleName: '',
            titleLevel: '',
            getDate: '',
            getAccess: '',
            approvedBy: '',
            fileUrl: ''
          },
          sysUserFamilys: [],
          sysUserFamily: {
            relationship: '',
            name: '',
            idCard: '',
            sex: '',
            linkmanPhone: ''
          },
          sysUserTrains: [],
          sysUserTrain: {
            trainName: '',
            trainInstitution: '',
            trainAddress: '',
            trainBeginDate: '',
            trainEndDate: '',
            trainLevel: '',
            time: '',
            certificate: '',
            fileUrl: '',
            remarks: ''
          },
          sysUserDuties: [],
          sysUserDutie: {
            postName: '',
            postBeginDate: '',
            postEndDate: '',
            postOffice: ''
          },
          sysUserRewards: [],
          sysUserReward: {
            rewardsType: '',
            rewardsName: '',
            time: '',
            level: '',
            reason: '',
            grantingAuthority: ''
          },
          sysUserAchievements: [],
          sysUserAchievement: {
            projectName: '',
            projectClient: '',
            engineeringClassification: '',
            number: '',
            post: '',
            content: ''
          },
          sysUserArchives: [],
          sysUserArchive: {
            archivesName: '',
            archivesNo: '',
            fileUrl: '',
            verification: ''
          },
          filesArra2: [],
          fileList: [],
          isFlag: true,
          showViewer: false, // 显示查看器
          url: '',
          rowurl: '',
          src: '',
          showVi: true,
          type: ''
        }
        this.inputForm.id = id
        if (method === 'add') {
          this.inputForm.permissionFlag = true
          this.title = `新建客户信息`
        } else if (method === 'edit') {
          this.title = '修改客户信息'
        } else if (method === 'view') {
          this.showVi = false
          this.title = '查看客户详情'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          // this.$refs.inputForm.resetFields()
          this.postService.list({current: 1, size: -1}).then(({data}) => {
            this.postList = data.records
          })
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.userInfoService.getUserInfoById(this.inputForm.id).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data)
              this.inputForm.headPortraitUrl = data.headPortraitUrl
              this.inputForm.signatureUrl = data.signatureUrl
              data.sysUserEducations.forEach(i => {
                this.sysUserEducations.push(i)
              })
              data.sysUserContracts.forEach(i => {
                this.sysUserContracts.push(i)
              })
              data.sysUserLanguages.forEach(i => {
                this.sysUserLanguages.push(i)
              })
              data.sysUserWorks.forEach(i => {
                this.sysUserWorks.push(i)
              })
              data.sysUserCertificates.forEach(i => {
                this.sysUserCertificates.push(i)
              })
              data.sysUserTitles.forEach(i => {
                this.sysUserTitles.push(i)
              })
              data.sysUserFamilies.forEach(i => {
                this.sysUserFamilys.push(i)
              })
              data.sysUserTrains.forEach(i => {
                this.sysUserTrains.push(i)
              })
              data.sysUserDuties.forEach(i => {
                this.sysUserDuties.push(i)
              })
              data.sysUserRewards.forEach(i => {
                this.sysUserRewards.push(i)
              })
              data.sysUserAchievements.forEach(i => {
                this.sysUserAchievements.push(i)
              })
              data.sysUserArchives.forEach(i => {
                this.sysUserArchives.push(i)
              })
              const p = []
              if (data.position !== null && data.position !== undefined && data.position !== '') {
                data.position.split(',').forEach(item => {
                  p.push(item)
                })
              }
              this.inputForm.positions = p
            })
          }
          this.loading = false
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.inputForm.sysUserEducations = []
            this.sysUserEducations.forEach((item) => {
              this.inputForm.sysUserEducations.push(item)
            })
            this.inputForm.sysUserContracts = []
            this.sysUserContracts.forEach((item) => {
              this.inputForm.sysUserContracts.push(item)
            })
            this.inputForm.sysUserLanguages = []
            this.sysUserLanguages.forEach((item) => {
              this.inputForm.sysUserLanguages.push(item)
            })
            this.inputForm.sysUserWorks = []
            this.sysUserWorks.forEach((item) => {
              this.inputForm.sysUserWorks.push(item)
            })
            this.inputForm.sysUserCertificates = []
            this.sysUserCertificates.forEach((item) => {
              this.inputForm.sysUserCertificates.push(item)
            })
            this.inputForm.sysUserTitles = []
            this.sysUserTitles.forEach((item) => {
              this.inputForm.sysUserTitles.push(item)
            })
            this.inputForm.sysUserFamilies = []
            this.sysUserFamilys.forEach((item) => {
              this.inputForm.sysUserFamilies.push(item)
            })
            this.inputForm.sysUserTrains = []
            this.sysUserTrains.forEach((item) => {
              this.inputForm.sysUserTrains.push(item)
            })
            this.inputForm.sysUserDuties = []
            this.sysUserDuties.forEach((item) => {
              this.inputForm.sysUserDuties.push(item)
            })
            this.inputForm.sysUserRewards = []
            this.sysUserRewards.forEach((item) => {
              this.inputForm.sysUserRewards.push(item)
            })
            this.inputForm.sysUserAchievements = []
            this.sysUserAchievements.forEach((item) => {
              this.inputForm.sysUserAchievements.push(item)
            })
            this.inputForm.sysUserArchives = []
            this.sysUserArchives.forEach((item) => {
              this.inputForm.sysUserArchives.push(item)
            })

            this.inputForm.position = this.inputForm.positions.join(',')

            this.userInfoService.save(this.inputForm).then(({data}) => {
              this.close()
              this.$message.success(data)
              this.$emit('refreshDataList')
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      close () {
        this.$refs.inputForm.resetFields()
        this.visible = false
        this.showVi = true
      },
      httpRequest (file) {
        httpRequest(file, fileName(file), 'projectRecords')
      },
      handleRemove () {
        this.fileList = handleRemove()
      },
      changes (file, fileList) {
        console.log('file', file)
        console.log('22', fileList)
        this.dataListNew = []
        this.dataList.forEach((item) => {
          this.dataListNew.push(item)
        })
        fileList.forEach((item) => {
          item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
          item.createBy = this.$store.state.user.name
          this.dataListNew.push(item)
        })
        const isLt2M = file.size / 1024 / 1024 < 300
        if (isLt2M === false) {
          this.$message.error('文件大小不能超过 ' + 300 + 'M !')
          this.fileList = []
          this.filesArra2 = []
        }
      },
      async showFile (row) {
        console.log('row', row)
        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
          if (row.url !== null && row.url !== undefined && row.url !== '') {
            this.onPreview(row.url)
            return
          } else {
            await this.ossService.getTemporaryUrl(row.raw.url).then((data) => {
              this.onPreview(data.data)
            })
            return
          }
        }
        if (row.url !== null && row.url !== undefined && row.url !== '') {
          if (suffix === 'pdf') {
            window.open('https://view.xdocin.com/xdoc?_xdoc=' + row.url, '_blank')
          } else if (suffix === 'rar' || suffix === 'zip' || suffix === 'jar' || suffix === '7z') {
            window.open('http://ow365.cn/?i=25008&furl=' + row.url, '_blank')
          } else {
            window.open('https://view.officeapps.live.com/op/view.aspx?src=' + row.url, '_blank')
          }
        } else if (row.raw.url !== null && row.raw.url !== undefined && row.raw.url !== '') {
          await this.ossService.getTemporaryUrl(row.raw.url).then((data) => {
            this.rowurl = data.data
          })
          if (suffix === 'pdf') {
            window.open('https://view.xdocin.com/xdoc?_xdoc=' + this.rowurl, '_blank')
          } else if (suffix === 'rar' || suffix === 'zip' || suffix === 'jar' || suffix === '7z') {
            window.open('http://ow365.cn/?i=25008&furl=' + this.rowurl, '_blank')
          } else {
            window.open('https://view.officeapps.live.com/op/view.aspx?src=' + this.rowurl, '_blank')
          }
        }
      },
      // 排序
      sortChangeHandle (column) {
        this.orders = []
        if (column.order != null) {
          this.orders.push({column: this.$utils.toLine(column.prop), asc: column.order === 'ascending'})
        }
        this.refreshList()
      },
      deleteMsgById (row, index) {
        console.log(index)
        this.dataListNew.splice(index, 1)
        if (row.id !== null && row.id !== '' && row.id !== undefined) {
          this.ossService.deleteMsgById(row.id)
        }
      },
      twoDecimalPlaces (num) {
        let str = num.toString()
        var len1 = str.substr(0, 1)
        var len2 = str.substr(1, 1)
        // eslint-disable-next-line eqeqeq
        if (str.length > 1 && len1 == 0 && len2 != '.') {
          str = str.substr(1, 1)
        }
        // eslint-disable-next-line eqeqeq
        if (len1 == '.') {
          str = ''
        }
        // eslint-disable-next-line eqeqeq
        if (str.indexOf('.') != -1) {
          var str_ = str.substr(str.indexOf('.') + 1)
          // eslint-disable-next-line eqeqeq
          if (str_.indexOf('.') != -1) {
            str = str.substr(0, str.indexOf('.') + str_.indexOf('.') + 1)
          }
          if (str_.length > 4) {
            this.$message.warning(`金额小数点后只能输入四位，请正确输入！`)
            return (str = '')
          }
        }
        // eslint-disable-next-line no-useless-escape
        str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
        return str
      },
      positiveInteger (num) {
        let str = num.toString()
        var len1 = str.substr(0, 1)
        var len2 = str.substr(1, 1)
        // eslint-disable-next-line eqeqeq
        if (str.length > 1 && len1 == 0 && len2 != '.') {
          str = str.substr(1, 1)
        }
        // eslint-disable-next-line eqeqeq
        if (len1 == '.') {
          str = ''
        }
        // eslint-disable-next-line no-useless-escape
        str = str.replace(/[^\d^]+/g, '') // 保留数字
        return str
      },
      tableRowClassName ({row, rowIndex}) {
        row.index = rowIndex
      },
      handleRadioChange (val) {
        if (val) {
          this.radio = val.index
        }
      },
      // 点击修改
      dbclickFun (cell) {
        this.onedit = false
      },
      // 删除
      removeEvent (row, rowIndex, type) {
        if (type === 'education') {
          this.$refs.xTable1.remove(row)
          this.sysUserEducations.splice(rowIndex, 1)
        }
        if (type === 'contract') {
          this.$refs.xTable2.remove(row)
          this.sysUserContracts.splice(rowIndex, 1)
        }
        if (type === 'languages') {
          this.$refs.xTable3.remove(row)
          this.sysUserLanguages.splice(rowIndex, 1)
        }
        if (type === 'work') {
          this.$refs.xTable4.remove(row)
          this.sysUserWorks.splice(rowIndex, 1)
        }
        if (type === 'certificate') {
          this.$refs.xTable5.remove(row)
          this.sysUserCertificates.splice(rowIndex, 1)
        }
        if (type === 'title') {
          this.$refs.xTable6.remove(row)
          this.sysUserTitles.splice(rowIndex, 1)
        }
        if (type === 'family') {
          this.$refs.xTable7.remove(row)
          this.sysUserFamilys.splice(rowIndex, 1)
        }
        if (type === 'train') {
          this.$refs.xTable8.remove(row)
          this.sysUserTrains.splice(rowIndex, 1)
        }
        if (type === 'duties') {
          this.$refs.xTable9.remove(row)
          this.sysUserDuties.splice(rowIndex, 1)
        }
        if (type === 'rewards') {
          this.$refs.xTable10.remove(row)
          this.sysUserRewards.splice(rowIndex, 1)
        }
        if (type === 'achievement') {
          this.$refs.xTable11.remove(row)
          this.sysUserAchievements.splice(rowIndex, 1)
        }
        if (type === 'archives') {
          this.$refs.xTable12.remove(row)
          this.sysUserArchives.splice(rowIndex, 1)
        }
      },
      // 新增
      // eslint-disable-next-line no-dupe-keys
      async insertEvent (type) {
        if (type === 'education') {
          await this.$refs.xTable1.insert().then((data) => {
            this.sysUserEducations.push(data)
          })
        }
        if (type === 'contract') {
          await this.$refs.xTable2.insert().then((data) => {
            this.sysUserContracts.push(data)
          })
        }
        if (type === 'languages') {
          await this.$refs.xTable3.insert().then((data) => {
            this.sysUserLanguages.push(data)
          })
        }
        if (type === 'work') {
          await this.$refs.xTable4.insert().then((data) => {
            this.sysUserWorks.push(data)
          })
        }
        if (type === 'certificate') {
          await this.$refs.xTable5.insert().then((data) => {
            this.sysUserCertificates.push(data)
          })
        }
        if (type === 'title') {
          await this.$refs.xTable6.insert().then((data) => {
            this.sysUserTitles.push(data)
          })
        }
        if (type === 'family') {
          await this.$refs.xTable7.insert().then((data) => {
            this.sysUserFamilys.push(data)
          })
        }
        if (type === 'train') {
          await this.$refs.xTable8.insert().then((data) => {
            this.sysUserTrains.push(data)
          })
        }
        if (type === 'duties') {
          await this.$refs.xTable9.insert().then((data) => {
            this.sysUserDuties.push(data)
          })
        }
        if (type === 'rewards') {
          await this.$refs.xTable10.insert().then((data) => {
            this.sysUserRewards.push(data)
          })
        }
        if (type === 'achievement') {
          await this.$refs.xTable11.insert().then((data) => {
            this.sysUserAchievements.push(data)
          })
        }
        if (type === 'archives') {
          await this.$refs.xTable12.insert().then((data) => {
            this.sysUserArchives.push(data)
          })
        }
      },
      // 关闭窗口时调用
      closeXTable () {
        this.sysUserEducations = []
        this.sysUserContracts = []
        this.sysUserLanguages = []
        this.sysUserWorks = []
        this.sysUserCertificates = []
        this.sysUserTitles = []
        this.sysUserFamilys = []
        this.sysUserTrains = []
        this.sysUserDuties = []
        this.sysUserRewards = []
        this.sysUserAchievements = []
        this.sysUserArchives = []
        this.closePop()
      },
      rowStyle (event) {
        return 'cursor:pointer;'
      },
      closePop () {
        this.visable = false
      },
      showPhoto (url) {
        this.onPreview(url)
      },
      // 身份证验证
      async validID (rule, value, callback) {
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        if (reg.test(value)) {
          await this.go(value.length)
          callback()
        } else {
          callback(new Error('身份证号码不正确'))
        }
      },

      // 实现自动生成生日/年龄
      go (val) {
        let iden = this.inputForm.idCard
        let birth = null
        let myDate = new Date()
        let month = myDate.getMonth() + 1
        let day = myDate.getDate()
        let age = 0

        if (val === 18) {
          age = myDate.getFullYear() - iden.substring(6, 10) - 1
          birth = iden.substring(6, 10) + '-' + iden.substring(10, 12) + '-' + iden.substring(12, 14)
          if ((iden.substring(10, 12) < month || iden.substring(10, 12) === month) && iden.substring(12, 14) <= day) age++
        }
        if (val === 15) {
          age = myDate.getFullYear() - iden.substring(6, 8) - 1901
          birth = '19' + iden.substring(6, 8) + '-' + iden.substring(8, 10) + '-' + iden.substring(10, 12)
          if ((iden.substring(8, 10) < month || iden.substring(8, 10) === month) && iden.substring(10, 12) <= day) age++
        }
        this.inputForm.age = age
        this.inputForm.birthday = birth
      }
    }
  }
</script>

<style>
  .tid_40 .vxe-body--column .vxe-cell{
    padding: 1px;
    text-align: center;
  }
  .tid_40 .vxe-header--row .col--last{
    text-align: center;
  }
  .tid_45 .vxe-body--column .vxe-cell{
    padding: 1px;
    text-align: center;
  }
  .tid_45 .vxe-header--row .col--last{
    text-align: center;
  }
</style>

<style scoped>
  .avatar-uploader{
    height: 150px;
  }
  .avatar{
    height: 40px;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
  }
  .el-divider__text {
    font-weight: bold;
    font-size: 16px;
  }
  .img {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
  }
</style>
