fix(web-admin): 报销弹窗表单改为上下布局并加大分块间距
将报销管理新增/编辑弹窗的 label 改为 top 布局,并增加报销申请中明细、附件、备注等分块与上方内容的间距。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
c756fbddfc
commit
715ccbd637
11 files changed
+30
-40
No files matched your search
@@ -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' }"
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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' }"
|
||||
|
||||
Reference in new issue
Block a user