feat(remind): 添加员工转正和退休提醒功能

yubo

2026-03-10 131ee183fff079793a2b9a8e3ff63cf3104132c5

feat(remind): 添加员工转正和退休提醒功能

- 新增 probation.vue 页面实现员工转正提醒功能
- 新增 retirement.vue 页面实现员工退休提醒功能
- 添加转正和退休相关的数据表格展示
- 实现转正操作包括正常转正、解聘、延期等功能
- 实现退休返聘和解聘操作功能
- 添加相关表单验证和数据处理逻辑
- 配置页面分页、排序和搜索功能
- 添加导出 Excel 功能按钮

 src/views/remind/probation.vue

New file
@@ -0,0 +1,519 @@
<template>
  <div style="background-color: #fff;height: 100%;">
    <el-container>
      <el-header :height="headerHeight">
        <el-row style="margin-bottom: 10px;">
          <el-col :span="15">
            <h3 class="bu-tian-jia-title">员工转正提醒</h3>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="height: 85%;">
        <el-row style="margin: 10px 0 10px 0;">
          <el-col :span="24">
            <el-button type="primary" class="hr-but-all" @click="showDcyg(0)">导出EXCEL</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="probationList"
          :cell-style="{padding:'7px 0','text-align':'center'}"
          :header-cell-style="{'height':'5.3vh','background-color':'#e6e6e6','text-align':'center'}"
          stripe
          border
          style="width: 100%;color: #000;"
          @sort-change="changeSort"
        >
          <el-table-column show-overflow-tooltip fixed="left" label="操作" width="150">
            <template v-slot="scope">
              <span
                style="color: #a00515;display: inline-block;width: 30%;cursor: pointer"
                @click="goOn(scope.row)"
              >转正</span>
              <span
                style="color: #a00515;display: inline-block;width: 30%;cursor: pointer"
                @click="goDismiss(scope.row)"
              >解聘</span>
              <span
                style="color: #a00515;display: inline-block;width: 30%;cursor: pointer"
                @click="goDelay(scope.row)"
              >延期</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="empNumb" label="员工编号" width="120" />
          <el-table-column show-overflow-tooltip prop="allDeptName" label="部门（护卫点）" />
          <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="120" />
          <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="120" />
          <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="160" />
          <el-table-column show-overflow-tooltip prop="birthdate" label="出生日期" width="150" />
          <el-table-column show-overflow-tooltip prop="insuranceTypeName" label="社保档位" width="180" />
          <el-table-column show-overflow-tooltip prop="socialNumb" label="社保电脑号" width="180" />
          <el-table-column show-overflow-tooltip prop="entryDate" label="入职日期" width="150" />
          <el-table-column show-overflow-tooltip prop="probationDate" label="转正日期" width="120" />
          <el-table-column show-overflow-tooltip prop="probationStatusName" label="转正状态" width="120" />
        </el-table>
        <pagination
          v-show="total>0"
          style="text-align: right;width: 98%;"
          :total="total"
          :page.sync="pagination.num"
          :limit.sync="pagination.size"
          @pagination="search"
        />
      </el-main>
    </el-container>
    <el-dialog :title="dialogTitle" :visible.sync="dialogShowContract" width="50%">
      <el-form
        ref="probationForm"
        :model="probationForm"
        :rules="contractRules"
        label-position="right"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="empName">
              <el-input v-model="probationForm.empName" />
            </el-form-item>
            <el-form-item label="身份证号码" prop="certificateNumb">
              <el-input
                v-model="probationForm.certificateNumb"
              />
            </el-form-item>
            <el-form-item label="性别" this-emp-base-info-form="sex">
              <el-select v-model="probationForm.sex" placeholder="请选择性别">
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dicItemCode"
                  :label="dict.dicItemName"
                  :value="dict.dicItemCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="dynamicDateLabel" prop="probationDate">
              <el-date-picker
                v-model="probationForm.probationDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工编号" prop="empNumb">
              <el-input v-model="probationForm.empNumb" />
            </el-form-item>
            <el-form-item label="部门(护卫点)" prop="allDeptName">
              <el-input v-model="probationForm.allDeptName" />
            </el-form-item>
            <el-form-item label="岗位" prop="jobName">
              <el-input v-model="probationForm.jobName" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="putProbationInfo('probationForm')">保 存</el-button>
        <el-button @click="dialogIsShow()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { dateDifference } from '@/utils/myUtil'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialog: {
        isVisible: false,
        title: '',
        type: ''
      },
      sort: {},
      // 总数量
      total: 0,
      // 查询参数
      queryParams: {
        baseKey: ''
      },
      // 分页参数
      pagination: {
        size: 15,
        num: 1
      },
      headerHeight: '30px',
      // 转正信息
      probationList: [],
      // 转正信息
      probationForm: {
        empId: '',
        empNumb: '',
        empName: '',
        certificateNumb: '',
        sex: '',
        deptId: '',
        deptName: '',
        allDeptName: '',
        jobName: '',
        delFlag: '',
        empStatus: 0,
        entryDate: '',
        probationDate: '',
        probationStatus: ''
      },
      sexOptions: [],
      contractStatusOptions: [],
      dialogTitle: '正常转正',
      dynamicDateLabel: '转正日期',
      dialogShowContract: false,
      contractRules: {
        empName: [{ required: true, message: '请选择员工', trigger: 'change' }],
        probationDate: [{ required: true, message: '请选择日期', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.fetch()
    this.getDicts('sex').then(response => {
      this.sexOptions = response.data
    })
    this.getDicts('CONTRACTSTATUS').then(response => {
      this.contractStatusOptions = response.data
    })
  },
  methods: {
    search() {
      this.queryParams.baseKey = ''
      this.fetch({
        ...this.queryParams,
        ...this.sort
      })
    },
    fetch(params = {}) {
      const that = this
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      params.delFlag = 0
      params.empStatus = 0

      this.$get('hr/empBaseInfo/probation/alert', {
        ...params
      }).then((r) => {
        const data = r.data.data
        that.total = data.total
        that.probationList = data.rows
      })
    },
    changeSort(val) {
      this.sort.field = val.prop
      this.sort.order = val.order
      this.fetch()
    },
    // 正常(提前转正)转正
    goOn(row) {
      this.initContractData(row)
      this.dialogTitle = '正常转正'
      this.probationForm.probationStatus = '1'
      this.dynamicDateLabel = '转正日期'
      this.dialogShowContract = true
    },
    goDelay(row) {
      this.initContractData(row)
      this.dialogTitle = '延期转正'
      this.probationForm.probationStatus = '3'
      this.dynamicDateLabel = '延期日期'
      this.dialogShowContract = true
    },
    goDismiss(row) {
      this.initContractData(row)
      this.dialogTitle = '试用解骋'
      this.probationForm.probationStatus = '2'
      this.dynamicDateLabel = '解聘日期'
      this.dialogShowContract = true
    },
    dialogIsShow() {
      this.dialogShowContract = false
    },
    // 不续签转正
    discontinue(val) {
      this.initContractData(val)
      this.$post('hr/empContractInfo/remind/not', { ...this.probationForm }).then(() => {
        this.buttonLoading = false
        this.$message({
          message: this.$t('tips.updateSuccess'),
          type: 'success'
        })
        this.cleanContractData()
        this.fetch()
      })
    },
    // 初始化续签转正信息
    initContractData(val) {
      this.cleanContractData()
      this.probationForm.empId = val.empId
      this.probationForm.empNumb = val.empNumb
      this.probationForm.empName = val.empName
      this.probationForm.certificateNumb = val.certificateNumb
      this.probationForm.sex = val.sex
      this.probationForm.deptId = val.deptId
      this.probationForm.deptName = val.deptName
      this.probationForm.allDeptName = val.allDeptName
      this.probationForm.JobId = val.JobId
      this.probationForm.jobName = val.jobName
      this.probationForm.probationDate = val.probationDate
      this.probationForm.entryDate = val.entryDate
    },
    // 清除续签转正信息
    cleanContractData() {
      this.probationForm.contractId = ''
      this.probationForm.empId = ''
      this.probationForm.empNumb = ''
      this.probationForm.empName = ''
      this.probationForm.certificateNumb = ''
      this.probationForm.sex = ''
      this.probationForm.deptId = ''
      this.probationForm.deptName = ''
      this.probationForm.allDeptName = ''
      this.probationForm.JobId = ''
      this.probationForm.jobName = ''
      this.probationForm.contractStatus = ''
      this.probationForm.beginDate = ''
      this.probationForm.endDate = ''
      this.probationForm.contractPeriod = 0
      this.probationForm.remark = ''
      this.probationForm.transactor = ''
    },
    // 验证转正签订日期
    startDate(rule, value, callback) {
      // 如果结束日期没选，cb
      if (!this.probationForm.endDate) {
        callback()
      } else {
        // 结束日期有，进行判断
        if (this.compareDate(value, this.probationForm.endDate)) {
          // 如果起始在结束之前
          callback()
        } else {
          callback(new Error('开始日期不能在结束日期之后，请重新选择'))
        }
      }
    },
    // 验证转正结束日期
    endDate(rule, value, callback) {
      // 如果起始日期没选，cb
      if (!this.probationForm.signingDate) {
        callback()
      } else {
        // 起始日期有，进行判断
        if (this.compareDate(this.probationForm.signingDate, value)) {
          // 如果起始在结束之前
          this.probationForm.contractPeriod = dateDifference(this.probationForm.signingDate, this.probationForm.endDate, 'o')
          callback()
        } else {
          callback(new Error('结束日期不能在开始始日期之前，请重新选择'))
        }
      }
    },
    compareDate(start, end) {
      return new Date(end).getTime() > new Date(start).getTime()
    },
    // 续签转正提交
    putProbationInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$post('hr/empBaseInfo/probation/change', { ...this.probationForm }).then(() => {
            this.buttonLoading = false
            this.$message({
              message: this.$t('处理成功'),
              type: 'success'
            })

            this.cleanContractData()
            this.fetch()
            this.dialogIsShow()
          })
        }
      })
    }
  }
}

</script>
<style lang="scss">
.zzyg-table {
  .el-table th, .el-table td {
    padding: 7px 0;
  }
}

.fj-checkbox {
  .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #a32c30;;
    background: #a32c30;;
  }

  .el-checkbox__label {
    color: #000 !important;
  }
}
</style>
<style lang="scss" scoped>
.baseinfo .el-container {
  .el-aside {
    background-color: #fff;
  }

  .el-main {
    background-color: #fff;
  }

}

.el-main {
  height: 600px;
}

.el-autocomplete {
  width: 100%;
}

.el-select {
  width: 100%;
}

.el-aside {
  padding: 20px;
  background: #f3f5f8;
  height: 600px;

  .el-tree {
    height: 100%;
  }
}

.searchTable {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;

  tr {
    border-bottom: 1px dashed #d9dadb;
  }

  .td {
    width: 90px;
    text-align: right;
  }

  .td-group {
    padding-left: 20px;
  }
}

.searchTable td,
.searchTable th {
  color: #000;
  height: 50px;
  background-color: #fff;
}

#ygxq table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  margin-top: 20px;
}

#ygxq table td,
#ygxq table th {
  border: 1px solid #DDDCDC;
  color: #666;
  height: 30px;
}

#ygxq table thead th {
  background-color: #CCE8EB;
  width: 100px;
}

#ygxq table tr:nth-child(odd) {
  background: #fff;
}

#ygxq table tr:nth-child(even) {
  background: #F5FAFA;
}

.tdTitle {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.link_button {
  color: #169BD5;
}

.del_button {
  color: #D9001B;
}

#dcygTable {
  border-collapse: collapse;

  tr {
    width: 100%;
    border-bottom: 1px dashed #ccc;

    > td:nth-child(even) {
      width: 100px;
      text-align: left;
    }
  }

}

#dcygTable td {
  width: 160px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 400;
}

.search-btn {
  display: inline-block;
  width: 3.64vw;
  height: 3.2vh;
  line-height: 3.2vh;
  text-align: center;
  background-color: #a00515;
  color: #fff;
  margin-left: 1vw;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}

.sup-search-btn {
  display: inline-block;
  width: 5.2vw;
  height: 3.2vh;
  line-height: 3.2vh;
  text-align: center;
  margin-left: 1vw;
  color: #a00515;
  border: 1px solid #a00515;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}
</style>

 src/views/remind/retirement.vue

New file
@@ -0,0 +1,564 @@
<template>
  <div style="background-color: #fff;height: 100%;">
    <el-container>
      <el-header :height="headerHeight">
        <el-row style="margin-bottom: 10px;">
          <el-col :span="15">
            <h3 class="bu-tian-jia-title">员工退休提醒</h3>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="height: 85%;">
        <el-row style="margin: 10px 0 10px 0;">
          <el-col :span="24">
            <el-button type="primary" class="hr-but-all" @click="showDcyg(0)">导出EXCEL</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="contractList"
          :cell-style="{padding:'7px 0','text-align':'center'}"
          :header-cell-style="{'height':'5.3vh','background-color':'#e6e6e6','text-align':'center'}"
          stripe
          border
          style="width: 100%;color: #000;"
          @sort-change="changeSort"
        >
          <el-table-column show-overflow-tooltip fixed="left" label="操作" width="120">
            <template v-slot="scope">
              <span
                style="color: #a00515;display: inline-block;width: 40%;cursor: pointer"
                @click="goOn(scope.row)"
              >返骋</span>
              <span
                style="color: #a00515;display: inline-block;width: 40%;cursor: pointer"
                @click="goDismiss(scope.row)"
              >解骋</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="empNumb" label="员工编号" width="120" />
          <el-table-column show-overflow-tooltip prop="allDeptName" label="部门（护卫点）" />
          <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="100" />
          <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="100" />
          <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="160" />
          <el-table-column show-overflow-tooltip prop="birthdate" label="出生日期" width="120" />
        </el-table>
        <pagination
          v-show="total>0"
          style="text-align: right;width: 98%;"
          :total="total"
          :page.sync="pagination.num"
          :limit.sync="pagination.size"
          @pagination="search"
        />
      </el-main>
    </el-container>
    <el-dialog title="退休返骋合同信息" :visible.sync="dialogShowContract" width="50%">
      <el-form
        ref="contractForm"
        :model="contractForm"
        :rules="contractRules"
        label-position="right"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="empName">
              <el-input v-model="contractForm.empName" />
            </el-form-item>
            <el-form-item label="身份证号码" prop="certificateNumb">
              <el-input
                v-model="contractForm.certificateNumb"
              />
            </el-form-item>
            <el-form-item label="性别" this-emp-base-info-form="sex">
              <el-select v-model="contractForm.sex" placeholder="请选择性别">
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dicItemCode"
                  :label="dict.dicItemName"
                  :value="dict.dicItemCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="合同签订日期" prop="signingDate">
              <el-date-picker
                v-model="contractForm.signingDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="合同状态" prop="contractStatus">
              <el-select
                v-model="contractForm.contractStatus"
                placeholder="请选择合同状态"
              >
                <el-option
                  v-for="dict in contractStatusOptions"
                  :key="dict.dicItemCode"
                  :label="dict.dicItemName"
                  :value="dict.dicItemCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="合同办理人" prop="transactor">
              <el-input v-model="contractForm.transactor" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工编号" prop="empNumb">
              <el-input v-model="contractForm.empNumb" />
            </el-form-item>
            <el-form-item label="部门(护卫点)" prop="allDeptName">
              <el-input v-model="contractForm.allDeptName" />
            </el-form-item>
            <el-form-item label="岗位" prop="jobName">
              <el-input v-model="contractForm.jobName" />
            </el-form-item>
            <el-form-item label="合同结束日期" prop="endDate">
              <el-date-picker
                v-model="contractForm.endDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="合同期限（年）" prop="contractPeriod">
              <el-input v-model="contractForm.contractPeriod" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="contractForm.remark" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="putContractInfo('contractForm')">保 存</el-button>
        <el-button @click="dialogIsShow()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { dateDifference } from '@/utils/myUtil'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialog: {
        isVisible: false,
        title: '',
        type: ''
      },
      sort: {},
      // 总数量
      total: 0,
      // 查询参数
      queryParams: {
        baseKey: ''
      },
      // 分页参数
      pagination: {
        size: 15,
        num: 1
      },
      headerHeight: '30px',
      // 合同列表
      contractList: [],
      dimissLogForm: {
        empIds: '',
        dgryNames: '',
        entryDates: '',
        dimissionType: '',
        dimissionDate: '',
        remark: '',
        afterOperation: '',
        certificateNumb: '',
        deptNames: ''
      },
      // 合同信息
      contractForm: {
        empId: '',
        empNumb: '',
        empName: '',
        certificateNumb: '',
        sex: '',
        sexName: '',
        deptId: '',
        deptName: '',
        allDeptName: '',
        JobId: '',
        jobName: '',
        beginDate: '',
        endDate: '',
        contractStatus: '',
        contractPeriod: '',
        transactor: '',
        signingDate: '',
        remark: '',
        createTime: '',
        creator: '',
        modifyTime: '',
        modifier: '',
        delFlag: '',
        empStatus: 0,
        version: '',
        diffDay: 0
      },
      sexOptions: [],
      contractStatusOptions: [],
      dialogShowContract: false,
      contractRules: {
        empName: [{ required: true, message: '请选择员工', trigger: 'change' }],
        signingDate: [{ required: true, validator: this.startDate }],
        contractStatus: [{ required: true, message: '请选择合同状态', trigger: 'change' }],
        transactor: [{ max: 40, message: '长度不超过40个字符', trigger: 'blur' }],
        beginDate: [{ required: true, message: '请选择合同开始日期', trigger: 'change' }],
        endDate: [{ required: true, validator: this.endDate }],
        remark: [{ max: 512, message: '长度不超过512个字符', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.fetch()
    this.getDicts('sex').then(response => {
      this.sexOptions = response.data
    })
    this.getDicts('CONTRACTSTATUS').then(response => {
      this.contractStatusOptions = response.data
    })
  },
  methods: {
    search() {
      this.queryParams.baseKey = ''
      this.fetch({
        ...this.queryParams,
        ...this.sort
      })
    },
    fetch(params = {}) {
      const that = this
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      params.delFlag = 0
      params.empStatus = 0

      this.$get('hr/empBaseInfo/retire/alert', {
        ...params
      }).then((r) => {
        const data = r.data.data
        that.total = data.total
        that.contractList = data.rows
      })
    },
    changeSort(val) {
      this.sort.field = val.prop
      this.sort.order = val.order
      this.fetch()
    },
    // 续签合同
    goOn(row) {
      this.initContractData(row)
      this.dialogShowContract = true
    },
    dialogIsShow() {
      this.dialogShowContract = false
    },
    // 解骋
    goDismiss(val) {
      this.initDimissLogData(val)
      this.$post('hr/empBaseInfo/retire/dismiss', { ...this.dimissLogForm }).then(() => {
        this.buttonLoading = false
        this.$message({
          message: this.$t('tips.updateSuccess'),
          type: 'success'
        })
        this.cleanContractData()
        this.fetch()
      })
    },
    // 到龄退休
    initDimissLogData(val) {
      this.dimissLogForm.empIds = val.empId
      this.dimissLogForm.dgryNames = val.empName
      this.dimissLogForm.entryDates = val.entryDate
      this.dimissLogForm.dimissionType = '7'
      this.dimissLogForm.remark = '到龄退休解聘'
      this.dimissLogForm.afterOperation = '1'
      this.dimissLogForm.certificateNumb = val.certificateNumb
      this.dimissLogForm.deptNames = val.allDeptName
    },
    // 初始化续签合同信息
    initContractData(val) {
      this.cleanContractData()
      this.contractForm.contractId = val.contractId
      this.contractForm.empId = val.empId
      this.contractForm.empNumb = val.empNumb
      this.contractForm.empName = val.empName
      this.contractForm.certificateNumb = val.certificateNumb
      this.contractForm.sex = val.sex
      this.contractForm.deptId = val.deptId
      this.contractForm.deptName = val.deptName
      this.contractForm.allDeptName = val.allDeptName
      this.contractForm.JobId = val.JobId
      this.contractForm.jobName = val.jobName
      this.contractForm.contractStatus = '5'
    },
    // 清除续签合同信息
    cleanContractData() {
      this.contractForm.contractId = ''
      this.contractForm.empId = ''
      this.contractForm.empNumb = ''
      this.contractForm.empName = ''
      this.contractForm.certificateNumb = ''
      this.contractForm.sex = ''
      this.contractForm.deptId = ''
      this.contractForm.deptName = ''
      this.contractForm.allDeptName = ''
      this.contractForm.JobId = ''
      this.contractForm.jobName = ''
      this.contractForm.contractStatus = ''
      this.contractForm.beginDate = ''
      this.contractForm.endDate = ''
      this.contractForm.contractPeriod = 0
      this.contractForm.remark = ''
      this.contractForm.transactor = ''
    },
    // 验证合同签订日期
    startDate(rule, value, callback) {
      // 如果结束日期没选，cb
      if (!this.contractForm.endDate) {
        callback()
      } else {
        // 结束日期有，进行判断
        if (this.compareDate(value, this.contractForm.endDate)) {
          // 如果起始在结束之前
          callback()
        } else {
          callback(new Error('开始日期不能在结束日期之后，请重新选择'))
        }
      }
    },
    // 验证合同结束日期
    endDate(rule, value, callback) {
      // 如果起始日期没选，cb
      if (!this.contractForm.signingDate) {
        callback()
      } else {
        // 起始日期有，进行判断
        if (this.compareDate(this.contractForm.signingDate, value)) {
          // 如果起始在结束之前
          this.contractForm.contractPeriod = dateDifference(this.contractForm.signingDate, this.contractForm.endDate, 'o')
          callback()
        } else {
          callback(new Error('结束日期不能在开始始日期之前，请重新选择'))
        }
      }
    },
    compareDate(start, end) {
      return new Date(end).getTime() > new Date(start).getTime()
    },
    // 续签合同提交
    putContractInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$post('hr/empContractInfo/retire/rehire', { ...this.contractForm }).then(() => {
            this.buttonLoading = false
            this.$message({
              message: this.$t('处理成功'),
              type: 'success'
            })

            this.cleanContractData()
            this.fetch()
            this.dialogIsShow()
          })
        }
      })
    }
  }
}

</script>
<style lang="scss">
.zzyg-table {
  .el-table th, .el-table td {
    padding: 7px 0;
  }
}

.fj-checkbox {
  .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #a32c30;;
    background: #a32c30;;
  }

  .el-checkbox__label {
    color: #000 !important;
  }
}
</style>
<style lang="scss" scoped>
.baseinfo .el-container {
  .el-aside {
    background-color: #fff;
  }

  .el-main {
    background-color: #fff;
  }

}

.el-main {
  height: 600px;
}

.el-autocomplete {
  width: 100%;
}

.el-select {
  width: 100%;
}

.el-aside {
  padding: 20px;
  background: #f3f5f8;
  height: 600px;

  .el-tree {
    height: 100%;
  }
}

.searchTable {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;

  tr {
    border-bottom: 1px dashed #d9dadb;
  }

  .td {
    width: 90px;
    text-align: right;
  }

  .td-group {
    padding-left: 20px;
  }
}

.searchTable td,
.searchTable th {
  color: #000;
  height: 50px;
  background-color: #fff;
}

#ygxq table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  margin-top: 20px;
}

#ygxq table td,
#ygxq table th {
  border: 1px solid #DDDCDC;
  color: #666;
  height: 30px;
}

#ygxq table thead th {
  background-color: #CCE8EB;
  width: 100px;
}

#ygxq table tr:nth-child(odd) {
  background: #fff;
}

#ygxq table tr:nth-child(even) {
  background: #F5FAFA;
}

.tdTitle {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.link_button {
  color: #169BD5;
}

.del_button {
  color: #D9001B;
}

#dcygTable {
  border-collapse: collapse;

  tr {
    width: 100%;
    border-bottom: 1px dashed #ccc;

    > td:nth-child(even) {
      width: 100px;
      text-align: left;
    }
  }

}

#dcygTable td {
  width: 160px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 400;
}

.search-btn {
  display: inline-block;
  width: 3.64vw;
  height: 3.2vh;
  line-height: 3.2vh;
  text-align: center;
  background-color: #a00515;
  color: #fff;
  margin-left: 1vw;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}

.sup-search-btn {
  display: inline-block;
  width: 5.2vw;
  height: 3.2vh;
  line-height: 3.2vh;
  text-align: center;
  margin-left: 1vw;
  color: #a00515;
  border: 1px solid #a00515;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}
</style>

 vue.config.js

@@ -109,28 +109,28 @@
            .end()
          config
            .optimization.splitChunks({
            chunks: 'all',
            cacheGroups: {
              libs: {
                name: 'chunk-libs',
                test: /[\\/]node_modules[\\/]/,
                priority: 10,
                chunks: 'initial' // only package third parties that are initially dependent
              },
              elementUI: {
                name: 'chunk-elementUI', // split elementUI into a single package
                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
              },
              commons: {
                name: 'chunk-commons',
                test: resolve('src/components'), // can customize your rules
                minChunks: 3, //  minimum common number
                priority: 5,
                reuseExistingChunk: true
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            }
          })
            })
          config.optimization.runtimeChunk('single')
        }
      )