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/receipt-claim-record-form.vue
+23 -59
View File
@@ -1,82 +1,80 @@
<template>
<basic-container class="claim-record-form-page">
<el-form :model="form" label-position="right" label-width="auto">
<section class="claim-record-form-page__section">
<div class="claim-record-form-page__section-title">收款信息</div>
<section-card title="收款信息">
<el-row :gutter="32">
<el-col :span="12">
<el-col :span="6">
<el-form-item label="认领通知单">
<el-input v-model="form.receiptNoticeNo" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="付款人"
><el-input v-model="form.payerName" disabled
/></el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="收款金额">
<el-input :model-value="formatMoney(form.receiptAmount)" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="交易时间">
<el-input v-model="form.transactionTime" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="对方户名">
<el-input v-model="form.counterpartyName" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="对方开户行">
<el-input v-model="form.counterpartyBank" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="对方账号">
<el-input v-model="form.counterpartyAccount" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="明细流水号">
<el-input v-model="form.detailSerialNo" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="已认领金额">
<el-input :model-value="formatMoney(form.claimAmount)" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="摘要"><el-input v-model="form.summary" disabled /></el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="关联结算单">
<el-input v-model="form.associatedSettlementNos" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="认领人">
<el-input v-model="form.claimerName" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="认领日期">
<el-input v-model="form.claimDate" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="认领人部门">
<el-input v-model="form.claimerDeptName" disabled />
</el-form-item>
</el-col>
</el-row>
</section>
</section-card>
<section class="claim-record-form-page__section">
<div class="claim-record-form-page__section-title">结算信息</div>
<section-card title="结算信息">
<el-table :data="form.settlements" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column label="结算单号" min-width="180" align="center">
@@ -96,19 +94,15 @@
<template #default="{ row }">{{ formatMoney(row.allocatedReceiptAmount) }}</template>
</el-table-column>
</el-table>
</section>
</section-card>
<section class="claim-record-form-page__section">
<div class="claim-record-form-page__section-heading">
<div class="claim-record-form-page__section-title">附件信息</div>
<el-button
<section-card title="附件信息"><template #extra><el-button
v-if="form.attachments.length"
type="primary"
:icon="Download"
@click="downloadAttachments"
>批量下载</el-button
>
</div>
></template>
<el-table :data="form.attachments" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column label="文件名" min-width="220">
@@ -148,12 +142,11 @@
class="claim-record-form-page__uploader"
@change="handleAttachmentChange"
/>
</section>
</section-card>
<section class="claim-record-form-page__section">
<div class="claim-record-form-page__section-title">备注</div>
<section-card title="备注">
<el-input v-model="form.remark" type="textarea" :rows="3" maxlength="200" disabled />
</section>
</section-card>
<div class="claim-record-form-page__actions">
<el-button @click="goBack">关闭</el-button>
@@ -317,35 +310,6 @@ export default {
</script>
<style scoped lang="scss">
.claim-record-form-page__section {
margin-bottom: 24px;
}
.claim-record-form-page__section-title {
display: flex;
align-items: center;
margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
}
.claim-record-form-page__section-title::before {
width: 4px;
height: 20px;
margin-right: 8px;
background: #409eff;
content: '';
}
.claim-record-form-page__section-heading {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.claim-record-form-page__section-heading .claim-record-form-page__section-title {
margin-bottom: 0;
}
.claim-record-form-page :deep(.el-form-item) {
margin-bottom: 16px;
}
.claim-record-form-page__actions {
display: flex;
justify-content: center;