From d72e28959d7151b3b029df2f99b591031a96c284 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Mon, 12 Oct 2026 13:49:18 +0800
Subject: [PATCH] feat(web-admin): add shared freight unlink dialog

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

diff --git a/web-admin/src/components/business/freight-unlink-dialog/index.vue b/web-admin/src/components/business/freight-unlink-dialog/index.vue
new file mode 100644
index 00000000..7e921601
--- /dev/null
+++ b/web-admin/src/components/business/freight-unlink-dialog/index.vue
@@ -0,0 +1,118 @@
+<!-- 取消运费 · 勾选样本弹窗 -->
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="取消运费"
+    width="720px"
+    class="dialog-form-layout"
+    align-center
+    append-to-body
+    modal-class="protocol-dialog-mask"
+    destroy-on-close
+    :close-on-click-modal="false"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <p class="unlink-hint">勾选要取消运费的样本：</p>
+    <el-table
+      ref="tableRef"
+      :data="items"
+      stripe
+      class="list-table"
+      max-height="360"
+      row-key="rowKey"
+      @selection-change="onSelectionChange"
+    >
+      <el-table-column type="selection" min-width="48" align="center" header-align="center" />
+      <el-table-column label="来源" min-width="100" align="center" header-align="center">
+        <template #default="{ row }">
+          <el-tag :type="row.sampleSource === 'cell_storage' ? 'success' : 'warning'" size="small">
+            {{ row.sampleSource === 'cell_storage' ? '细胞存储' : '科研捐赠' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="protocolNo" label="协议单号" min-width="140" show-overflow-tooltip />
+      <el-table-column prop="sampleCode" label="样本编码" min-width="120" show-overflow-tooltip />
+      <el-table-column
+        prop="sampleTypeName"
+        label="样本类型"
+        min-width="110"
+        show-overflow-tooltip
+      />
+    </el-table>
+    <template #footer>
+      <el-button class="btn-ghost" @click="emit('update:modelValue', false)">
+        <el-icon><Close /></el-icon>
+        取消
+      </el-button>
+      <el-button class="btn-main" type="primary" :loading="submitting" @click="onConfirm">
+        <el-icon><Check /></el-icon>
+        确定
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+  import { Check, Close } from '@element-plus/icons-vue'
+  import type { SampleFreightItem } from '@/api/sample-freight'
+  import { nextTick, ref, watch } from 'vue'
+
+  export type FreightUnlinkRow = SampleFreightItem & {
+    rowKey: string
+    freightId: string
+  }
+
+  const props = defineProps<{
+    modelValue: boolean
+    items: FreightUnlinkRow[]
+    /** 默认勾选的 rowKey 列表 */
+    defaultSelectedKeys?: string[]
+    submitting?: boolean
+  }>()
+
+  const emit = defineEmits<{
+    'update:modelValue': [boolean]
+    confirm: [FreightUnlinkRow[]]
+  }>()
+
+  const tableRef = ref()
+  const selected = ref<FreightUnlinkRow[]>([])
+
+  function onSelectionChange(rows: FreightUnlinkRow[]) {
+    selected.value = rows
+  }
+
+  async function applyDefaultSelection() {
+    await nextTick()
+    const table = tableRef.value
+    if (!table) return
+    table.clearSelection?.()
+    const keys = new Set(props.defaultSelectedKeys || [])
+    for (const row of props.items) {
+      if (keys.has(row.rowKey)) table.toggleRowSelection(row, true)
+    }
+  }
+
+  watch(
+    () => [props.modelValue, props.items, props.defaultSelectedKeys] as const,
+    ([visible]) => {
+      if (visible) applyDefaultSelection()
+    }
+  )
+
+  function onConfirm() {
+    if (!selected.value.length) {
+      ElMessage.warning('请勾选要取消运费的样本')
+      return
+    }
+    emit('confirm', selected.value)
+  }
+</script>
+
+<style scoped lang="scss">
+  .unlink-hint {
+    margin: 0 0 12px;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+</style>