feat(dashboard): 添加转正提醒功能

yubo

2026-03-10 74fd2e9414fe5bb67ad8743aa370a07fa5f8caf4

 src/views/dashboard/index.vue

@@ -1,8 +1,8 @@
<template>
  <div class="main">
    <el-row style="height: 10px;">
      <el-col :span="9"><p /></el-col>
      <el-col :span="15">
    <el-row style="height: 4.25vh;margin-bottom: 0">
      <el-col :span="8"><p /></el-col>
      <el-col :span="16">
        <ul class="data-ul">
          <li :class="{ selectedColor: selectIndex === 0 }" @click="selectTab(0)">
            今日
@@ -20,7 +20,7 @@
        <span style=" font-size: 16px; color: #333333;"> 时间段：</span>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
@@ -34,71 +34,71 @@
        </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
    <el-row :gutter="20" class="dashboard-card">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showXzyg('在职员工总数','1')">
          <p class="card-number">{{ total.zzyg }}</p>
          <p>在职员工总数</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showXzyg('新进员工人数','2')">
          <p class="card-number">{{ total.xjyg }}</p>
          <p>新进员工人数</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showXzyg('正式员工人数','3')">
          <p class="card-number">{{ total.zsyg }}</p>
          <p>正式员工人数</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showXzyg('临时员工人数','4')">
          <p class="card-number">{{ total.lsyg }}</p>
          <p>临时员工人数</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showXzyg('超龄员工人数','5')">
          <p class="card-number">{{ total.clyg }}</p>
          <p>超龄员工人数</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
    <el-row :gutter="20" class="dashboard-card">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showXzyg('离职员工总数','6')">
          <p class="card-number">{{ total.lzyg }}</p>
          <p>离职员工总数</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always" class="card-info" @click.native="showXzyg('辞职申请人数','7')">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showCtyg('辞职申请人数','7')">
          <p class="card-number">{{ total.czyg }}</p>
          <p>辞职申请人数</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showXzyg('正常离职人数','8')">
          <p class="card-number">{{ total.zclz }}</p>
          <p>正常离职人数</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showXzyg('自动离职人数','9')">
          <p class="card-number">{{ total.zdlz }}</p>
          <p>自动离职人数</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showXzyg('公司辞退人数','10')">
          <p class="card-number">{{ total.gsct }}</p>
          <p>公司辞退人数</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
    <el-row :gutter="20" class="dashboard-card">
      <el-col :span="4">
        <el-card shadow="always" class="card-info" @click.native="showht('有效合同','11')">
          <p class="card-number">{{ total.yxht }}</p>
@@ -130,87 +130,99 @@
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
    <el-row :gutter="20" class="dashboard-card">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showcq('出勤人数','1')">
          <p class="card-number">{{ total.cqrs }}</p>
          <p>出勤人数</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showqj('员工请假','1')">
          <p class="card-number">{{ total.ygqj }}</p>
          <p>员工请假</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always" class="card-info" @click.native="showtj('员工体验','1')">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showtj('员工体检','1')">
          <p class="card-number">{{ total.ygtj }}</p>
          <p>员工体验</p>
          <p>员工体检</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showcq('员工加班','2')">
          <p class="card-number">{{ total.ygjb }}</p>
          <p>员工加班</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showcq('员工旷工','3')">
          <p class="card-number">{{ total.ygkg }}</p>
          <p>员工旷工</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card shadow="always" class="card-info" @click.native="showlz('劳资案件','1')">
    <el-row :gutter="20" class="dashboard-card">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showlz('仲裁案件','1')">
          <p class="card-number">{{ total.lzaj }}</p>
          <p>劳资案件</p>
          <p>仲裁案件</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showgs('工伤案件','1')">
          <p class="card-number">{{ total.gsaj }}</p>
          <p>工伤案件</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showyw('意外险案件','1')">
          <p class="card-number">{{ total.ywxaj }}</p>
          <p>意外险案件</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showsb('社保申请','3')">
          <p class="card-number">{{ total.sbsq }}</p>
          <p>社保申请</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always" class="card-info" @click.native="showsyj('失业金案件','3')">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showsyj('失业金领取','3')">
          <p class="card-number">{{ total.syj }}</p>
          <p>失业金案件</p>
          <p>失业金领取</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card shadow="always" class="card-info" @click.native="showXzyg('身份证到期','11')">
    <el-row :gutter="20" class="dashboard-card">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showSfz('身份证到期','11')">
          <p class="card-number">{{ total.sfz }}</p>
          <p>身份证到期</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showtg('员工调岗','3')">
          <p class="card-number">{{ total.ygtg }}</p>
          <p>员工调岗</p>
        </el-card>
      </el-col>
      <el-col :span="4">
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showbl('不良记录','3')">
          <p class="card-number">{{ total.bljl }}</p>
          <p>不良记录</p>
        </el-card>
      </el-col>
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showbl('不良记录','3')">
          <p class="card-number">{{ total.sxyg }}</p>
          <p>四险提醒</p>
        </el-card>
      </el-col>
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showProbation('转正提醒')">
          <p class="card-number">{{ total.probation }}</p>
          <p>转正提醒</p>
        </el-card>
      </el-col>
    </el-row>
@@ -241,6 +253,10 @@
    <gs-user ref="gsUser" :dialog-visible="dialog.dialogShowgs" :title="title" @cancleChooseUser="canclegsUser" />
    <lz-user ref="lzUser" :dialog-visible="dialog.dialogShowlz" :title="title" @cancleChooseUser="canclelzUser" />
    <qj-user ref="qjUser" :dialog-visible="dialog.dialogShowqj" :title="title" @cancleChooseUser="cancleqjUser" />
    <yg-user ref="ygUser" :dialog-visible="dialog.dialogShowyg" :title="title" @cancleChooseUser="cancleygUser" />
    <sfz-user ref="sfzUser" :dialog-visible="dialog.dialogShowSfz" :title="title" @cancleChooseUser="cancleSfzUser" />
    <ct-user ref="ctUser" :dialog-visible="dialog.dialogShowct" :title="title" @cancleChooseUser="canclectUser" />
    <zz-user ref="zzUser" :dialog-visible="dialog.dialogShowProbation" :title="title" @cancleChooseUser="cancleZzUser" />
  </div>
</template>
<script>
@@ -256,12 +272,18 @@
import GsUser from './gsUser'
import LzUser from './lzUser'
import QjUser from './qjUser'
import YgUser from './ygUser'
import CtUser from './ctUser'
import SfzUser from './sfzUser'
import ZzUser from './zzUser'

export default {
  components: { QjUser, LzUser, GsUser, YwUser, SbUser, YjUser, TjUser, TgUser, BlUser, CqUser, HtUser, OnTheJobUser },
  components: { SfzUser, YgUser, QjUser, LzUser, GsUser, YwUser, SbUser, YjUser, TjUser, TgUser, BlUser, CqUser, HtUser, OnTheJobUser, CtUser, ZzUser },
  data() {
    return {
      dialog: {
        isVisible: false,
        dialogShowyg: false,
        dialogShowHt: false,
        dialogShowbl: false,
        dialogShowtg: false,
@@ -270,9 +292,13 @@
        dialogShowsb: false,
        dialogShowyw: false,
        dialogShowgs: false,
        dialogShowct: false,
        dialogShowlz: false,
        dialogShowqj: false,
        dialogShowCq: false,
        dialogShowSfz: false,
        dialgoShowProbation: false,
        dialogShowProbation: false,
        title: '',
        type: ''
      },
@@ -305,7 +331,10 @@
        ygtj: 0,
        sfz: 0,
        ygtg: 0,
        bljl: 0
        bljl: 0,
        zzyg: 0,
        sxyg: 0,
        probation: 0
      },
      pickerOptions: {
        shortcuts: [
@@ -344,8 +373,18 @@
  },
  mounted() {
    this.selectTab(0)
    this.fetchProbationCount()
  },
  methods: {
    showSfz(title, number) {
      this.dialog.dialogShowSfz = true
      this.title = title
      const values = this.value2
      const btime = values[0]
      const etime = values[1]
      const index = this.selectIndex
      this.$refs.sfzUser.setjobUser(btime, etime, index, number)
    },
    showbl(title, number) {
      this.dialog.dialogShowbl = true
      this.title = title
@@ -446,13 +485,50 @@
      this.$refs.htUser.setjobUser(btime, etime, index, number)
    },
    showXzyg(title, number) {
      this.dialog.isVisible = true
      this.title = title
      const values = this.value2
      const btime = values[0]
      const etime = values[1]
      const index = this.selectIndex
      this.$refs.jobUser.setjobUser(btime, etime, index, number)
      if (number >= 6) {
        this.$refs.ygUser.setjobUser(btime, etime, index, number)
        this.dialog.dialogShowyg = true
      } else {
        this.$refs.jobUser.setjobUser(btime, etime, index, number)
        this.dialog.isVisible = true
      }
    },
    showCtyg(title, number) {
      this.title = title
      const values = this.value2
      const btime = values[0]
      const etime = values[1]
      const index = this.selectIndex
      this.$refs.ctUser.setjobUser(btime, etime, index, number)
      this.dialog.dialogShowct = true
    },
    showProbation(title) {
      this.dialog.dialogShowProbation = true
      this.title = title
      const values = this.value2
      const btime = values[0]
      const etime = values[1]
      const index = this.selectIndex
      this.$refs.zzUser.setjobUser(btime, etime, index, null)
    },
    cancleZzUser() {
      this.dialog.dialogShowProbation = false
    },
    fetchProbationCount() {
      this.$get('hr/empBaseInfo/probation/alert', {
        pageSize: 1,
        pageNum: 1,
        delFlag: 0,
        empStatus: 0
      }).then((r) => {
        const data = r.data.data
        this.total.probation = data.total || 0
      })
    },
    cancleChooseUser() {
      this.dialog.isVisible = false
@@ -489,6 +565,15 @@
    },
    cancleqjUser() {
      this.dialog.dialogShowqj = false
    },
    cancleygUser() {
      this.dialog.dialogShowyg = false
    },
    canclectUser() {
      this.dialog.dialogShowct = false
    },
    cancleSfzUser() {
      this.dialog.dialogShowSfz = false
    },
    submitForm() {
      const values = this.value2
@@ -556,49 +641,63 @@
}
</script>
<style lang="scss" scoped>

.main {
   padding: 20px;
   padding: 5px 2vw 4.25vh;
  text-align: center;
   .data-ul {
      margin-right: 40px;
      margin-right: 2vw;
      margin-top: 0px;
      list-style: none;
      float: left;
      li {
         float: left;
         width: 60px;
         width: 3.12vw;
         text-align: center;
         font-size: 16px;
         font-size: 1.7vh;
         color: #333333;
      }
      li:hover {
         color: #931e1e;
         border-bottom: 2px solid #931e1e;
         color: #a00515;
         border-bottom: 2px solid #a00515;
      }
   }
}
.selectedColor {
   color: #931e1e;
   border-bottom: 2px solid #931e1e;
   color: #a00515;
   border-bottom: 2px solid #a00515;
}
.el-card__body {
   text-align: center;
   .card-number {
      color: #931e1e;
      font-size: 20px;
  p {
    height: 3.2vh;
    line-height: 3.2vh;
    font-size: 1.5vh;
    margin: 0;
  }
   p.card-number {
      color: #a00515;
    font-size: 2.12vh;
    height: 4.25vh;
    line-height: 4.25vh;
    margin: 0;
    margin-top: 2.65vh;
   }
}
.card-info {
  height: 100%;
}
.card-info:hover {
   text-align: center;
   background-color: #931e1e;
   background-color: #a00515;
  cursor: pointer;
   color: #fff;
   .card-number {
      color: #fff;
      font-size: 20px;
   }
}
.el-row {
   margin-bottom: 20px;
   margin-bottom: 1vh;
   &:last-child {
      margin-bottom: 0;
   }
@@ -625,7 +724,22 @@
}
.data-ul {
   li {
      line-height: 40px;
      line-height: 4.25vh;
   }
}
</style>

<style lang="scss">
.dashboard-card {
  width: 100%;
div.el-col {
  width: 20%;
  height: 12.23vh;
}
.el-card__body {
  padding: 0;
  height: 100%;
  overflow: hidden;
}
}
</style>