fix(web-admin): 报销弹窗表单改为上下布局并加大分块间距

将报销管理新增/编辑弹窗的 label 改为 top 布局,并增加报销申请中明细、附件、备注等分块与上方内容的间距。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed 2026-07-25 18:27:08 +08:00
1 parent c756fbddfc
commit 715ccbd637
11 files changed
+30 -40

No files matched your search

+14 -13
View File
@@ -825,12 +825,6 @@
}
}
.dlg-note {
margin: 0 0 16px;
font-size: 13px;
color: var(--text-muted);
}
.flow-scroll {
max-height: 320px;
overflow-y: auto;
@@ -877,6 +871,7 @@
}
.form-section {
margin-top: 28px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px dashed var(--border);
@@ -888,6 +883,16 @@
padding-bottom: 0;
}
/* 顶部基础字段表单 → 下方分块小标题 */
.bx-dialog-form + .form-section {
margin-top: 28px;
}
/* 分块结束后接备注等表单项时,保留与上方的间距 */
.form-section + .bx-dialog-form {
margin-top: 28px;
}
.form-section h4 {
margin: 0 0 12px;
font-size: 13px;
@@ -988,12 +993,8 @@
background: var(--row-alt);
}
/* 报销新增/编辑弹窗:label 左、控件右,垂直居中,label 可换行(栅格列数不变) */
/* 报销新增/编辑弹窗:label 上、控件下(与 Fresh Mint label-position=top 一致) */
.bx-dialog-form {
.el-form-item {
align-items: center;
}
[class*='form-grid-'] > .el-form-item {
margin-bottom: 0;
}
@@ -1007,8 +1008,8 @@
word-break: break-word;
line-height: 1.45;
height: auto !important;
padding-right: 12px;
align-self: center;
padding-bottom: 6px;
justify-content: flex-start;
}
.el-form-item__content {
@@ -266,13 +266,11 @@
destroy-on-close
:close-on-click-modal="false"
>
<p class="dlg-note">提交后进入顺序审批流程,可在「查看审批流」中确认节点与审批人。</p>
<el-form
ref="addFormRef"
:model="addForm"
:rules="addFormRules"
label-position="right"
label-width="100px"
label-position="top"
class="bx-dialog-form"
scroll-to-error
:scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
@@ -421,7 +421,7 @@
destroy-on-close
:close-on-click-modal="false"
>
<el-form label-position="right" label-width="100px" class="bx-dialog-form">
<el-form label-position="top" class="bx-dialog-form">
<div class="form-grid-2">
<el-form-item label="审批时间">
<el-input :model-value="approveTime" disabled />
@@ -411,7 +411,7 @@
destroy-on-close
:close-on-click-modal="false"
>
<el-form label-position="right" label-width="100px" class="bx-dialog-form">
<el-form label-position="top" class="bx-dialog-form">
<div class="form-grid-2">
<el-form-item label="发放金额(元)" class="field-amount">
<el-input :model-value="String(currentRow.amount || '')" disabled placeholder="发放金额" />
@@ -197,8 +197,7 @@
ref="addFormRef"
:model="formData"
:rules="formRules"
label-position="right"
label-width="100px"
label-position="top"
class="bx-dialog-form"
scroll-to-error
:scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
@@ -251,8 +250,7 @@
ref="editFormRef"
:model="formData"
:rules="formRules"
label-position="right"
label-width="100px"
label-position="top"
class="bx-dialog-form"
scroll-to-error
:scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
@@ -319,8 +317,7 @@
ref="addChildFormRef"
:model="formData"
:rules="formRules"
label-position="right"
label-width="100px"
label-position="top"
class="bx-dialog-form"
scroll-to-error
:scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
+2 -2
View File
@@ -465,7 +465,7 @@
destroy-on-close
:close-on-click-modal="false"
>
<el-form label-position="right" label-width="100px" class="bx-dialog-form">
<el-form label-position="top" class="bx-dialog-form">
<div class="form-grid-2">
<el-form-item label="发放金额(元)" class="field-amount">
<el-input :model-value="String(currentRow.amount || '')" disabled placeholder="发放金额" />
@@ -510,7 +510,7 @@
destroy-on-close
:close-on-click-modal="false"
>
<el-form label-position="right" label-width="100px" class="bx-dialog-form">
<el-form label-position="top" class="bx-dialog-form">
<h4 class="dialog-section-title">报销单信息</h4>
<div class="form-grid-2">
<el-form-item label="报销单号">
@@ -240,9 +240,7 @@
destroy-on-close
:close-on-click-modal="false"
>
<p class="dlg-note">提交后进入顺序审批流程,可在「查看审批流」中确认节点与审批人。</p>
<el-form label-position="right" label-width="100px" class="bx-dialog-form">
<el-form label-position="top" class="bx-dialog-form">
<div class="form-grid-2">
<el-form-item label="报销日期">
<el-date-picker
@@ -339,7 +337,7 @@
/>
</div>
<el-form label-position="right" label-width="100px" class="bx-dialog-form">
<el-form label-position="top" class="bx-dialog-form">
<el-form-item label="备注说明">
<el-input v-model="addForm.remark" type="textarea" :rows="4" placeholder="请输入报销说明" />
</el-form-item>
@@ -547,7 +547,7 @@
destroy-on-close
:close-on-click-modal="false"
>
<el-form label-position="right" label-width="100px" class="bx-dialog-form">
<el-form label-position="top" class="bx-dialog-form">
<div class="form-grid-2">
<el-form-item label="审批时间">
<el-input :model-value="approveTime" disabled />
+1 -1
View File
@@ -267,7 +267,7 @@
destroy-on-close
:close-on-click-modal="false"
>
<el-form label-position="right" label-width="100px" class="bx-dialog-form">
<el-form label-position="top" class="bx-dialog-form">
<el-form-item label="审批意见">
<el-input v-model="approveOpinion" type="textarea" :rows="4" placeholder="请输入审批意见" />
</el-form-item>
@@ -136,8 +136,7 @@
ref="addFormRef"
:model="formData"
:rules="formRules"
label-position="right"
label-width="100px"
label-position="top"
class="bx-dialog-form"
scroll-to-error
:scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
@@ -186,8 +185,7 @@
ref="editFormRef"
:model="formData"
:rules="formRules"
label-position="right"
label-width="100px"
label-position="top"
class="bx-dialog-form"
scroll-to-error
:scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
@@ -136,8 +136,7 @@
ref="addFormRef"
:model="formData"
:rules="formRules"
label-position="right"
label-width="100px"
label-position="top"
class="bx-dialog-form"
scroll-to-error
:scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
@@ -186,8 +185,7 @@
ref="editFormRef"
:model="formData"
:rules="formRules"
label-position="right"
label-width="100px"
label-position="top"
class="bx-dialog-form"
scroll-to-error
:scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"