<template>
|
<div style="background-color: #fff;height: 100%;">
|
<el-container>
|
<el-header :height="headerHeight">
|
<el-row style="margin-bottom: 10px;">
|
<el-col :span="3">
|
<h3 class="bu-tian-jia-title">四险一档提醒</h3>
|
</el-col>
|
<el-col :span="18" style="margin-top: 15px;">
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="80px">
|
<el-form-item label="性别" prop="sex">
|
<el-select v-model="queryParams.sex" placeholder="请选择性别" style="width:100px">
|
<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="sex">
|
<el-select v-model="queryParams.insuranceType" placeholder="请选择社保档位" style="width:180px">
|
<el-option
|
v-for="dict in searchInsuranceOptions"
|
:key="dict.dicItemCode"
|
:label="dict.dicItemName"
|
:value="dict.dicItemCode"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<span class="search-btn" @click="search">查询</span>
|
<span class="search-btn" @click="resetQuery">重置</span>
|
</el-form-item>
|
</el-form>
|
</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="danger" class="hr-but-all" @click="showDcyg(0)">导出EXCEL</el-button>
|
</el-col>
|
</el-row>
|
<el-table
|
ref="multipleTable"
|
:data="tableData"
|
: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
|
prop="empNumb"
|
label="编号"
|
width="120"
|
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="100"
|
sortable="custom"
|
:sort-orders="['ascending', 'descending']"
|
/>
|
<el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="160" />
|
<el-table-column show-overflow-tooltip prop="sex" label="性别" width="60" :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
|
prop="education"
|
label="学历"
|
width="80"
|
:formatter="educationFormat"
|
sortable="custom"
|
:sort-orders="['ascending', 'descending']"
|
/>
|
<el-table-column
|
show-overflow-tooltip
|
prop="nativePlace"
|
label="籍贯"
|
width="150"
|
:formatter="nativePlaceFormat"
|
/>
|
<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"
|
label="社保档位"
|
width="240"
|
sortable="custom"
|
:sort-orders="['ascending', 'descending']"
|
/>
|
</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>
|
<!-- 通用导出对话框 -->
|
<export-dialog
|
:visible.sync="exportDialogVisible"
|
:selected-fields="exportConfig.selectedFields"
|
@confirm="handleExportConfirm"
|
/>
|
</div>
|
</template>
|
<script>
|
|
import { getToken } from '@/utils/auth'
|
import Pagination from '@/components/Pagination'
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
import { calculateSeniority, toCardGetUserInfo } from '@/utils/myUtil'
|
import ExportDialog from '@/components/ExportEmpBase.vue'
|
|
export default {
|
components: {
|
Pagination,
|
ExportDialog
|
},
|
data() {
|
return {
|
dialog: {
|
isVisible: false,
|
title: '',
|
type: ''
|
},
|
total: 0, // 总数量
|
queryParams: {
|
baseKey: '',
|
insuranceType: '',
|
sex: ''
|
}, // 查询参数
|
sort: {}, // 排序
|
pagination: { // 分页参数
|
size: 15,
|
num: 1
|
},
|
headerHeight: '30px',
|
dialogTableVisible: false,
|
exportDialogVisible: false,
|
exportUrl: '',
|
// 导出配置
|
exportConfig: {
|
selectedFields: [
|
'empNumb', // 编号
|
'allDeptName', // 部门（护卫点）
|
'jobName', // 岗位
|
'empName', // 姓名
|
'certificateNumb', // 身份证号码
|
'sexName', // 性别
|
'age', // 年龄
|
'educationName', // 学历
|
'nativePlaceName', // 籍贯
|
'telePhone', // 联系电话
|
'empTypeName', // 员工类型
|
'insuranceTypeName' // 社保档位
|
],
|
exportUrl: 'hr/empBaseInfo/export/insurance',
|
fileName: '社保四险员工列表.xls'
|
},
|
tableData: [],
|
sexOptions: [],
|
empStatusOptions: [],
|
insuranceTypeOptions: [],
|
searchInsuranceOptions: [{
|
'dicItemName': '（非深户）四险一档',
|
'dicItemCode': '7'
|
}, {
|
'dicItemName': '（非深户）四险二档',
|
'dicItemCode': '6'
|
}]
|
}
|
},
|
mounted() {
|
this.fetch()
|
this.initDept()
|
this.getDicts('ageStr').then(response => {
|
this.ageStrOptions = response.data
|
})
|
this.getDicts('PLITICAL').then(response => {
|
this.statusOptions = response.data
|
})
|
this.getDicts('sex').then(response => {
|
this.sexOptions = response.data
|
})
|
this.getDicts('empStatus').then(response => {
|
this.empStatusOptions = response.data
|
})
|
this.getDicts('empType').then(response => {
|
this.empTypeOptions = response.data
|
})
|
this.getDicts('NATION').then(response => {
|
this.nationOptions = response.data
|
})
|
this.getDicts('MARRIAGE').then(response => {
|
this.marriageOptions = response.data
|
})
|
this.getDicts('EDUCATION').then(response => {
|
this.educationOptions = response.data
|
})
|
this.getDicts('NATIVEPLACE').then(response => {
|
this.nativePlaceOptions = response.data
|
})
|
this.getDicts('archivesStatus').then(response => {
|
this.archivesStatusOptions = response.data
|
})
|
this.getDicts('INSURANCETYPE').then(response => {
|
this.insuranceTypeOptions = response.data
|
})
|
this.getDicts('empCardStatus').then(response => {
|
this.empCardStatusOptions = response.data
|
})
|
this.getDicts('handbookStatus').then(response => {
|
this.handbookStatusOptions = response.data
|
})
|
this.getDicts('certificateList').then(response => {
|
this.certificateListOptions = response.data
|
})
|
this.getDicts('PHYSICALEXAMTYPE').then(response => {
|
this.physicalExamTypeOptions = response.data
|
})
|
this.getDicts('ECG').then(response => {
|
this.ecgOptions = response.data
|
})
|
this.getDicts('CONTRACTSTATUS').then(response => {
|
this.contractStatusOptions = response.data
|
})
|
this.getDicts('LEAVETYPE').then(response => {
|
this.leaveTypeOptions = response.data
|
})
|
this.getDicts('applayStatus').then(response => {
|
this.applayStatusOptions = response.data
|
})
|
this.getDicts('reportStatus').then(response => {
|
this.reportStatusOptions = response.data
|
})
|
this.getDicts('hospitalizatioFlag').then(response => {
|
this.hospitalizatioFlagOptions = response.data
|
})
|
this.getDicts('settleStatus').then(response => {
|
this.settleStatusOptions = response.data
|
})
|
this.getDicts('ZCTYPE').then(response => {
|
this.arbitrationTypeOptions = response.data
|
})
|
this.getDicts('changeType').then(response => {
|
this.changeTypeOptions = response.data
|
})
|
this.getDicts('LZTYPE').then(response => {
|
this.dimissionTypeOptions = response.data
|
})
|
// this.initJob()
|
},
|
methods: {
|
// 翻页方法
|
search() {
|
this.queryParams.baseKey = ''
|
this.fetch({
|
...this.queryParams,
|
...this.sort
|
})
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.queryParams.baseKey = ''
|
this.queryParams.sex = ''
|
this.queryParams.insuranceType = ''
|
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/insurance/alert', {
|
...params
|
}).then((r) => {
|
const data = r.data.data
|
that.total = data.total
|
that.tableData = data.rows
|
})
|
},
|
typeFormat(row, column) {
|
return this.selectDictLabel(this.physicalExamTypeOptions, row.physicalExamType)
|
},
|
empTypeFormat(row, column) {
|
return this.selectDictLabel(this.empTypeOptions, row.empType)
|
},
|
sexFormat(row, column) {
|
return this.selectDictLabel(this.sexOptions, row.sex)
|
},
|
educationFormat(row, column) {
|
return this.selectDictLabel(this.educationOptions, row.education)
|
},
|
nativePlaceFormat(row, column) {
|
return this.selectDictLabel(this.nativePlaceOptions, row.nativePlace)
|
},
|
insuranceTypeFormat(row, column) {
|
return this.selectDictLabel(this.insuranceTypeOptions, row.insuranceType)
|
},
|
ecgNameFormat(row, column) {
|
return this.selectDictLabel(this.ecgOptions, row.ecg)
|
},
|
contractStatusFormat(row, column) {
|
return this.selectDictLabel(this.contractStatusOptions, row.contractStatus)
|
},
|
changeTypeFormat(row, column) {
|
return this.selectDictLabel(this.changeTypeOptions, row.changeType)
|
},
|
leaveTypeFormat(row, column) {
|
return this.selectDictLabel(this.leaveTypeOptions, row.leaveType)
|
},
|
dimissionTypeFormat(row, column) {
|
return this.selectDictLabel(this.dimissionTypeOptions, row.dimissionType)
|
},
|
reportStatusFormat(row, column) {
|
return this.selectDictLabel(this.reportStatusOptions, row.reportStatus)
|
},
|
applayStatusFormat(row, column) {
|
return this.selectDictLabel(this.applayStatusOptions, row.applayStatus)
|
},
|
hospitalizatioFlagFormat(row, column) {
|
return this.selectDictLabel(this.hospitalizatioFlagOptions, row.hospitalizatioFlag)
|
},
|
arbitrationTypeFormat(row, column) {
|
return this.selectDictLabel(this.arbitrationTypeOptions, row.arbitrationType)
|
},
|
arbitrationStatusFormat(row, column) {
|
return this.selectDictLabel(this.settleStatusOptions, row.arbitrationStatus)
|
},
|
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'
|
})
|
})
|
},
|
calculateSeniority(val) {
|
this.empBaseInfoForm.seniority = calculateSeniority(val)
|
},
|
// 获取图片的Blob值
|
getImageBlob(url, cb) {
|
var xhr = new XMLHttpRequest()
|
xhr.open('get', url, true)
|
xhr.responseType = 'blob'
|
xhr.onload = function() {
|
if (this.status === 200) {
|
if (cb) cb(this.response)
|
}
|
}
|
xhr.send()
|
},
|
preView(url) {
|
var this_ = this
|
const reader = new FileReader()
|
this.getImageBlob(url, function(blob) {
|
reader.readAsDataURL(blob)
|
})
|
reader.onload = function(e) {
|
// 获取 bolb 里面数据时，生成预览
|
var img = document.createElement('img')
|
img.src = e.target.result
|
this_.empBaseInfoForm.imagePath = e.target.result
|
}
|
},
|
// 显示导出对话框
|
showDcyg(operate) {
|
switch (operate) {
|
case 0:
|
this.exportDialogVisible = true
|
break
|
}
|
},
|
// 确认导出
|
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'
|
})
|
})
|
},
|
editSuccess() {
|
this.search()
|
},
|
querySearch(queryString, cb) {
|
var restaurants = this.restaurants
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
|
// 调用 callback 返回建议列表的数据
|
cb(results)
|
},
|
createFilter(queryString) {
|
return (restaurant) => {
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
|
}
|
},
|
placeNameSelect(item) {
|
this.empBaseInfoForm.nativePlaceName = item.value
|
this.empBaseInfoForm.nativePlace = item.code
|
},
|
querySearchJob(queryString, cb) {
|
const restaurants = this.restaurJob
|
const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
|
// 调用 callback 返回建议列表的数据
|
cb(results)
|
},
|
jobNameSelect(item) {
|
this.empBaseInfoForm.jobName = item.value
|
this.empBaseInfoForm.JobId = item.code
|
|
this.ygdgForm.newJobName = item.value
|
this.ygdgForm.jobId = item.code
|
}, empDeptNameSelect(val) {
|
this.empBaseInfoForm.deptId = val.id
|
this.empBaseInfoForm.deptName = val.label
|
this.empBaseInfoForm.allDeptName = val.allDeptName
|
},
|
generateUserInfo(index, val) {
|
var userinfo = toCardGetUserInfo(val)
|
if (userinfo === null) {
|
return
|
}
|
this.empBaseInfoForm.age = userinfo.age
|
this.empBaseInfoForm.birthdate = userinfo.birth
|
this.empBaseInfoForm.sex = userinfo.sex
|
},
|
headers() {
|
const token = getToken()
|
if (token) {
|
return {
|
Authorization: 'bearer ' + token
|
}
|
} else {
|
return null
|
}
|
},
|
changeSort(val) {
|
this.sort.field = val.prop
|
this.sort.order = val.order
|
this.search()
|
}
|
}
|
}
|
</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>
|
