<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">姓名：</span>
|
<el-input v-model="searchForm.staffName" style="width: 200px" placeholder="请输入姓名搜索" @change="handleQuery" clearable :prefix-icon="Search" />
|
<span style="margin-left: 10px" class="search_title">状态：</span>
|
<el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 140px" @change="handleQuery">
|
<el-option label="有效" :value="0" />
|
<el-option label="已续签" :value="1" />
|
<el-option label="已解除" :value="2" />
|
</el-select>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
|
</div>
|
<div>
|
<el-button type="primary" @click="openForm('add')">新增合同</el-button>
|
<el-button @click="handleOut">导出</el-button>
|
<el-button type="danger" plain @click="handleDelete">删除</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<PIMTable rowKey="id" :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true"
|
@selection-change="handleSelectionChange" :tableLoading="tableLoading" @pagination="pagination"
|
:total="page.total"></PIMTable>
|
</div>
|
|
<!-- 新增/编辑合同 -->
|
<el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增合同' : '编辑合同'" width="60%" @close="closeDia">
|
<el-form :model="form" label-width="120px" label-position="top" :rules="rules" ref="formRef">
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="员工姓名：" prop="staffName"><el-input v-model="form.staffName" placeholder="请输入" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="员工编号：" prop="staffNo"><el-input v-model="form.staffNo" placeholder="请输入" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="岗位：" prop="postJob"><el-input v-model="form.postJob" placeholder="请输入" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="合同年限：" prop="contractTerm"><el-input-number v-model="form.contractTerm" :min="0" :step="1" :precision="0" style="width:100%" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="签订日期：" prop="signDate"><el-date-picker v-model="form.signDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="请选择" style="width:100%" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="合同开始日期：" prop="startDate"><el-date-picker v-model="form.startDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="请选择" style="width:100%" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="合同结束日期：" prop="endDate"><el-date-picker v-model="form.endDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="请选择" style="width:100%" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24"><el-form-item label="合同内容：" prop="contractContent"><el-input v-model="form.contractContent" type="textarea" :rows="4" placeholder="请输入合同内容" /></el-form-item></el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeDia">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 续签 -->
|
<el-dialog v-model="renewVisible" title="续签合同" width="40%">
|
<el-form :model="renewForm" label-width="140px" label-position="top">
|
<el-form-item label="续签日期："><el-date-picker v-model="renewForm.renewDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="请选择" style="width:100%" /></el-form-item>
|
<el-form-item label="续签后到期日期："><el-date-picker v-model="renewForm.renewEndDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="请选择" style="width:100%" /></el-form-item>
|
<el-form-item label="合同年限："><el-input-number v-model="renewForm.contractTerm" :min="0" :step="1" :precision="0" style="width:100%" /></el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button type="primary" @click="submitRenew">确认续签</el-button>
|
<el-button @click="renewVisible = false">取消</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 解除 -->
|
<el-dialog v-model="terminateVisible" title="解除合同" width="40%">
|
<el-form :model="terminateForm" label-width="140px" label-position="top">
|
<el-form-item label="解除日期："><el-date-picker v-model="terminateForm.terminateDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="请选择" style="width:100%" /></el-form-item>
|
<el-form-item label="解除原因："><el-input v-model="terminateForm.terminateReason" type="textarea" :rows="3" placeholder="请输入解除原因" /></el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button type="primary" @click="submitTerminate">确认解除</el-button>
|
<el-button @click="terminateVisible = false">取消</el-button>
|
</template>
|
</el-dialog>
|
|
<form-dia ref="formDia" @close="handleQuery"></form-dia>
|
</div>
|
</template>
|
|
<script setup>
|
import { Search } from "@element-plus/icons-vue";
|
import { onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
|
import { ElMessageBox } from "element-plus";
|
import FormDia from "@/views/personnelManagement/contractManagement/components/formDia.vue";
|
import {
|
contractListPage, contractAdd, contractUpdate, contractDel, contractRenew, contractTerminate,
|
} from "@/api/personnelManagement/contract.js";
|
import dayjs from "dayjs";
|
|
const { proxy } = getCurrentInstance();
|
const data = reactive({ searchForm: { staffName: "", status: undefined } });
|
const { searchForm } = toRefs(data);
|
|
const statusText = (s) => (s == 0 ? "有效" : s == 1 ? "已续签" : s == 2 ? "已解除" : "");
|
const statusType = (s) => (s == 0 ? "primary" : s == 1 ? "warning" : s == 2 ? "danger" : "");
|
|
const tableColumn = ref([
|
{ label: "员工编号", prop: "staffNo" },
|
{ label: "员工姓名", prop: "staffName" },
|
{ label: "岗位", prop: "postJob" },
|
{ label: "签订日期", prop: "signDate", width: 120 },
|
{ label: "合同开始日期", prop: "startDate", width: 120 },
|
{ label: "合同结束日期", prop: "endDate", width: 120 },
|
{ label: "合同年限", prop: "contractTerm", width: 90 },
|
{ label: "合同内容", prop: "contractContent", showOverflowTooltip: true },
|
{
|
label: "状态", prop: "status", dataType: "tag",
|
formatData: (p) => statusText(p), formatType: (p) => statusType(p),
|
},
|
{ label: "续签日期", prop: "renewDate", width: 120 },
|
{ label: "解除日期", prop: "terminateDate", width: 120 },
|
{
|
dataType: "action", label: "操作", align: "center", fixed: "right", width: 200,
|
operation: [
|
{ name: "编辑", type: "text", clickFun: (row) => openForm("edit", row) },
|
{ name: "续签", type: "text", clickFun: (row) => openRenew(row) },
|
{ name: "解除", type: "text", clickFun: (row) => openTerminate(row) },
|
],
|
},
|
]);
|
|
const tableData = ref([]);
|
const selectedRows = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({ current: 1, size: 100, total: 0 });
|
const formDia = ref();
|
|
const dialogFormVisible = ref(false);
|
const operationType = ref("");
|
const formRef = ref();
|
const form = ref({});
|
const rules = {
|
staffName: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
|
signDate: [{ required: true, message: "请选择签订日期", trigger: "change" }],
|
};
|
|
const openForm = (type, row) => {
|
operationType.value = type;
|
if (type === "add") {
|
form.value = { status: 0, contractTerm: 1 };
|
} else {
|
form.value = { ...row };
|
}
|
dialogFormVisible.value = true;
|
};
|
const closeDia = () => { proxy.resetForm("formRef"); dialogFormVisible.value = false; };
|
const submitForm = () => {
|
formRef.value.validate((valid) => {
|
if (!valid) return;
|
const payload = { ...form.value };
|
const p = operationType.value === "add" ? contractAdd(payload) : contractUpdate(payload);
|
p.then(() => {
|
proxy.$modal.msgSuccess("提交成功");
|
closeDia();
|
getList();
|
});
|
});
|
};
|
|
const renewVisible = ref(false);
|
const renewForm = ref({});
|
const currentId = ref(null);
|
const openRenew = (row) => {
|
currentId.value = row.id;
|
renewForm.value = { renewDate: dayjs().format("YYYY-MM-DD"), renewEndDate: row.endDate, contractTerm: row.contractTerm };
|
renewVisible.value = true;
|
};
|
const submitRenew = () => {
|
contractRenew(currentId.value, renewForm.value).then(() => {
|
proxy.$modal.msgSuccess("续签成功");
|
renewVisible.value = false;
|
getList();
|
});
|
};
|
|
const terminateVisible = ref(false);
|
const terminateForm = ref({});
|
const openTerminate = (row) => {
|
currentId.value = row.id;
|
terminateForm.value = { terminateDate: dayjs().format("YYYY-MM-DD"), terminateReason: "" };
|
terminateVisible.value = true;
|
};
|
const submitTerminate = () => {
|
contractTerminate(currentId.value, terminateForm.value).then(() => {
|
proxy.$modal.msgSuccess("解除成功");
|
terminateVisible.value = false;
|
getList();
|
});
|
};
|
|
const handleQuery = () => { page.current = 1; getList(); };
|
const pagination = (obj) => { page.current = obj.page; page.size = obj.limit; getList(); };
|
const getList = () => {
|
tableLoading.value = true;
|
contractListPage({ ...searchForm.value, ...page }).then((res) => {
|
tableLoading.value = false;
|
tableData.value = res.data.records;
|
page.total = res.data.total;
|
}).catch(() => { tableLoading.value = false; });
|
};
|
const handleSelectionChange = (selection) => { selectedRows.value = selection; };
|
|
const handleDelete = () => {
|
if (!selectedRows.value.length) { proxy.$modal.msgWarning("请选择数据"); return; }
|
const ids = selectedRows.value.map((i) => i.id);
|
ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
|
confirmButtonText: "确认", cancelButtonText: "取消", type: "warning",
|
}).then(() => {
|
contractDel(ids).then(() => { proxy.$modal.msgSuccess("删除成功"); getList(); });
|
}).catch(() => { proxy.$modal.msg("已取消"); });
|
};
|
const handleOut = () => {
|
ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
|
confirmButtonText: "确认", cancelButtonText: "取消", type: "warning",
|
}).then(() => {
|
proxy.download("/staff/contract/export", { ...searchForm.value }, "合同管理.xlsx");
|
}).catch(() => { proxy.$modal.msg("已取消"); });
|
};
|
|
onMounted(() => { getList(); });
|
</script>
|
|
<style scoped></style>
|
