Browse Source

refactor(order-form): 将提交和保存按钮移至表单底部并添加样式

yz 2 weeks ago
parent
commit
32b7b8b97c
1 changed files with 31 additions and 19 deletions
  1. 31 19
      src/components/order-form/order-form.vue

+ 31 - 19
src/components/order-form/order-form.vue

@@ -16,25 +16,7 @@
         <span class="form-title">{{ formTitle }}</span>
       </div>
       <div class="header-right">
-        <el-button
-          type="primary"
-          icon="el-icon-upload2"
-          size="small"
-          v-if="isEdit && canSubmitToU9(formData) && (orderId || formData.id)"
-          @click="handleSubmitToU9"
-        >
-          提交
-        </el-button>
-        <!-- 顶部保存按钮 -->
-        <el-button
-          type="primary"
-          icon="el-icon-check"
-          size="small"
-          :loading="saveLoading"
-          @click="handleSave"
-        >
-          保存
-        </el-button>
+        <!-- 顶部提交按钮已移至底部操作区 -->
       </div>
     </div>
 
@@ -82,6 +64,28 @@
           @material-update="handleMaterialUpdate"
         />
       </div>
+
+      <!-- 表单底部操作区:保存按钮放到底部右侧 -->
+      <div class="form-footer-actions">
+        <el-button
+          type="primary"
+          icon="el-icon-upload2"
+          size="small"
+          v-if="isEdit && canSubmitToU9(formData) && (orderId || formData.id)"
+          @click="handleSubmitToU9"
+        >
+          提交
+        </el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-check"
+          size="small"
+          :loading="saveLoading"
+          @click="handleSave"
+        >
+          保存
+        </el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -303,6 +307,14 @@ export default {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
+/* 新增:底部保存按钮容器样式,右对齐 */
+.form-footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+  gap: 8px; /* 新增:按钮间距 */
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .order-form-container {