发放计划审核详情客群和权益改为弹窗列表展示，支持查看详情跳转

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

工作空间/产研/权益/汇丰全行/产品原型/pc-demo/src/views/CampaignAuditDetail.vue

@@ -33,25 +33,14 @@
           <el-descriptions-item label="开始时间">{{ snapshot.startTime || '-' }}</el-descriptions-item>
           <el-descriptions-item label="结束时间">{{ snapshot.endTime || '-' }}</el-descriptions-item>
           <el-descriptions-item label="选择客群" :span="2">
-            <template v-if="(snapshot.crowdList || []).length">
-              <el-tag
-                v-for="cid in snapshot.crowdList"
-                :key="cid"
-                size="small"
-                type="info"
-                style="margin-right:6px;margin-top:4px"
-              >{{ crowdLabel(cid) }}</el-tag>
+            <template v-if="crowdTableData.length">
+              <el-button type="text" @click="crowdDialogVisible = true">查看客群列表（{{ crowdTableData.length }}）</el-button>
             </template>
             <span v-else>-</span>
           </el-descriptions-item>
           <el-descriptions-item label="选择权益" :span="2">
-            <template v-if="(snapshot.equityList || []).length">
-              <el-tag
-                v-for="pid in snapshot.equityList"
-                :key="pid"
-                size="small"
-                style="margin-right:6px;margin-top:4px"
-              >{{ equityLabel(pid) }}</el-tag>
+            <template v-if="equityTableData.length">
+              <el-button type="text" @click="equityDialogVisible = true">查看权益列表（{{ equityTableData.length }}）</el-button>
             </template>
             <span v-else>-</span>
           </el-descriptions-item>
@@ -82,6 +71,42 @@
         </template>
       </div>
     </el-card>
+
+    <el-dialog v-model="crowdDialogVisible" title="客群列表" width="1060px" destroy-on-close>
+      <el-table :data="crowdTableData" stripe border size="small" style="width:100%">
+        <el-table-column prop="id" label="客群编号" width="160" />
+        <el-table-column prop="name" label="客群名称" min-width="160" show-overflow-tooltip />
+        <el-table-column label="类型" width="100" align="center">
+          <template #default="scope">{{ scope.row.ruleGroups ? '规则圈选' : '手动导入' }}</template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="任务创建时间" width="170" align="center" />
+        <el-table-column prop="startDate" label="任务开始时间" width="130" align="center" />
+        <el-table-column prop="endDate" label="任务结束时间" width="130" align="center" />
+        <el-table-column label="操作" width="80" align="center">
+          <template #default="scope">
+            <el-button type="text" size="small" @click="viewCrowd(scope.row.id)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog v-model="equityDialogVisible" title="权益列表" width="720px" destroy-on-close>
+      <el-table :data="equityTableData" stripe border size="small" style="width:100%">
+        <el-table-column prop="productId" label="权益编号" width="120" />
+        <el-table-column prop="equityName" label="权益名称" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="productType" label="商品类型" width="100" align="center">
+          <template #default="scope">{{ scope.row.productType || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="stockCount" label="库存数" width="100" align="center">
+          <template #default="scope">{{ scope.row.stockCount ?? '-' }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="80" align="center">
+          <template #default="scope">
+            <el-button type="text" size="small" @click="viewEquity(scope.row.productId)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
@@ -100,7 +125,7 @@ const SMS_TEMPLATE_NAME_MAP = {
 export default {
   name: 'CampaignAuditDetail',
   data() {
-    return { audit: null, equityOptions: [] }
+    return { audit: null, equityOptions: [], crowdDialogVisible: false, equityDialogVisible: false }
   },
   computed: {
     crowdOptions() {
@@ -125,6 +150,14 @@ export default {
     },
     smsTemplateName() {
       return SMS_TEMPLATE_NAME_MAP[this.snapshot.smsTemplateId] || this.snapshot.smsTemplateId || '-'
+    },
+    crowdTableData() {
+      const ids = this.snapshot.crowdList || []
+      return ids.map(id => this.crowdOptions.find(c => c.id === id)).filter(Boolean)
+    },
+    equityTableData() {
+      const ids = this.snapshot.equityList || []
+      return ids.map(id => this.equityOptions.find(e => e.productId === id)).filter(Boolean)
     }
   },
   async created() {
@@ -190,6 +223,12 @@ export default {
         }).catch(() => {})
       }).catch(() => {})
     },
+    viewCrowd(id) {
+      this.$router.push(`/customization/hsbc/crowd-tasks/view/${id}`)
+    },
+    viewEquity(productId) {
+      this.$router.push(`/customization/hsbc/equity-products/view/${productId}`)
+    },
     goBack() {
       this.$router.push('/customization/hsbc/campaign-audit')
     }