🐛 付款申请表单结算单号改为只读输入框+整框可点开选择弹窗,消除请输入歧义

This commit is contained in:
2026-10-15 10:48:51 +08:00
parent 5569f373c5
commit 19972aa8d8
+25 -29
View File
@@ -36,25 +36,20 @@
<el-col v-if="isSettlementRelatedType" :span="6"
><el-form-item label="结算单号" prop="referenceId">
<div class="payment-form-page__settlement-nos">
<el-select
ref="settlementNoSelectRef"
:model-value="referenceSettlementNos"
multiple
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="1"
:disabled="readonly"
placeholder="请输入"
class="payment-form-page__settlement-select"
@visible-change="handleSettlementSelectVisible"
<el-tooltip
:content="referenceLabel"
placement="top"
:disabled="!referenceLabel || referenceSettlementCount < 2"
>
<el-option
v-for="item in referenceSettlementLinks"
:key="`${item.id || item.settlementNo}`"
:label="item.settlementNo"
:value="item.settlementNo"
<el-input
:model-value="referenceDisplayText"
readonly
:disabled="readonly"
placeholder="请选择结算单号"
class="payment-form-page__settlement-input"
@click="!readonly && openReference()"
/>
</el-select>
</el-tooltip>
<el-button
v-if="!readonly"
class="payment-form-page__settlement-select-btn"
@@ -952,6 +947,14 @@ export default {
referenceSettlementNos() {
return this.referenceSettlementLinks.map(item => item.settlementNo).filter(Boolean);
},
referenceSettlementCount() {
return this.referenceSettlementNos.length;
},
// 结算单号展示:单张显示单号;多张仅提示数量,明细在下方「结算信息」表,悬停可看全部单号
referenceDisplayText() {
if (this.referenceSettlementCount > 1) return `已选 ${this.referenceSettlementCount} 张结算单`;
return this.referenceLabel;
},
settlementRows() {
if (this.referenceRows.length) {
return this.referenceRows.map(item => ({
@@ -2287,13 +2290,6 @@ export default {
}
return Promise.all(loaders);
},
handleSettlementSelectVisible(visible) {
// 结算单号仅做展示,通过「选择」按钮维护,避免下拉改值
if (!visible) return;
this.$nextTick(() => {
this.$refs.settlementNoSelectRef?.blur?.();
});
},
handleReferenceSearch() {
this.formalPage.current = 1;
this.prePage.current = 1;
@@ -2741,15 +2737,15 @@ export default {
width: 100%;
min-height: 32px;
}
.payment-form-page__settlement-select {
.payment-form-page__settlement-input {
flex: 1;
min-width: 0;
}
.payment-form-page__settlement-select :deep(.el-select__wrapper) {
width: 100%;
.payment-form-page__settlement-input :deep(.el-input__inner) {
cursor: pointer;
}
.payment-form-page__settlement-select :deep(.el-tag__close) {
display: none;
.payment-form-page__settlement-input.is-disabled :deep(.el-input__inner) {
cursor: not-allowed;
}
.payment-form-page__settlement-select-btn {
flex-shrink: 0;