diff --git a/clinical-web/README.md b/clinical-web/README.md index f8ce20c..ee8dd4f 100644 --- a/clinical-web/README.md +++ b/clinical-web/README.md @@ -175,7 +175,7 @@ API 模块与页面按业务域对应。工作台页面使用 `api/workbench` - `POST /api/v1/auth/logout`：注销当前会话； - 后续请求自动携带 `X-Token` 请求头。 -路由、侧栏和页面操作均按后端授权资源控制；导航每 15 秒及窗口重新聚焦时刷新，角色、菜单资源或员工角色绑定变更后也会主动刷新当前授权。角色权限从菜单资源树配置目录、菜单和按钮，员工角色绑定通过独立用户角色接口保存。菜单资源维护使用真实接口；系统参数卡片仍是演示数据，最终授权始终以后端校验为准。 +路由、侧栏和页面操作均按后端授权资源控制；窗口重新聚焦、或页面重新可见（`visibilitychange`）时刷新当前授权，角色、菜单资源或员工角色绑定变更后也会主动刷新。**这里不再有周期性轮询**：早期版本用 15 秒定时器刷新，实测一个闲置可见标签页会稳定产生约 240 次/小时请求（`/v1/authorization/me`），而权限变更本身是低频的管理员操作，因此改为只在「用户重新回到页面」时收敛。用户长时间停留且不切窗口时，切路由仍会经路由守卫的 `ensureCurrentUser()`（10 秒 TTL + 并发去重）顺带收敛。角色权限从菜单资源树配置目录、菜单和按钮，员工角色绑定通过独立用户角色接口保存。菜单资源维护使用真实接口；系统参数卡片仍是演示数据，最终授权始终以后端校验为准。 按钮级权限统一用全局指令 `v-permission` 声明（实现见 `src/directives/permission.ts`）：`v-permission="'doc:template:edit'"` 无权限时隐藏，`v-permission.disable="'doc:template:edit'"` 无权限时置灰；权限码必须与菜单资源树里 BUTTON 节点的 `code` 完全一致，前端不再维护别名映射。指令只负责体验，按钮背后的处理函数仍要用同一套权限码自行校验。文档库管理（`views/management/documents`）是本轮先落地的页面，其余页面沿用旧的 `hasPermission` 写法，待逐个统计按钮后迁移。 diff --git a/clinical-web/scripts/login.cjs b/clinical-web/scripts/login.cjs index 2f015d5..a10c80f 100644 --- a/clinical-web/scripts/login.cjs +++ b/clinical-web/scripts/login.cjs @@ -84,8 +84,9 @@ async function login(captchaCode) { ' 用户 = ' + json.data.user.displayName + ' (' + json.data.user.username + ')', ) console.log(' campusId = ' + json.data.user.campusId) - console.log(' dataScope = ' + json.data.user.dataScope) - console.log(' permissions = ' + json.data.user.permissions.length + ' 项') + // 登录响应里 dataScope / permissions 可能缺失：权限以 /v1/authorization/me 为准。 + console.log(' dataScope = ' + (json.data.user.dataScope ?? '(未返回)')) + console.log(' permissions = ' + (json.data.user.permissions?.length ?? 0) + ' 项') console.log(' 会话已写入 ' + SESSION_FILE) } diff --git a/clinical-web/src/api/management/types.ts b/clinical-web/src/api/management/types.ts index 45b0869..7736e82 100644 --- a/clinical-web/src/api/management/types.ts +++ b/clinical-web/src/api/management/types.ts @@ -22,6 +22,15 @@ export interface DocumentRecord { versionId?: string departmentId?: string | null departmentName?: string + /** + * 除归属科室外还共享给哪些科室。 + * + * 原型 V10.2 的「文档归属」支持多选科室，但后端 CreateTemplateRequest 只接受 + * 单个 departmentId + campusId，这个字段因此**只在演示文库里有值**； + * 真实接口补齐多科室归属前，页面不会为它编造取值（缺省即 undefined， + * 卡片上的「·+N 科室」据此决定是否显示）。 + */ + sharedDepartments?: string[] campusId?: string | null campusName?: string description?: string diff --git a/clinical-web/src/api/workbench/signing.ts b/clinical-web/src/api/workbench/signing.ts index 186b8d0..361c430 100644 --- a/clinical-web/src/api/workbench/signing.ts +++ b/clinical-web/src/api/workbench/signing.ts @@ -264,20 +264,42 @@ const defaultMockRecords: SigningTaskRecord[] = [ * ② 签名图：种子任务里标了「已签署」却不带签名，会出现「列表说已签署、打开没有签名、 * 产物列表也是空的」这种自相矛盾的状态，下载的 PDF 也缺签名。 * 这里给缺签名的已签署任务补一张示意签名；真实签署过的任务已有签名图，不会被覆盖。 + * ③ 文书绑定：种子的 documentId 是按早期「一类文书一个任务」写死的（tpl-001…tpl-006）。 + * 演示文书库现在只保留一份麻精知情同意书，那些模板已经不在库里——不重绑的话 + * 每个任务详情都会落到「未能取到模板正文」的占位版式，签名位、勾选项、页眉 + * 这些签署链路在演示环境里一次都走不到。重绑按序号在库里取，库里以后增删文书 + * 任务会跟着走，不会再脱钩。 */ function hydrateTaskDocuments(records: SigningTaskRecord[]): SigningTaskRecord[] { - const templates = new Map(readLocalSigningTemplates().map((template) => [template.id, template])) + const library = readLocalSigningTemplates() + const templates = new Map(library.map((template) => [template.id, template])) + // 只重绑到「确实有正文」的文书：换成一个同样取不到正文的模板，等于白换， + // 还会把任务上的文书名改成与详情内容不符的一个 + const usable = library.filter((template) => template.contentHtml) - return records.map((record) => { + return records.map((record, index) => { let next = record if (next.status === 'signed' && !next.signatureDataUrl) { next = { ...next, signatureDataUrl: DEMO_SIGNATURE_DATA_URL } } - const template = templates.get(next.documentId) + const bound = templates.get(next.documentId) - if (!template?.contentHtml) { + // 库里已经没有这个 documentId 了。带固化正文的任务不重绑——那是留痕的一部分。 + if (!bound && !next.documentContentHtml && usable.length) { + const fallback = usable[index % usable.length] + + return { + ...next, + documentId: fallback.id, + documentName: fallback.name, + templateVersionId: fallback.versionId, + documentContentHtml: fallback.contentHtml, + } + } + + if (!bound?.contentHtml) { return next } @@ -291,8 +313,8 @@ function hydrateTaskDocuments(records: SigningTaskRecord[]): SigningTaskRecord[] return { ...next, - templateVersionId: next.templateVersionId || template.versionId, - documentContentHtml: template.contentHtml, + templateVersionId: next.templateVersionId || bound.versionId, + documentContentHtml: bound.contentHtml, } }) } diff --git a/clinical-web/src/layouts/ClinicalLayout.vue b/clinical-web/src/layouts/ClinicalLayout.vue index 6a371a3..153af5f 100644 --- a/clinical-web/src/layouts/ClinicalLayout.vue +++ b/clinical-web/src/layouts/ClinicalLayout.vue @@ -10,7 +10,6 @@ import { useLoginStore } from '@/stores/login' const loginStore = useLoginStore() const route = useRoute() const router = useRouter() -let authorizationTimer: ReturnType | undefined let authorizationRefreshing = false async function redirectIfUnauthorized() { @@ -44,16 +43,24 @@ function handleWindowFocus() { void refreshAuthorization() } +/** + * 切标签页回来时浏览器不一定派发 window focus（窗口本身没失焦）， + * 所以补一条 visibilitychange，保证「离开页面期间别人改了权限」能立刻收敛。 + */ +function handleVisibilityChange() { + if (document.visibilityState === 'visible') { + void refreshAuthorization() + } +} + onMounted(() => { - authorizationTimer = setInterval(() => void refreshAuthorization(), 15_000) window.addEventListener('focus', handleWindowFocus) + document.addEventListener('visibilitychange', handleVisibilityChange) }) onUnmounted(() => { - if (authorizationTimer) { - clearInterval(authorizationTimer) - } window.removeEventListener('focus', handleWindowFocus) + document.removeEventListener('visibilitychange', handleVisibilityChange) }) watch( diff --git a/clinical-web/src/styles/index.css b/clinical-web/src/styles/index.css index 225ade4..23f59cc 100644 --- a/clinical-web/src/styles/index.css +++ b/clinical-web/src/styles/index.css @@ -1,4 +1,7 @@ @import './theme.css'; +/* 文书渲染（签署态）的通用样式：占位符胶囊、选项、系统页眉。 + 文书库预览 / 签署工作台 / 编辑器三处共用一份，避免各写一套后配色漂移 */ +@import './signing-document.css'; :root { font-family: var(--font-sans); diff --git a/clinical-web/src/styles/signing-document.css b/clinical-web/src/styles/signing-document.css new file mode 100644 index 0000000..a9f51ba --- /dev/null +++ b/clinical-web/src/styles/signing-document.css @@ -0,0 +1,229 @@ +/** + * 文书渲染的通用样式（全局）。 + * + * 为什么放全局而不是各组件 scoped：同一份「签署态文书」会在三个地方出现—— + * 文书库的签署预览、签署工作台的文书区、编辑器里的占位符胶囊。 + * 三处各写一份 :deep() 覆盖，改一次配色要改三处，且必然漂移。 + * + * 类名口径与原型 V10.2 对齐： + * - `.docfld` = 填写项（占位符）。空值是虚线胶囊，填充后加 `.filled` 去掉边框与底色； + * - `.docopt` = 一组选项里的单项，用 ☑ / ☐ 文本而不是 input； + * - `.sign-doc-header` = 系统页眉（患者信息由 HIS 带出，不进签署证据）。 + * + * 约定：`.docfld` / `.docopt` 的配色只在原型基础上做**一处**改动—— + * 原型的 `#8aa4b0` 下划线、`#c07f00` 签名橙、`#0f9d6c` 勾选绿都原样保留， + * 因为它们与项目主题变量（--brand / --warn / --ok）本来就是同一套色系。 + */ + +/* ============ 填写项：占位符胶囊 ============ */ + +.docfld { + display: inline-block; + padding: 1px 8px; + margin: 0 2px; + color: var(--brand-d); + font-weight: 600; + white-space: nowrap; + background: var(--brand-l); + border: 1px dashed var(--brand); + border-radius: 5px; +} + +/* 签名位：它决定签名落位，是文书里最不能漏的一项，用橙色单独区分 */ +.docfld.k-signature { + color: #9a5f00; + background: #fff7e8; + border-color: #c07f00; +} + +/* 勾选 / 选择类：绿色；未填充时前面带一个 ☑ 提示这是可勾的 */ +.docfld.k-checkbox, +.docfld.k-choice { + color: #0b7a4b; + background: #eafaf1; + border-color: #0f9d6c; +} + +.docfld.k-checkbox:not(.filled)::before, +.docfld.k-choice:not(.filled)::before { + font-weight: 700; + content: '\2611 '; +} + +/* 已填充：去掉"待填写"的视觉暗示，取值直接读作正文。 + 下划线空白（.docfld-blank）也会被一并去掉底色与边框， + 否则空值看起来和填好的值一样重 */ +.docfld.filled { + padding: 1px 2px; + font-weight: 400; + cursor: default; + background: transparent; + border-style: solid; + border-color: transparent; +} + +/* 空值占位：一条下划线。原型是 inline style，这里落成类名， + 免得渲染端拼 HTML 时再手写一段样式字符串（也就没法统一调整） */ +.docfld-blank { + display: inline-block; + min-width: 90px; + border-bottom: 1px solid #8aa4b0; +} + +/* 文本 / 日期填写项在签署页是可补录的，控件压成与 .docfld-blank 完全一致的外观： + 空着是一条下划线、填好了是正文。原型这类项只读（值全来自 HIS）， + 本仓库还有必须现场手填的自定义文本项，所以保留输入能力但不上表单外观。 */ +.docfld-input { + min-width: 90px; + padding: 0 2px; + color: inherit; + font: inherit; + font-weight: inherit; + text-align: center; + background: transparent; + border: 0; + border-bottom: 1px solid #8aa4b0; + border-radius: 0; +} + +.docfld-input:focus { + background: #f4fafc; + border-bottom-color: var(--brand); + outline: none; +} + +/* 未填写的必填项：下划线转橙，让签署页一眼看出还有哪几处要填。 + 原型没有这一档（它的空值只有一条淡线），是为签署页可用性补的—— + 填充后胶囊边框被 .filled 去掉，否则未填项在文书上完全看不出差别 */ +.docfld.sign-field--missing .docfld-blank, +.docfld.sign-field--missing .docfld-input { + border-bottom-color: #d9821f; +} + +.docfld.sign-field--missing .docfld-input { + background: #fffdf7; +} + +/* 签名图：原型固定 46px 高、垂直居中 */ +.docfld-signature { + height: 46px; + vertical-align: middle; +} + +/* 未采集签名的提示文字 */ +.docfld-empty { + color: var(--mut); + font-size: 11px; +} + +/* 可点击采集签名的填写项：整块胶囊都是点击热区（子节点会冒泡到宿主）， + hover / 聚焦给出明确反馈，否则操作人员不知道这里能点 */ +.docfld.sign-field--actionable { + cursor: pointer; + background: #fffaf0; + border-color: #f0a21a; +} + +.docfld.sign-field--actionable:hover { + background: #fff3d8; + border-color: #d98c05; + box-shadow: 0 0 0 2px rgb(240 162 26 / 20%); +} + +.docfld.sign-field--actionable:focus-visible { + outline: 2px solid var(--brand); + outline-offset: 1px; +} + +/* 取值命中高危值（如「否」）：底色转红，签署端会额外在页脚汇总 */ +.docfld.sign-field--abnormal { + background: #fdf0f0; + border-color: #efb9bb; +} + +/* ============ 选项：☑ / ☐ ============ */ + +.docopt { + display: inline-block; + padding: 1px 3px; + margin-right: 12px; + border-radius: 4px; +} + +.docopt.tick { + cursor: pointer; + user-select: none; +} + +.docopt.tick:hover { + background: #f0f6f8; +} + +.docopt.on { + color: #0b7a4b; + font-weight: 600; +} + +/* ============ 存量兼容：表格勾选列与行内方框 ============ */ + +.sign-doc-checkbox { + width: 15px; + height: 15px; + accent-color: var(--brand); + cursor: pointer; +} + +.sign-doc-checkbox:disabled { + cursor: not-allowed; + opacity: 0.55; +} + +/* 正文行内选项（□否 □是）：用 label 包住方框与选项文字，点文字也能选中 */ +.sign-doc-option { + display: inline-flex; + gap: 3px; + align-items: center; + margin-right: 14px; + white-space: nowrap; + cursor: pointer; +} + +/* 存量「勾选表」：表头含「勾选」列 */ +.sign-doc-table { + width: 100%; + border-collapse: collapse; +} + +/* ============ 系统页眉 ============ */ + +/* 患者姓名 / 性别 / 年龄 / 住院号·门诊号，取值全部来自 HIS。 + 只读展示，不挂 data-sign-field —— 页眉不是"待填写项"，也不进签署证据。 + 四项要在一行内放下，取值下划线的宽度由字段定义给出（内联 min-width） */ +.sign-doc-header { + display: flex; + flex-wrap: wrap; + gap: 10px 18px; + padding-bottom: 10px; + margin-bottom: 16px; + border-bottom: 1.5px solid #52646e; +} + +.sign-doc-header__item { + display: inline-flex; + gap: 3px; + align-items: baseline; +} + +.sign-doc-header__label { + flex-shrink: 0; + color: #52646e; + font-size: 12.5px; +} + +.sign-doc-header__value { + padding: 0 5px 1px; + color: #1c2b33; + font-size: 12.5px; + text-align: center; + border-bottom: 1px solid #52646e; +} diff --git a/clinical-web/src/utils/mock-document-library.ts b/clinical-web/src/utils/mock-document-library.ts index 81fb481..08606a0 100644 --- a/clinical-web/src/utils/mock-document-library.ts +++ b/clinical-web/src/utils/mock-document-library.ts @@ -7,14 +7,19 @@ * * 这里同时持有演示文书库的种子数据，原因有两点： * ① 文档库页面与签署工作台必须看到同一份模板，不能一边有数据一边空着； - * ② 种子文书都带真实正文（含签名位、签署日期、勾选表）， + * ② 种子文书带真实正文（含签名位、签署日期、勾选/选择项）， * 发起签署后能走完整的填写项/签名链路，不会退化成前端写死的回退纸样。 * + * 种子只保留一份：**麻醉药品、精神药品知情同意书**（原型 V10.2 的 docSeedNar）。 + * 正文里的占位符用结构化写法（，见 utils/signing-fields）， + * 与编辑器插入的占位符、签署端渲染共用同一份属性契约。 + * * 只声明实际用到的字段，不绑定文档库页面的类型，避免 utils 反向依赖 views。 */ -import type { SigningMethod, SigningTemplate } from '@/api/workbench/types' +import type { SigningFieldDef, SigningMethod, SigningTemplate } from '@/api/workbench/types' +import { buildFieldSpanHtml } from './signing-fields' import { MOCK_STORAGE_KEYS, readMockState, writeMockState } from './mock-storage' /** @@ -39,6 +44,11 @@ export interface LocalDocument { versionId?: string departmentId?: string | null departmentName?: string + /** + * 除归属科室外还共享给哪些科室（原型 sharedDepts）。 + * 后端 CreateTemplateRequest 只接受单个 departmentId，因此这里只在演示文库里有值。 + */ + sharedDepartments?: string[] campusId?: string | null campusName?: string /** @@ -63,162 +73,6 @@ export interface LocalDepartment { categories: LocalCategory[] } -interface DemoDocumentSpec { - id: string - versionId: string - name: string - code: string - version: string - /** 所属科室（文档库分组名） */ - department: string - category: string - description: string - /** 主体说明句：各类文书的措辞不同，逐份写清楚，不做模板化拼接 */ - statement: string - /** 需要患者逐项确认的条目，渲染成表头含「勾选」的表格（签署时转为可勾选） */ - items: string[] - /** 补充说明段落 */ - paragraphs?: string[] - /** 需要签署现场填写的额外字段，如代理文书里的「与患者关系」 */ - extraFields?: string[] -} - -/** - * 生成演示文书正文。 - * 标题、说明段、勾选表、签名位、签署日期都用真实文书的写法， - * 其中 ｛患者签名｝｛医师签名｝｛签署日期｝ 是签署端识别签名位与日期的依据。 - * - * 患者签名与医师签名是两栏：前者是主签名位（手写板/线上签署采集）， - * 后者是文书上的独立签名位，由医师在签署页点击就地采集，两者互不覆盖。 - */ -function buildDemoDocumentHtml(spec: DemoDocumentSpec): string { - const paragraphs = [ - spec.statement, - ...(spec.paragraphs ?? []), - '本文档采用电子方式签署，患者手写签名图片将合成至本文档签名位，文书原件与签名原图双留存，可随时查验。', - ] - - const checkboxTable = spec.items.length - ? `${spec.items - .map((item) => ``) - .join('')}
项目勾选
${item}
` - : '' - - const extraFields = (spec.extraFields ?? []).map((field) => `

${field}：｛${field}｝

`) - - return [ - `

${spec.name}

`, - ...paragraphs.map((paragraph) => `

${paragraph}

`), - checkboxTable, - ...extraFields, - '

患者（或家属）签名：｛患者签名｝

', - '

医师签名：｛医师签名｝

', - '

签署日期：｛签署日期｝

', - ].join('') -} - -const DEMO_DOCUMENT_SPECS: DemoDocumentSpec[] = [ - { - id: 'tpl-001', - versionId: 'tpl-001-v2', - name: '住院患者知情同意书', - code: 'DOC-HOS-001', - version: 'V2.0', - department: '全院通用', - category: '住院告知', - description: '住院期间诊疗事项、风险与患者权利告知。', - statement: - '医务人员已就住院期间的诊疗方案、检查与用药安排、可能出现的医疗风险、替代方案及不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。', - items: ['诊疗方案与风险知情', '自费项目知情确认', '个人信息使用授权', '住院期间安全告知'], - }, - { - id: 'tpl-002', - versionId: 'tpl-002-v1', - name: '住院须知及告知书', - code: 'DOC-HOS-002', - version: 'V1.0', - department: '全院通用', - category: '住院告知', - description: '住院流程、陪护要求和患者须知确认。', - statement: '现将住院期间的相关制度、注意事项与患者权利义务告知如下，请仔细阅读并确认。', - items: ['探视与陪护制度', '请假离院风险告知', '费用结算方式确认'], - }, - { - id: 'tpl-003', - versionId: 'tpl-003-v3', - name: '内镜检查知情同意书', - code: 'DOC-DIG-001', - version: 'V3.0', - department: '消化内科', - category: '检查告知', - description: '内镜检查适应证、风险及替代方案告知。', - statement: - '医务人员已就内镜检查的目的、操作过程、可能的风险、替代方案及不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。', - paragraphs: ['本次检查可能采用普通内镜或无痛内镜，若采用无痛内镜需另行完成麻醉评估。'], - items: ['肠道准备工作知情', '麻醉方式选择', '病理活检同意', '息肉切除同意'], - }, - { - id: 'tpl-004', - versionId: 'tpl-004-v1', - name: 'MRI 磁共振检查知情同意书', - code: 'DOC-RAD-001', - version: 'V1.0', - department: '放射科', - category: '检查告知', - description: '磁共振检查注意事项、禁忌证及风险告知。', - statement: - '医务人员已就磁共振检查的目的、注意事项、可能的风险、替代方案及不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。', - paragraphs: [ - '磁共振检查需进入强磁场环境，体外及体内金属植入物可能造成伤害，请务必如实告知。', - '如使用钆对比剂，存在过敏反应及肾功能相关风险，检查前后需配合完成评估。', - ], - items: ['体内金属植入物筛查', '幽闭恐惧症告知', '造影剂过敏史确认', '妊娠情况确认'], - }, - { - id: 'tpl-005', - versionId: 'tpl-005-v2', - name: '心脏介入手术知情同意书', - code: 'DOC-CARD-001', - version: 'V2.0', - department: '心内科', - category: '手术告知', - description: '介入治疗方案、围术期风险及替代方案告知。', - statement: - '医务人员已就介入手术的方案、操作过程、围术期风险、替代方案及可能的不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。', - paragraphs: ['介入操作过程中可能根据实际情况调整术式，需家属在院等候。'], - items: ['冠状动脉造影同意', '支架植入同意', '术后抗凝方案知情', '穿刺部位并发症告知'], - }, - { - id: 'tpl-006', - versionId: 'tpl-006-v1', - name: '体检报告发放及知情同意书', - code: 'DOC-PE-001', - version: 'V1.0', - department: '健康管理中心', - category: '体检告知', - description: '体检报告领取方式、隐私保护和异常结果随访告知。', - statement: '现将体检报告发放方式、个人隐私保护与异常结果随访安排告知如下，请确认。', - items: ['报告领取方式确认', '异常结果随访告知', '个人隐私保护知情'], - }, - { - id: 'tpl-007', - versionId: 'tpl-007-v1', - name: '患者授权委托书', - code: 'DOC-GEN-003', - version: 'V1.0', - department: '医务处', - category: '授权文书', - description: '患者授权家属或代理人办理相关医疗事项。', - statement: '本人因病情或客观原因无法亲自办理下列事项，特授权受托人代为办理。', - paragraphs: ['受托人在授权范围内签署的医疗文书，与本人签署具有同等效力。'], - items: ['代为签署医疗文书', '代为了解病情与诊疗方案', '代为领取检查报告'], - extraFields: ['与患者关系', '受托人姓名'], - }, -] - -/** 数组顺序即文档库里的科室分组顺序，全院通用排在最前 */ -const DEMO_DEPARTMENT_ORDER = ['全院通用', '放射科', '消化内科', '心内科', '健康管理中心', '医务处'] - /** * 演示院区字典。 * @@ -239,19 +93,17 @@ export const demoCampuses = [ /** * 演示科室字典。 - * 文档库的科室下拉在演示模式下用它，真实模式下改由 getDepartments(campusId) 提供。 - * 科室名与演示文书库的分组名刻意保持一致（放射科、消化内科……）， - * 否则会出现"下拉里选不到文书实际所属的科室"。 + * 文档库「文档归属」的科室勾选列表在演示模式下用它，真实模式下改由 + * getAllDepartments() 提供。科室名与演示文书库的分组名刻意保持一致， + * 否则会出现「勾选列表里选不到文书实际所属的科室」。 */ export const demoDepartments = [ - '医学影像科', - '医学检验科', - '临床遗传中心', - '放射科', - '消化内科', - '心内科', - '健康管理中心', + '麻醉科·精神科', + '药学部', '医务处', + '医学影像科', + '消化内科', + '健康管理中心', ].map((name, index) => ({ id: `mock-department-${index + 1}`, campusId: '', @@ -262,9 +114,10 @@ export const demoDepartments = [ sortNo: index + 1, })) -function groupKeyOf(department: string) { - return `demo-${DEMO_DEPARTMENT_ORDER.indexOf(department)}` -} +/** 演示文书库里唯一的科室分组 */ +const DEMO_DEPARTMENT = '麻醉科·精神科' +/** 演示文书库里的分类（原型 library 里该文书落在「麻精药品」分类下） */ +const DEMO_CATEGORY = '麻精药品' /** * 演示文书库种子。 @@ -275,50 +128,150 @@ function groupKeyOf(department: string) { */ const DEMO_UPDATED_AT = '2026-08-20T09:30:00+08:00' -function buildDemoLibrary(): LocalDepartment[] { - return DEMO_DEPARTMENT_ORDER.map((department) => { - const specs = DEMO_DOCUMENT_SPECS.filter((spec) => spec.department === department) - const categories = new Map() - - specs.forEach((spec) => { - const documents = categories.get(spec.category) ?? [] - documents.push({ - id: spec.id, - name: spec.name, - code: spec.code, - version: spec.version, - status: 'published', - backendStatus: 'PUBLISHED', - description: spec.description, - versionId: spec.versionId, - departmentId: null, - departmentName: department, - campusId: null, - campusName: '全院通用', - updatedAt: DEMO_UPDATED_AT, - contentHtml: buildDemoDocumentHtml(spec), - }) - categories.set(spec.category, documents) - }) - - return { - key: groupKeyOf(department), - name: department, - campus: 'all' as const, - categories: [...categories.entries()].map(([name, documents]) => ({ name, documents })), - } - }).filter((department) => department.categories.length > 0) +/** 现场手填的文本框：字段键统一走 custom: 前缀，编辑器据此提示「签署时由患者/家属现场填写」 */ +function handFilled(label: string): SigningFieldDef { + return { id: `custom:${label}`, label, kind: 'text', required: false, options: [] } } -/** 演示文书库种子：文档库页面与签署工作台读同一份，保证两个页面看到的模板一致 */ -export const demoDocumentLibrary: LocalDepartment[] = buildDemoLibrary() +/** + * 麻醉药品、精神药品知情同意书（原型 V10.2 的 docSeedNar）。 + * + * 正文结构与原型逐条对齐：一、患者基本信息 / 二、代办人信息 / 三、身份核验记录 / + * 四、用药信息 / 五、风险告知与注意事项 / 六、签字确认。 + * + * 与原型的一处差别：原型里「代办人信息」等处的填空是 Word 导入时留下的静态下划线 + * （``），在编辑器里会因属性被清洗而丢失。 + * 这里改成**文本框占位符**——签署时渲染出来同样是下划线，但内容能被采集， + * 也顺便把「现场手填」这条链路演示完整。 + */ +function buildNarcoticConsentHtml(): string { + const field = (def: SigningFieldDef) => buildFieldSpanHtml(def) + + const identityVerified: SigningFieldDef = { + id: 'identityVerified', + label: '已核对', + kind: 'checkbox', + required: true, + options: ['患者本人', '代办人'], + multi: true, + } + const takeAway: SigningFieldDef = { + id: 'takeAway', + label: '是否带离机构使用', + kind: 'choice', + required: true, + options: ['否（本机构内使用）', '是（带离机构外使用，按单次门诊处方量管理）'], + multi: false, + } + + const risks = [ + '麻精药品具有成瘾性（依赖性）风险，须严格按照医嘱使用，不得擅自调整用药剂量或改变用法。', + '不得套开麻精药品，不得将药品转借、转售他人。', + '转售麻精药品涉嫌毒品犯罪，需承担严重法律后果（第二十七条“特殊属性告知”）。', + '使用麻精药品需按医嘱定期复诊（长期使用者至少每 3 个月复诊或电话/视频随诊）。', + '过期、未使用的麻精药品及其废贴、空安瓿应当交回医疗机构，由医疗机构按规定销毁，不得自行处理或丢弃。', + '注射剂再次领取时须交回此前使用的空安瓿（第二十七条、第四十二条）。', + '可能出现的不良反应：恶心、呕吐、便秘、头晕、嗜睡、呼吸抑制等，如有不适及时就医。', + '本药品仅供本患者使用，请妥善保管，防止丢失、被盗或被他人误用。', + ] + + return [ + '

麻醉药品、精神药品知情同意书

', + '

（依据国卫医政发〔2026〕21号第二十七条、第六十九条制定）

', + '

一、患者基本信息

', + '', + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + '
患者姓名${field({ id: 'patient', label: '患者姓名', kind: 'text', required: true, options: [] })}性别${field({ id: 'sex', label: '性别', kind: 'text', required: false, options: [] })}
年龄${field({ id: 'age', label: '年龄', kind: 'text', required: false, options: [] })}病历号${field(handFilled('病历号'))}
身份证号${field(handFilled('身份证号'))}联系电话${field({ id: 'phone', label: '联系电话', kind: 'text', required: false, options: [] })}
诊断${field(handFilled('诊断'))}就诊科室${field(handFilled('就诊科室'))}
', + '

二、代办人信息（代办领取时填写）

', + '', + ``, + ``, + ``, + ``, + '
代办人姓名${field(handFilled('代办人姓名'))}与患者关系${field(handFilled('与患者关系'))}
代办人身份证号${field(handFilled('代办人身份证号'))}联系电话${field(handFilled('代办人联系电话'))}
', + '

三、身份核验记录

', + '', + ``, + ``, + '', + ``, + '
已核对${field(identityVerified)} 身份证明原件：证件类型及号码：${field(handFilled('证件类型及号码'))}
医师确认：患者/代办人身份信息与登记一致核对医师签名：${field({ id: 'doctor', label: '核对医师签名', kind: 'signature', required: true, options: [] })}
', + '

四、用药信息

', + '', + ``, + ``, + ``, + ``, + ``, + '
药品名称${field(handFilled('药品名称'))}
剂型/规格${field(handFilled('剂型规格'))}
用法用量${field(handFilled('用法用量'))}
是否带离机构使用${field(takeAway)}
使用期限${field(handFilled('使用期限'))}
', + '

五、风险告知与注意事项

', + `
    ${risks.map((risk) => `
  1. ${risk}
    2. `).join('')}
`, + '

六、签字确认

', + '', + ``, + ``, + '', + ``, + '', + '
患者（或监护人/代办人）签名：${field({ id: 'signature', label: '患者签名', kind: 'signature', required: true, options: [] })}签字日期：${field({ id: 'signedDate', label: '签署日期', kind: 'date', required: true, options: [] })}
（未成年人须由监护人书面同意并签名）
开具医师签名：${field({ id: 'prescribingDoctor', label: '开具医师签名', kind: 'signature', required: true, options: [] })}
', + '

注：本知情同意书由医疗机构妥善保存。采用电子形式的，内容须与纸质一致、完整且不可篡改（第六十九条）。

', + ].join('') +} + +function buildDemoLibrary(): LocalDepartment[] { + const document: LocalDocument = { + id: 'tpl-pha-nar-001', + name: '麻醉药品、精神药品知情同意书', + code: 'TPL-PHA-NAR-001', + version: 'v1.0.0', + status: 'published', + backendStatus: 'PUBLISHED', + description: '麻精药品成瘾性风险、特殊属性告知、身份核验、代办人信息与用药信息登记。', + versionId: 'tpl-pha-nar-001-v1', + departmentId: null, + departmentName: DEMO_DEPARTMENT, + campusId: null, + campusName: '全院通用', + updatedAt: DEMO_UPDATED_AT, + contentHtml: buildNarcoticConsentHtml(), + } + + return [ + { + key: 'demo-0', + name: DEMO_DEPARTMENT, + campus: 'all' as const, + categories: [{ name: DEMO_CATEGORY, documents: [document] }], + }, + ] +} + +/** + * 演示文书库种子（惰性构建）。 + * + * 正文里的占位符由 buildFieldSpanHtml 产出，而它要读 document， + * 因此在首次取用时才构建：模块被 Node 侧脚本 import 时不会因为缺 DOM 直接抛错。 + */ +let demoLibraryCache: LocalDepartment[] | null = null + +export function getDemoDocumentLibrary(): LocalDepartment[] { + demoLibraryCache ??= buildDemoLibrary() + return demoLibraryCache +} /** * 读取演示文书库：优先用本地保存的（科室改过、建过的），没有则用种子。 * 调用方负责再克隆一份使用，避免直接改到种子数据。 */ export function readDocumentLibrary(): LocalDepartment[] { - return readMockState(MOCK_STORAGE_KEYS.documentLibrary) ?? demoDocumentLibrary + return readMockState(MOCK_STORAGE_KEYS.documentLibrary) ?? getDemoDocumentLibrary() } /** 保存演示文书库，刷新后仍可继续编辑、预览与发起签署 */ diff --git a/clinical-web/src/utils/mock-storage.ts b/clinical-web/src/utils/mock-storage.ts index 149787d..9d8d005 100644 --- a/clinical-web/src/utils/mock-storage.ts +++ b/clinical-web/src/utils/mock-storage.ts @@ -13,7 +13,14 @@ const STORAGE_PREFIX = 'medical-sign:mock:' /** 演示数据键名：清空演示数据时按这里的清单统一清理 */ export const MOCK_STORAGE_KEYS = { - documentLibrary: `${STORAGE_PREFIX}document-library`, + /** + * 键里带种子版本号。 + * + * 演示文库的种子内容换过一轮（原来 7 份示例文书，现在只保留「麻醉药品、精神药品 + * 知情同意书」），旧键里的数据不会再被读到，浏览器不必手工清缓存就能看到新种子。 + * 之后每次改种子结构，把版本号 +1 即可，代价只是旧键留在 localStorage 里不参与读取。 + */ + documentLibrary: `${STORAGE_PREFIX}document-library:v2`, signingTasks: `${STORAGE_PREFIX}signing-tasks`, } as const diff --git a/clinical-web/src/utils/signing-document.ts b/clinical-web/src/utils/signing-document.ts index a86385f..d44ad7c 100644 --- a/clinical-web/src/utils/signing-document.ts +++ b/clinical-web/src/utils/signing-document.ts @@ -53,18 +53,58 @@ const FIELD_LABEL_ATTR = 'data-sign-label' const FIELD_REQUIRED_ATTR = 'data-sign-required' const FIELD_RISK_ATTR = 'data-sign-risk' /** - * 多选组的标记。渲染时由这里打上，回读取值时靠它区分 - * 「一组多选 checkbox」与「单个勾选框」——两者 DOM 里都是 input[type=checkbox]。 + * 选项组的标记，渲染时由这里**总是**打上（true / false）。 + * + * 为什么要显式写 false 而不是「有才写」：回读取值时要区分三种形态—— + * 一组多选、一组单选、以及没有选项的单个勾选框；后两者都可能是 + * 「没有这个属性 + kind=checkbox」，光看属性在不在分不出来。 + * 显式落成 true / false 后，「有没有这个属性」就等于「是不是一组选项」。 */ const FIELD_MULTI_ATTR = 'data-sign-multi' /** 需要宿主接管交互的填写项（目前只有「点击采集签名」），值是动作名 */ const FIELD_ACTION_ATTR = 'data-sign-action' /** 签名位的采集动作名 */ const SIGNATURE_ACTION = 'signature' -/** 已采集签名图的类名，readAnswersFromRoot 与写入端都按它找 */ -const SIGNATURE_IMAGE_CLASS = 'sign-doc-signature' /** 可点击采集的签名位类名，样式与摘除入口时都要用同一个 */ const ACTIONABLE_CLASS = 'sign-field--actionable' +/** 填写项宿主节点类名（原型 .docfld：虚线胶囊 → 填充后去边框） */ +const FIELD_HOST_CLASS = 'docfld' +/** 已填充标记：去掉"待填写"的视觉暗示 */ +const FIELD_FILLED_CLASS = 'filled' +/** 空值下划线 */ +const BLANK_CLASS = 'docfld-blank' +/** + * 文本 / 日期填写项的可输入控件类名。 + * + * 原型里这类项是**只读**的：值全部来自 HIS 与患者就诊快照，取不到就留一条下划线。 + * 但本仓库还有「与患者关系」「受托人姓名」这类没有系统取值来源、必须现场手填的 + * 自定义文本项（见 utils/signing-fields 的 createCustomField），做成只读等于把 + * 代理人签署这条路堵死。折中办法是保留输入框、但把外观压成原型那条下划线： + * 空着是一条线、填好了是正文，视觉上与原型一致，又没丢能力。 + */ +const INPUT_CLASS = 'docfld-input' +/** 签名图类名，readAnswersFromRoot 与写入端都按它找 */ +const SIGNATURE_IMAGE_CLASS = 'docfld-signature' +/** 单个选项的类名（原型 .docopt） */ +const OPTION_CLASS = 'docopt' +/** 可点击选项的附加类名（原型 .docopt.tick） */ +const OPTION_TICK_CLASS = 'tick' +/** 已勾选标记（原型 .docopt.on） */ +const OPTION_ON_CLASS = 'on' +/** 选项取值的载体属性；表格勾选列与行内方框也用同一个，回读时只认它 */ +const OPTION_VALUE_ATTR = 'data-sign-item' +/** + * 行内方框转换出来的选项所属的组名。 + * 这些选项散落在正文的文本节点里、没有共同的宿主节点， + * 互斥只能靠这个属性在整篇文书里找同组兄弟（见 toggleOptionAt）。 + */ +const GROUP_ATTR = 'data-sign-group' +/** + * 选项的显示名。与取值标识（data-sign-item）分开存： + * 表格勾选列的取值标识是项目名，但那一格显示的是「待患者勾选」。 + * 切换勾选状态时要按显示名重建文案，所以它必须落成属性，不能从取值推。 + */ +const OPTION_TEXT_ATTR = 'data-sign-text' /** * 可点击采集签名的填写项宿主节点选择器。 @@ -72,6 +112,13 @@ const ACTIONABLE_CLASS = 'sign-field--actionable' */ export const SIGNATURE_ACTION_SELECTOR = `[${FIELD_ACTION_ATTR}="${SIGNATURE_ACTION}"]` +/** + * 可点击切换的选项选择器。 + * 导出给签署端做事件委托：渲染端决定"哪些选项可点"（.tick）， + * 签署端只负责把点击转成 toggleOptionAt，两边不能各写一份选择器。 + */ +export const OPTION_TICK_SELECTOR = `.${OPTION_CLASS}.${OPTION_TICK_CLASS}` + /** * 科室手打的复选框符号见 SIGNING_OPTION_MARKERS（utils/signing-fields）： * 编辑器标记与这里识别必须用同一份字符集，故不再本地声明。 @@ -179,6 +226,83 @@ function isMultiOptionGroup(field: SigningFieldDef): boolean { return isOptionGroupField(field) && (field.multi ?? field.kind === 'checkbox') } +/** + * 选项的显示文案（原型 fillDocHtml / tickDocOpt 的同一口径）： + * 勾选态用 ☑、未勾选用 ☐，空一格后跟选项名。 + * + * 没有选项名的单个勾选框（占位符只写了 kind=checkbox 却没配选项）用固定文案 + * 说明它的语义——原型就是这么写的，也让科室一眼看出这一处是"待勾"而不是漏了内容。 + */ +function optionDisplay(value: string, on: boolean): string { + const mark = on ? '☑' : '☐' + + if (value) { + return `${mark} ${value}` + } + + return on ? `${mark} 已勾选（结果固化归档）` : `${mark} 待患者勾选` +} + +/** + * 一个选项。 + * + * 刻意用文本而不是 ``：原型的签署态文书里没有任何表单控件， + * 选项就是 ☑ / ☐ 两个字符，点击切换类名与文字。这样导出的 HTML + * 与纸质文书的观感一致，也不会因为表单控件的默认样式在各浏览器下跑版。 + * 交互由签署端的事件委托完成（见 toggleOptionAt），所以这里只落一个 .tick 标记。 + * + * displayValue 与 itemValue 分开：表格勾选列的项目名要写进 data-sign-item 当取值标识， + * 但那一格显示的是「待患者勾选」——项目名在左边那一列已经写过了，重复一遍反而挤。 + */ +function buildOptionItem( + doc: Document, + itemValue: string, + on: boolean, + interactive: boolean, + displayValue: string = itemValue, +): HTMLElement { + const item = doc.createElement('span') + item.className = [ + OPTION_CLASS, + on ? OPTION_ON_CLASS : '', + interactive ? OPTION_TICK_CLASS : '', + ] + .filter(Boolean) + .join(' ') + item.setAttribute(OPTION_VALUE_ATTR, itemValue) + item.setAttribute(OPTION_TEXT_ATTR, displayValue) + item.textContent = optionDisplay(displayValue, on) + + return item +} + +/** 切换一个选项的勾选态（改类名 + 重建 ☑ / ☐ 文案），返回切换后的状态 */ +function setOptionState(item: HTMLElement, on: boolean): boolean { + item.classList.toggle(OPTION_ON_CLASS, on) + item.textContent = optionDisplay(item.getAttribute(OPTION_TEXT_ATTR) ?? '', on) + + return on +} + +/** + * 空值占位：一条下划线。 + * + * 原型只给下划线、不给标签，因为它的填写项几乎都由 HIS 预填， + * 空值属于"系统没取到值"的少数情况。这里补一个 title， + * 让鼠标停在下划线上能看出这一处该填什么——外观一行没动。 + */ +function buildBlank(doc: Document, label: string): HTMLElement { + const blank = doc.createElement('span') + blank.className = BLANK_CLASS + blank.innerHTML = ' ' + + if (label) { + blank.title = `待填写：${label}` + } + + return blank +} + function buildFieldWidget( doc: Document, field: SigningFieldDef, @@ -189,17 +313,30 @@ function buildFieldWidget( const value = answers[field.id] const abnormal = hitsRisk(value, field.risk) const multi = isMultiOptionGroup(field) + const empty = isEmptyFieldValue(value) const host = doc.createElement('span') - host.className = `sign-field sign-field--${field.kind}${abnormal ? ' sign-field--abnormal' : ''}` + // 原型口径：渲染出来的填写项**一律**带 .filled —— 签署态文书不再有"待填写"的 + // 虚线胶囊，填空处是下划线、填好的地方就是正文；.filled 表达的是"已渲染为签署态"， + // 不是"已填值"。未填的必填项靠下面的 sign-field--missing 补一条提示色。 + host.className = [ + FIELD_HOST_CLASS, + `k-${field.kind}`, + FIELD_FILLED_CLASS, + abnormal ? 'sign-field--abnormal' : '', + interactive && empty ? 'sign-field--missing' : '', + ] + .filter(Boolean) + .join(' ') host.setAttribute(FIELD_ATTR, field.id) host.setAttribute(FIELD_KIND_ATTR, field.kind) host.setAttribute(FIELD_LABEL_ATTR, field.label) host.setAttribute(FIELD_REQUIRED_ATTR, field.required ? 'true' : 'false') - // 回读取值时靠它区分「一组多选」与「单个勾选框」：两者 DOM 里都是 checkbox - if (multi) { - host.setAttribute(FIELD_MULTI_ATTR, 'true') + // 选项组显式落成 true / false：回读取值时靠"有没有这个属性"区分 + // 「一组选项」与「没有选项的单个勾选框」，两者 DOM 里都是一串 .docopt + if (isOptionGroupField(field)) { + host.setAttribute(FIELD_MULTI_ATTR, multi ? 'true' : 'false') } if (field.risk) { @@ -216,144 +353,72 @@ function buildFieldWidget( host.setAttribute('role', 'button') host.setAttribute('tabindex', '0') host.setAttribute('title', `点击采集「${field.label}」`) + } else if (field.label) { + host.title = field.required ? `${field.label}（必填）` : field.label } - const label = doc.createElement('span') - label.className = 'sign-field__label' - label.textContent = field.label + if (field.kind === 'signature') { + const text = toTextValue(value) - if (field.required) { - const mark = doc.createElement('span') - mark.className = 'sign-field__required' - mark.textContent = '*' - label.appendChild(mark) + if (text) { + const image = doc.createElement('img') + image.className = SIGNATURE_IMAGE_CLASS + image.src = text + image.alt = field.label + host.appendChild(image) + } else { + const pending = doc.createElement('span') + pending.className = 'docfld-empty' + pending.textContent = '未签署' + host.appendChild(pending) + } + + return host } - host.appendChild(label) + // 声明了选项就渲染成一组 ☑ / ☐；没给选项的 choice 会落到下面的文本分支， + // 否则科室拿到的是一个点不动的空控件 + if (isOptionGroupField(field)) { + const selected = toSelectedValues(value) - const control = doc.createElement('span') - control.className = 'sign-field__control' - control.appendChild(buildFieldControl(doc, field, value, interactive, signaturePending, multi)) - host.appendChild(control) + field.options.forEach((option) => { + host.appendChild(buildOptionItem(doc, option, selected.includes(option), interactive)) + }) - if (abnormal) { - const badge = doc.createElement('span') - badge.className = 'sign-field__badge' - badge.textContent = '异常项' - host.appendChild(badge) + return host + } + + // 没有选项的单个勾选框：一个 ☑ / ☐，取值是布尔 + if (field.kind === 'checkbox') { + host.appendChild(buildOptionItem(doc, '', value === true, interactive)) + return host + } + + const text = toTextValue(value) + + // 可交互（签署页）：给一个压成下划线外观的输入框，现场可补录 + if (interactive) { + const input = doc.createElement('input') + input.className = INPUT_CLASS + input.type = 'text' + input.value = text + // value 属性同理：只设 property 的话序列化出来是空值 + input.setAttribute('value', text) + host.appendChild(input) + + return host + } + + // 只读（预览 / 已签署查看）：原型口径——有值就是正文，没值留一条下划线 + if (text) { + host.textContent = text + } else { + host.appendChild(buildBlank(doc, field.label)) } return host } -/** - * 一组选项：单选渲染成一组 radio（互斥），多选渲染成一组 checkbox（各勾各的）。 - */ -function buildOptionGroup( - doc: Document, - field: SigningFieldDef, - value: SigningFieldValue | undefined, - interactive: boolean, - multi: boolean, -): HTMLElement { - const group = doc.createElement('span') - group.className = `sign-field__choices${multi ? ' sign-field__choices--multi' : ''}` - const selected = toSelectedValues(value) - - field.options.forEach((option) => { - const wrapper = doc.createElement('label') - wrapper.className = 'sign-doc-option' - - const input = doc.createElement('input') - input.className = multi ? 'sign-field__checkbox' : 'sign-field__radio' - input.type = multi ? 'checkbox' : 'radio' - // 同名：单选靠它互斥，多选靠它被 readAnswersFromRoot 一起取回 - input.name = `sign-field-${field.id}` - input.value = option - input.disabled = !interactive - - // 必须同时落成 attribute：innerHTML 只序列化 HTML 属性， - // 只设 .checked 这个 property 会在生成 HTML 时被丢掉 - if (selected.includes(option)) { - input.checked = true - input.setAttribute('checked', '') - } - - wrapper.appendChild(input) - wrapper.appendChild(doc.createTextNode(option)) - group.appendChild(wrapper) - }) - - return group -} - -function buildFieldControl( - doc: Document, - field: SigningFieldDef, - value: SigningFieldValue | undefined, - interactive: boolean, - signaturePending: boolean, - multi: boolean, -): Node { - const textValue = toTextValue(value) - - if (field.kind === 'signature') { - if (textValue) { - const image = doc.createElement('img') - image.className = SIGNATURE_IMAGE_CLASS - image.src = textValue - image.alt = field.label - return image - } - - // 签名位只写「待签名」：宿主胶囊上已经写着「医师签名」了， - // 这里再写一遍「待医师签名」是重复信息 - const empty = doc.createElement('span') - empty.className = 'sign-field__signature-empty' - empty.textContent = signaturePending ? '✍ 点击签名' : '待签名' - return empty - } - - // 声明了选项就渲染成一组控件；没给选项的 choice 会落到下面的文本框分支， - // 否则科室拿到的是一个点不动的空控件 - if (isOptionGroupField(field)) { - return buildOptionGroup(doc, field, value, interactive, multi) - } - - if (field.kind === 'checkbox') { - const wrapper = doc.createElement('label') - wrapper.className = 'sign-doc-option' - - const input = doc.createElement('input') - input.className = 'sign-field__checkbox' - input.type = 'checkbox' - input.disabled = !interactive - - if (value === true) { - input.checked = true - input.setAttribute('checked', '') - } - - wrapper.appendChild(input) - wrapper.appendChild(doc.createTextNode(field.label)) - return wrapper - } - - const input = doc.createElement('input') - input.className = 'sign-field__input' - input.type = field.kind === 'date' ? 'date' : 'text' - input.value = textValue - // value 属性同理：只设 property 的话序列化出来是空值 - input.setAttribute('value', textValue) - input.readOnly = !interactive - input.disabled = !interactive - if (interactive) { - input.placeholder = '请填写' - } - - return input -} - /** * 占位符渲染：把 ｛患者姓名｝ 就地替换成填写项控件，保留同一文本节点内的前后文字。 * 模板未收录的占位符按自定义文本项处理，仍可在文书上填写， @@ -439,7 +504,19 @@ function renderStructuredFields( }) } -function convertCheckboxes(root: Element, interactive: boolean, selected: Set) { +/** + * 存量兼容①：表头含「勾选」列的表格，逐行把勾选列转成可点击的 ☑ / ☐。 + * + * 为什么不是 ``：原型的口径是"勾选列 → 占位符 → ☑ 文本" + * （见其 docCheckboxize + fillDocHtml），签署态文书里没有表单控件。 + * 两种外观混在一篇文书里，会让人以为有一处没生效。 + * + * 项目名仍写在 data-sign-item 上：它是这项勾选的**取值标识**， + * 显示成「待患者勾选」只是因为它左边那一列已经写着项目名了。 + */ +function convertCheckboxTables(root: Element, interactive: boolean, selected: Set) { + const doc = root.ownerDocument + root.querySelectorAll('table').forEach((table) => { // 不能只认 ：WangEditor 的表格节点是 ，它导出时不会生成 // thead，粘贴带 thead 的表格时其 preParseHtml 也把 thead 拆掉；.docx 经 mammoth @@ -476,33 +553,36 @@ function convertCheckboxes(root: Element, interactive: boolean, selected: Set -1 ? nameIndex : fallbackIndex] const itemName = (nameCell?.textContent ?? '').trim() - const checkbox = document.createElement('input') - checkbox.type = 'checkbox' - checkbox.className = 'sign-doc-checkbox' - checkbox.setAttribute('data-sign-item', itemName) - checkbox.disabled = !interactive - - // 必须写成 attribute：innerHTML 只序列化 HTML 属性，只设 .checked 这个 - // property 会在生成 HTML 时被丢掉，渲染回来就成了未勾选 - if (selected.has(itemName)) { - checkbox.checked = true - checkbox.setAttribute('checked', '') - } - - checkCell.textContent = '' - checkCell.appendChild(checkbox) + checkCell.replaceChildren( + buildOptionItem(doc, itemName, selected.has(itemName), interactive, ''), + ) }) }) } -/** 收集所有含方框符号的文本节点 */ +/** + * 已经渲染成控件的区域：结构化占位符宿主（含它内部的选项）与已经生成的选项本身。 + * 这两个区域里的方框符号是**我们自己的输出**（☑/☐ 文本），不能再当"科室手打的方框"识别。 + */ +const RENDERED_OPTION_SELECTOR = `.${OPTION_CLASS}, [${FIELD_ATTR}]` + +/** + * 收集所有含方框符号的文本节点。 + * + * 必须排除已渲染区域，否则会自我套娃：选项的文本就是 `☐ 选项`，而 `☐` 恰好是 + * SIGNING_OPTION_MARKERS 里的字符，扫描器会把它当成科室手打的方框再转一次， + * 于是在 `.docopt` 里再嵌一个 `.docopt` —— 患者看到的是「☐ 患者本人 ☐ 患者本人」， + * 且内层用「选项名到标点为止」的规则截断，长选项名会被切掉后半截。 + */ function collectOptionTextNodes(root: Element): Text[] { const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT) const targets: Text[] = [] let node = walker.nextNode() while (node) { - if (OPTION_TEST_PATTERN.test(node.textContent ?? '')) { + const text = node.textContent ?? '' + + if (OPTION_TEST_PATTERN.test(text) && !isInsideRenderedOption(node as Text)) { targets.push(node as Text) } @@ -512,9 +592,17 @@ function collectOptionTextNodes(root: Element): Text[] { return targets } +function isInsideRenderedOption(node: Text): boolean { + return Boolean(node.parentElement?.closest(RENDERED_OPTION_SELECTOR)) +} + /** - * 把一个文本节点里的方框换成可交互控件：方框 + 紧随其后的文字算一个选项， - * 例如「□否 □是」→ 两个 radio，选项名分别是「否」「是」。 + * 把一个文本节点里的方框换成可点击的 ☑ / ☐ 选项：方框 + 紧随其后的文字算一个选项， + * 例如「□否 □是」→ 两个选项，取值分别是「否」「是」。 + * + * 同组标记（data-sign-group）落在选项自己身上，而不是包一层容器： + * 这些方框散落在正文的文本节点里，跨节点包容器会改掉文书结构。 + * 单选组还会带上 data-sign-multi="false"，签署端据此做互斥。 */ function replaceOptionMarkers( textNode: Text, @@ -523,15 +611,16 @@ function replaceOptionMarkers( interactive: boolean, selected: Set, ) { + const doc = textNode.ownerDocument const parts = (textNode.textContent ?? '').split(OPTION_SPLIT_PATTERN) - const fragment = textNode.ownerDocument.createDocumentFragment() + const fragment = doc.createDocumentFragment() for (let index = 0; index < parts.length; index += 1) { const part = parts[index] ?? '' if (!OPTION_TEST_PATTERN.test(part)) { if (part) { - fragment.appendChild(textNode.ownerDocument.createTextNode(part)) + fragment.appendChild(doc.createTextNode(part)) } continue @@ -542,32 +631,17 @@ function replaceOptionMarkers( const label = labelMatch?.[1] ?? '' const tail = labelMatch?.[2] ?? '' - const input = textNode.ownerDocument.createElement('input') - input.type = type - input.className = 'sign-doc-checkbox' - input.disabled = !interactive - input.setAttribute('data-sign-item', label) - - // 同表格勾选：只设 property 不会出现在生成的 HTML 里，必须落成属性 - if (label !== '' && selected.has(label)) { - input.checked = true - input.setAttribute('checked', '') - } + const item = buildOptionItem(doc, label, label !== '' && selected.has(label), interactive) + item.setAttribute(GROUP_ATTR, groupName) if (type === 'radio') { - input.name = groupName - input.value = label + item.setAttribute(FIELD_MULTI_ATTR, 'false') } - const wrapper = textNode.ownerDocument.createElement('label') - wrapper.className = 'sign-doc-option' - wrapper.appendChild(input) - wrapper.appendChild(textNode.ownerDocument.createTextNode(label)) - - fragment.appendChild(wrapper) + fragment.appendChild(item) if (tail) { - fragment.appendChild(textNode.ownerDocument.createTextNode(tail)) + fragment.appendChild(doc.createTextNode(tail)) } // 选项名已随方框一起消费，跳过它对应的片段 @@ -708,7 +782,7 @@ export function buildSigningDocumentHtml( renderTokenFields(root, answers, interactive, signatureActionable, claimed) const selected = new Set(data.selectedItems ?? []) - convertCheckboxes(root, interactive, selected) + convertCheckboxTables(root, interactive, selected) convertInlineOptions(root, interactive, selected) // 页眉最后插入：保证 HIS 取值不会被当成文书内容参与占位符/方框识别 @@ -719,7 +793,11 @@ export function buildSigningDocumentHtml( /** * 从渲染后的文书 DOM 里读回填写项取值。 - * 签名读的是签名图，其余按控件类型读，返回结果直接可作为签署证据的一部分固化。 + * 签名读的是签名图，其余按控件形态读，返回结果直接可作为签署证据的一部分固化。 + * + * 三条读取路径与 buildFieldWidget 的三种形态一一对应，判据只看宿主上的属性， + * 不再猜 DOM：带 data-sign-multi 的是一组选项，kind=checkbox 的是单个勾选框， + * 其余按文本读。 */ export function readAnswersFromRoot(root: HTMLElement): SigningAnswers { const answers: SigningAnswers = {} @@ -738,73 +816,174 @@ export function readAnswersFromRoot(root: HTMLElement): SigningAnswers { return } - // 多选组：一组 checkbox，取值是字符串数组（勾了几个就是几个）。 - // 必须先于下面的 checkbox 分支判断——两者 DOM 里都是 input[type=checkbox]， - // 只有渲染时打上的 data-sign-multi 能区分「一组多选」与「单个勾选框」 - if (host.getAttribute(FIELD_MULTI_ATTR) === 'true') { - answers[id] = Array.from( - host.querySelectorAll('input[type="checkbox"]:checked'), - ).map((input) => input.value) - return - } - - if (kind === 'choice') { - const checked = host.querySelector('input[type="radio"]:checked') - answers[id] = checked?.value ?? '' + const multiAttr = host.getAttribute(FIELD_MULTI_ATTR) + + // 一组选项：勾中的项取 data-sign-item。 + // 单选返回字符串、多选返回数组——与 SigningFieldValue 的约定一致 + if (multiAttr !== null) { + const picked = collectCheckedItems(host) + + answers[id] = multiAttr === 'true' ? picked : (picked[0] ?? '') return } + // 没有选项的单个勾选框：取值是布尔。 + // 找不到勾选节点时按「未勾选」处理——`?.classList.contains()` 会返回 undefined， + // 直接落库会在证据里留下一个 undefined 而不是 false if (kind === 'checkbox') { - const box = host.querySelector('input[type="checkbox"]') - answers[id] = Boolean(box?.checked) + answers[id] = + host + .querySelector(`.${OPTION_CLASS}`) + ?.classList.contains(OPTION_ON_CLASS) ?? false return } - answers[id] = host.querySelector('input')?.value ?? '' + answers[id] = readHostText(host) }) return answers } +/** 某个宿主下已勾选的选项取值（按文档顺序） */ +function collectCheckedItems(host: HTMLElement): string[] { + return Array.from(host.querySelectorAll(`.${OPTION_CLASS}.${OPTION_ON_CLASS}`)).map( + (item) => item.getAttribute(OPTION_VALUE_ATTR) ?? '', + ) +} + /** - * 把一个已固化的取值写回填写项的控件（签署端重新打开文书时还原状态）。 + * 读填写项的文本取值。 * - * 与 readAnswersFromRoot 是一对：那边按控件类型读、这边按同一套判据写， + * 两种载体都要认：签署页是输入框（取 value），预览与已签署查看是正文文字。 + * 只读态的空值占位（.docfld-blank）里是 ` `，直接取 textContent 会得到一个 + * 不换行空格——那会让「已填 / 未填」的判据全部失效（空值看起来像有值）， + * 所以把占位节点先摘掉再读。 + */ +function readHostText(host: HTMLElement): string { + const input = host.querySelector(`.${INPUT_CLASS}`) + + if (input) { + return input.value.trim() + } + + const clone = host.cloneNode(true) as HTMLElement + + clone.querySelectorAll(`.${BLANK_CLASS}`).forEach((blank) => blank.remove()) + + return (clone.textContent ?? '').trim() +} + +/** + * 把一个已固化的取值写回填写项（签署端重新打开文书时还原状态）。 + * + * 与 readAnswersFromRoot 是一对：那边按宿主属性读、这边按同一套判据写， * 两者都放在本文件里，属性名与判据只有一份——签署端不该自己写 data-sign-* 选择器。 */ export function applyAnswerToFieldHost(host: HTMLElement, value: SigningFieldValue): void { - // 多选组：一组 checkbox，取值是字符串数组。 - // 必须先判它，否则会落到下面的布尔分支，把数组当成「勾上了」全部勾选 - if (host.getAttribute(FIELD_MULTI_ATTR) === 'true') { - const picked = new Set(Array.isArray(value) ? value : []) + const items = Array.from(host.querySelectorAll(`.${OPTION_CLASS}`)) + const multiAttr = host.getAttribute(FIELD_MULTI_ATTR) - host.querySelectorAll('input[type="checkbox"]').forEach((box) => { - box.checked = picked.has(box.value) + // 一组选项：多选取数组、单选取字符串。两种都先把整组清干净再按取值点亮， + // 否则「从「是」改成「否」」会留下两个勾 + if (multiAttr !== null && items.length) { + const picked = new Set( + multiAttr === 'true' ? toSelectedValues(value) : [toTextValue(value)].filter(Boolean), + ) + + items.forEach((item) => { + setOptionState(item, picked.has(item.getAttribute(OPTION_VALUE_ATTR) ?? '')) }) - return - } - - if (typeof value === 'boolean') { - const checkbox = host.querySelector('input[type="checkbox"]') - - if (checkbox) { - checkbox.checked = value - } return } - const text = Array.isArray(value) ? '' : value - const input = host.querySelector( - 'input:not([type="radio"]):not([type="checkbox"])', - ) + // 没有选项的单个勾选框：取值是布尔 + if (items.length === 1) { + setOptionState(items[0] as HTMLElement, value === true) + return + } + + // 文本项只认字符串：数组（选项组）与布尔（勾选框）都在这条分支之前被处理掉了， + // 真落到这里说明取值类型与控件形态对不上，按空值处理而不是硬塞一个值进去 + const text = typeof value === 'string' ? value : '' + const input = host.querySelector(`.${INPUT_CLASS}`) if (input) { input.value = text + input.setAttribute('value', text) + return } - host.querySelectorAll('input[type="radio"]').forEach((radio) => { - radio.checked = radio.value === text + if (text) { + host.textContent = text + return + } + + // 清空要还原成下划线占位，不能留一个空壳（空壳看起来像"这一项被删了"） + host.replaceChildren(buildBlank(host.ownerDocument, host.getAttribute(FIELD_LABEL_ATTR) ?? '')) +} + +/** + * 切换点击到的那个选项，返回是否真的发生了变化。 + * + * 三种形态在这里统一处理： + * - 结构化占位符与存量勾选表的选项：宿主带 data-sign-multi，互斥范围就是这个宿主； + * - 行内方框转出来的选项：散在正文里、没有共同宿主，靠 data-sign-group 找同组兄弟。 + * + * root 是整篇文书的容器：只有它才能把"同组兄弟"找全（见上）。 + * 这一层逻辑放在本文件而不是签署端组件里，是为了和渲染端共用 + * 「什么算同组」这一条判据——组件里再推一遍迟早和渲染漂移。 + */ +export function toggleOptionAt(root: HTMLElement, item: HTMLElement): boolean { + if (!item.classList.contains(OPTION_TICK_CLASS) || !root.contains(item)) { + return false + } + + const host = item.closest(`[${FIELD_ATTR}]`) + const groupName = item.getAttribute(GROUP_ATTR) + const multiAttr = host?.getAttribute(FIELD_MULTI_ATTR) ?? item.getAttribute(FIELD_MULTI_ATTR) + // 缺省按多选：只有明确声明过互斥的组才做单选 + const multi = multiAttr !== 'false' + const on = item.classList.contains(OPTION_ON_CLASS) + + if (multi) { + setOptionState(item, !on) + return true + } + + const siblings = groupName + ? Array.from(root.querySelectorAll(`[${GROUP_ATTR}="${groupName}"]`)) + : Array.from(host?.querySelectorAll(`.${OPTION_CLASS}`) ?? [item]) + + // 单选：再点一次已选中的项等于取消，与原型 tickDocOpt 的口径一致 + siblings.forEach((sibling) => setOptionState(sibling, !on && sibling === item)) + + return true +} + +/** + * 收集"散装"选项里已勾选的项（存量勾选表 + 行内方框），即 SigningTaskRecord.selectedItems。 + * + * 刻意排除落在 `[data-sign-field]` 宿主里的选项：结构化填写项的取值走 fieldAnswers， + * 两边都收会让同一份勾选在任务上存两份、且口径可能不一致。 + */ +export function collectSelectedItemsFromRoot(root: HTMLElement): string[] { + return Array.from(root.querySelectorAll(`.${OPTION_CLASS}.${OPTION_ON_CLASS}`)) + .filter((item) => !item.closest(`[${FIELD_ATTR}]`)) + .map((item) => item.getAttribute(OPTION_VALUE_ATTR) ?? '') + .filter(Boolean) +} + +/** 按已固化的勾选清单还原"散装"选项的状态（与 collectSelectedItemsFromRoot 对称） */ +export function applySelectedItemsToRoot(root: HTMLElement, items: string[]): void { + const selected = new Set(items) + + root.querySelectorAll(`.${OPTION_CLASS}`).forEach((item) => { + if (item.closest(`[${FIELD_ATTR}]`)) { + return + } + + setOptionState(item, selected.has(item.getAttribute(OPTION_VALUE_ATTR) ?? '')) }) } @@ -824,14 +1003,13 @@ export function applySignatureToRoot(root: HTMLElement, fieldId: string, dataUrl } const host = root.querySelector(`[${FIELD_ATTR}="${fieldId}"]`) - const control = host?.querySelector('.sign-field__control') - if (!host || !control) { + if (!host) { return false } // 同一张图重复写入没有意义，返回 false 也让调用方少跑一轮回读 - if (control.querySelector(`img.${SIGNATURE_IMAGE_CLASS}`)?.getAttribute('src') === dataUrl) { + if (host.querySelector(`img.${SIGNATURE_IMAGE_CLASS}`)?.getAttribute('src') === dataUrl) { return false } @@ -839,14 +1017,15 @@ export function applySignatureToRoot(root: HTMLElement, fieldId: string, dataUrl image.className = SIGNATURE_IMAGE_CLASS image.src = dataUrl image.alt = host.getAttribute(FIELD_LABEL_ATTR) ?? fieldId - control.replaceChildren(image) + // 签名位填充后只剩签名图：原型不保留「未签署」提示，也不再有点击提示 + host.replaceChildren(image) + host.title = host.getAttribute(FIELD_LABEL_ATTR) ?? '' // 采集入口用完即摘：留着会让「还能再点一次」的观感落空 - host.classList.remove(ACTIONABLE_CLASS) + host.classList.remove(ACTIONABLE_CLASS, 'sign-field--missing') host.removeAttribute(FIELD_ACTION_ATTR) host.removeAttribute('role') host.removeAttribute('tabindex') - host.removeAttribute('title') return true } diff --git a/clinical-web/src/utils/signing-field-node.ts b/clinical-web/src/utils/signing-field-node.ts index 92e10b3..c36161d 100644 --- a/clinical-web/src/utils/signing-field-node.ts +++ b/clinical-web/src/utils/signing-field-node.ts @@ -253,9 +253,9 @@ function renderSignField( return h('span', { attrs: { class: `${SIGN_FIELD_CHIP_CLASS} ${SIGN_FIELD_NODE_CLASS}${selected ? ' is-selected' : ''}`, - // 供 CSS ::before / ::after 展示，避免在 DOM 里留下可落光标的文字 + // 供 CSS ::before 展示标签、::before/::after 与选择器区分类型， + // 避免在 DOM 里留下可落光标的文字（见文件头 ③） 'data-sign-label': elem.fieldLabel, - 'data-sign-tag': kindLabel, 'data-sign-kind': elem.fieldKind, title: `待填写项：${elem.fieldLabel}（${kindLabel}），${source}。${extra.join('，')}。点击选中后可整块删除`, contenteditable: 'false', diff --git a/clinical-web/src/utils/signing-fields.ts b/clinical-web/src/utils/signing-fields.ts index b3299cb..5b0545d 100644 --- a/clinical-web/src/utils/signing-fields.ts +++ b/clinical-web/src/utils/signing-fields.ts @@ -765,6 +765,87 @@ export function upgradeFieldTokensToStructured(contentHtml: string): string { ) } +/** + * 把导入的 Word 表格里的「勾选」列转成结构化勾选占位符（原型 docCheckboxize 的口径）。 + * + * 为什么在**导入时**转，而不是留到签署渲染再转： + * ① 转完它就是一个正常的填写项，科室可以点开改名称、类型、选项， + * 与手工插入的占位符没有任何区别； + * ② 留在渲染期转的话，这份文书在编辑器里始终是一张"看不出哪里要勾"的空表格， + * 科室没法在保存前核对。 + * + * 取值列的选择顺序照原型：勾选列右边第二列 → 左边第一列 → 右边第一列 → 「选择项目」。 + * 原型会给转出来的勾选项写 data-risk="是"，但那个值在渲染侧从未被读取 + * （勾选的取值是布尔，命中判据比不出来），属于原型里没落地的残留，这里不抄。 + * + * 字段键必须逐格现取：同一张表里两行都叫「已阅读」时，共用 `custom:已阅读` + * 会让两处勾选互相覆盖，所以用 allocateCustomFieldId 的同款规则按占用情况往后编号。 + */ +export function convertCheckboxColumnsToFields(contentHtml: string): string { + if (!contentHtml || !contentHtml.includes('${contentHtml}`, + 'text/html', + ) + const root = parsed.getElementById(SCAN_ROOT_ID) + + if (!root) { + return contentHtml + } + + const claimed = collectStructuredIdsFrom(root) + let changed = false + + root.querySelectorAll('table').forEach((table) => { + const rows = Array.from(table.querySelectorAll('tr')) + + if (rows.length < 2) { + return + } + + const headerRow = rows[0] as HTMLTableRowElement + const headerCells = Array.from(headerRow.cells) + const checkIndex = headerCells.findIndex((cell) => cell.textContent?.trim() === '勾选') + + if (checkIndex === -1) { + return + } + + rows.slice(1).forEach((row) => { + const cells = Array.from((row as HTMLTableRowElement).cells) + const target = cells[checkIndex] + + // 只转空单元格：已经有内容的说明科室自己填过，别覆盖 + if (!target || (target.textContent ?? '').trim()) { + return + } + + const label = + (cells[checkIndex + 2]?.textContent ?? '').trim() || + (cells[checkIndex - 1]?.textContent ?? '').trim() || + (cells[checkIndex + 1]?.textContent ?? '').trim() || + '选择项目' + + let sequence = 1 + + while (claimed.has(createCustomField(label, 'checkbox', [], sequence).id)) { + sequence += 1 + } + + const field = createCustomField(label, 'checkbox', [], sequence) + claimed.add(field.id) + + target.replaceChildren(createFieldElement(parsed, { ...field, required: true })) + changed = true + }) + }) + + return changed ? root.innerHTML : contentHtml +} + /** * 给新插入的自定义文本项分配一个在本文书里唯一的字段键。 * diff --git a/clinical-web/src/utils/signing-pdf.ts b/clinical-web/src/utils/signing-pdf.ts index b84d103..1d04873 100644 --- a/clinical-web/src/utils/signing-pdf.ts +++ b/clinical-web/src/utils/signing-pdf.ts @@ -43,37 +43,31 @@ export interface SigningPdfInput { * * 实测（签署工作台导出的 PDF，html2canvas 1.4）：页面上明明印着「与患者关系：文本框 配偶」、 * 签名图也画出来了，导出的位图里这些却全是空白，只剩胶囊的边框和底色—— - * 填写项胶囊 `.sign-field` 与控件容器 `.sign-field__control` 都是 `display: inline-flex`， - * 而 html2canvas 1.4 不实现 flex 布局，容器内文本的落点算不出来， - * 于是连同 `` 的取值、签名 `` 一起被丢掉（连 `

` 里的「待签名」提示也不见了）。 + * 当时填写项胶囊与它的控件容器都是 `display: inline-flex`，html2canvas 算不出容器内 + * 文本的落点，于是连同取值与签名 `` 一起被丢掉。 * - * 换成 `inline-block` 后内容全部回来，于是这里把这两层降级。**只在导出克隆体上改**： - * 屏幕上的版式一行不动，PDF 也不会丢内容；`.sign-doc-header` 那层 flex 实测不受影响，不动它。 + * 现在填写项已按原型口径改成 `display: inline-block`（.docfld / .docopt， + * 见 styles/signing-document.css），这条降级只剩系统页眉那一层： + * 它是 flex 排的一行患者信息，导出前改成 block + inline-block， + * 并用等效的 margin 补回原来的项间距，保证页眉在 PDF 里不丢字。 * - * gap 在 inline-block 下失效，所以把原来的 4px 项间距、align-items: center、 - * 签名位的 justify-content: center 用等效的 inline 写法补回来，导出结果与屏幕观感一致。 + * **只在导出克隆体上改**：屏幕上的版式一行不动。 */ function applyExportFlexFallback(root: HTMLElement) { - root.querySelectorAll('.sign-field, .sign-field__control').forEach((element) => { - element.style.display = 'inline-block' - }) + const header = root.querySelector('.sign-doc-header') - // 胶囊原来是 inline-flex + gap: 4px，项名与控件之间的间距要自己补 - root.querySelectorAll('.sign-field__label').forEach((element) => { - element.style.marginRight = '4px' - }) + if (!header) { + return + } - root.querySelectorAll('.sign-field__control').forEach((element) => { - // 原来是 align-items: center - element.style.verticalAlign = 'middle' - }) + header.style.display = 'block' - // 签名位原来是 justify-content: center，inline-block 下改用 text-align 居中 - root - .querySelectorAll('.sign-field--signature .sign-field__control') - .forEach((element) => { - element.style.textAlign = 'center' - }) + // gap: 10px 18px 在 inline-block 下失效，用 margin 补回来 + root.querySelectorAll('.sign-doc-header__item').forEach((item) => { + item.style.display = 'inline-block' + item.style.marginRight = '18px' + item.style.marginBottom = '6px' + }) } /** 量固定页眉的高度（含下外边距）——它是每页要重复的那一条 */ diff --git a/clinical-web/src/views/management/documents/components/DocumentFilterTabs.vue b/clinical-web/src/views/management/documents/components/DocumentFilterTabs.vue index ab200cc..9206ef1 100644 --- a/clinical-web/src/views/management/documents/components/DocumentFilterTabs.vue +++ b/clinical-web/src/views/management/documents/components/DocumentFilterTabs.vue @@ -1,4 +1,13 @@ diff --git a/clinical-web/src/views/management/documents/components/DocumentLibraryHeader.vue b/clinical-web/src/views/management/documents/components/DocumentLibraryHeader.vue index 2b5881f..3c97720 100644 --- a/clinical-web/src/views/management/documents/components/DocumentLibraryHeader.vue +++ b/clinical-web/src/views/management/documents/components/DocumentLibraryHeader.vue @@ -7,10 +7,8 @@ withDefaults( total: number /** 只在演示模式下展示「重置演示数据」：真实环境不该出现这个自测入口 */ showReset?: boolean - /** 模板包导出接口尚未接入，先只在演示模式展示入口；功能上线后放开这里即可 */ - showExport?: boolean }>(), - { showReset: false, showExport: false }, + { showReset: false }, ) const emit = defineEmits<{ @@ -26,42 +24,22 @@ function handleInput(event: Event) { diff --git a/clinical-web/src/views/management/documents/components/DocumentTemplateCard.vue b/clinical-web/src/views/management/documents/components/DocumentTemplateCard.vue index e942008..853f0ba 100644 --- a/clinical-web/src/views/management/documents/components/DocumentTemplateCard.vue +++ b/clinical-web/src/views/management/documents/components/DocumentTemplateCard.vue @@ -3,185 +3,169 @@ import { computed } from 'vue' import type { TemplateVersionAction } from '@/api/management/documents' -import type { DocumentTemplate } from '../types' -import { readStatusLabel, readStatusTone } from '../mock' +import { + canInitiateSigning, + canToggleStatus, + DOCUMENT_STATUS_DOT, + isGeneralOwnership, + readLibraryStatus, + readStatusTone, +} from '../library' import { DOC_TEMPLATE_PERMISSIONS, workflowPermission } from '../permissions' +import type { DocumentTemplate } from '../types' const props = defineProps<{ template: DocumentTemplate - /** 演示模式下「删除」是真删；真实模式下语义是下架（模板无 DELETE 接口，走归档） */ + /** + * 演示模式。 + * + * 真实模式下卡片只有「停用 / 启用」这一个状态动作：后端菜单资源树里的 + * 「发布 / 提交审核」按钮虽在，但原型 V10.2 已经抛弃那条工作流， + * 科室侧不该再看到「提交审核」这一步（草稿的送审改由属性/正文弹窗完成， + * 或直接由医务管理放行）。 + */ isMock: boolean }>() const emit = defineEmits<{ preview: [template: DocumentTemplate] - edit: [template: DocumentTemplate] - versions: [template: DocumentTemplate] + 'edit-props': [template: DocumentTemplate] + 'edit-content': [template: DocumentTemplate] + history: [template: DocumentTemplate] + 'toggle-status': [template: DocumentTemplate] + 'submit-review': [template: DocumentTemplate] initiate: [template: DocumentTemplate] - remove: [template: DocumentTemplate] - workflow: [template: DocumentTemplate, action: TemplateVersionAction] }>() -const statusLabel = computed(() => readStatusLabel(props.template)) +const status = computed(() => readLibraryStatus(props.template)) +const tone = computed(() => readStatusTone(status.value)) +const dotColor = computed(() => DOCUMENT_STATUS_DOT[tone.value]) -/** 配色按后端状态分组取（待审核与已驳回不能共用一个颜色） */ -const statusTone = computed(() => readStatusTone(props.template)) +const isGeneral = computed(() => isGeneralOwnership(props.template)) +const ownershipLabel = computed(() => + isGeneral.value ? '🌐 全院通用' : `🏥 ${props.template.departmentName ?? '未知科室'}`, +) -/** 只有已发布 / 待复审的模板可以发起签署；草稿与已归档不可用 */ -const hasInitiableVersion = computed(() => Boolean(props.template.currentVersionId || props.isMock)) +/** + * 归属徽标上的「·+N 科室」。 + * + * sharedDepartments 只在演示文库里有值（后端 CreateTemplateRequest 只接受单个 + * departmentId），所以真实模式下这里自然为 0、标签不显示后缀—— + * 不给真实数据编一个后端没存的共享清单。 + */ +const sharedCount = computed(() => props.template.sharedDepartments?.length ?? 0) +/** 只有「启用中」能发起签署；其余状态要么没定稿，要么已下线 */ +const canInitiate = computed(() => canInitiateSigning(status.value)) const initiateTitle = computed(() => - hasInitiableVersion.value ? '用此模板发起签署' : '仅已发布或待复审的模板可发起签署', + canInitiate.value ? '用此文书发起签署' : '仅「启用中」的文书可发起签署', ) -/** - * 版本工作流主动作。 - * - * 模板状态只能由后端工作流推进，前端不自行改写 status，因此这里按后端原始状态 - * （backendStatus，不是归一后的 status）给出「当前该做的下一步」，把文书从草稿推到可签署。 - * - * 不放在这里的两种状态： - * - APPROVED / PUBLISHED 已经可签署，走「发起」按钮； - * - ARCHIVED 是终态，没有任何可执行动作。 - */ -const primaryAction = computed<{ key: TemplateVersionAction; label: string } | null>(() => { - switch (props.template.backendStatus) { - case 'DRAFT': - return { key: 'submit-review', label: '提交审核' } - case 'PENDING_REVIEW': - return { key: 'approve', label: '审核通过' } - case 'REJECTED': - return { key: 'submit-review', label: '重新提交' } - case 'DISABLED': - return { key: 'publish', label: '重新启用' } - case 'APPROVED': - return { key: 'publish', label: '发布' } - default: - return null - } -}) +const canToggle = computed(() => canToggleStatus(status.value)) +const toggleLabel = computed(() => (status.value === '停用' ? '启用' : '停用')) -/** - * 版本工作流次要动作。 - * - * 「驳回」不能只做成主动作的反面：审核通过和驳回是审核人的一对选择， - * 必须同时可见，否则待审核的文书就只能通过、不能打回。 - */ -const secondaryActions = computed<{ key: TemplateVersionAction; label: string; title: string }[]>( - () => { - if (props.template.backendStatus === 'PENDING_REVIEW') { - return [ - { - key: 'reject', - label: '驳回', - title: '驳回后需填写原因，科室按意见修改并重新提交', - }, - ] - } +/** 草稿的「提交审核」只在演示模式露出，真实模式不给这个入口 */ +const showSubmitReview = computed(() => props.isMock && status.value === '草稿') - return [] - }, +/** 停用/启用走的是后端版本动作：停用 → disable，启用 → publish */ +const toggleAction = computed(() => + status.value === '停用' ? 'publish' : 'disable', ) -/** - * 本次交付暂不包含「版本历史」与「删除 / 下架」入口，先隐藏对应按钮。 - * 权限码已按 doc:template:hist / doc:template:stop 接好，需要恢复时把开关改回 true 即可。 - */ -const showVersionAction = false -const showRemoveAction = false - -const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架此文书')) +// 按钮文案与权限码的对应关系集中在模板里，避免多处各写一份 +const permissions = DOC_TEMPLATE_PERMISSIONS +const togglePermission = computed(() => workflowPermission(toggleAction.value)) diff --git a/clinical-web/src/views/management/documents/components/DocumentVersionDialog.vue b/clinical-web/src/views/management/documents/components/DocumentVersionDialog.vue deleted file mode 100644 index 4277f1e..0000000 --- a/clinical-web/src/views/management/documents/components/DocumentVersionDialog.vue +++ /dev/null @@ -1,335 +0,0 @@ - - - - - diff --git a/clinical-web/src/views/management/documents/components/WordEditorDialog.vue b/clinical-web/src/views/management/documents/components/WordEditorDialog.vue index 3135650..c49d1c6 100644 --- a/clinical-web/src/views/management/documents/components/WordEditorDialog.vue +++ b/clinical-web/src/views/management/documents/components/WordEditorDialog.vue @@ -1,50 +1,51 @@