From dcf4f83ed078a3d21bbda7870955bd2d64dd8851 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Mon, 17 Aug 2026 11:53:29 +0800
Subject: [PATCH] feat: copy pre-transit sample views under production.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../PreTransitProtocolCardList.vue            | 1422 +++++++++++++++++
 .../production/pre-transit-sample/index.vue   |  284 ++++
 2 files changed, 1706 insertions(+)
 create mode 100644 web-admin/src/views/production/pre-transit-sample/PreTransitProtocolCardList.vue
 create mode 100644 web-admin/src/views/production/pre-transit-sample/index.vue

diff --git a/web-admin/src/views/production/pre-transit-sample/PreTransitProtocolCardList.vue b/web-admin/src/views/production/pre-transit-sample/PreTransitProtocolCardList.vue
new file mode 100644
index 00000000..f8f6156a
--- /dev/null
+++ b/web-admin/src/views/production/pre-transit-sample/PreTransitProtocolCardList.vue
@@ -0,0 +1,1422 @@
+<!-- 生产管理 — 预产及在途样本 — 协议卡片列表（紧凑卡片 + 行内下方展开详情） -->
+<template>
+  <div class="list-body list-wrap">
+    <div v-loading="loading" ref="listRef" class="protocol-card-section">
+      <div v-if="rows.length" class="protocol-card-list">
+        <div
+          v-for="(group, groupIndex) in groupedRows"
+          :key="groupIndex"
+          class="protocol-card-row-group"
+        >
+          <div class="protocol-card-row">
+            <article
+              v-for="{ row, index } in group.items"
+              :key="rowKey(row)"
+              class="protocol-card is-compact"
+              :class="{
+                'is-active': isExpanded(row),
+                'is-urgent': isUrgentCard(row),
+                'has-special-sample': getSpecialSampleItems(row).length > 0
+              }"
+              @click="toggleExpand(row)"
+              @dblclick.stop="emit('view', row)"
+            >
+              <div class="protocol-card-compact">
+                <div class="protocol-card-compact__head">
+                  <span class="protocol-card__index">{{
+                    (pagination.page - 1) * pagination.pageSize + index + 1
+                  }}</span>
+                  <span class="protocol-card__name" :title="String(row.motherName || '')">{{
+                    row.motherName || '—'
+                  }}</span>
+                </div>
+                <div class="protocol-card-compact__tags">
+                  <el-tag :type="sourceTypeTagType(row)" size="small">
+                    {{ row.sourceTypeLabel || '细胞存储' }}
+                  </el-tag>
+                  <el-tag :type="statusTagType(row)" size="small">
+                    {{ statusLabel(row) }}
+                  </el-tag>
+                </div>
+                <div class="protocol-card-compact__scroll">
+                  <div
+                    v-if="getSpecialSampleItems(row).length"
+                    class="protocol-card-compact__special"
+                  >
+                    <div
+                      v-for="(item, si) in getSpecialSampleItems(row)"
+                      :key="si"
+                      class="protocol-card-compact__special-line"
+                    >
+                      <SampleCodeWithSpecialDisplay
+                        :sample-code="item.sampleCode"
+                        :is-special="true"
+                        :special-remark="item.specialRemark"
+                        layout="block"
+                        monospace
+                      />
+                    </div>
+                  </div>
+                  <div class="protocol-card-compact__body">
+                  <template v-if="mode === 'in_transit'">
+                    <div class="protocol-card-compact__field">
+                      <label>预计到达</label>
+                      <div
+                        v-if="getInTransitEtaLines(row).length"
+                        class="protocol-card-compact__eta-list"
+                        :title="formatInTransitEtaTitle(row)"
+                      >
+                        <div
+                          v-for="(line, etaIdx) in getInTransitEtaLines(row)"
+                          :key="etaIdx"
+                          class="protocol-card-compact__eta-line"
+                          :class="{
+                            'protocol-card__kv-value--danger': isWithinNext3Days(line.etaTime)
+                          }"
+                        >
+                          <span class="protocol-card-compact__eta-type">{{
+                            line.sampleTypeName || '样本'
+                          }}</span>
+                          <span class="protocol-card-compact__eta-time">{{
+                            line.etaTime || '—'
+                          }}</span>
+                        </div>
+                      </div>
+                      <span v-else class="protocol-card__kv-value">—</span>
+                    </div>
+                    <div class="protocol-card-compact__field protocol-card-compact__field--split-row">
+                      <div class="protocol-card-compact__field-col">
+                        <label>预产期</label>
+                        <span
+                          class="protocol-card__kv-value protocol-card__kv-value--danger"
+                          :title="String(row.expectedDeliveryDate || '')"
+                        >
+                          {{ formatDisplayOrDash(row.expectedDeliveryDate) }}
+                        </span>
+                      </div>
+                      <div class="protocol-card-compact__field-col">
+                        <label>样本采集时间</label>
+                        <span
+                          class="protocol-card__kv-value"
+                          :title="String(row.sampleCollectTime || '')"
+                        >
+                          {{ formatDisplayOrDash(row.sampleCollectTime) }}
+                        </span>
+                      </div>
+                    </div>
+                    <div class="protocol-card-compact__field">
+                      <label>母血采集</label>
+                      <span
+                        class="protocol-card__kv-value"
+                        :title="String(row.maternalBloodCollectTime || '')"
+                      >
+                        {{ formatDisplayOrDash(row.maternalBloodCollectTime) }}
+                      </span>
+                    </div>
+                    <div class="protocol-card-compact__field protocol-card-compact__field--attachment-only">
+                      <ProtocolAttachmentMiniReadonly
+                        :label="attachmentMeta(row).label"
+                        :files="attachmentMeta(row).files"
+                        @preview="handleAttachmentPreview"
+                        @download="handleAttachmentDownload"
+                      />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="protocol-card-compact__field">
+                      <label>预计到达</label>
+                      <span
+                        class="protocol-card__kv-value protocol-card__kv-value--danger"
+                        :title="String(row.etaTimeSummary || '')"
+                      >
+                        {{ row.etaTimeSummary || '—' }}
+                      </span>
+                    </div>
+                    <div class="protocol-card-compact__field protocol-card-compact__field--split-row">
+                      <div class="protocol-card-compact__field-col">
+                        <label>预产期</label>
+                        <span
+                          class="protocol-card__kv-value protocol-card__kv-value--danger"
+                          :title="String(row.expectedDeliveryDate || '')"
+                        >
+                          {{ formatDisplayOrDash(row.expectedDeliveryDate) }}
+                        </span>
+                      </div>
+                      <div class="protocol-card-compact__field-col">
+                        <label>样本采集时间</label>
+                        <span
+                          class="protocol-card__kv-value"
+                          :title="String(row.sampleCollectTime || '')"
+                        >
+                          {{ formatDisplayOrDash(row.sampleCollectTime) }}
+                        </span>
+                      </div>
+                    </div>
+                    <div class="protocol-card-compact__field protocol-card-compact__field--attachment-only">
+                      <ProtocolAttachmentMiniReadonly
+                        :label="attachmentMeta(row).label"
+                        :files="attachmentMeta(row).files"
+                        @preview="handleAttachmentPreview"
+                        @download="handleAttachmentDownload"
+                      />
+                    </div>
+                  </template>
+                </div>
+                </div>
+                <div class="protocol-card-compact__foot">
+                  <button
+                    type="button"
+                    class="protocol-card-compact__toggle"
+                    :title="isExpanded(row) ? '收起详情' : '展开详情'"
+                    @click.stop="toggleExpand(row)"
+                  >
+                    <el-icon><ArrowUp v-if="isExpanded(row)" /><ArrowDown v-else /></el-icon>
+                  </button>
+                </div>
+              </div>
+            </article>
+          </div>
+
+          <div v-if="getGroupExpandedItem(group)" class="protocol-card-detail">
+            <article v-if="getGroupExpandedItem(group)" class="protocol-card protocol-card--detail">
+              <div class="protocol-card__aside">
+                <div class="protocol-card__name-row">
+                  <span class="protocol-card__index">{{
+                    (pagination.page - 1) * pagination.pageSize +
+                    getGroupExpandedItem(group)!.index +
+                    1
+                  }}</span>
+                  <span class="protocol-card__name">{{
+                    getGroupExpandedItem(group)!.row.motherName || '—'
+                  }}</span>
+                </div>
+                <el-tag
+                  :type="sourceTypeTagType(getGroupExpandedItem(group)!.row)"
+                  size="small"
+                  class="protocol-card__source"
+                >
+                  {{ getGroupExpandedItem(group)!.row.sourceTypeLabel || '细胞存储' }}
+                </el-tag>
+                <el-tag
+                  :type="statusTagType(getGroupExpandedItem(group)!.row)"
+                  size="small"
+                  class="protocol-card__status"
+                >
+                  {{ statusLabel(getGroupExpandedItem(group)!.row) }}
+                </el-tag>
+                <div
+                  v-if="getSpecialSampleItems(getGroupExpandedItem(group)!.row).length"
+                  class="protocol-card__special-banner"
+                >
+                  <div
+                    v-for="(item, si) in getSpecialSampleItems(getGroupExpandedItem(group)!.row)"
+                    :key="si"
+                    class="protocol-card__special-banner-line"
+                  >
+                    <SampleCodeWithSpecialDisplay
+                      :sample-code="item.sampleCode"
+                      :is-special="true"
+                      :special-remark="item.specialRemark"
+                      layout="block"
+                      monospace
+                    />
+                  </div>
+                </div>
+                <div
+                  v-if="getGroupExpandedItem(group)!.row.createTime"
+                  class="protocol-card__create-time"
+                >
+                  创建 {{ getGroupExpandedItem(group)!.row.createTime }}
+                </div>
+              </div>
+              <div class="protocol-card__sections">
+                <section class="protocol-card__block protocol-card__block--basic">
+                  <div class="protocol-card__block-title">基础信息</div>
+                  <div class="protocol-card__kv-grid">
+                    <div class="protocol-card__kv">
+                      <label>协议号</label>
+                      <span>{{ getGroupExpandedItem(group)!.row.protocolNo || '—' }}</span>
+                    </div>
+                    <div class="protocol-card__kv">
+                      <label>登记日期</label>
+                      <span>{{ getGroupExpandedItem(group)!.row.registerDate || '—' }}</span>
+                    </div>
+                    <div class="protocol-card__kv">
+                      <label>样本采集</label>
+                      <span>{{
+                        getGroupExpandedItem(group)!.row.sampleCollectSummary || '—'
+                      }}</span>
+                    </div>
+                    <div class="protocol-card__kv">
+                      <label>样本采集时间</label>
+                      <span>{{ getGroupExpandedItem(group)!.row.sampleCollectTime || '—' }}</span>
+                    </div>
+                    <div class="protocol-card__kv">
+                      <label>母血采集时间</label>
+                      <span>{{
+                        getGroupExpandedItem(group)!.row.maternalBloodCollectTime || '—'
+                      }}</span>
+                    </div>
+                    <div
+                      v-if="
+                        mode === 'in_transit' &&
+                        getInTransitEtaLines(getGroupExpandedItem(group)!.row).length
+                      "
+                      class="protocol-card__kv protocol-card__kv--stack"
+                    >
+                      <label>预计到达</label>
+                      <div class="protocol-card__eta-list">
+                        <div
+                          v-for="(line, etaIdx) in getInTransitEtaLines(
+                            getGroupExpandedItem(group)!.row
+                          )"
+                          :key="etaIdx"
+                          class="protocol-card__eta-line"
+                        >
+                          <span>{{ line.sampleTypeName || '样本' }}</span>
+                          <span class="protocol-card__kv-value protocol-card__kv-value--danger">
+                            {{ line.etaTime || '—' }}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      v-else-if="
+                        mode === 'in_transit' && getGroupExpandedItem(group)!.row.etaTimeSummary
+                      "
+                      class="protocol-card__kv"
+                    >
+                      <label>预计到达</label>
+                      <span class="protocol-card__kv-value protocol-card__kv-value--danger">{{
+                        getGroupExpandedItem(group)!.row.etaTimeSummary
+                      }}</span>
+                    </div>
+                    <div
+                      v-if="
+                        mode === 'pre_delivery' &&
+                        getGroupExpandedItem(group)!.row.preDeliveryKindLabel
+                      "
+                      class="protocol-card__kv"
+                    >
+                      <label>预产类型</label>
+                      <span>{{ getGroupExpandedItem(group)!.row.preDeliveryKindLabel }}</span>
+                    </div>
+                    <div
+                      class="protocol-card__kv protocol-card__kv--stack protocol-card__kv--attachment"
+                    >
+                      <label>{{ attachmentMeta(getGroupExpandedItem(group)!.row).label }}</label>
+                      <ProtocolAttachmentMiniReadonly
+                        :files="attachmentMeta(getGroupExpandedItem(group)!.row).files"
+                        @preview="handleAttachmentPreview"
+                        @download="handleAttachmentDownload"
+                      />
+                    </div>
+                  </div>
+                </section>
+
+                <section class="protocol-card__block protocol-card__block--newborn">
+                  <div class="protocol-card__block-title">新生儿</div>
+                  <div class="protocol-card__kv-grid">
+                    <div class="protocol-card__kv">
+                      <label>姓名</label>
+                      <span>{{ getGroupExpandedItem(group)!.row.newbornName || '—' }}</span>
+                    </div>
+                    <div class="protocol-card__kv">
+                      <label>性别</label>
+                      <span>{{
+                        newbornSexLabel(
+                          String(getGroupExpandedItem(group)!.row.newbornSex || '')
+                        ) || '—'
+                      }}</span>
+                    </div>
+                    <div class="protocol-card__kv">
+                      <label>预产期</label>
+                      <span class="protocol-card__kv-value protocol-card__kv-value--danger">{{
+                        getGroupExpandedItem(group)!.row.expectedDeliveryDate || '—'
+                      }}</span>
+                    </div>
+                    <div class="protocol-card__kv">
+                      <label>分娩时间</label>
+                      <span>{{ getGroupExpandedItem(group)!.row.newbornDeliveryTime || '—' }}</span>
+                    </div>
+                  </div>
+                </section>
+
+                <section class="protocol-card__block protocol-card__block--samples">
+                  <div class="protocol-card__block-title">
+                    样本信息
+                    <span
+                      v-if="getSampleItems(getGroupExpandedItem(group)!.row).length"
+                      class="protocol-card__block-count"
+                    >
+                      {{ getSampleItems(getGroupExpandedItem(group)!.row).length }} 项
+                    </span>
+                  </div>
+                  <div
+                    v-if="getSampleItems(getGroupExpandedItem(group)!.row).length"
+                    class="protocol-card__sample-list"
+                  >
+                    <div
+                      v-for="(item, sIdx) in getSampleItems(getGroupExpandedItem(group)!.row)"
+                      :key="sIdx"
+                      class="protocol-card__sample-item"
+                    >
+                      <span class="protocol-card__sample-seq">{{ sIdx + 1 }}</span>
+                      <div class="protocol-card__sample-main">
+                        <div class="protocol-card__sample-line">
+                          <span class="protocol-card__sample-label">类型</span>
+                          <span class="protocol-card__sample-value">{{
+                            item.sampleTypeName || '—'
+                          }}</span>
+                          <el-tag
+                            v-if="item.sampleStatus"
+                            :type="sampleStatusTagType(item.sampleStatus)"
+                            size="small"
+                            class="protocol-card__sample-status"
+                          >
+                            {{ sampleStatusLabel(item.sampleStatus) }}
+                          </el-tag>
+                        </div>
+                        <div class="protocol-card__sample-line">
+                          <span class="protocol-card__sample-label">编码</span>
+                          <span
+                            class="protocol-card__sample-value protocol-card__sample-value--code"
+                          >
+                            <SampleCodeWithSpecialDisplay
+                              :sample-code="item.sampleCode"
+                              :is-special="!!item.isSpecial"
+                              :special-remark="item.specialRemark"
+                              monospace
+                            />
+                          </span>
+                        </div>
+                        <div class="protocol-card__sample-line">
+                          <span class="protocol-card__sample-label">运输</span>
+                          <span class="protocol-card__sample-value">{{
+                            formatTransportSummary(item.transport)
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-else class="protocol-card__empty">
+                    {{
+                      mode === 'pre_delivery' &&
+                      getGroupExpandedItem(group)!.row.preDeliveryKindLabel
+                        ? getGroupExpandedItem(group)!.row.preDeliveryKindLabel
+                        : '暂无样本'
+                    }}
+                  </div>
+                </section>
+              </div>
+              <div class="protocol-card__foot">
+                <div class="protocol-card__actions">
+                  <el-button
+                    class="btn-op-item"
+                    @click.stop="toggleExpand(getGroupExpandedItem(group)!.row)"
+                  >
+                    <el-icon><ArrowUp /></el-icon>收起
+                  </el-button>
+                  <el-button
+                    class="btn-op-item"
+                    @click.stop="emit('view', getGroupExpandedItem(group)!.row)"
+                  >
+                    <el-icon><View /></el-icon>查看
+                  </el-button>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+      <el-empty
+        v-else-if="!loading"
+        class="protocol-card-empty"
+        :description="emptyDescription"
+        :image-size="80"
+      />
+    </div>
+    <div class="pagination list-pager-bar">
+      <el-pagination
+        :current-page="pagination.page"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next"
+        @size-change="(val) => emit('page-size-change', val)"
+        @current-change="(val) => emit('page-change', val)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { formatDisplayOrDash } from '@/utils/datetime-display'
+  import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  import { View, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+  import type { PreTransitProtocolRow } from '@/api/pre-transit-sample'
+  import {
+    protocolStatusLabel,
+    protocolStatusDisplayLabel,
+    protocolStatusTagType,
+    donationStatusLabel,
+    donationStatusDisplayLabel,
+    donationStatusTagType,
+    newbornSexLabel,
+    sampleStatusLabel,
+    sampleStatusTagType,
+    transportTypeLabel
+  } from '@/utils/status-tag-registry'
+  import type { TagType } from '@/utils/status-tag-registry'
+  import SampleCodeWithSpecialDisplay from '@/components/business/sample-code-with-special-display/index.vue'
+  import ProtocolAttachmentMiniReadonly from '@/components/business/protocol-attachment-mini-readonly/index.vue'
+  import { getSourceProtocolAttachment } from '@/utils/protocol-source-attachment'
+  import { useAttachmentActions } from '@/composables/useAttachmentActions'
+
+  defineOptions({ name: 'PreTransitProtocolCardList' })
+
+  type ProtocolSampleTransport = {
+    transportType?: string
+    destSiteName?: string
+    expressCompanyName?: string
+    waybillNo?: string
+    carrierName?: string
+    carrierPhone?: string
+    etaTime?: string
+  }
+
+  type ProtocolSampleItem = {
+    sampleTypeName: string
+    sampleCode: string
+    sampleStatus: string
+    labStorageCode: string
+    isSpecial?: boolean
+    specialRemark?: string
+    transport?: ProtocolSampleTransport | null
+  }
+
+  type InTransitEtaLine = {
+    sampleTypeName: string
+    etaTime: string
+  }
+
+  type GroupItem = { row: PreTransitProtocolRow; index: number }
+  type CardRowGroup = { items: GroupItem[] }
+
+  const GRID_GAP = 10
+  const LIST_PADDING = 32
+
+  const props = withDefaults(
+    defineProps<{
+      rows: PreTransitProtocolRow[]
+      loading: boolean
+      pagination: { page: number; pageSize: number; total: number }
+      mode?: 'in_transit' | 'pre_delivery'
+      emptyDescription?: string
+    }>(),
+    {
+      mode: 'in_transit',
+      emptyDescription: '暂无数据'
+    }
+  )
+
+  const emit = defineEmits<{
+    view: [row: PreTransitProtocolRow]
+    'page-size-change': [size: number]
+    'page-change': [page: number]
+  }>()
+
+  const listRef = ref<HTMLElement | null>(null)
+  const columnsPerRow = ref(1)
+  const expandedKey = ref<string | null>(null)
+  let resizeObserver: ResizeObserver | null = null
+
+  /** 与 scoped 样式中 --compact-card-width 及 .protocol-card-row gap 保持一致 */
+  function compactCardLayoutForViewport() {
+    const vw = window.innerWidth
+    if (vw <= 768) return { cardWidth: 184, gap: 8 }
+    if (vw <= 1200) return { cardWidth: 200, gap: GRID_GAP }
+    return { cardWidth: 220, gap: GRID_GAP }
+  }
+
+  function updateColumnsPerRow() {
+    const el = listRef.value
+    if (!el) return
+    const innerWidth = Math.max(0, el.clientWidth - LIST_PADDING)
+    const { cardWidth, gap } = compactCardLayoutForViewport()
+    columnsPerRow.value = Math.max(1, Math.floor((innerWidth + gap) / (cardWidth + gap)))
+  }
+
+  const groupedRows = computed<CardRowGroup[]>(() => {
+    const cols = columnsPerRow.value
+    const groups: CardRowGroup[] = []
+    for (let i = 0; i < props.rows.length; i += cols) {
+      const items = props.rows.slice(i, i + cols).map((row, offset) => ({
+        row,
+        index: i + offset
+      }))
+      groups.push({ items })
+    }
+    return groups
+  })
+
+  watch(
+    () => [props.rows, props.pagination.page, props.pagination.pageSize],
+    async () => {
+      expandedKey.value = null
+      await nextTick()
+      updateColumnsPerRow()
+    }
+  )
+
+  function setupResizeObserver() {
+    resizeObserver?.disconnect()
+    resizeObserver = null
+    if (typeof ResizeObserver !== 'undefined' && listRef.value) {
+      resizeObserver = new ResizeObserver(() => updateColumnsPerRow())
+      resizeObserver.observe(listRef.value)
+    }
+  }
+
+  onMounted(async () => {
+    await nextTick()
+    updateColumnsPerRow()
+    setupResizeObserver()
+    window.addEventListener('resize', updateColumnsPerRow)
+  })
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect()
+    window.removeEventListener('resize', updateColumnsPerRow)
+  })
+
+  const { handleAttachmentPreview, handleAttachmentDownload } = useAttachmentActions()
+
+  function attachmentMeta(row: PreTransitProtocolRow) {
+    return getSourceProtocolAttachment(row as Record<string, unknown>)
+  }
+
+  function rowKey(row: PreTransitProtocolRow) {
+    const id = String(row.collectionProtocolId || row.researchDonationId || row.id || '')
+    return `${String(row.sourceType || '')}:${id}`
+  }
+
+  function isExpanded(row: PreTransitProtocolRow) {
+    return expandedKey.value === rowKey(row)
+  }
+
+  function toggleExpand(row: PreTransitProtocolRow) {
+    const key = rowKey(row)
+    expandedKey.value = expandedKey.value === key ? null : key
+  }
+
+  function startOfDay(d: Date) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate())
+  }
+
+  function parseFlexibleDate(value: string): Date | null {
+    const s = String(value || '').trim()
+    if (!s || s === '—') return null
+    const m = s.match(/^(\d{4})-(\d{2})-(\d{2})/)
+    if (m) {
+      return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+    }
+    const d = new Date(s.includes(' ') ? s.replace(' ', 'T') : s)
+    return Number.isNaN(d.getTime()) ? null : d
+  }
+
+  /** 日期在今日起未来 3 个自然日内（含今日、第 3 日） */
+  function isWithinNext3Days(value: string): boolean {
+    const parsed = parseFlexibleDate(value)
+    if (!parsed) return false
+    const today = startOfDay(new Date())
+    const target = startOfDay(parsed)
+    const diffDays = Math.floor((target.getTime() - today.getTime()) / 86400000)
+    return diffDays >= 0 && diffDays <= 3
+  }
+
+  function isUrgentCard(row: PreTransitProtocolRow) {
+    if (isWithinNext3Days(String(row.expectedDeliveryDate || ''))) {
+      return true
+    }
+    if (props.mode === 'in_transit') {
+      return getInTransitEtaLines(row).some((line) => isWithinNext3Days(line.etaTime))
+    }
+    return isWithinNext3Days(String(row.etaTimeSummary || ''))
+  }
+
+  function getInTransitEtaLines(row: PreTransitProtocolRow): InTransitEtaLine[] {
+    return getSampleItems(row)
+      .map((item) => ({
+        sampleTypeName: item.sampleTypeName || '样本',
+        etaTime: String(item.transport?.etaTime || '').trim()
+      }))
+      .filter((line) => line.sampleTypeName || line.etaTime)
+  }
+
+  function formatInTransitEtaTitle(row: PreTransitProtocolRow): string {
+    return getInTransitEtaLines(row)
+      .map((line) => `${line.sampleTypeName}\n${line.etaTime || '—'}`)
+      .join('\n\n')
+  }
+
+  function getGroupExpandedItem(group: CardRowGroup): GroupItem | null {
+    if (!expandedKey.value) return null
+    return group.items.find((item) => rowKey(item.row) === expandedKey.value) || null
+  }
+
+  function statusLabel(row: PreTransitProtocolRow) {
+    const status = String(row.protocolStatus || '')
+    const voidType = String(row.voidType || '')
+    return row.sourceType === 'research_donation'
+      ? donationStatusDisplayLabel(status, voidType)
+      : protocolStatusDisplayLabel(status, voidType)
+  }
+
+  function statusTagType(row: PreTransitProtocolRow): TagType {
+    const status = String(row.protocolStatus || '')
+    return row.sourceType === 'research_donation'
+      ? donationStatusTagType(status)
+      : protocolStatusTagType(status)
+  }
+
+  function sourceTypeTagType(row: PreTransitProtocolRow): TagType {
+    return row.sourceType === 'research_donation' ? 'warning' : 'success'
+  }
+
+  function formatTransportSummary(transport?: ProtocolSampleTransport | null): string {
+    if (!transport?.transportType) return '—'
+    const parts: string[] = [transportTypeLabel(String(transport.transportType))]
+    const dest = String(transport.destSiteName || '').trim()
+    if (dest) parts.push(dest)
+    if (transport.transportType === 'kdys') {
+      const expressName = String(transport.expressCompanyName || '').trim()
+      if (expressName) parts.push(expressName)
+      const waybill = String(transport.waybillNo || '').trim()
+      if (waybill) parts.push(waybill)
+    } else if (transport.transportType === 'ryxd') {
+      const carrier = String(transport.carrierName || '').trim()
+      if (carrier) parts.push(carrier)
+      const phone = String(transport.carrierPhone || '').trim()
+      if (phone) parts.push(phone)
+    }
+    const eta = String(transport.etaTime || '').trim()
+    if (eta) parts.push(`预计 ${eta}`)
+    return parts.join(' · ')
+  }
+
+  function getSampleItems(row: PreTransitProtocolRow): ProtocolSampleItem[] {
+    const rawItems = row.sampleItems
+    if (Array.isArray(rawItems) && rawItems.length) {
+      return rawItems.map((item) => {
+        const rec = item as Record<string, unknown>
+        const transportRaw = rec.transport
+        const transport =
+          transportRaw && typeof transportRaw === 'object'
+            ? (transportRaw as ProtocolSampleTransport)
+            : null
+        return {
+          sampleTypeName: String(rec.sampleTypeName || '').trim(),
+          sampleCode: String(rec.sampleCode || '').trim(),
+          sampleStatus: String(rec.sampleStatus || '').trim(),
+          labStorageCode: String(rec.labStorageCode || '').trim(),
+          isSpecial: !!rec.isSpecial,
+          specialRemark: String(rec.specialRemark || '').trim(),
+          transport
+        }
+      })
+    }
+    return []
+  }
+
+  function getSpecialSampleItems(row: PreTransitProtocolRow): ProtocolSampleItem[] {
+    return getSampleItems(row).filter((item) => item.isSpecial)
+  }
+</script>
+
+<style scoped lang="scss">
+  .protocol-card-section {
+    min-height: 120px;
+  }
+
+  .protocol-card-list {
+    --compact-card-width: 220px;
+    --compact-card-height: 290px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 14px 16px;
+  }
+
+  .protocol-card-row-group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .protocol-card-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .protocol-card {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 12px;
+    min-width: 0;
+    box-sizing: border-box;
+    border: 1px solid var(--mint-border, #e2e8f0);
+    border-radius: 10px;
+    background: #fff;
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+
+    &:hover {
+      border-color: #c5e0d4;
+      box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
+    }
+
+    &.is-compact {
+      flex: 0 0 auto;
+      flex-direction: column;
+      width: var(--compact-card-width);
+      height: var(--compact-card-height);
+      padding: 10px;
+      align-items: stretch;
+      border-radius: 8px;
+      cursor: pointer;
+      overflow: hidden;
+    }
+
+    &.is-compact.has-special-sample {
+      --compact-card-height: 330px;
+    }
+
+    &.is-active {
+      border-color: var(--primary, #10b981);
+      box-shadow: 0 0 0 1px rgb(16 185 129 / 20%);
+    }
+
+    &.is-compact.is-urgent {
+      background: #fef2f2;
+      border-color: #fecaca;
+
+      &:hover {
+        border-color: #fca5a5;
+        box-shadow: 0 2px 8px rgb(239 68 68 / 8%);
+      }
+
+      &.is-active {
+        background: #fef2f2;
+        border-color: var(--primary, #10b981);
+        box-shadow: 0 0 0 1px rgb(16 185 129 / 20%);
+      }
+    }
+
+    &--detail {
+      width: 100%;
+      padding: 12px 14px;
+    }
+  }
+
+  .protocol-card-detail {
+    width: 100%;
+  }
+
+  .protocol-card-compact {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    gap: 5px;
+  }
+
+  .protocol-card-compact__head {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    min-width: 0;
+  }
+
+  .protocol-card-compact__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+
+    :deep(.el-tag) {
+      padding: 0 5px;
+      height: 22px;
+      font-size: 11px;
+    }
+  }
+
+  .protocol-card-compact__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-right: -2px;
+    padding-right: 2px;
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 transparent;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+  }
+
+  .protocol-card-compact__special {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px 6px;
+    border-radius: 6px;
+    background: #fff5f5;
+    border: 1px solid #fecaca;
+    min-width: 0;
+  }
+
+  .protocol-card-compact__special-line {
+    min-width: 0;
+    font-size: 11px;
+    line-height: 1.35;
+    word-break: break-all;
+  }
+
+  .protocol-card-compact__body {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-height: 0;
+  }
+
+  .protocol-card-compact__field {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+    min-width: 0;
+    font-size: 11px;
+    line-height: 1.35;
+
+    label {
+      flex-shrink: 0;
+      color: var(--mint-text-muted, #64748b);
+      font-size: 10px;
+    }
+
+    span {
+      width: 100%;
+      min-width: 0;
+      color: var(--text, #1e293b);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    span.protocol-card__kv-value--danger {
+      color: #dc2626;
+      font-weight: 500;
+    }
+  }
+
+  .protocol-card-compact__field--split-row {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .protocol-card-compact__field-col {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+  }
+
+  .protocol-card-compact__field-col--attachment {
+    flex: 1.1;
+    min-width: 84px;
+  }
+
+  .protocol-card-compact__field--attachment-only {
+    flex-shrink: 0;
+    min-width: 0;
+  }
+
+  .protocol-card-compact__eta-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .protocol-card-compact__eta-line {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+    min-width: 0;
+    width: 100%;
+    font-size: 11px;
+    line-height: 1.35;
+    color: var(--text, #1e293b);
+  }
+
+  .protocol-card-compact__eta-type {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--mint-text-muted, #64748b);
+    font-size: 10px;
+  }
+
+  .protocol-card-compact__eta-time {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .protocol-card-compact__eta-line.protocol-card__kv-value--danger
+    .protocol-card-compact__eta-time {
+    color: #dc2626;
+    font-weight: 500;
+  }
+
+  .protocol-card-compact__sample {
+    white-space: normal !important;
+    word-break: break-all;
+  }
+
+  .protocol-card-compact__foot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    margin-top: auto;
+    padding-top: 0;
+    min-height: 16px;
+  }
+
+  .protocol-card-compact__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--mint-text-muted, #94a3b8);
+    cursor: pointer;
+    line-height: 1;
+    transition:
+      color 0.15s,
+      background 0.15s;
+
+    &:hover {
+      color: var(--primary, #10b981);
+      background: var(--primary-bg, #ecfdf5);
+    }
+
+    :deep(.el-icon) {
+      font-size: 12px;
+    }
+  }
+
+  .protocol-card__kv-value--danger {
+    color: #dc2626;
+    font-weight: 500;
+  }
+
+  .protocol-card__aside {
+    flex: 0 0 152px;
+    min-width: 140px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-right: 12px;
+    border-right: 1px solid #eef2f6;
+  }
+
+  .protocol-card__source,
+  .protocol-card__status {
+    align-self: flex-start;
+  }
+
+  .protocol-card__special-banner {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 6px 8px;
+    border-radius: 6px;
+    background: #fff5f5;
+    border: 1px solid #fecaca;
+    min-width: 0;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .protocol-card__special-banner-line {
+    min-width: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    word-break: break-word;
+    white-space: normal;
+
+    :deep(.sample-code-with-special__code) {
+      word-break: break-all;
+      white-space: normal;
+    }
+  }
+
+  .protocol-card__create-time {
+    margin-top: auto;
+    font-size: 11px;
+    color: var(--mint-text-muted, #64748b);
+    line-height: 1.35;
+    word-break: break-all;
+  }
+
+  .protocol-card__name-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .protocol-card__index {
+    flex-shrink: 0;
+    min-width: 21px;
+    height: 21px;
+    padding: 0 5px;
+    border-radius: 5px;
+    background: var(--primary-bg, #ecfdf5);
+    color: var(--primary-dark, #059669);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 21px;
+    text-align: center;
+  }
+
+  .protocol-card__name {
+    flex: 1;
+    min-width: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text, #1e293b);
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .protocol-card__sections {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 10px;
+    min-width: 0;
+    overflow-x: auto;
+  }
+
+  .protocol-card__block {
+    flex: 1;
+    min-width: 0;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: #f8fafc;
+    border: 1px solid #eef2f6;
+
+    &--basic {
+      flex: 0.72;
+      min-width: 128px;
+    }
+
+    &--newborn {
+      flex: 0.85;
+      min-width: 140px;
+    }
+
+    &--samples {
+      flex: 1.35;
+      min-width: 220px;
+    }
+  }
+
+  .protocol-card__block-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--primary-dark, #059669);
+    line-height: 1.3;
+  }
+
+  .protocol-card__block-count {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--mint-text-muted, #64748b);
+  }
+
+  .protocol-card__kv-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .protocol-card__kv {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 1.35;
+
+    label {
+      flex-shrink: 0;
+      color: var(--mint-text-muted, #334155);
+    }
+
+    span {
+      min-width: 0;
+      color: var(--text, #1e293b);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .protocol-card__kv span.protocol-card__kv-value--danger {
+    color: #dc2626;
+    font-weight: 500;
+  }
+
+  .protocol-card__kv--stack {
+    align-items: flex-start;
+  }
+
+  .protocol-card__eta-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .protocol-card__eta-line {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+    min-width: 0;
+    width: 100%;
+    font-size: 12px;
+    line-height: 1.35;
+
+    > span:first-child {
+      color: var(--mint-text-muted, #334155);
+      font-size: 11px;
+    }
+
+    > span:last-child {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .protocol-card__kv--attachment {
+    align-items: flex-start;
+
+    label {
+      margin-bottom: 2px;
+    }
+  }
+
+  .protocol-card__empty {
+    font-size: 12px;
+    color: var(--mint-text-muted, #334155);
+    line-height: 1.4;
+  }
+
+  .protocol-card__sample-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .protocol-card__sample-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 6px 8px;
+    border-radius: 6px;
+    background: #fff;
+    border: 1px solid var(--mint-border, #e2e8f0);
+  }
+
+  .protocol-card__sample-seq {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    background: var(--primary-bg, #ecfdf5);
+    color: var(--primary-dark, #059669);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 18px;
+    text-align: center;
+  }
+
+  .protocol-card__sample-main {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .protocol-card__sample-line {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 1.35;
+  }
+
+  .protocol-card__sample-label {
+    flex-shrink: 0;
+    width: 28px;
+    color: var(--mint-text-muted, #334155);
+  }
+
+  .protocol-card__sample-value {
+    min-width: 0;
+    flex: 1;
+    color: var(--text, #1e293b);
+    word-break: break-all;
+
+    &--code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 11px;
+    }
+  }
+
+  .protocol-card__sample-status {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  .protocol-card__foot {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 8px;
+    padding-left: 12px;
+    border-left: 1px solid #eef2f6;
+  }
+
+  .protocol-card__actions {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: stretch;
+    gap: 6px;
+    min-width: 72px;
+
+    :deep(.el-button) {
+      width: 100%;
+      margin: 0;
+      justify-content: center;
+    }
+  }
+
+  .protocol-card-empty {
+    padding: 32px 16px;
+  }
+
+  @media (max-width: 1200px) {
+    .protocol-card-list {
+      --compact-card-width: 200px;
+      --compact-card-height: 266px;
+    }
+
+    .protocol-card.is-compact.has-special-sample {
+      --compact-card-height: 306px;
+    }
+
+    .protocol-card--detail {
+      flex-wrap: wrap;
+    }
+
+    .protocol-card--detail .protocol-card__sections {
+      flex-basis: 100%;
+      order: 3;
+    }
+
+    .protocol-card--detail .protocol-card__foot {
+      flex-direction: column;
+      align-items: stretch;
+      border-left: none;
+      border-top: 1px solid #eef2f6;
+      padding-left: 0;
+      padding-top: 10px;
+      margin-left: 0;
+      order: 4;
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .protocol-card-list {
+      --compact-card-width: 184px;
+      --compact-card-height: 244px;
+    }
+
+    .protocol-card.is-compact.has-special-sample {
+      --compact-card-height: 284px;
+    }
+
+    .protocol-card-row {
+      gap: 8px;
+    }
+
+    .protocol-card--detail .protocol-card__sections {
+      flex-direction: column;
+    }
+
+    .protocol-card--detail .protocol-card__block {
+      min-width: 0 !important;
+    }
+  }
+</style>
diff --git a/web-admin/src/views/production/pre-transit-sample/index.vue b/web-admin/src/views/production/pre-transit-sample/index.vue
new file mode 100644
index 00000000..73b59803
--- /dev/null
+++ b/web-admin/src/views/production/pre-transit-sample/index.vue
@@ -0,0 +1,284 @@
+<!-- 生产管理 — 预产及在途样本 -->
+<!-- eslint-disable vue/no-v-model-argument -->
+<template>
+  <div class="page-container">
+    <section class="panel">
+      <div class="panel-top">
+        <h2>预产及在途样本</h2>
+      </div>
+
+      <div class="filter-block">
+        <el-form :model="searchForm" class="filter-form" @submit.prevent>
+          <div class="filter-grid">
+            <el-form-item label="关键词">
+              <el-input
+                v-model="searchForm.keyword"
+                placeholder="姓名/身份证号/电话"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="来源类型">
+              <el-select
+                v-model="searchForm.sourceType"
+                placeholder="全部"
+                clearable
+                style="width: 100%"
+              >
+                <el-option label="细胞存储" value="cell_storage" />
+                <el-option label="科研捐赠" value="research_donation" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间">
+              <el-date-picker
+                v-model="createTimeRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="样本采集时间">
+              <el-date-picker
+                v-model="sampleCollectTimeRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                clearable
+                style="width: 100%"
+              />
+            </el-form-item>
+          </div>
+          <div class="filter-actions-row">
+            <div class="filter-actions-end">
+              <el-button class="btn-ghost" @click="handleReset">
+                <el-icon><RefreshLeft /></el-icon>重置
+              </el-button>
+              <el-button class="btn-main" type="primary" @click="handleSearch">
+                <el-icon><Search /></el-icon>搜索
+              </el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="pre-transit-section">
+        <div class="panel-top pre-transit-section-head">
+          <h2 class="title-bar-heading">在途样本</h2>
+        </div>
+        <PreTransitProtocolCardList
+          mode="in_transit"
+          :rows="inTransitData"
+          :loading="inTransitLoading"
+          :pagination="inTransitPagination"
+          empty-description="暂无在途样本"
+          @view="handleView"
+          @page-size-change="onInTransitPageSizeChange"
+          @page-change="onInTransitPageChange"
+        />
+      </div>
+
+      <div class="pre-transit-section">
+        <div class="panel-top pre-transit-section-head">
+          <h2 class="title-bar-heading">预产样本</h2>
+        </div>
+        <PreTransitProtocolCardList
+          mode="pre_delivery"
+          :rows="preDeliveryData"
+          :loading="preDeliveryLoading"
+          :pagination="preDeliveryPagination"
+          empty-description="暂无预产样本"
+          @view="handleView"
+          @page-size-change="onPreDeliveryPageSizeChange"
+          @page-change="onPreDeliveryPageChange"
+        />
+      </div>
+    </section>
+
+    <ProtocolViewDialog
+      v-model="protocolViewVisible"
+      :protocol-id="viewProtocolId"
+      :list-row="protocolViewRow"
+    />
+    <DonationViewDialog
+      v-model="donationViewVisible"
+      :donation-id="viewDonationId"
+      :list-row="donationViewRow"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, onMounted } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { Search, RefreshLeft } from '@element-plus/icons-vue'
+  import PreTransitProtocolCardList from './PreTransitProtocolCardList.vue'
+  import ProtocolViewDialog from '@/views/cell-storage/protocol/ProtocolViewDialog.vue'
+  import DonationViewDialog from '@/views/research-donation/list/DonationViewDialog.vue'
+  import {
+    fetchPreTransitInTransitList,
+    fetchPreTransitPreDeliveryList,
+    type PreTransitProtocolRow
+  } from '@/api/pre-transit-sample'
+  import type { CollectionProtocolRow } from '@/api/collection-protocol'
+  import type { ResearchDonationRow } from '@/api/research-donation'
+
+  defineOptions({ name: 'ProductionPreTransitSample' })
+
+  const searchForm = reactive({ keyword: '', sourceType: '' })
+  const createTimeRange = ref<[string, string] | null>(null)
+  const sampleCollectTimeRange = ref<[string, string] | null>(null)
+
+  const inTransitData = ref<PreTransitProtocolRow[]>([])
+  const preDeliveryData = ref<PreTransitProtocolRow[]>([])
+  const inTransitLoading = ref(false)
+  const preDeliveryLoading = ref(false)
+  const inTransitPagination = reactive({ page: 1, pageSize: 10, total: 0 })
+  const preDeliveryPagination = reactive({ page: 1, pageSize: 10, total: 0 })
+
+  const protocolViewVisible = ref(false)
+  const donationViewVisible = ref(false)
+  const viewProtocolId = ref<string | null>(null)
+  const viewDonationId = ref<string | null>(null)
+  const protocolViewRow = ref<CollectionProtocolRow | null>(null)
+  const donationViewRow = ref<ResearchDonationRow | null>(null)
+
+  function listParams(page: number, pageSize: number) {
+    return {
+      page,
+      pageSize,
+      keyword: searchForm.keyword || undefined,
+      sourceType: searchForm.sourceType || undefined,
+      createTimeStart: createTimeRange.value?.[0] || undefined,
+      createTimeEnd: createTimeRange.value?.[1] || undefined,
+      sampleCollectTimeStart: sampleCollectTimeRange.value?.[0] || undefined,
+      sampleCollectTimeEnd: sampleCollectTimeRange.value?.[1] || undefined
+    }
+  }
+
+  async function loadInTransit() {
+    inTransitLoading.value = true
+    try {
+      const result = await fetchPreTransitInTransitList(
+        listParams(inTransitPagination.page, inTransitPagination.pageSize)
+      )
+      const res = (result as Record<string, unknown>) || {}
+      inTransitData.value = (res.list as PreTransitProtocolRow[]) || []
+      inTransitPagination.total = Number(res.total) || 0
+    } finally {
+      inTransitLoading.value = false
+    }
+  }
+
+  async function loadPreDelivery() {
+    preDeliveryLoading.value = true
+    try {
+      const result = await fetchPreTransitPreDeliveryList(
+        listParams(preDeliveryPagination.page, preDeliveryPagination.pageSize)
+      )
+      const res = (result as Record<string, unknown>) || {}
+      preDeliveryData.value = (res.list as PreTransitProtocolRow[]) || []
+      preDeliveryPagination.total = Number(res.total) || 0
+    } finally {
+      preDeliveryLoading.value = false
+    }
+  }
+
+  async function loadAll() {
+    await Promise.all([loadInTransit(), loadPreDelivery()])
+  }
+
+  function handleSearch() {
+    inTransitPagination.page = 1
+    preDeliveryPagination.page = 1
+    loadAll()
+  }
+
+  function handleReset() {
+    Object.assign(searchForm, { keyword: '', sourceType: '' })
+    createTimeRange.value = null
+    sampleCollectTimeRange.value = null
+    handleSearch()
+  }
+
+  function onInTransitPageSizeChange(val: number) {
+    inTransitPagination.page = 1
+    inTransitPagination.pageSize = val
+    loadInTransit()
+  }
+
+  function onInTransitPageChange(val: number) {
+    inTransitPagination.page = val
+    loadInTransit()
+  }
+
+  function onPreDeliveryPageSizeChange(val: number) {
+    preDeliveryPagination.page = 1
+    preDeliveryPagination.pageSize = val
+    loadPreDelivery()
+  }
+
+  function onPreDeliveryPageChange(val: number) {
+    preDeliveryPagination.page = val
+    loadPreDelivery()
+  }
+
+  function handleView(row: PreTransitProtocolRow) {
+    const source = String(row.sourceType || 'cell_storage')
+    if (source === 'research_donation') {
+      const did = String(row.researchDonationId || '')
+      if (!did) {
+        ElMessage.warning('缺少关联捐赠协议单，无法查看')
+        return
+      }
+      viewDonationId.value = did
+      donationViewRow.value = {
+        id: did,
+        motherName: row.motherName,
+        newbornName: row.newbornName
+      } as ResearchDonationRow
+      donationViewVisible.value = true
+      return
+    }
+    const pid = String(row.collectionProtocolId || row.id || '')
+    if (!pid) {
+      ElMessage.warning('缺少关联协议单，无法查看')
+      return
+    }
+    viewProtocolId.value = pid
+    protocolViewRow.value = {
+      id: pid,
+      motherName: row.motherName,
+      newbornName: row.newbornName
+    } as CollectionProtocolRow
+    protocolViewVisible.value = true
+  }
+
+  watchDebounced(
+    [searchForm, createTimeRange, sampleCollectTimeRange],
+    () => {
+      inTransitPagination.page = 1
+      preDeliveryPagination.page = 1
+      loadAll()
+    },
+    { debounce: 300, deep: true }
+  )
+
+  onMounted(() => {
+    loadAll()
+  })
+</script>
+
+<style scoped lang="scss">
+  .pre-transit-section-head {
+    margin-top: 0;
+  }
+
+  .pre-transit-section + .pre-transit-section {
+    margin-top: 24px;
+    padding-top: 8px;
+  }
+</style>