style(settlement): 优化预结算单选择弹窗及支付申请表样式

- 在预结算单选择弹窗中添加el-card包裹form表单,提升视觉层次
- 修改支付申请表结算单选择的placeholder文本为“请输入”
- 使用el-card包裹支付申请表中的参考搜索区块,增强样式一致性
- 调整表单验证提示文本,将“请选择结算单”改为“请输入”
This commit is contained in:
2026-10-14 16:53:20 +08:00
parent 6eab96b620
commit 9919fb9c89
+30 -26
View File
@@ -36,20 +36,25 @@
<el-col v-if="isSettlementRelatedType" :span="6" <el-col v-if="isSettlementRelatedType" :span="6"
><el-form-item label="结算单号" prop="referenceId"> ><el-form-item label="结算单号" prop="referenceId">
<div class="payment-form-page__settlement-nos"> <div class="payment-form-page__settlement-nos">
<el-tooltip <el-select
:content="referenceLabel" ref="settlementNoSelectRef"
placement="top" :model-value="referenceSettlementNos"
:disabled="!referenceLabel || referenceSettlementCount < 2" multiple
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="1"
:disabled="readonly"
placeholder="请输入"
class="payment-form-page__settlement-select"
@visible-change="handleSettlementSelectVisible"
> >
<el-input <el-option
:model-value="referenceDisplayText" v-for="item in referenceSettlementLinks"
readonly :key="`${item.id || item.settlementNo}`"
:disabled="readonly" :label="item.settlementNo"
placeholder="请选择结算单号" :value="item.settlementNo"
class="payment-form-page__settlement-input"
@click="!readonly && openReference()"
/> />
</el-tooltip> </el-select>
<el-button <el-button
v-if="!readonly" v-if="!readonly"
class="payment-form-page__settlement-select-btn" class="payment-form-page__settlement-select-btn"
@@ -930,14 +935,6 @@ export default {
referenceSettlementNos() { referenceSettlementNos() {
return this.referenceSettlementLinks.map(item => item.settlementNo).filter(Boolean); 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() { settlementRows() {
if (this.referenceRows.length) { if (this.referenceRows.length) {
return this.referenceRows.map(item => ({ return this.referenceRows.map(item => ({
@@ -1061,7 +1058,7 @@ export default {
!this.form.preSettlementId && !this.form.preSettlementId &&
!this.form.preSettlementIds?.length !this.form.preSettlementIds?.length
) { ) {
callback(new Error('请选择结算单')); callback(new Error('请输入'));
return; return;
} }
callback(); callback();
@@ -2250,6 +2247,13 @@ export default {
} }
return Promise.all(loaders); return Promise.all(loaders);
}, },
handleSettlementSelectVisible(visible) {
// 结算单号仅做展示,通过「选择」按钮维护,避免下拉改值
if (!visible) return;
this.$nextTick(() => {
this.$refs.settlementNoSelectRef?.blur?.();
});
},
handleReferenceSearch() { handleReferenceSearch() {
this.formalPage.current = 1; this.formalPage.current = 1;
this.prePage.current = 1; this.prePage.current = 1;
@@ -2697,15 +2701,15 @@ export default {
width: 100%; width: 100%;
min-height: 32px; min-height: 32px;
} }
.payment-form-page__settlement-input { .payment-form-page__settlement-select {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
.payment-form-page__settlement-input :deep(.el-input__inner) { .payment-form-page__settlement-select :deep(.el-select__wrapper) {
cursor: pointer; width: 100%;
} }
.payment-form-page__settlement-input.is-disabled :deep(.el-input__inner) { .payment-form-page__settlement-select :deep(.el-tag__close) {
cursor: not-allowed; display: none;
} }
.payment-form-page__settlement-select-btn { .payment-form-page__settlement-select-btn {
flex-shrink: 0; flex-shrink: 0;