<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">姓名：</span>
|
<el-input
|
v-model="searchForm.staffName"
|
style="width: 240px"
|
placeholder="请输入姓名搜索"
|
@change="handleQuery"
|
clearable
|
:prefix-icon="Search"
|
/>
|
<span style="margin-left: 10px" class="search_title">合同结束日期：</span>
|
<el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
|
placeholder="请选择" clearable @change="changeDaterange" />
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px"
|
>搜索</el-button
|
>
|
</div>
|
<div>
|
<el-button type="primary" @click="openEdit('add')">新增员工</el-button>
|
<el-button @click="handleOut">导出</el-button>
|
</div>
|
</div>
|
<div class="stat_bar">
|
<span>在职人数：<b>{{ stats.onJobCount }}</b></span>
|
<span style="margin-left: 24px">薪资合计：<b>{{ stats.salaryTotal }}</b></span>
|
</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="editVisible" :title="editType === 'add' ? '新增在职员工' : '编辑在职员工'" width="60%" @close="closeEdit">
|
<el-form :model="editForm" label-width="120px" label-position="top" :rules="editRules" ref="editFormRef">
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="姓名：" prop="staffName"><el-input v-model="editForm.staffName" placeholder="请输入" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="员工编号：" prop="staffNo"><el-input v-model="editForm.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="editForm.postJob" placeholder="请输入" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="联系电话：" prop="phone"><el-input v-model="editForm.phone" placeholder="请输入" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="入职时间：" prop="entryDate"><el-date-picker v-model="editForm.entryDate" 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="salary"><el-input-number v-model="editForm.salary" :min="0" :precision="2" :step="100" style="width:100%" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="合同年限：" prop="contractTerm"><el-input v-model="editForm.contractTerm" placeholder="请输入" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="合同结束日期：" prop="contractExpireTime"><el-date-picker v-model="editForm.contractExpireTime" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="请选择" style="width:100%" /></el-form-item></el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitEdit">确认</el-button>
|
<el-button @click="editVisible = false">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<form-dia ref="formDia" @close="handleQuery"></form-dia>
|
</div>
|
</template>
|
|
<script setup>
|
import { Search } from "@element-plus/icons-vue";
|
import { onMounted, reactive, ref, toRefs, getCurrentInstance, nextTick } from "vue";
|
import FormDia from "@/views/personnelManagement/employeeRecord/components/formDia.vue";
|
import { ElMessageBox } from "element-plus";
|
import { staffOnJobListPage } from "@/api/personnelManagement/employeeRecord.js";
|
import { createStaffOnJob, updateStaffOnJob, staffOnJobStatistics } from "@/api/personnelManagement/staffOnJob.js";
|
import dayjs from "dayjs";
|
|
const { proxy } = getCurrentInstance();
|
const data = reactive({
|
searchForm: {
|
staffName: "",
|
entryDate: [
|
dayjs().format("YYYY-MM-DD"),
|
dayjs().add(1, "day").format("YYYY-MM-DD"),
|
],
|
entryDateStart: dayjs().format("YYYY-MM-DD"),
|
entryDateEnd: dayjs().add(1, "day").format("YYYY-MM-DD"),
|
},
|
});
|
const { searchForm } = toRefs(data);
|
const tableColumn = ref([
|
{
|
label: "状态",
|
prop: "staffState",
|
dataType: "tag",
|
formatData: (params) => (params == 0 ? "离职" : params == 1 ? "在职" : null),
|
formatType: (params) => (params == 0 ? "danger" : params == 1 ? "primary" : null),
|
},
|
{ label: "员工编号", prop: "staffNo" },
|
{ label: "姓名", prop: "staffName" },
|
{ label: "性别", prop: "sex" },
|
{ label: "籍贯", prop: "nativePlace" },
|
{ label: "岗位", prop: "postJob" },
|
{ label: "入职时间", prop: "entryDate", width: 120 },
|
{ label: "薪资", prop: "salary" },
|
{ label: "家庭住址", prop: "adress", width: 200 },
|
{ label: "第一学历", prop: "firstStudy" },
|
{ label: "专业", prop: "profession", width: 100 },
|
{ label: "身份证号", prop: "identityCard", width: 200 },
|
{ label: "年龄", prop: "age" },
|
{ label: "联系电话", prop: "phone", width: 150 },
|
{ label: "合同年限", prop: "contractTerm" },
|
{ label: "合同结束日期", prop: "contractExpireTime", width: 120 },
|
{
|
dataType: "action",
|
label: "操作",
|
align: "center",
|
fixed: 'right',
|
width: 120,
|
operation: [
|
{ name: "详情", type: "text", clickFun: (row) => openForm("edit", row) },
|
{ name: "编辑", type: "text", clickFun: (row) => openEdit("edit", row) },
|
],
|
},
|
]);
|
const tableData = ref([]);
|
const selectedRows = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({ current: 1, size: 100, total: 0 });
|
const formDia = ref();
|
|
// 统计
|
const stats = reactive({ onJobCount: 0, salaryTotal: 0 });
|
const getStats = () => {
|
staffOnJobStatistics().then((res) => {
|
stats.onJobCount = res.data.onJobCount;
|
stats.salaryTotal = res.data.salaryTotal;
|
});
|
};
|
|
// 编辑/新增
|
const editVisible = ref(false);
|
const editType = ref("edit");
|
const editFormRef = ref();
|
const editForm = ref({});
|
const editRules = {
|
staffName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
staffNo: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
|
};
|
const openEdit = (type, row) => {
|
editType.value = type;
|
if (type === "add") {
|
editForm.value = { staffState: 1, salary: 0 };
|
} else {
|
editForm.value = { ...row };
|
}
|
editVisible.value = true;
|
};
|
const closeEdit = () => {
|
proxy.resetForm("editFormRef");
|
editVisible.value = false;
|
};
|
const submitEdit = () => {
|
editFormRef.value.validate((valid) => {
|
if (!valid) return;
|
const payload = { ...editForm.value };
|
if (editType.value === "add") {
|
payload.staffState = 1;
|
delete payload.id;
|
createStaffOnJob(payload).then(() => {
|
proxy.$modal.msgSuccess("新增成功");
|
closeEdit();
|
handleQuery();
|
getStats();
|
});
|
} else {
|
const id = payload.id;
|
updateStaffOnJob(id, payload).then(() => {
|
proxy.$modal.msgSuccess("保存成功");
|
closeEdit();
|
handleQuery();
|
getStats();
|
});
|
}
|
});
|
};
|
|
const changeDaterange = (value) => {
|
searchForm.value.entryDateStart = undefined;
|
searchForm.value.entryDateEnd = undefined;
|
if (value) {
|
searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
|
searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
|
}
|
getList();
|
};
|
const handleQuery = () => { page.current = 1; getList(); };
|
const pagination = (obj) => { page.current = obj.page; page.size = obj.limit; getList(); };
|
const getList = () => {
|
tableLoading.value = true;
|
const params = { ...searchForm.value, ...page };
|
params.entryDate = undefined;
|
staffOnJobListPage({ ...params, staffState: 1 }).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 openForm = (type, row) => {
|
nextTick(() => { formDia.value?.openDialog(type, row); });
|
};
|
const handleOut = () => {
|
ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
|
confirmButtonText: "确认", cancelButtonText: "取消", type: "warning",
|
}).then(() => {
|
proxy.download("/staff/staffOnJob/export", { staffState: 1 }, "在职员工台账.xlsx");
|
}).catch(() => { proxy.$modal.msg("已取消"); });
|
};
|
onMounted(() => {
|
getList();
|
getStats();
|
});
|
</script>
|
|
<style scoped>
|
.stat_bar {
|
margin: 6px 0 10px;
|
padding: 8px 12px;
|
background: #f0f1f5;
|
border-radius: 4px;
|
font-size: 14px;
|
}
|
.stat_bar b {
|
color: #409eff;
|
font-size: 16px;
|
}
|
</style>
|
