kd-aiot-frontend/src/views/system/organization/components/org-user-edit.vue

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="60%"
    :visible="visible"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '基本信息' : '基本信息'"
    @update:visible="updateVisible"
    :maxable="true"
  >
    <el-form
      ref="form"
      :model="form"
      class="el-form-box"
      :rules="rules"
      label-width="82px"
      :disabled="disabled"
    >
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="所属机构:" prop="groupId">
            <org-select
              :data="institutionList"
              placeholder="请选择所属机构"
              v-model="form.groupId"
              :disabled="!!form.loginName"
              @checkedKeys="checkedKeys"
            />
          </el-form-item>

          <el-form-item label="隶属部门:">
            <el-cascader
              class="ele-block"
              :options="organization"
              placeholder="请选择隶属部门"
              :props="defaultProps"
              ref="deptRef"
              :show-all-levels="true"
              @change="handleChange"
              :disabled="!!form.loginName"
              v-model="form.deptIds"
              clearable
            ></el-cascader>
          </el-form-item>

          <el-form-item label="所属工厂:">
            <el-select
              style="width: 100%"
              clearable
              v-model="form.factoryId"
              filterable
              :disabled="!!form.loginName"
              placeholder="请选择所属工厂"
            >
              <el-option
                v-for="item in factoryList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="性别:" prop="sex">
            <el-select
              clearable
              class="ele-block"
              v-model="form.sex"
              placeholder="请选择性别"
            >
              <el-option label="男" :value="1" />
              <el-option label="女" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="员工状态:" prop="status">
            <el-select
              clearable
              class="ele-block"
              v-model="form.status"
              placeholder="请选择员工状态"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="岗位:" prop="postId">
            <!-- <el-input
              clearable
              :maxlength="100"
              v-model="form.postName"
              placeholder="请输入岗位"
            /> -->
            <DictSelection
              dictName="岗位"
              clearable
              filterable
              v-model="form.postId"
              multiple
            >
            </DictSelection>
          </el-form-item>
          <el-form-item label="身份证号:" prop="idCard">
            <el-input
              clearable
              :maxlength="18"
              v-model="form.idCard"
              placeholder="请输入身份证号"
              @change="idCardChange"
            />
          </el-form-item>
          <!-- <el-form-item label="工种:" prop="workTypeId"> -->
          <!-- <DictSelection
              dictName="工种类型"
              clearable
              filterable
              v-model="form.workTypeId"
            >
            </DictSelection> -->
          <!-- <el-select style="width: 100%" clearable v-model="form.workTypeId" filterable placeholder="请选择工种类型">
              <el-option v-for="item in professionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="籍贯:" prop="city">
            <regions-select
              style="width: 100%"
              v-model="city"
              placeholder="请选择省市区"
            />
          </el-form-item>
          <el-form-item label="生日:" prop="age">
            <el-date-picker
              style="width: 100%"
              clearable
              v-model="form.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch
              v-model="form.isEnabled"
              :active-text="form.isEnabled == 1 ? '启用' : '停用'"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="审批签名:" prop="signature">
            <WithView :assetName="''" v-model="form.signature"></WithView>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="工号:" prop="jobNumber">
            <el-input
              clearable
              type="text"
              :maxlength="10"
              v-model="form.jobNumber"
              placeholder="请输入工号"
              onkeyup="value=value.replace(/[^\x00-\xff]/g, '')"
            />
          </el-form-item>
          <el-form-item label="姓名:" prop="name">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.name"
              placeholder="请输入姓名"
            />
          </el-form-item>
          <el-form-item label="用户账号:">
            <el-input
              :disabled="true"
              :maxlength="11"
              v-model="form.loginName"
            />
          </el-form-item>
          <el-form-item label="手机号:" prop="phone">
            <el-input
              clearable
              :maxlength="11"
              v-model="form.phone"
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item label="邮箱:" prop="email">
            <el-input
              clearable
              :maxlength="100"
              v-model="form.email"
              placeholder="请输入邮箱"
            />
          </el-form-item>
          <el-form-item label="年龄:" prop="age">
            <el-input
              type="number"
              clearable
              :maxlength="100"
              v-model="form.age"
              placeholder="请输入年龄"
              onkeyup="value=value.replace(/[^\d.]/g,'')"
            />
          </el-form-item>

          <el-form-item label="入职时间:" prop="joinDate">
            <el-date-picker
              style="width: 100%"
              clearable
              v-model="form.joinDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="毕业院校:" prop="school">
            <el-input
              clearable
              :maxlength="100"
              v-model="form.school"
              placeholder="请输入毕业院校"
            />
          </el-form-item>
          <el-form-item label="微信号:" prop="wxId">
            <el-input
              clearable
              :maxlength="100"
              v-model="form.wxId"
              placeholder="请输入微信号"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="证照列表" name="identityPhotos">
          <ele-pro-table
            ref="table"
            :columns="identityPhotosColumns"
            :datasource="form.identityPhotos"
            max-height="350px"
            :toolkit="[]"
            class="el-form-box"
            :need-page="false"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button type="primary" @click="addIdentityPhotos"
                >添加</el-button
              >
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="handleIdentityPhotosDel(row, $index)"
                >删除
              </el-link>
            </template>
            <template v-slot:categoryLevelId="{ row, $index }"> </template>
            <template v-slot:type="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'identityPhotos.' + $index + '.type'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <DictSelection
                  clearable
                  v-model="row.type"
                  dictName="证件类型"
                ></DictSelection>
              </el-form-item>
            </template>
            <template v-slot:code="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'identityPhotos.' + $index + '.code'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-input v-model="row.code" clearable></el-input>
              </el-form-item>
            </template>
            <template v-slot:level="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'identityPhotos.' + $index + '.level'"
              >
                <el-select
                  style="width: 100%"
                  v-model="row.level"
                  clearable
                  filterable
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in levelOptions"
                    :key="index"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-slot:validityStartTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'identityPhotos.' + $index + '.validityStartTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.validityStartTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:validityEndTime="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'identityPhotos.' + $index + '.validityEndTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.validityEndTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:enactorTime="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'identityPhotos.' + $index + '.enactorTime'"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.enactorTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:fileObj="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'identityPhotos.' + $index + '.fileObj'"
              >
                <fileUpload
                  v-model="row.fileObj"
                  module="main"
                  :showLib="false"
                  :limit="5"
                />
              </el-form-item>
            </template>
            <template v-slot:status="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'identityPhotos.' + $index + '.status'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <DictSelection
                  clearable
                  v-model="row.status"
                  dictName="规则状态"
                ></DictSelection>
              </el-form-item>
            </template>
            <template v-slot:remark="{ row, $index }">
              <el-form-item label-width="0px">
                <el-input v-model="row.remark" type="textarea"></el-input>
              </el-form-item>
            </template>
            <template v-slot:isRequired="{ column }">
              <span class="is-required">{{ column.label }}</span>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="技能列表" name="skills">
          <ele-pro-table
            ref="table"
            :columns="skillsColumns"
            :datasource="form.skills"
            max-height="350px"
            :toolkit="[]"
            class="el-form-box"
            :need-page="false"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button type="primary" @click="addSkills">添加</el-button>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="handleSkillsDel(row, $index)"
                >删除
              </el-link>
            </template>
            <template v-slot:categoryLevelId="{ row, $index }"> </template>
            <template v-slot:name="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'skills.' + $index + '.name'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-input v-model="row.name" clearable></el-input>
              </el-form-item>
            </template>
            <template v-slot:level="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'skills.' + $index + '.level'"
              >
                <el-select
                  v-model="row.level"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in []"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-slot:years="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'skills.' + $index + '.years'"
              >
                <el-input v-model="row.years" clearable></el-input>
              </el-form-item>
            </template>
            <template v-slot:fileAttach="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'skills.' + $index + '.fileAttach'"
              >
                <fileUpload
                  v-model="row.fileAttach"
                  module="main"
                  :showLib="false"
                  :limit="5"
                />
              </el-form-item>
            </template>
            <template v-slot:remark="{ row, $index }">
              <el-form-item label-width="0px">
                <el-input v-model="row.remark" type="textarea"></el-input>
              </el-form-item>
            </template>
            <template v-slot:isRequired="{ column }">
              <span class="is-required">{{ column.label }}</span>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="奖惩记录" name="RPRecords">
          <ele-pro-table
            ref="table"
            :columns="RPRecordsColumns"
            :datasource="form.rewardsPunishments"
            max-height="350px"
            :toolkit="[]"
            class="el-form-box"
            :need-page="false"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button type="primary" @click="addRPRecords">添加</el-button>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="handleRPRecordsDel(row, $index)"
                >删除
              </el-link>
            </template>
            <template v-slot:type="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'rewardsPunishments.' + $index + '.type'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-select
                  v-model="row.type"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in RPRecordsType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-slot:desce="{ row, $index }">
              <el-form-item label-width="0px">
                <el-input
                  v-model="row.desce"
                  type="textarea"
                  clearable
                ></el-input>
              </el-form-item>
            </template>
            <template v-slot:startTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'rewardsPunishments.' + $index + '.startTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:endTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'rewardsPunishments.' + $index + '.endTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:status="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'rewardsPunishments.' + $index + '.status'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-select
                  v-model="row.status"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in RPRecordsStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-slot:fileAttach="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'rewardsPunishments.' + $index + '.fileAttach'"
              >
                <fileUpload
                  v-model="row.fileAttach"
                  module="main"
                  :showLib="false"
                  :limit="5"
                />
              </el-form-item>
            </template>
            <template v-slot:remark="{ row, $index }">
              <el-form-item label-width="0px">
                <el-input v-model="row.remark" type="textarea"></el-input>
              </el-form-item>
            </template>
            <template v-slot:isRequired="{ column }">
              <span class="is-required">{{ column.label }}</span>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="培训记录" name="training">
          <ele-pro-table
            ref="table"
            :columns="trainingColumns"
            :datasource="form.trainRecords"
            max-height="350px"
            :toolkit="[]"
            class="el-form-box"
            :need-page="false"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button type="primary" @click="addTraining">添加</el-button>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="handleTrainingDel(row, $index)"
                >删除
              </el-link>
            </template>
            <template v-slot:categoryLevelId="{ row, $index }"> </template>
            <template v-slot:title="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'trainRecords.' + $index + '.title'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-input v-model="row.title" clearable></el-input>
              </el-form-item>
            </template>
            <template v-slot:desce="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'trainRecords.' + $index + '.desce'"
              >
                <el-input
                  v-model="row.desce"
                  type="textarea"
                  clearable
                ></el-input>
              </el-form-item>
            </template>
            <template v-slot:startTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'trainRecords.' + $index + '.startTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.startTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:endTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'trainRecords.' + $index + '.endTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:status="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'trainRecords.' + $index + '.status'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-select
                  v-model="row.status"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in trainingStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-slot:fileAttach="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'trainRecords.' + $index + '.fileAttach'"
              >
                <fileUpload
                  v-model="row.fileAttach"
                  module="main"
                  :showLib="false"
                  :limit="5"
                />
              </el-form-item>
            </template>
            <template v-slot:remark="{ row, $index }">
              <el-form-item label-width="0px">
                <el-input v-model="row.remark" type="textarea"></el-input>
              </el-form-item>
            </template>
            <template v-slot:isRequired="{ column }">
              <span class="is-required">{{ column.label }}</span>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="考勤记录" name="attendance">
          <ele-pro-table
            ref="table"
            :columns="attendanceColumns"
            :datasource="form.attendanceRecords"
            max-height="350px"
            :toolkit="[]"
            class="el-form-box"
            :need-page="false"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button type="primary" @click="addAttendance">添加</el-button>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="handleAttendanceDel(row, $index)"
                >删除
              </el-link>
            </template>
            <template v-slot:type="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'attendanceRecords.' + $index + '.type'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-select
                  v-model="row.type"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in attendanceType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-slot:checkTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'attendanceRecords.' + $index + '.checkTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.checkTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:belateTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'attendanceRecords.' + $index + '.belateTime'"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.belateTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:leaveEarlyTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'attendanceRecords.' + $index + '.leaveEarlyTime'"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.leaveEarlyTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>

            <template v-slot:fileAttach="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'attendanceRecords.' + $index + '.fileAttach'"
              >
                <fileUpload
                  v-model="row.fileAttach"
                  module="main"
                  :showLib="false"
                  :limit="5"
                />
              </el-form-item>
            </template>

            <template v-slot:isRequired="{ column }">
              <span class="is-required">{{ column.label }}</span>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="劳动合同" name="contracts">
          <ele-pro-table
            ref="table"
            :columns="contractsColumns"
            :datasource="form.contracts"
            max-height="350px"
            :toolkit="[]"
            class="el-form-box"
            :need-page="false"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button type="primary" @click="addcontracts">添加</el-button>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="handleContractsDel(row, $index)"
                >删除
              </el-link>
            </template>
            <template v-slot:categoryLevelId="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'contracts.' + $index + '.categoryLevelId'"
              >
              </el-form-item>
            </template>
            <template v-slot:name="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'contracts.' + $index + '.name'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-input v-model="row.name" clearable></el-input>
              </el-form-item>
            </template>
            <template v-slot:signTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'contracts.' + $index + '.signTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.signTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:startTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'contracts.' + $index + '.startTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:endTime="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'contracts.' + $index + '.endTime'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="row.endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-slot:status="{ row, $index }">
              <el-form-item
                label-width="0px"
                :prop="'contracts.' + $index + '.status'"
                :rules="{
                  required: true,
                  message: '',
                  trigger: ['blur', 'change']
                }"
              >
                <el-select
                  v-model="row.status"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in contractsStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-slot:fileAttach="{ row, $index }">
              <el-form-item
                label-width="0"
                :prop="'contracts.' + $index + '.fileAttach'"
              >
                <fileUpload
                  v-model="row.fileAttach"
                  module="main"
                  :showLib="false"
                  :limit="5"
                />
              </el-form-item>
            </template>
            <template v-slot:remark="{ row, $index }">
              <el-form-item label-width="0px">
                <el-input v-model="row.remark" type="textarea"></el-input>
              </el-form-item>
            </template>
            <template v-slot:isRequired="{ column }">
              <span class="is-required">{{ column.label }}</span>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="工种" name="jobManagement">
          <ele-pro-table
            ref="table"
            :columns="jobColumns"
            :datasource="form.professions"
            max-height="350px"
            :toolkit="[]"
            class="el-form-box"
            :need-page="false"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button type="primary" @click="$refs.aptitudeDialogRef.open()"
                >添加</el-button
              >
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="deleteJob($index)"
                >删除
              </el-link>
            </template>
          </ele-pro-table>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="save"
        v-if="!disabled"
      >
        保存
      </el-button>
    </template>
    <aptitudeDialog
      ref="aptitudeDialogRef"
      @success="chooseAptitude"
      :disabledIds="form.professions?.map(item => item.id)"
    ></aptitudeDialog>
  </ele-modal>
</template>

<script>
  import { emailReg, phoneReg } from 'ele-admin';
  import OrgSelect from './org-select.vue';
  import RoleSelect from '@/views/system/user/components/role-select.vue';
  import RegionsSelect from '@/components/RegionsSelect/index.vue';
  import { getNotBoundAccount } from '@/api/system/user';
  import {
    getUserDetail,
    saveOrUpdateUser,
    checkExistence
  } from '@/api/system/organization';
  import { getFactoryarea, getProfessionPageList } from '@/api/factoryModel';
  import WithView from '@/components/upload/WithView.vue';
  import FileUpload from '@/components/upload/fileUpload.vue';
  import dictMixins from '@/mixins/dictMixins';
  import aptitudeDialog from '@/views/factoryModel/jobManagement/components/aptitudeDialog.vue';
  import { del } from 'vue';
  // D:\中赢\kd-aiot-frontend\src\views\system\user

  export default {
    mixins: [dictMixins],

    components: {
      OrgSelect,
      RoleSelect,
      RegionsSelect,
      WithView,
      FileUpload,
      aptitudeDialog
    },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      // 全部机构
      organizationList: Array,
      //
      institutionList: Array,
      // 机构id
      organizationId: [Number, String]
    },
    data() {
      const defaultForm = {
        id: null,
        identityPhotos: [],
        skills: [],
        rewardsPunishments: [],
        trainRecords: [],
        attendanceRecords: [],
        contracts: [],
        deptIds: [],
        deptName: '',
        isEnabled: 1,
        groupId: null,
        groupName: null,
        name: '',
        sex: null,
        email: '',
        phone: '',
        age: '',
        accountId: '',
        factoryId: '',
        idCard: '',
        workTypeId: '',
        birthday: '',
        signature: {},
        postName: '',
        professions: []
      };
      return {
        defaultForm,

        // 表单数据
        form: { ...defaultForm },
        disabled: false,
        activeName: 'identityPhotos',
        // 表单验证规则
        rules: {
          groupId: [
            { required: true, message: '请选择所属机构', trigger: 'blur' }
          ],
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],

          email: [
            { pattern: emailReg, message: '邮箱格式不正确', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: phoneReg, message: '手机号格式不正确', trigger: 'blur' }
          ],
          jobNumber: [
            {
              required: true,
              trigger: 'blur'
            }
          ],
          status: [
            { required: true, message: '请选择员工状态', trigger: 'blur' }
          ]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        city: '',
        factoryList: [],
        levelOptions: [
          {
            label: '初级',
            value: '1'
          },
          {
            label: '中级',
            value: '2'
          },
          {
            label: '高级',
            value: '3'
          }
        ],
        RPRecordsStatus: [
          {
            label: '未生效',
            value: 0
          },
          {
            label: '审核中',
            value: 1
          },
          {
            label: '生效中',
            value: 2
          },
          {
            label: '已过期',
            value: 3
          },
          {
            label: '无效',
            value: 4
          }
        ],
        RPRecordsType: [
          {
            label: '未分类',
            value: 0
          },
          {
            label: '奖励',
            value: 1
          },
          {
            label: '惩罚',
            value: 2
          }
        ],
        trainingStatus: [
          {
            label: '未开始',
            value: 0
          },
          {
            label: '进行中',
            value: 1
          },
          {
            label: '已完成',
            value: 2
          },
          {
            label: '取消',
            value: 4
          }
        ],
        contractsStatus: [
          {
            label: '未生效',
            value: 0
          },
          {
            label: '审核中',
            value: 1
          },
          {
            label: '生效中',
            value: 2
          },
          {
            label: '过期',
            value: 3
          },
          {
            label: '转续签',
            value: 4
          }
        ],
        attendanceType: [
          {
            label: '未分类',
            value: 0
          },
          {
            label: '上班打卡',
            value: 1
          },
          {
            label: '下班打卡',
            value: 2
          }
        ],
        statusOptions: [
          { value: 1, label: '全职' },
          { value: 2, label: '兼职' },
          { value: 3, label: '实习' },
          { value: 4, label: '正式' },
          { value: 5, label: '试用' },
          { value: 6, label: '离职' }
        ],
        accountList: [],
        levelOptions: [
          {
            label: '初级',
            value: '1'
          },
          {
            label: '中级',
            value: '2'
          },
          {
            label: '高级',
            value: '3'
          }
        ],
        deptTree: [],
        defaultProps: {
          multiple: true,
          checkStrictly: true,
          emitPath: false,
          children: 'children',
          value: 'id',
          label: 'name'
        },

        professionList: []
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },
      organization() {
        return this.setList(this.organizationList);
      },
      identityPhotosColumns() {
        return [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '证照类型',
            prop: 'type',
            slot: 'type',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '证照编号',
            prop: 'code',
            slot: 'code',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '等级',
            prop: 'level',
            slot: 'level',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '有效期开始时间',
            prop: 'validityStartTime',
            slot: 'validityStartTime',
            headerSlot: 'isRequired',
            minWidth: 150,
            align: 'center'
          },
          {
            label: '有效期结束时间',
            prop: 'validityEndTime',
            slot: 'validityEndTime',
            headerSlot: 'isRequired',
            minWidth: 150,
            align: 'center'
          },
          {
            label: '颁布日期',
            prop: 'enactorTime',
            slot: 'enactorTime',
            minWidth: 150,
            align: 'center'
          },
          {
            label: '证照附件',
            prop: 'fileObj',
            slot: 'fileObj',
            minWidth: 200,
            align: 'center'
          },
          {
            label: '状态',
            prop: 'status',
            slot: 'status',
            headerSlot: 'isRequired',
            minWidth: 100,
            align: 'center'
          },
          {
            label: '备注',
            prop: 'remark',
            slot: 'remark',
            minWidth: 120,
            align: 'center'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作',
            align: 'center'
          }
        ];
      },
      skillsColumns() {
        return [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '分类',
            prop: 'categoryLevelId',
            slot: 'categoryLevelId',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '技能名称',
            prop: 'name',
            slot: 'name',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '技能等级',
            prop: 'level',
            slot: 'level',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '技能经验（年限）',
            prop: 'years',
            slot: 'years',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '证照附件',
            prop: 'fileAttach',
            slot: 'fileAttach',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '备注',
            prop: 'remark',
            slot: 'remark',
            minWidth: 120,
            align: 'center'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作',
            align: 'center'
          }
        ];
      },
      RPRecordsColumns() {
        return [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '奖惩类型',
            prop: 'type',
            slot: 'type',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '奖惩说明',
            prop: 'desce',
            slot: 'desce',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '开始时间',
            prop: 'startTime',
            slot: 'startTime',
            headerSlot: 'isRequired',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '结束时间',
            prop: 'endTime',
            slot: 'endTime',
            headerSlot: 'isRequired',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '证照附件',
            prop: 'fileAttach',
            slot: 'fileAttach',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '生效状态',
            prop: 'status',
            slot: 'status',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '备注',
            prop: 'remark',
            slot: 'remark',
            minWidth: 120,
            align: 'center'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作',
            align: 'center'
          }
        ];
      },
      trainingColumns() {
        return [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '分类',
            prop: 'categoryLevelId',
            slot: 'categoryLevelId',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '培训标题',
            prop: 'title',
            slot: 'title',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '培训说明',
            prop: 'desce',
            slot: 'desce',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '开始时间',
            prop: 'startTime',
            slot: 'startTime',
            headerSlot: 'isRequired',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '结束时间',
            prop: 'endTime',
            slot: 'endTime',
            headerSlot: 'isRequired',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '附件',
            prop: 'fileAttach',
            slot: 'fileAttach',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '生效状态',
            prop: 'status',
            slot: 'status',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '备注',
            prop: 'remark',
            slot: 'remark',
            minWidth: 120,
            align: 'center'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作',
            align: 'center'
          }
        ];
      },
      attendanceColumns() {
        return [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '考勤类型',
            prop: 'type',
            slot: 'type',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '签到时间',
            prop: 'checkTime',
            slot: 'checkTime',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          // {
          //   label: '迟到时间偏差值',
          //   prop: 'belateTime',
          //   minWidth: 120,
          //   align: "center"
          // },
          // {
          //   label: '早退时间偏差值',
          //   prop: 'leaveEarlyTime',
          //   minWidth: 130,
          //   align: "center"
          // },
          {
            label: '附件',
            prop: 'fileAttach',
            slot: 'fileAttach',
            minWidth: 130,
            align: 'center'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作',
            align: 'center'
          }
        ];
      },
      contractsColumns() {
        return [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '分类',
            prop: 'categoryLevelId',
            slot: 'categoryLevelId',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '合同名称',
            prop: 'name',
            slot: 'name',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '签订时间',
            prop: 'signTime',
            slot: 'startTime',
            headerSlot: 'isRequired',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '开始时间',
            prop: 'startTime',
            slot: 'startTime',
            headerSlot: 'isRequired',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '结束时间',
            prop: 'endTime',
            slot: 'endTime',
            headerSlot: 'isRequired',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '合同附件',
            prop: 'fileAttach',
            slot: 'fileAttach',
            minWidth: 130,
            align: 'center'
          },
          {
            label: '生效状态',
            prop: 'status',
            slot: 'status',
            headerSlot: 'isRequired',
            minWidth: 120,
            align: 'center'
          },
          {
            label: '备注',
            prop: 'remark',
            slot: 'remark',
            minWidth: 120,
            align: 'center'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作',
            align: 'center'
          }
        ];
      },
      jobColumns() {
        return [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            slot: 'type',
            label: '类型',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            formatter: (_row) => {
              return this.getDictValue('工种类型', _row.type);
            }
          },
          {
            align: 'center',
            prop: 'code',
            label: '编码',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            slot: 'name',
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'level',
            prop: 'level',
            label: '等级',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            formatter: (_row) => {
              return this.levelOptions.filter(
                (item) => _row.level == item.value
              )[0].label;
            }
          },
          {
            slot: 'hourCost',
            prop: 'hourCost',
            label: '标准工时费',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'unit',
            prop: 'unit',
            label: '工时费单位',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 260,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ];
      }
    },
    created() {
      this.getFactoryList();
      console.log(this.institutionList, '========');
      this.getProfessionList();
    },
    methods: {
      chooseAptitude(data) {
        console.log(data);
        this.form.professions.push(...data);
      },
      deleteJob(index) {
        this.form.professions.splice(index, 1);
      },

      idCardChange() {
        // 检查身份证号是否为18位
        if (this.form.idCard.length === 18) {
          // 提取出生日期部分（YYYYMMDD）并转换为YYYY-MM-DD格式
          const birthDatePart = this.form.idCard.substr(6, 8); // 获取YYYYMMDD部分
          const year = birthDatePart.substr(0, 4); // 年份
          const month = birthDatePart.substr(4, 2); // 月份
          const day = birthDatePart.substr(6, 2); // 日期
          this.form.birthday = `${year}-${month}-${day}`; // 格式化日期并存储到data中
          const birthDate = new Date(year, month - 1, day); // 月份是从0开始的，所以要减1
          const now = new Date();
          this.form.age = now.getFullYear() - birthDate.getFullYear();
          const monthDifference = now.getMonth() - birthDate.getMonth();
          if (
            monthDifference < 0 ||
            (monthDifference === 0 && now.getDate() < birthDate.getDate())
          ) {
            this.form.age--;
          }
        }
      },
      async getProfessionList() {
        const res = await getProfessionPageList({
          pageNum: 1,
          size: 9999
        });

        this.professionList = res.list || [];
      },
      setList(list) {
        return list.map((val) => {
          val['disabled'] = val.id == this.form.groupId;
          if (val.children) {
            val.children = this.setList(val.children);
          }
          return val;
        });
      },
      addIdentityPhotos() {
        this.form.identityPhotos.push({
          holder: this.form.name,
          holderType: '1'
        });
      },
      handleIdentityPhotosDel(row, index) {
        this.form.identityPhotos.splice(index, 1);
      },
      addSkills() {
        this.form.skills.push({});
      },
      handleSkillsDel(row, index) {
        this.form.skills.splice(index, 1);
      },
      addRPRecords() {
        this.form.rewardsPunishments.push({});
      },
      handleRPRecordsDel(row, index) {
        this.form.rewardsPunishments.splice(index, 1);
      },
      addTraining() {
        this.form.trainRecords.push({});
      },
      handleTrainingDel(row, index) {
        this.form.trainRecords.splice(index, 1);
      },
      addAttendance() {
        this.form.attendanceRecords.push({});
      },
      handleAttendanceDel(row, index) {
        this.form.attendanceRecords.splice(index, 1);
      },
      addcontracts() {
        this.form.contracts.push({});
      },
      handleContractsDel(row, index) {
        this.form.contracts.splice(index, 1);
      },
      getAccountList() {
        getNotBoundAccount().then((res) => {
          this.accountList = res;
        });
      },
      setDisabled(disabled) {
        this.disabled = disabled;
        this.getProfessionList();
      },
      async getFactoryList() {
        const { list } = await getFactoryarea({
          pageNum: 1,
          size: 999,
          type: 1
        });
        this.factoryList = list || [];
      },

      /* 保存编辑 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          this.form.addressId = this.city
            ? this.city[this.city.length - 1]
            : '';

          // if (this.deptTree.length > 0) {
          //   this.deptTree.forEach(i => {
          //     this.form.deptIds.push(i[i.length - 1])
          //   })
          //
          //   this.form['deptTree'] = JSON.stringify(this.deptTree)
          // }
          let formData = JSON.parse(JSON.stringify(this.form));
          if (formData.postId) {
            formData.postName = formData.postId
              .map((item) => this.getDictValue('岗位', item))
              .toString();
            formData.postId = formData.postId.toString();
          }
          if (formData.professions?.length) {
            formData.professionId = formData.professions.map(item=>item.id).toString();
          }
          const data = {
            ...formData
          };
          if (!this.isUpdate) {
            delete data.id;
          }
          if (!Array.isArray(data.signature)) {
            data.signature = [data.signature].filter(
              (item) => Boolean(item) && Object.keys(item).length !== 0
            );
          }
          saveOrUpdateUser(data)
            .then((msg) => {
              this.loading = false;
              if (this.isUpdate) {
                this.$message.success('人员信息编辑成功');
              } else {
                this.$message.success('人员新增成功');
              }
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              // this.$message.error(e.message);
            });
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      handleChange() {
        let arr = Array.from(this.$refs.deptRef.getCheckedNodes());
        this.form.deptName = arr.map((i) => i.label).join('/') || '';
        this.form.deptIds = this.form.deptIds || [];
      },
      checkedKeys(value) {
        this.getLabelName(this.institutionList, (i) => {
          if (i.id == this.form.groupId) {
            return (this.form.groupName = i.name);
          }
        });
        this.form.deptIds = this.form.deptIds.filter(
          (item) => item != this.form.groupId
        );
        console.log(this.form.groupName);
      },
      getLabelName(data, callback) {
        data.some((i) => {
          callback(i);
          if (i.children) {
            this.getLabelName(i.children, callback);
          }
        });
      }
    },
    watch: {
      visible(visible) {
        if (visible) {
          this.getAccountList();
          if (this.data) {
            getUserDetail(this.data.id).then((res) => {
              if (res.postId) {
                res.postId = res.postId.split(',');
              }
              this.form = { ...res };
              if (Array.isArray(this.form.signature)) {
                this.form.signature = this.form.signature[0];
              }

              // this.deptTree = []
              // this.form.deptIds = []
              // if (this.form.deptTree) {
              //   this.deptTree = JSON.parse(this.form.deptTree)
              // }
              // this.form.workTypeId = this.form.workTypeId + '';
              // this.form.postName = this.form.postName + '';

              this.city = res.addressId ? res.addressId.toString() : null;
              this.isUpdate = true;
            });
            // this.$util.assignObject(this.form, {
            //   ...this.data,
            //   password: ''
            // });
            // this.form = {...this.data}
            // this.form.address = ["130000","130300","130304"]
            // this.form.address = "130304"
            // console.log('this.form',this.form)
          } else {
            this.city = null;
            this.form.groupId = this.organizationId;
            this.isUpdate = false;
          }
        } else {
          this.city = null;
          this.$refs.form.clearValidate();
          this.form = { ...this.defaultForm };
        }
      }
    }
  };
</script>
<style scoped lang="scss">
  ::v-deep .el-tabs__header {
    margin-bottom: 10px;
  }
</style>