wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 添加员工信息导入结果弹窗自适应优化设计文档

Browse Source 
- 分析现有问题：弹窗内容过多时超出视口
- 设计固定高度+内容可滚动的Flexbox布局方案
- 提供完整的CSS样式和响应式设计
- 包含实施计划、验收标准和技术要点

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
wkc
2026-02-05 16:09:40 +08:00
parent bed3ab5ed8
commit 1e691f9697
23 changed files with 2890 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

623
ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue Normal file
View File

@@ -0,0 +1,623 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="招聘项目名称" prop="recruitName">
<el-input
v-model="queryParams.recruitName"
placeholder="请输入招聘项目名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="职位名称" prop="posName">
<el-input
v-model="queryParams.posName"
placeholder="请输入职位名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="候选人姓名" prop="candName">
<el-input
v-model="queryParams.candName"
placeholder="请输入候选人姓名"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="证件号码" prop="candId">
<el-input
v-model="queryParams.candId"
placeholder="请输入证件号码"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="录用情况" prop="admitStatus">
<el-select v-model="queryParams.admitStatus" placeholder="请选择录用情况" clearable style="width: 240px">
<el-option label="录用" value="录用" />
<el-option label="未录用" value="未录用" />
<el-option label="放弃" value="放弃" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['ccdi:staffRecruitment:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['ccdi:staffRecruitment:import']"
>导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['ccdi:staffRecruitment:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="recruitmentList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="招聘项目编号" align="center" prop="recruitId" width="150" :show-overflow-tooltip="true"/>
<el-table-column label="招聘项目名称" align="center" prop="recruitName" :show-overflow-tooltip="true"/>
<el-table-column label="职位名称" align="center" prop="posName" :show-overflow-tooltip="true"/>
<el-table-column label="候选人姓名" align="center" prop="candName" width="120"/>
<el-table-column label="证件号码" align="center" prop="candId" width="180"/>
<el-table-column label="毕业院校" align="center" prop="candSchool" :show-overflow-tooltip="true"/>
<el-table-column label="专业" align="center" prop="candMajor" :show-overflow-tooltip="true"/>
<el-table-column label="录用情况" align="center" prop="admitStatus" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.admitStatus === '录用'" type="success" size="small">录用</el-tag>
<el-tag v-else-if="scope.row.admitStatus === '未录用'" type="info" size="small">未录用</el-tag>
<el-tag v-else type="warning" size="small">放弃</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
v-hasPermi="['ccdi:staffRecruitment:query']"
>详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['ccdi:staffRecruitment:edit']"
>编辑</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['ccdi:staffRecruitment:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改对话框 -->
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-divider content-position="left">招聘项目信息</el-divider>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="招聘项目编号" prop="recruitId">
<el-input v-model="form.recruitId" placeholder="请输入招聘项目编号" maxlength="32" :disabled="!isAdd" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="招聘项目名称" prop="recruitName">
<el-input v-model="form.recruitName" placeholder="请输入招聘项目名称" maxlength="100" />
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left">职位信息</el-divider>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="职位名称" prop="posName">
<el-input v-model="form.posName" placeholder="请输入职位名称" maxlength="100" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职位类别" prop="posCategory">
<el-input v-model="form.posCategory" placeholder="请输入职位类别" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="职位描述" prop="posDesc">
<el-input v-model="form.posDesc" type="textarea" :rows="3" placeholder="请输入职位描述" />
</el-form-item>
<el-divider content-position="left">候选人信息</el-divider>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="候选人姓名" prop="candName">
<el-input v-model="form.candName" placeholder="请输入候选人姓名" maxlength="20" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学历" prop="candEdu">
<el-input v-model="form.candEdu" placeholder="请输入学历" maxlength="20" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="证件号码" prop="candId">
<el-input v-model="form.candId" placeholder="请输入18位证件号码" maxlength="18" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="毕业年月" prop="candGrad">
<el-input v-model="form.candGrad" placeholder="格式:YYYYMM" maxlength="6" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="毕业院校" prop="candSchool">
<el-input v-model="form.candSchool" placeholder="请输入毕业院校" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业" prop="candMajor">
<el-input v-model="form.candMajor" placeholder="请输入专业" maxlength="30" />
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left">录用信息</el-divider>
<el-form-item label="录用情况" prop="admitStatus">
<el-radio-group v-model="form.admitStatus">
<el-radio label="录用">录用</el-radio>
<el-radio label="未录用">未录用</el-radio>
<el-radio label="放弃">放弃</el-radio>
</el-radio-group>
</el-form-item>
<el-divider content-position="left">面试官信息</el-divider>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="面试官1姓名">
<el-input v-model="form.interviewerName1" placeholder="请输入面试官1姓名" maxlength="20" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="面试官1工号">
<el-input v-model="form.interviewerId1" placeholder="请输入面试官1工号" maxlength="10" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="面试官2姓名">
<el-input v-model="form.interviewerName2" placeholder="请输入面试官2姓名" maxlength="20" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="面试官2工号">
<el-input v-model="form.interviewerId2" placeholder="请输入面试官2工号" maxlength="10" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</el-dialog>
<!-- 详情对话框 -->
<el-dialog title="招聘信息详情" :visible.sync="detailOpen" width="900px" append-to-body>
<div class="detail-container">
<el-divider content-position="left">招聘项目信息</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label="招聘项目编号">{{ recruitmentDetail.recruitId || '-' }}</el-descriptions-item>
<el-descriptions-item label="招聘项目名称">{{ recruitmentDetail.recruitName || '-' }}</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">职位信息</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label="职位名称">{{ recruitmentDetail.posName || '-' }}</el-descriptions-item>
<el-descriptions-item label="职位类别">{{ recruitmentDetail.posCategory || '-' }}</el-descriptions-item>
<el-descriptions-item label="职位描述" :span="2">{{ recruitmentDetail.posDesc || '-' }}</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">候选人信息</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label="候选人姓名">{{ recruitmentDetail.candName || '-' }}</el-descriptions-item>
<el-descriptions-item label="学历">{{ recruitmentDetail.candEdu || '-' }}</el-descriptions-item>
<el-descriptions-item label="证件号码">{{ recruitmentDetail.candId || '-' }}</el-descriptions-item>
<el-descriptions-item label="毕业年月">{{ recruitmentDetail.candGrad || '-' }}</el-descriptions-item>
<el-descriptions-item label="毕业院校">{{ recruitmentDetail.candSchool || '-' }}</el-descriptions-item>
<el-descriptions-item label="专业">{{ recruitmentDetail.candMajor || '-' }}</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">录用信息</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label="录用情况">
<el-tag v-if="recruitmentDetail.admitStatus === '录用'" type="success" size="small">录用</el-tag>
<el-tag v-else-if="recruitmentDetail.admitStatus === '未录用'" type="info" size="small">未录用</el-tag>
<el-tag v-else type="warning" size="small">放弃</el-tag>
</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">面试官信息</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label="面试官1">{{ recruitmentDetail.interviewerName1 || '-' }} ({{ recruitmentDetail.interviewerId1 || '-' }})</el-descriptions-item>
<el-descriptions-item label="面试官2">{{ recruitmentDetail.interviewerName2 || '-' }} ({{ recruitmentDetail.interviewerId2 || '-' }})</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ recruitmentDetail.createTime ? parseTime(recruitmentDetail.createTime) : '-' }}
</el-descriptions-item>
<el-descriptions-item label="创建人">{{ recruitmentDetail.createdBy || '-' }}</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ recruitmentDetail.updateTime ? parseTime(recruitmentDetail.updateTime) : '-' }}
</el-descriptions-item>
<el-descriptions-item label="更新人">{{ recruitmentDetail.updatedBy || '-' }}</el-descriptions-item>
</el-descriptions>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="detailOpen = false" icon="el-icon-close">关 闭</el-button>
</div>
</el-dialog>
<!-- 导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="handleImportDialogClose" v-loading="upload.isUploading" element-loading-text="正在导入数据,请稍候..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.7)">
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的招聘信息数据
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
</div>
<div class="el-upload__tip" slot="tip">
<span>仅允许导入"xls"或"xlsx"格式文件。</span>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm" :loading="upload.isUploading">确 定</el-button>
<el-button @click="upload.open = false" :disabled="upload.isUploading">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { addStaffRecruitment, delStaffRecruitment, getStaffRecruitment, listStaffRecruitment, updateStaffRecruitment, importTemplate } from "@/api/ccdiStaffRecruitment";
import { getToken } from "@/utils/auth";
// 身份证号校验正则
const idCardPattern = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
// 毕业年月校验正则 (YYYYMM)
const gradPattern = /^((19|20)\d{2})(0[1-9]|1[0-2])$/;
export default {
name: "StaffRecruitment",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 招聘信息表格数据
recruitmentList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否显示详情弹出层
detailOpen: false,
// 招聘信息详情
recruitmentDetail: {},
// 是否为新增操作
isAdd: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
recruitName: null,
posName: null,
candName: null,
candId: null,
admitStatus: null,
interviewerName: null,
interviewerId: null
},
// 表单参数
form: {},
// 表单校验
rules: {
recruitId: [
{ required: true, message: "招聘项目编号不能为空", trigger: "blur" },
{ max: 32, message: "招聘项目编号长度不能超过32个字符", trigger: "blur" }
],
recruitName: [
{ required: true, message: "招聘项目名称不能为空", trigger: "blur" },
{ max: 100, message: "招聘项目名称长度不能超过100个字符", trigger: "blur" }
],
posName: [
{ required: true, message: "职位名称不能为空", trigger: "blur" },
{ max: 100, message: "职位名称长度不能超过100个字符", trigger: "blur" }
],
posCategory: [
{ required: true, message: "职位类别不能为空", trigger: "blur" },
{ max: 50, message: "职位类别长度不能超过50个字符", trigger: "blur" }
],
posDesc: [
{ required: true, message: "职位描述不能为空", trigger: "blur" }
],
candName: [
{ required: true, message: "候选人姓名不能为空", trigger: "blur" },
{ max: 20, message: "候选人姓名长度不能超过20个字符", trigger: "blur" }
],
candEdu: [
{ required: true, message: "学历不能为空", trigger: "blur" },
{ max: 20, message: "学历长度不能超过20个字符", trigger: "blur" }
],
candId: [
{ required: true, message: "证件号码不能为空", trigger: "blur" },
{ pattern: idCardPattern, message: "请输入正确的18位身份证号", trigger: "blur" }
],
candSchool: [
{ required: true, message: "毕业院校不能为空", trigger: "blur" },
{ max: 50, message: "毕业院校长度不能超过50个字符", trigger: "blur" }
],
candMajor: [
{ required: true, message: "专业不能为空", trigger: "blur" },
{ max: 30, message: "专业长度不能超过30个字符", trigger: "blur" }
],
candGrad: [
{ required: true, message: "毕业年月不能为空", trigger: "blur" },
{ pattern: gradPattern, message: "毕业年月格式不正确,应为YYYYMM", trigger: "blur" }
],
admitStatus: [
{ required: true, message: "请选择录用情况", trigger: "change" }
]
},
// 导入参数
upload: {
// 是否显示弹出层
open: false,
// 弹出层标题
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/ccdi/staffRecruitment/importData"
}
};
},
created() {
this.getList();
},
methods: {
/** 查询招聘信息列表 */
getList() {
this.loading = true;
listStaffRecruitment(this.queryParams).then(response => {
this.recruitmentList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
recruitId: null,
recruitName: null,
posName: null,
posCategory: null,
posDesc: null,
candName: null,
candEdu: null,
candId: null,
candSchool: null,
candMajor: null,
candGrad: null,
admitStatus: "录用",
interviewerName1: null,
interviewerId1: null,
interviewerName2: null,
interviewerId2: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 多选框选中数据 */
handleSelectionChange(selection) {
this.ids = selection.map(item => item.recruitId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加招聘信息";
this.isAdd = true;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const recruitId = row.recruitId || this.ids[0];
getStaffRecruitment(recruitId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改招聘信息";
this.isAdd = false;
});
},
/** 详情按钮操作 */
handleDetail(row) {
const recruitId = row.recruitId;
getStaffRecruitment(recruitId).then(response => {
this.recruitmentDetail = response.data;
this.detailOpen = true;
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.isAdd) {
addStaffRecruitment(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
} else {
updateStaffRecruitment(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const recruitIds = row.recruitId || this.ids;
this.$modal.confirm('是否确认删除招聘信息编号为"' + recruitIds + '"的数据项？').then(function() {
return delStaffRecruitment(recruitIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('ccdi/staffRecruitment/export', {
...this.queryParams
}, `招聘信息_${new Date().getTime()}.xlsx`);
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "招聘信息数据导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download('ccdi/staffRecruitment/importTemplate', {}, `招聘信息导入模板_${new Date().getTime()}.xlsx`);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.isUploading = false;
if (response.code === 200) {
this.$modal.msgSuccess(response.msg);
this.upload.open = false;
this.getList();
} else {
this.$modal.msgError(response.msg);
}
this.$refs.upload.clearFiles();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
// 关闭导入对话框
handleImportDialogClose() {
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
}
}
};
</script>
<style scoped>
.detail-container {
padding: 0 20px;
}
.el-divider {
margin: 16px 0;
}
</style>