# 中试服务申请单 — 详情页改弹窗 + UI合规修复 实施计划

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 将中试服务申请单详情页从独立路由改为弹窗形式（照抄采集协议单的查看/编辑弹窗风格），并修复列表页按钮图标缺失。

**Architecture:** 新建 `ApplicationDetailDialog.vue`，从 `ApplicationDetail.vue` 复制全部业务逻辑，改 props-driven 弹窗接口。列表页 `index.vue` 引入弹窗组件替换路由跳转。照抄 `ProtocolViewDialog`（KPI+data-grid）和 `ProtocolFormDialog`（form-grid+section-card）的 CSS 风格。

**Tech Stack:** Vue 3 + Element Plus + TypeScript + SCSS

**设计规格:** `docs/superpowers/specs/2025-05-25-pilot-application-dialog-refactor-design.md`

---

## 文件结构

| 文件 | 操作 | 职责 |
|------|------|------|
| `src/views/pilot-service/pilot-application/ApplicationDetailDialog.vue` | **新建** | 详情弹窗组件，props-driven，照抄 ProtocolViewDialog + ProtocolFormDialog 风格 |
| `src/views/pilot-service/pilot-application/index.vue` | **修改** | 列表页：引入弹窗组件、替换路由跳转、补按钮图标 |
| `src/views/pilot-service/pilot-application/ApplicationDetail.vue` | **删除** | 被新组件完全替代 |
| `src/router/modules/sqxp.ts` | **修改** | 删除 PilotApplicationDetail 路由定义 |

**参考文件（照抄风格源，只读不修改）：**
- `src/views/cell-storage/protocol/ProtocolViewDialog.vue` — KPI 摘要条、data-grid、section-card CSS
- `src/views/cell-storage/protocol/ProtocolFormDialog.vue` — form-grid、upload-card CSS

---

## Task 1: 创建 ApplicationDetailDialog.vue 弹窗壳层 + 基本信息Tab

**Files:**
- Create: `src/views/pilot-service/pilot-application/ApplicationDetailDialog.vue`
- Read: `src/views/pilot-service/pilot-application/ApplicationDetail.vue`（源文件，复制逻辑）
- Read: `src/views/cell-storage/protocol/ProtocolViewDialog.vue`（照抄 KPI + data-grid + section-card CSS）

- [ ] **Step 1: 复制 ApplicationDetail.vue 为 ApplicationDetailDialog.vue 并改造弹窗壳层**

从 `ApplicationDetail.vue` 复制全部内容到 `ApplicationDetailDialog.vue`，然后改造：

1. **替换 `<template>` 最外层**：移除 `<div class="page-container">` 和 `<header class="page-head">`（返回按钮+标题），改为 `el-dialog` 弹窗壳：

```vue
<template>
  <el-dialog
    :model-value="modelValue"
    @update:model-value="emit('update:modelValue', $event)"
    :title="dialogTitle"
    width="1600px"
    class="dialog-form-layout application-detail-dialog"
    align-center
    destroy-on-close
    :close-on-click-modal="false"
  >
    <div
      class="application-detail-body"
      :class="{ 'is-loading': detailLoading }"
      v-loading="detailLoading"
      element-loading-text="加载中…"
    >
      <!-- detail-tabs sticky 导航 -->
      <div class="detail-tabs">
        <div
          v-for="tab in detailTabs"
          :key="tab.key"
          class="detail-tab"
          :class="{ active: activeTab === tab.key }"
          @click="scrollToTab(tab.key)"
        >
          {{ tab.label }}
        </div>
      </div>

      <template v-if="applicationDetail">
        <!-- KPI 摘要条 -->
        <div class="kpi-strip">
          <div class="kpi-card">
            <div class="kpi-card__icon"><el-icon><Document /></el-icon></div>
            <div class="kpi-card__main">
              <div class="kpi-label">申请单号</div>
              <div class="kpi-value kpi-value--emphasis">{{ displayValue(applicationDetail.applicationNo) }}</div>
            </div>
          </div>
          <div class="kpi-card">
            <div class="kpi-card__icon"><el-icon><CircleCheck /></el-icon></div>
            <div class="kpi-card__main">
              <div class="kpi-label">状态</div>
              <div class="kpi-value">
                <el-tag :type="applicationStatusTagType(applicationDetail.applicationStatus)" size="small">
                  {{ applicationStatusLabel(applicationDetail.applicationStatus) }}
                </el-tag>
              </div>
            </div>
          </div>
          <div class="kpi-card">
            <div class="kpi-card__icon"><el-icon><User /></el-icon></div>
            <div class="kpi-card__main">
              <div class="kpi-label">渠道名称</div>
              <div class="kpi-value">{{ displayValue(applicationDetail.channelName) }}</div>
            </div>
          </div>
          <div class="kpi-card">
            <div class="kpi-card__icon"><el-icon><Calendar /></el-icon></div>
            <div class="kpi-card__main">
              <div class="kpi-label">创建时间</div>
              <div class="kpi-value">{{ displayValue(applicationDetail.createTime) }}</div>
            </div>
          </div>
        </div>

        <!-- 原 el-tabs 内容迁移到这里 -->
        <div id="tab-basic" class="form-tab-pane">
          <!-- 申请单信息（只读，用 data-grid 替代 el-descriptions） -->
          <div class="section-card section-card--white">
            <div class="section-title"><h3>申请单信息</h3></div>
            <div class="data-grid data-grid--4">
              <div class="data-item"><div class="data-label">申请单号</div><div class="data-value">{{ displayValue(applicationDetail.applicationNo) }}</div></div>
              <div class="data-item"><div class="data-label">渠道名称</div><div class="data-value">{{ displayValue(applicationDetail.channelName) }}</div></div>
              <div class="data-item"><div class="data-label">服务订单名称</div><div class="data-value">{{ displayValue(applicationDetail.serviceOrderNo) }}</div></div>
              <div class="data-item"><div class="data-label">状态</div><div class="data-value"><el-tag :type="applicationStatusTagType(applicationDetail.applicationStatus)" size="small">{{ applicationStatusLabel(applicationDetail.applicationStatus) }}</el-tag></div></div>
              <div class="data-item"><div class="data-label">创建时间</div><div class="data-value">{{ displayValue(applicationDetail.createTime) }}</div></div>
              <div class="data-item"><div class="data-label">备注</div><div class="data-value">{{ displayValue(applicationDetail.remark) }}</div></div>
            </div>
          </div>

          <!-- 患者信息（可编辑表单，保留原 form-grid-2 布局） -->
          <!-- 直接复制原 ApplicationDetail.vue 中 Tab1 的患者信息部分 -->
        </div>

        <!-- 其余5个Tab内容照搬原文件，每个用 form-tab-pane 包裹 -->
        <!-- ... -->
      </template>
    </div>

    <!-- 状态操作按钮（照抄原 header 中的按钮） -->
    <template #header>
      <div class="detail-dialog-header">
        <div class="detail-dialog-header-left">
          <span class="detail-dialog-title">申请单详情</span>
          <el-tag v-if="applicationDetail.applicationStatus" :type="applicationStatusTagType(applicationDetail.applicationStatus)" size="large">
            {{ applicationStatusLabel(applicationDetail.applicationStatus) }}
          </el-tag>
        </div>
        <div class="detail-dialog-header-right">
          <el-button v-if="applicationDetail.applicationStatus === 'dks'" class="btn-main" type="primary" @click="handleStart"><el-icon><VideoPlay /></el-icon>开始</el-button>
          <el-button v-if="applicationDetail.applicationStatus === 'jxz'" class="btn-main" type="primary" @click="handleComplete"><el-icon><CircleCheck /></el-icon>完成</el-button>
          <el-button v-if="applicationDetail.applicationStatus === 'dks' || applicationDetail.applicationStatus === 'jxz'" class="btn-op-item op-warn" type="danger" @click="handleVoid"><el-icon><CircleClose /></el-icon>作废</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
  <!-- 8个嵌套弹窗照搬 -->
</template>
```

2. **替换 `<script>` 的 props 接口**：

```typescript
defineOptions({ name: 'ApplicationDetailDialog' })

const props = defineProps<{
  modelValue: boolean
  applicationId: string
  listRow?: any
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
  (e: 'status-changed'): void
}>()
```

3. **替换数据加载方式**：移除 `onMounted` + `route.query.id`，改为：

```typescript
// 移除
// const route = useRoute()
// onMounted(() => { loadApplicationDetail(route.query.id) })

// 新增
const detailTabs = [
  { key: 'basic', label: '基本信息' },
  { key: 'infusion', label: '输注方案' },
  { key: 'checkup', label: '体检信息' },
  { key: 'delivery', label: '交付信息' },
  { key: 'release', label: '放行审核' },
  { key: 'confirm', label: '应用确认' },
]

const activeTab = ref('basic')

const scrollToTab = (key: string) => {
  activeTab.value = key
  const el = document.getElementById(`tab-${key}`)
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

watch(() => props.applicationId, (newId) => {
  if (newId && props.modelValue) {
    loadApplicationDetail(newId)
  }
}, { immediate: true })
```

4. **状态操作后发射事件**：在 `handleStart`、`handleComplete`、`handleVoid` 成功后追加 `emit('status-changed')`

5. **新增图标 import**：`VideoPlay`, `CircleCheck`, `CircleClose`, `Document`, `Calendar` 等

- [ ] **Step 2: 照抄 CSS 样式**

从 `ProtocolViewDialog.vue` 的 `<style scoped>` 中复制以下 CSS 块到 `ApplicationDetailDialog.vue`：

- `.kpi-strip` / `.kpi-card` / `.kpi-card__icon` / `.kpi-card__main` / `.kpi-label` / `.kpi-value`（L2073-2143）
- `.data-grid` / `--2` / `--3` / `--4`（L2197-2212）
- `.data-item` / `.data-label` / `.data-value`（L2214-2238）
- `.section-card` / `--white` / `--green`（L2146-2168）
- `.section-title` + `::before` + `h3`（L2170-2194）

从 `ProtocolFormDialog.vue` 的 `<style scoped>` 中复制：

- `.detail-tabs` / `.detail-tab`（L2878-2912）
- `.form-tab-pane`（L2917-2924）
- `.form-grid` / `--col2` / `--col4` / `.form-col-span-2`（L2995-3023）

新增弹窗 header 样式：

```scss
.detail-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.detail-dialog-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-dialog-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.detail-dialog-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.application-detail-body {
  background: #f5f7fa;
  overflow: visible;
}
```

- [ ] **Step 3: 验证无编译错误**

Run: `cd web-admin && pnpm build:typecheck 2>&1 | head -50`
Expected: 无与 ApplicationDetailDialog.vue 相关的类型错误

---

## Task 2: 改造列表页 index.vue — 引入弹窗 + 补按钮图标

**Files:**
- Modify: `src/views/pilot-service/pilot-application/index.vue`

- [ ] **Step 1: 引入弹窗组件，替换路由跳转逻辑**

在 `<script>` 区域：

1. 移除 `const router = useRouter()`（如果其他地方还用到 router 则保留）

2. 新增弹窗状态变量和事件处理：

```typescript
import ApplicationDetailDialog from './ApplicationDetailDialog.vue'

const detailDialogVisible = ref(false)
const detailApplicationId = ref('')

const handleView = (row: any) => {
  detailApplicationId.value = row.id
  detailDialogVisible.value = true
}

const handleEdit = (row: any) => {
  detailApplicationId.value = row.id
  detailDialogVisible.value = true
}

// handleSubmit 中：创建成功后打开弹窗而非跳转路由
// 将 router.push({ name: 'PilotApplicationDetail', ... }) 替换为：
// detailApplicationId.value = newId
// detailDialogVisible.value = true

const onDetailStatusChanged = () => {
  loadData()
}
```

3. 在 `<template>` 底部（新增申请单弹窗之后）添加弹窗组件：

```vue
<ApplicationDetailDialog
  v-model="detailDialogVisible"
  :application-id="detailApplicationId"
  @status-changed="onDetailStatusChanged"
/>
```

- [ ] **Step 2: 补充操作列按钮的 el-icon**

在 `<template>` 操作列区域，为所有 `el-button` 补充 `<el-icon>` 前缀：

```vue
<!-- 查看 -->
<el-button class="btn-op-item primary" @click="handleView(row)">
  <el-icon><View /></el-icon>查看
</el-button>

<!-- 编辑 -->
<el-button v-if="row.applicationStatus === 'dks'" class="btn-op-item" @click="handleEdit(row)">
  <el-icon><Edit /></el-icon>编辑
</el-button>

<!-- 删除（popconfirm 内） -->
<template #reference>
  <el-button class="btn-op-item op-warn"><el-icon><Delete /></el-icon>删除</el-button>
</template>

<!-- 开始 -->
<el-button v-if="row.applicationStatus === 'dks'" class="btn-op-item primary" type="primary" @click="handleStart(row)">
  <el-icon><VideoPlay /></el-icon>开始
</el-button>

<!-- 完成 -->
<el-button v-if="row.applicationStatus === 'jxz'" class="btn-op-item primary" type="primary" @click="handleComplete(row)">
  <el-icon><CircleCheck /></el-icon>完成
</el-button>

<!-- 作废 -->
<el-button v-if="..." class="btn-op-item op-warn" type="danger" @click="handleVoid(row)">
  <el-icon><CircleClose /></el-icon>作废
</el-button>
```

更新 import 语句：

```typescript
import {
  Plus, Search, RefreshLeft, Close, Check,
  View, Edit, Delete, VideoPlay, CircleCheck, CircleClose
} from '@element-plus/icons-vue'
```

- [ ] **Step 3: 验证列表页无编译错误**

Run: `cd web-admin && pnpm build:typecheck 2>&1 | head -50`
Expected: 无与 index.vue 相关的类型错误

---

## Task 3: 清理路由 + 删除旧详情页

**Files:**
- Modify: `src/router/modules/sqxp.ts`
- Delete: `src/views/pilot-service/pilot-application/ApplicationDetail.vue`

- [ ] **Step 1: 删除 PilotApplicationDetail 路由定义**

在 `src/router/modules/sqxp.ts` 第650-656行，删除：

```typescript
{
  id: '80000000000000000000000000000011',
  name: 'PilotApplicationDetail',
  path: 'pilot-application/detail',
  component: '/pilot-service/pilot-application/ApplicationDetail',
  meta: { title: '申请单详情', hidden: true }
}
```

注意保留上一行的逗号处理——删除该对象后，`PilotApplication` 路由对象后不应有尾随逗号。

- [ ] **Step 2: 删除 ApplicationDetail.vue**

```bash
rm src/views/pilot-service/pilot-application/ApplicationDetail.vue
```

- [ ] **Step 3: 全局搜索确认无其他引用**

Run: `grep -r "PilotApplicationDetail\|ApplicationDetail" web-admin/src/ --include="*.vue" --include="*.ts"`
Expected: 0 结果（所有引用已清理）

---

## Task 4: 弹窗内嵌套弹窗按钮图标补充

**Files:**
- Modify: `src/views/pilot-service/pilot-application/ApplicationDetailDialog.vue`

- [ ] **Step 1: 检查并补充弹窗内所有操作按钮的 el-icon**

在 `ApplicationDetailDialog.vue` 中，搜索所有 `el-button` 标签（不含 `el-icon` 子元素的），按 openspec 规范补充图标：

- "新增输注方案" → `Plus`
- "手动添加计划" → `Plus`
- "选择客户" → `User`
- "保存患者信息" → `Check`
- 各 Tab 中的"编辑" → `Edit`
- 各 Tab 中的"删除" → `Delete`
- 嵌套弹窗 footer 的"取消" → `Close`，"确定" → `Check`
- 其他操作按钮逐一检查

确保所有图标已在 `<script>` 中从 `@element-plus/icons-vue` import。

- [ ] **Step 2: 验证无遗漏**

Run: `grep -n '<el-button' web-admin/src/views/pilot-service/pilot-application/ApplicationDetailDialog.vue | head -50`
Expected: 手动检查每个 el-button 是否包含 `<el-icon>` 子元素

---

## Task 5: 端到端验证

**Files:** 无新增修改

- [ ] **Step 1: 构建检查**

Run: `cd web-admin && pnpm build 2>&1 | tail -20`
Expected: 构建成功，无错误

- [ ] **Step 2: Lint 检查**

Run: `cd web-admin && pnpm lint 2>&1 | tail -30`
Expected: 无 ESLint 错误（或仅预存在的无关错误）

- [ ] **Step 3: 更新知识图谱**

Run: `./scripts/update-graph.sh frontend`
Expected: 前端知识图谱更新成功

---

## Self-Review

### 1. Spec Coverage

| Spec Section | Task |
|---|---|
| 3.1 照抄清单 A1-A5 (ViewDialog) | Task 1 (弹窗壳层+CSS) |
| 3.1 照抄清单 B1-B4 (FormDialog) | Task 1 (表单CSS) |
| 3.1 照抄清单 C1-C4 (公共) | Task 1 (detail-tabs, section-card) |
| 3.2 弹窗组件接口 | Task 1 (defineProps/defineEmits) |
| 3.3 弹窗壳层配置 | Task 1 (el-dialog 1600px) |
| 3.4 顶部区域改造 | Task 1 (自定义 #header) |
| 3.5 正文结构 | Task 1 (KPI + data-grid + form-tab-pane) |
| 3.6 数据加载变更 | Task 1 (watch) |
| 3.7 列表页改造 | Task 2 (引入弹窗+替换路由) |
| 4.1 操作列按钮图标 | Task 2 (补充 el-icon) |
| 4.2 弹窗内按钮图标 | Task 4 |
| 5. 路由清理 | Task 3 |

**Gap check:** 无遗漏。

### 2. Placeholder Scan

无 TBD/TODO/占位符。

### 3. Type Consistency

- `ApplicationDetailDialog` props: `modelValue: boolean`, `applicationId: string` — 与 `index.vue` 中的使用 `v-model="detailDialogVisible"` 和 `:application-id="detailApplicationId"` 一致。
- Event `status-changed` — 与 `@status-changed="onDetailStatusChanged"` 一致。