<template>
|
<FormDialog
|
v-model="dialogFormVisible"
|
:operation-type="operationType"
|
:title="dialogTitle"
|
width="90%"
|
@close="closeDia"
|
@confirm="submitForm"
|
@cancel="closeDia"
|
>
|
<div class="form-dia-body">
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-position="top"
|
>
|
<BasicInfoSection :form="form" :operation-type="operationType" />
|
<JobInfoSection
|
:form="form"
|
:post-options="postOptions"
|
:dept-options="deptOptions"
|
/>
|
<EducationWorkSection :form="form" />
|
<EmergencyAndAttachmentSection :form="form" />
|
</el-form>
|
</div>
|
</FormDialog>
|
</template>
|
|
<script setup>
|
import {
|
ref,
|
reactive,
|
toRefs,
|
onMounted,
|
getCurrentInstance,
|
nextTick,
|
} from "vue";
|
import FormDialog from "@/components/Dialog/FormDialog.vue";
|
import { findPostOptions } from "@/api/system/post.js";
|
import { deptTreeSelect } from "@/api/system/user.js";
|
import {
|
staffOnJobInfo,
|
createStaffOnJob,
|
updateStaffOnJob,
|
} from "@/api/personnelManagement/staffOnJob.js";
|
|
import BasicInfoSection from "./BasicInfoSection.vue";
|
import JobInfoSection from "./JobInfoSection.vue";
|
import EducationWorkSection from "./EducationWorkSection.vue";
|
import EmergencyAndAttachmentSection from "./EmergencyAndAttachmentSection.vue";
|
|
const { proxy } = getCurrentInstance();
|
const emit = defineEmits(["close"]);
|
|
const dialogFormVisible = ref(false);
|
const operationType = ref("add");
|
const id = ref(0);
|
const formRef = ref(null);
|
|
const dialogTitle = () =>
|
operationType.value === "add" ? "新增入职" : "编辑人员";
|
|
const createEmptyEducation = () => ({
|
degree: "",
|
school: "",
|
admissionDate: "",
|
graduationDate: "",
|
major: "",
|
academicDegree: "",
|
});
|
|
const createEmptyWork = () => ({
|
company: "",
|
department: "",
|
position: "",
|
startDate: "",
|
endDate: "",
|
description: "",
|
});
|
|
const createEmptyEmergency = () => ({
|
name: "",
|
relation: "",
|
phone: "",
|
address: "",
|
});
|
|
const createDefaultForm = () => ({
|
id: undefined,
|
// 基本信息
|
staffNo: "",
|
staffName: "",
|
aliasName: "",
|
phone: "",
|
sex: "",
|
birthDate: "",
|
age: undefined,
|
nativePlace: "",
|
nation: "",
|
maritalStatus: "",
|
politicalStatus: "",
|
firstWorkDate: "",
|
workingYears: undefined,
|
idCardNo: "",
|
hukouType: "",
|
email: "",
|
currentAddress: "",
|
// 在职信息
|
jobNo: "",
|
staffType: "",
|
entryDate: "",
|
probationPeriod: undefined,
|
regularDate: "",
|
sysDeptId: undefined,
|
directLeader: "",
|
sysPostId: undefined,
|
jobLevel: "",
|
basicSalary: undefined,
|
// 银行卡信息
|
bankName: "",
|
bankCardNo: "",
|
// 教育经历
|
educationList: [createEmptyEducation()],
|
// 工作经历
|
workExperienceList: [createEmptyWork()],
|
// 紧急联系人
|
emergencyContacts: [createEmptyEmergency()],
|
emergencyContact: "",
|
emergencyContactPhone: "",
|
// 材料附件（仅前端展示）
|
attachments: [],
|
});
|
|
const state = reactive({
|
form: createDefaultForm(),
|
rules: {
|
staffNo: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
|
staffName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
phone: [{ required: true, message: "请输入手机", trigger: "blur" }],
|
sex: [{ required: true, message: "请选择性别", trigger: "change" }],
|
birthDate: [
|
{ required: true, message: "请选择出生日期", trigger: "change" },
|
],
|
jobNo: [{ required: true, message: "请输入工号", trigger: "blur" }],
|
staffType: [
|
{ required: true, message: "请选择员工类型", trigger: "change" },
|
],
|
entryDate: [
|
{ required: true, message: "请选择入职日期", trigger: "change" },
|
],
|
sysDeptId: [
|
{ required: true, message: "请选择部门", trigger: "change" },
|
],
|
},
|
postOptions: [],
|
deptOptions: [],
|
});
|
|
const { form, rules, postOptions, deptOptions } = toRefs(state);
|
|
const resetForm = () => {
|
Object.assign(form.value, createDefaultForm());
|
nextTick(() => {
|
formRef.value?.clearValidate();
|
});
|
};
|
|
const fetchPostOptions = () => {
|
findPostOptions().then((res) => {
|
postOptions.value = res.data || [];
|
});
|
};
|
|
const fetchDeptOptions = () => {
|
deptTreeSelect().then((response) => {
|
deptOptions.value = filterDisabledDept(
|
JSON.parse(JSON.stringify(response.data || []))
|
);
|
});
|
};
|
|
function filterDisabledDept(deptList) {
|
return deptList.filter((dept) => {
|
if (dept.disabled) {
|
return false;
|
}
|
if (dept.children && dept.children.length) {
|
dept.children = filterDisabledDept(dept.children);
|
}
|
return true;
|
});
|
}
|
|
const syncEmergencyToLegacyField = () => {
|
const first = form.value.emergencyContacts?.[0];
|
form.value.emergencyContact = first?.name || "";
|
form.value.emergencyContactPhone = first?.phone || "";
|
};
|
|
const openDialog = (type, row) => {
|
operationType.value = type;
|
dialogFormVisible.value = true;
|
fetchPostOptions();
|
fetchDeptOptions();
|
resetForm();
|
if (type === "edit" && row?.id) {
|
id.value = row.id;
|
staffOnJobInfo(id.value, {}).then((res) => {
|
const d = res.data || {};
|
Object.assign(form.value, {
|
...form.value,
|
...d,
|
});
|
if (!Array.isArray(form.value.educationList) || !form.value.educationList.length) {
|
form.value.educationList = [createEmptyEducation()];
|
}
|
if (
|
!Array.isArray(form.value.workExperienceList) ||
|
!form.value.workExperienceList.length
|
) {
|
form.value.workExperienceList = [createEmptyWork()];
|
}
|
if (
|
!Array.isArray(form.value.emergencyContacts) ||
|
!form.value.emergencyContacts.length
|
) {
|
form.value.emergencyContacts = [createEmptyEmergency()];
|
}
|
if (form.value.sysPostId === 0) {
|
form.value.sysPostId = undefined;
|
}
|
if (form.value.sysDeptId === 0) {
|
form.value.sysDeptId = undefined;
|
}
|
});
|
}
|
};
|
|
onMounted(() => {
|
fetchPostOptions();
|
fetchDeptOptions();
|
});
|
|
const submitForm = () => {
|
if (!form.value.sysPostId) {
|
form.value.sysPostId = undefined;
|
}
|
if (!form.value.sysDeptId) {
|
form.value.sysDeptId = undefined;
|
}
|
syncEmergencyToLegacyField();
|
formRef.value?.validate((valid) => {
|
if (valid) {
|
if (operationType.value === "add") {
|
createStaffOnJob(form.value).then(() => {
|
proxy.$modal.msgSuccess("提交成功");
|
closeDia();
|
});
|
} else {
|
updateStaffOnJob(id.value, form.value).then(() => {
|
proxy.$modal.msgSuccess("提交成功");
|
closeDia();
|
});
|
}
|
}
|
});
|
};
|
|
const closeDia = () => {
|
formRef.value?.resetFields();
|
dialogFormVisible.value = false;
|
emit("close");
|
};
|
|
defineExpose({
|
openDialog,
|
});
|
</script>
|
|
<style scoped>
|
.form-dia-body {
|
padding: 0;
|
}
|
|
.card-title-line {
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
|
.form-card {
|
margin-bottom: 16px;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
