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

fix: 优化员工信息导入结果弹窗自适应布局

Browse Source 
- 提升弹窗高度至70vh，宽度至700px，提升可读性
- 使用Flexbox布局确保标题、内容、按钮三部分结构稳定
- 添加美化的滚动条样式（6px宽度、圆角设计、hover效果）
- 内容区域使用calc精确计算高度，支持独立滚动
- 添加响应式媒体查询，适配小屏幕和移动端
- 标题和按钮区域添加分隔边框，增强视觉层次

修复问题：导入失败数据较多时，弹窗超出视口，确定按钮不可见

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

116
ruoyi-ui/src/views/ccdiEmployee/index.vue
View File

@@ -16,7 +16,7 @@
placeholder="请输入7位柜员号"
clearable
maxlength="7"
oninput="value=value.replace(/[^\d]/g,'')"
@input="queryParams.employeeId = queryParams.employeeId.replace(/[^\d]/g, '')"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
@@ -140,7 +140,7 @@
v-model="form.employeeId"
placeholder="请输入7位柜员号"
maxlength="7"
oninput="value=value.replace(/[^\d]/g,'')"
@input="form.employeeId = form.employeeId.replace(/[^\d]/g, '')"
/>
</el-form-item>
<el-form-item label="柜员号" prop="employeeId" v-else>
@@ -289,6 +289,8 @@ export default {
detailOpen: false,
// 员工详情
employeeDetail: {},
// 是否为新增操作
isAdd: false,
// 所有部门树选项
deptOptions: undefined,
// 过滤掉已禁用部门树选项
@@ -383,6 +385,7 @@ export default {
// 取消按钮
cancel() {
this.open = false;
this.isAdd = false;
this.reset();
},
// 表单重置
@@ -418,6 +421,7 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.isAdd = true;
this.open = true;
this.title = "新增员工";
},
@@ -432,6 +436,7 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.isAdd = false;
const employeeId = row.employeeId || this.ids[0];
getEmployee(employeeId).then(response => {
this.form = response.data;
@@ -443,15 +448,16 @@ export default {
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.employeeId != null) {
updateEmployee(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
if (this.isAdd) {
addEmployee(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.isAdd = false;
this.getList();
});
} else {
addEmployee(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
updateEmployee(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
@@ -484,7 +490,7 @@ export default {
},
/** 下载模板操作 */
importTemplate() {
this.download('dpc/employee/importTemplate', {}, `员工信息模板_${new Date().getTime()}.xlsx`)
this.download('ccdi/employee/importTemplate', {}, `员工信息模板_${new Date().getTime()}.xlsx`)
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
@@ -626,16 +632,96 @@ export default {
font-size: 13px;
margin-right: 8px;
}
</style>
/* 导入结果弹窗样式 */
.import-result-dialog {
max-height: 70vh;
overflow: auto;
<style>
/* 导入结果弹窗样式 - 全局样式，因为弹窗挂载在body下 */
.import-result-dialog.el-message-box {
max-height: 70vh !important;
max-width: 700px !important;
width: 700px !important;
display: flex !important;
flex-direction: column !important;
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
.import-result-dialog .el-message-box__header {
flex-shrink: 0 !important;
padding: 15px 20px 10px !important;
border-bottom: 1px solid #ebeef5;
}
.import-result-dialog .el-message-box__content {
max-height: 60vh;
overflow-y: auto;
padding: 10px 20px;
max-height: calc(70vh - 120px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 15px 20px !important;
flex-shrink: 1 !important;
scrollbar-width: thin;
scrollbar-color: #c0c4cc #f5f7fa;
}
.import-result-dialog .el-message-box__content::-webkit-scrollbar {
width: 6px;
}
.import-result-dialog .el-message-box__content::-webkit-scrollbar-track {
background: #f5f7fa;
border-radius: 3px;
}
.import-result-dialog .el-message-box__content::-webkit-scrollbar-thumb {
background: #c0c4cc;
border-radius: 3px;
}
.import-result-dialog .el-message-box__content::-webkit-scrollbar-thumb:hover {
background: #909399;
}
.import-result-dialog .el-message-box__content p {
margin: 0;
padding: 0;
line-height: 1.8;
font-size: 14px;
color: #606266;
}
.import-result-dialog .el-message-box__content br {
display: block;
margin: 4px 0;
content: "";
}
.import-result-dialog .el-message-box__btns {
flex-shrink: 0 !important;
padding: 10px 20px 15px !important;
border-top: 1px solid #ebeef5;
background: #fff;
}
/* 小屏幕适配 */
@media screen and (max-height: 768px) {
.import-result-dialog.el-message-box {
max-height: 85vh !important;
max-width: 90vw !important;
width: 90vw !important;
}
.import-result-dialog .el-message-box__content {
max-height: calc(85vh - 100px) !important;
padding: 10px 15px !important;
}
}
/* 超小屏幕适配 */
@media screen and (max-width: 768px) {
.import-result-dialog.el-message-box {
max-width: 95vw !important;
width: 95vw !important;
}
}