From 6448ec15bfe0b65fb822a662105bceddc23b58d8 Mon Sep 17 00:00:00 2001
From: yubo <autumnal_wind@yeah.net>
Date: 星期一, 06 四月 2026 21:34:44 +0800
Subject: [PATCH] feat(user): 新增员工档案管理视图组件
---
src/views/user/outemployess.vue | 284 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 193 insertions(+), 91 deletions(-)
diff --git a/src/views/user/outemployess.vue b/src/views/user/outemployess.vue
index a209710..9d402c6 100644
--- a/src/views/user/outemployess.vue
+++ b/src/views/user/outemployess.vue
@@ -7,7 +7,7 @@
<h3 class="bu-tian-jia-title">离职员工</h3>
</el-col>
<el-col :span="9" style="margin-top: 15px;">
- <el-input v-model="queryParams.vague" placeholder="请输入内容" style="width:300px" />
+ <el-input v-model="queryParams.baseKey" placeholder="请输入内容" style="width:300px" />
<span class="search-btn" @click="vagueSearch">查询</span>
<span class="sup-search-btn" @click="advancedQueryShowMethods">高级查询</span>
</el-col>
@@ -143,7 +143,7 @@
</td>
</tr>
<tr>
- <td class="td">保险类型：</td>
+ <td class="td">社保档位：</td>
<td class="td-group">
<el-checkbox-group v-model="queryParams.insuranceType" class="fj-checkbox">
<el-checkbox label="" @change="selectAllInsuranceType">全部</el-checkbox>
@@ -177,16 +177,28 @@
<td class="td-group">
<el-checkbox-group v-model="queryParams.dimissionType" class="fj-checkbox">
<el-checkbox label="" @change="selectAllDimissionType">全部</el-checkbox>
- <el-checkbox :label="1">正常离职</el-checkbox>
- <el-checkbox :label="2">自动离职</el-checkbox>
+ <el-checkbox :label="6">正常离职</el-checkbox>
+ <el-checkbox :label="4">自动离职</el-checkbox>
+ <el-checkbox :label="2">公司劝退</el-checkbox>
+ <el-checkbox :label="1">合同期满</el-checkbox>
<el-checkbox :label="3">公司辞退</el-checkbox>
- <!-- <el-checkbox-->
- <!-- v-for="data in dimissionTypeOptions"-->
- <!-- :key="data.dicItemName"-->
- <!-- :label="data.dicItemCode"-->
- <!-- >-->
- <!-- {{ data.dicItemName }}-->
- <!-- </el-checkbox>-->
+ <el-checkbox :label="5">试用期内</el-checkbox>
+ <el-checkbox :label="7">到龄退休</el-checkbox>
+ </el-checkbox-group>
+ </td>
+ </tr>
+ <tr>
+ <td class="td">相关证件：</td>
+ <td class="td-group">
+ <el-checkbox-group v-model="queryParams.certificateList" class="fj-checkbox">
+ <el-checkbox label="" @change="selectAllCertificateList">全部</el-checkbox>
+ <el-checkbox
+ v-for="data in certificateListOptions"
+ :key="data.dicItemName"
+ :label="data.dicItemCode"
+ >
+ {{ data.dicItemName }}
+ </el-checkbox>
</el-checkbox-group>
</td>
</tr>
@@ -226,6 +238,7 @@
:header-cell-style="{'height':'5.3vh','background-color':'#e6e6e6','text-align':'center'}"
:cell-style="{padding:'7px 0','text-align':'center'}"
style="width: 100%;color: #000;"
+ @sort-change="changeSort"
>
<el-table-column type="selection" width="55" />
<el-table-column label="操作" width="70">
@@ -249,37 +262,44 @@
>编辑</span> -->
</template>
</el-table-column>
- <el-table-column show-overflow-tooltip="true" prop="empNumb" label="编号" width="100" />
- <el-table-column show-overflow-tooltip="true" prop="deptName" label="部门（护卫点）" />
- <el-table-column show-overflow-tooltip="true" prop="jobName" label="岗位" width="100" />
- <el-table-column show-overflow-tooltip="true" prop="empName" label="姓名" width="100" />
- <el-table-column show-overflow-tooltip="true" prop="certificateNumb" label="身份证号码" />
- <el-table-column show-overflow-tooltip="true" prop="sex" label="性别" width="60" :formatter="sexFormat" />
- <el-table-column show-overflow-tooltip="true" prop="age" label="年龄" width="60" />
+ <el-table-column show-overflow-tooltip prop="empNumb" label="编号" width="80" sortable="custom" :sort-orders="['ascending', 'descending']" />
+ <el-table-column show-overflow-tooltip prop="allDeptName" label="部门（护卫点）" sortable="custom" :sort-orders="['ascending', 'descending']" />
+ <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="80" />
+ <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="80" sortable="custom" :sort-orders="['ascending', 'descending']" />
+ <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="160" sortable="custom" :sort-orders="['ascending', 'descending']" />
+ <el-table-column show-overflow-tooltip prop="sex" label="性别" width="50" :formatter="sexFormat" />
+ <el-table-column show-overflow-tooltip prop="age" label="年龄" width="80" sortable="custom" :sort-orders="['ascending', 'descending']" />
<el-table-column
- show-overflow-tooltip="true"
+ show-overflow-tooltip
prop="education"
label="学历"
width="60"
:formatter="educationFormat"
+ ortable="custom"
+ :sort-orders="['ascending', 'descending']"
/>
- <el-table-column show-overflow-tooltip="true" prop="nativePlaceName" label="籍贯" width="70" />
+ <el-table-column show-overflow-tooltip prop="nativePlaceName" label="籍贯" width="70" />
+ <el-table-column show-overflow-tooltip prop="telePhone" label="联系电话" width="110" />
<el-table-column
- show-overflow-tooltip="true"
+ show-overflow-tooltip
prop="empType"
label="员工类型"
width="80"
:formatter="empTypeFormat"
/>
- <el-table-column show-overflow-tooltip="true" prop="telePhone" label="联系电话" width="120" />
- <el-table-column show-overflow-tooltip="true" prop="entryDate" label="入职日期" width="130" />
- <el-table-column show-overflow-tooltip="true" prop="dimissionDate" label="离职日期" width="130" />
- <el-table-column show-overflow-tooltip="true" prop="empStatus" label="员工状态" width="80">
+ <el-table-column show-overflow-tooltip prop="entryDate" label="入职日期" width="110" sortable="custom" :sort-orders="['ascending', 'descending']" />
+ <el-table-column show-overflow-tooltip prop="dimissionDate" label="离职日期" width="110" sortable="custom" :sort-orders="['ascending', 'descending']" />
+ <el-table-column show-overflow-tooltip prop="empStatus" label="员工状态" width="80">
<template slot-scope="{row}">
{{ transEmpStatus(row.empStatus) }}
</template>
</el-table-column>
- <el-table-column prop="dimissionTypeName" label="离职类型" width="80" />
+ <el-table-column prop="dimissionType" label="离职类型" width="120" sortable="custom" :sort-orders="['ascending', 'descending']">
+ <template slot-scope="{row}">
+ {{ transEntryType(row.dimissionType) }}
+ </template>
+ </el-table-column>
+ <el-table-column show-overflow-tooltip prop="annualLeave" label="年假天数" width="110" />
</el-table>
<pagination
v-show="total>0"
@@ -406,7 +426,7 @@
<tr>
<td>入职日期</td>
<td>2020-01-02</td>
- <td>保险类型</td>
+ <td>社保档位</td>
<td>深户（五险一档）</td>
<td>社保电脑号</td>
<td />
@@ -420,9 +440,9 @@
<td>已发</td>
</tr>
<tr>
- <td>家庭成员及关系</td>
+ <td>家庭成员及关系1</td>
<td />
- <td>紧急联系电话</td>
+ <td>家庭成员及关系2</td>
<td />
<td>员工手册</td>
<td>已发</td>
@@ -885,8 +905,8 @@
</table>
<table>
<tr>
- <td colspan="8" class="tdTitle">劳资案件</td>
- <td class="link_button">新增劳资案件</td>
+ <td colspan="8" class="tdTitle">仲裁案件</td>
+ <td class="link_button">新增仲裁案件</td>
<td class="del_button">删除</td>
</tr>
<tr>
@@ -981,8 +1001,8 @@
<el-col span="24">
<el-form-item label="打开类型" prop="region">
<el-radio-group v-model="baseicInformationForm.openType">
- <el-radio :label="2">重新入职</el-radio>
- <el-radio :label="3">返聘</el-radio>
+ <el-radio :label="21">重新入职</el-radio>
+ <el-radio :label="22">返聘</el-radio>
</el-radio-group>
（主要对已退休员工返聘）
</el-form-item>
@@ -992,6 +1012,17 @@
value-format="yyyy-MM-dd"
type="date"
placeholder="选择打开日期"
+ />
+ </el-form-item>
+ <el-form-item label="部门(护卫点)" required message="请选择部门(护卫点)" prop="allDeptName">
+ <treeselect
+ v-model="baseicInformationForm.deptId"
+ :multiple="false"
+ :options="depts"
+ :clear-value-text="$t('common.clear')"
+ placeholder="请选择部门(护卫点)"
+ style="width:100%"
+ @select="DeptNameSelect"
/>
</el-form-item>
<el-form-item label="备注说明">
@@ -1038,7 +1069,7 @@
<tr>
<td>部门(护卫点)</td>
<td>
- <el-checkbox label="deptName"><span /></el-checkbox>
+ <el-checkbox label="allDeptName"><span /></el-checkbox>
</td>
<td>所属岗位</td>
<td>
@@ -1134,7 +1165,7 @@
</td>
</tr>
<tr>
- <td>家庭成员及关系</td>
+ <td>家庭成员及关系1</td>
<td>
<el-checkbox label="family"><span /></el-checkbox>
</td>
@@ -1152,7 +1183,7 @@
<td>
<el-checkbox label="entryDate"><span /></el-checkbox>
</td>
- <td>保险类型</td>
+ <td>社保档位</td>
<td>
<el-checkbox label="insuranceTypeName"><span /></el-checkbox>
</td>
@@ -1178,9 +1209,9 @@
<tr>
<td>相关证件</td>
<td>
- <el-checkbox label="certificateList"><span /></el-checkbox>
+ <el-checkbox label="certificateListName"><span /></el-checkbox>
</td>
- <td>紧急联系电话</td>
+ <td>家庭成员及关系2</td>
<td>
<el-checkbox label="urgencyPhone"><span /></el-checkbox>
</td>
@@ -1188,6 +1219,30 @@
<td>
<el-checkbox label="handbookStatusName"><span /></el-checkbox>
</td>
+ </tr>
+ <tr>
+ <td>入职类型</td>
+ <td>
+ <el-checkbox label="entryTypeName"><span /></el-checkbox>
+ </td>
+ <td>离职类型</td>
+ <td>
+ <el-checkbox label="dimissionTypeName"><span /></el-checkbox>
+ </td>
+ <td>编号</td>
+ <td>
+ <el-checkbox label="empNumb"><span /></el-checkbox>
+ </td>
+ </tr>
+ <tr>
+ <td>年假天数</td>
+ <td>
+ <el-checkbox label="annualLeave"><span /></el-checkbox>
+ </td>
+ <td />
+ <td />
+ <td />
+ <td />
</tr>
</el-checkbox-group>
</table>
@@ -1208,12 +1263,16 @@
<script>
import Pagination from '@/components/Pagination'
import ArchivesChange from './archivesChange'
+import Treeselect from '@riophae/vue-treeselect'
+import dictMixin from '../../utils/dictMixin'
export default {
components: {
+ Treeselect,
ArchivesChange,
Pagination
},
+ mixins: [dictMixin],
data() {
return {
dialog: {
@@ -1234,13 +1293,15 @@
insuranceType: [],
empStatus: [],
dimissionType: [],
- empType: []
+ empType: [],
+ certificateList: []
}, // 查询参数
sort: {}, // 排序
pagination: { // 分页参数
size: 15,
num: 1
},
+ depts: [],
headerHeight: '30px',
advancedQueryShow: false,
dialogTableVisible: false,
@@ -1257,42 +1318,45 @@
baseicInformationForm: {
openDate: new Date()
},
- educationOptions: [],
- statusOptions: [],
- ageStrOptions: [],
- insuranceTypeOptions: [],
- archivesStatusOptions: [],
- sexOptions: [],
- empTypeOptions: [],
- cityOptions: ['archivesNumb', 'deptName', 'jobName', 'empName', 'certificateNumb', 'certificateValidity', 'sexName', 'nationName', 'age', 'marriageName', 'stature', 'birthdate', 'politicsName', 'empTypeName', 'educationName', 'nativePlaceName', 'censusAddress', 'currentAddress', 'guardNumb', 'returnReceipt', 'archivesStatusName', 'bankName', 'bankNumb', 'telePhone', 'entryDate', 'insuranceTypeName', 'socialNumb', 'introducer', 'seniority', 'empCardStatus', 'certificateList', 'urgencyPhone', 'handbookStatusName', 'family', 'empStatusName', 'dimissionDate'],
+ cityOptions: ['archivesNumb', 'allDeptName', 'jobName', 'empName', 'certificateNumb', 'certificateValidity', 'sexName', 'nationName', 'age', 'marriageName', 'stature', 'birthdate', 'politicsName', 'empTypeName', 'educationName', 'nativePlaceName', 'censusAddress', 'currentAddress', 'guardNumb', 'returnReceipt', 'archivesStatusName', 'bankName', 'bankNumb', 'telePhone', 'entryDate', 'insuranceTypeName', 'socialNumb', 'introducer', 'seniority', 'empCardStatusName', 'certificateListName', 'urgencyPhone', 'handbookStatusName', 'family', 'empStatusName', 'dimissionDate', 'entryTypeName', 'dimissionTypeName', 'empNumb', 'annualLeave'],
checkedCities: []
}
},
+ computed: {
+ // 字典选项计算属性
+ educationOptions() { return this.getDictOptions('EDUCATION') },
+ statusOptions() { return this.getDictOptions('PLITICAL') },
+ ageStrOptions() { return this.getDictOptions('ageStr') },
+ insuranceTypeOptions() { return this.getDictOptions('INSURANCETYPE') },
+ archivesStatusOptions() { return this.getDictOptions('archivesStatus') },
+ sexOptions() { return this.getDictOptions('sex') },
+ empTypeOptions() { return this.getDictOptions('EMPTYPE') },
+ certificateListOptions() { return this.getDictOptions('certificateList') }
+ },
mounted() {
this.fetch()
- this.getDicts('INSURANCETYPE').then(response => {
- this.insuranceTypeOptions = response.data
- })
- this.getDicts('archivesStatus').then(response => {
- this.archivesStatusOptions = response.data
- })
- this.getDicts('EDUCATION').then(response => {
- this.educationOptions = response.data
- })
- this.getDicts('sex').then(response => {
- this.sexOptions = response.data
- })
- this.getDicts('PLITICAL').then(response => {
- this.statusOptions = response.data
- })
- this.getDicts('ageStr').then(response => {
- this.ageStrOptions = response.data
- })
- this.getDicts('EMPTYPE').then(response => {
- this.empTypeOptions = response.data
- })
+ // 字典数据已在登录时预加载，直接从 Vuex 获取
+ this.initDictTypes(['INSURANCETYPE', 'archivesStatus', 'EDUCATION', 'sex', 'PLITICAL', 'ageStr', 'EMPTYPE', 'certificateList'])
+ this.initDept()
},
methods: {
+ initDept() {
+ this.$get('system/dept').then((r) => {
+ this.depts = r.data.data.rows
+ this.deptTree = this.depts
+ }).catch((error) => {
+ console.error(error)
+ this.$message({
+ message: this.$t('tips.getDataFail'),
+ type: 'error'
+ })
+ })
+ },
+ DeptNameSelect(val) {
+ this.baseicInformationForm.deptId = val.deptId
+ this.baseicInformationForm.deptName = val.label
+ this.baseicInformationForm.allDeptName = val.allDeptName
+ },
exportExcel() {
this.queryParams.baseKey = this.queryParams.vague
var params = this.queryParams
@@ -1357,7 +1421,7 @@
},
// 翻页方法
search() {
- this.queryParams.vague = ''
+ this.queryParams.baseKey = ''
this.fetch({
...this.queryParams,
...this.sort
@@ -1379,7 +1443,7 @@
},
vagueSearch() {
this.fetch({
- baseKey: this.queryParams.vague
+ baseKey: this.queryParams.baseKey
})
},
transEmpStatus(empStatus) {
@@ -1392,6 +1456,24 @@
return '退休'
}
},
+ transEntryType(entryType) {
+ switch (entryType) {
+ case '1':
+ return '合同期满'
+ case '2':
+ return '公司劝退'
+ case '3':
+ return '公司辞退'
+ case '4':
+ return '自动离职'
+ case '5':
+ return '试用期内'
+ case '6':
+ return '正常离职'
+ case '7':
+ return '到龄退休'
+ }
+ },
transDimissionType(dimissionType) {
switch (dimissionType) {
case '1':
@@ -1399,11 +1481,11 @@
case '2':
return '自动离职'
case '3':
- return '公司劝退'
- case '4':
return '公司辞退'
- case '5':
- return '试用期内'
+ // case '4':
+ // return '公司辞退'
+ // case '5':
+ // return '试用期内'
}
},
advancedQueryShowMethods() {
@@ -1459,6 +1541,9 @@
var id = selection[0].empId
var name = selection[0].empName
var number = selection[0].certificateNumb
+ var deptName = selection[0].deptName
+ var deptId = selection[0].deptId
+ var allDeptName = selection[0].allDeptName
const nowDate = new Date()
const year = nowDate.getFullYear()
const month = nowDate.getMonth() + 1
@@ -1467,9 +1552,12 @@
empId: id,
empName: name,
certificateNumb: number,
- openType: 2,
+ openType: 21,
openDate: year + '-' + month + '-' + day,
- remark: ''
+ remark: '',
+ deptId: deptId,
+ deptName: deptName,
+ allDeptName: allDeptName
}
this.dialogShowDkda = true
} else {
@@ -1531,65 +1619,67 @@
alert('已选择部门' + names)
console.log(users)
},
+ // dic列表转为数组
+ dicListToArr(dicList) {
+ var arr = []
+ for (var i = 0; i < dicList.length; i++) {
+ var dic = dicList[i]
+ arr.push(dic.dicItemCode)
+ }
+ return arr
+ },
selectAllSex(val) {
if (val) {
- this.queryParams.sex = ['1', '2']
+ this.queryParams.sex = this.dicListToArr(this.sexOptions)
} else {
this.queryParams.sex = []
}
},
selectAllEducation(val) {
if (val) {
- this.queryParams.education = ['91', '81', '71', '61', '42', '41', '31', '21', '11', '10']
+ this.queryParams.education = this.dicListToArr(this.educationOptions)
} else {
this.queryParams.education = []
}
},
selectAllPolitics(val) {
if (val) {
- this.queryParams.politics = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13']
+ this.queryParams.politics = this.dicListToArr(this.statusOptions)
} else {
this.queryParams.politics = []
}
},
selectAllAgeStr(val) {
if (val) {
- this.queryParams.ageStr = ['18-29', '30-39', '40-49', '50-59', '60-69', '69-999']
+ this.queryParams.ageStr = this.dicListToArr(this.ageStrOptions)
} else {
this.queryParams.ageStr = []
}
},
selectAllArchivesStatus(val) {
if (val) {
- this.queryParams.archivesStatus = ['0', '1']
+ this.queryParams.archivesStatus = this.dicListToArr(this.archivesStatusOptions)
} else {
this.queryParams.archivesStatus = []
}
},
selectAllInsuranceType(val) {
if (val) {
- this.queryParams.insuranceType = ['1', '2', '3', '4', '5']
+ this.queryParams.insuranceType = this.dicListToArr(this.insuranceTypeOptions)
} else {
this.queryParams.insuranceType = []
}
},
- selectAllEmpStatus(val) {
- if (val) {
- this.queryParams.empStatus = ['0', '1', '2', '3']
- } else {
- this.queryParams.empStatus = []
- }
- },
selectAllEmpType(val) {
if (val) {
- this.queryParams.empType = ['01', '02']
+ this.queryParams.empType = this.dicListToArr(this.empTypeOptions)
} else {
this.queryParams.empType = []
}
},
selectAllDimissionType(val) {
if (val) {
- this.queryParams.dimissionType = [1, 2, 3]
+ this.queryParams.dimissionType = [1, 2, 3, 4, 5, 6]
} else {
this.queryParams.dimissionType = []
}
@@ -1602,6 +1692,13 @@
handleCheckAllChange(val) {
this.checkedCities = val ? this.cityOptions : []
this.isIndeterminate = false
+ },
+ selectAllCertificateList(val) {
+ if (val) {
+ this.queryParams.certificateList = this.dicListToArr(this.certificateListOptions)
+ } else {
+ this.queryParams.certificateList = []
+ }
},
showDcyg(operate) {
switch (operate) {
@@ -1623,6 +1720,11 @@
})
break
}
+ },
+ changeSort(val) {
+ this.sort.field = val.prop
+ this.sort.order = val.order
+ this.search()
}
}
}
--
Gitblit v1.8.0