From a035a9d6ad804bb41f371965e2263c73403b5dfc Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Thu, 30 Jul 2026 14:02:11 +0800
Subject: [PATCH] fix(web-admin): show receive account details below the form
 select.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../oa-approval/OaReceiveAccountSelect.vue    | 302 +++++++++++++-----
 1 file changed, 228 insertions(+), 74 deletions(-)

diff --git a/web-admin/src/components/oa-approval/OaReceiveAccountSelect.vue b/web-admin/src/components/oa-approval/OaReceiveAccountSelect.vue
index 70363430..17e24775 100644
--- a/web-admin/src/components/oa-approval/OaReceiveAccountSelect.vue
+++ b/web-admin/src/components/oa-approval/OaReceiveAccountSelect.vue
@@ -2,79 +2,166 @@
 <template>
   <div class="oa-receive-account-select">
     <template v-if="disabled">
-      <span class="oa-receive-account-select__readonly">{{ displayText || '—' }}</span>
-    </template>
-
-    <template v-else-if="isNarrow">
-      <button type="button" class="oa-receive-account-select__trigger" @click="openDrawer">
-        <span v-if="displayText" class="oa-receive-account-select__trigger-text">{{
-          displayText
-        }}</span>
-        <span v-else class="oa-receive-account-select__placeholder">请选择收款账户</span>
-        <span class="oa-receive-account-select__chev">▾</span>
-      </button>
-      <el-drawer
-        v-model="drawerVisible"
-        title="选择收款账户"
-        direction="btt"
-        size="75%"
-        append-to-body
-        :close-on-click-modal="false"
-        class="oa-receive-account-drawer"
-        modal-class="protocol-dialog-mask"
-      >
-        <el-input
-          v-model="keyword"
-          clearable
-          placeholder="搜索账户名称或账号"
-          class="oa-receive-account-select__search"
-        />
-        <div class="oa-receive-account-select__list">
-          <label
-            v-for="a in filteredOptions"
-            :key="a.id"
-            class="oa-receive-account-select__row"
-          >
-            <el-checkbox
-              :model-value="pendingIds.includes(a.id)"
-              @change="(v: boolean | string | number) => onNarrowCheck(a.id, !!v)"
-            />
-            <span class="oa-receive-account-select__row-label">{{ a.label }}</span>
-          </label>
-          <div v-if="!filteredOptions.length" class="oa-receive-account-select__empty">
-            暂无收款账户
+      <div v-if="normalized.length" class="oa-receive-account-select__detail">
+        <div
+          v-for="item in normalized"
+          :key="item.id"
+          class="oa-receive-account-select__card"
+        >
+          <div class="oa-receive-account-select__card-title">
+            {{ ACCOUNT_TYPE_LABEL[item.accountType] || item.accountType }}
+          </div>
+          <div class="oa-receive-account-select__card-grid">
+            <div class="oa-receive-account-select__field">
+              <span class="k">户名</span>
+              <span class="v">{{ item.accountName || '—' }}</span>
+            </div>
+            <div class="oa-receive-account-select__field">
+              <span class="k">账号</span>
+              <span class="v">{{ item.accountNo || '—' }}</span>
+            </div>
+            <template v-if="item.accountType !== 'alipay'">
+              <div class="oa-receive-account-select__field">
+                <span class="k">银行</span>
+                <span class="v">{{ item.bankName || '—' }}</span>
+              </div>
+              <div class="oa-receive-account-select__field">
+                <span class="k">省 / 市</span>
+                <span class="v">{{ regionText(item) }}</span>
+              </div>
+              <div class="oa-receive-account-select__field oa-receive-account-select__field--full">
+                <span class="k">支行</span>
+                <span class="v">{{ item.bankBranch || '—' }}</span>
+              </div>
+            </template>
+            <div
+              v-if="item.remark"
+              class="oa-receive-account-select__field oa-receive-account-select__field--full"
+            >
+              <span class="k">备注</span>
+              <span class="v">{{ item.remark }}</span>
+            </div>
           </div>
         </div>
-        <template #footer>
-          <el-button @click="drawerVisible = false">
-            <el-icon><Close /></el-icon>
-            取消
-          </el-button>
-          <el-button type="primary" @click="confirmDrawer">
-            <el-icon><Check /></el-icon>
-            确定
-          </el-button>
-        </template>
-      </el-drawer>
+      </div>
+      <span v-else class="oa-receive-account-select__readonly">—</span>
     </template>
 
-    <el-select
-      v-else
-      :model-value="selectModel"
-      class="oa-receive-account-select__select"
-      filterable
-      clearable
-      multiple
-      placeholder="请选择收款账户"
-      @update:model-value="onSelectChange"
-    >
-      <el-option
-        v-for="a in accountOptions"
-        :key="a.id"
-        :label="a.label"
-        :value="a.id"
-      />
-    </el-select>
+    <template v-else>
+      <template v-if="isNarrow">
+        <button type="button" class="oa-receive-account-select__trigger" @click="openDrawer">
+          <span v-if="selectSummary" class="oa-receive-account-select__trigger-text">{{
+            selectSummary
+          }}</span>
+          <span v-else class="oa-receive-account-select__placeholder">请选择收款账户</span>
+          <span class="oa-receive-account-select__chev">▾</span>
+        </button>
+        <el-drawer
+          v-model="drawerVisible"
+          title="选择收款账户"
+          direction="btt"
+          size="75%"
+          append-to-body
+          :close-on-click-modal="false"
+          class="oa-receive-account-drawer"
+          modal-class="protocol-dialog-mask"
+        >
+          <el-input
+            v-model="keyword"
+            clearable
+            placeholder="搜索账户名称或账号"
+            class="oa-receive-account-select__search"
+          />
+          <div class="oa-receive-account-select__list">
+            <label
+              v-for="a in filteredOptions"
+              :key="a.id"
+              class="oa-receive-account-select__row"
+            >
+              <el-checkbox
+                :model-value="pendingIds.includes(a.id)"
+                @change="(v: boolean | string | number) => onNarrowCheck(a.id, !!v)"
+              />
+              <span class="oa-receive-account-select__row-label">{{ a.label }}</span>
+            </label>
+            <div v-if="!filteredOptions.length" class="oa-receive-account-select__empty">
+              暂无收款账户
+            </div>
+          </div>
+          <template #footer>
+            <el-button @click="drawerVisible = false">
+              <el-icon><Close /></el-icon>
+              取消
+            </el-button>
+            <el-button type="primary" @click="confirmDrawer">
+              <el-icon><Check /></el-icon>
+              确定
+            </el-button>
+          </template>
+        </el-drawer>
+      </template>
+
+      <el-select
+        v-else
+        :model-value="selectModel"
+        class="oa-receive-account-select__select"
+        filterable
+        clearable
+        multiple
+        placeholder="请选择收款账户"
+        @update:model-value="onSelectChange"
+      >
+        <el-option
+          v-for="a in accountOptions"
+          :key="a.id"
+          :label="a.label"
+          :value="a.id"
+        />
+      </el-select>
+
+      <div v-if="normalized.length" class="oa-receive-account-select__detail">
+        <div
+          v-for="item in normalized"
+          :key="item.id"
+          class="oa-receive-account-select__card"
+        >
+          <div class="oa-receive-account-select__card-title">
+            {{ ACCOUNT_TYPE_LABEL[item.accountType] || item.accountType }}
+          </div>
+          <div class="oa-receive-account-select__card-grid">
+            <div class="oa-receive-account-select__field">
+              <span class="k">户名</span>
+              <span class="v">{{ item.accountName || '—' }}</span>
+            </div>
+            <div class="oa-receive-account-select__field">
+              <span class="k">账号</span>
+              <span class="v">{{ item.accountNo || '—' }}</span>
+            </div>
+            <template v-if="item.accountType !== 'alipay'">
+              <div class="oa-receive-account-select__field">
+                <span class="k">银行</span>
+                <span class="v">{{ item.bankName || '—' }}</span>
+              </div>
+              <div class="oa-receive-account-select__field">
+                <span class="k">省 / 市</span>
+                <span class="v">{{ regionText(item) }}</span>
+              </div>
+              <div class="oa-receive-account-select__field oa-receive-account-select__field--full">
+                <span class="k">支行</span>
+                <span class="v">{{ item.bankBranch || '—' }}</span>
+              </div>
+            </template>
+            <div
+              v-if="item.remark"
+              class="oa-receive-account-select__field oa-receive-account-select__field--full"
+            >
+              <span class="k">备注</span>
+              <span class="v">{{ item.remark }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -84,7 +171,7 @@
   import { ElMessage } from 'element-plus'
   import { fetchOaReceiveAccountOptions } from '@/api/oaApproval'
   import {
-    formatReceiveAccountDisplay,
+    ACCOUNT_TYPE_LABEL,
     normalizeReceiveAccountModelValue,
     optionLabelFromRow,
     snapshotFromRow,
@@ -116,10 +203,18 @@
 
   const normalized = computed(() => normalizeReceiveAccountModelValue(props.modelValue))
 
-  const displayText = computed(() => formatReceiveAccountDisplay(normalized.value))
-
   const selectModel = computed(() => normalized.value.map((x) => x.id))
 
+  const selectSummary = computed(() => {
+    const n = normalized.value.length
+    if (!n) return ''
+    if (n === 1) {
+      const x = normalized.value[0]
+      return optionLabelFromRow(x)
+    }
+    return `已选 ${n} 个账户`
+  })
+
   const filteredOptions = computed(() => {
     const q = keyword.value.trim().toLowerCase()
     if (!q) return accountOptions.value
@@ -128,6 +223,13 @@
     )
   })
 
+  function regionText(item: ReceiveAccountSnapshot) {
+    const p = item.bankProvince.trim()
+    const c = item.bankCity.trim()
+    if (p && c) return `${p} / ${c}`
+    return p || c || '—'
+  }
+
   function emitFromIds(ids: string[]) {
     const items: ReceiveAccountSnapshot[] = []
     const seen = new Set<string>()
@@ -256,7 +358,6 @@
     color: var(--mint-text, #0f172a);
     font-size: 14px;
     line-height: 1.5;
-    white-space: pre-line;
     word-break: break-all;
   }
 
@@ -267,7 +368,6 @@
   .oa-receive-account-select__trigger-text {
     min-width: 0;
     color: var(--mint-text, #0f172a);
-    white-space: pre-line;
     word-break: break-all;
   }
 
@@ -307,10 +407,64 @@
     text-align: center;
   }
 
+  .oa-receive-account-select__detail {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 10px;
+  }
+
+  .oa-receive-account-select__card {
+    padding: 10px 12px;
+    border: 1px solid var(--mint-border, #d9e8e2);
+    border-radius: 8px;
+    background: var(--mint-row-alt, #fafafa);
+  }
+
+  .oa-receive-account-select__card-title {
+    margin-bottom: 8px;
+    color: var(--mint-primary-dark, #059669);
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .oa-receive-account-select__card-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px 16px;
+  }
+
+  .oa-receive-account-select__field {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .oa-receive-account-select__field--full {
+    grid-column: 1 / -1;
+  }
+
+  .oa-receive-account-select__field .k {
+    color: var(--mint-text-muted, #64748b);
+    font-size: 12px;
+  }
+
+  .oa-receive-account-select__field .v {
+    color: var(--mint-text, #1e293b);
+    font-size: 13px;
+    line-height: 1.5;
+    word-break: break-all;
+  }
+
   @media (max-width: 767px) {
     .oa-receive-account-select__select :deep(.el-select__wrapper),
     .oa-receive-account-select__trigger {
       min-height: 44px;
     }
+
+    .oa-receive-account-select__card-grid {
+      grid-template-columns: 1fr;
+    }
   }
 </style>