style(settlement): 优化预结算单选择弹窗及支付申请表样式
- 在预结算单选择弹窗中添加el-card包裹form表单,提升视觉层次 - 修改支付申请表结算单选择的placeholder文本为“请输入” - 使用el-card包裹支付申请表中的参考搜索区块,增强样式一致性 - 调整表单验证提示文本,将“请选择结算单”改为“请输入”
This commit is contained in:
@@ -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"
|
||||
@@ -438,7 +433,7 @@
|
||||
></el-table
|
||||
>
|
||||
<div v-else>
|
||||
<div class="payment-form-page__reference-search">
|
||||
<el-card class="payment-form-page__reference-search">
|
||||
<el-form
|
||||
:model="referenceQuery"
|
||||
label-position="right"
|
||||
@@ -476,7 +471,7 @@
|
||||
<el-button @click="resetReferenceSearch">清空</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-tabs v-model="referenceTab" @tab-change="handleReferenceTabChange">
|
||||
<el-tab-pane v-if="canSelectFormalSettlement" label="正式结算单" name="formal">
|
||||
<el-table
|
||||
@@ -935,6 +930,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 => ({
|
||||
@@ -2247,13 +2250,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;
|
||||
@@ -2701,15 +2697,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;
|
||||
|
||||
@@ -691,24 +691,27 @@
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="candidate.visible" title="选择预结算单" width="88%" append-to-body>
|
||||
<el-form
|
||||
:model="candidate.query"
|
||||
inline
|
||||
label-position="right"
|
||||
label-width="88px"
|
||||
class="formal-editor__candidate-search"
|
||||
>
|
||||
<el-form-item label="预结算单号"
|
||||
<el-card>
|
||||
<el-form
|
||||
:model="candidate.query"
|
||||
inline
|
||||
label-position="right"
|
||||
label-width="88px"
|
||||
class="formal-editor__candidate-search"
|
||||
>
|
||||
<el-form-item label="预结算单号"
|
||||
><el-input v-model="candidate.query.preSettlementNo" clearable
|
||||
/></el-form-item>
|
||||
<el-form-item label="合同编号"
|
||||
/></el-form-item>
|
||||
<el-form-item label="合同编号"
|
||||
><el-input v-model="candidate.query.contractNo" clearable
|
||||
/></el-form-item>
|
||||
<el-form-item
|
||||
/></el-form-item>
|
||||
<el-form-item
|
||||
><el-button @click="resetCandidates">重置</el-button
|
||||
><el-button type="primary" @click="loadCandidates">查询</el-button></el-form-item
|
||||
>
|
||||
</el-form>
|
||||
>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-table
|
||||
ref="candidateTable"
|
||||
v-loading="candidate.loading"
|
||||
|
||||
Reference in New Issue
Block a user