From df827e4344d11978e70f78baf4f55dd5827c1074 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Fri, 9 Oct 2026 12:40:16 +0800
Subject: [PATCH] feat(web-admin): add shared storage-cert QC fill/view dialog.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../business/storage-cert-qc-dialog/index.vue | 354 ++++++++++++++++++
 1 file changed, 354 insertions(+)
 create mode 100644 web-admin/src/components/business/storage-cert-qc-dialog/index.vue

diff --git a/web-admin/src/components/business/storage-cert-qc-dialog/index.vue b/web-admin/src/components/business/storage-cert-qc-dialog/index.vue
new file mode 100644
index 00000000..d088553a
--- /dev/null
+++ b/web-admin/src/components/business/storage-cert-qc-dialog/index.vue
@@ -0,0 +1,354 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="dialogTitle"
+    width="920px"
+    class="dialog-form-layout storage-cert-qc-dialog"
+    align-center
+    append-to-body
+    destroy-on-close
+    modal-class="protocol-dialog-mask"
+    @update:model-value="emit('update:visible', $event)"
+  >
+    <div v-loading="loading" class="storage-cert-qc-dialog__body">
+      <div class="ctx-row">
+        <div class="ctx-item">
+          <label>实验室流转编码</label>
+          <div class="val">{{ identity.labFlowCode || '—' }}</div>
+        </div>
+        <div class="ctx-item">
+          <label>协议编码</label>
+          <div class="val">{{ identity.protocolCode || '—' }}</div>
+        </div>
+        <div class="ctx-item">
+          <label>母亲姓名</label>
+          <div class="val">{{ identity.motherName || '—' }}</div>
+        </div>
+        <div class="ctx-item">
+          <label>样本类型</label>
+          <div class="val">{{ identity.sampleTypeName || sampleTypeName || '—' }}</div>
+        </div>
+      </div>
+
+      <el-empty
+        v-if="mode === 'view' && !filledFlag && !loading"
+        description="质检尚未填写"
+      />
+
+      <template v-else-if="typeKey && groups.length">
+        <div
+          v-for="(group, gi) in groups"
+          :key="gi"
+          class="field-group"
+          :class="`field-group--${group.variant || 'primary'}`"
+        >
+          <div class="field-group__title">{{ group.title }}</div>
+          <el-form label-position="top" class="biz-dialog-form field-group__form" @submit.prevent>
+            <div class="form-grid-3">
+              <el-form-item
+                v-for="field in group.fields"
+                :key="field.key"
+                :label="field.label"
+                :class="{
+                  'form-col-span-2': field.span === 2,
+                  'form-col-span-3': field.span === 3
+                }"
+              >
+                <template v-if="mode === 'view'">
+                  <div class="readonly-box">{{ displayValue(field.key) }}</div>
+                </template>
+                <el-select
+                  v-else-if="field.control === 'select_yny'"
+                  v-model="form[field.key]"
+                  clearable
+                  placeholder="请选择"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="opt in YNY_OPTIONS"
+                    :key="opt.value"
+                    :label="opt.label"
+                    :value="opt.value"
+                  />
+                </el-select>
+                <el-input
+                  v-else-if="field.control === 'textarea'"
+                  v-model="form[field.key]"
+                  type="textarea"
+                  :rows="4"
+                  placeholder="请输入"
+                />
+                <el-input v-else v-model="form[field.key]" clearable placeholder="请输入" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </template>
+
+      <el-alert
+        v-else-if="!loading && !typeKey"
+        type="warning"
+        :closable="false"
+        title="该样本类型不支持储存证质检信息"
+      />
+    </div>
+
+    <template #footer>
+      <template v-if="mode === 'edit'">
+        <el-button @click="emit('update:visible', false)">
+          <el-icon><Close /></el-icon>
+          取消
+        </el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">
+          <el-icon><Check /></el-icon>
+          确定
+        </el-button>
+      </template>
+      <el-button v-else type="primary" @click="emit('update:visible', false)">
+        <el-icon><Check /></el-icon>
+        关闭
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+  import { Check, Close } from '@element-plus/icons-vue'
+  import { ElMessage } from 'element-plus'
+  import {
+    fetchSampleStorageCertQc,
+    saveSampleStorageCertQc,
+    type SampleStorageCertQcDetail
+  } from '@/api/sample-storage-cert-qc'
+  import {
+    STORAGE_CERT_QC_GROUPS,
+    YNY_OPTIONS,
+    resolveStorageCertQcTypeKey,
+    type StorageCertQcTypeKey
+  } from '@/utils/storage-cert-qc-fields'
+
+  const props = defineProps<{
+    visible: boolean
+    mode: 'edit' | 'view'
+    sampleCode: string
+    sampleTypeName?: string
+    qcWorkOrderId?: string
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update:visible', v: boolean): void
+    (e: 'saved'): void
+  }>()
+
+  const loading = ref(false)
+  const saving = ref(false)
+  const filledFlag = ref(false)
+  const typeKey = ref<StorageCertQcTypeKey | null>(null)
+  const form = reactive<Record<string, string>>({})
+  const identity = reactive({
+    labFlowCode: '',
+    protocolCode: '',
+    motherName: '',
+    sampleTypeName: ''
+  })
+
+  const dialogTitle = computed(() =>
+    props.mode === 'edit' ? '填写储存证质检信息' : '查看储存证的质检信息'
+  )
+
+  const groups = computed(() => (typeKey.value ? STORAGE_CERT_QC_GROUPS[typeKey.value] || [] : []))
+
+  function displayValue(key: string) {
+    const v = form[key]
+    if (v == null || String(v).trim() === '') return '—'
+    return String(v)
+  }
+
+  function resetFormKeys(key: StorageCertQcTypeKey | null, payload: Record<string, unknown>) {
+    Object.keys(form).forEach((k) => delete form[k])
+    if (!key) return
+    for (const group of STORAGE_CERT_QC_GROUPS[key] || []) {
+      for (const field of group.fields) {
+        const raw = payload[field.key]
+        form[field.key] = raw == null ? '' : String(raw)
+      }
+    }
+  }
+
+  function applyDetail(detail: SampleStorageCertQcDetail) {
+    identity.labFlowCode = detail.labFlowCode || detail.sampleCode || ''
+    identity.protocolCode = detail.protocolCode || ''
+    identity.motherName = detail.motherName || ''
+    identity.sampleTypeName = detail.sampleTypeName || props.sampleTypeName || ''
+    filledFlag.value = !!detail.filledFlag
+    const resolved =
+      (detail.sampleTypeKey as StorageCertQcTypeKey | null) ||
+      resolveStorageCertQcTypeKey(identity.sampleTypeName)
+    typeKey.value = resolved
+    resetFormKeys(resolved, (detail.payload || {}) as Record<string, unknown>)
+  }
+
+  async function loadDetail() {
+    const code = String(props.sampleCode || '').trim()
+    if (!code) return
+    loading.value = true
+    try {
+      const detail = (await fetchSampleStorageCertQc(code)) as SampleStorageCertQcDetail
+      applyDetail(detail)
+    } catch {
+      typeKey.value = resolveStorageCertQcTypeKey(props.sampleTypeName)
+      filledFlag.value = false
+      resetFormKeys(typeKey.value, {})
+      identity.labFlowCode = code
+      identity.sampleTypeName = props.sampleTypeName || ''
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function handleSave() {
+    const code = String(props.sampleCode || '').trim()
+    if (!code || !typeKey.value) {
+      ElMessage.warning('无法保存：样本类型不支持或缺少样本编码')
+      return
+    }
+    const payload: Record<string, unknown> = {}
+    for (const group of groups.value) {
+      for (const field of group.fields) {
+        const v = form[field.key]
+        payload[field.key] = v == null ? '' : v
+      }
+    }
+    saving.value = true
+    try {
+      await saveSampleStorageCertQc(code, {
+        payload,
+        qcWorkOrderId: props.qcWorkOrderId || undefined
+      })
+      ElMessage.success('保存成功')
+      emit('saved')
+      emit('update:visible', false)
+    } finally {
+      saving.value = false
+    }
+  }
+
+  watch(
+    () => [props.visible, props.sampleCode] as const,
+    ([vis]) => {
+      if (vis) loadDetail()
+    }
+  )
+</script>
+
+<style scoped lang="scss">
+  .storage-cert-qc-dialog__body {
+    min-height: 120px;
+  }
+
+  .ctx-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin-bottom: 16px;
+    padding: 12px;
+    background: #f8fafc;
+    border: 1px solid var(--el-border-color-lighter, #e2e8f0);
+    border-radius: 8px;
+  }
+
+  .ctx-item label {
+    display: block;
+    margin-bottom: 2px;
+    font-size: 11px;
+    color: var(--el-text-color-secondary, #64748b);
+  }
+
+  .ctx-item .val {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--el-text-color-primary, #0f172a);
+  }
+
+  .field-group {
+    margin-bottom: 14px;
+    overflow: hidden;
+    border: 1px solid var(--el-border-color-lighter, #e2e8f0);
+    border-radius: 10px;
+  }
+
+  .field-group__title {
+    padding: 10px 14px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--el-color-primary-dark-2, #059669);
+    background: var(--el-color-primary-light-9, #ecfdf5);
+    border-bottom: 1px solid #a7f3d0;
+  }
+
+  .field-group--alt .field-group__title {
+    color: var(--el-text-color-regular, #334155);
+    background: #f1f5f9;
+    border-bottom-color: var(--el-border-color-lighter, #e2e8f0);
+  }
+
+  .field-group--meta .field-group__title {
+    color: #92400e;
+    background: #fffbeb;
+    border-bottom-color: #fde68a;
+  }
+
+  .field-group__form {
+    padding: 14px;
+  }
+
+  .form-grid-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px 14px;
+
+    :deep(.el-form-item) {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-col-span-2 {
+    grid-column: span 2;
+  }
+
+  .form-col-span-3 {
+    grid-column: 1 / -1;
+  }
+
+  .readonly-box {
+    min-height: 36px;
+    padding: 8px 10px;
+    font-size: 13px;
+    color: var(--el-text-color-regular, #334155);
+    white-space: pre-wrap;
+    background: #f8fafc;
+    border: 1px solid var(--el-border-color-lighter, #e2e8f0);
+    border-radius: 8px;
+  }
+
+  @media (max-width: 900px) {
+    .form-grid-3 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .ctx-row {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media (max-width: 560px) {
+    .form-grid-3 {
+      grid-template-columns: 1fr;
+    }
+
+    .form-col-span-2,
+    .form-col-span-3 {
+      grid-column: 1 / -1;
+    }
+  }
+</style>