<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="show
Search" label-width="68px">
<el-form-item label="职位名称" prop="postId">
<el-select
v-model="queryParams.postId"
placeholder="请选择职位名称"
clearable
filterable
style="width: 200px"
>
<el-option
v-for="post in postOptions"
:key="post.postId"
:label="post.postName"
:value="post.postId"
/>
</el-select>
</el-form-item>
<el-form-item label="发布部门" prop="deptId">
<el-select
v-model="queryParams.deptId"
placeholder="请选择发布部门"
clearable
filterable
style="width: 200px"
>
<el-option
v-for="dept in deptOptions"
:key="dept.deptId"
:label="dept.deptName"
:value="dept.deptId"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="
Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['demand:demand:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['demand:demand:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['demand:demand:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="Download"
@click="handleExport"
v-hasPermi="['demand:demand:export']"
>导出</el-button>
</el-col>
<right-toolbar v-model:show
Search="show
Search" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="demandList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="职位名称" align="center" prop="postName" />
<el-table-column label="发布部门" align="center" prop="deptName" />
<el-table-column label="招聘人数" align="center" prop="demandNumber" />
<el-table-column label="简历投递" align="center" prop="resumeCount">
<template #default="{ row }">
{{ getResumeCount(row) }}
</template>
</el-table-column>
<el-table-column label="招聘进度" align="center">
<template #default="{ row }">
<el-progress
:percentage="calculateProgress(row)"
:color="progressColor(row)"
:show-text="false"
/>
<span style="font-size: 15px">{{ calculateProgress(row) }}%</span>
<div style="font-size: 12px">
{{ getHiredCount(row) }}/{{ row.demandNumber }}
</div>
</template>
</el-table-column>
<el-table-column label="招聘状态" align="center">
<template #default="{ row }">
<el-tag :type="getDemandStatusTagType(row)">
{{ getDemandStatusText(row) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['demand:demand:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demand:demand:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改招聘管理对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="demandRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="发布部门" prop="deptId">
<el-select
v-model="form.deptId"
placeholder="请选择发布部门"
clearable
filterable
style="width: 100%"
>
<el-option
v-for="dept in deptOptions"
:key="dept.deptId"
:label="dept.deptName"
:value="dept.deptId"
/>
</el-select>
</el-form-item>
<el-form-item label="职位名称" prop="postId">
<el-select
v-model="form.postId"
placeholder="请选择职位名称"
clearable
filterable
style="width: 100%"
>
<el-option
v-for="post in postOptions"
:key="post.postId"
:label="post.postName"
:value="post.postId"
/>
</el-select>
</el-form-item>
<el-form-item label="招聘人数" prop="demandNumber">
<el-select v-model="form.demandNumber" placeholder="请选择招聘人数" style="width: 100%">
<el-option
v-for="num in 99"
:key="num"
:label="num"
:value="num"
/>
</el-select>
</el-form-item>
<el-divider content-position="center">简历信息</el-divider>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="Plus" @click="handleAddResume">添加</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" icon="Delete" @click="handleDeleteResume">删除</el-button>
</el-col>
</el-row>
<el-table :data="resumeList" :row-class-name="rowResumeIndex" @selection-change="handleResumeSelectionChange" ref="resume">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" prop="index" width="50"/>
<el-table-column label="候选人姓名" prop="candidateName" width="150">
<template #default="scope">
<el-input v-model="scope.row.candidateName" placeholder="请输入候选人姓名" />
</template>
</el-table-column>
<el-table-column label="性别" prop="gender" width="150">
<template #default="scope">
<el-select
v-model="scope.row.gender"
placeholder="请选择性别"
clearable
style="width: 100%"
>
<el-option
v-for="dict in genderOptions"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="年龄" prop="age" width="150">
<template #default="scope">
<el-select v-model="scope.row.age" placeholder="请选择年龄" style="width: 100%">
<el-option
v-for="age in 48"
:key="age + 17"
:label="age + 17"
:value="age + 17"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="学历" prop="education" width="150">
<template #default="scope">
<el-input v-model="scope.row.education" placeholder="请输入学历" />
</template>
</el-table-column>
<el-table-column label="专业" prop="major" width="150">
<template #default="scope">
<el-input v-model="scope.row.major" placeholder="请输入专业" />
</template>
</el-table-column>
<el-table-column label="毕业院校" prop="graduationSchool" width="150">
<template #default="scope">
<el-input v-model="scope.row.graduationSchool" placeholder="请输入毕业院校" />
</template>
</el-table-column>
<el-table-column label="毕业日期" prop="graduationDate" width="240">
<template #default="scope">
<el-date-picker clearable
v-model="scope.row.graduationDate"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择毕业日期">
</el-date-picker>
</template>
</el-table-column>
<el-table-column label="状态" prop="status" width="150">
<template #default="scope">
<el-select
v-model="scope.row.status"
placeholder="请选择状态"
clearable
style="width: 100%"
>
<el-option
v-for="dict in resumeStatusOptions"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</template>
</el-table-column>
</el-table>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Demand">
import { listDemand, getDemand, delDemand, addDemand, updateDemand } from "@/api/demand/demand";
import { listDept } from "@/api/system/dept";
import { listPost } from "@/api/system/post";
import { getDicts } from "@/api/system/dict/data";
const { proxy } = getCurrentInstance();
// 获取招聘状态字典
const { demand_status: demandStatusDict } = proxy.useDict('demand_status');
const demandStatusOptions = ref([]);
watchEffect(() => {
demandStatusOptions.value = demandStatusDict.value || [];
});
//获取性别字典表
const { gender: genderDict } = proxy.useDict('gender');
const resumeStatusOptions = ref([]); // 新增简历状态字典
// 获取简历状态字典
const getResumeStatusDict = async () => {
try {
const response = await getDicts('resume_status');
resumeStatusOptions.value = response.data.map(item => ({
value: item.dictValue,
label: item.dictLabel
}));
console.log('简历状态字典数据:', resumeStatusOptions.value);
} catch (error) {
console.error('获取简历状态字典失败:', error);
}
};
const genderOptions = ref([]);
watchEffect(() => {
genderOptions.value = genderDict.value || [];
console.log('性别字典数据:', genderOptions.value); // 调试用，确认数据是否加载
});
const demandList = ref([]);
const deptOptions = ref([]); // 部门下拉选项
const postOptions = ref([]);// 新增职位下拉选项
const resumeList = ref([]);
const open = ref(false);
const loading = ref(true);
const show
Search = ref(true);
const ids = ref([]);
const checkedResume = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
postId: null,
deptId: null,
demandNumber: null,
status: null,
},
rules: {
}
});
const { queryParams, form, rules } = toRefs(data);
// 获取招聘状态显示文本
const getDemandStatus = (row) => {
const progress = calculateProgress(row);
if (progress >= 100) return '2'; // 已完成
if (progress <= 0) return '0'; // 未开始
return '1'; // 招聘中
};
// 获取招聘状态显示文本
const getDemandStatusText = (row) => {
const statusValue = getDemandStatus(row);
const statusItem = demandStatusOptions.value.find(item => item.value === statusValue);
return statusItem ? statusItem.label : '未知状态';
};
// 计算已
录用人数
const getHiredCount = (row) => {
if (!row.resumes || !
Array.is
Array(row.resumes)) return 0;
return row.resumes.filter(resume => resume.status === '4').length;
};
// 计算招聘进度百分比
const calculateProgress = (row) => {
const hired = getHiredCount(row);
const total = row.demandNumber || 1; // 避免除以0
return Math.round((hired / total) * 100);
};
// 根据进度返回不同的颜色
const progressColor = (row) => {
const progress = calculateProgress(row);
if (progress >= 100) return '#67C23A'; // 绿色-已完成
if (progress >= 70) return '#409EFF'; // 蓝色-良好
if (progress >= 30) return '#E6A23C'; // 黄色-一般
return '#F56C6C'; // 红色-较差
};
/** 查询部门下拉列表 */
function getDeptOptions() {
listDept().then(response => {
deptOptions.value = response.data;
});
}
/** 查询职位下拉列表 */
function getPostOptions() {
listPost().then(response => {
console.log('职位列表响应:', response);
postOptions.value = response.rows || [];
}).catch(error => {
console.error('获取职位列表失败:', error); // 添加错误处理
});
}
/** 查询招聘管理列表 */
function getList() {
loading.value = true;
listDemand(queryParams.value).then(response => {
console.log('原始返回数据:', response.rows); // 调试用
demandList.value = response.rows.map(item => {
const dept = deptOptions.value.find(d => d.deptId === item.deptId);
const post = postOptions.value.find(p => p.postId === item.postId);
// 确保resumes数组存在，即使为空
const resumes = item.resumeList || item.resumes || [];
if (resumes === null) {
item.resumeList = [];
item.resumes = [];
}
return {
...item,
deptName: dept ? dept.deptName : '未知部门',
postName: post ? post.postName : '未知职位',
resumeList: resumes, // 确保resumeList字段存在
resumes: resumes, // 确保resumes字段存在
resumeCount: resumes.length // 直接计算数量
};
});
console.log('处理后数据:', demandList.value); // 调试用
total.value = response.total;
loading.value = false;
}).catch(error => {
console.error('获取招聘列表失败:', error);
loading.value = false;
});
}
// 新增方法：统计单个需求的简历数量
const getResumeCount = (row) => {
// 优先检查resumeList字段
if (row.resumeList &&
Array.is
Array(row.resumeList)) {
return row.resumeList.length;
}
// 其次检查resumes字段
if (row.resumes &&
Array.is
Array(row.resumes)) {
return row.resumes.length;
}
// 最后检查resumeCount字段
if (row.resumeCount !== undefined) {
return row.resumeCount;
}
return 0;
};
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
demandId: null,
postId: null,
deptId: null,
demandNumber: null,
status: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
resumeList.value = [];
proxy.resetForm("demandRef");
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.demandId);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "添加招聘管理";
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
const _demandId = row.demandId || ids.value;
getDemand(_demandId).then(response => {
const resumeListData = response.data.resumeList || response.data.resumes || [];
form.value = {
...response.data,
resumeList: resumeListData,
resumes: resumeListData,
resumeCount: resumeListData.length
};
resumeList.value = resumeListData;
open.value = true;
title.value = "修改招聘管理";
// 同步更新列表数据
const index = demandList.value.findIndex(item => item.demandId === _demandId);
if (index !== -1) {
demandList.value[index] = {
...demandList.value[index],
resumeList: [...resumeListData],
resumes: [...resumeListData],
resumeCount: resumeListData.length
};
}
});
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["demandRef"].validate(valid => {
if (valid) {
// 计算并设置招聘状态
const progress = calculateProgress({
resumes: resumeList.value,
demandNumber: form.value.demandNumber
});
form.value.status = getDemandStatus({
resumes: resumeList.value,
demandNumber: form.value.demandNumber
});
// 确保所有必要字段都有值
form.value = {
...form.value,
resumeList: resumeList.value,
resumeCount: resumeList.value.length
};
const apiCall = form.value.demandId ? updateDemand : addDemand;
apiCall(form.value).then(() => {
proxy.$modal.msgSuccess("操作成功");
open.value = false;
getList();
}).catch(error => {
console.error('操作失败:', error);
proxy.$modal.msgError("操作失败");
});
}
});
}
/** 删除按钮操作 */
function handleDelete(row) {
const _demandIds = row.demandId || ids.value;
proxy.$modal.confirm('是否确认删除招聘管理编号为"' + _demandIds + '"的数据项？').then(function() {
return delDemand(_demandIds);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
/** 简历序号 */
function rowResumeIndex({ row, rowIndex }) {
row.index = rowIndex + 1;
}
/** 简历添加按钮操作 */
function handleAddResume() {
let obj = {};
obj.candidateName = "";
obj.gender = "";
obj.age = "";
obj.education = "";
obj.major = "";
obj.graduationSchool = "";
obj.graduationDate = "";
obj.experience = "";
obj.status = "";
resumeList.value.push(obj);
updateResumeCount();
}
/** 简历删除按钮操作 */
function handleDeleteResume() {
if (checkedResume.value.length == 0) {
proxy.$modal.msgError("请先选择要删除的简历数据");
} else {
resumeList.value = resumeList.value.filter((_, index) =>
!checkedResume.value.includes(index + 1)
);
updateResumeCount();
}
}
/** 更新简历数量 */
function updateResumeCount() {
form.value.resumeCount = resumeList.value.length;
// 如果是在修改状态下，同时更新列表中的显示
if (form.value.demandId) {
const index = demandList.value.findIndex(item => item.demandId === form.value.demandId);
if (index !== -1) {
demandList.value[index].resumeCount = resumeList.value.length;
}
}
}
/** 复选框选中数据 */
function handleResumeSelectionChange(selection) {
checkedResume.value = selection.map(item => item.index)
}
// 自定义颜色
const getDemandStatusTagType = (row) => {
const statusValue = getDemandStatus(row);
switch(statusValue) {
case '0': return 'info'; // 未开始 - 信息样式(灰色)
case '1': return 'primary'; // 招聘中 - 主要样式(蓝色)
case '2': return 'success'; // 已完成 - 成功样式(绿色)
default: return '';
}
};
/** 导出按钮操作 */
function handleExport() {
proxy.download('demand/demand/export', {
...queryParams.value
}, `demand_${new Date().getTime()}.xlsx`)
}
getResumeStatusDict();
getPostOptions();
getDeptOptions();
getList();
</script>
这段代码中，招聘表和简历表为主子表，“简历投递”在页面展示有异常，不能自动更新数据，该怎么修改
扫一扫
2021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
