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

refactor(ui): 优化多页面表单布局及样式统一

Browse Source 
- 统一用 section-card 组件替换原有分段结构，简化模板结构
- 调整表单列宽为 6 栅格，提高响应式适配效果
- 修改标题类名，采用一致的 archive-page-form__title
- 精简并合并样式，移除各页面冗余标题和分段样式声明
- 全站业务状态标签改为普通文字，不显示背景和圆点，字体颜色统一
- 优化 element-ui.scss 中表格操作列的 el-link 样式，兼容多层 DOM 结构
- 增加表格操作列 el-tooltip 单元格自动宽度，防止内容裁切
- 调整正式结算列表操作列宽度，提升显示空间
- 简化部分页面表单控件宽度样式，统一控件宽度及间距
- 删除多处无用样式，减少样式冗余，提高代码可维护性
This commit is contained in:
赵忠林
2026-08-25 11:23:42 +08:00
parent 8955ef16c7
commit 01c3bb5b57
14 changed files with 256 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/payment/payment-application-form.vue
+33 -60
View File
@@ -1,6 +1,6 @@
<template>
<basic-container class="payment-form-page">
<div class="payment-form-page__title">
<div class="archive-page-form__title">
{{ readonly ? '查看付款申请' : recordId ? '编辑付款申请' : '新增付款申请' }}
</div>
<el-form
@@ -11,17 +11,16 @@
label-width="auto"
class="payment-form-page__form"
>
<section class="payment-form-page__section">
<div class="payment-form-page__section-title">付款基本信息</div>
<section-card title="付款基本信息">
<el-row :gutter="24">
<el-col :span="12"
<el-col :span="6"
><el-form-item label="单据号"
><el-input
v-model="form.paymentNo"
disabled
placeholder="系统自动生成" /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="付款类型" prop="paymentType"
><el-select v-model="form.paymentType" :disabled="readonly" @change="handleTypeChange"
><el-option
@@ -29,7 +28,7 @@
:key="item.value"
v-bind="item" /></el-select></el-form-item
></el-col>
<el-col v-if="form.paymentType !== 'project_advance'" :span="12"
<el-col v-if="form.paymentType !== 'project_advance'" :span="6"
><el-form-item label="结算单号" prop="referenceId"
><el-input
v-model="referenceLabel"
@@ -42,7 +41,7 @@
></el-form-item
></el-col
>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="所属项目"
><el-input v-model="form.projectName" disabled
><template v-if="form.paymentType === 'project_advance'" #append
@@ -51,23 +50,23 @@
></el-form-item
></el-col
>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="合同名称"
><el-input v-model="form.contractName" disabled /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="结算金额"
><el-input v-model="form.settlementAmount" disabled /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="可付款金额"
><el-input v-model="form.payableAmount" disabled /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="票款类型"
><el-input v-model="form.billType" disabled /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="付款比例" prop="paymentRatio"
><el-input-number
v-model="form.paymentRatio"
@@ -78,7 +77,7 @@
:controls="false"
style="width: 100%" /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="申请付款金额" prop="appliedAmount"
><el-input-number
v-model="form.appliedAmount"
@@ -88,7 +87,7 @@
:controls="false"
style="width: 100%" /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="付款方式" prop="paymentMethod"
><el-select
v-model="form.paymentMethod"
@@ -99,7 +98,7 @@
:key="item.value"
v-bind="item" /></el-select></el-form-item
></el-col>
<el-col v-if="billPayment" :span="12"
<el-col v-if="billPayment" :span="6"
><el-form-item label="汇票票据" prop="billLedgerId"
><el-select
v-model="form.billLedgerId"
@@ -119,23 +118,23 @@
}`"
:value="item.id" /></el-select></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="收款方"
><el-input v-model="form.payeeName" disabled /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="收款账号"
><el-input v-model="form.bankAccount" :disabled="readonly" /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="开户银行"
><el-input v-model="form.bankName" :disabled="readonly" /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="申请人"
><el-input v-model="form.applicantName" disabled /></el-form-item
></el-col>
<el-col :span="12"
<el-col :span="6"
><el-form-item label="申请日期"
><el-input v-model="form.applyDate" disabled /></el-form-item
></el-col>
@@ -149,9 +148,8 @@
show-word-limit /></el-form-item
></el-col>
</el-row>
</section>
<section class="payment-form-page__section">
<div class="payment-form-page__section-title">结算信息</div>
</section-card>
<section-card title="结算信息">
<el-table :data="settlementRows" border
><el-table-column type="index" label="序号" width="70" /><el-table-column
prop="settlementNo"
@@ -170,9 +168,8 @@
label="付款金额"
min-width="130"
/></el-table>
</section>
<section class="payment-form-page__section">
<div class="payment-form-page__section-title">发票信息</div>
</section-card>
<section-card title="发票信息">
<div class="payment-form-page__section-actions">
<el-button type="primary" plain :disabled="readonly" @click="addInvoice"
>新增发票</el-button
@@ -229,9 +226,8 @@
></el-table-column
></el-table
>
</section>
<section class="payment-form-page__section">
<div class="payment-form-page__section-title">付款记录</div>
</section-card>
<section-card title="付款记录">
<el-table :data="paymentRecords" border
><el-table-column type="index" label="序号" width="70" /><el-table-column
prop="paidAmount"
@@ -247,9 +243,8 @@
label="付款凭证"
min-width="160"
/></el-table>
</section>
<section class="payment-form-page__section">
<div class="payment-form-page__section-title">附件</div>
</section-card>
<section-card title="附件">
<vehicle-attachment-upload
v-model="form.attachments"
:readonly="readonly"
@@ -296,7 +291,7 @@
></el-table-column
></el-table
>
</section>
</section-card>
<div class="payment-form-page__actions">
<el-button @click="goBack">返回</el-button
><el-button v-if="!readonly && canSave" @click="saveDraft">保存</el-button
@@ -803,33 +798,6 @@ export default {
</script>
<style scoped lang="scss">
.payment-form-page__title,
.payment-form-page__section-title {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.payment-form-page__title::before,
.payment-form-page__section-title::before {
width: 4px;
height: 20px;
margin-right: 8px;
background: #409eff;
content: '';
}
.payment-form-page__section {
margin-bottom: 24px;
}
.payment-form-page__section-title {
font-size: 16px;
}
.payment-form-page__section-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
}
.payment-form-page__actions {
display: flex;
justify-content: center;
@@ -837,6 +805,11 @@ export default {
padding: 24px 0;
border-top: 1px solid #eff1f7;
}
.payment-form-page__section-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
}
.payment-form-page :deep(.el-form-item) {
margin-bottom: 16px;
}