From 3d213c064d4e6906e720fd9c3a6ccc055be24104 Mon Sep 17 00:00:00 2001
From: yubo <autumnal_wind@yeah.net>
Date: 星期二, 10 三月 2026 19:52:18 +0800
Subject: [PATCH] feat(remind): 添加员工退休提醒页面导出功能
---
src/components/ExportEmpBase.vue | 178 ++++++++++++++++++++++++++++++++++++++++++++
src/views/remind/retirement.vue | 59 ++++++++++++++
2 files changed, 234 insertions(+), 3 deletions(-)
diff --git a/src/components/ExportEmpBase.vue b/src/components/ExportEmpBase.vue
new file mode 100644
index 0000000..0213430
--- /dev/null
+++ b/src/components/ExportEmpBase.vue
@@ -0,0 +1,178 @@
+<template>
+ <el-dialog
+ title="导出员工"
+ :visible.sync="isVisible"
+ width="800px"
+ @close="handleClose"
+ >
+ <div style="font-size: 16px;font-weight: 400;height: 35px;margin-top: -30px;color: #409EFF;">
+ 请勾选需要导出的字段
+ </div>
+ <!-- 全选行 -->
+ <div style="margin-top: 20px; padding-left: 20px;">
+ <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
+ 全部字段
+ </el-checkbox>
+ </div>
+ <!-- 网格布局替代表格 -->
+ <el-checkbox-group
+ v-model="checkedCities"
+ class="field-grid"
+ @change="handleCheckedCitiesChange"
+ >
+ <div v-for="field in allFields" :key="field.value" class="grid-item">
+ <el-checkbox :label="field.value">{{ field.label }}</el-checkbox>
+ </div>
+ </el-checkbox-group>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="handleClose">取 消</el-button>
+ <el-button type="primary" @click="handleConfirm">确 定</el-button>
+ </div>
+ </el-dialog>
+</template>
+
+<script>
+// 预定义的所有可导出字段
+const ALL_EXPORT_FIELDS = [
+ { label: '档案号', value: 'archivesNumb' },
+ { label: '编号', value: 'empNumb' },
+ { label: '姓名', value: 'empName' },
+ { label: '性别', value: 'sexName' },
+ { label: '身份证号码', value: 'certificateNumb' },
+ { label: '出生日期', value: 'birthdate' },
+ { label: '年龄', value: 'age' },
+ { label: '民族', value: 'nationName' },
+ { label: '籍贯', value: 'nativePlaceName' },
+ { label: '政治面貌', value: 'politicsName' },
+ { label: '婚姻状况', value: 'marriageName' },
+ { label: '身高 (cm)', value: 'stature' },
+ { label: '学历', value: 'educationName' },
+ { label: '部门 (护卫点)', value: 'allDeptName' },
+ { label: '岗位', value: 'jobName' },
+ { label: '员工类别', value: 'empTypeName' },
+ { label: '联系电话', value: 'telePhone' },
+ { label: '现住址', value: 'currentAddress' },
+ { label: '户籍地址', value: 'censusAddress' },
+ { label: '入职日期', value: 'entryDate' },
+ { label: '社保档位', value: 'insuranceTypeName' },
+ { label: '银行名称', value: 'bankName' },
+ { label: '银行账号', value: 'bankNumb' },
+ { label: '保安员证号', value: 'guardNumb' },
+ { label: '档案状态', value: 'archivesStatusName' },
+ { label: '合同状态', value: 'contractStatusName' },
+ { label: '工作证', value: 'empCardStatusName' },
+ { label: '员工手册', value: 'handbookStatusName' },
+ { label: '相关证件', value: 'certificateListName' },
+ { label: '家庭成员及关系 1', value: 'family' },
+ { label: '家庭成员及关系 2', value: 'urgencyPhone' },
+ { label: '入司工龄', value: 'seniority' },
+ { label: '年假天数', value: 'annualLeave' },
+ { label: '备注', value: 'remark' }
+]
+
+export default {
+ name: 'ExportDialog',
+ props: {
+ visible: {
+ type: Boolean,
+ default: false
+ },
+ // 默认选中的字段数组（传入则自动勾选这些字段）
+ selectedFields: {
+ type: Array,
+ default: null
+ }
+ },
+ data() {
+ return {
+ isVisible: false,
+ checkAll: false,
+ isIndeterminate: false,
+ checkedCities: [],
+ cityOptions: [],
+ fieldRows: [],
+ allFields: ALL_EXPORT_FIELDS
+ }
+ },
+ watch: {
+ visible(val) {
+ this.isVisible = val
+ if (val) {
+ this.initFields()
+ }
+ },
+ isVisible(val) {
+ this.$emit('update:visible', val)
+ }
+ },
+ methods: {
+ initFields() {
+ const fieldsToUse = [...this.allFields]
+ const allValues = fieldsToUse.map(f => f.value)
+
+ if (this.selectedFields && this.selectedFields.length > 0) {
+ this.checkedCities = this.selectedFields.filter(f => allValues.includes(f))
+ } else {
+ this.checkedCities = []
+ }
+
+ const checkedCount = this.checkedCities.length
+ this.checkAll = checkedCount === allValues.length
+ this.isIndeterminate = checkedCount > 0 && checkedCount < allValues.length
+ },
+ handleCheckAllChange(val) {
+ this.checkedCities = val ? this.allFields.map(f => f.value) : []
+ this.isIndeterminate = false
+ },
+ handleCheckedCitiesChange(value) {
+ const checkedCount = value.length
+ this.checkAll = checkedCount === this.allFields.length
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.allFields.length
+ },
+
+ handleClose() {
+ this.isVisible = false
+ this.$emit('update:visible', false)
+ this.$emit('cancel')
+ },
+
+ handleConfirm() {
+ this.isVisible = false
+ this.$emit('update:visible', false)
+ this.$emit('confirm', this.checkedCities)
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.field-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 8px 16px;
+ margin-top: 16px;
+ padding: 0 10px 10px 20px; /* 与左侧全选行对齐 */
+ border-bottom: 1px dashed #ccc; /* 模仿原表格的下划线效果 */
+}
+
+.grid-item {
+ display: flex;
+ align-items: center;
+ height: 40px; /* 与原表格行高一致 */
+ border-bottom: 1px dashed #ccc; /* 每行之间保留虚线 */
+}
+
+/* 最后一个网格行取消下边框（可选） */
+.grid-item:last-child,
+.grid-item:nth-last-child(-n+3) { /* 若最后一行不足三个，可根据实际情况调整 */
+ border-bottom: none;
+}
+
+/* 调整复选框标签样式 */
+.el-checkbox {
+ /deep/ .el-checkbox__label {
+ color: #606266;
+ font-size: 14px;
+ }
+}
+</style>
diff --git a/src/views/remind/retirement.vue b/src/views/remind/retirement.vue
index 09f62a1..5cb8fce 100644
--- a/src/views/remind/retirement.vue
+++ b/src/views/remind/retirement.vue
@@ -36,12 +36,14 @@
>解骋</span>
</template>
</el-table-column>
- <el-table-column show-overflow-tooltip prop="empNumb" label="员工编号" width="120" />
+ <el-table-column show-overflow-tooltip prop="empNumb" label="员工编号" width="160" />
<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="sex" label="性别" width="100" :formatter="sexFormatter" />
<el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="160" />
<el-table-column show-overflow-tooltip prop="birthdate" label="出生日期" width="120" />
+ <el-table-column show-overflow-tooltip prop="age" label="年龄" width="120" />
</el-table>
<pagination
v-show="total>0"
@@ -142,16 +144,24 @@
<el-button @click="dialogIsShow()">取 消</el-button>
</div>
</el-dialog>
+ <!-- 通用导出对话框 -->
+ <export-dialog
+ :visible.sync="exportDialogVisible"
+ :selected-fields="exportConfig.selectedFields"
+ @confirm="handleExportConfirm"
+ />
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { dateDifference } from '@/utils/myUtil'
+import ExportDialog from '@/components/ExportEmpBase.vue'
export default {
components: {
- Pagination
+ Pagination,
+ ExportDialog
},
data() {
return {
@@ -226,6 +236,25 @@
beginDate: [{ required: true, message: '请选择合同开始日期', trigger: 'change' }],
endDate: [{ required: true, validator: this.endDate }],
remark: [{ max: 512, message: '长度不超过512个字符', trigger: 'blur' }]
+ },
+ exportDialogVisible: false,
+ // 导出配置（每个模块自定义）
+ exportConfig: {
+ // 默认选中的字段（根据模块需要配置）
+ selectedFields: [
+ 'empNumb', // 员工编号
+ 'allDeptName', // 部门（护卫点）
+ 'jobName', // 岗位
+ 'empName', // 姓名
+ 'sexName', // 性别
+ 'certificateNumb', // 身份证号码
+ 'birthdate', // 出生日期
+ 'age' // 年龄
+ ],
+ // 导出接口地址
+ exportUrl: 'hr/empBaseInfo/export/retirement',
+ // 导出文件名
+ fileName: '员工退休提醒.xls'
}
}
},
@@ -252,7 +281,6 @@
params.pageNum = this.pagination.num
params.delFlag = 0
params.empStatus = 0
-
this.$get('hr/empBaseInfo/retire/alert', {
...params
}).then((r) => {
@@ -265,6 +293,10 @@
this.sort.field = val.prop
this.sort.order = val.order
this.fetch()
+ },
+ sexFormatter(row, column, cellValue) {
+ const option = this.sexOptions.find(item => item.dicItemCode === cellValue)
+ return option ? option.dicItemName : cellValue
},
// 续签合同
goOn(row) {
@@ -385,6 +417,27 @@
})
}
})
+ },
+ // 显示导出对话框
+ showDcyg() {
+ this.exportDialogVisible = true
+ },
+ // 确认导出
+ handleExportConfirm(selectedFields) {
+ const params = { ...this.queryParams }
+ params.empStatus = '0'
+ params.exportField = selectedFields.join(',')
+
+ this.$download(
+ this.exportConfig.exportUrl,
+ { ...params },
+ this.exportConfig.fileName
+ ).then(() => {
+ this.$message({
+ message: '下载成功!',
+ type: 'success'
+ })
+ })
}
}
}
--
Gitblit v1.8.0