feat: MeetingDetail 参会人表改用 GrTable + 移除合计行

GrTable 增强 (sibling subagent 已完成重构):
- mobile 模式从 el-table expand 行改为 el-descriptions 卡片列表
- 每行一张卡, 显示所有列
- 通过 extractDefaultSlot 抓取自定义 #default slot 的 vnode
- renderTemplate 在 mobile 卡片里渲染原始 vnode (含 maskPhone/maskBankCard/
  maskIdCard/openPreview/el-link/el-tag 等自定义 template)
- 支持无 prop 自定义 template 列在 mobile 正确渲染

MeetingDetail 改动:
- el-table → GrTable (show-summary 移除, 不要合计行)
- 移除 attendeeSummary 函数 (合计不再需要)
- 移除之前 mobile attendee-table 紧凑规则 (mobile 走卡片分支, 不需要)
- v-bind $attrs 透传 v-loading/border/size 给桌面 el-table
- 修复 GrTable 闭合标签 (</el-table> → </GrTable>)

桌面端 el-table 完整渲染不变 (sibling 完整保留透传逻辑)
mobile 端: 每行一张 el-descriptions 卡, 27+ 列全部展示, 自定义 template 正常渲染
This commit is contained in:
guoju0808
2026-08-26 12:14:25 +00:00
parent 2fa91cf770
commit 8542d545d5
2 changed files with 68 additions and 64 deletions
+4 -43
View File
@@ -78,7 +78,7 @@
让内容超出时容器内出现横向滚动条, 不影响外层 grid 布局.
-->
<div class="attendee-table-wrap">
<el-table :data="attendeeRows" v-loading="attendeeLoading" border size="small" style="width: 100%;" show-summary :summary-method="attendeeSummary" @selection-change="onAttendeeSelectionChange" class="attendee-table">
<GrTable :data="attendeeRows" v-loading="attendeeLoading" border size="small" @selection-change="onAttendeeSelectionChange" class="attendee-table">
<el-table-column v-if="!isSponsor && !isReadonly" type="selection" width="42" />
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="name" label="医生" min-width="90" />
@@ -171,7 +171,7 @@
<template #empty>
<span class="text-muted">暂无参会人, 点击右上"新增参会人"按手机号添加</span>
</template>
</el-table>
</GrTable>
</div>
</div>
@@ -563,7 +563,7 @@ import { ElMessage } from 'element-plus'
import OssFileUploader from '@/components/OssFileUploader.vue'
import CameraQrUpload from '@/components/CameraQrUpload.vue'
import OssImageUploader from '@/components/OssImageUploader.vue'
import IdCardUploader from '@/components/IdCardUploader.vue'
import GrTable from '@/components/GrTable.vue'
import ImportResultDialog from '@/components/ImportResultDialog.vue'
import Preview from '@/components/Preview.vue'
import DoctorTitleSelect from '@/components/DoctorTitleSelect.vue'
@@ -874,15 +874,7 @@ const meetingFee = computed(() => {
return { total, useMain: false }
})
/** 参会人表格底部合计行: "医生"列显示"合计", "应发金额"列显示劳务费合计 */
function attendeeSummary({ columns }) {
const sums = columns.map(() => '')
const nameIdx = columns.findIndex(c => c.label === '医生')
const feeIdx = columns.findIndex(c => c.label === '应发金额')
if (nameIdx >= 0) sums[nameIdx] = '合计'
if (feeIdx >= 0) sums[feeIdx] = '¥ ' + laborFeeTotal.value.toFixed(2)
return sums
}
/** 已勾选的参会人 (批量邀请/推送共用) */
const selectedAttendees = ref([])
@@ -2169,36 +2161,5 @@ onBeforeUnmount(stopFeePolling)
/* 表格外层 wrap: 确保手机端表格能横向滚 */
.attendee-table-wrap { -webkit-overflow-scrolling: touch; }
/* 参会人表格 mobile: 字号缩到 11px, padding 紧凑, 行高紧凑 */
.attendee-table {
font-size: 11px !important;
}
.attendee-table :deep(.el-table th.el-table__cell),
.attendee-table :deep(.el-table td.el-table__cell) {
padding: 4px 3px !important;
font-size: 11px !important;
}
.attendee-table :deep(.el-table .row-actions) {
flex-direction: column !important;
align-items: flex-start !important;
gap: 1px !important;
}
.attendee-table :deep(.el-table .row-actions .el-link) {
font-size: 11px !important;
padding: 0 2px !important;
}
/* 标签字号缩窄 */
.attendee-table :deep(.el-table .el-tag) {
font-size: 10px !important;
padding: 0 4px !important;
height: 18px !important;
line-height: 18px !important;
}
/* 摘要行 (el-table__footer) 字号缩窄 */
.attendee-table :deep(.el-table .el-table__footer-wrapper td) {
font-size: 11px !important;
padding: 6px 3px !important;
}
}
</style>