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/bill-ledger-form.vue
+39 -39
View File
@@ -1,6 +1,6 @@
<template>
<basic-container class="bill-ledger-form-page">
<div class="bill-ledger-form-page__title">
<div class="archive-page-form__title">
{{ recordId ? '编辑汇票台账' : '新增汇票台账' }}
</div>
<el-form
@@ -11,10 +11,9 @@
label-width="auto"
class="bill-ledger-form-page__form"
>
<section class="bill-ledger-form-page__section">
<div class="bill-ledger-form-page__section-title">基本信息</div>
<el-row :gutter="48">
<el-col :span="12">
<section-card title="基本信息">
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="票据号码" prop="billNo">
<el-input
v-model="form.billNo"
@@ -23,6 +22,8 @@
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出票单位" prop="issuerId">
<el-select
v-model="form.issuerId"
@@ -41,6 +42,8 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="票面金额" prop="faceAmount">
<el-input-number
v-model="form.faceAmount"
@@ -50,6 +53,8 @@
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出票日期" prop="issueDate">
<el-date-picker
v-model="form.issueDate"
@@ -58,6 +63,8 @@
placeholder="请选择"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="可用部门" prop="availableDeptIds">
<el-tree-select
v-model="form.availableDeptIds"
@@ -72,6 +79,8 @@
@change="handleDeptChange"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="费用承担方" prop="feeBearerId">
<el-select
v-model="form.feeBearerId"
@@ -90,6 +99,8 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="双方确认贴现率" prop="confirmedDiscountRate">
<el-input-number
v-model="form.confirmedDiscountRate"
@@ -103,7 +114,7 @@
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="汇票类型" prop="billType">
<el-select v-model="form.billType" placeholder="请选择">
<el-option
@@ -114,6 +125,8 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="收票单位" prop="receiverName">
<el-select
v-model="form.receiverName"
@@ -130,9 +143,13 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="可用余额">
<el-input :model-value="formatMoney(projectedAvailableBalance)" disabled />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="到期日期" prop="maturityDate">
<el-date-picker
v-model="form.maturityDate"
@@ -141,6 +158,8 @@
placeholder="请选择"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出票行" prop="issuingBank">
<el-select
v-model="form.issuingBank"
@@ -152,6 +171,8 @@
<el-option v-for="item in bankOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="银行贴现参考率" prop="bankDiscountReferenceRate">
<el-input-number
v-model="form.bankDiscountReferenceRate"
@@ -164,15 +185,16 @@
<template #suffix>%</template>
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="预计贴现费用">
<el-input :model-value="formatMoney(estimatedDiscountFee)" disabled />
</el-form-item>
</el-col>
</el-row>
</section>
</section-card>
<section class="bill-ledger-form-page__section">
<div class="bill-ledger-form-page__section-title">附件信息</div>
<section-card title="附件信息">
<el-table :data="form.attachments" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column label="文件名" min-width="220">
@@ -215,10 +237,9 @@
button-text="上传"
@change="normalizeAttachments"
/>
</section>
</section-card>
<section class="bill-ledger-form-page__section">
<div class="bill-ledger-form-page__section-title">备注</div>
<section-card title="备注">
<el-form-item prop="remark" class="bill-ledger-form-page__remark">
<el-input
v-model="form.remark"
@@ -229,10 +250,9 @@
placeholder="请输入"
/>
</el-form-item>
</section>
</section-card>
<section class="bill-ledger-form-page__section">
<div class="bill-ledger-form-page__section-title">使用记录</div>
<section-card title="使用记录">
<el-table :data="usageRecords" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column prop="applicationNo" label="申请单号" min-width="180" align="center" />
@@ -244,7 +264,7 @@
<template #default>已审核</template>
</el-table-column>
</el-table>
</section>
</section-card>
<div class="bill-ledger-form-page__actions">
<el-button type="primary" :loading="saving" @click="confirmSubmit">确认</el-button>
@@ -540,28 +560,8 @@ export default {
</script>
<style scoped lang="scss">
.bill-ledger-form-page__title,
.bill-ledger-form-page__section-title {
display: flex;
align-items: center;
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
}
.bill-ledger-form-page__title::before,
.bill-ledger-form-page__section-title::before {
width: 4px;
height: 20px;
margin-right: 8px;
background: #409eff;
content: '';
}
.bill-ledger-form-page__section {
margin-bottom: 24px;
}
.bill-ledger-form-page__section-title {
font-size: 16px;
}
.bill-ledger-form-page__form :deep(.el-form-item) {
margin-bottom: 16px;
}
@@ -591,7 +591,7 @@ export default {
background: #fafafa;
}
@media (max-width: 1024px) {
.bill-ledger-form-page :deep(.el-col-12) {
.bill-ledger-form-page :deep(.el-col-6) {
max-width: 100%;
flex: 0 0 100%;
}