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

fix(system): 修复部门管理操作列错位问题并统一客商档案弹窗风格

Browse Source 
- 修复/system/dept页面操作列竖排错位问题，通过提升CSS选择器特异性并强制inline-flex布局
- 在department页面添加scoped样式，双保险保证操作列横排显示及间距正确
- 将客商档案/vehicle/customer-archive中的表单分组和弹窗内容统一改为section-card组件风格
- 清理废弃旧样式类，提升界面一致性及可维护性
- 调整相关弹窗中卡片内容结构，消除双层灰色背景，使弹窗风格与/business/project-apply一致
- 对评分、联系人、收款信息、发票信息、客商材料、变更记录和证明材料等模块使用全局section-card组件包裹
- 优化样式细节，确保按钮组进入卡头右侧，保证操作体验一致
- 验证构建成功及热更新生效，提醒用户发布需清除旧CSS缓存
This commit is contained in:
赵忠林
2026-08-07 12:47:19 +08:00
parent c92d2a405a
commit 5aefa23f50
5 changed files with 106 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
.workbuddy/memory/2026-08-07.md
View File

@@ -88,3 +88,23 @@
- 共享工厂函数 `createCrudOption` 新增 `showOverflowTooltip: true`，覆盖 business 模块通过该工厂生成的所有 CRUD option。
- 覆盖范围：全站所有表格可见文本列（含 Avue 与手写 el-table），`type="selection"` 选择列由 Element Plus 自动豁免；操作列通过 CSS 豁免不被影响。
- 验证：`npm run build` 成功（exit code 0）；构建日志中 CSS `*` 告警来自第三方库压缩，与本次无关（历史既有）。
## 修复 /system/dept 操作栏错位（链接竖排）
- 现象：用户截图反馈机构管理页操作列「查看 / 编辑 / 删除 / 新增子项」竖排且偏右错位。
- 根因：Avue 自带默认样式 `.avue-crud .avue-crud__menu{display:block}`（特异性 0,2,0）与项目全局覆盖样式选择器完全相同；项目原规则虽带 `!important`，但在 dev 模式 CSS 注入时序或浏览器缓存旧 element-ui.scss 时，`.avue-crud__menu` 退化成 block，导致内部按钮/链接竖排。
- 修复：
- `src/styles/element-ui.scss`：把 `.avue-crud .avue-crud__menu` 改为重复类名 `.avue-crud .avue-crud__menu.avue-crud__menu`（特异性升到 0,3,0），并新增 `width: 100% !important` 让操作列容器占满单元格、左对齐横排更稳。
- `src/views/system/dept.vue`：scoped 样式新增 `:deep(.avue-crud__menu)` 兜底（inline-flex + gap 8px + 子元素 inline-flex），双保险确保本页操作列横排。
- 验证：dev server 已热更新，curl 确认两处编译结果均含 `display: inline-flex !important`；构建需用户硬刷新浏览器清旧 CSS 缓存。
## 客商档案 /vehicle/customer-archive 弹窗风格统一为 section-card
- 需求：用户截图反馈弹窗有「双层灰色背景」，且「工商信息」等标题没有放到卡片里面；要求改成和 `/business/project-apply` 一致的白卡风格。
- 根因：原页面主表单使用 `.archive-form__group` 灰色容器，内部再包一层白色 `.el-row` 卡片，标题坐在灰色背景上，形成外层 dialog body 灰 + 分组灰的「双层灰」；客商材料、变更记录、评分材料、发票/邮寄信息也沿用旧的分节标题样式。
- 改动：`src/views/vehicle/customer-archive.vue`
- 主表单 4 个分组改为 `<section-card title="工商信息 / 联系信息 / 财务/信用信息 / 其他信息">` 全局白卡组件，删除外层「基本信息」大标题。
- 评分/联系人/收款/发票 4 个 Tab 内容改为 `<section-card>` + `<template #extra>`，按钮组进入卡头右侧。
- 客商材料改为 `<section-card title="客商材料" #extra>`，变更记录改为 `<section-card title="变更记录">`。
- 发票信息弹窗的「发票信息 / 邮寄信息」改为两张 `<section-card>`。
- 评分详情弹窗的「证明材料」改为 `<section-card title="证明材料" class="score-material-card">`。
- 清理不再使用的样式：`.archive-form__group`、`.section-title`、`.section-head`、`.customer-material-section`、`.change-record-section`、`.invoice-form__section-title`、`.score-material-section` 等。
- 验证：`npm run build` 成功（exit code 0）。

6
src/styles/element-ui.scss
View File

@@ -550,12 +550,16 @@
}
// 全站统一：Avue 操作列文字链接保持间距并支持自动换行
.avue-crud .avue-crud__menu {
// 注意：Avue 自带 .avue-crud .avue-crud__menu{display:block}（特异性同为 0,2,0）。
// 此处重复类名升至 0,3,0 并强制 display:inline-flex !important，彻底压过 Avue 内置样式，
// 避免 dev 模式下 CSS 注入顺序导致 .avue-crud__menu 退化成 block 而让操作项竖排错位。
.avue-crud .avue-crud__menu.avue-crud__menu {
display: inline-flex !important;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: start;
width: 100% !important;
text-align: left;
}

19
src/views/system/dept.vue
View File

@@ -729,4 +729,23 @@ export default {
justify-content: flex-end;
margin-top: 12px;
}
/* 操作列兜底：确保「查看 / 编辑 / 删除 / 新增子项」横向排列并保留 8px 间距，
避免退化成 block 导致操作项竖排错位。全局样式已统一处理，此处为双保险。 */
:deep(.avue-crud__menu) {
display: inline-flex !important;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: flex-start;
width: 100%;
text-align: left;
> .el-button,
> .el-link,
> .el-dropdown {
flex-shrink: 0;
display: inline-flex;
}
}
</style>

4
src/views/vehicle/credit-score-quantification.vue
View File

@@ -1022,8 +1022,8 @@ export default {
}
.base-form {
max-width: 1080px;
margin: 10px auto 28px;
max-width: 60%;
padding: 24px;
}
.section-head {

200
src/views/vehicle/customer-archive.vue
View File

@@ -151,9 +151,7 @@
:disabled="readonly"
class="archive-form"
>
<div class="section-title dialog-section-title">基本信息</div>
<div class="archive-form__group">
<div class="dialog-section-title archive-form__group-title">工商信息</div>
<section-card title="工商信息">
<el-row :gutter="18">
<el-col :span="6">
<el-form-item label="客商编号" prop="customerCode">
@@ -297,10 +295,9 @@
</el-form-item>
</el-col>
</el-row>
</div>
</section-card>
<div class="archive-form__group">
<div class="dialog-section-title archive-form__group-title">联系信息</div>
<section-card title="联系信息">
<el-row :gutter="18">
<el-col :span="8">
<el-form-item label="客商负责人" prop="principal">
@@ -329,10 +326,9 @@
</el-form-item>
</el-col>
</el-row>
</div>
</section-card>
<div class="archive-form__group">
<div class="dialog-section-title archive-form__group-title">财务/信用信息</div>
<section-card title="财务/信用信息">
<el-row :gutter="18">
<el-col :span="6">
<el-form-item label="注册资金(万元)" prop="registeredCapital">
@@ -377,10 +373,9 @@
</el-form-item>
</el-col>
</el-row>
</div>
</section-card>
<div class="archive-form__group">
<div class="dialog-section-title archive-form__group-title">其他信息</div>
<section-card title="其他信息">
<el-row :gutter="18">
<el-col :span="24">
<el-form-item label="备注" prop="remark">
@@ -393,18 +388,18 @@
</el-form-item>
</el-col>
</el-row>
</div>
</section-card>
</el-form>
<el-tabs v-model="activeTab" class="archive-tabs">
<el-tab-pane label="评分表" name="scores">
<div class="section-head">
<span></span>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="addScore">
添加评分记录
</el-button>
</div>
<el-table :data="scoreTableData" border class="score-list-table">
<section-card>
<template #extra>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="addScore">
添加评分记录
</el-button>
</template>
<el-table :data="scoreTableData" border class="score-list-table">
<el-table-column label="序号" width="90" align="center">
<template #default="{ row }">
<span>{{ row.__index }}</span>
@@ -470,15 +465,16 @@
@size-change="handleScoreSizeChange"
@current-change="handleScoreCurrentChange"
/>
</section-card>
</el-tab-pane>
<el-tab-pane label="联系人" name="contacts">
<div class="section-head">
<span></span>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openContact()">
新增联系人
</el-button>
</div>
<el-table :data="contactTableData" border class="contact-table">
<section-card>
<template #extra>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openContact()">
新增联系人
</el-button>
</template>
<el-table :data="contactTableData" border class="contact-table">
<el-table-column label="序号" prop="__index" width="90" align="center" />
<el-table-column label="联系人姓名" prop="contactName" min-width="150" />
<el-table-column label="联系人电话" prop="contactPhone" min-width="150" />
@@ -509,15 +505,16 @@
@size-change="size => handleDetailSizeChange('contact', size)"
@current-change="page => handleDetailCurrentChange('contact', page)"
/>
</section-card>
</el-tab-pane>
<el-tab-pane label="收款信息" name="receiptAccounts">
<div class="section-head">
<span></span>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openReceipt()">
新增收款信息
</el-button>
</div>
<el-table :data="receiptTableData" border class="receipt-table">
<section-card>
<template #extra>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openReceipt()">
新增收款信息
</el-button>
</template>
<el-table :data="receiptTableData" border class="receipt-table">
<el-table-column label="序号" prop="__index" width="90" align="center" />
<el-table-column label="收款单位名称" prop="accountName" min-width="180" />
<el-table-column label="开户人姓名" prop="accountHolderName" min-width="150" />
@@ -539,15 +536,16 @@
@size-change="size => handleDetailSizeChange('receipt', size)"
@current-change="page => handleDetailCurrentChange('receipt', page)"
/>
</section-card>
</el-tab-pane>
<el-tab-pane label="发票信息" name="invoices">
<div class="section-head">
<span></span>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openInvoice()">
新增发票信息
</el-button>
</div>
<el-table :data="invoiceTableData" border class="invoice-table">
<section-card>
<template #extra>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openInvoice()">
新增发票信息
</el-button>
</template>
<el-table :data="invoiceTableData" border class="invoice-table">
<el-table-column label="序号" prop="__index" width="90" align="center" />
<el-table-column label="收票方名称" prop="invoiceTitle" min-width="180" />
<el-table-column label="纳税人识别号" prop="taxNo" min-width="180" />
@@ -575,12 +573,12 @@
@size-change="size => handleDetailSizeChange('invoice', size)"
@current-change="page => handleDetailCurrentChange('invoice', page)"
/>
</section-card>
</el-tab-pane>
</el-tabs>
<div class="customer-material-section">
<div class="section-head">
<div class="section-title dialog-section-title">客商材料</div>
<section-card title="客商材料">
<template #extra>
<div v-if="!readonly" class="section-actions">
<el-button icon="el-icon-download" @click="downloadAttachments">批量下载</el-button>
<el-button type="primary" icon="el-icon-plus" @click="addAttachment"
@@ -590,7 +588,7 @@
OCR上传识别
</el-button>
</div>
</div>
</template>
<el-alert
type="info"
:closable="false"
@@ -657,17 +655,16 @@
</template>
</el-table-column>
</el-table>
</div>
</section-card>
<div class="change-record-section">
<div class="section-title dialog-section-title">变更记录</div>
<section-card title="变更记录">
<el-table :data="archiveForm.changeRecords" border>
<el-table-column label="序号" type="index" width="90" align="center" />
<el-table-column label="变更日期" prop="changeTime" min-width="170" />
<el-table-column label="变更内容" prop="changeContent" min-width="260" />
<el-table-column label="变更账号" prop="changeUserName" min-width="160" />
</el-table>
</div>
</section-card>
<template #footer>
<el-button @click="archiveBox = false">{{ readonly ? '关闭' : '取消' }}</el-button>
@@ -838,8 +835,8 @@
label-width="120px"
class="invoice-form"
>
<div class="invoice-form__section-title">发票信息</div>
<el-row :gutter="34">
<section-card title="发票信息">
<el-row :gutter="34">
<el-col :span="12">
<el-form-item label="纳税人识别号" prop="taxNo">
<el-input v-model="invoiceForm.taxNo" maxlength="30" />
@@ -887,8 +884,10 @@
</el-form-item>
</el-col>
</el-row>
<div class="invoice-form__section-title">邮寄信息</div>
<el-row :gutter="34">
</section-card>
<section-card title="邮寄信息">
<el-row :gutter="34">
<el-col :span="12">
<el-form-item label="收件人姓名" prop="receiverName">
<el-input v-model="invoiceForm.receiverName" maxlength="30" />
@@ -917,6 +916,7 @@
</el-form-item>
</el-col>
</el-row>
</section-card>
</el-form>
<template #footer>
<div class="invoice-dialog__footer-actions">
@@ -1105,9 +1105,8 @@
</el-table-column>
</el-table>
<div class="score-material-section">
<div class="score-material-section__head">
<div class="dialog-section-title">证明材料</div>
<section-card title="证明材料" class="score-material-card">
<template #extra>
<vehicle-attachment-upload
v-if="!readonly"
v-model="scoreAttachmentFiles"
@@ -1116,7 +1115,7 @@
:show-tip="false"
@success="handleScoreAttachmentUploadSuccess"
/>
</div>
</template>
<el-table :data="scoreAttachmentFiles" border class="score-material-table">
<el-table-column label="序号" type="index" width="90" align="center" />
<el-table-column label="文件名" prop="name" min-width="220" />
@@ -1144,7 +1143,7 @@
</template>
</el-table-column>
</el-table>
</div>
</section-card>
<template #footer>
<el-button type="primary" v-if="!readonly" @click="saveScoreDetail">保存</el-button>
@@ -3471,30 +3470,7 @@ export default {
}
}
.archive-form__group {
padding: 16px 20px;
margin-bottom: 16px;
background-color: #f0f2f5;
border-radius: 8px;
.dialog-section-title {
margin: 0 0 12px;
font-size: 14px;
font-weight: 500;
color: #303133;
}
// 内层白色卡片：字段区域白底，浮于灰色分组块之上
> .el-row {
margin: 0;
padding: 18px 16px 4px;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
}
.business-term-field,
business-term-field,
.archive-form__address {
display: flex;
align-items: center;
@@ -3526,24 +3502,6 @@ export default {
}
}
.section-title {
margin: 16px 0 12px;
font-size: 18px;
font-weight: 700;
color: #303133;
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin: 18px 0 12px;
.section-title {
margin: 0;
}
}
.section-actions {
display: flex;
flex-wrap: wrap;
@@ -3681,13 +3639,7 @@ export default {
}
}
.customer-material-section {
margin-top: 18px;
}
.change-record-section {
margin-top: 18px;
}
// 客商材料、变更记录已改用全局 <section-card> 组件，无需额外 margin-top
.score-list-table,
.contact-table,
@@ -3714,25 +3666,6 @@ export default {
.invoice-form {
max-width: none;
&__section-title {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 8px 0 20px;
font-size: 16px;
font-weight: 700;
color: #303133;
&::before,
&::after {
flex: 1;
height: 1px;
content: '';
background-color: #dcdfe6;
}
}
}
.contact-form__address {
@@ -3843,20 +3776,7 @@ export default {
}
}
.score-material-section {
margin: 26px 36px 0;
}
.score-material-section__head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 16px;
.dialog-section-title {
margin: 0;
}
.score-material-card {
:deep(.vehicle-attachment-upload) {
width: auto;
}