b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(footer): 统一多页面底栏按钮样式与排序规则

Browse Source 
- 规范 master-order-editor.vue 底栏按钮类型及排序，按钮层级清晰
- 调整 payment-application-form.vue 底栏按钮样式为右对齐并浮动底部
- 统一 invoice-application/receipt-form 页底栏按钮顺序，返回按钮置首
- 所有相关表单页按钮底栏统一采用 sticky 浮动，背景及阴影样式一致
- 修复多个页面按钮缺少 plain 样式导致视觉层级不明
- 按钮间距统一为 12px，底栏内边距调整为 12px 24px
- 调整多个表单页面按钮组从居中对齐改为右对齐，提升操作一致性
- 保留弹窗 footer 按钮布局，不影响各页面独立弹窗交互体验
This commit is contained in:
赵忠林
2026-08-26 18:43:03 +08:00
parent 88c5f58548
commit 84c46b9312
13 changed files with 162 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/business/components/master-order-editor.vue
+12 -6
View File
@@ -532,10 +532,10 @@
</template>
</el-dialog>
<footer>
<el-button @click="$emit('back')">返回</el-button
><el-button @click="saveDraft">暂存</el-button
><el-button type="primary" @click="confirmCreate">确认创建</el-button
><el-button type="primary" @click="createAndDispatch">创建并调度</el-button>
<el-button @click="$emit('back')">返回</el-button>
<el-button type="primary" plain @click="saveDraft">暂存</el-button>
<el-button type="primary" plain @click="confirmCreate">确认创建</el-button>
<el-button type="primary" @click="createAndDispatch">创建并调度</el-button>
</footer>
</div>
</template>
@@ -2050,7 +2050,13 @@ export default {
footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 0;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
</style>
src/views/payment/bill-ledger-form.vue
+10 -4
View File
@@ -267,8 +267,8 @@
</section-card>
<div class="bill-ledger-form-page__actions">
<el-button type="primary" :loading="saving" @click="confirmSubmit">确认</el-button>
<el-button @click="goBack">取消</el-button>
<el-button type="primary" :loading="saving" @click="confirmSubmit">确认</el-button>
</div>
</el-form>
</basic-container>
@@ -591,9 +591,15 @@ export default {
}
.bill-ledger-form-page__actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.bill-ledger-form-page :deep(.el-table) {
--el-table-border-color: #eff1f7;
src/views/payment/bill-payment-form.vue
+8 -2
View File
@@ -399,8 +399,14 @@ export default {
.bill-payment-form-page__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 0 8px;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.bill-payment-form-page__dialog-search {
display: flex;
src/views/payment/invoice-application-form.vue
+10 -4
View File
@@ -417,8 +417,8 @@
</section-card>
<div class="invoice-form-page__actions">
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
<el-button @click="goBack">返回</el-button>
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
<el-button
v-if="!readonly && canSave"
type="primary"
@@ -979,9 +979,15 @@ export default {
}
.invoice-form-page__actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.invoice-form-page__attachment-upload {
display: flex;
src/views/payment/invoice-receipt-form.vue
+10 -4
View File
@@ -240,8 +240,8 @@
</section-card>
<div class="receipt-form-page__actions">
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
<el-button @click="goBack">返回</el-button>
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
<el-button
v-if="!readonly && canSave"
type="primary"
@@ -776,9 +776,15 @@ export default {
}
.receipt-form-page__actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.receipt-form-page__dialog-search {
display: flex;
src/views/payment/payment-application-form.vue
+11 -6
View File
@@ -328,9 +328,9 @@
</div>
</section-card>
<div class="payment-form-page__actions">
<el-button @click="goBack">返回</el-button
><el-button v-if="!readonly && canSave" @click="saveDraft(false)">保存</el-button
><el-button
<el-button @click="goBack">返回</el-button>
<el-button v-if="!readonly && canSave" type="primary" plain @click="saveDraft(false)">保存</el-button>
<el-button
v-if="!readonly && canSave && hasPermission('payment_application_submit')"
type="primary"
@click="submitForm"
@@ -1282,10 +1282,15 @@ export default {
<style scoped lang="scss">
.payment-form-page__actions {
display: flex;
justify-content: center;
gap: 16px;
padding: 24px 0;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.payment-form-page__section-actions {
display: flex;
src/views/payment/receipt-claim-record-form.vue
+9 -2
View File
@@ -312,8 +312,15 @@ export default {
<style scoped lang="scss">
.claim-record-form-page__actions {
display: flex;
justify-content: center;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.claim-record-form-page__links {
display: flex;
src/views/payment/receipt-flow-form.vue
+11 -5
View File
@@ -165,8 +165,8 @@
/></el-form-item>
</section-card>
<div class="receipt-claim-form-page__actions">
<el-button type="primary" :loading="submitting" @click="submitClaim">确认</el-button
><el-button :disabled="submitting" @click="goBack">取消</el-button>
<el-button :disabled="submitting" @click="goBack">取消</el-button>
<el-button type="primary" :loading="submitting" @click="submitClaim">确认</el-button>
</div>
</el-form>
@@ -471,9 +471,15 @@ export default {
}
.receipt-claim-form-page__actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.receipt-claim-form-page__dialog-search {
display: flex;
src/views/settlement/components/formal-settlement-editor.vue
+7 -2
View File
@@ -1546,9 +1546,14 @@ export default {
.formal-editor__page-actions {
display: flex;
justify-content: flex-end;
padding: 16px 0 4px;
padding: 12px 24px;
border-top: 1px solid #eff1f7;
gap: 8px;
gap: 12px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.formal-editor__links {
display: flex;
src/views/settlement/components/pre-settlement-editor.vue
+9 -4
View File
@@ -393,7 +393,7 @@
<template v-if="!pageMode" #footer>
<el-button @click="visible = false">取消</el-button>
<el-button v-if="editable" :loading="saving" @click="saveDraft(false)">保存</el-button>
<el-button v-if="editable" type="primary" plain :loading="saving" @click="saveDraft(false)">保存</el-button>
<el-button
v-if="editable && hasPermission('pre_settlement_submit')"
type="primary"
@@ -405,7 +405,7 @@
</template>
<div v-if="pageMode" class="pre-settlement-editor__page-actions">
<el-button @click="visible = false">取消</el-button>
<el-button v-if="editable" :loading="saving" @click="saveDraft(false)">保存</el-button>
<el-button v-if="editable" type="primary" plain :loading="saving" @click="saveDraft(false)">保存</el-button>
<el-button
v-if="editable && hasPermission('pre_settlement_submit')"
type="primary"
@@ -1529,9 +1529,14 @@ export default {
&__page-actions {
display: flex;
justify-content: flex-end;
padding: 16px 0 4px;
padding: 12px 24px;
border-top: 1px solid #eff1f7;
gap: 8px;
gap: 12px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
&__form {
src/views/settlement/receivable-payable-detail.vue
+1 -1
View File
@@ -597,7 +597,7 @@
</div>
<template #footer>
<el-button @click="previewDialog.visible = false">取消</el-button>
<el-button type="primary" @click="backToGenerateDialog">上一步</el-button>
<el-button type="primary" plain @click="backToGenerateDialog">上一步</el-button>
<el-button type="primary" :loading="previewDialog.submitting" @click="submitGenerateFee">
提交
</el-button>