feat(dashboard): 添加四险提醒功能并优化员工管理界面

yubo

2026-03-11 4c72dd4e55dbfae3dca4a7ac4342220e93f25a8b

feat(dashboard): 添加四险提醒功能并优化员工管理界面

- 在仪表板中新增四险提醒卡片，替换原有的不良记录统计
- 添加新的保险用户组件用于显示四险相关员工信息
- 更新员工数据统计接口以支持保险相关的统计数据
- 修改转正提醒组件以支持时间范围筛选功能
- 在员工列表中添加保险类型列并增加新的保险类型选项
- 实现保险数据导出功能和相关字段映射配置

 src/views/dashboard/index.vue

@@ -214,8 +214,8 @@
        </el-card>
      </el-col>
      <el-col>
        <el-card shadow="always" class="card-info" @click.native="showbl('不良记录','3')">
          <p class="card-number">{{ total.sxyg }}</p>
        <el-card shadow="always" class="card-info" @click.native="showInsurance('四险提醒','3')">
          <p class="card-number">{{ total.insurance }}</p>
          <p>四险提醒</p>
        </el-card>
      </el-col>
@@ -257,6 +257,7 @@
    <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" />
    <insurance-user ref="insuranceUser" :dialog-visible="dialog.dialogShowInsurance" :title="title" @cancleChooseUser="cancleInsuranceUser" />
  </div>
</template>
<script>
@@ -276,9 +277,10 @@
import CtUser from './ctUser'
import SfzUser from './sfzUser'
import ZzUser from './zzUser'
import InsuranceUser from './insuranceUser'

export default {
  components: { SfzUser, YgUser, QjUser, LzUser, GsUser, YwUser, SbUser, YjUser, TjUser, TgUser, BlUser, CqUser, HtUser, OnTheJobUser, CtUser, ZzUser },
  components: { SfzUser, YgUser, QjUser, LzUser, GsUser, YwUser, SbUser, YjUser, TjUser, TgUser, BlUser, CqUser, HtUser, OnTheJobUser, CtUser, ZzUser, InsuranceUser },
  data() {
    return {
      dialog: {
@@ -297,8 +299,8 @@
        dialogShowqj: false,
        dialogShowCq: false,
        dialogShowSfz: false,
        dialgoShowProbation: false,
        dialogShowProbation: false,
        dialogShowInsurance: false,
        title: '',
        type: ''
      },
@@ -334,7 +336,8 @@
        bljl: 0,
        zzyg: 0,
        sxyg: 0,
        probation: 0
        probation: 0,
        insurance: 0
      },
      pickerOptions: {
        shortcuts: [
@@ -513,18 +516,40 @@
      const values = this.value2
      const btime = values[0]
      const etime = values[1]
      const index = this.selectIndex
      const index = this.selectIndex // 传入当前 dashboard 选中的时间维度
      this.$refs.zzUser.setjobUser(btime, etime, index, null)
    },
    showProbation(title) {
      this.dialog.dialogShowInsurance = true
      this.title = title
      const values = this.value2
      const btime = values[0]
      const etime = values[1]
      const index = this.selectIndex
      this.$refs.insuranceUser.setjobUser(btime, etime, index, null)
    },
    showInsurance(title) {
      this.dialog.dialogShowInsurance = true
      this.title = title
      const values = this.value2
      const btime = values[0]
      const etime = values[1]
      const index = this.selectIndex
      this.$refs.insuranceUser.setjobUser(btime, etime, index, null)
    },
    cancleZzUser() {
      this.dialog.dialogShowProbation = false
    },
    cancleInsuranceUser() {
      this.dialog.dialogShowInsurance = false
    },
    fetchProbationCount() {
      this.$get('hr/empBaseInfo/probation/alert', {
        pageSize: 1,
        pageNum: 1,
        delFlag: 0,
        empStatus: 0
        empStatus: 0,
        timeRange: this.selectIndex
      }).then((r) => {
        const data = r.data.data
        this.total.probation = data.total || 0
@@ -636,6 +661,8 @@
      this.total.clyg = data.clyg
      this.total.ygtg = data.ygtg
      this.total.bljl = data.bljl
      this.total.probation = data.probationCount
      this.total.insurance = data.insuranceCount
    }
  }
}

 src/views/dashboard/insuranceUser.vue

New file
@@ -0,0 +1,218 @@
<template>
  <el-dialog
    :title="title"
    top="80px"
    width="80%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isVisible"
    :before-close="beforeClose"
  >
    <div class="app-container">
      <div class="filter-container" style="margin-left: -340px;">
        <el-button class="filter-item" type="warning" @click="handleExport">
          导出
        </el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        row-key="empId"
        stripe
        border
        :cell-style="{padding:'7px 0','text-align':'center'}"
        :header-cell-style="{'height':'5.3vh','background-color':'#e6e6e6','text-align':'center'}"
        style="width: 100%;"
      >
        <el-table-column show-overflow-tooltip type="index" width="55" label="序号" />
        <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="80" />
        <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="sex" label="性别" width="60" />
        <el-table-column show-overflow-tooltip prop="age" label="年龄" width="80" />
        <el-table-column show-overflow-tooltip prop="education" label="学历" width="80" />
        <el-table-column show-overflow-tooltip prop="nativePlace" label="籍贯" width="150" />
        <el-table-column show-overflow-tooltip prop="telePhone" label="联系电话" width="110" />
        <el-table-column show-overflow-tooltip prop="empTypeName" label="员工类型" width="80" />
        <el-table-column show-overflow-tooltip prop="insuranceTypeName" label="社保档位" width="240" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pagination.num"
        :limit.sync="pagination.size"
        @pagination="search"
      />
      <el-button type="danger" @click="cancleChoose">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 引用翻页组件
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    multipleselect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      headerHeight: '70px',
      deptTree: [],
      selection: [],
      multipleSelection: [],
      total: 0, // 总数量
      queryParams: {
        name: null,
        btime: null,
        etime: null,
        index: null,
        number: null
      }, // 查询参数
      sort: {}, // 排序
      pagination: { // 分页参数
        size: 5,
        num: 1
      },
      probationStatusOptions: [],
      list: [], // 给table显示的数据
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 导出配置
      exportConfig: {
        selectedFields: [
          'empNumb', // 编号
          'allDeptName', // 部门（护卫点）
          'jobName', // 岗位
          'empName', // 姓名
          'certificateNumb', // 身份证号码
          'sexName', // 性别
          'age', // 年龄
          'educationName', // 学历
          'nativePlaceName', // 籍贯
          'telePhone', // 联系电话
          'empTypeName', // 员工类型
          'insuranceTypeName' // 社保档位
        ],
        exportUrl: 'hr/empBaseInfo/export/insurance',
        fileName: '四险员工列表.xls'
      },
      selectIndex: 0 // 存储传入的时间筛选索引
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.getDicts('PROBATIONSTATUS').then(response => {
        this.probationStatusOptions = response.data
      })
    }, 1000)
  },
  methods: {
    probationStatusFormat(row, column) {
      return this.selectDictLabel(this.probationStatusOptions, row.probationStatus)
    },
    beforeClose(done) {
      this.$emit('cancleChooseUser')
    },
    search() {
      this.fetch({
        ...this.queryParams
      })
    },
    reset() {
      this.queryParams.name = null
      this.search()
    },
    // 翻页方法
    setjobUser(btime, etime, index, number) {
      this.queryParams.btime = btime
      this.queryParams.etime = etime
      this.queryParams.index = index
      this.queryParams.number = number
      this.queryParams.name = null
      this.selectIndex = index !== null ? index : 0 // 保存传入的 index
      this.pagination.num = 1
      this.search()
    },
    fetch(params = {}) {
      var that = this
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      params.delFlag = 0
      params.empStatus = 0

      // 添加 index 参数
      if (params.timeRange === undefined || params.timeRange === null) {
        params.timeRange = this.selectIndex
      }

      this.$get('hr/empBaseInfo/insurance/alert', {
        ...params
      }).then((r) => {
        const data = r.data.data
        that.total = data.total
        that.list = data.rows
      })
    },
    cancleChoose() {
      this.$emit('cancleChooseUser')
    },
    // 导出方法
    handleExport() {
      const params = {
        ...this.queryParams,
        index: this.selectIndex, // 使用当前查询的 index
        delFlag: 0,
        empStatus: 0,
        exportField: this.exportConfig.selectedFields.join(',')
      }

      this.$download(
        this.exportConfig.exportUrl,
        params,
        this.exportConfig.fileName
      ).then(() => {
        this.$message({
          message: '下载成功!',
          type: 'success'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .link_button {
    color: #169BD5;
  }

  .del_button {
    color: #D9001B;
  }
</style>

 src/views/dashboard/zzUser.vue

@@ -113,7 +113,8 @@
        ],
        exportUrl: 'hr/empBaseInfo/export/probation',
        fileName: '员工转正提醒.xls'
      }
      },
      selectIndex: 0 // 存储传入的时间筛选索引
    }
  },
  computed: {
@@ -153,6 +154,8 @@
      this.queryParams.index = index
      this.queryParams.number = number
      this.queryParams.name = null
      this.selectIndex = index !== null ? index : 0 // 保存传入的 index
      this.pagination.num = 1
      this.search()
    },
    fetch(params = {}) {
@@ -161,6 +164,12 @@
      params.pageNum = this.pagination.num
      params.delFlag = 0
      params.empStatus = 0

      // 添加 index 参数
      if (params.timeRange === undefined || params.timeRange === null) {
        params.timeRange = this.selectIndex
      }

      this.$get('hr/empBaseInfo/probation/alert', {
        ...params
      }).then((r) => {
@@ -176,6 +185,7 @@
    handleExport() {
      const params = {
        ...this.queryParams,
        index: this.selectIndex, // 使用当前查询的 index
        delFlag: 0,
        empStatus: 0,
        exportField: this.exportConfig.selectedFields.join(',')

 src/views/remind/insurance5.vue

@@ -105,9 +105,10 @@
          <el-table-column show-overflow-tooltip prop="telePhone" label="联系电话" width="110" />
          <el-table-column show-overflow-tooltip prop="empType" label="员工类型" width="80" :formatter="empTypeFormat" />
          <el-table-column
            prop="insuranceTypeName"
            prop="insuranceType"
            label="社保档位"
            width="240"
            :formatter="insuranceTypeFormat"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
          />
@@ -194,6 +195,15 @@
      }, {
        'dicItemName': '（非深户）四险二档',
        'dicItemCode': '6'
      }, {
        'dicItemName': '外参',
        'dicItemCode': '10'
      }, {
        'dicItemName': '临时工意外险',
        'dicItemCode': '13'
      }, {
        'dicItemName': '甲方购买',
        'dicItemCode': '14'
      }]
    }
  },