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

style(archive-form): 统一和优化弹窗表单风格及间距

Browse Source 
- 统一财务/信用信息分组备注字段宽度及对齐，修正跨列占位
- 调整评分量化表弹窗左右边距，移除多余内边距复用全局样式
- 将评分量化表相关编辑弹窗改用 section-card 白卡分组并应用 archive-form 风格
- 给业务编辑弹窗添加 archive-form 样式，统一 label 固定宽度和控件宽度至 250px
- 新增 common-route 编辑弹窗自定义类，实现输入框宽度和标签对齐
- 全局修改弹窗灰底区间距为 8px，放宽表单项上下间距至 20px，提升视觉一致性
- 优化 Avue 弹窗底部按钮区样式，实现按钮内嵌于白卡底部
- 移除主弹窗标题左侧竖条，全站统一弹窗标题风格，遵循用户需求
- 修复弹窗表单 label 换行稳定性，保证长文本正确展示
- 调整 customer-archive 备注字段布局，保证输入框对齐美观
- 各手写编辑弹窗附加 archive-form，保证样式一致不破坏功能
This commit is contained in:
赵忠林
2026-08-11 18:43:57 +08:00
parent e8e6bc01b0
commit 040456f4d2
11 changed files with 179 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/vehicle/credit-score-quantification.vue
+47 -46
View File
@@ -84,12 +84,12 @@
@closed="resetConfig"
>
<div class="score-config">
<div class="section-title dialog-section-title">评分量化表</div>
<section-card title="评分量化表">
<el-form
:model="configForm"
label-position="right"
label-width="auto"
class="base-form"
class="archive-form"
:disabled="readonly"
>
<el-form-item label="评定表名称" required>
@@ -110,10 +110,9 @@
/>
</el-form-item>
</el-form>
</section-card>
<div class="section-head">
<div class="section-title dialog-section-title">评分表</div>
</div>
<section-card title="评分表">
<el-table :data="configForm.categories" border class="config-table">
<el-table-column label="序号" type="index" width="90" align="center" />
<el-table-column label="评分类目" prop="categoryName" min-width="180" />
@@ -126,13 +125,14 @@
</template>
</el-table-column>
</el-table>
</section-card>
<div class="section-head standard-head">
<div class="section-title dialog-section-title">评估标准</div>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openStandard()">
添加
</el-button>
</div>
<section-card title="评估标准">
<template #extra>
<el-button type="primary" plain icon="el-icon-plus" v-if="!readonly" @click="openStandard()">
添加评估标准
</el-button>
</template>
<el-table :data="configForm.standards" border class="config-table">
<el-table-column label="序号" type="index" width="90" align="center" />
<el-table-column label="信用等级" prop="creditLevel" width="120" align="center" />
@@ -146,6 +146,7 @@
</template>
</el-table-column>
</el-table>
</section-card>
</div>
<template #footer>
<el-button @click="configBox = false">{{ readonly ? '关闭' : '取消' }}</el-button>
@@ -163,12 +164,12 @@
>
<div class="category-detail">
<div class="category-line">评分类目：{{ currentCategory.categoryName }}</div>
<div class="section-head">
<span></span>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openItem()">
添加
</el-button>
</div>
<section-card title="评分项目">
<template #extra>
<el-button type="primary" plain icon="el-icon-plus" v-if="!readonly" @click="openItem()">
添加评分项目
</el-button>
</template>
<el-table :data="currentCategory.items" border class="config-table">
<el-table-column label="序号" type="index" width="90" align="center" />
<el-table-column label="评分项目" prop="itemName" width="180" />
@@ -190,6 +191,7 @@
</template>
</el-table-column>
</el-table>
</section-card>
</div>
<template #footer>
<el-button type="primary" @click="categoryBox = false">保存</el-button>
@@ -203,6 +205,7 @@
width="86%"
class="score-item-dialog"
>
<section-card title="评分项目详情">
<el-form
:model="itemForm"
label-position="right"
@@ -248,7 +251,8 @@
</div>
</div>
</el-form-item>
</el-form>
</el-form>
</section-card>
<template #footer>
<el-button @click="itemBox = false">取消</el-button>
<el-button type="primary" v-if="!readonly" @click="saveItem">保存</el-button>
@@ -262,8 +266,9 @@
width="76%"
:close-on-press-escape="false"
>
<el-form :model="standardForm" label-position="right" label-width="auto" :disabled="readonly">
<el-row :gutter="20">
<section-card title="评估标准设置">
<el-form :model="standardForm" label-position="right" label-width="auto" :disabled="readonly" class="standard-form archive-form">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="信用等级" required>
<el-select
@@ -350,7 +355,8 @@
show-word-limit
/>
</el-form-item>
</el-form>
</el-form>
</section-card>
<template #footer>
<el-button @click="standardBox = false">取消</el-button>
<el-button type="primary" v-if="!readonly" @click="saveStandard">保存</el-button>
@@ -1015,39 +1021,34 @@ export default {
<style lang="scss" scoped>
.score-config {
padding: 4px 12px 12px;
&__name-input {
width: min(420px, 100%);
}
}
.base-form {
max-width: 60%;
padding: 24px;
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin: 24px 0 12px;
.section-title {
margin: 0;
.archive-form {
:deep(.el-form-item__label) {
flex: 0 0 calc(6em + 24px) !important;
width: calc(6em + 24px) !important;
height: auto;
white-space: normal !important;
word-break: break-all;
overflow-wrap: anywhere;
line-height: 18px;
}
}
.section-title {
margin: 18px 0 12px;
font-size: 20px;
font-weight: 700;
line-height: 20px;
color: #303133;
}
:deep(.el-form-item) {
align-items: center;
}
.standard-head {
margin-top: 36px;
:deep(.el-form-item__content > .el-input),
:deep(.el-form-item__content > .el-select),
:deep(.el-form-item__content > .el-cascader),
:deep(.el-form-item__content > .el-input-number),
:deep(.el-form-item__content > .el-date-editor) {
width: 250px;
max-width: 100%;
}
}
.config-table {