<template>
|
<el-dialog
|
v-model="isShow"
|
title="续签合同"
|
width="800px"
|
@close="closeModal"
|
>
|
<el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
|
<el-form-item label="合同开始日期：" prop="contractStartTime">
|
<el-date-picker
|
v-model="form.contractStartTime"
|
type="date"
|
placeholder="请选择日期"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
clearable
|
style="width: 100%"
|
@change="calculateContractTerm"
|
/>
|
</el-form-item>
|
<el-form-item label="合同结束日期：" prop="contractEndTime">
|
<el-date-picker
|
v-model="form.contractEndTime"
|
type="date"
|
placeholder="请选择日期"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
clearable
|
style="width: 100%"
|
@change="calculateContractTerm"
|
/>
|
</el-form-item>
|
<el-form-item label="合同年限：" prop="contractTerm">
|
<el-input-number v-model="form.contractTerm" :precision="0" :step="1" style="width: 100%" :disabled="true"/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeModal">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
// 续签合同
|
import { renewContract } from "@/api/personnelManagement/staffOnJob.js";
|
import {computed, getCurrentInstance,} from "vue";
|
|
const emit = defineEmits(['update:visible', 'completed']);
|
|
const data = reactive({
|
form: {
|
contractTerm: 0,
|
contractStartTime: "",
|
contractEndTime: "",
|
},
|
rules: {
|
contractTerm: [{ required: true, message: "请输入", trigger: "blur" }],
|
contractStartTime: [{ required: true, message: "请输入", trigger: "blur" }],
|
contractEndTime: [{ required: true, message: "请输入", trigger: "blur" }],
|
}
|
});
|
const { form, rules } = toRefs(data);
|
let { proxy } = getCurrentInstance()
|
|
const props = defineProps({
|
id: {
|
type: Number,
|
default: 0,
|
},
|
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
})
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit('update:visible', val);
|
},
|
});
|
|
// 计算合同年限
|
const calculateContractTerm = () => {
|
if (form.value.contractStartTime && form.value.contractEndTime) {
|
const startDate = new Date(form.value.contractStartTime);
|
const endDate = new Date(form.value.contractEndTime);
|
|
if (endDate > startDate) {
|
// 计算年份差
|
const yearDiff = endDate.getFullYear() - startDate.getFullYear();
|
const monthDiff = endDate.getMonth() - startDate.getMonth();
|
const dayDiff = endDate.getDate() - startDate.getDate();
|
|
let years = yearDiff;
|
|
// 如果结束日期的月日小于开始日期的月日，则减去1年
|
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
|
years = yearDiff - 1;
|
}
|
|
form.value.contractTerm = Math.max(0, years);
|
} else {
|
form.value.contractTerm = 0;
|
}
|
} else {
|
form.value.contractTerm = 0;
|
}
|
};
|
|
const submitForm = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
renewContract(props.id, form.value).then(res => {
|
if (res.code === 200) {
|
proxy.$modal.msgSuccess("续签合同成功");
|
emit('completed');
|
closeModal();
|
}
|
})
|
}
|
})
|
}
|
|
// 关闭弹框
|
const closeModal = () => {
|
// 重置表单数据
|
form.value = {
|
contractTerm: 0,
|
contractStartTime: "",
|
contractEndTime: "",
|
};
|
isShow.value = false;
|
};
|
</script>
|
