<template>
|
<div style="background-color: #fff;height: 100%;">
|
<el-container>
|
<el-header :height="headerHeight">
|
<el-row style="margin-bottom: 10px;">
|
<el-col :span="15">
|
<h3 class="bu-tian-jia-title">合同到期提醒</h3>
|
</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="primary" class="hr-but-all" @click="handleExport">导出 EXCEL</el-button>
|
</el-col>
|
</el-row>
|
<el-table
|
ref="multipleTable"
|
:data="contractList"
|
: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 fixed="left" label="操作" width="120">
|
<template v-slot="scope">
|
<span
|
style="color: #a00515;display: inline-block;width: 40%;cursor: pointer"
|
@click="goOn(scope.row)"
|
>续签</span>
|
<span
|
style="color: #a00515;display: inline-block;width: 40%;cursor: pointer"
|
@click="discontinue(scope.row)"
|
>不续签</span>
|
</template>
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="empNumb" label="员工编号" width="120" />
|
<el-table-column show-overflow-tooltip prop="allDeptName" label="部门（护卫点）" width="320" />
|
<el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="120" />
|
<el-table-column show-overflow-tooltip prop="empName" label="姓名" width="120" />
|
<el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="160" />
|
<el-table-column show-overflow-tooltip prop="signingDate" label="合同签订日期" width="110" />
|
<el-table-column show-overflow-tooltip prop="endDate" label="合同结束日期" width="110" />
|
<el-table-column show-overflow-tooltip prop="contractPeriod" label="合同期限(年)" width="110" />
|
<el-table-column show-overflow-tooltip prop="diffDay" label="到期提醒" width="120">
|
<template v-slot="scope">
|
<span v-if="scope.row.diffDay===0">到期</span>
|
<span v-else>{{ scope.row.diffDay }}天后到期</span>
|
</template>
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="transactor" label="合同办理人" width="100" />
|
<el-table-column show-overflow-tooltip prop="remark" label="备注" />
|
</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>
|
<el-dialog title="合同信息" :visible.sync="dialogShowContract" width="50%">
|
<el-form
|
ref="contractForm"
|
:model="contractForm"
|
:rules="contractRules"
|
label-position="right"
|
label-width="120px"
|
>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="姓名" prop="empName">
|
<el-input v-model="contractForm.empName" />
|
</el-form-item>
|
<el-form-item label="身份证号码" prop="certificateNumb">
|
<el-input
|
v-model="contractForm.certificateNumb"
|
/>
|
</el-form-item>
|
<el-form-item label="性别" this-emp-base-info-form="sex">
|
<el-select v-model="contractForm.sex" placeholder="请选择性别">
|
<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="signingDate">
|
<el-date-picker
|
v-model="contractForm.signingDate"
|
value-format="yyyy-MM-dd"
|
type="date"
|
placeholder="选择日期"
|
/>
|
</el-form-item>
|
<el-form-item label="合同状态" prop="contractStatus">
|
<el-select
|
v-model="contractForm.contractStatus"
|
placeholder="请选择合同状态"
|
>
|
<el-option
|
v-for="dict in contractStatusOptions"
|
:key="dict.dicItemCode"
|
:label="dict.dicItemName"
|
:value="dict.dicItemCode"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="合同办理人" prop="transactor">
|
<el-input v-model="contractForm.transactor" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="员工编号" prop="empNumb">
|
<el-input v-model="contractForm.empNumb" />
|
</el-form-item>
|
<el-form-item label="部门(护卫点)" prop="allDeptName">
|
<el-input v-model="contractForm.allDeptName" />
|
</el-form-item>
|
<el-form-item label="岗位" prop="jobName">
|
<el-input v-model="contractForm.jobName" />
|
</el-form-item>
|
<el-form-item label="合同结束日期" prop="endDate">
|
<el-date-picker
|
v-model="contractForm.endDate"
|
value-format="yyyy-MM-dd"
|
type="date"
|
placeholder="选择日期"
|
/>
|
</el-form-item>
|
<el-form-item label="合同期限（年）" prop="contractPeriod">
|
<el-input v-model="contractForm.contractPeriod" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="contractForm.remark" type="textarea" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="putContractInfo('contractForm')">保 存</el-button>
|
<el-button @click="dialogIsShow()">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import Pagination from '@/components/Pagination'
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
import { dateDifference } from '@/utils/myUtil'
|
|
export default {
|
components: {
|
Pagination
|
},
|
data() {
|
return {
|
dialog: {
|
isVisible: false,
|
title: '',
|
type: ''
|
},
|
sort: {},
|
// 总数量
|
total: 0,
|
// 查询参数
|
queryParams: {
|
baseKey: ''
|
},
|
// 分页参数
|
pagination: {
|
size: 15,
|
num: 1
|
},
|
headerHeight: '30px',
|
// 合同列表
|
contractList: [],
|
// 合同信息
|
contractForm: {
|
contractId: '',
|
empId: '',
|
empNumb: '',
|
empName: '',
|
certificateNumb: '',
|
sex: '',
|
sexName: '',
|
deptId: '',
|
deptName: '',
|
allDeptName: '',
|
JobId: '',
|
jobName: '',
|
beginDate: '',
|
endDate: '',
|
contractStatus: '',
|
contractPeriod: '',
|
transactor: '',
|
signingDate: '',
|
remark: '',
|
createTime: '',
|
creator: '',
|
modifyTime: '',
|
modifier: '',
|
delFlag: '',
|
empStatus: 0,
|
version: '',
|
diffDay: 0
|
},
|
sexOptions: [],
|
contractStatusOptions: [],
|
dialogShowContract: false,
|
contractRules: {
|
empName: [{ required: true, message: '请选择员工', trigger: 'change' }],
|
signingDate: [{ required: true, validator: this.startDate }],
|
contractStatus: [{ required: true, message: '请选择合同状态', trigger: 'change' }],
|
transactor: [{ max: 40, message: '长度不超过40个字符', trigger: 'blur' }],
|
beginDate: [{ required: true, message: '请选择合同开始日期', trigger: 'change' }],
|
endDate: [{ required: true, validator: this.endDate }],
|
remark: [{ max: 512, message: '长度不超过512个字符', trigger: 'blur' }]
|
},
|
exportConfig: {
|
selectedFields: [
|
'empNumb', // 从 table 列提取
|
'allDeptName',
|
'jobName',
|
'empName',
|
'certificateNumb',
|
'signingDate',
|
'endDate',
|
'contractPeriod',
|
'diffDay',
|
'transactor',
|
'remark'
|
],
|
exportUrl: 'hr/empContractInfo/export',
|
fileName: '合同到期提醒.xls'
|
}
|
}
|
},
|
mounted() {
|
this.fetch()
|
this.getDicts('sex').then(response => {
|
this.sexOptions = response.data
|
})
|
this.getDicts('CONTRACTSTATUS').then(response => {
|
this.contractStatusOptions = response.data
|
})
|
},
|
methods: {
|
search() {
|
this.queryParams.baseKey = ''
|
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/empContractInfo/remind/list', {
|
...params
|
}).then((r) => {
|
const data = r.data.data
|
that.total = data.total
|
that.contractList = data.rows
|
})
|
},
|
changeSort(val) {
|
this.sort.field = val.prop
|
this.sort.order = val.order
|
this.fetch()
|
},
|
// 续签合同
|
goOn(row) {
|
this.initContractData(row)
|
this.dialogShowContract = true
|
},
|
dialogIsShow() {
|
this.dialogShowContract = false
|
},
|
// 不续签合同
|
discontinue(val) {
|
this.initContractData(val)
|
this.$post('hr/empContractInfo/remind/not', { ...this.contractForm }).then(() => {
|
this.buttonLoading = false
|
this.$message({
|
message: this.$t('tips.updateSuccess'),
|
type: 'success'
|
})
|
this.cleanContractData()
|
this.fetch()
|
})
|
},
|
// 初始化续签合同信息
|
initContractData(val) {
|
this.cleanContractData()
|
this.contractForm.contractId = val.contractId
|
this.contractForm.empId = val.empId
|
this.contractForm.empNumb = val.empNumb
|
this.contractForm.empName = val.empName
|
this.contractForm.certificateNumb = val.certificateNumb
|
this.contractForm.sex = val.sex
|
this.contractForm.deptId = val.deptId
|
this.contractForm.deptName = val.deptName
|
this.contractForm.allDeptName = val.allDeptName
|
this.contractForm.JobId = val.JobId
|
this.contractForm.jobName = val.jobName
|
this.contractForm.contractStatus = '2'
|
},
|
// 清除续签合同信息
|
cleanContractData() {
|
this.contractForm.contractId = ''
|
this.contractForm.empId = ''
|
this.contractForm.empNumb = ''
|
this.contractForm.empName = ''
|
this.contractForm.certificateNumb = ''
|
this.contractForm.sex = ''
|
this.contractForm.deptId = ''
|
this.contractForm.deptName = ''
|
this.contractForm.allDeptName = ''
|
this.contractForm.JobId = ''
|
this.contractForm.jobName = ''
|
this.contractForm.contractStatus = ''
|
this.contractForm.beginDate = ''
|
this.contractForm.endDate = ''
|
this.contractForm.contractPeriod = 0
|
this.contractForm.remark = ''
|
this.contractForm.transactor = ''
|
},
|
// 验证合同签订日期
|
startDate(rule, value, callback) {
|
// 如果结束日期没选，cb
|
if (!this.contractForm.endDate) {
|
callback()
|
} else {
|
// 结束日期有，进行判断
|
if (this.compareDate(value, this.contractForm.endDate)) {
|
// 如果起始在结束之前
|
callback()
|
} else {
|
callback(new Error('开始日期不能在结束日期之后，请重新选择'))
|
}
|
}
|
},
|
// 验证合同结束日期
|
endDate(rule, value, callback) {
|
// 如果起始日期没选，cb
|
if (!this.contractForm.signingDate) {
|
callback()
|
} else {
|
// 起始日期有，进行判断
|
if (this.compareDate(this.contractForm.signingDate, value)) {
|
// 如果起始在结束之前
|
this.contractForm.contractPeriod = dateDifference(this.contractForm.signingDate, this.contractForm.endDate, 'o')
|
callback()
|
} else {
|
callback(new Error('结束日期不能在开始始日期之前，请重新选择'))
|
}
|
}
|
},
|
compareDate(start, end) {
|
return new Date(end).getTime() > new Date(start).getTime()
|
},
|
// 续签合同提交
|
putContractInfo(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
this.$post('hr/empContractInfo/remind/continue', { ...this.contractForm }).then(() => {
|
this.buttonLoading = false
|
this.$message({
|
message: this.$t('tips.createSuccess'),
|
type: 'success'
|
})
|
|
this.cleanContractData()
|
this.fetch()
|
this.dialogIsShow()
|
})
|
}
|
})
|
},
|
// 导出合同信息
|
handleExport() {
|
const params = { ...this.queryParams }
|
params.delFlag = 0
|
params.empStatus = 0
|
params.exportField = this.exportConfig.selectedFields.join(',')
|
|
this.$download(
|
'hr/empContractInfo/export',
|
params,
|
'合同到期提醒.xls'
|
).then(() => {
|
this.$message({
|
message: '下载成功!',
|
type: 'success'
|
})
|
})
|
}
|
}
|
}
|
|
</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>
|
