zkxw/web-admin/src/views/cell-storage/protocol-audit/SampleCollectionInfoTab.vue

<!-- 样本信息管理 · 样本采集信息 Tab -->
<template>
  <div class="sample-collection-info-tab">
    <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.sampleStatus"
              placeholder="全部"
              clearable
              style="width: 100%"
            >
              <el-option label="未采集" value="uncollected" />
              <el-option label="已采集" value="ycj" />
              <el-option label="检测中" value="jcz" />
              <el-option label="已入库" value="yrk" />
              <el-option label="已作废" value="yzf" />
            </el-select>
          </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="list-body list-wrap">
      <el-table
        class="list-table"
        :data="tableData"
        v-loading="loading"
        stripe
        row-key="protocolSampleId"
        @row-dblclick="handleView"
      >
        <el-table-column
          type="index"
          label="序号"
          min-width="68"
          align="center"
          header-align="center"
          :index="(i) => (pagination.page - 1) * pagination.pageSize + i + 1"
        />
        <el-table-column
          prop="protocolStatus"
          label="协议状态"
          min-width="100"
          align="center"
          header-align="center"
        >
          <template #default="{ row }">
            <el-tag
              :type="protocolStatusTagType(String(row.protocolStatus || ''))"
              size="small"
              >{{ protocolStatusDisplayLabel(String(row.protocolStatus || ''), String(row.voidType || '')) }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="expectedDeliveryDate"
          label="预产期"
          min-width="120"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="motherName"
          label="母亲姓名"
          min-width="100"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="newbornName"
          label="新生儿姓名"
          min-width="110"
          align="center"
          header-align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="sampleCode"
          label="样本编码"
          min-width="160"
          align="center"
          header-align="center"
        >
          <template #default="{ row }">
            <SampleCodeWithSpecialDisplay
              :sample-code="row.sampleCode"
              :is-special="!!row.isSpecial"
              :special-remark="row.specialRemark"
              monospace
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="labStorageCode"
          label="实验室入库编码"
          min-width="150"
          align="center"
          header-align="center"
        >
          <template #default="{ row }">{{ row.labStorageCode || '—' }}</template>
        </el-table-column>
        <el-table-column
          prop="sampleTypeName"
          label="样本类型"
          min-width="110"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="sampleStatus"
          label="采集状态"
          min-width="100"
          align="center"
          header-align="center"
        >
          <template #default="{ row }">
            <el-tag :type="collectionStatusTagType(String(row.sampleStatus || ''))" size="small">
              {{ row.sampleStatusLabel || collectionStatusLabel(String(row.sampleStatus || '')) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="regionName"
          label="采集地区"
          min-width="120"
          align="center"
          header-align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="hospitalName"
          label="采集医院"
          min-width="140"
          align="center"
          header-align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="medicalStaff"
          label="采集医护"
          min-width="100"
          align="center"
          header-align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="sampleCollectTime"
          label="样本采集时间"
          min-width="170"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="maternalBloodCollectTime"
          label="母血采集时间"
          min-width="170"
          align="center"
          header-align="center"
        />
        <el-table-column
          label="操作"
          min-width="120"
          fixed="right"
          align="center"
          header-align="center"
        >
          <template #default="{ row }">
            <el-button class="btn-op-item primary" @click="handleView(row)">
              <el-icon><View /></el-icon>查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <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) => ((pagination.page = 1), (pagination.pageSize = val), loadData())"
          @current-change="(val) => ((pagination.page = val), loadData())"
        />
      </div>
    </div>

    <ProtocolViewDialog
      v-model="viewVisible"
      :protocol-id="viewProtocolId"
      :list-row="viewRow"
      show-audit-history
      show-storage-cert
      show-fullmoon-insurance
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Search, RefreshLeft, View } from '@element-plus/icons-vue'
  import ProtocolViewDialog from '../protocol/ProtocolViewDialog.vue'
  import SampleCodeWithSpecialDisplay from '@/components/business/sample-code-with-special-display/index.vue'
  import { fetchProtocolSampleCollectionList } from '@/api/protocol-sample-collection'
  import { type CollectionProtocolRow } from '@/api/collection-protocol'
  import {
    protocolStatusDisplayLabel,
    protocolStatusTagType,
    sampleStatusLabel,
    sampleStatusTagType
  } from '@/utils/status-tag-registry'

  defineOptions({ name: 'CellStorageSampleCollectionInfoTab' })

  function collectionStatusLabel(status: string) {
    return status ? sampleStatusLabel(status) : '未采集'
  }

  function collectionStatusTagType(status: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' {
    return status ? sampleStatusTagType(status) : 'info'
  }

  const searchForm = reactive({ keyword: '', sampleStatus: '' })
  const tableData = ref<Record<string, unknown>[]>([])
  const loading = ref(false)
  const pagination = reactive({ page: 1, pageSize: 10, total: 0 })

  const viewVisible = ref(false)
  const viewProtocolId = ref<string | null>(null)
  const viewRow = ref<CollectionProtocolRow | null>(null)

  async function loadData() {
    loading.value = true
    try {
      const result = await fetchProtocolSampleCollectionList({
        page: pagination.page,
        pageSize: pagination.pageSize,
        keyword: searchForm.keyword || undefined,
        sampleStatus: searchForm.sampleStatus || undefined
      })
      const res = (result as Record<string, unknown>) || {}
      tableData.value = (res.list as Record<string, unknown>[]) || []
      pagination.total = Number(res.total) || 0
    } finally {
      loading.value = false
    }
  }

  function handleSearch() {
    pagination.page = 1
    loadData()
  }

  function handleReset() {
    Object.assign(searchForm, { keyword: '', sampleStatus: '' })
    handleSearch()
  }

  function handleView(row: Record<string, unknown>) {
    const pid = String(row.collectionProtocolId || '')
    if (!pid) {
      ElMessage.warning('缺少关联协议单，无法查看')
      return
    }
    viewProtocolId.value = pid
    viewRow.value = {
      id: pid,
      motherName: row.motherName,
      newbornName: row.newbornName
    } as CollectionProtocolRow
    viewVisible.value = true
  }

  watchDebounced(
    searchForm,
    () => {
      pagination.page = 1
      loadData()
    },
    { debounce: 300, deep: true }
  )

  onMounted(() => {
    loadData()
  })
</script>