b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(ui): 统一全站 el-table 表头背景色及弹窗卡片化风格

Browse Source 
- 将所有 el-table 表头背景色统一设为浅灰 #fafafa，覆盖普通表格、avue-crud 和固定列
- 移除业务组件内冗余的表头样式，改由全局样式统一控制
- 调整多处弹窗（预结算单、正式结算单、运输对账单、应收明细等）内容板块，改用全局 section-card 组件实现白底卡片分组
- 为多个弹窗内的搜索区域增加白底、圆角和阴影样式，提升视觉层次感
- 缩减多处表格“操作”列宽度以适配新布局
- 付款申请弹窗按钮由主色调 primary 改为 success，符合全站按钮风格规范
- 统一调整弹窗内表单、按钮、间距及背景细节，改善界面体验和视觉一致性
This commit is contained in:
赵忠林
2026-08-20 14:47:29 +08:00
parent f6b05ed71d
commit 8f35e6b265
12 changed files with 250 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/settlement/components/formal-settlement-editor.vue
+23 -28
View File
@@ -1,8 +1,7 @@
<template>
<el-dialog v-model="visible" :title="title" width="96%" top="2vh" append-to-body destroy-on-close>
<div v-loading="loading" class="formal-editor">
<section class="formal-editor__section">
<div class="dialog-section-title">结算基本信息</div>
<section-card title="结算基本信息">
<el-form
ref="formRef"
:model="form"
@@ -64,11 +63,10 @@
</el-col>
</el-row>
</el-form>
</section>
</section-card>
<section class="formal-editor__section">
<div class="formal-editor__section-head">
<div class="dialog-section-title">来源预结算单</div>
<section-card title="来源预结算单">
<template #extra>
<div class="formal-editor__actions">
<el-button v-if="editable" type="primary" plain @click="openCandidateDialog"
>选择预结算单</el-button
@@ -77,7 +75,7 @@
>选择结算明细</el-button
>
</div>
</div>
</template>
<el-table :data="sources" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column
@@ -97,10 +95,9 @@
>
</el-table-column>
</el-table>
</section>
</section-card>
<section v-if="details.length" class="formal-editor__section">
<div class="dialog-section-title">结算明细</div>
<section-card v-if="details.length" title="结算明细">
<el-table :data="details" border>
<el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
<el-table-column
@@ -131,10 +128,9 @@
</template>
</el-table-column>
</el-table>
</section>
</section-card>
<section class="formal-editor__section">
<div class="dialog-section-title">附件</div>
<section-card title="附件">
<vehicle-attachment-upload
v-model="attachments"
:readonly="!editable"
@@ -143,10 +139,9 @@
:max-size="500"
:file-types="attachmentFileTypes"
/>
</section>
</section-card>
<section v-if="readonly && payments.length" class="formal-editor__section">
<div class="dialog-section-title">付款信息</div>
<section-card v-if="readonly && payments.length" title="付款信息">
<el-table :data="payments" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column
@@ -167,7 +162,7 @@
</template>
</el-table-column>
</el-table>
</section>
</section-card>
</div>
<template #footer>
<el-button @click="visible = false">取消</el-button>
@@ -177,7 +172,7 @@
</template>
<el-dialog v-model="candidate.visible" title="选择预结算单" width="88%" append-to-body>
<el-form :model="candidate.query" inline label-position="right" label-width="160px">
<el-form :model="candidate.query" inline label-position="right" label-width="160px" class="formal-editor__candidate-search">
<el-form-item label="预结算单号"
><el-input v-model="candidate.query.preSettlementNo" clearable
/></el-form-item>
@@ -227,7 +222,7 @@
</el-dialog>
<el-dialog v-model="detailCandidate.visible" title="选择结算明细" width="92%" append-to-body>
<el-form :model="detailCandidate.query" inline label-position="right" label-width="160px">
<el-form :model="detailCandidate.query" inline label-position="right" label-width="160px" class="formal-editor__detail-search">
<el-form-item label="批次号"
><el-input v-model="detailCandidate.query.batchNo" clearable
/></el-form-item>
@@ -725,15 +720,6 @@ export default {
</script>
<style scoped lang="scss">
.formal-editor__section {
margin-bottom: 24px;
}
.formal-editor__section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.formal-editor__actions {
display: flex;
gap: 8px;
@@ -761,4 +747,13 @@ export default {
.formal-editor__adjust-reason {
margin-top: 16px;
}
/* 选择预结算单 / 选择结算明细 弹窗搜索区白底 */
.formal-editor__candidate-search,
.formal-editor__detail-search {
background: #fff;
border-radius: 6px;
padding: 12px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
</style>
src/views/settlement/components/pre-settlement-editor.vue
+17 -37
View File
@@ -10,8 +10,8 @@
@closed="handleClosed"
>
<div v-loading="loading" class="pre-settlement-editor__content">
<div class="dialog-section-title">结算基本信息</div>
<el-form
<section-card title="结算基本信息">
<el-form
ref="formRef"
:model="form"
:rules="formRules"
@@ -81,14 +81,14 @@
</el-col>
</el-row>
</el-form>
</section-card>
<section class="pre-settlement-editor__section">
<div class="pre-settlement-editor__section-head">
<div class="dialog-section-title">结算合计</div>
<section-card title="结算合计">
<template #extra>
<el-button v-if="editable" type="primary" plain @click="addSummaryFee">
添加费用
</el-button>
</div>
</template>
<el-table :data="summaryFees" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column
@@ -161,11 +161,10 @@
<div class="pre-settlement-editor__summary-total">
合计：{{ formatMoney(summaryTotal, form.currency) }}
</div>
</section>
</section-card>
<section class="pre-settlement-editor__section">
<div class="pre-settlement-editor__section-head">
<div class="dialog-section-title">结算明细</div>
<section-card title="结算明细">
<template #extra>
<div class="pre-settlement-editor__section-actions">
<el-button
v-if="hasPermission('pre_settlement_export')"
@@ -182,7 +181,7 @@
{{ detailCollapsed ? '展开明细' : '收起明细' }}
</el-button>
</div>
</div>
</template>
<el-form
:model="detailQuery"
inline
@@ -284,12 +283,9 @@
</el-table-column>
</el-table>
</div>
</section>
</section-card>
<section class="pre-settlement-editor__section">
<div class="pre-settlement-editor__section-head">
<div class="dialog-section-title">附件</div>
</div>
<section-card title="附件">
<div class="pre-settlement-editor__attachment">
<div class="pre-settlement-editor__attachment-actions">
<vehicle-attachment-upload
@@ -344,10 +340,9 @@
</el-table-column>
</el-table>
</div>
</section>
</section-card>
<section v-if="form.id && readonly" class="pre-settlement-editor__section">
<div class="dialog-section-title">预付信息</div>
<section-card v-if="form.id && readonly" title="预付信息">
<el-table :data="advances" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column
@@ -370,10 +365,9 @@
</template>
</el-table-column>
</el-table>
</section>
</section-card>
<section v-if="form.id && readonly" class="pre-settlement-editor__section">
<div class="dialog-section-title">变更记录</div>
<section-card v-if="form.id && readonly" title="变更记录">
<el-table :data="changeRecords" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column
@@ -391,7 +385,7 @@
</template>
</el-table-column>
</el-table>
</section>
</section-card>
</div>
<template #footer>
@@ -1317,12 +1311,9 @@ export default {
&__content {
max-height: 82vh;
overflow-y: auto;
padding: 4px 12px 16px;
}
&__form {
margin-top: 12px;
:deep(.el-select),
:deep(.el-date-editor),
:deep(.el-input-number) {
@@ -1330,17 +1321,6 @@ export default {
}
}
&__section {
margin-top: 20px;
}
&__section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
&__section-actions,
&__links {
display: flex;
src/views/settlement/components/settlement-adjustment-editor.vue
+6 -31
View File
@@ -1,8 +1,7 @@
<template>
<el-dialog v-model="visible" :title="title" width="94%" top="3vh" append-to-body destroy-on-close>
<div v-loading="loading" class="settlement-adjustment-editor">
<section class="settlement-adjustment-editor__section">
<div class="dialog-section-title">基本信息</div>
<section-card title="基本信息">
<el-form
ref="formRef"
:model="form"
@@ -57,11 +56,10 @@
>
</el-row>
</el-form>
</section>
</section-card>
<section class="settlement-adjustment-editor__section">
<div class="settlement-adjustment-editor__section-head">
<div class="dialog-section-title">调整费用</div>
<section-card title="调整费用">
<template #extra>
<el-button
v-if="editable && form.formalSettlementId"
type="primary"
@@ -69,7 +67,7 @@
@click="openFeeDialog"
>添加费用</el-button
>
</div>
</template>
<el-table :data="details" border>
<el-table-column type="index" label="序号" width="64" align="center" /><el-table-column
prop="feeType"
@@ -141,7 +139,7 @@
}}</strong
>；调整后结算金额：<strong>{{ formatMoney(form.adjustedSettlementAmount) }}</strong>
</div>
</section>
</section-card>
</div>
<template #footer
><el-button @click="visible = false">取消</el-button
@@ -354,15 +352,6 @@ export default {
</script>
<style scoped lang="scss">
.settlement-adjustment-editor__section {
margin-bottom: 24px;
}
.settlement-adjustment-editor__section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.settlement-adjustment-editor__summary {
padding: 12px 0;
text-align: right;
@@ -379,18 +368,4 @@ export default {
.negative {
color: #f56c6c;
}
.dialog-section-title {
display: flex;
align-items: center;
min-height: 22px;
font-size: 16px;
font-weight: 600;
}
.dialog-section-title::before {
width: 4px;
height: 18px;
margin-right: 8px;
background: #409eff;
content: '';
}
</style>
src/views/settlement/components/transport-reconciliation-editor.vue
+10 -22
View File
@@ -1,8 +1,7 @@
<template>
<el-dialog v-model="visible" :title="title" width="98%" top="2vh" append-to-body destroy-on-close>
<div v-loading="loading" class="reconciliation-editor">
<section class="reconciliation-editor__section">
<div class="dialog-section-title">导入外部账单，与内部账单核对</div>
<section-card title="导入外部账单，与内部账单核对">
<el-form
ref="formRef"
:model="form"
@@ -61,10 +60,9 @@
</el-col>
</el-row>
</el-form>
</section>
</section-card>
<section class="reconciliation-editor__section">
<div class="dialog-section-title">内部账单</div>
<section-card title="内部账单">
<div class="reconciliation-editor__stats">
<div class="stat-card">
<b>{{ form.internalBillCount || 0 }}</b
@@ -149,11 +147,10 @@
</template>
</el-table-column>
</el-table>
</section>
</section-card>
<section class="reconciliation-editor__section">
<div class="reconciliation-editor__section-head">
<div class="dialog-section-title">导入外部账单</div>
<section-card title="导入外部账单">
<template #extra>
<div class="reconciliation-editor__actions" v-if="editable">
<el-button type="primary" plain @click="downloadTemplate('vehicle')"
>下载整车对账模板</el-button
@@ -171,7 +168,7 @@
@change="handleImport"
/>
</div>
</div>
</template>
<el-tabs v-model="externalTab">
<el-tab-pane :label="`导入明细（${externalDetails.length}）`" name="all" />
<el-tab-pane :label="`疑似重复（${duplicateRows.length}）`" name="duplicate" />
@@ -203,9 +200,9 @@
>
</el-table-column>
</el-table>
</section>
</section-card>
<section class="reconciliation-editor__section">
<section-card title="操作说明">
<el-collapse>
<el-collapse-item title="操作说明" name="help">
<div class="reconciliation-editor__help">
@@ -224,7 +221,7 @@
</div>
</el-collapse-item>
</el-collapse>
</section>
</section-card>
</div>
<template #footer>
@@ -744,15 +741,6 @@ export default {
</script>
<style scoped lang="scss">
.reconciliation-editor__section {
margin-bottom: 24px;
}
.reconciliation-editor__section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.reconciliation-editor__actions,
.reconciliation-editor__links {
display: flex;