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/invoice-application-form.vue
+35 -79
View File
@@ -1,6 +1,6 @@
<template>
<basic-container class="invoice-form-page">
<div class="invoice-form-page__title">
<div class="archive-page-form__title">
{{ readonly ? '查看开票申请' : recordId ? '编辑开票申请' : '新增开票申请' }}
</div>
@@ -12,10 +12,9 @@
label-width="auto"
class="invoice-form-page__form"
>
<section class="invoice-form-page__section">
<div class="invoice-form-page__section-title">开票基本信息</div>
<section-card title="开票基本信息">
<el-row :gutter="24">
<el-col :span="8">
<el-col :span="6">
<el-form-item label="结算单" prop="settlementIds">
<el-input :model-value="settlementLabel" readonly placeholder="请选择正式结算单">
<template v-if="!readonly" #append>
@@ -24,17 +23,17 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="所属项目">
<el-input v-model="form.projectName" disabled placeholder="根据结算单自动带出" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="开票单位">
<el-input v-model="form.issuerName" disabled placeholder="根据结算单自动带出" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="发票类型" prop="invoiceType">
<el-select
v-model="form.invoiceType"
@@ -50,7 +49,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="可开票金额">
<el-input
:model-value="form.settlements.length ? formatMoney(availableInvoiceAmount) : ''"
@@ -59,7 +58,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="本次开票金额">
<el-input
:model-value="invoiceAmount > 0 ? formatMoney(invoiceAmount) : ''"
@@ -68,17 +67,17 @@
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="申请日期">
<el-input v-model="form.applicationDate" disabled placeholder="提交后自动显示" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="申请人">
<el-input v-model="form.applicantName" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="承办部门">
<el-input
v-model="form.undertakingDeptName"
@@ -87,7 +86,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="部门邮箱" prop="departmentEmails">
<el-select
v-model="form.departmentEmails"
@@ -108,12 +107,11 @@
</el-form-item>
</el-col>
</el-row>
</section>
</section-card>
<section class="invoice-form-page__section">
<div class="invoice-form-page__section-title">受票方信息</div>
<section-card title="受票方信息">
<el-row :gutter="24">
<el-col :span="8">
<el-col :span="6">
<el-form-item label="受票方单位" prop="receiverInvoiceInfoId">
<el-select
v-model="form.receiverInvoiceInfoId"
@@ -130,12 +128,12 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="纳税人识别号" prop="taxpayerNo">
<el-input v-model="form.taxpayerNo" disabled placeholder="选择受票方单位后自动带出" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="开户账号" prop="bankAccount">
<el-input
v-model="form.bankAccount"
@@ -144,12 +142,12 @@
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="开户行" prop="bankName">
<el-input v-model="form.bankName" disabled placeholder="选择受票方单位后自动带出" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="注册地址" prop="registeredAddress">
<el-input
v-model="form.registeredAddress"
@@ -158,7 +156,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="联系人">
<el-select
v-model="form.contactName"
@@ -177,24 +175,20 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="联系电话" prop="contactPhone">
<el-input v-model="form.contactPhone" :disabled="readonly" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" :disabled="readonly" maxlength="100" />
</el-form-item>
</el-col>
</el-row>
</section>
</section-card>
<section class="invoice-form-page__section">
<div class="invoice-form-page__section-heading">
<div class="invoice-form-page__section-title">开票内容</div>
<el-button v-if="!readonly" type="primary" @click="addSheet">添加</el-button>
</div>
<section-card title="开票内容"><template #extra><el-button v-if="!readonly" type="primary" @click="addSheet">添加</el-button></template>
<div v-for="(sheet, sheetIndex) in form.sheets" :key="sheet.localId" class="invoice-sheet">
<div class="invoice-sheet__header">
<span>第{{ sheetIndex + 1 }}张</span>
@@ -311,10 +305,9 @@
</el-table-column>
</el-table>
</div>
</section>
</section-card>
<section class="invoice-form-page__section">
<div class="invoice-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 prop="formalSettlementNo" label="结算单号" min-width="170" />
@@ -337,10 +330,9 @@
</template>
</el-table-column>
</el-table>
</section>
</section-card>
<section class="invoice-form-page__section">
<div class="invoice-form-page__section-title">开票明细</div>
<section-card title="开票明细">
<el-table
ref="detailTable"
:data="detailRows"
@@ -371,10 +363,9 @@
</template>
</el-table-column>
</el-table>
</section>
</section-card>
<section class="invoice-form-page__section">
<div class="invoice-form-page__section-title">附件信息</div>
<section-card title="附件信息">
<vehicle-attachment-upload
v-model="form.attachments"
:readonly="readonly"
@@ -408,10 +399,9 @@
</template>
</el-table-column>
</el-table>
</section>
</section-card>
<section class="invoice-form-page__section">
<div class="invoice-form-page__section-title">备注</div>
<section-card title="备注">
<el-form-item class="invoice-form-page__remark">
<el-input
v-model="form.remark"
@@ -422,7 +412,7 @@
show-word-limit
/>
</el-form-item>
</section>
</section-card>
<div class="invoice-form-page__actions">
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
@@ -950,40 +940,6 @@ export default {
</script>
<style scoped lang="scss">
.invoice-form-page__title,
.invoice-form-page__section-title {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.invoice-form-page__title::before,
.invoice-form-page__section-title::before {
width: 4px;
height: 20px;
margin-right: 8px;
background: #409eff;
content: '';
}
.invoice-form-page__section {
margin-bottom: 24px;
}
.invoice-form-page__section-title {
font-size: 16px;
}
.invoice-form-page__section-heading,
.invoice-sheet__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.invoice-form-page__section-heading .invoice-form-page__section-title {
margin-bottom: 0;
}
.invoice-form-page__form :deep(.el-form-item) {
margin-bottom: 16px;
}
.invoice-form-page__form :deep(.el-select),
.invoice-form-page__form :deep(.el-input-number) {
width: 100%;
@@ -1030,13 +986,13 @@ export default {
background: #fafafa;
}
@media (max-width: 1200px) {
.invoice-form-page__form :deep(.el-col-8) {
.invoice-form-page__form :deep(.el-col-6) {
max-width: 50%;
flex: 0 0 50%;
}
}
@media (max-width: 768px) {
.invoice-form-page__form :deep(.el-col-8) {
.invoice-form-page__form :deep(.el-col-6) {
max-width: 100%;
flex: 0 0 100%;
}