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-flow-form.vue
+24 -62
View File
@@ -8,49 +8,48 @@
label-width="auto"
class="receipt-claim-form-page__form"
>
<section class="receipt-claim-form-page__section">
<div class="receipt-claim-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.claimedAmount)" 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="关联结算单" prop="settlementIds"
><el-input
:model-value="settlementLabel"
@@ -62,23 +61,22 @@
title="选择结算单"
@click="openSettlementDialog" /></template></el-input></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="receipt-claim-form-page__section">
<div class="receipt-claim-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"
@@ -108,20 +106,16 @@
:controls="false" /></template
></el-table-column>
</el-table>
</section>
</section-card>
<section class="receipt-claim-form-page__section">
<div class="receipt-claim-form-page__section-heading">
<div class="receipt-claim-form-page__section-title">附件信息</div>
<el-button
<section-card title="附件信息"><template #extra><el-button
v-if="form.attachments.length"
type="primary"
plain
: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"
@@ -158,10 +152,9 @@
class="receipt-claim-form-page__uploader"
@change="normalizeAttachments"
/>
</section>
</section-card>
<section class="receipt-claim-form-page__section">
<div class="receipt-claim-form-page__section-title">备注</div>
<section-card title="备注">
<el-form-item class="receipt-claim-form-page__remark"
><el-input
v-model="form.remark"
@@ -170,7 +163,7 @@
maxlength="200"
show-word-limit
/></el-form-item>
</section>
</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>
@@ -460,37 +453,6 @@ export default {
</script>
<style scoped lang="scss">
.receipt-claim-form-page__section-title {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.receipt-claim-form-page__section-title::before {
width: 4px;
height: 20px;
margin-right: 8px;
background: #409eff;
content: '';
}
.receipt-claim-form-page__section {
margin-bottom: 24px;
}
.receipt-claim-form-page__section-title {
font-size: 16px;
}
.receipt-claim-form-page__section-heading {
display: flex;
align-items: center;
justify-content: space-between;
}
.receipt-claim-form-page__section-heading .receipt-claim-form-page__section-title {
margin-bottom: 0;
}
.receipt-claim-form-page__form :deep(.el-form-item) {
margin-bottom: 16px;
}
.receipt-claim-form-page__form :deep(.el-select),
.receipt-claim-form-page__form :deep(.el-input-number) {
width: 100%;
@@ -529,7 +491,7 @@ export default {
background: #fafafa;
}
@media (max-width: 900px) {
.receipt-claim-form-page__form :deep(.el-col-12) {
.receipt-claim-form-page__form :deep(.el-col-6) {
max-width: 100%;
flex: 0 0 100%;
}