feat(演示): 持久化 Mock 数据并打通文档库发起签署闭环

clinical-web/src/views/management/documents/components/DocumentLibraryHeader.vue

@@ -8,6 +8,7 @@ const emit = defineEmits<{
   'update:modelValue': [value: string]
   add: []
   export: []
+  reset: []
 }>()
 
 function handleInput(event: Event) {
@@ -41,6 +42,14 @@ function handleInput(event: Event) {
       <button type="button" class="tool-button secondary" @click="emit('export')">
         导出模板包
       </button>
+      <button
+        type="button"
+        class="tool-button ghost"
+        title="清除本地保存的演示文书与签署任务"
+        @click="emit('reset')"
+      >
+        重置演示数据
+      </button>
     </div>
   </div>
 </template>
@@ -135,6 +144,17 @@ function handleInput(event: Event) {
   background: var(--brand-l);
 }
 
+.tool-button.ghost {
+  color: var(--mut);
+  background: #fff;
+  border: 1px solid var(--line);
+}
+
+.tool-button.ghost:hover {
+  color: var(--ink);
+  border-color: var(--mut);
+}
+
 @media (max-width: 760px) {
   .library-tools {
     width: 100%;

clinical-web/src/views/management/documents/index.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
 
 import NewSigningTaskDialog from '@/components/signing/NewSigningTaskDialog.vue'
-import type { SigningTemplate } from '@/api/workbench/types'
+import type { SigningTaskRecord, SigningTemplate } from '@/api/workbench/types'
 import type { CampusRecord, DepartmentRecord } from '@/api/management/types'
+import { clearMockState } from '@/utils/mock-storage'
 
 import DocumentFilterTabs from './components/DocumentFilterTabs.vue'
 import DocumentLibraryHeader from './components/DocumentLibraryHeader.vue'
 import DocumentPreviewDialog from './components/DocumentPreviewDialog.vue'
 import DocumentTemplateCard from './components/DocumentTemplateCard.vue'
 import WordEditorDialog from './components/WordEditorDialog.vue'
-import { documentLibrary, documentStatusOptions } from './mock'
+import { documentStatusOptions, loadDocumentLibrary, saveDocumentLibrary } from './mock'
 import type {
   DepartmentTab,
   DocumentDepartment,
@@ -24,6 +26,8 @@ import type {
 // 原型阶段：文档库数据与文书内容全部来自本地真实附件（mock.ts + contents.ts），暂不调用后端接口。
 // 后续接入时，仅需将 loadLibrary / saveTemplate / handleWorkflow 中的本地数据操作替换为文档模板接口。
 
+const router = useRouter()
+
 const library = ref<DocumentDepartment[]>([])
 const selectedTemplate = ref<DocumentTemplate | null>(null)
 const signingTemplate = ref<SigningTemplate | null>(null)
@@ -99,8 +103,8 @@ const filteredTemplates = computed(() => {
   })
 })
 
-function cloneLibrary(): DocumentDepartment[] {
-  return documentLibrary.map((department) => ({
+function cloneLibrary(source: DocumentDepartment[]): DocumentDepartment[] {
+  return source.map((department) => ({
     ...department,
     categories: department.categories.map((category) => ({
       ...category,
@@ -110,9 +114,12 @@ function cloneLibrary(): DocumentDepartment[] {
 }
 
 function loadLibrary() {
-  library.value = cloneLibrary()
+  library.value = cloneLibrary(loadDocumentLibrary())
 }
 
+// 演示数据落本地：刷新后文书库还在，不用每次重新建文书
+watch(library, (value) => saveDocumentLibrary(value), { deep: true })
+
 function handlePreview(template: DocumentTemplate) {
   selectedTemplate.value = template
 }
@@ -262,6 +269,31 @@ function closeSigningDialog() {
   signingTemplate.value = null
 }
 
+// 闭环：文档库发起签署后跳到工作台并选中该任务，否则任务创建成功但用户看不到后续
+function handleTaskCreated(task: SigningTaskRecord) {
+  closeSigningDialog()
+  void router.push({ name: 'workbench-signing', query: { taskId: task.id } })
+}
+
+// 自测用：一键清掉本地保存的演示文书与签署任务，回到初始状态。
+// 签署任务的演示数据在 api 层的内存里，清存储后直接刷新最彻底。
+async function resetMockData() {
+  const confirmed = await ElMessageBox.confirm(
+    '将清除本地保存的演示文书与签署任务，恢复到初始状态。',
+    '重置演示数据',
+    { type: 'warning', confirmButtonText: '重置', cancelButtonText: '取消' },
+  )
+    .then(() => true)
+    .catch(() => false)
+
+  if (!confirmed) {
+    return
+  }
+
+  clearMockState()
+  window.location.reload()
+}
+
 function clearFilters() {
   filters.keyword = ''
   filters.department = null
@@ -281,6 +313,7 @@ onMounted(loadLibrary)
       :total="filteredTemplates.length"
       @add="showAddMessage"
       @export="showExportMessage"
+      @reset="resetMockData"
     />
 
     <DocumentFilterTabs
@@ -332,6 +365,7 @@ onMounted(loadLibrary)
       :visible="signingDialogVisible"
       :initial-template="signingTemplate"
       @close="closeSigningDialog"
+      @created="handleTaskCreated"
     />
     <WordEditorDialog
       :visible="wordEditorVisible"

clinical-web/src/views/management/documents/mock.ts

@@ -1,3 +1,4 @@
+import { MOCK_STORAGE_KEYS, readMockState, writeMockState } from '@/utils/mock-storage'
 import type { SigningDocumentData } from '@/utils/signing-document'
 
 import type { DocumentDepartment, DocumentStatus } from './types'
@@ -19,6 +20,16 @@ export { documentStatusLabels }
 // Word 自维护方案：文书库初始为空，所有文书由科室通过 Word 编辑器（粘贴 / 导入 .docx）创建维护。
 export const documentLibrary: DocumentDepartment[] = []
 
+/** 读取演示文书库：优先用本地保存的数据，没有则用初始空库（调用方负责再克隆一份使用） */
+export function loadDocumentLibrary(): DocumentDepartment[] {
+  return readMockState<DocumentDepartment[]>(MOCK_STORAGE_KEYS.documentLibrary) ?? documentLibrary
+}
+
+/** 保存演示文书库，刷新后仍可继续编辑、预览与发起签署 */
+export function saveDocumentLibrary(library: DocumentDepartment[]): void {
+  writeMockState(MOCK_STORAGE_KEYS.documentLibrary, library)
+}
+
 /**
  * 签署预览使用的示例患者快照（脱敏演示数据）。
  * 创建文书时还没有真实签署任务，用固定示例值让科室看到占位符被填充后的版式；