style(user): 调整用户档案相关组件样式和模板格式

yubo

2026-04-07 5a2eea76d731bca3490aa6c6bfb3abcade5d11f7

style(user): 调整用户档案相关组件样式和模板格式

- 在切换员工时清空相关数据列表，防止数据残留
- 切换员工时，点击其它标签面重新加载对应的数据，不是使用缓存

 src/settings.js

@@ -3,36 +3,36 @@
  // 获取令牌时，请求头信息(Basic Base64.encode(client_id:client_secret))
  authorizationValue: 'Basic ZmViczoxMjM0NTY=',
  // 社交登录后台地址
  socialLoginUrl: '/api/auth/social/login',
  socialLoginUrl: 'http://localhost:8301/auth/social/login',
  // 请替换为您的实际地址
  pages: {
    // FEBS-Admin 控制台地址
    springBootAdminUrl: 'http://120.24.23.155:8401/login',
    springBootAdminUrl: 'http://localhost:8401/login',
    // kibana 控制台地址
    kibanaUrl: 'http://120.24.23.155:5601',
    kibanaUrl: 'http://localhost:5601',
    // nacos 控制台地址
    nacosUrl: 'http://120.24.23.155:8001/nacos',
    nacosUrl: 'http://localhost:8001/nacos',
    // skywalking地址
    skywalkingUrl: 'http://120.24.23.155:8080/',
    skywalkingUrl: 'http://localhost:8080/',
    // 文档中心
    docUrl: '/api/doc.html',
    docUrl: 'http://localhost:8301/doc.html',
    // Granfana控制台
    grafanaUrl: 'http://120.24.23.155:8404/',
    grafanaUrl: 'http://localhost:8404/',
    // tx-manager控制台
    txUrl: 'http://120.24.23.155:8501/admin/index.html#/login',
    txUrl: 'http://localhost:8501/admin/index.html#/login',
    // 文件上传地址
    filesUploadUrl: '/api/hr/filesUpload',
    filesUploadUrl: 'http://localhost:8301/hr/filesUpload',
    // 个人文件上传地址
    uploadSinglePath: '/api/hr/empAccessory',
    uploadSinglePath: 'http://localhost:8301/hr/empAccessory',
    // 个人文件上传地址
    getEmpBaseInfoImage: '/api/hr/empBaseInfo/image/',
    getEmpBaseInfoImage: 'http://localhost:8301/hr/empBaseInfo/image/',
    // 下载员工导入模版
    downloadEmpExcel: 'http://120.24.23.155:8000/员工信息.xls',
    downloadEmpExcel: 'http://localhost:8000/员工信息.xls',
    // 导入员工
    uploadEmpExcel: '/api/hr/empBaseInfo/importEmp',
    // 获取图片（使用相对路径通过API代理，避免Mixed Content问题）
    getFilesUploadImage: '/api/hr/filesUpload/image/',
    // 获取图片（使用相对路径通过API代理，避免Mixed Content问题）
    getAccessoryImage: '/api/hr/empAccessory/image/'
    uploadEmpExcel: 'http://localhost:8301/hr/empBaseInfo/importEmp',
    // 获取图片
    getFilesUploadImage: 'http://localhost:8301/hr/filesUpload/image/',
    // 获取图片
    getAccessoryImage: 'http://localhost:8301/hr/empAccessory/image/'
  }
}

 src/views/user/archivesChange.vue

@@ -207,7 +207,11 @@
                <el-row style="width: 100%;">
                  <el-col :span="8">
                    <el-form-item label="编号" prop="empNumb">
                      <el-input v-model="empBaseInfoForm.empNumb" style="width: 100%;" :disabled="readon ? false : true" />
                      <el-input
                        v-model="empBaseInfoForm.empNumb"
                        style="width: 100%;"
                        :disabled="readon ? false : true"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
@@ -229,7 +233,11 @@
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="性别" prop="sex">
                      <el-select v-model="empBaseInfoForm.sex" placeholder="请选择性别" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.sex"
                        placeholder="请选择性别"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in sexOptions"
                          :key="dict.dicItemCode"
@@ -269,7 +277,11 @@
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="员工类别" prop="empType">
                      <el-select v-model="empBaseInfoForm.empType" placeholder="请选择员工类型" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.empType"
                        placeholder="请选择员工类型"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in empTypeOptions"
                          :key="dict.dicItemCode"
@@ -281,7 +293,12 @@
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="民族" prop="nation">
                      <el-select v-model="empBaseInfoForm.nation" filterable placeholder="请选择民族" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.nation"
                        filterable
                        placeholder="请选择民族"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in nationOptions"
                          :key="dict.dicItemCode"
@@ -301,7 +318,11 @@
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="婚姻状态" prop="marriage">
                      <el-select v-model="empBaseInfoForm.marriage" placeholder="请选择婚姻状态" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.marriage"
                        placeholder="请选择婚姻状态"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in marriageOptions"
                          :key="dict.dicItemCode"
@@ -332,7 +353,11 @@
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="政治面貌" prop="politics">
                      <el-select v-model="empBaseInfoForm.politics" placeholder="请选择政治面貌" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.politics"
                        placeholder="请选择政治面貌"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in statusOptions"
                          :key="dict.dicItemCode"
@@ -355,7 +380,11 @@
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="最高学历" prop="education">
                      <el-select v-model="empBaseInfoForm.education" placeholder="请选择最高学历" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.education"
                        placeholder="请选择最高学历"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in educationOptions"
                          :key="dict.dicItemCode"
@@ -370,7 +399,11 @@
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="籍贯" prop="nativePlaceName">
                      <el-select v-model="empBaseInfoForm.nativePlace" placeholder="请选择籍贯" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.nativePlace"
                        placeholder="请选择籍贯"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in nativePlaceOptions"
                          :key="dict.dicItemCode"
@@ -405,7 +438,11 @@
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="档案情况" prop="archivesStatus">
                      <el-select v-model="empBaseInfoForm.archivesStatus" placeholder="请选择档案情况" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.archivesStatus"
                        placeholder="请选择档案情况"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in archivesStatusOptions"
                          :key="dict.dicItemCode"
@@ -450,7 +487,11 @@
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="社保档位" prop="insuranceType">
                      <el-select v-model="empBaseInfoForm.insuranceType" placeholder="请选择社保档位" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.insuranceType"
                        placeholder="请选择社保档位"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in insuranceTypeOptions"
                          :key="dict.dicItemCode"
@@ -480,7 +521,11 @@
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="工作证" prop="empCardStatus">
                      <el-select v-model="empBaseInfoForm.empCardStatus" placeholder="请选择工作证" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.empCardStatus"
                        placeholder="请选择工作证"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in empCardStatusOptions"
                          :key="dict.dicItemCode"
@@ -505,7 +550,11 @@
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="员工手册" prop="handbookStatus">
                      <el-select v-model="empBaseInfoForm.handbookStatus" placeholder="请选择员工手册" :disabled="readon ? false : true">
                      <el-select
                        v-model="empBaseInfoForm.handbookStatus"
                        placeholder="请选择员工手册"
                        :disabled="readon ? false : true"
                      >
                        <el-option
                          v-for="dict in handbookStatusOptions"
                          :key="dict.dicItemCode"
@@ -590,10 +639,22 @@
                <el-table-column v-if="fsnumShow" show-overflow-tooltip prop="physicalExamId" label="" />
                <el-table-column show-overflow-tooltip prop="hospital" label="体检医院" width="150" />
                <el-table-column show-overflow-tooltip prop="physicalExamDate" label="体检日期" width="140" />
                <el-table-column show-overflow-tooltip prop="physicalExamType" label="体检类型" width="140" :formatter="typeFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="physicalExamType"
                  label="体检类型"
                  width="140"
                  :formatter="typeFormat"
                />
                <el-table-column show-overflow-tooltip prop="bloodPressure" label="血压" width="140" />
                <el-table-column show-overflow-tooltip prop="transaminase" label="转氨酶" width="140" />
                <el-table-column show-overflow-tooltip prop="ecg" label="心电图" width="140" :formatter="ecgNameFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="ecg"
                  label="心电图"
                  width="140"
                  :formatter="ecgNameFormat"
                />
                <el-table-column show-overflow-tooltip prop="conclusion" label="体检结论" />
                <el-table-column show-overflow-tooltip prop="reviewRecord" label="复查记录" width="140" />
                <el-table-column show-overflow-tooltip prop="remark" label="备注" />
@@ -632,7 +693,12 @@
                <el-table-column show-overflow-tooltip prop="signingDate" label="合同签订日期" />
                <el-table-column show-overflow-tooltip prop="endDate" label="合同结束日期" />
                <el-table-column show-overflow-tooltip prop="contractPeriod" label="合同期限(年)" />
                <el-table-column show-overflow-tooltip prop="contractStatus" label="合同状态" :formatter="contractStatusFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="contractStatus"
                  label="合同状态"
                  :formatter="contractStatusFormat"
                />
                <el-table-column show-overflow-tooltip prop="transactor" label="合同办理人" />
                <el-table-column show-overflow-tooltip prop="remark" label="备注" />
              </el-table>
@@ -670,7 +736,12 @@
                <el-table-column show-overflow-tooltip prop="oldDeptName" label="原部门" />
                <el-table-column show-overflow-tooltip prop="oldJobName" label="原岗位" />
                <el-table-column show-overflow-tooltip prop="changeDate" label="调岗日期" />
                <el-table-column show-overflow-tooltip prop="changeType" label="调岗类型" :formatter="changeTypeFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="changeType"
                  label="调岗类型"
                  :formatter="changeTypeFormat"
                />
                <el-table-column show-overflow-tooltip prop="changeReason" label="调岗理由" />
              </el-table>
              <pagination
@@ -814,12 +885,18 @@
                <el-table-column show-overflow-tooltip type="index" label="序号" align="center" width="55">
                  <template slot-scope="scope">
                    <span v-text="getIndex(scope.$index)" />
                  </template>EmpLeaveInfo
                  </template>
                  EmpLeaveInfo
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="deptName" label="部门/护卫点" />
                <el-table-column show-overflow-tooltip prop="entryDate" label="入职日期" />
                <el-table-column show-overflow-tooltip prop="dimissionDate" label="离职日期" />
                <el-table-column show-overflow-tooltip prop="dimissionType" label="离职类型" :formatter="dimissionTypeFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="dimissionType"
                  label="离职类型"
                  :formatter="dimissionTypeFormat"
                />
                <el-table-column show-overflow-tooltip prop="selfLeaveDay" label="自离天数" />
                <el-table-column show-overflow-tooltip prop="reporter" label="报备人" />
                <el-table-column show-overflow-tooltip prop="remark" label="备注" />
@@ -894,9 +971,24 @@
                <el-table-column v-if="fsnumShow" show-overflow-tooltip prop="insuranceId" label="" />
                <el-table-column show-overflow-tooltip prop="applayDate" label="社保申请日期" width="180" />
                <el-table-column show-overflow-tooltip prop="proposer" label="申请人" width="180" />
                <el-table-column show-overflow-tooltip prop="insuranceGaers" label="社保档位" :formatter="insuranceGaersFormat" />
                <el-table-column show-overflow-tooltip prop="reportStatus" label="是否已报告" :formatter="reportStatusFormat" />
                <el-table-column show-overflow-tooltip prop="applayStatus" label="状态" :formatter="applayStatusFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="insuranceGaers"
                  label="社保档位"
                  :formatter="insuranceGaersFormat"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="reportStatus"
                  label="是否已报告"
                  :formatter="reportStatusFormat"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="applayStatus"
                  label="状态"
                  :formatter="applayStatusFormat"
                />
                <el-table-column show-overflow-tooltip prop="auditor" label="审核人" width="180" />
                <el-table-column show-overflow-tooltip prop="remark" label="备注" />
              </el-table>
@@ -933,7 +1025,9 @@
                <el-table-column v-if="fsnumShow" show-overflow-tooltip prop="accidentId" label="" />
                <el-table-column show-overflow-tooltip prop="injuredTime" label="受伤日期" width="110">
                  <template slot-scope="scope">
                    <span class="table-button" @click="editAccidentCases(scope.row,9)">{{ scope.row.injuredTime }}</span>
                    <span class="table-button" @click="editAccidentCases(scope.row,9)">{{
                      scope.row.injuredTime
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="injuredAddress" label="受伤地点" width="200" />
@@ -942,14 +1036,26 @@
                <el-table-column show-overflow-tooltip prop="injuredDiacrisis" label="意外险诊断" width="150" />
                <!--                <el-table-column show-overflow-tooltip prop="hospitalName" label="就诊医院" width="100" />-->
                <!--                <el-table-column show-overflow-tooltip prop="treatmentName" label="就诊科室" width="100" />-->
                <el-table-column show-overflow-tooltip prop="hospitalizatioFlag" label="是否住院" width="80" :formatter="hospitalizatioFlagFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="hospitalizatioFlag"
                  label="是否住院"
                  width="80"
                  :formatter="hospitalizatioFlagFormat"
                />
                <!--                <el-table-column show-overflow-tooltip prop="bedNumb" label="床号" width="60" />-->
                <el-table-column show-overflow-tooltip prop="reprotTime" label="报案时间" width="100" />
                <!--                <el-table-column show-overflow-tooltip prop="submitTime" label="递交资料时间" width="120" />-->
                <!--                <el-table-column show-overflow-tooltip prop="sbumitBy" label="递交人" width="100" />-->
                <el-table-column show-overflow-tooltip prop="expensesFee" label="医疗总费用" width="100" />
                <el-table-column show-overflow-tooltip prop="innsureFee" label="保险赔付费用" width="120" />
                <el-table-column show-overflow-tooltip prop="settleStatus" label="是否结案" width="120" :formatter="settleStatusFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="settleStatus"
                  label="是否结案"
                  width="120"
                  :formatter="settleStatusFormat"
                />
              </el-table>
              <pagination
                v-show="accidentCasesDatatotal>0"
@@ -993,14 +1099,26 @@
                <el-table-column show-overflow-tooltip prop="injuredDiacrisis" label="工伤诊断" width="80" />
                <el-table-column show-overflow-tooltip prop="hospitalName" label="就诊医院" width="120" />
                <el-table-column show-overflow-tooltip prop="treatmentName" label="就诊科室" width="100" />
                <el-table-column show-overflow-tooltip prop="hospitalizatioFlag" label="是否住院" width="80" :formatter="hospitalizatioFlagFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="hospitalizatioFlag"
                  label="是否住院"
                  width="80"
                  :formatter="hospitalizatioFlagFormat"
                />
                <el-table-column show-overflow-tooltip prop="bedNumb" label="床号" width="80" />
                <el-table-column show-overflow-tooltip prop="reportTime" label="报案时间" width="100" />
                <el-table-column show-overflow-tooltip prop="submitTime" label="递交资料时间" width="120" />
                <el-table-column show-overflow-tooltip prop="sbumitBy" label="递交人" width="80" />
                <el-table-column show-overflow-tooltip prop="expensesFee" label="医疗总费用" width="100" />
                <el-table-column show-overflow-tooltip prop="compensated" label="已赔付医药费用" width="120" />
                <el-table-column show-overflow-tooltip prop="settleStatus" label="是否结案" width="120" :formatter="settleStatusFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="settleStatus"
                  label="是否结案"
                  width="120"
                  :formatter="settleStatusFormat"
                />
              </el-table>
              <pagination
                v-show="occupationalDatatotal>0"
@@ -1034,12 +1152,23 @@
                </el-table-column>
                <el-table-column v-if="fsnumShow" show-overflow-tooltip prop="arbitrationId" label="" />
                <el-table-column show-overflow-tooltip prop="arbitrationDate" label="仲裁日期" width="100" />
                <el-table-column show-overflow-tooltip prop="arbitrationType" label="仲裁类型" :formatter="arbitrationTypeFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="arbitrationType"
                  label="仲裁类型"
                  :formatter="arbitrationTypeFormat"
                />
                <el-table-column show-overflow-tooltip prop="arbitrationReason" label="仲裁事由" />
                <el-table-column show-overflow-tooltip prop="reporter" label="报备人" width="100" />
                <el-table-column show-overflow-tooltip prop="remark" label="备注" />
                <el-table-column show-overflow-tooltip prop="arbitrationPay" label="仲裁赔付（元）" width="180" />
                <el-table-column show-overflow-tooltip prop="arbitrationStatus" label="是否结案" width="100" :formatter="arbitrationStatusFormat" />
                <el-table-column
                  show-overflow-tooltip
                  prop="arbitrationStatus"
                  label="是否结案"
                  width="100"
                  :formatter="arbitrationStatusFormat"
                />
                <el-table-column show-overflow-tooltip prop="settleDate" label="案结日期" width="100" />
              </el-table>
              <pagination
@@ -1259,12 +1388,28 @@
                                :preview-src-list="srcList"
                                @click="clickImg(node)"
                              />
                              <el-tooltip v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) == -1" class="item" effect="dark" :content="node.filesname" placement="bottom">
                              <el-tooltip
                                v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) == -1"
                                class="item"
                                effect="dark"
                                :content="node.filesname"
                                placement="bottom"
                              >
                                <div style="padding-top: 14px;text-align: center">
                                  <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
                                  <el-checkbox
                                    v-model="checkedArr[index * 8 + nodeIndex].isChecked"
                                    class="myRedCheckBox"
                                  >{{ node.filesname }}
                                  </el-checkbox>
                                </div>
                              </el-tooltip>
                              <el-tooltip v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) != -1" class="item" effect="dark" :content="node.filesname" placement="bottom">
                              <el-tooltip
                                v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) != -1"
                                class="item"
                                effect="dark"
                                :content="node.filesname"
                                placement="bottom"
                              >
                                <div style="padding-top: 14px;">
                                  <el-image
                                    style="width: 100px; height: 80px;margin-top: -10px;"
@@ -1272,7 +1417,10 @@
                                    :preview-src-list="srcList"
                                    @click="clickImg(node)"
                                  />
                                  <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">
                                  <el-checkbox
                                    v-model="checkedArr[index * 8 + nodeIndex].isChecked"
                                    class="myRedCheckBox"
                                  >
                                    {{ node.filesid }}
                                    {{ node.filesname }}
                                  </el-checkbox>
@@ -2155,7 +2303,8 @@
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="dialogshowArr[9].read" type="primary" @click="putAccidentCases('accidentCasesForm')">保 存</el-button>
          <el-button v-if="dialogshowArr[9].read" type="primary" @click="putAccidentCases('accidentCasesForm')">保 存
          </el-button>
        </div>
      </el-dialog>
      <el-dialog title="工伤案件" append-to-body :visible.sync="dialogshowArr[10].show" width="50%">
@@ -2350,7 +2499,8 @@
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="dialogshowArr[10].read" type="primary" @click="putOccupational('occupationalForm')">保 存</el-button>
          <el-button v-if="dialogshowArr[10].read" type="primary" @click="putOccupational('occupationalForm')">保 存
          </el-button>

        </div>
      </el-dialog>
@@ -3565,30 +3715,78 @@
  },
  computed: {
    // 字典选项计算属性
    statusOptions() { return this.getDictOptions('PLITICAL') },
    empTypeOptions() { return this.getDictOptions('EMPTYPE') },
    nationOptions() { return this.getDictOptions('NATION') },
    marriageOptions() { return this.getDictOptions('MARRIAGE') },
    educationOptions() { return this.getDictOptions('EDUCATION') },
    nativePlaceOptions() { return this.getDictOptions('NATIVEPLACE') },
    archivesStatusOptions() { return this.getDictOptions('archivesStatus') },
    insuranceTypeOptions() { return this.getDictOptions('INSURANCETYPE') },
    empCardStatusOptions() { return this.getDictOptions('empCardStatus') },
    handbookStatusOptions() { return this.getDictOptions('handbookStatus') },
    certificateListOptions() { return this.getDictOptions('certificateList') },
    physicalExamTypeOptions() { return this.getDictOptions('PHYSICALEXAMTYPE') },
    ecgOptions() { return this.getDictOptions('ECG') },
    contractStatusOptions() { return this.getDictOptions('CONTRACTSTATUS') },
    leaveTypeOptions() { return this.getDictOptions('LEAVETYPE') },
    insuranceGaersOptions() { return this.getDictOptions('INSURANCETYPE') },
    applayStatusOptions() { return this.getDictOptions('applayStatus') },
    reportStatusOptions() { return this.getDictOptions('reportStatus') },
    hospitalizatioFlagOptions() { return this.getDictOptions('hospitalizatioFlag') },
    settleStatusOptions() { return this.getDictOptions('settleStatus') },
    arbitrationTypeOptions() { return this.getDictOptions('ZCTYPE') },
    changeTypeOptions() { return this.getDictOptions('changeType') },
    dimissionTypeOptions() { return this.getDictOptions('LZTYPE') },
    sexOptions() { return this.getDictOptions('sex') },
    statusOptions() {
      return this.getDictOptions('PLITICAL')
    },
    empTypeOptions() {
      return this.getDictOptions('EMPTYPE')
    },
    nationOptions() {
      return this.getDictOptions('NATION')
    },
    marriageOptions() {
      return this.getDictOptions('MARRIAGE')
    },
    educationOptions() {
      return this.getDictOptions('EDUCATION')
    },
    nativePlaceOptions() {
      return this.getDictOptions('NATIVEPLACE')
    },
    archivesStatusOptions() {
      return this.getDictOptions('archivesStatus')
    },
    insuranceTypeOptions() {
      return this.getDictOptions('INSURANCETYPE')
    },
    empCardStatusOptions() {
      return this.getDictOptions('empCardStatus')
    },
    handbookStatusOptions() {
      return this.getDictOptions('handbookStatus')
    },
    certificateListOptions() {
      return this.getDictOptions('certificateList')
    },
    physicalExamTypeOptions() {
      return this.getDictOptions('PHYSICALEXAMTYPE')
    },
    ecgOptions() {
      return this.getDictOptions('ECG')
    },
    contractStatusOptions() {
      return this.getDictOptions('CONTRACTSTATUS')
    },
    leaveTypeOptions() {
      return this.getDictOptions('LEAVETYPE')
    },
    insuranceGaersOptions() {
      return this.getDictOptions('INSURANCETYPE')
    },
    applayStatusOptions() {
      return this.getDictOptions('applayStatus')
    },
    reportStatusOptions() {
      return this.getDictOptions('reportStatus')
    },
    hospitalizatioFlagOptions() {
      return this.getDictOptions('hospitalizatioFlag')
    },
    settleStatusOptions() {
      return this.getDictOptions('settleStatus')
    },
    arbitrationTypeOptions() {
      return this.getDictOptions('ZCTYPE')
    },
    changeTypeOptions() {
      return this.getDictOptions('changeType')
    },
    dimissionTypeOptions() {
      return this.getDictOptions('LZTYPE')
    },
    sexOptions() {
      return this.getDictOptions('sex')
    },
    isVisible: {
      get() {
        return this.dialogVisible
@@ -4015,6 +4213,24 @@
        certificateList = val.certificateList.split(',')
        val.certificateList = certificateList
      }

      // 清空所有模块数据，确保切换员工后点击标签会重新加载
      this.workExperienceData = []
      this.physicalExamData = []
      this.contractInfoData = []
      this.jobChangeData = []
      this.leaveInfoData = []
      this.resignData = []
      this.dimissionAttendData = []
      this.dimissionLogData = []
      this.unemploymentData = []
      this.insuranceData = []
      this.accidentCasesData = []
      this.occupationalData = []
      this.laborTroubleData = []
      this.badRecordData = []
      this.remarkInfoData = []

      this.empBaseInfoForm = { ...val }
      this.empBaseInfoImageUrl = pages.getEmpBaseInfoImage + this.empBaseInfoForm.empId
      this.fileDate.empId = this.empBaseInfoForm.empId
@@ -5865,509 +6081,520 @@
}
</script>
<style lang="scss" scoped>
  .conDetails {
    display: flex;
    justify-content: space-between;
.conDetails {
  display: flex;
  justify-content: space-between;

    .dadetails {
      width: 220px;
      padding: 10px;
      box-sizing: border-box;
  .dadetails {
    width: 220px;
    padding: 10px;
    box-sizing: border-box;

      .jbxxImg {
        width: 100px;
        height: 80px;
      }

      .title-da {
        padding-top: 8px;
        font-weight: 700;
        color: #333;
        height: 30px;
        line-height: 30px;
      }

    .jbxxImg {
      width: 100px;
      height: 80px;
    }

    .boxDetails {
      flex: 1;
      padding: 10px;
    .title-da {
      padding-top: 8px;
      font-weight: 700;
      color: #333;
      height: 30px;
      line-height: 30px;
    }

  }

  .boxDetails {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    height: 90vh;
    overflow-y: scroll;

    .jbxxTitle, .jbxxTitle2 {
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      //border-left: 4px solid #a00515;
      margin: 30px 0 20px;
      color: #000;
      position: relative;
    }

    .jbxx .jbxxTitle {
      margin: 20px 0;
    }

    .jbxxTitle::before,
    .jbxxTitle2::before {
      content: '';
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #a00515;
      border-radius: 50%;
      display: inline-block;
      height: 15px;
      width: 15px;
    }

    .jbxxTitle::after {

      content: '';
      position: absolute;
      left: 100px;
      top: 50%;
      display: inline-block;
      width: 80%;
      height: 1px;
      border: 1px dashed #ccc;
    }

    .el-table__header {
      width: 100%;
    }

    //.jbxx{
    //  /deep/.el-form-item{
    //    display: flex;
    //  }
    //  /deep/.el-form-item__label{
    //    white-space: nowrap;
    //    width: 100px!important;
    //  }
    //  /deep/.el-form-item__content{
    //    margin-left: 10px!important;
    //    width: 80%!important;
    //  }
    //  .formjbxx{
    //    display: flex;
    //    flex-wrap: wrap;
    //  }
    //}

  }
}

.el-select {
  width: 100%;
}

.el-autocomplete {
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.el-main {
  margin-top: 2%;
}

.app-main {
  background-color: #ffffff;
}

.el-button,
.el-button--primary {
  background: #a32c30;
  border-color: #a32c30;
  color: #fff;
  outline: none;
}

.zs-main .text-header {
  line-height: 40px;
}

.el-card {
  border: none;
}

.el-input-number {
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.add-folder {
  text-align: initial;
}

.zs-main {
  .search-title {
    height: 50px;

    .search {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

    .title {
      position: relative;
      top: 40%;
      transform: translateY(-50%);
    }

    .zs-title {
      border-left: 4px solid #a32c30;
      padding-left: 10px;
      font-size: 16px;
      height: 90vh;
      overflow-y: scroll;

      .jbxxTitle,.jbxxTitle2 {
        height: 30px;
        line-height: 30px;
        padding-left: 15px;
        //border-left: 4px solid #a00515;
        margin: 30px 0 20px;
        color: #000;
        position: relative;
      }

      .jbxx .jbxxTitle {
        margin: 20px 0;
      }

      .jbxxTitle::before,
      .jbxxTitle2::before{
        content: '';
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #a00515;
        border-radius: 50%;
        display: inline-block;
        height: 15px;
        width: 15px;
      }

      .jbxxTitle::after {

        content: '';
        position: absolute;
        left: 100px;
        top: 50%;
        display: inline-block;
        width: 80%;
        height: 1px;
        border: 1px dashed #ccc;
      }

      .el-table__header {
        width: 100%;
      }

      //.jbxx{
      //  /deep/.el-form-item{
      //    display: flex;
      //  }
      //  /deep/.el-form-item__label{
      //    white-space: nowrap;
      //    width: 100px!important;
      //  }
      //  /deep/.el-form-item__content{
      //    margin-left: 10px!important;
      //    width: 80%!important;
      //  }
      //  .formjbxx{
      //    display: flex;
      //    flex-wrap: wrap;
      //  }
      //}

    }
  }

  .el-select {
    width: 100%;
  .add-folder-but {
    background: #fff !important;
    color: #a32c30 !important;
    margin-bottom: 20px;
  }

  .el-autocomplete {
    width: 100%;
  padding: 0 15px 0 15px;

  .text-header {
    line-height: 60px;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  .uploading-image {
    width: 70%;
    height: 70%;
    display: block;
    margin: 0 auto;
  }
}

  .el-main {
    margin-top: 2%;
  }
.el-timeline-item__timestamp {
  font-size: 15px;
  color: #000;
}

  .app-main {
    background-color: #ffffff;
  }
/* 设置带边框的checkbox，选中后边框的颜色 */
.myRedCheckBox.is-bordered.is-checked {
  border-color: #a32c30;
}

  .el-button,
  .el-button--primary {
    background: #a32c30;
    border-color: #a32c30;
    color: #fff;
    outline: none;
  }
/* 设置选中后的文字颜色 */
.myRedCheckBox .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #a32c30;
}

  .zs-main .text-header {
    line-height: 40px;
  }
/* 设置选中后对勾框的边框和背景颜色 */
.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner,
.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #a32c30;
  background-color: #a32c30;
}

  .el-card {
    border: none;
  }
/* 设置checkbox获得焦点后，对勾框的边框颜色 */
.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #a32c30;
}

  .el-input-number {
    width: 100%;
  }
/* 设置鼠标经过对勾框，对勾框边框的颜色 */
.myRedCheckBox .el-checkbox__inner:hover {
  border-color: #a32c30;
}

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
.myRedCheckBox .el-checkbox__label {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  .clearfix:after {
    clear: both;
  }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

  .add-folder {
    text-align: initial;
  }
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

  .zs-main {
    .search-title {
      height: 50px;
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

      .search {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

      .title {
        position: relative;
        top: 40%;
        transform: translateY(-50%);
      }
.avatar-uploader .el-upload-dragger .el-icon-upload {
  margin: 20px 0 16px;
}

      .zs-title {
        border-left: 4px solid #a32c30;
        padding-left: 10px;
        font-size: 16px;
      }
    }
.avatar-uploader .el-upload-dragger {
  border: none;
  width: 100px;
  height: 100px;
}

    .add-folder-but {
      background: #fff !important;
      color: #a32c30 !important;
      margin-bottom: 20px;
    }

    padding: 0 15px 0 15px;

    .text-header {
      line-height: 60px;
    }

    .uploading-image {
      width: 70%;
      height: 70%;
      display: block;
      margin: 0 auto;
    }
  }

  .el-timeline-item__timestamp {
    font-size: 15px;
    color: #000;
  }

  /* 设置带边框的checkbox，选中后边框的颜色 */
  .myRedCheckBox.is-bordered.is-checked {
    border-color: #a32c30;
  }

  /* 设置选中后的文字颜色 */
  .myRedCheckBox .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #a32c30;
  }

  /* 设置选中后对勾框的边框和背景颜色 */
  .myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner,
  .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: #a32c30;
    background-color: #a32c30;
  }

  /* 设置checkbox获得焦点后，对勾框的边框颜色 */
  .myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #a32c30;
  }

  /* 设置鼠标经过对勾框，对勾框边框的颜色 */
  .myRedCheckBox .el-checkbox__inner:hover {
    border-color: #a32c30;
  }

  .myRedCheckBox .el-checkbox__label {
    width: 90%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
// 头像包装器
.avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;

  .avatar {
    width: 150px;
    height: 150px;
    display: block;
    border-radius: 4px;
    cursor: pointer;
    object-fit: cover;
    border: 1px dashed #d9d9d9;

    &:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader .el-upload-dragger .el-icon-upload {
    margin: 20px 0 16px;
  }

  .avatar-uploader .el-upload-dragger {
    border: none;
    width: 100px;
    height: 100px;
  }

  // 头像包装器
  .avatar-wrapper {
  .avatar-uploader-placeholder {
    width: 150px;
    height: 150px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;

    .avatar {
      width: 150px;
      height: 150px;
      border-radius: 4px;
      cursor: pointer;
      object-fit: cover;
      border: 1px dashed #d9d9d9;

      &:hover {
        border-color: #409eff;
      }
    }

    .avatar-uploader-placeholder {
      width: 150px;
      height: 150px;
      border: 1px dashed #d9d9d9;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #fafafa;

      &:hover {
        border-color: #409eff;
        background-color: #f0f9ff;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        line-height: 1;
        margin-bottom: 8px;
      }

      .upload-tip {
        font-size: 12px;
        color: #8c939d;
      }
    }
  }

  // 上传方式选择容器
  .upload-choice-container {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;

    .upload-choice-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 120px;
      border: 2px dashed #d9d9d9;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        border-color: #409eff;
        background-color: #f5f7fa;
      }

      i {
        font-size: 40px;
        color: #409eff;
        margin-bottom: 10px;
      }

      span {
        font-size: 14px;
        color: #606266;
      }
    }
  }

  // 摄像头容器
  .camera-container {
    text-align: center;

    .camera-video {
      width: 100%;
      max-width: 600px;
      height: auto;
      border-radius: 4px;
      background: #000;
    }

    .captured-image {
      width: 100%;
      max-width: 600px;
      height: auto;
      border-radius: 4px;
    }
  }

  .table-button {
    color: #a00515;
    display: inline-block;
    width: 45%;
    cursor: pointer;
  }
    background-color: #fafafa;

  .filter-item {
    margin-bottom: 10px;
    position: absolute;
    right: 20px;
  }

  .jbxx-ul {
    margin-top: 10px;
    font-size: 14px;
    list-style: none;
    padding-left: 10px !important;

    >li:last-of-type {
      > div:first-of-type {
        position: absolute;
        left: 4px;
        height: 100%;
        border-left: 0;
      }
    &:hover {
      border-color: #409eff;
      background-color: #f0f9ff;
    }

    li {
      padding-bottom: 5px;
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      line-height: 1;
      margin-bottom: 8px;
    }

    .upload-tip {
      font-size: 12px;
      color: #8c939d;
    }
  }
}

// 上传方式选择容器
.upload-choice-container {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;

  .upload-choice-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      border-color: #409eff;
      background-color: #f5f7fa;
    }

    i {
      font-size: 40px;
      color: #409eff;
      margin-bottom: 10px;
    }

    span {
      font-size: 14px;
      color: #606266;
    }
  }
}

// 摄像头容器
.camera-container {
  text-align: center;

  .camera-video {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 4px;
    background: #000;
  }

  .captured-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 4px;
  }
}

.table-button {
  color: #a00515;
  display: inline-block;
  width: 45%;
  cursor: pointer;
}

.filter-item {
  margin-bottom: 10px;
  position: absolute;
  right: 20px;
}

.jbxx-ul {
  margin-top: 10px;
  font-size: 14px;
  list-style: none;
  padding-left: 10px !important;

  > li:last-of-type {
    > div:first-of-type {
      position: absolute;
      left: 4px;
      height: 100%;
      border-left: 0;
    }
  }

  li {
    padding-bottom: 5px;
    position: relative;
    height: 35px;
    box-sizing: border-box;

    > div:first-of-type {
      position: absolute;
      left: 4px;
      height: 100%;
      border-left: 2px solid #dfe4ed;
    }

    > div:last-of-type {
      color: #333;
      cursor: pointer;
      position: relative;
      height: 35px;
      box-sizing: border-box;
      padding-left: 28px !important;

      > div:first-of-type {
        position: absolute;
        left: 4px;
        height: 100%;
        border-left: 2px solid #dfe4ed;
      }

      > div:last-of-type {
        color: #333;
      &:hover {
        color: #a00515;
        cursor: pointer;
        position: relative;
        height: 35px;
        box-sizing: border-box;
        padding-left: 28px !important;
        &:hover {
          color: #a00515;
          cursor: pointer;
        }
        .light {
          color: #a00515;
        }
      }

      .item-node {
        left: -1px;
        width: 12px;
        height: 12px;
        position: absolute;
        background-color: #dfe4ed;
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      .light {
        color: #a00515;
      }
    }

    .item-node {
      left: -1px;
      width: 12px;
      height: 12px;
      position: absolute;
      background-color: #dfe4ed;
      border-radius: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
  }
}

</style>
<style lang="scss">
  .da-dialog {
    button.el-dialog__headerbtn {
      height: 30px;
      width: 30px;
      background-color: #a00515;
      opacity: 0.8;
      line-height: 30px;
      border-radius: 50%;
      i {
        color: #fff !important;
      }
      &:hover {
        opacity: 0.5;
      }
.da-dialog {
  button.el-dialog__headerbtn {
    height: 30px;
    width: 30px;
    background-color: #a00515;
    opacity: 0.8;
    line-height: 30px;
    border-radius: 50%;

    i {
      color: #fff !important;
    }
    .el-pagination {
      width: 98%;
      text-align: right;
    }
    .el-aside {
      height: 750px;
      overflow: hidden;
    }
    li.el-timeline-item {
      padding-bottom: 1px;
      height: 35px;
    }
    .el-dialog__title {
      font-weight: 700;
    }
    .el-dialog__body {
      padding: 10px 20px;

    &:hover {
      opacity: 0.5;
    }
  }
  .el-dialog.is-fullscreen {

  .el-pagination {
    width: 98%;
    text-align: right;
  }

  .el-aside {
    height: 750px;
    overflow: hidden;
  }

  .formjbxx {
    .el-input.is-disabled .el-input__inner {
      background-color: #fff !important;
      color: #333 !important;
    }
  li.el-timeline-item {
    padding-bottom: 1px;
    height: 35px;
  }
  .pri-del-btn {
    background-color: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);

  .el-dialog__title {
    font-weight: 700;
  }

  .el-dialog__body {
    padding: 10px 20px;
  }
}

.el-dialog.is-fullscreen {
  overflow: hidden;
}

.formjbxx {
  .el-input.is-disabled .el-input__inner {
    background-color: #fff !important;
    color: #333 !important;
  }
}

.pri-del-btn {
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}
</style>


 src/views/user/archivesEdit.vue

@@ -4310,6 +4310,24 @@
      const remarks = ''
      val.remark = remarks
      this.readon = false

      // 清空所有模块数据，确保切换员工后点击标签会重新加载
      this.workExperienceData = []
      this.physicalExamData = []
      this.contractInfoData = []
      this.jobChangeData = []
      this.leaveInfoData = []
      this.resignData = []
      this.dimissionAttendData = []
      this.dimissionLogData = []
      this.unemploymentData = []
      this.insuranceData = []
      this.accidentCasesData = []
      this.occupationalData = []
      this.laborTroubleData = []
      this.badRecordData = []
      this.remarkInfoData = []

      this.empBaseInfoForm = { ...val }
      this.empBaseInfoImageUrl = pages.getEmpBaseInfoImage + this.empBaseInfoForm.empId
      this.fileDate.empId = this.empBaseInfoForm.empId