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-receipt-form.vue
+27 -61
View File
@@ -1,6 +1,6 @@
<template>
<basic-container class="receipt-form-page">
<div class="receipt-form-page__title">
<div class="archive-page-form__title">
{{ readonly ? '查看收票登记' : recordId ? '编辑收票登记' : '新增收票登记' }}
</div>
@@ -12,10 +12,9 @@
label-width="auto"
class="receipt-form-page__form"
>
<section class="receipt-form-page__section">
<div class="receipt-form-page__section-title">收票基本信息</div>
<section-card title="收票基本信息">
<el-row :gutter="32">
<el-col :span="12">
<el-col :span="6">
<el-form-item label="发票号码" prop="invoiceNo">
<el-input v-model="form.invoiceNo" readonly placeholder="请选择金蝶票据池发票">
<template v-if="!readonly" #append>
@@ -26,17 +25,17 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="开票日期">
<el-input v-model="form.invoiceDate" disabled placeholder="从金蝶票据池带出" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="发票类型">
<el-input v-model="form.invoiceType" disabled placeholder="从金蝶票据池带出" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="税率">
<el-input
:model-value="formatRate(form.taxRate)"
@@ -45,7 +44,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="开票金额">
<el-input
:model-value="form.kingdeeInvoicePoolId ? formatMoney(form.invoiceAmount) : ''"
@@ -54,7 +53,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="税额">
<el-input
:model-value="form.kingdeeInvoicePoolId ? formatMoney(form.taxAmount) : ''"
@@ -63,17 +62,17 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="受票单位">
<el-input v-model="form.receiverName" disabled placeholder="从金蝶票据池带出" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="开票单位">
<el-input v-model="form.issuerName" disabled placeholder="从金蝶票据池带出" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="关联结算单" prop="settlementIds">
<el-input :model-value="settlementLabel" readonly placeholder="请选择应付正式结算单">
<template v-if="!readonly" #append>
@@ -84,27 +83,27 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="开户行">
<el-input v-model="form.bankName" disabled placeholder="从金蝶票据池带出" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="开户账号">
<el-input v-model="form.bankAccount" disabled placeholder="从金蝶票据池带出" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="开票行">
<el-input v-model="form.issuingBank" disabled placeholder="从金蝶票据池带出" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="电话">
<el-input v-model="form.phone" :disabled="readonly" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="客户邮箱" prop="customerEmails">
<el-select
v-model="form.customerEmails"
@@ -124,7 +123,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="6">
<el-form-item label="部门邮箱" prop="departmentEmails">
<el-select
v-model="form.departmentEmails"
@@ -145,10 +144,9 @@
</el-form-item>
</el-col>
</el-row>
</section>
</section-card>
<section class="receipt-form-page__section">
<div class="receipt-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">
@@ -177,11 +175,10 @@
</template>
</el-table-column>
</el-table>
</section>
</section-card>
<section class="receipt-form-page__section">
<div class="receipt-form-page__section-heading">
<div class="receipt-form-page__section-title">附件信息</div>
<section-card title="附件信息">
<template #extra>
<el-button
v-if="form.attachments.length"
type="primary"
@@ -190,7 +187,7 @@
@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">
@@ -227,10 +224,9 @@
class="receipt-form-page__uploader"
@change="normalizeAttachments"
/>
</section>
</section-card>
<section class="receipt-form-page__section">
<div class="receipt-form-page__section-title">备注</div>
<section-card title="备注">
<el-form-item class="receipt-form-page__remark">
<el-input
v-model="form.remark"
@@ -241,7 +237,7 @@
show-word-limit
/>
</el-form-item>
</section>
</section-card>
<div class="receipt-form-page__actions">
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
@@ -755,36 +751,6 @@ export default {
</script>
<style scoped lang="scss">
.receipt-form-page__title,
.receipt-form-page__section-title {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.receipt-form-page__title::before,
.receipt-form-page__section-title::before {
width: 4px;
height: 20px;
margin-right: 8px;
background: #409eff;
content: '';
}
.receipt-form-page__section {
margin-bottom: 24px;
}
.receipt-form-page__section-title {
font-size: 16px;
}
.receipt-form-page__section-heading {
display: flex;
align-items: center;
justify-content: space-between;
}
.receipt-form-page__section-heading .receipt-form-page__section-title {
margin-bottom: 0;
}
.receipt-form-page__form :deep(.el-form-item) {
margin-bottom: 16px;
}
@@ -826,7 +792,7 @@ export default {
background: #fafafa;
}
@media (max-width: 900px) {
.receipt-form-page__form :deep(.el-col-12) {
.receipt-form-page__form :deep(.el-col-6) {
max-width: 100%;
flex: 0 0 100%;
}