增加员工档案
This commit is contained in:
@@ -0,0 +1,428 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="isEdit ? '编辑档案' : '新建档案'"
|
||||
width="680px"
|
||||
:close-on-click-modal="false"
|
||||
@closed="resetForm"
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="关联员工" prop="employee_id">
|
||||
<!-- 编辑时员工归属不可变更，只读展示 -->
|
||||
<el-input v-if="isEdit" :value="editEmployeeLabel" disabled />
|
||||
<el-select
|
||||
v-else
|
||||
v-model="form.employee_id"
|
||||
filterable
|
||||
placeholder="选择未建档的员工"
|
||||
:loading="employeesLoading"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="emp in candidateEmployees"
|
||||
:key="emp.id"
|
||||
:label="`${emp.name}（${emp.account}）`"
|
||||
:value="Number(emp.id)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="档案编号" prop="file_no">
|
||||
<el-input v-model="form.file_no" placeholder="留空自动生成" maxlength="50" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">个人信息</el-divider>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="身份证号" prop="id_card">
|
||||
<el-input v-model="form.id_card" maxlength="30" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="政治面貌" prop="political_status">
|
||||
<el-select
|
||||
v-model="form.political_status"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
clearable
|
||||
placeholder="选择或输入"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option v-for="opt in politicalOptions" :key="opt" :label="opt" :value="opt" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="婚姻状况" prop="marital_status">
|
||||
<el-select v-model="form.marital_status" style="width: 100%">
|
||||
<el-option label="未知" :value="0" />
|
||||
<el-option label="未婚" :value="1" />
|
||||
<el-option label="已婚" :value="2" />
|
||||
<el-option label="离异" :value="3" />
|
||||
<el-option label="丧偶" :value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="籍贯" prop="native_place">
|
||||
<el-input v-model="form.native_place" maxlength="100" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="户籍地址" prop="household_address">
|
||||
<el-input v-model="form.household_address" maxlength="255" />
|
||||
</el-form-item>
|
||||
<el-form-item label="现居住址" prop="current_address">
|
||||
<el-input v-model="form.current_address" maxlength="255" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工作邮箱" prop="work_email">
|
||||
<el-input v-model="form.work_email" maxlength="100" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">任职信息</el-divider>
|
||||
<el-form-item label="在职状态" prop="employment_status">
|
||||
<el-radio-group v-model="form.employment_status">
|
||||
<el-radio-button :value="1">试用</el-radio-button>
|
||||
<el-radio-button :value="2">正式</el-radio-button>
|
||||
<el-radio-button :value="3">离职</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="入职日期" prop="hire_date">
|
||||
<el-date-picker
|
||||
v-model="form.hire_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="转正日期" prop="regular_date">
|
||||
<el-date-picker
|
||||
v-model="form.regular_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="离职日期" prop="leave_date">
|
||||
<el-date-picker
|
||||
v-model="form.leave_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">证照资料</el-divider>
|
||||
<el-form-item
|
||||
v-for="cert in certFields"
|
||||
:key="cert.field"
|
||||
:label="cert.label"
|
||||
>
|
||||
<div class="upload-area">
|
||||
<el-upload
|
||||
:show-file-list="false"
|
||||
:http-request="(opt) => handleCertUpload(cert.field, opt)"
|
||||
:before-upload="beforeCertUpload"
|
||||
accept="image/*,.pdf"
|
||||
>
|
||||
<img v-if="form[cert.field]" :src="form[cert.field]" class="cert-preview" alt="" />
|
||||
<div v-else class="upload-trigger">
|
||||
<el-icon><Plus /></el-icon>
|
||||
<span>上传{{ cert.label }}</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-button
|
||||
v-if="form[cert.field]"
|
||||
link
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="form[cert.field] = ''"
|
||||
>
|
||||
移除
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">紧急联系人</el-divider>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="联系人" prop="emergency_contact">
|
||||
<el-input v-model="form.emergency_contact" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="联系电话" prop="emergency_phone">
|
||||
<el-input v-model="form.emergency_phone" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="与本人关系" prop="emergency_relation">
|
||||
<el-input v-model="form.emergency_relation" maxlength="30" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="2" maxlength="500" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { createEmployeeFile, getFiledEmployeeIds, updateEmployeeFile } from '@/api/employeeFile';
|
||||
import { oaOrganizationApi } from '@/api/organization';
|
||||
import { uploadFile } from '@/api/file';
|
||||
|
||||
/**
|
||||
* 建档 / 编辑档案弹窗。
|
||||
* 新建时员工下拉只展示未建档员工（全部员工 - 已建档ID），
|
||||
* 选项先于表单回填加载完成，避免下拉异步回显问题。
|
||||
*/
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const visible = ref(false);
|
||||
const saving = ref(false);
|
||||
const employeesLoading = ref(false);
|
||||
const formRef = ref();
|
||||
|
||||
const isEdit = ref(false);
|
||||
const editId = ref(0);
|
||||
const editEmployeeLabel = ref('');
|
||||
|
||||
const allEmployees = ref([]);
|
||||
const filedIds = ref([]);
|
||||
|
||||
const politicalOptions = ['群众', '中共党员', '中共预备党员', '共青团员', '民主党派', '无党派人士'];
|
||||
|
||||
/** 证照资料上传项：field 对应 form 字段与后端列名 */
|
||||
const certFields = [
|
||||
{ field: 'education_photo', label: '学历照片' },
|
||||
{ field: 'id_card_front', label: '身份证正面' },
|
||||
{ field: 'id_card_back', label: '身份证反面' },
|
||||
];
|
||||
|
||||
const form = reactive({
|
||||
employee_id: null,
|
||||
file_no: '',
|
||||
id_card: '',
|
||||
id_card_front: '',
|
||||
id_card_back: '',
|
||||
education_photo: '',
|
||||
political_status: '',
|
||||
marital_status: 0,
|
||||
native_place: '',
|
||||
household_address: '',
|
||||
current_address: '',
|
||||
work_email: '',
|
||||
hire_date: '',
|
||||
regular_date: '',
|
||||
leave_date: '',
|
||||
employment_status: 2,
|
||||
emergency_contact: '',
|
||||
emergency_phone: '',
|
||||
emergency_relation: '',
|
||||
remark: '',
|
||||
});
|
||||
|
||||
const rules = {
|
||||
employee_id: [{ required: true, message: '请选择员工', trigger: 'change' }],
|
||||
work_email: [
|
||||
{
|
||||
type: 'email',
|
||||
message: '邮箱格式不正确',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
/** 未建档员工 = 全部员工 - 已建档员工 */
|
||||
const candidateEmployees = computed(() => {
|
||||
const filed = new Set(filedIds.value.map(Number));
|
||||
return allEmployees.value.filter((emp) => !filed.has(Number(emp.id)));
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
form.employee_id = null;
|
||||
form.file_no = '';
|
||||
form.id_card = '';
|
||||
form.id_card_front = '';
|
||||
form.id_card_back = '';
|
||||
form.education_photo = '';
|
||||
form.political_status = '';
|
||||
form.marital_status = 0;
|
||||
form.native_place = '';
|
||||
form.household_address = '';
|
||||
form.current_address = '';
|
||||
form.work_email = '';
|
||||
form.hire_date = '';
|
||||
form.regular_date = '';
|
||||
form.leave_date = '';
|
||||
form.employment_status = 2;
|
||||
form.emergency_contact = '';
|
||||
form.emergency_phone = '';
|
||||
form.emergency_relation = '';
|
||||
form.remark = '';
|
||||
formRef.value?.clearValidate();
|
||||
};
|
||||
|
||||
/** 加载员工下拉选项：全部员工 + 已建档ID并行请求 */
|
||||
const loadEmployeeOptions = async () => {
|
||||
employeesLoading.value = true;
|
||||
try {
|
||||
const [empRes, filedRes] = await Promise.all([
|
||||
oaOrganizationApi.getEmployeeList(),
|
||||
getFiledEmployeeIds(),
|
||||
]);
|
||||
allEmployees.value = empRes?.data || empRes || [];
|
||||
filedIds.value = filedRes?.data || filedRes || [];
|
||||
} catch (error) {
|
||||
allEmployees.value = [];
|
||||
filedIds.value = [];
|
||||
ElMessage.error(error?.message || '加载员工选项失败');
|
||||
} finally {
|
||||
employeesLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 打开弹窗；file 为空表示新建，否则回填编辑 */
|
||||
const open = async (file = null) => {
|
||||
resetForm();
|
||||
isEdit.value = !!file?.id;
|
||||
editId.value = file?.id || 0;
|
||||
|
||||
if (isEdit.value) {
|
||||
// 编辑前先并行刷新选项数据，再回填表单
|
||||
await loadEmployeeOptions();
|
||||
editEmployeeLabel.value = file.employee_name
|
||||
? `${file.employee_name}（${file.employee_account || '-'}）`
|
||||
: `员工 #${file.employee_id}`;
|
||||
form.file_no = file.file_no || '';
|
||||
form.id_card = file.id_card || '';
|
||||
form.id_card_front = file.id_card_front || '';
|
||||
form.id_card_back = file.id_card_back || '';
|
||||
form.education_photo = file.education_photo || '';
|
||||
form.political_status = file.political_status || '';
|
||||
form.marital_status = Number(file.marital_status ?? 0);
|
||||
form.native_place = file.native_place || '';
|
||||
form.household_address = file.household_address || '';
|
||||
form.current_address = file.current_address || '';
|
||||
form.work_email = file.work_email || '';
|
||||
form.hire_date = file.hire_date || '';
|
||||
form.regular_date = file.regular_date || '';
|
||||
form.leave_date = file.leave_date || '';
|
||||
form.employment_status = Number(file.employment_status ?? 2);
|
||||
form.emergency_contact = file.emergency_contact || '';
|
||||
form.emergency_phone = file.emergency_phone || '';
|
||||
form.emergency_relation = file.emergency_relation || '';
|
||||
form.remark = file.remark || '';
|
||||
} else {
|
||||
await loadEmployeeOptions();
|
||||
}
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const beforeCertUpload = (file) => {
|
||||
const isImageOrPdf = file.type.startsWith('image/') || file.type === 'application/pdf';
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
if (!isImageOrPdf) ElMessage.error('仅支持图片或 PDF 格式');
|
||||
if (!isLt10M) ElMessage.error('文件大小不能超过 10MB');
|
||||
return isImageOrPdf && isLt10M;
|
||||
};
|
||||
|
||||
/** 通用证照上传：成功后写回对应表单字段 */
|
||||
const handleCertUpload = async (field, { file }) => {
|
||||
try {
|
||||
const data = new FormData();
|
||||
data.append('file', file);
|
||||
const res = await uploadFile(data);
|
||||
const url = res?.url || res?.data?.url;
|
||||
if (!url) {
|
||||
ElMessage.error(res?.msg || '上传失败');
|
||||
return;
|
||||
}
|
||||
form[field] = url;
|
||||
} catch (error) {
|
||||
ElMessage.error(error?.message || '上传失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
const valid = await formRef.value?.validate().then(() => true).catch(() => false);
|
||||
if (!valid) return;
|
||||
|
||||
const payload = { ...form };
|
||||
delete payload.employee_id;
|
||||
|
||||
saving.value = true;
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await updateEmployeeFile(editId.value, payload);
|
||||
} else {
|
||||
await createEmployeeFile({ ...payload, employee_id: form.employee_id });
|
||||
}
|
||||
ElMessage.success(isEdit.value ? '保存成功' : '建档成功');
|
||||
visible.value = false;
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
ElMessage.error(error?.message || '保存失败');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.upload-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cert-preview {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #dcdfe6;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload-trigger {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border: 1px dashed #c0ccda;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
color: #8c939d;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #3973ff;
|
||||
color: #3973ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user