提交
This commit is contained in:
zlwu committed
1 parent
f6efca8fdf
commit
93a83d260f
45 files changed
+1211
-393
No files matched your search
@@ -0,0 +1,140 @@
|
||||
# OA 审批单 PDF 导出 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:** 在「我发起的」「抄送我的」列表增加「打印」按钮，前端按钉钉风格（印章第 4 版）用 html2canvas + jspdf 直接下载审批单 PDF。
|
||||
|
||||
**Architecture:** 离屏挂载 `OaApprovalPrintSheet` → canvas 截图 → 按 A4 切片写入 jsPDF。数据来自已有 `fetchOaInstanceDetail`；纯前端，不改后端。
|
||||
|
||||
**Tech Stack:** Vue 3、TypeScript、html2canvas、jspdf、Element Plus icons
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-07-15-oa-approval-print-pdf-design.md`
|
||||
|
||||
---
|
||||
|
||||
## File map
|
||||
|
||||
| Path | Action |
|
||||
|------|--------|
|
||||
| `web-admin/package.json` | Add `html2canvas`, `jspdf` |
|
||||
| `web-admin/src/utils/oa-approval-print.ts` | Create: model builder + export orchestration |
|
||||
| `web-admin/src/components/oa-approval/OaApprovalPrintSheet.vue` | Create: print DOM + stamp CSS (v4) |
|
||||
| `web-admin/src/views/oa-approval/mine/index.vue` | Add Print button + handler |
|
||||
| `web-admin/src/views/oa-approval/cc/index.vue` | Add Print button + handler |
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Install dependencies
|
||||
|
||||
**Files:** `web-admin/package.json`, lockfile
|
||||
|
||||
- [ ] **Step 1: Install**
|
||||
|
||||
```bash
|
||||
cd web-admin && pnpm add html2canvas jspdf && pnpm add -D @types/html2canvas
|
||||
```
|
||||
|
||||
Note: `@types/html2canvas` may be unnecessary if package ships types; skip if install fails. Prefer packages that include their own types.
|
||||
|
||||
- [ ] **Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add web-admin/package.json web-admin/pnpm-lock.yaml
|
||||
git commit -m "chore(web-admin): add html2canvas and jspdf for OA print PDF"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Print model + export utility
|
||||
|
||||
**Files:**
|
||||
- Create: `web-admin/src/utils/oa-approval-print.ts`
|
||||
|
||||
- [ ] **Step 1: Implement types, field extraction, stamp mapping, and `exportOaApprovalPdf`**
|
||||
|
||||
Implement in one file (create Vue app + mount `OaApprovalPrintSheet` off-screen, call html2canvas, slice into jsPDF). Export:
|
||||
|
||||
- `buildOaPrintModel(detail, opts)`
|
||||
- `exportOaApprovalPdf(detail, opts)` — high-level entry used by list pages
|
||||
- `resolveStamp(status)`
|
||||
|
||||
Key behaviors from spec §4–§6:
|
||||
- Company name fixed: `安徽中科兴皖医学研究有限公司`
|
||||
- Form rows from `formSchemaJson.rule` + `formDataJson`
|
||||
- Upload fields → URL lines with `kind: 'urls'`
|
||||
- Progress → `flowItems`
|
||||
- Filename: `{initiator}提交的{appName}.pdf`
|
||||
|
||||
- [ ] **Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add web-admin/src/utils/oa-approval-print.ts
|
||||
git commit -m "feat(oa): add approval print model and PDF export helper"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Print sheet component (stamp v4)
|
||||
|
||||
**Files:**
|
||||
- Create: `web-admin/src/components/oa-approval/OaApprovalPrintSheet.vue`
|
||||
|
||||
- [ ] **Step 1: Implement sheet** matching Demo v4: title, meta, table, `.oa-stamp`, watermark, print meta. Native `<table>` only. Fixed width ~794px (210mm at 96dpi).
|
||||
|
||||
- [ ] **Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add web-admin/src/components/oa-approval/OaApprovalPrintSheet.vue
|
||||
git commit -m "feat(oa): add DingTalk-style approval print sheet component"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Wire list pages
|
||||
|
||||
**Files:**
|
||||
- Modify: `web-admin/src/views/oa-approval/mine/index.vue`
|
||||
- Modify: `web-admin/src/views/oa-approval/cc/index.vue`
|
||||
|
||||
- [ ] **Step 1: Add Printer button + `printRow` that calls `fetchOaInstanceDetail` then `exportOaApprovalPdf`**
|
||||
|
||||
mine: `row.id`; cc: `row.instanceId`. Use `useUserStore` for printer nickName. Widen操作列 if needed (≥ 320).
|
||||
|
||||
- [ ] **Step 2: Smoke check**
|
||||
|
||||
```bash
|
||||
cd web-admin && pnpm exec vue-tsc --noEmit 2>&1 | head -80
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add web-admin/src/views/oa-approval/mine/index.vue web-admin/src/views/oa-approval/cc/index.vue
|
||||
git commit -m "feat(oa): add print PDF action on mine and CC approval lists"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 5: Graph update
|
||||
|
||||
- [ ] **Step 1:** `./scripts/update-graph.sh frontend`
|
||||
|
||||
- [ ] **Step 2: Commit graph if changed**
|
||||
|
||||
```bash
|
||||
git add web-admin/graphify-out && git commit -m "chore: update frontend graphify after OA print PDF"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Spec coverage
|
||||
|
||||
| Spec item | Task |
|
||||
|-----------|------|
|
||||
| 打印按钮 mine/cc | 4 |
|
||||
| html2canvas+jspdf | 1, 2 |
|
||||
| 版式 / 无二维码 | 3 |
|
||||
| 印章 v4 + 全状态 | 2, 3 |
|
||||
| 附件 URL | 2 |
|
||||
| 水印 / 页码 | 2, 3 |
|
||||
| 错误提示 | 4 |
|
||||
Reference in new issue
Block a user