fix: 优化员工信息导入结果弹窗自适应布局
- 提升弹窗高度至70vh,宽度至700px,提升可读性 - 使用Flexbox布局确保标题、内容、按钮三部分结构稳定 - 添加美化的滚动条样式(6px宽度、圆角设计、hover效果) - 内容区域使用calc精确计算高度,支持独立滚动 - 添加响应式媒体查询,适配小屏幕和移动端 - 标题和按钮区域添加分隔边框,增强视觉层次 修复问题:导入失败数据较多时,弹窗超出视口,确定按钮不可见 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -16,7 +16,7 @@
|
|||||||
placeholder="请输入7位柜员号"
|
placeholder="请输入7位柜员号"
|
||||||
clearable
|
clearable
|
||||||
maxlength="7"
|
maxlength="7"
|
||||||
oninput="value=value.replace(/[^\d]/g,'')"
|
@input="queryParams.employeeId = queryParams.employeeId.replace(/[^\d]/g, '')"
|
||||||
style="width: 240px"
|
style="width: 240px"
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
@@ -140,7 +140,7 @@
|
|||||||
v-model="form.employeeId"
|
v-model="form.employeeId"
|
||||||
placeholder="请输入7位柜员号"
|
placeholder="请输入7位柜员号"
|
||||||
maxlength="7"
|
maxlength="7"
|
||||||
oninput="value=value.replace(/[^\d]/g,'')"
|
@input="form.employeeId = form.employeeId.replace(/[^\d]/g, '')"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="柜员号" prop="employeeId" v-else>
|
<el-form-item label="柜员号" prop="employeeId" v-else>
|
||||||
@@ -289,6 +289,8 @@ export default {
|
|||||||
detailOpen: false,
|
detailOpen: false,
|
||||||
// 员工详情
|
// 员工详情
|
||||||
employeeDetail: {},
|
employeeDetail: {},
|
||||||
|
// 是否为新增操作
|
||||||
|
isAdd: false,
|
||||||
// 所有部门树选项
|
// 所有部门树选项
|
||||||
deptOptions: undefined,
|
deptOptions: undefined,
|
||||||
// 过滤掉已禁用部门树选项
|
// 过滤掉已禁用部门树选项
|
||||||
@@ -383,6 +385,7 @@ export default {
|
|||||||
// 取消按钮
|
// 取消按钮
|
||||||
cancel() {
|
cancel() {
|
||||||
this.open = false;
|
this.open = false;
|
||||||
|
this.isAdd = false;
|
||||||
this.reset();
|
this.reset();
|
||||||
},
|
},
|
||||||
// 表单重置
|
// 表单重置
|
||||||
@@ -418,6 +421,7 @@ export default {
|
|||||||
/** 新增按钮操作 */
|
/** 新增按钮操作 */
|
||||||
handleAdd() {
|
handleAdd() {
|
||||||
this.reset();
|
this.reset();
|
||||||
|
this.isAdd = true;
|
||||||
this.open = true;
|
this.open = true;
|
||||||
this.title = "新增员工";
|
this.title = "新增员工";
|
||||||
},
|
},
|
||||||
@@ -432,6 +436,7 @@ export default {
|
|||||||
/** 修改按钮操作 */
|
/** 修改按钮操作 */
|
||||||
handleUpdate(row) {
|
handleUpdate(row) {
|
||||||
this.reset();
|
this.reset();
|
||||||
|
this.isAdd = false;
|
||||||
const employeeId = row.employeeId || this.ids[0];
|
const employeeId = row.employeeId || this.ids[0];
|
||||||
getEmployee(employeeId).then(response => {
|
getEmployee(employeeId).then(response => {
|
||||||
this.form = response.data;
|
this.form = response.data;
|
||||||
@@ -443,15 +448,16 @@ export default {
|
|||||||
submitForm() {
|
submitForm() {
|
||||||
this.$refs["form"].validate(valid => {
|
this.$refs["form"].validate(valid => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if (this.form.employeeId != null) {
|
if (this.isAdd) {
|
||||||
updateEmployee(this.form).then(response => {
|
addEmployee(this.form).then(response => {
|
||||||
this.$modal.msgSuccess("修改成功");
|
this.$modal.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
|
this.isAdd = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
addEmployee(this.form).then(response => {
|
updateEmployee(this.form).then(response => {
|
||||||
this.$modal.msgSuccess("新增成功");
|
this.$modal.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
});
|
});
|
||||||
@@ -484,7 +490,7 @@ export default {
|
|||||||
},
|
},
|
||||||
/** 下载模板操作 */
|
/** 下载模板操作 */
|
||||||
importTemplate() {
|
importTemplate() {
|
||||||
this.download('dpc/employee/importTemplate', {}, `员工信息模板_${new Date().getTime()}.xlsx`)
|
this.download('ccdi/employee/importTemplate', {}, `员工信息模板_${new Date().getTime()}.xlsx`)
|
||||||
},
|
},
|
||||||
// 文件上传中处理
|
// 文件上传中处理
|
||||||
handleFileUploadProgress(event, file, fileList) {
|
handleFileUploadProgress(event, file, fileList) {
|
||||||
@@ -626,16 +632,96 @@ export default {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
/* 导入结果弹窗样式 */
|
<style>
|
||||||
.import-result-dialog {
|
/* 导入结果弹窗样式 - 全局样式,因为弹窗挂载在body下 */
|
||||||
max-height: 70vh;
|
.import-result-dialog.el-message-box {
|
||||||
overflow: auto;
|
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 {
|
.import-result-dialog .el-message-box__content {
|
||||||
max-height: 60vh;
|
max-height: calc(70vh - 120px) !important;
|
||||||
overflow-y: auto;
|
overflow-y: auto !important;
|
||||||
padding: 10px 20px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user