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

refactor(vehicle): 优化customer-archive弹窗结构与样式

Browse Source 
- 使用<section-card>替换旧版灰底分组块与内层白卡，统一表单分组样式
- 删除冗余的基本信息大标题，减少嵌套层级
- 将客商材料和变更记录区域改用<section-card>，操作按钮通过插槽放置卡头右侧
- 清理无效的scoped样式，简化样式管理
- 统一弹窗内部灰底背景并增加16px内边距，与project-apply保持一致
- 确认vue文件与sass编译无误，保证改动稳定性
This commit is contained in:
赵忠林
2026-08-06 15:09:44 +08:00
parent 8a262d9d41
commit 53676a1150
3 changed files with 39 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -142,16 +142,14 @@
: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-col :span="8">
<el-form-item label="客商编号" prop="customerCode">
<el-input v-model="archiveForm.customerCode" disabled placeholder="保存后自动生成" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="客商性质" prop="customerNature">
<el-select v-model="archiveForm.customerNature" filterable clearable>
<el-option
@@ -163,7 +161,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="统一社会信用代码" prop="unifiedCreditCode">
<el-input
v-model="archiveForm.unifiedCreditCode"
@@ -177,12 +175,12 @@
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="客商名称" prop="fullName">
<el-input v-model="archiveForm.fullName" maxlength="100" show-word-limit />
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="客商类型" prop="customerType">
<el-select v-model="archiveForm.customerType" filterable clearable>
<el-option
@@ -194,12 +192,12 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="企业法人" prop="legalPerson">
<el-input v-model="archiveForm.legalPerson" maxlength="10" show-word-limit />
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="经营范围" prop="businessScope">
<el-select v-model="archiveForm.businessScope" multiple filterable clearable>
<el-option
@@ -211,7 +209,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="营业期限" prop="businessEndDate" required>
<div class="business-term-field">
<el-date-picker
@@ -230,12 +228,12 @@
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="助记码" prop="mnemonicCode">
<el-input v-model="archiveForm.mnemonicCode" maxlength="15" show-word-limit />
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="客户简称" prop="shortName">
<el-input v-model="archiveForm.shortName" maxlength="20" show-word-limit />
</el-form-item>
@@ -262,10 +260,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">
@@ -294,12 +291,11 @@
</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-col :span="8">
<el-form-item label="注册资金(万元)" prop="registeredCapital">
<el-input
v-model="archiveForm.registeredCapital"
@@ -308,7 +304,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="开票税点" prop="invoiceTaxRate">
<el-input
v-model="archiveForm.invoiceTaxRate"
@@ -317,12 +313,12 @@
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="客户等级" prop="customerLevel">
<el-input v-model="archiveForm.customerLevel" disabled />
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="最大资金使用额度(万元)" prop="maxCreditLimit">
<el-input
v-model="archiveForm.maxCreditLimit"
@@ -332,7 +328,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item label="申请总资金使用额度(万元)" prop="applyCreditLimit">
<el-input
v-model="archiveForm.applyCreditLimit"
@@ -342,10 +338,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">
@@ -358,7 +353,7 @@
</el-form-item>
</el-col>
</el-row>
</div>
</section-card>
</el-form>
<el-tabs v-model="activeTab" class="archive-tabs">
@@ -543,9 +538,8 @@
</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"
@@ -555,7 +549,7 @@
OCR上传识别
</el-button>
</div>
</div>
</template>
<el-alert
type="info"
:closable="false"
@@ -622,17 +616,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>
@@ -3300,28 +3293,6 @@ 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,
.archive-form__address {
@@ -3355,22 +3326,11 @@ 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 {
@@ -3510,13 +3470,6 @@ export default {
}
}
.customer-material-section {
margin-top: 18px;
}
.change-record-section {
margin-top: 18px;
}
.score-list-table,
.contact-table,