zkxw/docs/superpowers/plans/2026-07-01-qc-work-order-attachment-export.md

质检工单批量导出任务附件 Implementation Plan

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: 在【质检工单】【我的质检任务】支持多选工单，将各工单全部批次/任务附件按三层目录打包 ZIP 下载，并展示三阶段进度弹窗。

Architecture: 纯前端 JSZip；fetchQcInspectionBatchesBatch 聚合元数据；attachment-zip.ts 负责 blob 下载与路径去重；qc-work-order-attachment-export.ts 构建目录并执行打包；provide/inject 传递卡片勾选状态，避免多层 prop drilling。

Tech Stack: Vue 3、Element Plus、JSZip、file-saver、现有预签名下载 API

Spec: docs/superpowers/specs/2026-07-01-qc-work-order-attachment-export-design.md

---

Task 1: 公共 ZIP 工具

Files:

• Create: web-admin/src/utils/attachment-zip.ts

• 实现 sanitizeZipPathSegment、ensureUniqueZipEntryName、fetchAttachmentBlob、formatZipDateStamp

Task 2: 质检工单导出核心

Files:

• Create: web-admin/src/utils/qc-work-order-attachment-export.ts

• 实现 buildQcWorkOrderZipEntries、runAttachmentZipExport（三阶段进度回调 + AbortSignal）

Task 3: 进度弹窗与 composable

Files:

• Create: web-admin/src/components/business/attachment-zip-progress-dialog/index.vue
• Create: web-admin/src/views/quality-inspection/qc-work-order/composables/useQcWorkOrderAttachmentExport.ts
• Create: web-admin/src/views/quality-inspection/qc-work-order/composables/qc-work-order-selection.ts

Task 4: 卡片勾选与工具栏

Files:

• Modify: QcWorkOrderSingleCard.vue — checkbox + inject
• Modify: QcWorkOrderTabPanel.vue — provide 选择态、工具栏、导出按钮、翻页清空

Task 5: 验证

• pnpm lint 相关文件
• ./scripts/update-graph.sh frontend