From 6eab96b6207ad98b64fd58832033aa6fa1e43a1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Wed, 14 Oct 2026 16:53:13 +0800
Subject: [PATCH] =?UTF-8?q?style(settlement):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=A2=84=E7=BB=93=E7=AE=97=E5=8D=95=E9=80=89=E6=8B=A9=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=8F=8A=E6=94=AF=E4=BB=98=E7=94=B3=E8=AF=B7=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在预结算单选择弹窗中添加el-card包裹form表单，提升视觉层次
- 修改支付申请表结算单选择的placeholder文本为“请输入”
- 使用el-card包裹支付申请表中的参考搜索区块，增强样式一致性
- 调整表单验证提示文本，将“请选择结算单”改为“请输入”
---
 .../payment/payment-application-form.vue      | 58 +++++++++----------
 .../components/formal-settlement-editor.vue   | 31 +++++-----
 2 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/views/payment/payment-application-form.vue b/src/views/payment/payment-application-form.vue
index f2e904b..8dd43dc 100644
--- a/src/views/payment/payment-application-form.vue
+++ b/src/views/payment/payment-application-form.vue
@@ -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;
diff --git a/src/views/settlement/components/formal-settlement-editor.vue b/src/views/settlement/components/formal-settlement-editor.vue
index 6225372..e55cf83 100644
--- a/src/views/settlement/components/formal-settlement-editor.vue
+++ b/src/views/settlement/components/formal-settlement-editor.vue
@@ -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"