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

style(customer-archive): 统一评分详情表弹窗label宽度并对齐控件宽度

Browse Source 
- 将评分详情表弹窗中el-form的label-width由"88"改为"88px"以严格固定宽度
- 强制score-detail-form中label样式flex、width、min-width均为88px，保留word-break实现长文本换行
- 调整单字段输入框、选择框、日期控件宽度由固定150px改为100%，确保各控件等宽撑满内容区域
- 保留临时额度申请使用期限双日期选择器flex布局，不受单字段宽度规则影响
- 客商档案页面“详细地址”输入框加入tooltip，仅文本溢出时显示完整地址，提升用户体验
- 通过ref、watch以及methods检测输入长度溢出以动态控制tooltip显示状态
This commit is contained in:
赵忠林
2026-09-02 17:37:00 +08:00
parent b83e3c358d
commit 685a37b2df
2 changed files with 198 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/vehicle/customer-archive.vue
+72 -28
View File
@@ -315,11 +315,20 @@
</el-col>
<el-col :span="6">
<el-form-item label="详细地址" prop="registeredDetailAddress" required>
<el-input
v-model="archiveForm.registeredDetailAddress"
maxlength="255"
placeholder="请输入详细地址"
/>
<el-tooltip
:content="archiveForm.registeredDetailAddress"
placement="top"
:disabled="!registeredDetailOverflow"
style="display: block; width: 100%"
>
<el-input
ref="registeredDetailInput"
v-model="archiveForm.registeredDetailAddress"
maxlength="255"
placeholder="请输入详细地址"
@input="checkOverflow('registeredDetailInput', 'registeredDetailOverflow')"
/>
</el-tooltip>
</el-form-item>
</el-col>
</el-row>
@@ -1006,14 +1015,22 @@
/>
</el-form-item>
<el-form-item label="详细地址" prop="registeredDetailAddress">
<el-input
v-model="invoiceForm.registeredDetailAddress"
readonly
maxlength="255"
placeholder="点击后弹出地图组件"
suffix-icon="el-icon-location"
@click="handleInvoiceRegisteredMapPick"
/>
<el-tooltip
:content="invoiceForm.registeredDetailAddress"
placement="top"
:disabled="!invoiceDetailOverflow"
style="display: block; width: 100%"
>
<el-input
ref="invoiceDetailInput"
v-model="invoiceForm.registeredDetailAddress"
readonly
maxlength="255"
placeholder="点击后弹出地图组件"
suffix-icon="el-icon-location"
@click="handleInvoiceRegisteredMapPick"
/>
</el-tooltip>
</el-form-item>
</el-col>
<el-col :span="12">
@@ -1088,7 +1105,6 @@
append-to-body
v-model="scoreBox"
width="92%"
top="3vh"
class="score-detail-dialog"
@closed="resetScoreDialog"
>
@@ -1097,7 +1113,7 @@
ref="scoreForm"
:model="currentScore"
label-position="right"
label-width="88"
label-width="88px"
:disabled="readonly"
class="score-detail-form"
>
@@ -1112,12 +1128,14 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="拟申请总资金使用额度（万元）" required>
<el-form-item label="拟申请总资金使用额度" required>
<el-input
v-model="currentScore.applyCreditLimit"
maxlength="18"
@input="value => handleScoreDecimalInput('applyCreditLimit', value)"
/>
>
<template #suffix>万元</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
@@ -1126,8 +1144,10 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="最大资金使用额度（万元）">
<el-input :model-value="formatScoreValue(currentScore.maxCreditLimit)" disabled />
<el-form-item label="最大资金使用额度">
<el-input :model-value="formatScoreValue(currentScore.maxCreditLimit)" disabled >
<template #suffix>万元</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
@@ -1136,15 +1156,17 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="临时申请额度（万元）">
<el-form-item label="临时申请额度">
<el-input
v-model="currentScore.tempApplyCreditLimit"
maxlength="18"
@input="value => handleScoreDecimalInput('tempApplyCreditLimit', value)"
/>
>
<template #suffix>万元</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="12">
<el-form-item label="临时额度申请使用期限">
<div class="score-detail-form__range">
<el-date-picker
@@ -1161,7 +1183,7 @@
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="12">
<el-form-item label="评分量化表" required>
<el-select
v-model="currentScore.quantificationId"
@@ -1568,6 +1590,8 @@ export default {
receiptForm: this.emptyReceiptAccount(),
invoiceIndex: -1,
invoiceForm: this.emptyInvoice(),
registeredDetailOverflow: false,
invoiceDetailOverflow: false,
qualificationFiles: [],
qualificationUploadFiles: [],
ocrQualificationUploadFiles: [],
@@ -2004,10 +2028,24 @@ export default {
return rows;
},
},
watch: {
'archiveForm.registeredDetailAddress'() {
this.$nextTick(() => this.checkOverflow('registeredDetailInput', 'registeredDetailOverflow'));
},
'invoiceForm.registeredDetailAddress'() {
this.$nextTick(() => this.checkOverflow('invoiceDetailInput', 'invoiceDetailOverflow'));
},
},
methods: {
hasPermission(code) {
return this.isAdmin || this.validData(this.permission[code], false);
},
// 检测输入框文本是否溢出，仅溢出时才允许 tooltip 显示完整地址
checkOverflow(refName, flag) {
const inst = this.$refs[refName];
const el = inst && inst.$el && inst.$el.querySelector('input');
this[flag] = !!(el && el.scrollWidth > el.clientWidth);
},
emptyArchive() {
return {
accessType: 'temporary',
@@ -3242,6 +3280,9 @@ export default {
this.invoiceIndex = index;
this.invoiceForm = row ? this.normalizeInvoice(row) : this.emptyInvoice();
this.invoiceBox = true;
this.$nextTick(() => {
this.$nextTick(() => this.checkOverflow('invoiceDetailInput', 'invoiceDetailOverflow'));
});
},
resetInvoice() {
this.invoiceIndex = -1;
@@ -4883,17 +4924,20 @@ export default {
}
:deep(.el-form-item__label) {
flex: 0 0 108px !important;
width: 108px !important;
min-width: 108px !important;
color: #70757a;
font-size: 15px;
white-space: normal;
white-space: normal !important;
word-break: break-all;
line-height: 1.4;
}
:deep(.el-input),
:deep(.el-select),
:deep(.el-date-editor) {
width: 150px;
:deep(.el-form-item__content > .el-input),
:deep(.el-form-item__content > .el-select),
:deep(.el-form-item__content > .el-date-editor) {
width: 100%;
}
}