提交

web-admin/src/components/oa-approval/OaProgressChain.vue

@@ -15,14 +15,14 @@
           <div class="oa-flow-card__row">
             <span class="oa-flow-card__name">{{ item.title }}</span>
             <span v-if="statusBadge(item)" class="oa-flow-badge" :class="statusBadge(item)">
-              {{ statusText(item.status) }}
+              {{ nodeStatusText(item) }}
             </span>
             <span v-if="signBadge(item)" class="oa-flow-badge" :class="signBadge(item)">
               {{ signBadgeText(item) }}
             </span>
             <span v-else-if="item.taskType === 'cc'" class="oa-flow-badge cc">抄送</span>
             <span v-else-if="item.taskType === 'end'" class="oa-flow-badge mute">结束</span>
-            <template v-if="item.timestamp">
+            <template v-if="showNodeTimestamp(item)">
               <span class="oa-flow-card__sep">·</span>
               <span class="oa-flow-card__meta" :title="item.timestamp">{{ item.timestamp }}</span>
             </template>
@@ -66,6 +66,12 @@
               {{ line.text }}
             </p>
           </div>
+          <div
+            v-else-if="item.kind === 'terminal' && item.status === 'cancelled' && terminalWithdrawText(item)"
+            class="oa-person-lines"
+          >
+            <p class="oa-person-line is-danger">{{ terminalWithdrawText(item) }}</p>
+          </div>
           <div v-else-if="showNodeComment(item)" class="oa-flow-card__comment">
             意见：{{ item.commentText }}
           </div>
@@ -134,9 +140,17 @@
     return map[s] || s
   }
 
+  /** 任务节点 cancelled=系统清待办 →「无需处理」；终态 cancelled 仍为「已撤销」 */
+  function nodeStatusText(item: OaProgressChainItem) {
+    const s = item.status || ''
+    if (item.kind !== 'terminal' && s === 'cancelled') return '无需处理'
+    return statusText(s)
+  }
+
   /** 徽章色：与 Fresh Mint 语义一致 */
   function statusBadge(item: OaProgressChainItem) {
     const s = item.status || ''
+    if (item.kind !== 'terminal' && s === 'cancelled') return 'mute'
     if (s === 'approved' || s === 'completed' || s === 'done' || s === 'submitted') return 'ok'
     if (s === 'pending' || s === 'running') return 'or'
     if (s === 'rejected' || s === 'cancelled' || s === 'returned') return 'danger'
@@ -183,15 +197,31 @@
   function showNodeComment(item: OaProgressChainItem): boolean {
     // 有按人行时不再展示节点级拼接意见，避免双份
     if (personLines(item).length) return false
+    if (item.kind === 'terminal' && item.status === 'cancelled') return false
     return Boolean(item.commentText)
   }
 
+  function terminalWithdrawText(item: OaProgressChainItem): string {
+    const name = (item.assignee || '').trim()
+    const tip = (item.commentText || '').trim() || '发起人撤销'
+    return name ? `${name} ${tip}` : tip
+  }
+
+  /** 任务节点 cancelled 为系统清待办，不展示时间（时间归终态「已撤销」） */
+  function showNodeTimestamp(item: OaProgressChainItem): boolean {
+    const ts = (item.timestamp || '').trim()
+    if (!ts) return false
+    if (item.kind !== 'terminal' && item.status === 'cancelled') return false
+    return true
+  }
+
   function personChipClass(status?: string) {
     const s = status || ''
     if (s === 'approved' || s === 'completed') return 'is-ok'
     if (s === 'pending' || s === 'running') return 'is-pending'
-    if (s === 'rejected' || s === 'returned' || s === 'cancelled') return 'is-danger'
-    if (s === 'done' || s === 'not_reached' || s === 'transferred') return 'is-mute'
+    if (s === 'rejected' || s === 'returned') return 'is-danger'
+    if (s === 'done' || s === 'not_reached' || s === 'transferred' || s === 'cancelled')
+      return 'is-mute'
     return ''
   }
 
@@ -201,7 +231,7 @@
     if (s === 'rejected') return '已拒绝'
     if (s === 'returned') return '已打回'
     if (s === 'pending' || s === 'running') return '待处理'
-    if (s === 'done') return '无需处理'
+    if (s === 'done' || s === 'cancelled') return '无需处理'
     if (s === 'not_reached') return '未到达'
     if (s === 'transferred') return '已转交'
     return ''
@@ -212,13 +242,17 @@
     const statusLabel =
       p.status === 'transferred' && target
         ? `转交给${target}`
-        : statusText(p.status || '')
-    const parts = [p.nickName || '', statusLabel, p.timestamp || ''].filter(Boolean)
+        : personStatusHint(p.status) || statusText(p.status || '')
+    // cancelled/done 人员行不展示操作时间
+    const ts =
+      p.status === 'cancelled' || p.status === 'done' ? '' : String(p.timestamp || '').trim()
+    const parts = [p.nickName || '', statusLabel, ts].filter(Boolean)
     return parts.join(' · ')
   }
 
   function dotClass(item: OaProgressChainItem) {
     const s = item.status || ''
+    if (item.kind !== 'terminal' && s === 'cancelled') return ''
     if (s === 'approved' || s === 'completed' || s === 'done' || s === 'submitted') return 'ok'
     if (s === 'pending' || s === 'running') return 'pending'
     if (s === 'rejected' || s === 'cancelled' || s === 'returned') return 'danger'

web-admin/src/components/oa-approval/OaStartFormDialog.vue

@@ -129,6 +129,12 @@
     listTripKits,
     TRIP_MANUAL_PREFIX
   } from '@/utils/oa-trip-kit-runtime'
+  import {
+    buildFlowPreviewRequestKey,
+    collectConditionFields,
+    shouldShowFlowPreviewSpinner,
+    shouldSkipFlowPreviewRequest
+  } from '@/utils/oa-flow-preview-refresh'
   import { useUserStore } from '@/store/modules/user'
 
   defineOptions({ name: 'OaStartFormDialog' })
@@ -162,6 +168,12 @@
   const flowPendingMessage = ref('必填信息填写后，流程将自动显示')
   const previewLoading = ref(false)
   let previewTimer: ReturnType<typeof setTimeout> | null = null
+  /** 流程条件字段：仅这些 formData 变化才重拉预览 */
+  let flowConditionFields: string[] = []
+  let lastFlowPreviewRequestKey: string | null = null
+  let inFlightFlowPreviewKey: string | null = null
+  let hasCompletedFlowPreview = false
+  let flowPreviewReqSeq = 0
   /** 避免时长自动回写再次触发手改判定 */
   let leaveKitSyncing = false
   let leaveKitPrevSnapshot: Record<string, unknown> = {}
@@ -242,23 +254,56 @@
   }
 
   async function loadFlowPreview(appId: string) {
-    previewLoading.value = true
+    if (!appId) return
+    const requestKey = buildFlowPreviewRequestKey({
+      formData: formData.value,
+      initiatorSelectByNode: initiatorSelectByNode.value,
+      conditionFields: flowConditionFields
+    })
+    if (
+      shouldSkipFlowPreviewRequest(lastFlowPreviewRequestKey, requestKey, {
+        inFlightKey: inFlightFlowPreviewKey
+      })
+    ) {
+      return
+    }
+    const seq = ++flowPreviewReqSeq
+    inFlightFlowPreviewKey = requestKey
+    const showSpinner = shouldShowFlowPreviewSpinner({
+      hasCompletedPreview: hasCompletedFlowPreview
+    })
+    if (showSpinner) previewLoading.value = true
     try {
       const preview = await fetchOaFlowPreview(appId, {
         formData: { ...formData.value },
         initiatorSelectByNode: { ...initiatorSelectByNode.value }
       })
+      if (seq !== flowPreviewReqSeq) return
+      lastFlowPreviewRequestKey = requestKey
       flowResolved.value = preview?.resolved !== false
       flowPendingMessage.value = preview?.message || '必填信息填写后，流程将自动显示'
       flowSteps.value = flowResolved.value ? preview?.steps || [] : []
     } catch {
+      if (seq !== flowPreviewReqSeq) return
       flowSteps.value = []
       flowResolved.value = true
     } finally {
-      previewLoading.value = false
+      if (seq === flowPreviewReqSeq) {
+        inFlightFlowPreviewKey = null
+        hasCompletedFlowPreview = true
+        previewLoading.value = false
+      }
     }
   }
 
+  function resetFlowPreviewState(flowRoot: unknown) {
+    flowConditionFields = collectConditionFields(flowRoot)
+    lastFlowPreviewRequestKey = null
+    inFlightFlowPreviewKey = null
+    hasCompletedFlowPreview = false
+    flowPreviewReqSeq += 1
+  }
+
   function scheduleFlowPreview() {
     if (!dlgVisible.value || !picked.value?.id) return
     if (previewTimer) clearTimeout(previewTimer)
@@ -335,6 +380,7 @@
       void syncOvertimeKitDurations()
       const flow = detail?.flowTreeJson || {}
       const root = flow.root || flow
+      resetFlowPreviewState(root)
       needInitiatorSelect.value = flowNeedsInitiatorSelect(root)
       if (needInitiatorSelect.value && !userOptions.value.length) {
         await loadUsers()

web-admin/src/utils/oa-approval-print-flow.test.ts

@@ -0,0 +1,52 @@
+/**
+ * 打印「审批流程」：撤销清待办 cancelled → 无需处理；终态归因发起人
+ * Spec: docs/superpowers/specs/2026-08-13-oa-progress-withdraw-cancelled-display-design.md
+ */
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { buildFlowItems } from './oa-approval-print-flow'
+
+describe('buildFlowItems · withdraw cancelled', () => {
+  it('maps cancelled approval task to 无需处理 and terminal to 发起人撤销', () => {
+    const items = buildFlowItems({
+      progress: [
+        {
+          kind: 'submit',
+          title: '发起人',
+          status: 'submitted',
+          assigneeUserName: '吴子龙',
+          timestamp: '2026-08-13 11:17:38'
+        },
+        {
+          kind: 'task',
+          title: '直接主管',
+          status: 'cancelled',
+          signMode: 'and',
+          timestamp: '',
+          people: [
+            {
+              nickName: '张主管',
+              status: 'cancelled',
+              timestamp: '2026-08-13 12:47:46',
+              commentText: ''
+            }
+          ]
+        },
+        {
+          kind: 'terminal',
+          title: '已撤销',
+          status: 'cancelled',
+          assigneeUserName: '吴子龙',
+          commentText: '发起人撤销',
+          timestamp: '2026-08-13 12:47:46'
+        }
+      ]
+    })
+
+    assert.equal(items[0].left.includes('已提交'), true)
+    assert.equal(items[1].left, '【直接主管·会签】 无需处理')
+    assert.deepEqual(items[1].personLines, [{ left: '张主管 无需处理', right: '' }])
+    assert.equal(items[2].left, '已撤销 吴子龙 发起人撤销')
+    assert.equal(items[2].right, '2026-08-13 12:47:46')
+  })
+})

web-admin/src/utils/oa-approval-print-flow.ts

@@ -0,0 +1,199 @@
+/**
+ * OA 打印「审批流程」行组装（无 Vue/canvas 副作用，便于单测）
+ * Spec: docs/superpowers/specs/2026-08-13-oa-progress-withdraw-cancelled-display-design.md
+ */
+import { formatProgressPersonLines } from '@/utils/oa-progress-person-lines'
+
+export type OaPrintPersonLine = {
+  left: string
+  right: string
+}
+
+export type OaPrintFlowItem = {
+  left: string
+  right: string
+  /** @deprecated 多人节点改用 personLines；单人/发起人可保留 */
+  comment?: string
+  /** 或签/会签按人行：左侧文案 + 右侧时间（右对齐） */
+  personLines?: OaPrintPersonLine[]
+}
+
+const STATUS_TEXT: Record<string, string> = {
+  pending: '待处理',
+  running: '进行中',
+  approved: '已同意',
+  rejected: '已拒绝',
+  completed: '已完成',
+  cancelled: '已撤销',
+  done: '已结束',
+  submitted: '已提交',
+  not_reached: '未到达',
+  returned: '已打回',
+  transferred: '已转交'
+}
+
+function statusText(s: string) {
+  return STATUS_TEXT[s] || s || '-'
+}
+
+/** 任务节点 cancelled=系统清待办 →「无需处理」；终态 cancelled 仍为「已撤销」 */
+function progressNodeStatusText(p: any): string {
+  const kind = String(p?.kind || '')
+  const s = String(p?.status || '').trim()
+  if (kind !== 'terminal' && s === 'cancelled') return '无需处理'
+  return statusText(s)
+}
+
+function peopleDisplayNames(p: any): string[] {
+  const people = Array.isArray(p?.people) ? p.people : []
+  const fromPeople = people
+    .map((x: any) => String(x?.nickName || x?.id || '').trim())
+    .filter(Boolean)
+  if (fromPeople.length) return fromPeople
+  const name = String(p?.assigneeUserName || p?.assigneeUserId || '').trim()
+  return name ? [name] : []
+}
+
+function progressPersonLinesFromItem(p: any): OaPrintPersonLine[] {
+  const people = Array.isArray(p?.people) ? p.people : []
+  if (!people.length) return []
+  return formatProgressPersonLines(people).map((x) => ({
+    left: x.body || x.text,
+    right: x.timestamp || ''
+  }))
+}
+
+function isCcProgressItem(p: any): boolean {
+  const taskType = String(p?.taskType || p?.task_type || '').trim()
+  const signMode = String(p?.signMode || p?.sign_mode || '').trim()
+  const title = String(p?.title || p?.nodeName || '').trim()
+  return (
+    taskType === 'cc' ||
+    signMode === 'cc' ||
+    title === '抄送人' ||
+    /^抄送/.test(title)
+  )
+}
+
+/**
+ * 从 progress 组装审批流程行；抄送节点聚合为「抄送A, B, C」对齐钉钉导出。
+ * 若 progress 漏抄送，则用 tasks 兜底补一行。
+ */
+export function buildFlowItems(detail: any): OaPrintFlowItem[] {
+  const list = Array.isArray(detail?.progress) ? detail.progress : []
+  const items: OaPrintFlowItem[] = []
+
+  let ccBuf: { names: string[]; ts: string } | null = null
+  const flushCc = () => {
+    if (!ccBuf) return
+    const uniq = Array.from(new Set(ccBuf.names.map((n) => n.trim()).filter(Boolean)))
+    items.push({
+      left: uniq.length ? `抄送: ${uniq.join(', ')}` : '抄送:',
+      right: ccBuf.ts || ''
+    })
+    ccBuf = null
+  }
+
+  for (const p of list) {
+    const kind = String(p.kind || '')
+    const title = String(p.title || '-').trim()
+    const names = peopleDisplayNames(p)
+    const name = names.join(', ')
+    const ts = String(p.timestamp || '').trim()
+    const comment = String(p.commentText || '').trim()
+    const st = progressNodeStatusText(p)
+    const signMode = String(p.signMode || p.sign_mode || '')
+    const signLabel = signMode === 'and' ? '会签' : signMode === 'or' ? '或签' : ''
+
+    if (isCcProgressItem(p)) {
+      if (!ccBuf) ccBuf = { names: [], ts }
+      if (names.length) ccBuf.names.push(...names)
+      if (ts) ccBuf.ts = ts
+      continue
+    }
+    flushCc()
+
+    if (kind === 'submit') {
+      items.push({
+        left: name ? `【${title}】 ${name} ${st}` : `【${title}】 ${st}`,
+        right: ts,
+        comment: comment || undefined
+      })
+      continue
+    }
+    if (kind === 'terminal') {
+      if (String(p.status || '') === 'returned' || title === '已打回') {
+        continue
+      }
+      const withdrawName = String(p.assigneeUserName || p.assignee || '').trim()
+      const withdrawTip = comment || (String(p.status || '') === 'cancelled' ? '发起人撤销' : '')
+      const leftExtra =
+        String(p.status || '') === 'cancelled' && (withdrawName || withdrawTip)
+          ? ` ${[withdrawName, withdrawTip].filter(Boolean).join(' ')}`
+          : ''
+      items.push({
+        left: `${title || st}${leftExtra}`,
+        right: ts
+      })
+      continue
+    }
+    if (kind === 'pending_node') {
+      const personLines = progressPersonLinesFromItem(p)
+      const head = signLabel ? `【${title}·${signLabel}】` : `【${title}】`
+      items.push({
+        left: personLines.length
+          ? `${head} ${st}`
+          : name
+            ? `${head} ${name} ${st}`
+            : `${head} ${st}`,
+        right: personLines.length ? '' : ts,
+        personLines: personLines.length ? personLines : undefined
+      })
+      continue
+    }
+    const head = signLabel ? `【${title}·${signLabel}】` : `【${title}】`
+    const personLines = progressPersonLinesFromItem(p)
+    if (personLines.length) {
+      items.push({
+        left: `${head} ${st}`,
+        right: '',
+        personLines
+      })
+      continue
+    }
+    items.push({
+      left: name ? `${head} ${name} ${st}` : `${head} ${st}`,
+      right: ts,
+      comment: comment || undefined
+    })
+  }
+  flushCc()
+
+  const hasCcLine = items.some((it) => it.left.startsWith('抄送'))
+  if (!hasCcLine) {
+    const tasks = Array.isArray(detail?.tasks) ? detail.tasks : []
+    const ccTasks = tasks.filter((t: any) => {
+      const tt = String(t?.taskType || t?.task_type || '').trim()
+      const sm = String(t?.signMode || t?.sign_mode || '').trim()
+      return tt === 'cc' || sm === 'cc'
+    })
+    if (ccTasks.length) {
+      const names = ccTasks
+        .map((t: any) =>
+          String(t?.assigneeUserName || t?.assignee_user_name || t?.assigneeUserId || '').trim()
+        )
+        .filter(Boolean)
+      const uniq = Array.from(new Set(names))
+      let ts = ''
+      for (const t of ccTasks) {
+        const tTs = String(t?.updateTime || t?.createTime || '').trim()
+        if (tTs && (!ts || tTs > ts)) ts = tTs
+      }
+      if (uniq.length) {
+        items.push({ left: `抄送: ${uniq.join(', ')}`, right: ts })
+      }
+    }
+  }
+
+  return items
+}

web-admin/src/utils/oa-approval-print.ts

@@ -11,7 +11,6 @@ import {
   normalizeRelatedIdsFromFormValue,
   type RelatedPrintBlock
 } from '@/utils/oa-approval-print-related'
-import { formatProgressPersonLines } from '@/utils/oa-progress-person-lines'
 import { formatDeptDisplay } from '@/utils/oa-dept-value'
 import { formatPersonDisplay } from '@/utils/oa-person-value'
 import { formatPostDisplay } from '@/utils/oa-post-value'
@@ -23,6 +22,11 @@ import {
 } from '@/utils/oa-form-value-display'
 import { toRmbUpper } from '@/utils/rmb-upper'
 import { formatOaUploadPathsForPrint } from '@/utils/oa-upload-file-type'
+import {
+  buildFlowItems,
+  type OaPrintFlowItem,
+  type OaPrintPersonLine
+} from '@/utils/oa-approval-print-flow'
 
 export const OA_PRINT_COMPANY_NAME = '安徽中科兴皖医学研究有限公司'
 
@@ -40,19 +44,8 @@ export type OaPrintFieldRow = {
   blocks?: RelatedPrintBlock[]
 }
 
-export type OaPrintPersonLine = {
-  left: string
-  right: string
-}
-
-export type OaPrintFlowItem = {
-  left: string
-  right: string
-  /** @deprecated 多人节点改用 personLines；单人/发起人可保留 */
-  comment?: string
-  /** 或签/会签按人行：左侧文案 + 右侧时间（右对齐） */
-  personLines?: OaPrintPersonLine[]
-}
+export type { OaPrintPersonLine, OaPrintFlowItem }
+export { buildFlowItems }
 
 export type OaPrintModel = {
   title: string
@@ -67,20 +60,6 @@ export type OaPrintModel = {
   watermarkName: string
 }
 
-const STATUS_TEXT: Record<string, string> = {
-  pending: '待处理',
-  running: '进行中',
-  approved: '已同意',
-  rejected: '已拒绝',
-  completed: '已完成',
-  cancelled: '已撤销',
-  done: '已结束',
-  submitted: '已提交',
-  not_reached: '未到达',
-  returned: '已打回',
-  transferred: '已转交'
-}
-
 const UPLOAD_TYPES = new Set([
   'upload',
   'fcUpload',
@@ -130,10 +109,6 @@ export function resolveStamp(status: string | undefined | null): {
   return { stampClass: 'run', stampText: '审批中' }
 }
 
-function statusText(s: string) {
-  return STATUS_TEXT[s] || s || '-'
-}
-
 function formatDateOnly(createTime: string | undefined | null): string {
   const raw = String(createTime || '').trim()
   if (!raw) return '-'
@@ -392,160 +367,6 @@ async function buildFormRows(detail: any): Promise<OaPrintFieldRow[]> {
   return out
 }
 
-/** 钉钉风格：人名不加状态括号，状态放在整行末尾 */
-function peopleDisplayNames(p: any): string[] {
-  const people = Array.isArray(p?.people) ? p.people : []
-  const fromPeople = people
-    .map((x: any) => String(x?.nickName || x?.id || '').trim())
-    .filter(Boolean)
-  if (fromPeople.length) return fromPeople
-  const name = String(p?.assigneeUserName || p?.assigneeUserId || '').trim()
-  return name ? [name] : []
-}
-
-function progressPersonLinesFromItem(p: any): OaPrintPersonLine[] {
-  const people = Array.isArray(p?.people) ? p.people : []
-  if (!people.length) return []
-  return formatProgressPersonLines(people).map((x) => ({
-    left: x.body || x.text,
-    right: x.timestamp || ''
-  }))
-}
-
-function isCcProgressItem(p: any): boolean {
-  const taskType = String(p?.taskType || p?.task_type || '').trim()
-  const signMode = String(p?.signMode || p?.sign_mode || '').trim()
-  const title = String(p?.title || p?.nodeName || '').trim()
-  // 主判据：taskType / signMode；标题兜底仅匹配默认「抄送人」或「抄送…」节点名
-  return (
-    taskType === 'cc' ||
-    signMode === 'cc' ||
-    title === '抄送人' ||
-    /^抄送/.test(title)
-  )
-}
-
-/**
- * 从 progress 组装审批流程行；抄送节点聚合为「抄送A, B, C」对齐钉钉导出。
- * 若 progress 漏抄送，则用 tasks 兜底补一行。
- */
-export function buildFlowItems(detail: any): OaPrintFlowItem[] {
-  const list = Array.isArray(detail?.progress) ? detail.progress : []
-  const items: OaPrintFlowItem[] = []
-
-  // 聚合连续抄送任务，对齐钉钉「抄送A, B, C」
-  let ccBuf: { names: string[]; ts: string } | null = null
-  const flushCc = () => {
-    if (!ccBuf) return
-    const uniq = Array.from(new Set(ccBuf.names.map((n) => n.trim()).filter(Boolean)))
-    items.push({
-      left: uniq.length ? `抄送: ${uniq.join(', ')}` : '抄送:',
-      right: ccBuf.ts || ''
-    })
-    ccBuf = null
-  }
-
-  for (const p of list) {
-    const kind = String(p.kind || '')
-    const title = String(p.title || '-').trim()
-    const names = peopleDisplayNames(p)
-    const name = names.join(', ')
-    const ts = String(p.timestamp || '').trim()
-    const comment = String(p.commentText || '').trim()
-    const st = statusText(String(p.status || ''))
-    const signMode = String(p.signMode || p.sign_mode || '')
-    const signLabel = signMode === 'and' ? '会签' : signMode === 'or' ? '或签' : ''
-
-    if (isCcProgressItem(p)) {
-      if (!ccBuf) ccBuf = { names: [], ts }
-      if (names.length) ccBuf.names.push(...names)
-      if (ts) ccBuf.ts = ts
-      continue
-    }
-    flushCc()
-
-    if (kind === 'submit') {
-      items.push({
-        left: name ? `【${title}】 ${name} ${st}` : `【${title}】 ${st}`,
-        right: ts,
-        comment: comment || undefined
-      })
-      continue
-    }
-    if (kind === 'terminal') {
-      // 打回结果已落在审批人节点，不单独输出终态「已打回」行
-      if (String(p.status || '') === 'returned' || title === '已打回') {
-        continue
-      }
-      items.push({
-        left: title || st,
-        right: ts
-      })
-      continue
-    }
-    if (kind === 'pending_node') {
-      const personLines = progressPersonLinesFromItem(p)
-      const head = signLabel ? `【${title}·${signLabel}】` : `【${title}】`
-      items.push({
-        left: personLines.length
-          ? `${head} ${st}`
-          : name
-            ? `${head} ${name} ${st}`
-            : `${head} ${st}`,
-        right: personLines.length ? '' : ts,
-        personLines: personLines.length ? personLines : undefined
-      })
-      continue
-    }
-    // task（或签/会签同节点多人已合并）
-    const head = signLabel ? `【${title}·${signLabel}】` : `【${title}】`
-    const personLines = progressPersonLinesFromItem(p)
-    if (personLines.length) {
-      items.push({
-        left: `${head} ${st}`,
-        right: '',
-        personLines
-      })
-      continue
-    }
-    items.push({
-      left: name ? `${head} ${name} ${st}` : `${head} ${st}`,
-      right: ts,
-      comment: comment || undefined
-    })
-  }
-  flushCc()
-
-  // progress 未带抄送时，用 tasks 兜底（对齐钉钉：流程末展示抄送人）
-  const hasCcLine = items.some((it) => it.left.startsWith('抄送'))
-  if (!hasCcLine) {
-    const tasks = Array.isArray(detail?.tasks) ? detail.tasks : []
-    const ccTasks = tasks.filter((t: any) => {
-      const tt = String(t?.taskType || t?.task_type || '').trim()
-      const sm = String(t?.signMode || t?.sign_mode || '').trim()
-      return tt === 'cc' || sm === 'cc'
-    })
-    if (ccTasks.length) {
-      const names = ccTasks
-        .map((t: any) =>
-          String(t?.assigneeUserName || t?.assignee_user_name || t?.assigneeUserId || '').trim()
-        )
-        .filter(Boolean)
-      const uniq = Array.from(new Set(names))
-      let ts = ''
-      for (const t of ccTasks) {
-        const tTs = String(t?.updateTime || t?.createTime || '').trim()
-        if (tTs && (!ts || tTs > ts)) ts = tTs
-      }
-      if (uniq.length) {
-        items.push({ left: `抄送: ${uniq.join(', ')}`, right: ts })
-      }
-    }
-  }
-
-  return items
-}
-
 export async function buildOaPrintModel(
   detail: any,
   opts: { printerName: string; printTime?: string }

web-admin/src/utils/oa-flow-preview-refresh.test.ts

@@ -0,0 +1,123 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import {
+  buildFlowPreviewRequestKey,
+  collectConditionFields,
+  shouldShowFlowPreviewSpinner,
+  shouldSkipFlowPreviewRequest
+} from './oa-flow-preview-refresh'
+
+describe('oa-flow-preview-refresh', () => {
+  it('ignores unrelated form fields when no condition fields', () => {
+    const keyA = buildFlowPreviewRequestKey({
+      formData: { title: 'a', reason: 'x' },
+      initiatorSelectByNode: {},
+      conditionFields: []
+    })
+    const keyB = buildFlowPreviewRequestKey({
+      formData: { title: 'b', reason: 'y' },
+      initiatorSelectByNode: {},
+      conditionFields: []
+    })
+    assert.equal(keyA, keyB)
+    assert.equal(shouldSkipFlowPreviewRequest(keyA, keyB), true)
+  })
+
+  it('only condition fields affect request key', () => {
+    const fields = ['amount']
+    const keyA = buildFlowPreviewRequestKey({
+      formData: { amount: 100, remark: 'old' },
+      initiatorSelectByNode: {},
+      conditionFields: fields
+    })
+    const keySame = buildFlowPreviewRequestKey({
+      formData: { amount: 100, remark: 'new' },
+      initiatorSelectByNode: {},
+      conditionFields: fields
+    })
+    const keyDiff = buildFlowPreviewRequestKey({
+      formData: { amount: 200, remark: 'new' },
+      initiatorSelectByNode: {},
+      conditionFields: fields
+    })
+    assert.equal(keyA, keySame)
+    assert.notEqual(keyA, keyDiff)
+  })
+
+  it('initiator select changes request key', () => {
+    const keyA = buildFlowPreviewRequestKey({
+      formData: {},
+      initiatorSelectByNode: { n1: ['u1'] },
+      conditionFields: []
+    })
+    const keyB = buildFlowPreviewRequestKey({
+      formData: {},
+      initiatorSelectByNode: { n1: ['u2'] },
+      conditionFields: []
+    })
+    assert.notEqual(keyA, keyB)
+  })
+
+  it('collects condition fields from flow tree', () => {
+    const tree = {
+      type: 'start',
+      child: {
+        type: 'condition',
+        conditionGroups: [
+          {
+            rules: [{ field: 'leaveType', op: 'eq', value: '事假' }],
+            child: { type: 'approver', id: 'a1' }
+          },
+          {
+            isDefault: true,
+            child: { type: 'approver', id: 'a2' }
+          }
+        ],
+        child: { type: 'end' }
+      }
+    }
+    assert.deepEqual(collectConditionFields(tree), ['leaveType'])
+  })
+
+  it('collects formula fields and skips __initiator__', () => {
+    assert.deepEqual(
+      collectConditionFields({
+        type: 'condition',
+        conditionGroups: [{ when: '{days} > 3', child: { type: 'approver' } }]
+      }),
+      ['days']
+    )
+    assert.deepEqual(
+      collectConditionFields({
+        type: 'condition',
+        conditionGroups: [
+          {
+            rules: [{ field: '__initiator__', op: 'eq', value: 'x' }],
+            child: { type: 'approver' }
+          }
+        ]
+      }),
+      []
+    )
+  })
+
+  it('shows spinner only before first completed preview', () => {
+    assert.equal(shouldShowFlowPreviewSpinner({ hasCompletedPreview: false }), true)
+    assert.equal(shouldShowFlowPreviewSpinner({ hasCompletedPreview: true }), false)
+  })
+
+  it('with in-flight key, allows rollback to previous successful key', () => {
+    const key100 = buildFlowPreviewRequestKey({
+      formData: { amount: 100 },
+      initiatorSelectByNode: {},
+      conditionFields: ['amount']
+    })
+    const key200 = buildFlowPreviewRequestKey({
+      formData: { amount: 200 },
+      initiatorSelectByNode: {},
+      conditionFields: ['amount']
+    })
+    assert.equal(shouldSkipFlowPreviewRequest(key100, key200, { inFlightKey: key200 }), true)
+    assert.equal(shouldSkipFlowPreviewRequest(key100, key100, { inFlightKey: key200 }), false)
+  })
+})

web-admin/src/utils/oa-flow-preview-refresh.ts

@@ -0,0 +1,130 @@
+/** 与后端 oa_engine.INITIATOR_CONDITION_FIELD 对齐：不依赖 formData */
+const INITIATOR_CONDITION_FIELD = '__initiator__'
+const FORMULA_FIELD_RE = /\{([^{}]+)\}/g
+
+function nodeType(node: any): string {
+  return String((node && (node.type || node.nodeType)) || '').trim()
+}
+
+function addField(name: unknown, fields: string[], seen: Set<string>) {
+  const key = String(name || '').trim()
+  if (!key || seen.has(key)) return
+  if (key === INITIATOR_CONDITION_FIELD) return
+  seen.add(key)
+  fields.push(key)
+}
+
+function addFormulaFields(text: unknown, fields: string[], seen: Set<string>) {
+  if (!text) return
+  FORMULA_FIELD_RE.lastIndex = 0
+  let m: RegExpExecArray | null
+  while ((m = FORMULA_FIELD_RE.exec(String(text)))) {
+    addField(m[1], fields, seen)
+  }
+}
+
+/**
+ * 收集流程树中非默认条件分支引用的表单字段（去重保序）。
+ * 语义对齐 backend `oa_engine._collect_condition_fields`。
+ */
+export function collectConditionFields(node: unknown): string[] {
+  const fields: string[] = []
+  const seen = new Set<string>()
+
+  function walk(n: any) {
+    if (!n || typeof n !== 'object') return
+    if (nodeType(n) === 'condition') {
+      for (const g of n.conditionGroups || []) {
+        if (!g || typeof g !== 'object') continue
+        const rules = g.rules
+        const when = g.when
+        if (g.isDefault || (!rules && !when)) {
+          if (g.child && typeof g.child === 'object') walk(g.child)
+          continue
+        }
+        if (Array.isArray(rules) && rules.length) {
+          for (const r of rules) {
+            if (r && typeof r === 'object' && r.field != null) {
+              addField(r.field, fields, seen)
+            }
+          }
+        } else if (typeof rules === 'string' && rules.trim()) {
+          addFormulaFields(rules, fields, seen)
+        } else if (when) {
+          addFormulaFields(when, fields, seen)
+        }
+        if (g.child && typeof g.child === 'object') walk(g.child)
+      }
+      if (n.child && typeof n.child === 'object') walk(n.child)
+      return
+    }
+    if (n.child && typeof n.child === 'object') walk(n.child)
+    for (const g of n.conditionGroups || []) {
+      if (g && typeof g === 'object' && g.child && typeof g.child === 'object') {
+        walk(g.child)
+      }
+    }
+  }
+
+  walk(node)
+  return fields
+}
+
+function sortKeysDeep(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(sortKeysDeep)
+  if (value && typeof value === 'object') {
+    const out: Record<string, unknown> = {}
+    for (const k of Object.keys(value as Record<string, unknown>).sort()) {
+      out[k] = sortKeysDeep((value as Record<string, unknown>)[k])
+    }
+    return out
+  }
+  return value
+}
+
+export function pickRelevantFormData(
+  formData: Record<string, unknown> | null | undefined,
+  conditionFields: string[] | null | undefined
+): Record<string, unknown> {
+  const data = formData && typeof formData === 'object' ? formData : {}
+  const fields = Array.isArray(conditionFields) ? conditionFields : []
+  const out: Record<string, unknown> = {}
+  for (const f of fields) {
+    out[f] = data[f]
+  }
+  return out
+}
+
+export function buildFlowPreviewRequestKey(opts?: {
+  formData?: Record<string, unknown> | null
+  initiatorSelectByNode?: Record<string, string[]> | null
+  conditionFields?: string[] | null
+}): string {
+  const payload = {
+    formData: pickRelevantFormData(opts?.formData, opts?.conditionFields),
+    initiatorSelectByNode:
+      opts?.initiatorSelectByNode && typeof opts.initiatorSelectByNode === 'object'
+        ? opts.initiatorSelectByNode
+        : {}
+  }
+  return JSON.stringify(sortKeysDeep(payload))
+}
+
+export function shouldSkipFlowPreviewRequest(
+  prevKey: string | null | undefined,
+  nextKey: string,
+  opts: { inFlightKey?: string | null } = {}
+): boolean {
+  const inFlightKey = opts.inFlightKey
+  if (inFlightKey != null) {
+    return inFlightKey === nextKey
+  }
+  return prevKey != null && prevKey === nextKey
+}
+
+/** 已有预览结果时静默刷新，避免整区 loading 闪烁 */
+export function shouldShowFlowPreviewSpinner(opts?: {
+  hasCompletedPreview?: boolean
+}): boolean {
+  return !opts?.hasCompletedPreview
+}

web-admin/src/utils/oa-progress-person-lines.test.ts

@@ -0,0 +1,28 @@
+/**
+ * OA 进度人员行：cancelled（撤销/打回清待办）对齐或签 done →「无需处理」
+ * Spec: docs/superpowers/specs/2026-08-13-oa-progress-withdraw-cancelled-display-design.md
+ */
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { formatProgressPersonLines } from './oa-progress-person-lines'
+
+describe('formatProgressPersonLines · cancelled', () => {
+  it('maps cancelled to 无需处理 (mute, no timestamp)', () => {
+    const lines = formatProgressPersonLines([
+      {
+        nickName: '张主管',
+        status: 'cancelled',
+        commentText: '',
+        timestamp: '2026-08-13 12:47:46'
+      }
+    ])
+    assert.deepEqual(lines, [
+      {
+        body: '张主管 无需处理',
+        timestamp: '',
+        text: '张主管 无需处理',
+        tone: 'mute'
+      }
+    ])
+  })
+})

web-admin/src/utils/oa-progress-person-lines.ts

@@ -52,8 +52,8 @@ function toneForStatus(status: string): PersonLineTone {
   const s = (status || '').trim()
   if (s === 'approved' || s === 'completed') return 'ok'
   if (s === 'pending' || s === 'running' || s === 'not_reached') return 'pending'
-  if (s === 'rejected' || s === 'returned' || s === 'cancelled') return 'danger'
-  if (s === 'done' || s === 'transferred') return 'mute'
+  if (s === 'rejected' || s === 'returned') return 'danger'
+  if (s === 'done' || s === 'transferred' || s === 'cancelled') return 'mute'
   return ''
 }
 
@@ -86,7 +86,7 @@ export function formatProgressPersonLines(
     const ts = String(p.timestamp || '').trim()
     const tone = toneForStatus(status)
 
-    if (status === 'done') {
+    if (status === 'done' || status === 'cancelled') {
       pushLine(out, `${name} 无需处理`, '', 'mute')
       continue
     }