Browse Source

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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
zlwu 3 months ago
parent
commit
715ccbd637

+ 14 - 13
web-admin/src/styles/bx/index.scss

@@ -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 {

+ 1 - 3
web-admin/src/views/bx/advance/apply/index.vue

@@ -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' }"

+ 1 - 1
web-admin/src/views/bx/advance/approve/index.vue

@@ -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 />

+ 1 - 1
web-admin/src/views/bx/advance/issue/index.vue

@@ -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="发放金额" />

+ 3 - 6
web-admin/src/views/bx/expense-item/index.vue

@@ -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
web-admin/src/views/bx/payment/index.vue

@@ -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="报销单号">

+ 2 - 4
web-admin/src/views/bx/reimburse/apply/index.vue

@@ -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>

+ 1 - 1
web-admin/src/views/bx/reimburse/approve/index.vue

@@ -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
web-admin/src/views/bx/view/todo/index.vue

@@ -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>

+ 2 - 4
web-admin/src/views/bx/workflow/advance/index.vue

@@ -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' }"

+ 2 - 4
web-admin/src/views/bx/workflow/reimburse/index.vue

@@ -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' }"