feat(signing): 将签署占位符改为原子节点并支持多选选项组
This commit is contained in:
yelan
@@ -16,6 +16,10 @@ dist-ssr
|
||||
scripts/.session.json
|
||||
scripts/.captcha.json
|
||||
scripts/.captcha.png
|
||||
|
||||
# 浏览器行为探针（验证编辑器原子占位符用），构建产物与本地产物都不进仓库
|
||||
.probe-field-node/dist/
|
||||
.probe-field-node/node_modules/
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>sign-field 原子占位符探针</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
font: 14px/1.6 system-ui, 'Microsoft YaHei', sans-serif;
|
||||
color: #1f2937;
|
||||
}
|
||||
#editor {
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
min-height: 140px;
|
||||
padding: 12px;
|
||||
}
|
||||
#result {
|
||||
white-space: pre-wrap;
|
||||
font: 12px/1.5 ui-monospace, Consolas, monospace;
|
||||
color: #374151;
|
||||
}
|
||||
/*
|
||||
下面这几条是 EditorWangPane.vue 里胶囊样式的镜像（探针页没有 SFC 的作用域样式）。
|
||||
探针只用来验"标签靠 CSS ::before 展示、DOM 里没有可落光标的文字"这个机制，
|
||||
所以颜色/间距不必与生产逐字一致，但 ::before 的 attr() 取值必须一致。
|
||||
*/
|
||||
.ms-sign-chip {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
margin: 0 2px;
|
||||
border-radius: 4px;
|
||||
background: #eef2ff;
|
||||
color: #3b5bdb;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.ms-sign-node::before {
|
||||
content: attr(data-sign-label);
|
||||
}
|
||||
.ms-sign-node::after {
|
||||
content: attr(data-sign-tag);
|
||||
margin-left: 4px;
|
||||
padding-left: 4px;
|
||||
border-left: 1px solid rgb(59 91 219 / 30%);
|
||||
font-size: 11px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ms-sign-node.is-selected {
|
||||
background: #3b5bdb;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="editor"></div>
|
||||
<pre id="result">PENDING</pre>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,443 @@
|
||||
/**
|
||||
* 「签署占位符 = 原子节点」的浏览器行为探针。
|
||||
*
|
||||
* 为什么需要它：类型检查、构建、纯逻辑断言都只能证明"代码写得对"，
|
||||
* 证明不了 wangEditor/Slate 在真实浏览器里**真的**把占位符当成了原子节点。
|
||||
* 用户的核心诉求是「一次退格就能整块删掉」，这件事只有真跑一遍才算验证过。
|
||||
*
|
||||
* 探针只 import 生产源码（utils/signing-field-node），不复制任何逻辑。
|
||||
* 通过 window.__probe 暴露一组原语，由 CDP 脚本编排场景。
|
||||
*/
|
||||
import '@wangeditor/editor/dist/css/style.css'
|
||||
|
||||
import { createEditor, DomEditor, SlateEditor, SlateTransforms } from '@wangeditor/editor'
|
||||
import type { IDomEditor } from '@wangeditor/editor'
|
||||
|
||||
import type { SigningFieldDef } from '../src/api/workbench/types'
|
||||
import {
|
||||
createSignFieldNode,
|
||||
isSignFieldElement,
|
||||
readFieldFromSignFieldNode,
|
||||
registerSigningFieldNode,
|
||||
removeSignFieldNodes,
|
||||
SIGN_FIELD_CHIP_CLASS,
|
||||
SIGN_FIELD_NODE_CLASS,
|
||||
SIGN_FIELD_TYPE,
|
||||
updateSignFieldNodes,
|
||||
} from '../src/utils/signing-field-node'
|
||||
|
||||
// 与 EditorWangPane.vue 一样，在创建编辑器之前注册
|
||||
registerSigningFieldNode()
|
||||
|
||||
const FIELD: SigningFieldDef = {
|
||||
id: 'patient',
|
||||
label: '患者姓名',
|
||||
kind: 'text',
|
||||
required: true,
|
||||
options: [],
|
||||
}
|
||||
|
||||
const INITIAL_HTML = '<p>甲乙丙</p>'
|
||||
|
||||
function createProbeEditor(html: string): IDomEditor {
|
||||
const container = document.getElementById('editor')
|
||||
|
||||
// 复用同一个容器重建，先把上一次留下的 DOM 清掉
|
||||
if (container) {
|
||||
container.innerHTML = ''
|
||||
}
|
||||
|
||||
return createEditor({
|
||||
selector: '#editor',
|
||||
html,
|
||||
mode: 'default',
|
||||
config: { placeholder: '正文' },
|
||||
})
|
||||
}
|
||||
|
||||
let editor: IDomEditor = createProbeEditor(INITIAL_HTML)
|
||||
|
||||
function plain<T>(value: T): T {
|
||||
return JSON.parse(JSON.stringify(value ?? null)) as T
|
||||
}
|
||||
|
||||
/**
|
||||
* 等 DOM 追上模型。
|
||||
*
|
||||
* wangEditor 的 setHtml / insertNode / select 只改 Slate 模型，DOM 由 snabbdom 在下一帧 patch。
|
||||
* 采样太快会读到上一版 DOM（表现是"模型里有元素、DOM 里没有"），
|
||||
* 会把正常的渲染误判成"胶囊没渲染出来"。
|
||||
*/
|
||||
function settle(): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, 80))
|
||||
}
|
||||
|
||||
/** 深度优先找第一个占位符节点的路径（正文里可能嵌在段落/列表里） */
|
||||
function findFieldPath(): number[] | null {
|
||||
let hit: number[] | null = null
|
||||
|
||||
const visit = (nodes: unknown[], prefix: number[]) => {
|
||||
nodes.forEach((node, index) => {
|
||||
if (!node || typeof node !== 'object') {
|
||||
return
|
||||
}
|
||||
|
||||
if (isSignFieldElement(node)) {
|
||||
if (!hit) {
|
||||
hit = [...prefix, index]
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const children = (node as { children?: unknown }).children
|
||||
|
||||
if (Array.isArray(children)) {
|
||||
visit(children, [...prefix, index])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
visit(editor.children as unknown[], [])
|
||||
|
||||
return hit
|
||||
}
|
||||
|
||||
function countFields(): number {
|
||||
let count = 0
|
||||
|
||||
const visit = (nodes: unknown[]) => {
|
||||
nodes.forEach((node) => {
|
||||
if (!node || typeof node !== 'object') {
|
||||
return
|
||||
}
|
||||
|
||||
if (isSignFieldElement(node)) {
|
||||
count += 1
|
||||
return
|
||||
}
|
||||
|
||||
const children = (node as { children?: unknown }).children
|
||||
|
||||
if (Array.isArray(children)) {
|
||||
visit(children)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
visit(editor.children as unknown[])
|
||||
|
||||
return count
|
||||
}
|
||||
|
||||
/** 把 Slate 模型压成一眼能看懂的形状，方便在 CDP 输出里核对 */
|
||||
function outline(): unknown[] {
|
||||
const walk = (nodes: unknown[]): unknown[] =>
|
||||
nodes.map((node) => {
|
||||
const record = node as { type?: string; text?: string; children?: unknown[] }
|
||||
|
||||
if (typeof record.text === 'string') {
|
||||
return { text: record.text }
|
||||
}
|
||||
|
||||
if (isSignFieldElement(node)) {
|
||||
return { element: SIGN_FIELD_TYPE, fieldId: record.fieldId, label: record.fieldLabel }
|
||||
}
|
||||
|
||||
return { type: record.type, children: walk(record.children ?? []) }
|
||||
})
|
||||
|
||||
return walk(editor.children as unknown[])
|
||||
}
|
||||
|
||||
/** 胶囊在 DOM 里的样子：标签必须靠 CSS 展示，DOM 里不能有可落光标的文字 */
|
||||
function chipInfo() {
|
||||
const chip = document.querySelector<HTMLElement>(`.${SIGN_FIELD_NODE_CLASS}`)
|
||||
|
||||
if (!chip) {
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
tagName: chip.tagName,
|
||||
className: chip.className,
|
||||
hasChipClass: chip.classList.contains(SIGN_FIELD_CHIP_CLASS),
|
||||
dataSignLabel: chip.getAttribute('data-sign-label'),
|
||||
dataSignTag: chip.getAttribute('data-sign-tag'),
|
||||
contentEditableAttr: chip.getAttribute('contenteditable'),
|
||||
// 文本节点数量是这条诉求的关键：有文字节点，原生光标就可能落进去
|
||||
textNodeCount: Array.from(chip.childNodes).filter((n) => n.nodeType === Node.TEXT_NODE).length,
|
||||
textContent: chip.textContent,
|
||||
childElementCount: chip.childElementCount,
|
||||
beforeContent: getComputedStyle(chip, '::before').content,
|
||||
afterContent: getComputedStyle(chip, '::after').content,
|
||||
backgroundColor: getComputedStyle(chip).backgroundColor,
|
||||
rect: plain(chip.getBoundingClientRect()),
|
||||
}
|
||||
}
|
||||
|
||||
const probe = {
|
||||
/**
|
||||
* 只灌正文，不碰光标。
|
||||
* 用来区分"setHtml 本身有没有问题"与"setHtml 之后立刻 focus 有没有问题"。
|
||||
*/
|
||||
async setHtmlOnly(html: string) {
|
||||
editor.setHtml(html)
|
||||
|
||||
return probe.snapshot()
|
||||
},
|
||||
|
||||
/** 变体：先清选区再灌正文（用来证明"清选区"并不能规避 setHtml 的竞态） */
|
||||
async deselectThenSetHtml(html: string) {
|
||||
SlateTransforms.deselect(editor)
|
||||
editor.setHtml(html)
|
||||
|
||||
return probe.snapshot()
|
||||
},
|
||||
|
||||
/**
|
||||
* 复位成指定正文：**销毁重建编辑器**。
|
||||
*
|
||||
* ⚠️ 不能用 setHtml 复位。实测（见 [0] 节的对照实验）wangEditor 的 setHtml 在
|
||||
* "编辑器产生过选区"之后是不可靠的：
|
||||
* ① 异步抛 `Cannot resolve a DOM node from Slate node`；
|
||||
* ② 有时直接同步抛 `Cannot find a descendant at path`。
|
||||
* 读源码可知原因：with-content.ts 的 setHtml 内部会 `e.focus()`，
|
||||
* 而 with-dom.ts 的 `e.focus()` 会把**缓存的上次选区**（EDITOR_TO_SELECTION）装回去，
|
||||
* 于是 `e.clear()` 之后、`Transforms.insertFragment` 之前，选区已经指向不存在的路径。
|
||||
* 事先 `editor.selection = null` 或 `Transforms.deselect` 都没用——focus() 会把它装回来。
|
||||
*
|
||||
* 生产里只有「导入 docx」会走到这条路径，那是一个既有的独立问题（已在 WordEditorDialog
|
||||
* 对应位置留了说明）。探针需要频繁复位正文，所以改成重建实例——这也更贴近生产的真实形态
|
||||
* （WordEditorDialog 整块内容在 v-if="visible" 里，弹窗每次打开都是新编辑器）。
|
||||
*/
|
||||
async reset(html: string) {
|
||||
editor.destroy()
|
||||
editor = createProbeEditor(html)
|
||||
await settle()
|
||||
|
||||
return probe.snapshot()
|
||||
},
|
||||
|
||||
async snapshot() {
|
||||
await settle()
|
||||
|
||||
return {
|
||||
html: editor.getHtml(),
|
||||
text: editor.getText(),
|
||||
selection: plain(editor.selection),
|
||||
fieldPath: findFieldPath(),
|
||||
fieldCount: countFields(),
|
||||
outline: outline(),
|
||||
chip: chipInfo(),
|
||||
// 排查用：渲染失败时只有编辑器自己的 DOM 能说明它到底渲染成了什么
|
||||
editorDom: document.getElementById('editor')?.innerHTML ?? null,
|
||||
result: document.getElementById('result')?.textContent,
|
||||
}
|
||||
},
|
||||
|
||||
/** 与 EditorWangPane.insertField 同一套顺序：focus → 若已选中占位符则右移 → insertNode */
|
||||
async insertField(patch?: Partial<SigningFieldDef>) {
|
||||
const def: SigningFieldDef = { ...FIELD, ...(patch ?? {}) }
|
||||
|
||||
editor.focus(true)
|
||||
|
||||
if (DomEditor.getSelectedNodeByType(editor, SIGN_FIELD_TYPE)) {
|
||||
editor.move(1)
|
||||
}
|
||||
|
||||
editor.insertNode(createSignFieldNode(def) as never)
|
||||
|
||||
return probe.snapshot()
|
||||
},
|
||||
|
||||
/** 光标放到占位符之后（退格即应删掉整个占位符） */
|
||||
async caretAfterField() {
|
||||
const path = findFieldPath()
|
||||
|
||||
if (!path) {
|
||||
return { ok: false, reason: 'NO_FIELD' }
|
||||
}
|
||||
|
||||
const next = SlateEditor.next(editor, { at: path })
|
||||
|
||||
if (next) {
|
||||
editor.select({ path: next[1], offset: 0 })
|
||||
await settle()
|
||||
return { ok: true, how: 'next', selection: plain(editor.selection) }
|
||||
}
|
||||
|
||||
// 占位符是最后一个子节点：光标落到父节点末尾
|
||||
const parentPath = path.slice(0, -1)
|
||||
const parent = SlateEditor.node(editor, parentPath)[0] as { children: unknown[] }
|
||||
editor.select({ path: parentPath, offset: parent.children.length })
|
||||
await settle()
|
||||
|
||||
return { ok: true, how: 'parentEnd', selection: plain(editor.selection) }
|
||||
},
|
||||
|
||||
/** 光标放到占位符之前（用于对照：退格应删掉前一个字符，不动占位符） */
|
||||
async caretBeforeField() {
|
||||
const path = findFieldPath()
|
||||
|
||||
if (!path) {
|
||||
return { ok: false, reason: 'NO_FIELD' }
|
||||
}
|
||||
|
||||
const prev = SlateEditor.previous(editor, { at: path })
|
||||
|
||||
if (prev) {
|
||||
const text = (prev[0] as { text?: string }).text ?? ''
|
||||
editor.select({ path: prev[1], offset: text.length })
|
||||
await settle()
|
||||
return { ok: true, how: 'previous', selection: plain(editor.selection) }
|
||||
}
|
||||
|
||||
editor.select({ path: path.slice(0, -1), offset: 0 })
|
||||
await settle()
|
||||
|
||||
return { ok: true, how: 'parentStart', selection: plain(editor.selection) }
|
||||
},
|
||||
|
||||
/**
|
||||
* 光标放到文末（纯文本对照用）。
|
||||
* 直接算文末的点再 select，不依赖 focus(true) 在"已有选区"时的行为——
|
||||
* 上一节点过胶囊之后选区还停在那个 void 节点上，focus 不一定会把它挪走。
|
||||
*/
|
||||
async caretToEnd() {
|
||||
editor.select(SlateEditor.end(editor, []))
|
||||
await settle()
|
||||
|
||||
return { ok: true, selection: plain(editor.selection) }
|
||||
},
|
||||
|
||||
/** 当前 DOM 里是否已渲染出胶囊 */
|
||||
chipExists() {
|
||||
return Boolean(document.querySelector(`.${SIGN_FIELD_NODE_CLASS}`))
|
||||
},
|
||||
|
||||
/**
|
||||
* 复刻 EditorWangPane.handleFieldClick 的定位路径：
|
||||
* 点胶囊 → closest('.ms-sign-chip') → DomEditor.toSlateNode → 判类型 → 取路径。
|
||||
* 这一步的风险是 toSlateNode 能不能从 ::before 展示的胶囊解回 Slate 节点。
|
||||
*/
|
||||
clickChip() {
|
||||
const chip = document.querySelector<HTMLElement>(`.${SIGN_FIELD_CHIP_CLASS}`)
|
||||
|
||||
if (!chip) {
|
||||
return { ok: false, reason: 'NO_CHIP' }
|
||||
}
|
||||
|
||||
chip.click()
|
||||
|
||||
return probe.resolveChip()
|
||||
},
|
||||
|
||||
/** 不走点击，直接按 handleFieldClick 的逻辑解一遍（排除 click 事件本身的干扰） */
|
||||
async resolveChip() {
|
||||
await settle()
|
||||
|
||||
const chip = document.querySelector<HTMLElement>(`.${SIGN_FIELD_CHIP_CLASS}`)
|
||||
|
||||
if (!chip) {
|
||||
return { ok: false, reason: 'NO_CHIP' }
|
||||
}
|
||||
|
||||
try {
|
||||
const node = DomEditor.toSlateNode(editor, chip) as unknown
|
||||
|
||||
if (!isSignFieldElement(node)) {
|
||||
return { ok: false, reason: 'NOT_SIGN_FIELD', node: plain(node) }
|
||||
}
|
||||
|
||||
const path = DomEditor.findPath(editor, node as never)
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
field: readFieldFromSignFieldNode(node),
|
||||
path: plain(path),
|
||||
isSelectedBefore: DomEditor.isNodeSelected(editor, node as never),
|
||||
}
|
||||
} catch (error) {
|
||||
return { ok: false, reason: 'THREW', message: String(error) }
|
||||
}
|
||||
},
|
||||
|
||||
/** 选中占位符节点，供"选中态样式"断言使用 */
|
||||
async selectField() {
|
||||
const path = findFieldPath()
|
||||
|
||||
if (!path) {
|
||||
return { ok: false, reason: 'NO_FIELD' }
|
||||
}
|
||||
|
||||
editor.focus()
|
||||
editor.select(path)
|
||||
await settle()
|
||||
|
||||
return { ok: true, selection: plain(editor.selection), chip: chipInfo() }
|
||||
},
|
||||
|
||||
/** 未选中时的胶囊样式，作为选中态的对照基线 */
|
||||
async unselectedChip() {
|
||||
await settle()
|
||||
|
||||
return chipInfo()
|
||||
},
|
||||
|
||||
/** 当前编辑区是否持有焦点（CDP 发真实按键前必须为 true） */
|
||||
focusState() {
|
||||
const editable = document.querySelector('[contenteditable="true"]')
|
||||
|
||||
return {
|
||||
activeElementIsEditable: document.activeElement === editable,
|
||||
editableFound: Boolean(editable),
|
||||
}
|
||||
},
|
||||
|
||||
/** 供 CDP 读回的原始编辑器引用（排查用）。getter：reset 会重建实例 */
|
||||
get editor() {
|
||||
return editor
|
||||
},
|
||||
DomEditor,
|
||||
SlateEditor,
|
||||
/** 面板改字段：就地改模型（EditorWangPane.updateField 的底层） */
|
||||
async updateField(fieldId: string, patch: Record<string, unknown>) {
|
||||
const count = updateSignFieldNodes(editor, fieldId, patch as never)
|
||||
|
||||
return { count, snapshot: await probe.snapshot() }
|
||||
},
|
||||
|
||||
/** 面板删除字段：就地改模型（EditorWangPane.removeField 的底层） */
|
||||
async removeField(fieldId: string) {
|
||||
const count = removeSignFieldNodes(editor, fieldId)
|
||||
|
||||
return { count, snapshot: await probe.snapshot() }
|
||||
},
|
||||
|
||||
/**
|
||||
* 人为把选区弄脏（指向文档里不存在的路径）后强制重渲染。
|
||||
*
|
||||
* 复现的是这条链路：整篇替换正文时 setHtml 不清旧选区 → 选区越界 →
|
||||
* renderElem 里 DomEditor.isNodeSelected 拿脏选区跑 nodes() 抛
|
||||
* `Cannot find a descendant at path` → 整个占位符渲染失败。
|
||||
* 渲染函数不该因为选区脏了就崩，所以 isSelected 包了 try/catch。
|
||||
*/
|
||||
async renderWithDirtySelection() {
|
||||
editor.selection = {
|
||||
anchor: { path: [0, 99, 0], offset: 0 },
|
||||
focus: { path: [0, 99, 0], offset: 0 },
|
||||
} as never
|
||||
|
||||
// 改一个属性强制重渲染（渲染钩子会去读 editor.selection）
|
||||
updateSignFieldNodes(editor, 'patient', { required: false })
|
||||
await settle()
|
||||
|
||||
return { chip: chipInfo(), selection: plain(editor.selection), fieldCount: countFields() }
|
||||
},
|
||||
}
|
||||
|
||||
Object.assign(window, { __probe: probe })
|
||||
|
||||
document.getElementById('result')!.textContent = 'READY'
|
||||
|
||||
export {}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
/**
|
||||
* 只给 .probe-field-node 用的最小构建配置。
|
||||
* 不引 vue 插件（探针是纯 TS），但要复用应用的 @ 别名，
|
||||
* 否则 signing-field-node.ts 里的 `@/api/workbench/types` 解析不了。
|
||||
*/
|
||||
export default defineConfig({
|
||||
root: fileURLToPath(new URL('.', import.meta.url)),
|
||||
base: './',
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
// 不自动清空：清空会触发沙箱对删除操作的拦截，而且产物本来就带 hash、覆盖即可
|
||||
emptyOutDir: false,
|
||||
rollupOptions: {
|
||||
input: fileURLToPath(new URL('./index.html', import.meta.url)),
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('../src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -21,6 +21,7 @@
|
||||
"jspdf": "^4.2.1",
|
||||
"mammoth": "^1.12.2",
|
||||
"pinia": "^4.0.3",
|
||||
"snabbdom": "^3.6.4",
|
||||
"vue": "^3.5.41",
|
||||
"vue-router": "^5.2.0"
|
||||
},
|
||||
|
||||
@@ -140,6 +140,9 @@ export function buildSignatureFieldsPayload(contentHtml: string): unknown[] {
|
||||
kind: field.kind,
|
||||
required: field.required,
|
||||
options: field.options,
|
||||
// 单/多选必须一起上报：后端靠它渲染签署控件与做取值校验，
|
||||
// 缺了这个字段就只能按 kind 猜，多选组会被当成单个勾选框
|
||||
...(field.multi === undefined ? {} : { multi: field.multi }),
|
||||
...(field.risk ? { risk: field.risk } : {}),
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -189,11 +189,29 @@ export interface SigningFieldDef {
|
||||
required: boolean
|
||||
/** choice / checkbox 的可选项 */
|
||||
options: string[]
|
||||
/**
|
||||
* 有选项时是否允许多选（渲染成一组 checkbox 而不是互斥单选）。
|
||||
*
|
||||
* 必须显式声明，不能靠"这一块里有几个方框"去猜：
|
||||
* 「□高血压 □糖尿病 □冠心病」是三项可同时成立的多选，
|
||||
* 猜成互斥单选会让科室只能勾一个，且当场看不出错。
|
||||
*
|
||||
* 缺省口径：choice 默认单选；checkbox 带选项时默认多选（勾选本来就是"可勾多个"），
|
||||
* 不带选项时是单个布尔勾选（options 为空，multi 无意义）。
|
||||
*/
|
||||
multi?: boolean
|
||||
/** 取值等于该字符串时视为异常项（如风险筛查选了"是"） */
|
||||
risk?: string
|
||||
}
|
||||
|
||||
export type SigningFieldValue = string | boolean
|
||||
/**
|
||||
* 填写项取值。
|
||||
* - text / date：字符串
|
||||
* - choice：字符串（选中的那一项）
|
||||
* - checkbox：布尔（单个勾选）；带选项且多选时是字符串数组
|
||||
* - signature：签名图的 dataURL
|
||||
*/
|
||||
export type SigningFieldValue = string | boolean | string[]
|
||||
|
||||
/** 填写项取值，key 为 SigningFieldDef.id。 */
|
||||
export type SigningAnswers = Record<string, SigningFieldValue>
|
||||
|
||||
@@ -15,11 +15,19 @@
|
||||
* 此处仅用于前端闭环验证。
|
||||
*/
|
||||
|
||||
import type { SigningAnswers, SigningFieldDef, SigningFieldKind } from '@/api/workbench/types'
|
||||
import type {
|
||||
SigningAnswers,
|
||||
SigningFieldDef,
|
||||
SigningFieldKind,
|
||||
SigningFieldValue,
|
||||
} from '@/api/workbench/types'
|
||||
|
||||
import {
|
||||
collectStructuredFieldIds,
|
||||
FIELD_ELEMENT_SELECTOR,
|
||||
FIELD_TOKEN_OPEN,
|
||||
PRIMARY_SIGNATURE_FIELD_ID,
|
||||
readFieldFromElement,
|
||||
resolveAnswersFromSystem,
|
||||
scanFieldTokens,
|
||||
SIGNING_DOCUMENT_HEADER,
|
||||
@@ -44,6 +52,11 @@ const FIELD_KIND_ATTR = 'data-sign-kind'
|
||||
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]。
|
||||
*/
|
||||
const FIELD_MULTI_ATTR = 'data-sign-multi'
|
||||
/** 需要宿主接管交互的填写项（目前只有「点击采集签名」），值是动作名 */
|
||||
const FIELD_ACTION_ATTR = 'data-sign-action'
|
||||
/** 签名位的采集动作名 */
|
||||
@@ -101,6 +114,71 @@ export interface SigningSignatureRequest {
|
||||
label: string
|
||||
}
|
||||
|
||||
/** 取值统一成「已选中的选项」数组：多选是数组，单选/文本是单个字符串。 */
|
||||
function toSelectedValues(value: SigningFieldValue | undefined): string[] {
|
||||
if (Array.isArray(value)) {
|
||||
return value
|
||||
}
|
||||
|
||||
return typeof value === 'string' && value ? [value] : []
|
||||
}
|
||||
|
||||
/** 取值统一成可放进输入框的文本。数组（多选）没有单一文本表示，返回空串。 */
|
||||
function toTextValue(value: SigningFieldValue | undefined): string {
|
||||
if (typeof value === 'string') {
|
||||
return value
|
||||
}
|
||||
|
||||
return value === true ? '是' : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 取值是否命中高危值。多选取值里勾中了高危项也算命中。
|
||||
*
|
||||
* 渲染侧的「异常项」角标与进度统计的 abnormal 清单共用这一条判据——
|
||||
* 两边各写一份迟早会漂移，出现「界面标了异常、清单里没有」的矛盾。
|
||||
*/
|
||||
function hitsRisk(value: SigningFieldValue | undefined, risk: string | undefined): boolean {
|
||||
if (!risk || value === undefined) {
|
||||
return false
|
||||
}
|
||||
|
||||
return Array.isArray(value) ? value.includes(risk) : value === risk
|
||||
}
|
||||
|
||||
/** 取值是否为空。多选取值只有空数组才算没填。 */
|
||||
function isEmptyFieldValue(value: SigningFieldValue | undefined): boolean {
|
||||
if (value === undefined || value === '' || value === false) {
|
||||
return true
|
||||
}
|
||||
|
||||
return Array.isArray(value) && value.length === 0
|
||||
}
|
||||
|
||||
/**
|
||||
* 这个填写项是否渲染成「一组选项」。
|
||||
*
|
||||
* 声明了选项的 choice / checkbox 都是一组控件；没给选项的（结构化占位符只写了
|
||||
* kind=choice 却没写 data-options）会退化成文本框，否则科室拿到的是一个点不动的空控件。
|
||||
*/
|
||||
function isOptionGroupField(field: SigningFieldDef): boolean {
|
||||
return field.options.length > 0 && (field.kind === 'choice' || field.kind === 'checkbox')
|
||||
}
|
||||
|
||||
/**
|
||||
* 一组选项是单选还是多选。
|
||||
*
|
||||
* 由模板显式声明（data-multi），缺省口径与 SigningFieldDef.multi 一致：
|
||||
* choice 默认单选，checkbox 带选项时默认多选。
|
||||
*
|
||||
* 这条声明替代了原先的启发式（convertInlineOptions 里按"这一段有几个方框"猜）——
|
||||
* 那个启发式让"同一段里两个方框"只能互斥，科室没法声明多选组。
|
||||
* 手打方框的存量文书仍走启发式，见 convertInlineOptions。
|
||||
*/
|
||||
function isMultiOptionGroup(field: SigningFieldDef): boolean {
|
||||
return isOptionGroupField(field) && (field.multi ?? field.kind === 'checkbox')
|
||||
}
|
||||
|
||||
function buildFieldWidget(
|
||||
doc: Document,
|
||||
field: SigningFieldDef,
|
||||
@@ -109,8 +187,8 @@ function buildFieldWidget(
|
||||
signatureActionable: boolean,
|
||||
): HTMLElement {
|
||||
const value = answers[field.id]
|
||||
const abnormal =
|
||||
Boolean(field.risk) && typeof value === 'string' && value === (field.risk as string)
|
||||
const abnormal = hitsRisk(value, field.risk)
|
||||
const multi = isMultiOptionGroup(field)
|
||||
|
||||
const host = doc.createElement('span')
|
||||
host.className = `sign-field sign-field--${field.kind}${abnormal ? ' sign-field--abnormal' : ''}`
|
||||
@@ -119,6 +197,11 @@ function buildFieldWidget(
|
||||
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')
|
||||
}
|
||||
|
||||
if (field.risk) {
|
||||
host.setAttribute(FIELD_RISK_ATTR, field.risk)
|
||||
}
|
||||
@@ -150,7 +233,7 @@ function buildFieldWidget(
|
||||
|
||||
const control = doc.createElement('span')
|
||||
control.className = 'sign-field__control'
|
||||
control.appendChild(buildFieldControl(doc, field, value, interactive, signaturePending))
|
||||
control.appendChild(buildFieldControl(doc, field, value, interactive, signaturePending, multi))
|
||||
host.appendChild(control)
|
||||
|
||||
if (abnormal) {
|
||||
@@ -163,14 +246,56 @@ function buildFieldWidget(
|
||||
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: SigningAnswers[string],
|
||||
value: SigningFieldValue | undefined,
|
||||
interactive: boolean,
|
||||
signaturePending: boolean,
|
||||
multi: boolean,
|
||||
): Node {
|
||||
const textValue = typeof value === 'string' ? value : value ? '是' : ''
|
||||
const textValue = toTextValue(value)
|
||||
|
||||
if (field.kind === 'signature') {
|
||||
if (textValue) {
|
||||
@@ -189,36 +314,10 @@ function buildFieldControl(
|
||||
return empty
|
||||
}
|
||||
|
||||
// 有选项才渲染单选组；没有选项（结构化占位符只声明了 kind=choice 却没给 options）
|
||||
// 就退化成文本框，否则科室拿到的是一个点不动的空控件
|
||||
if (field.kind === 'choice' && field.options.length) {
|
||||
const group = doc.createElement('span')
|
||||
group.className = 'sign-field__choices'
|
||||
|
||||
field.options.forEach((option) => {
|
||||
const wrapper = doc.createElement('label')
|
||||
wrapper.className = 'sign-doc-option'
|
||||
|
||||
const input = doc.createElement('input')
|
||||
input.className = 'sign-field__radio'
|
||||
input.type = 'radio'
|
||||
input.name = `sign-field-${field.id}`
|
||||
input.value = option
|
||||
input.disabled = !interactive
|
||||
|
||||
// 必须同时落成 attribute：innerHTML 只序列化 HTML 属性，
|
||||
// 只设 .checked 这个 property 会在生成 HTML 时被丢掉
|
||||
if (textValue === option) {
|
||||
input.checked = true
|
||||
input.setAttribute('checked', '')
|
||||
}
|
||||
|
||||
wrapper.appendChild(input)
|
||||
wrapper.appendChild(doc.createTextNode(option))
|
||||
group.appendChild(wrapper)
|
||||
})
|
||||
|
||||
return group
|
||||
// 声明了选项就渲染成一组控件；没给选项的 choice 会落到下面的文本框分支，
|
||||
// 否则科室拿到的是一个点不动的空控件
|
||||
if (isOptionGroupField(field)) {
|
||||
return buildOptionGroup(doc, field, value, interactive, multi)
|
||||
}
|
||||
|
||||
if (field.kind === 'checkbox') {
|
||||
@@ -264,12 +363,17 @@ function buildFieldControl(
|
||||
* 自定义文本项靠"同名占位符第几次出现"编号，这里数出的序号必须和
|
||||
* 填写项统计（collectFieldDefs）数出来的完全一致，否则同一处内容
|
||||
* 在面板里是一个字段键、落到 DOM 上是另一个，取值就悄悄对不上了。
|
||||
*
|
||||
* claimed 是结构化占位符已占用的键，由调用方在**渲染结构化占位符之前**取好传进来：
|
||||
* 结构化占位符渲染完就变成 `data-sign-field` 控件，那时已经认不出它的字段键了。
|
||||
* 少了这一步，混用两种载体的正文里，纯文本那一遍会数出与结构化元素相同的键。
|
||||
*/
|
||||
function renderTokenFields(
|
||||
root: Element,
|
||||
answers: SigningAnswers,
|
||||
interactive: boolean,
|
||||
signatureActionable: boolean,
|
||||
claimed: Set<string>,
|
||||
) {
|
||||
const doc = root.ownerDocument
|
||||
const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT)
|
||||
@@ -290,7 +394,7 @@ function renderTokenFields(
|
||||
const fragment = doc.createDocumentFragment()
|
||||
let cursor = 0
|
||||
|
||||
scanFieldTokens(text, counters).forEach(({ start, end, field }) => {
|
||||
scanFieldTokens(text, counters, claimed).forEach(({ start, end, field }) => {
|
||||
if (start > cursor) {
|
||||
fragment.appendChild(doc.createTextNode(text.slice(cursor, start)))
|
||||
}
|
||||
@@ -309,9 +413,12 @@ function renderTokenFields(
|
||||
}
|
||||
|
||||
/**
|
||||
* 结构化占位符渲染：兼容 <span data-field="..."> 写法。
|
||||
* 该写法是目标格式（字段语义显式、不依赖中文标签），
|
||||
* 供后端模板或后续换编辑器后生产的内容使用。
|
||||
* 结构化占位符渲染：把 `<span data-field="...">` 就地换成填写项控件。
|
||||
*
|
||||
* 属性解析交给 utils/signing-fields 的 readFieldFromElement，
|
||||
* 不在这里另写一份：编辑器写入、填写项统计、签署渲染三处必须共用同一套
|
||||
* 属性名与缺省口径（尤其 data-multi 这种"缺失即按类型取缺省"的字段），
|
||||
* 各自解析迟早会出现"编辑器里是多选、签署时变成单选"的静默失配。
|
||||
*/
|
||||
function renderStructuredFields(
|
||||
root: Element,
|
||||
@@ -321,23 +428,13 @@ function renderStructuredFields(
|
||||
) {
|
||||
const doc = root.ownerDocument
|
||||
|
||||
root.querySelectorAll('span[data-field]').forEach((element) => {
|
||||
const id = element.getAttribute('data-field') ?? ''
|
||||
const label = element.getAttribute('data-label') ?? id
|
||||
root.querySelectorAll(FIELD_ELEMENT_SELECTOR).forEach((element) => {
|
||||
const field = readFieldFromElement(element)
|
||||
|
||||
if (!id) {
|
||||
if (!field) {
|
||||
return
|
||||
}
|
||||
|
||||
const field: SigningFieldDef = {
|
||||
id,
|
||||
label,
|
||||
kind: (element.getAttribute('data-kind') ?? 'text') as SigningFieldKind,
|
||||
required: element.getAttribute('data-required') === 'true',
|
||||
options: (element.getAttribute('data-options') ?? '').split('|').filter(Boolean),
|
||||
risk: element.getAttribute('data-risk') ?? undefined,
|
||||
}
|
||||
|
||||
element.replaceWith(buildFieldWidget(doc, field, answers, interactive, signatureActionable))
|
||||
})
|
||||
}
|
||||
@@ -484,6 +581,9 @@ function replaceOptionMarkers(
|
||||
* 行内选项识别（存量兼容）：正文里手打的方框（□否 □是、□同意 □不同意）。
|
||||
* 同一段/同一单元格里出现两个及以上方框时按「二选一」处理成互斥单选；
|
||||
* 只有一个方框则保持多选语义，避免把「□高血压」这类单项确认误判成互斥组。
|
||||
*
|
||||
* 占位符写法不走这里：`<span data-field data-options data-multi>` 的单/多选是
|
||||
* 模板里显式声明的（见 isMultiOptionGroup），不需要靠数方框个数去猜。
|
||||
*/
|
||||
function convertInlineOptions(root: Element, interactive: boolean, selected: Set<string>) {
|
||||
const groups = new Map<Element, Text[]>()
|
||||
@@ -600,8 +700,12 @@ export function buildSigningDocumentHtml(
|
||||
|
||||
const signatureActionable = interactive && Boolean(options.signatureActionable)
|
||||
|
||||
// 占用集合必须在渲染之前取：renderStructuredFields 一跑，[data-field] 就变成
|
||||
// data-sign-field 控件了，之后再也认不出它们占用了哪些字段键
|
||||
const claimed = collectStructuredFieldIds(contentHtml)
|
||||
|
||||
renderStructuredFields(root, answers, interactive, signatureActionable)
|
||||
renderTokenFields(root, answers, interactive, signatureActionable)
|
||||
renderTokenFields(root, answers, interactive, signatureActionable, claimed)
|
||||
|
||||
const selected = new Set(data.selectedItems ?? [])
|
||||
convertCheckboxes(root, interactive, selected)
|
||||
@@ -634,6 +738,16 @@ 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<HTMLInputElement>('input[type="checkbox"]:checked'),
|
||||
).map((input) => input.value)
|
||||
return
|
||||
}
|
||||
|
||||
if (kind === 'choice') {
|
||||
const checked = host.querySelector<HTMLInputElement>('input[type="radio"]:checked')
|
||||
answers[id] = checked?.value ?? ''
|
||||
@@ -652,6 +766,48 @@ export function readAnswersFromRoot(root: HTMLElement): SigningAnswers {
|
||||
return answers
|
||||
}
|
||||
|
||||
/**
|
||||
* 把一个已固化的取值写回填写项的控件（签署端重新打开文书时还原状态）。
|
||||
*
|
||||
* 与 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 : [])
|
||||
|
||||
host.querySelectorAll<HTMLInputElement>('input[type="checkbox"]').forEach((box) => {
|
||||
box.checked = picked.has(box.value)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (typeof value === 'boolean') {
|
||||
const checkbox = host.querySelector<HTMLInputElement>('input[type="checkbox"]')
|
||||
|
||||
if (checkbox) {
|
||||
checkbox.checked = value
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const text = Array.isArray(value) ? '' : value
|
||||
const input = host.querySelector<HTMLInputElement>(
|
||||
'input:not([type="radio"]):not([type="checkbox"])',
|
||||
)
|
||||
|
||||
if (input) {
|
||||
input.value = text
|
||||
}
|
||||
|
||||
host.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((radio) => {
|
||||
radio.checked = radio.value === text
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 把签名图写进指定签名位，并摘掉它的采集入口。返回是否真的发生了改动。
|
||||
*
|
||||
@@ -700,6 +856,9 @@ export function applySignatureToRoot(root: HTMLElement, fieldId: string, dataUrl
|
||||
*
|
||||
* 按字段键去重：同一个字段在文书里可能出现多次（页眉的患者姓名/就诊号与正文重复是常态），
|
||||
* 它们共用一份取值，只能算一个填写项，否则分母会被重复计数撑大。
|
||||
*
|
||||
* 「已填」的判据见 isEmptyFieldValue：多选取值只有空数组才算没填——
|
||||
* 用 `value === ''` 之类的朴素判据会把空数组当成已填，必填校验就漏了。
|
||||
*/
|
||||
export function describeFieldProgress(
|
||||
root: HTMLElement,
|
||||
@@ -725,7 +884,7 @@ export function describeFieldProgress(
|
||||
seen.add(id)
|
||||
|
||||
const value = answers[id]
|
||||
const empty = value === undefined || value === '' || value === false
|
||||
const empty = isEmptyFieldValue(value)
|
||||
const risk = host.getAttribute(FIELD_RISK_ATTR)
|
||||
const isSignature = host.getAttribute(FIELD_KIND_ATTR) === 'signature'
|
||||
|
||||
@@ -750,7 +909,7 @@ export function describeFieldProgress(
|
||||
progress.pendingSignatures.push(label)
|
||||
}
|
||||
|
||||
if (risk && value === risk) {
|
||||
if (hitsRisk(value, risk ?? undefined)) {
|
||||
progress.abnormal.push(label)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -0,0 +1,348 @@
|
||||
/**
|
||||
* 编辑器里的「签署占位符」元素节点。
|
||||
*
|
||||
* 为什么要有这个模块：占位符原本是纯文本 ｛患者姓名｝，在编辑器里就是一段文字——
|
||||
* 删掉一个要按五六次退格，退格一次只吃掉一个字符，稍微快点就会把相邻正文也带走；
|
||||
* 而且纯文本没法承载「有哪些选项」「能不能多选」这类结构化信息。
|
||||
*
|
||||
* 现在把它做成一个**原子节点**：点一下即整块选中，一次退格整体删除，
|
||||
* 内部不落任何可编辑的文字。
|
||||
*
|
||||
* 关键实现点（都是照着 wangEditor 内置的 image 模块抄的，那是它自己的 void 元素）：
|
||||
*
|
||||
* ① **isVoid + isInline 都要覆写，且必须走 editorPlugin**。
|
||||
* 只有 isVoid 会变成块级 <div>，把整行撑断；两个都覆写才得到内联的 <span>。
|
||||
* 覆写方式与 image 模块一致：保留原方法再或上自己的类型判断。
|
||||
*
|
||||
* ② **renderElem 拿到的 children 是 null**。void 元素渲染时 wangEditor 不传子节点
|
||||
* （见其内部 renderElement：`children = isVoid ? null : node.children.map(...)`），
|
||||
* 所以标签要自己渲染，不能指望 children。
|
||||
*
|
||||
* ③ **标签文字走 CSS ::before，不落成 DOM 文本节点**。
|
||||
* void 元素的 DOM 结构是 `wrapper > [renderElem 结果, data-slate-spacer]`，
|
||||
* spacer 里才有 wangEditor 用来算光标位置的 data-slate-zero-width 叶子。
|
||||
* 如果我们的胶囊里再放一段真实文字，浏览器原生光标有可能落进那段文字里，
|
||||
* 一次退格就只删掉一个字符——正好破坏「一次删掉」这个诉求。
|
||||
* 用 ::before { content: attr(data-sign-label) } 展示，DOM 里就没有可落点文字。
|
||||
*
|
||||
* ④ **存下来的正文仍然是干净的 `<span data-field>`**，与 utils/signing-fields 的
|
||||
* 结构化契约、以及签署渲染管线（utils/signing-document 的 renderStructuredFields）
|
||||
* 完全一致，签署侧一行都不用改。编辑器专属的标记只活在解析期，见 ⑤。
|
||||
*
|
||||
* ⑤ **`<span>` 必须带 `data-w-e-type` 才会被当成元素解析**。
|
||||
* wangEditor 的解析分派里有一段特判：
|
||||
* if (tagName === 'span') {
|
||||
* if ($elem.attr('data-w-e-type')) return parseCommonElemHtml(...)
|
||||
* else return parseTextElemHtml(...) // 退化成行内文本
|
||||
* }
|
||||
* 只有 `data-w-e-type` 存在时才会去查 PARSE_ELEM_HTML_CONF 里的选择器。
|
||||
* 所以「让 span 被认成 sign-field 元素」这一步必须补。补在 preParseHtml 而不是
|
||||
* 直接写进正文，是为了让 contentHtml 保持干净：preParseHtml 只在解析前跑一遍，
|
||||
* 给它加上 `data-w-e-type` / `data-w-e-is-void` 两个 wangEditor 内部标记，
|
||||
* 导出时（elemToHtml）不带上它们。若把这两个标记写进正文，
|
||||
* 编辑器的内部实现细节就渗进了模板内容，还会连带改变模板哈希。
|
||||
* preParseHtml 是解析入口 parseElemHtml 的第一步（`PRE_PARSE_HTML_CONF_LIST.forEach`），
|
||||
* setHtml 与粘贴走的都是它，所以两条路径都能正确还原。
|
||||
*
|
||||
* ⑥ 显式引入 snabbdom 的 h：registerRenderElem 必须返回 vnode，而 vnode 只能由
|
||||
* snabbdom 构造（wangEditor 未导出 h）。这条依赖已写进 package.json，
|
||||
* 版本与其内部使用的保持一致，避免打包出两份 snabbdom 实例。
|
||||
*/
|
||||
|
||||
import { Boot, DomEditor, SlateEditor, SlateTransforms } from '@wangeditor/editor'
|
||||
import type { IDomEditor } from '@wangeditor/editor'
|
||||
import { h } from 'snabbdom'
|
||||
import type { VNode } from 'snabbdom'
|
||||
|
||||
import type { SigningFieldDef, SigningFieldKind } from '@/api/workbench/types'
|
||||
|
||||
import {
|
||||
buildFieldSpanHtml,
|
||||
FIELD_ELEMENT_SELECTOR,
|
||||
readFieldFromElement,
|
||||
SIGNING_FIELD_KIND_LABELS,
|
||||
} from './signing-fields'
|
||||
|
||||
/** Slate 元素类型名。改这个值要同步下面两处选择器。 */
|
||||
export const SIGN_FIELD_TYPE = 'sign-field'
|
||||
|
||||
/**
|
||||
* 解析 `<span data-field>` 时用的选择器。
|
||||
* 注意不是 FIELD_ELEMENT_SELECTOR —— 解析阶段这个 span 已经被 preParseHtml
|
||||
* 打上了 data-w-e-type，见文件头 ⑤。
|
||||
*/
|
||||
export const SIGN_FIELD_PARSE_SELECTOR = `span[data-w-e-type="${SIGN_FIELD_TYPE}"]`
|
||||
|
||||
/** wangEditor 用来判断「这个 span 是元素而不是行内文本」的标记属性。 */
|
||||
const WANGEDITOR_TYPE_ATTR = 'data-w-e-type'
|
||||
/** wangEditor 用来跳过「从内部文字生成 children」的标记属性。 */
|
||||
const WANGEDITOR_VOID_ATTR = 'data-w-e-is-void'
|
||||
|
||||
/** 编辑器里胶囊的类名，样式见 EditorWangPane。 */
|
||||
export const SIGN_FIELD_CHIP_CLASS = 'ms-sign-chip'
|
||||
/** 原子占位符额外的类名：与 decorate 出来的旧式胶囊共用底色，但只有它有 ::before 标签与选中态。 */
|
||||
export const SIGN_FIELD_NODE_CLASS = 'ms-sign-node'
|
||||
|
||||
/**
|
||||
* 占位符在 Slate 模型里的样子。
|
||||
*
|
||||
* 字段信息全部挂在元素自己身上（而不是像纯文本那样靠「第几次出现」推断位置），
|
||||
* 所以改名字、调顺序、删除都不会让取值归属漂移。
|
||||
*/
|
||||
export interface SignFieldElement {
|
||||
type: typeof SIGN_FIELD_TYPE
|
||||
fieldId: string
|
||||
fieldKind: SigningFieldKind
|
||||
fieldLabel: string
|
||||
fieldRequired: boolean
|
||||
fieldOptions: string[]
|
||||
fieldMulti?: boolean
|
||||
fieldRisk?: string
|
||||
/** void 元素也要有一个空文本子节点，否则 Slate 会认为结构非法 */
|
||||
children: [{ text: '' }]
|
||||
}
|
||||
|
||||
/**
|
||||
* 把字段定义摊成 Slate 元素的属性。
|
||||
*
|
||||
* `fieldMulti` / `fieldRisk` **显式写成 undefined 而不是省略**：Transforms.setNodes 是合并语义，
|
||||
* 省略这两个键会让节点上原有的值残留下来（比如把「可多选」关掉之后模型里还是 true）。
|
||||
* createSignFieldNode 也走这里，两边属性名不会漂移。
|
||||
*/
|
||||
function buildSignFieldProps(field: SigningFieldDef): Omit<SignFieldElement, 'type' | 'children'> {
|
||||
return {
|
||||
fieldId: field.id,
|
||||
fieldKind: field.kind,
|
||||
fieldLabel: field.label,
|
||||
fieldRequired: field.required,
|
||||
fieldOptions: [...field.options],
|
||||
fieldMulti: field.multi,
|
||||
fieldRisk: field.risk,
|
||||
}
|
||||
}
|
||||
|
||||
export function createSignFieldNode(field: SigningFieldDef): SignFieldElement {
|
||||
return {
|
||||
type: SIGN_FIELD_TYPE,
|
||||
...buildSignFieldProps(field),
|
||||
children: [{ text: '' }],
|
||||
}
|
||||
}
|
||||
|
||||
export function isSignFieldElement(value: unknown): value is SignFieldElement {
|
||||
return Boolean(value) && (value as { type?: unknown }).type === SIGN_FIELD_TYPE
|
||||
}
|
||||
|
||||
/** 收集编辑器里某个字段的全部占位符节点与路径（先收集再改，避免边遍历边改结构） */
|
||||
function findSignFieldEntries(
|
||||
editor: IDomEditor,
|
||||
fieldId: string,
|
||||
): Array<{ node: SignFieldElement; path: number[] }> {
|
||||
const entries: Array<{ node: SignFieldElement; path: number[] }> = []
|
||||
|
||||
for (const [node, path] of SlateEditor.nodes(editor, {
|
||||
at: [],
|
||||
match: (candidate) => isSignFieldElement(candidate) && candidate.fieldId === fieldId,
|
||||
})) {
|
||||
entries.push({ node: node as SignFieldElement, path })
|
||||
}
|
||||
|
||||
return entries
|
||||
}
|
||||
|
||||
/**
|
||||
* 就地改写编辑器里某个字段的每一处占位符。返回命中的节点数。
|
||||
*
|
||||
* 为什么不走「getHtml() → 字符串改写 → setHtml()」的往返（面板改字段原本是这么写的）：
|
||||
* ① setHtml 会重建整篇文档，光标位置随之失效；
|
||||
* ② 更糟的是，改写时用户的光标通常还停在正文里，setHtml 会让 wangEditor 拿旧选区去
|
||||
* 新 DOM 上找位置，偏移一超界就抛 `Cannot resolve a DOM point from Slate point`
|
||||
* （实测必现：面板里改字段名 → 正文里那段文字被拆成新节点 → 旧偏移落空）。
|
||||
* 直接改模型既保住光标，也彻底没有这个竞态。
|
||||
*
|
||||
* 字段 id 刻意不变：改名只是改给人看的标签，改了 id 会让历史 fieldAnswers 对不上。
|
||||
*/
|
||||
export function updateSignFieldNodes(
|
||||
editor: IDomEditor,
|
||||
fieldId: string,
|
||||
patch: Partial<Omit<SigningFieldDef, 'id'>>,
|
||||
): number {
|
||||
const entries = findSignFieldEntries(editor, fieldId)
|
||||
|
||||
entries.forEach(({ node, path }) => {
|
||||
const merged = { ...readFieldFromSignFieldNode(node), ...patch, id: fieldId }
|
||||
// 类型放宽一次：Slate 的 Element 是 BaseElement 与自定义类型的交叉类型、没有属性索引签名，
|
||||
// Partial<Element> 不接纳我们的 field* 扩展属性（内置 image 模块走 insertNodes，
|
||||
// 参数是 Node，所以没遇到这个问题）。先落到 Partial<SignFieldElement> 再传，
|
||||
// 非字面量的额外属性就不再触发多余属性检查。
|
||||
const props: Partial<SignFieldElement> = buildSignFieldProps(merged)
|
||||
|
||||
SlateTransforms.setNodes(editor, props, { at: path })
|
||||
})
|
||||
|
||||
return entries.length
|
||||
}
|
||||
|
||||
/** 就地删掉编辑器里某个字段的每一处占位符。返回命中的节点数。 */
|
||||
export function removeSignFieldNodes(editor: IDomEditor, fieldId: string): number {
|
||||
const entries = findSignFieldEntries(editor, fieldId)
|
||||
|
||||
SlateTransforms.removeNodes(editor, {
|
||||
at: [],
|
||||
match: (candidate) => isSignFieldElement(candidate) && candidate.fieldId === fieldId,
|
||||
})
|
||||
|
||||
return entries.length
|
||||
}
|
||||
|
||||
/** 从 Slate 元素还原字段定义，交给编辑器面板 / 签署侧使用。 */
|
||||
export function readFieldFromSignFieldNode(elem: SignFieldElement): SigningFieldDef {
|
||||
return {
|
||||
id: elem.fieldId,
|
||||
label: elem.fieldLabel,
|
||||
kind: elem.fieldKind,
|
||||
required: elem.fieldRequired,
|
||||
options: [...elem.fieldOptions],
|
||||
...(elem.fieldMulti === undefined ? {} : { multi: elem.fieldMulti }),
|
||||
...(elem.fieldRisk ? { risk: elem.fieldRisk } : {}),
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 这个占位符当前是否处于选中态。
|
||||
*
|
||||
* 必须包一层 try/catch：DomEditor.isNodeSelected 内部会拿 editor.selection 去跑 nodes()，
|
||||
* 而 selection 有可能指向一个已经不在文档里的路径——整篇替换正文时 setHtml **不会**清掉旧选区，
|
||||
* 于是渲染那一刻的选区是脏的，nodes() 抛 `Cannot find a descendant at path`。
|
||||
* 渲染函数不能因为选区脏了就整篇渲染失败（一个占位符渲染不出来，编辑器看起来就像丢了内容），
|
||||
* 取不到就当作未选中。
|
||||
*/
|
||||
function isSelected(editor: IDomEditor, elemNode: unknown): boolean {
|
||||
try {
|
||||
return DomEditor.isNodeSelected(
|
||||
editor,
|
||||
elemNode as Parameters<typeof DomEditor.isNodeSelected>[1],
|
||||
)
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑器内渲染：一个只靠属性展示的胶囊。
|
||||
* 不渲染 children，也不放文本节点，理由见文件头的 ③。
|
||||
*/
|
||||
function renderSignField(
|
||||
elemNode: unknown,
|
||||
_children: VNode[] | null,
|
||||
editor: IDomEditor,
|
||||
): VNode {
|
||||
const elem = elemNode as SignFieldElement
|
||||
const kindLabel = SIGNING_FIELD_KIND_LABELS[elem.fieldKind] ?? '文本'
|
||||
const selected = isSelected(editor, elemNode)
|
||||
const source = elem.fieldId.startsWith('custom:')
|
||||
? '签署时由患者/家属现场填写'
|
||||
: '签署时按患者与就诊信息自动填充'
|
||||
const extra = [
|
||||
elem.fieldRequired ? '必填' : '选填',
|
||||
elem.fieldOptions.length ? `选项：${elem.fieldOptions.join(' / ')}` : '',
|
||||
elem.fieldMulti === undefined ? '' : elem.fieldMulti ? '可多选' : '单选',
|
||||
elem.fieldRisk ? `命中「${elem.fieldRisk}」记为异常项` : '',
|
||||
].filter(Boolean)
|
||||
|
||||
return h('span', {
|
||||
attrs: {
|
||||
class: `${SIGN_FIELD_CHIP_CLASS} ${SIGN_FIELD_NODE_CLASS}${selected ? ' is-selected' : ''}`,
|
||||
// 供 CSS ::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',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** 导出正文时还原成结构化占位符，与签署渲染端共用同一份属性口径。 */
|
||||
function signFieldToHtml(elemNode: unknown): string {
|
||||
return buildFieldSpanHtml(readFieldFromSignFieldNode(elemNode as SignFieldElement))
|
||||
}
|
||||
|
||||
/** 解析 `<span data-field>`：字段信息原样搬进模型，不再从文字反推。 */
|
||||
function parseSignField($elem: Element): SignFieldElement {
|
||||
const field = readFieldFromElement($elem)
|
||||
|
||||
if (!field) {
|
||||
return createSignFieldNode({
|
||||
id: 'field',
|
||||
label: '填写项',
|
||||
kind: 'text',
|
||||
required: false,
|
||||
options: [],
|
||||
})
|
||||
}
|
||||
|
||||
return createSignFieldNode(field)
|
||||
}
|
||||
|
||||
/**
|
||||
* 让占位符成为内联的原子节点。
|
||||
* 必须同时覆写 isInline 与 isVoid：只覆写 isVoid 会渲染成块级 div 并撑断行。
|
||||
*
|
||||
* 参数 element 的声明类型是 Slate 的 BaseElement，没有 type 字段，
|
||||
* 所以这里按「可能带 type 的任意对象」读，读不到就不是我们的节点（与内置 image 模块同构）。
|
||||
*/
|
||||
function withSignField<T extends IDomEditor>(editor: T): T {
|
||||
const { isInline, isVoid } = editor
|
||||
|
||||
editor.isInline = (element) =>
|
||||
(element as { type?: unknown }).type === SIGN_FIELD_TYPE || isInline(element)
|
||||
editor.isVoid = (element) =>
|
||||
(element as { type?: unknown }).type === SIGN_FIELD_TYPE || isVoid(element)
|
||||
|
||||
return editor
|
||||
}
|
||||
|
||||
let registered = false
|
||||
|
||||
/**
|
||||
* 注册占位符元素节点。
|
||||
*
|
||||
* 与 signing-editor-marks 一样是 wangEditor 的全局注册表，重复注册会让同一个元素
|
||||
* 被处理多次，用模块级开关挡住（HMR 重新求值时开关会重置，但注册本身是幂等的）。
|
||||
* 必须在编辑器创建前调用，否则首帧渲染出来的还是裸文字。
|
||||
*/
|
||||
export function registerSigningFieldNode(): void {
|
||||
if (registered) {
|
||||
return
|
||||
}
|
||||
|
||||
registered = true
|
||||
|
||||
// 解析前补上 wangEditor 认得的元素标记（详见文件头 ⑤）
|
||||
Boot.registerPreParseHtml({
|
||||
selector: FIELD_ELEMENT_SELECTOR,
|
||||
preParseHtml: ($node: Element) => {
|
||||
$node.setAttribute(WANGEDITOR_TYPE_ATTR, SIGN_FIELD_TYPE)
|
||||
$node.setAttribute(WANGEDITOR_VOID_ATTR, 'true')
|
||||
return $node
|
||||
},
|
||||
})
|
||||
|
||||
Boot.registerRenderElem({
|
||||
type: SIGN_FIELD_TYPE,
|
||||
renderElem: renderSignField,
|
||||
})
|
||||
|
||||
Boot.registerElemToHtml({
|
||||
type: SIGN_FIELD_TYPE,
|
||||
elemToHtml: signFieldToHtml,
|
||||
})
|
||||
|
||||
Boot.registerParseElemHtml({
|
||||
selector: SIGN_FIELD_PARSE_SELECTOR,
|
||||
parseElemHtml: ($elem: Element) => parseSignField($elem),
|
||||
})
|
||||
|
||||
Boot.registerPlugin(withSignField)
|
||||
}
|
||||
@@ -9,10 +9,15 @@
|
||||
* ③ 必填与选项：模板保存时可做去重校验，签署时可校验必填项是否填完；
|
||||
* ④ 风险值（risk）：签署取值命中即标记为异常项。
|
||||
*
|
||||
* 载体仍沿用既有文书里的 ｛患者姓名｝ 写法，原因见 buildFieldToken 的注释：
|
||||
* 当前编辑器（WangEditor / Slate）无法无损往返带 data-* 属性的结构化节点，
|
||||
* 而纯文本占位符可以，且存量模板零迁移。渲染管线同时支持 span[data-field] 写法，
|
||||
* 后续换成支持结构化节点的编辑器时可以平滑升级。
|
||||
* 载体有两种，由本文件同时维护读写：
|
||||
* ① 纯文本 ｛患者姓名｝ —— 存量文书的写法。正则解析、零迁移，但只是一段文字，
|
||||
* 在编辑器里要按五六次退格才能删干净，也承载不了「选项 / 多选 / 必填」；
|
||||
* ② `<span data-field>` 结构化占位符 —— 新写入的目标格式。在编辑器里是一个原子节点
|
||||
* （见 utils/signing-field-node），点一下退格即可整体删除，字段语义全部显式声明。
|
||||
*
|
||||
* 两种载体的渲染、统计、签署取值都走同一套解析（collectFieldOccurrences），
|
||||
* 因此可以并存，不需要一次性迁移存量模板；需要时用 rewriteFieldOccurrences
|
||||
* 把某个字段就地升级成结构化写法。
|
||||
*/
|
||||
|
||||
import type { SigningAnswers, SigningFieldDef, SigningFieldKind } from '@/api/workbench/types'
|
||||
@@ -21,6 +26,126 @@ import type { SigningAnswers, SigningFieldDef, SigningFieldKind } from '@/api/wo
|
||||
export const FIELD_TOKEN_OPEN = '｛'
|
||||
export const FIELD_TOKEN_CLOSE = '｝'
|
||||
|
||||
/**
|
||||
* 结构化占位符的元素与属性契约。
|
||||
*
|
||||
* 两种载体并存，各有分工：
|
||||
* - **纯文本 ｛患者姓名｝**：存量模板的写法。正则解析、零迁移风险，但只是一段文字，
|
||||
* 在编辑器里要按五六次退格才能删干净，也没法承载"选项""多选"这类结构化信息。
|
||||
* - **`<span data-field>`**：新写入的目标格式。在编辑器里是一个原子节点（见
|
||||
* utils/signing-field-node），点一下退格即可整体删除；字段键、类型、选项、多选
|
||||
* 全部显式声明，不依赖中文标签匹配。
|
||||
*
|
||||
* 两个方向都由本文件维护：写入走 buildFieldSpanHtml，读取走 readFieldFromElement，
|
||||
* 渲染端（utils/signing-document）与编辑器端（utils/signing-field-node）共用这一份，
|
||||
* 避免属性名在两处各自演化。
|
||||
*/
|
||||
export const FIELD_ELEMENT_TAG = 'span'
|
||||
export const FIELD_ID_ATTR = 'data-field'
|
||||
export const FIELD_KIND_ATTR = 'data-kind'
|
||||
export const FIELD_LABEL_ATTR = 'data-label'
|
||||
export const FIELD_REQUIRED_ATTR = 'data-required'
|
||||
export const FIELD_OPTIONS_ATTR = 'data-options'
|
||||
export const FIELD_MULTI_ATTR = 'data-multi'
|
||||
export const FIELD_RISK_ATTR = 'data-risk'
|
||||
|
||||
/** 结构化占位符的选择器：渲染端与解析端必须用同一个。 */
|
||||
export const FIELD_ELEMENT_SELECTOR = `${FIELD_ELEMENT_TAG}[${FIELD_ID_ATTR}]`
|
||||
|
||||
/** 多选项在 data-options 里的分隔符，与原型 V9.9 的写法一致。 */
|
||||
export const FIELD_OPTIONS_SEPARATOR = '|'
|
||||
|
||||
/**
|
||||
* 由字段定义产出结构化占位符元素。
|
||||
* 属性值一律走 setAttribute，标签文字走 textContent，避免手写字符串时漏转义。
|
||||
*
|
||||
* 标签文字仍然保留在元素内部：即便后端清洗掉了 data-*，元素至少还剩可读的文字，
|
||||
* 不会变成一个空白占位。渲染端优先读 data-label，读不到才回落到文字。
|
||||
*/
|
||||
export function createFieldElement(doc: Document, field: SigningFieldDef): HTMLElement {
|
||||
const element = doc.createElement(FIELD_ELEMENT_TAG)
|
||||
element.setAttribute(FIELD_ID_ATTR, field.id)
|
||||
element.setAttribute(FIELD_KIND_ATTR, field.kind)
|
||||
element.setAttribute(FIELD_LABEL_ATTR, field.label)
|
||||
element.setAttribute(FIELD_REQUIRED_ATTR, field.required ? 'true' : 'false')
|
||||
|
||||
if (field.options.length) {
|
||||
element.setAttribute(FIELD_OPTIONS_ATTR, field.options.join(FIELD_OPTIONS_SEPARATOR))
|
||||
}
|
||||
|
||||
if (field.multi !== undefined) {
|
||||
element.setAttribute(FIELD_MULTI_ATTR, field.multi ? 'true' : 'false')
|
||||
}
|
||||
|
||||
if (field.risk) {
|
||||
element.setAttribute(FIELD_RISK_ATTR, field.risk)
|
||||
}
|
||||
|
||||
element.textContent = field.label
|
||||
|
||||
return element
|
||||
}
|
||||
|
||||
/** 由字段定义产出结构化占位符的 HTML 字符串（编辑器导出正文时用）。 */
|
||||
export function buildFieldSpanHtml(field: SigningFieldDef): string {
|
||||
return createFieldElement(document, field).outerHTML
|
||||
}
|
||||
|
||||
/**
|
||||
* 从结构化占位符元素读回字段定义。
|
||||
*
|
||||
* 容错口径：data-* 是主依据，缺失时按可读信息降级，而不是直接丢弃这一项——
|
||||
* 模板正文要经过后端存储，属性一旦被清洗，整篇文书的填写项会全部消失，
|
||||
* 那种失败方式比"类型退化成文本"严重得多。
|
||||
*/
|
||||
export function readFieldFromElement(element: Element): SigningFieldDef | null {
|
||||
const id = element.getAttribute(FIELD_ID_ATTR)?.trim() ?? ''
|
||||
const label = (element.getAttribute(FIELD_LABEL_ATTR) ?? element.textContent ?? '').trim()
|
||||
|
||||
if (!id && !label) {
|
||||
return null
|
||||
}
|
||||
|
||||
// 没有 data-field 时用标签反查目录，签名位这类字段至少还能还原成正确的控件
|
||||
const resolved = id ? null : resolveFieldByLabel(label)
|
||||
|
||||
return {
|
||||
id: id || (resolved as SigningFieldDef).id,
|
||||
label: label || id,
|
||||
kind: ((element.getAttribute(FIELD_KIND_ATTR) ?? resolved?.kind ?? 'text') as SigningFieldKind),
|
||||
required:
|
||||
element.getAttribute(FIELD_REQUIRED_ATTR) === 'true' ||
|
||||
(!element.hasAttribute(FIELD_REQUIRED_ATTR) && resolved?.required === true),
|
||||
options: (element.getAttribute(FIELD_OPTIONS_ATTR) ?? '')
|
||||
.split(FIELD_OPTIONS_SEPARATOR)
|
||||
.map((option) => option.trim())
|
||||
.filter(Boolean),
|
||||
multi: readMultiAttribute(element, resolved),
|
||||
risk: element.getAttribute(FIELD_RISK_ATTR)?.trim() || resolved?.risk || undefined,
|
||||
}
|
||||
}
|
||||
|
||||
/** data-multi 缺失时按类型给缺省：choice 单选，checkbox 带选项则多选。 */
|
||||
function readMultiAttribute(
|
||||
element: Element,
|
||||
resolved: SigningFieldDef | null,
|
||||
): boolean | undefined {
|
||||
const raw = element.getAttribute(FIELD_MULTI_ATTR)
|
||||
|
||||
if (raw === 'true' || raw === 'false') {
|
||||
return raw === 'true'
|
||||
}
|
||||
|
||||
if (resolved?.multi !== undefined) {
|
||||
return resolved.multi
|
||||
}
|
||||
|
||||
const kind = element.getAttribute(FIELD_KIND_ATTR) ?? resolved?.kind ?? 'text'
|
||||
const hasOptions = (element.getAttribute(FIELD_OPTIONS_ATTR) ?? '').length > 0
|
||||
|
||||
return kind === 'checkbox' && hasOptions ? true : undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* 科室手打的复选框符号：几何图形方框，以及 Wingdings 私有区码位。
|
||||
* Word「插入 → 符号」里的方框多为私有区字符（U+F0A8 等），粘贴后字体信息丢失、
|
||||
@@ -159,6 +284,8 @@ export function createCustomField(
|
||||
options: string[] = [],
|
||||
/** 同名占位符在文书里的出现次序，从 1 开始；见 resolveFieldByLabel */
|
||||
sequence = 1,
|
||||
/** 有选项时是否多选；不传表示按类型取缺省（见 SigningFieldDef.multi） */
|
||||
multi?: boolean,
|
||||
): SigningFieldDef {
|
||||
return {
|
||||
id: `${CUSTOM_FIELD_PREFIX}${label}${sequence > 1 ? `#${sequence}` : ''}`,
|
||||
@@ -166,6 +293,7 @@ export function createCustomField(
|
||||
kind,
|
||||
required: false,
|
||||
options,
|
||||
...(multi === undefined ? {} : { multi }),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,6 +369,26 @@ export interface ScannedFieldToken {
|
||||
field: SigningFieldDef
|
||||
}
|
||||
|
||||
/**
|
||||
* 从「同名第几次出现」往后找第一个没被占用的编号。
|
||||
*
|
||||
* 只对自定义文本项有意义（调用方保证），目录里的字段同名共用一份取值是刻意的。
|
||||
* claimed 是有限集合、next 严格递增，所以循环一定收敛。
|
||||
*/
|
||||
function nextFreeCustomSequence(
|
||||
label: string,
|
||||
sequence: number,
|
||||
claimed: Set<string>,
|
||||
): number {
|
||||
let next = sequence
|
||||
|
||||
while (claimed.has(createCustomField(label, 'text', [], next).id)) {
|
||||
next += 1
|
||||
}
|
||||
|
||||
return next
|
||||
}
|
||||
|
||||
/**
|
||||
* 扫描一段文本里的占位符并解析成字段定义。
|
||||
*
|
||||
@@ -249,11 +397,22 @@ export interface ScannedFieldToken {
|
||||
* 编辑器面板统计出的字段键就会和签署渲染时写进 DOM 的键对不上，
|
||||
* 表现是填写项统计里有这一项、签署时却收集不到值。
|
||||
*
|
||||
* claimed 是**结构化占位符已占用的字段键**，同样要跨段传递。
|
||||
* 为什么光有计数器不够：结构化占位符的键写在属性里，纯文本占位符的键是现算的，
|
||||
* 两套编号互不知情。一份文书里两种载体混用时（改过配置的那处已结构化、
|
||||
* 同名的另一处还是纯文本），纯文本这一遍会重新数出 `custom:文本框` 这种
|
||||
* 已被结构化元素占用的键——两个控件挂同一个键，填哪一处都写进同一份取值。
|
||||
* 所以纯文本除了按同名声数，还要让开已被占用的键。
|
||||
*
|
||||
* 之所以要有个统一的扫描函数，就是因为这条编号规则被三处用到
|
||||
* （填写项统计 collectFieldDefs、重复检查 findDuplicateFields、签署渲染 renderTokenFields），
|
||||
* 三处各写一份计时器迟早会漂移。
|
||||
*/
|
||||
export function scanFieldTokens(text: string, counters: Map<string, number>): ScannedFieldToken[] {
|
||||
export function scanFieldTokens(
|
||||
text: string,
|
||||
counters: Map<string, number>,
|
||||
claimed?: Set<string>,
|
||||
): ScannedFieldToken[] {
|
||||
const tokens: ScannedFieldToken[] = []
|
||||
const pattern = createFieldTokenPattern()
|
||||
let match: RegExpExecArray | null
|
||||
@@ -267,10 +426,23 @@ export function scanFieldTokens(text: string, counters: Map<string, number>): Sc
|
||||
|
||||
const sequence = (counters.get(label) ?? 0) + 1
|
||||
counters.set(label, sequence)
|
||||
|
||||
let field = resolveFieldByLabel(label, sequence)
|
||||
|
||||
// 目录里的字段（患者姓名、签名位…）反复出现只能是同一个字段，不参与让位
|
||||
if (claimed && field.id.startsWith(CUSTOM_FIELD_PREFIX)) {
|
||||
if (claimed.has(field.id)) {
|
||||
field = resolveFieldByLabel(label, nextFreeCustomSequence(label, sequence, claimed))
|
||||
}
|
||||
|
||||
// 边扫边占：同一段文字里连着的两个 ｛文本框｝ 不能都跳到同一个空号上
|
||||
claimed.add(field.id)
|
||||
}
|
||||
|
||||
tokens.push({
|
||||
start: match.index,
|
||||
end: pattern.lastIndex,
|
||||
field: resolveFieldByLabel(label, sequence),
|
||||
field,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -278,33 +450,154 @@ export function scanFieldTokens(text: string, counters: Map<string, number>): Sc
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成占位符文本。
|
||||
* 生成纯文本占位符 ｛患者姓名｝。
|
||||
*
|
||||
* 用纯文本而不是 <span data-field>：WangEditor 是 Slate 模型，插入的 HTML 会被
|
||||
* 重新解析，未注册的自定义元素会退化成纯文本、data-* 属性全部丢失，
|
||||
* 导致「保存后再打开，占位符已经不是占位符」。纯文本可以无损往返，
|
||||
* 且不需要为编辑器注册自定义节点，存量模板也不需要迁移。
|
||||
* 新写入的占位符已改走结构化写法（编辑器里插入的是 sign-field 元素节点，
|
||||
* 见 utils/signing-field-node），本函数只保留两处用途：
|
||||
* ① 在编辑器之外（如后端拼装、测试）生成占位符文本；
|
||||
* ② 作为结构化元素不可用时的降级写法——纯文本可以无损往返，
|
||||
* 即便某个环节把 data-* 洗掉了，正文里至少还剩一个能被识别的 ｛…｝。
|
||||
*/
|
||||
export function buildFieldToken(field: SigningFieldDef): string {
|
||||
return `${FIELD_TOKEN_OPEN}${field.label}${FIELD_TOKEN_CLOSE}`
|
||||
}
|
||||
|
||||
/** 占位符在文书里的一次出现；element 只在结构化写法下存在。 */
|
||||
interface FieldOccurrence {
|
||||
field: SigningFieldDef
|
||||
element: Element | null
|
||||
}
|
||||
|
||||
const SCAN_ROOT_ID = 'sign-field-scan-root'
|
||||
|
||||
/** 收集某个根节点下结构化占位符已占用的字段键（属性解析失败的不算，反正也认不出来） */
|
||||
function collectStructuredIdsFrom(root: Element): Set<string> {
|
||||
const ids = new Set<string>()
|
||||
|
||||
root.querySelectorAll(FIELD_ELEMENT_SELECTOR).forEach((element) => {
|
||||
const field = readFieldFromElement(element)
|
||||
|
||||
if (field) {
|
||||
ids.add(field.id)
|
||||
}
|
||||
})
|
||||
|
||||
return ids
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析文书 HTML 里的全部占位符，按出现顺序去重。
|
||||
* 从正文 HTML 里取出结构化占位符已占用的字段键。
|
||||
*
|
||||
* 给「要自己扫纯文本占位符」的调用方用（目前是签署渲染的 renderTokenFields）：
|
||||
* 它必须在渲染前先拿到这个集合，否则纯文本那一遍会数出与结构化元素相同的键。
|
||||
* 不含 `data-field` 的正文直接跳过 DOM 往返。
|
||||
*/
|
||||
export function collectStructuredFieldIds(contentHtml: string): Set<string> {
|
||||
if (!contentHtml || !contentHtml.includes('data-field')) {
|
||||
return new Set<string>()
|
||||
}
|
||||
|
||||
const parsed = new DOMParser().parseFromString(
|
||||
`<div id="${SCAN_ROOT_ID}">${contentHtml}</div>`,
|
||||
'text/html',
|
||||
)
|
||||
const root = parsed.getElementById(SCAN_ROOT_ID)
|
||||
|
||||
return root ? collectStructuredIdsFrom(root) : new Set<string>()
|
||||
}
|
||||
|
||||
/**
|
||||
* 按文档顺序扫描文书里的全部占位符，两种载体合并。
|
||||
*
|
||||
* 走 DOM 树而不是对 HTML 字符串跑正则：字符串正则会把属性值里的 ｛…｝、
|
||||
* 以及跨标签断开的 token 也算成占位符，而渲染端（renderTokenFields）是走文本节点的，
|
||||
* 两边口径一旦不一致，就会出现"面板里统计得到这一项、签署时却渲染不出来"。
|
||||
* 统一按文本节点扫描后，编辑器统计与签署渲染严格同源。
|
||||
*/
|
||||
function collectFieldOccurrences(contentHtml: string): FieldOccurrence[] {
|
||||
if (!contentHtml) {
|
||||
return []
|
||||
}
|
||||
|
||||
const parsed = new DOMParser().parseFromString(
|
||||
`<div id="${SCAN_ROOT_ID}">${contentHtml}</div>`,
|
||||
'text/html',
|
||||
)
|
||||
const root = parsed.getElementById(SCAN_ROOT_ID)
|
||||
|
||||
if (!root) {
|
||||
return []
|
||||
}
|
||||
|
||||
const collected: Array<{ node: Node; field: SigningFieldDef }> = []
|
||||
// 结构化占位符先扫出来，它们的字段键要作为"已占用"传给纯文本那一遍
|
||||
const claimed = new Set<string>()
|
||||
|
||||
root.querySelectorAll(FIELD_ELEMENT_SELECTOR).forEach((element) => {
|
||||
const field = readFieldFromElement(element)
|
||||
|
||||
if (field) {
|
||||
collected.push({ node: element, field })
|
||||
claimed.add(field.id)
|
||||
}
|
||||
})
|
||||
|
||||
const counters = new Map<string, number>()
|
||||
const walker = parsed.createTreeWalker(root, NodeFilter.SHOW_TEXT)
|
||||
let textNode = walker.nextNode()
|
||||
|
||||
while (textNode) {
|
||||
// 收窄后的引用单独存一份：闭包里拿不到 while 条件带来的收窄，类型会退回 Node | null
|
||||
const currentNode = textNode
|
||||
const text = currentNode.textContent ?? ''
|
||||
|
||||
// 结构化占位符内部的文字是它自己的标签，不再当 token 扫一遍
|
||||
if (
|
||||
text.includes(FIELD_TOKEN_OPEN) &&
|
||||
!currentNode.parentElement?.closest(FIELD_ELEMENT_SELECTOR)
|
||||
) {
|
||||
scanFieldTokens(text, counters, claimed).forEach(({ field }) => {
|
||||
collected.push({ node: currentNode, field })
|
||||
})
|
||||
}
|
||||
|
||||
textNode = walker.nextNode()
|
||||
}
|
||||
|
||||
// 两种载体分别扫出来后按文档顺序合并；同一个文本节点里的多个 token
|
||||
// 靠 sort 的稳定性保持扫描顺序（现代 JS 的 Array#sort 是稳定排序）
|
||||
collected.sort((a, b) => {
|
||||
const relation = a.node.compareDocumentPosition(b.node)
|
||||
|
||||
if (relation & Node.DOCUMENT_POSITION_FOLLOWING) {
|
||||
return -1
|
||||
}
|
||||
|
||||
if (relation & Node.DOCUMENT_POSITION_PRECEDING) {
|
||||
return 1
|
||||
}
|
||||
|
||||
return 0
|
||||
})
|
||||
|
||||
return collected.map(({ node, field }) => ({
|
||||
field,
|
||||
element: node.nodeType === Node.ELEMENT_NODE ? (node as Element) : null,
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析文书 HTML 里的全部占位符，按出现顺序去重。两种载体都认。
|
||||
*
|
||||
* 「去重」只对目录里的字段生效：同一个字段在文书里出现多次（如签名与日期在每页都出现）
|
||||
* 只算一个填写项，它们共用一份取值。自定义文本项按出现位置各自成项（见 resolveFieldByLabel），
|
||||
* 所以两份 ｛文本框｝ 会得到两个填写项，不会被合成一个。
|
||||
*/
|
||||
export function collectFieldDefs(contentHtml: string): SigningFieldDef[] {
|
||||
if (!contentHtml) {
|
||||
return []
|
||||
}
|
||||
|
||||
const seen = new Set<string>()
|
||||
const fields: SigningFieldDef[] = []
|
||||
|
||||
scanFieldTokens(contentHtml, new Map()).forEach(({ field }) => {
|
||||
collectFieldOccurrences(contentHtml).forEach(({ field }) => {
|
||||
if (!field.label || seen.has(field.id)) {
|
||||
return
|
||||
}
|
||||
@@ -324,13 +617,9 @@ export function collectFieldDefs(contentHtml: string): SigningFieldDef[] {
|
||||
* 不是"同一个字段写重复了"，不该提示科室去合并。
|
||||
*/
|
||||
export function findDuplicateFields(contentHtml: string): SigningFieldDef[] {
|
||||
if (!contentHtml) {
|
||||
return []
|
||||
}
|
||||
|
||||
const counts = new Map<string, { field: SigningFieldDef; count: number }>()
|
||||
|
||||
scanFieldTokens(contentHtml, new Map()).forEach(({ field }) => {
|
||||
collectFieldOccurrences(contentHtml).forEach(({ field }) => {
|
||||
const entry = counts.get(field.id)
|
||||
counts.set(field.id, { field, count: (entry?.count ?? 0) + 1 })
|
||||
})
|
||||
@@ -338,6 +627,170 @@ export function findDuplicateFields(contentHtml: string): SigningFieldDef[] {
|
||||
return [...counts.values()].filter((item) => item.count > 1).map((item) => item.field)
|
||||
}
|
||||
|
||||
/**
|
||||
* 一次出现的改写结果：
|
||||
* - 返回字段定义：替换成（或升级为）结构化占位符；
|
||||
* - 返回 `'remove'`：删掉这一次出现；
|
||||
* - 返回 `null`：原样保留。
|
||||
*/
|
||||
export type FieldRewriteResult = SigningFieldDef | 'remove' | null
|
||||
|
||||
/**
|
||||
* 按文档顺序重写正文里的占位符，是「升级 / 改配置 / 删除」三件事的共同底座。
|
||||
*
|
||||
* 三件事的难点完全相同，所以必须共用一个实现：
|
||||
* ① **必须按文档顺序**走一遍——自定义文本项的编号取决于同名占位符的出现次序；
|
||||
* ② **计数器要跨文本节点共享**——分段各数各的会让字段键漂移；
|
||||
* ③ 两种载体都要覆盖——纯文本 token 升级成结构化，已是结构化的就地改属性。
|
||||
*
|
||||
* 只有确实含 ｛ 的正文才做 DOM 往返；否则只跑结构化那一遍（甚至直接原样返回）。
|
||||
*/
|
||||
export function rewriteFieldOccurrences(
|
||||
contentHtml: string,
|
||||
resolve: (field: SigningFieldDef, isStructured: boolean) => FieldRewriteResult,
|
||||
): string {
|
||||
if (!contentHtml) {
|
||||
return contentHtml
|
||||
}
|
||||
|
||||
// 走 DOM 而不是对字符串跑正则：正则会把属性值里的 ｛…｝、以及跨标签断开的
|
||||
// token 也算成占位符，与渲染端（按文本节点扫描）口径不一致
|
||||
const parsed = new DOMParser().parseFromString(
|
||||
`<div id="${SCAN_ROOT_ID}">${contentHtml}</div>`,
|
||||
'text/html',
|
||||
)
|
||||
const root = parsed.getElementById(SCAN_ROOT_ID)
|
||||
|
||||
if (!root) {
|
||||
return contentHtml
|
||||
}
|
||||
|
||||
// 纯文本 token 的字段键要避开结构化占位符已占用的键，所以在 ① 改写之前先把
|
||||
// 占用集合固定下来：这样"纯文本键怎么算"只取决于输入文档，与改写的先后无关，
|
||||
// 也与 collectFieldDefs 对同一份输入算出的结果一致。
|
||||
const claimed = collectStructuredIdsFrom(root)
|
||||
|
||||
// ① 结构化占位符：字段定义就在属性里，直接就地改写，不参与文本扫描
|
||||
root.querySelectorAll(FIELD_ELEMENT_SELECTOR).forEach((element) => {
|
||||
const field = readFieldFromElement(element)
|
||||
|
||||
if (!field) {
|
||||
return
|
||||
}
|
||||
|
||||
const next = resolve(field, true)
|
||||
|
||||
if (next === null) {
|
||||
return
|
||||
}
|
||||
|
||||
if (next === 'remove') {
|
||||
element.remove()
|
||||
return
|
||||
}
|
||||
|
||||
element.replaceWith(createFieldElement(parsed, next))
|
||||
})
|
||||
|
||||
// ② 纯文本 ｛…｝：逐文本节点扫描。计数器与占用集合都跨节点共享，
|
||||
// 与 collectFieldOccurrences 同源
|
||||
const counters = new Map<string, number>()
|
||||
const targets: Text[] = []
|
||||
const walker = parsed.createTreeWalker(root, NodeFilter.SHOW_TEXT)
|
||||
let node = walker.nextNode()
|
||||
|
||||
while (node) {
|
||||
const text = node.textContent ?? ''
|
||||
|
||||
// 结构化占位符内部的文字是它自己的标签，不再当 token 扫一遍
|
||||
if (text.includes(FIELD_TOKEN_OPEN) && !node.parentElement?.closest(FIELD_ELEMENT_SELECTOR)) {
|
||||
targets.push(node as Text)
|
||||
}
|
||||
|
||||
node = walker.nextNode()
|
||||
}
|
||||
|
||||
targets.forEach((textNode) => {
|
||||
const text = textNode.textContent ?? ''
|
||||
const fragment = parsed.createDocumentFragment()
|
||||
let cursor = 0
|
||||
let changed = false
|
||||
|
||||
scanFieldTokens(text, counters, claimed).forEach(({ start, end, field }) => {
|
||||
const next = resolve(field, false)
|
||||
|
||||
// 原样保留：不推进 cursor，这段原文会随下一次 slice 或收尾一并写回
|
||||
if (next === null) {
|
||||
return
|
||||
}
|
||||
|
||||
if (start > cursor) {
|
||||
fragment.appendChild(parsed.createTextNode(text.slice(cursor, start)))
|
||||
}
|
||||
|
||||
if (next !== 'remove') {
|
||||
fragment.appendChild(createFieldElement(parsed, next))
|
||||
}
|
||||
|
||||
cursor = end
|
||||
changed = true
|
||||
})
|
||||
|
||||
// 整段都没有要改的，就别动这个文本节点（少一次 DOM 替换，也避免动到无关文本）
|
||||
if (!changed) {
|
||||
return
|
||||
}
|
||||
|
||||
if (cursor < text.length) {
|
||||
fragment.appendChild(parsed.createTextNode(text.slice(cursor)))
|
||||
}
|
||||
|
||||
textNode.replaceWith(fragment)
|
||||
})
|
||||
|
||||
return root.innerHTML
|
||||
}
|
||||
|
||||
/**
|
||||
* 把存量正文里的 ｛患者姓名｝ 就地升级成结构化占位符。
|
||||
*
|
||||
* 升级后它变成一个原子节点，一次退格整体删除，也能承载选项与多选。
|
||||
* 字段键沿用 scanFieldTokens 的解析结果，与升级前的口径完全一致——
|
||||
* 自定义文本项仍按「同名占位符第几次出现」编号，所以升级前后
|
||||
* 已保存的 fieldAnswers 能继续对上，不会出现「模板一改、历史取值全丢」。
|
||||
*/
|
||||
export function upgradeFieldTokensToStructured(contentHtml: string): string {
|
||||
return rewriteFieldOccurrences(contentHtml, (_field, isStructured) =>
|
||||
isStructured ? null : _field,
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 给新插入的自定义文本项分配一个在本文书里唯一的字段键。
|
||||
*
|
||||
* 自定义文本项的字段键是 `custom:名称#出现次序`（见 resolveFieldByLabel），
|
||||
* 次序就是它的身份。**不能只数「同名第几次出现」**：科室改过名之后，
|
||||
* 一个叫「与患者关系」的输入框其键仍停留在 custom:文本框，
|
||||
* 此时再插一个「文本框」按同名声数会得到 custom:文本框，与既有项撞键，
|
||||
* 两个不同的输入框共用一份取值、互相覆盖。
|
||||
* 所以这里直接以「正文里已占用的键」为准，取第一个没被占用的编号。
|
||||
*/
|
||||
export function allocateCustomFieldId(contentHtml: string, label: string): string {
|
||||
const trimmed = label.trim()
|
||||
const used = new Set(collectFieldOccurrences(contentHtml).map(({ field }) => field.id))
|
||||
|
||||
// 从 1 号开始往后找第一个没被占用的编号；同名项通常只有一两个，循环最多跑几次
|
||||
let sequence = 1
|
||||
let id = createCustomField(trimmed, 'text', [], sequence).id
|
||||
|
||||
while (used.has(id)) {
|
||||
sequence += 1
|
||||
id = createCustomField(trimmed, 'text', [], sequence).id
|
||||
}
|
||||
|
||||
return id
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统侧取值来源（HIS / 患者与就诊快照）。
|
||||
* 字段键与目录里的 id 对应，是「自动填充」的唯一入口。
|
||||
|
||||
@@ -3,14 +3,15 @@ import { computed, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
import type { CampusRecord, DepartmentRecord } from '@/api/management/types'
|
||||
import type { SigningFieldDef, SigningFieldKind } from '@/api/workbench/types'
|
||||
import {
|
||||
buildFieldToken,
|
||||
buildGenericTextToken,
|
||||
allocateCustomFieldId,
|
||||
collectFieldDefs,
|
||||
findDuplicateFields,
|
||||
GENERIC_TEXT_FIELD_LABEL,
|
||||
SIGNING_FIELD_KIND_LABELS,
|
||||
SIGNING_FIELD_PRESETS,
|
||||
upgradeFieldTokensToStructured,
|
||||
} from '@/utils/signing-fields'
|
||||
|
||||
import EditorWangPane from './editors/EditorWangPane.vue'
|
||||
@@ -39,10 +40,16 @@ const savePermission = computed(() =>
|
||||
// Word 自维护方案：科室把文书从 Word/WPS 直接粘贴进来（保留表格与基本格式），
|
||||
// 或上传 .docx 由 mammoth 转换；签署时由交互管线识别"勾选"表并转为签署域。
|
||||
// 编辑引擎固定为 WangEditor（MIT）。更换引擎只需新增一个实现 EditorPaneHandle 的面板组件，
|
||||
// 注意把 Word 粘贴的归一化处理重新挂到新引擎的粘贴钩子上（WangEditor 见 EditorWangPane 的 customPaste）。
|
||||
// 注意把 Word 粘贴的归一化处理重新挂到新引擎的粘贴钩子上（WangEditor 见 EditorWangPane 的 customPaste），
|
||||
// 并把占位符的元素节点与渲染钩子重新注册一遍（见 utils/signing-field-node）。
|
||||
interface EditorPaneHandle {
|
||||
getText: () => string
|
||||
insertText: (text: string) => void
|
||||
insertField: (field: SigningFieldDef) => void
|
||||
/** 就地改写某个字段的占位符，返回命中的节点数；0 表示正文里已经没有它 */
|
||||
updateField: (fieldId: string, patch: Partial<Omit<SigningFieldDef, 'id'>>) => number
|
||||
/** 就地删掉某个字段的占位符，返回命中的节点数 */
|
||||
removeField: (fieldId: string) => number
|
||||
}
|
||||
|
||||
const valueHtml = ref('<p><br></p>')
|
||||
@@ -50,13 +57,20 @@ const docxInput = ref<HTMLInputElement | null>(null)
|
||||
const importing = ref(false)
|
||||
const importMessage = ref('')
|
||||
const paneRef = ref<EditorPaneHandle | null>(null)
|
||||
/** 打开时若把旧式 ｛…｝ 占位符升级成了原子占位符，这里放一句说明（不静默改内容） */
|
||||
const upgradeNotice = ref('')
|
||||
/** 正在配置的填写项字段键；空串表示没有选中 */
|
||||
const selectedFieldId = ref('')
|
||||
|
||||
// 占位符分两类：
|
||||
// ① 目录里的字段（utils/signing-fields 的 SIGNING_FIELD_PRESETS）：取值有固定来源，
|
||||
// 签署时按字段键取 HIS / 患者就诊快照自动填充，其中签名是独立控件类型——
|
||||
// 签字后签名图作为该字段取值落回文书原本的签名位，不需要再替换文字；
|
||||
// ② 通用文本项（现场手填的输入框，如与患者关系、受托人姓名）：没有系统取值来源，
|
||||
// 默认写 ｛文本框｝，签署时渲染成一个空文本框，名称在正文里改即可，见 insertGenericTextField。
|
||||
// 默认写「文本框」，签署时渲染成一个空文本框，名称在配置面板里改即可。
|
||||
//
|
||||
// 两类插入的都是**结构化占位符元素节点**（正文里存成 <span data-field>）：
|
||||
// 点一下即整块选中、一次退格整块删除，字段键 / 类型 / 必填 / 选项 / 多选都在元素上。
|
||||
|
||||
const form = reactive<TemplateEditorForm>({
|
||||
templateCode: '',
|
||||
@@ -96,9 +110,24 @@ watch(
|
||||
versionNo: template?.version ?? 'v1',
|
||||
contentHtml: template?.contentHtml ?? '',
|
||||
})
|
||||
valueHtml.value = template?.contentHtml || '<p><br></p>'
|
||||
|
||||
// 存量正文里的占位符是纯文本 ｛患者姓名｝，删一个要按五六次退格。
|
||||
// 打开时统一升级成结构化占位符（原子节点、一次退格整块删除）。
|
||||
// 升级沿用同一套解析口径，字段键前后完全一致，历史 fieldAnswers 不受影响；
|
||||
// 正文里没有 ｛ 时这一步原样返回，不会白白做一次 DOM 往返。
|
||||
const rawContent = template?.contentHtml || '<p><br></p>'
|
||||
const upgradedContent = upgradeFieldTokensToStructured(rawContent)
|
||||
|
||||
upgradeNotice.value =
|
||||
upgradedContent === rawContent
|
||||
? ''
|
||||
: '已把正文里的旧式 ｛…｝ 占位符升级为可整块删除的占位符（字段口径不变）。'
|
||||
|
||||
form.contentHtml = upgradedContent
|
||||
valueHtml.value = upgradedContent
|
||||
syncDepartmentOptions()
|
||||
importMessage.value = ''
|
||||
selectedFieldId.value = ''
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
@@ -120,24 +149,159 @@ function insertContent(text: string) {
|
||||
paneRef.value?.insertText(text)
|
||||
}
|
||||
|
||||
function insertField(field: (typeof SIGNING_FIELD_PRESETS)[number]) {
|
||||
insertContent(buildFieldToken(field))
|
||||
/**
|
||||
* 插入目录里的字段（患者姓名、签名、日期……）。
|
||||
*
|
||||
* 进的是**结构化占位符元素节点**，不是一段文字：点一下即整块选中，
|
||||
* 一次退格整块删除；字段键与类型随节点走，不靠"第几次出现"推断。
|
||||
*/
|
||||
function insertField(field: SigningFieldDef) {
|
||||
paneRef.value?.insertField(field)
|
||||
}
|
||||
|
||||
/**
|
||||
* 插入通用文本项：现场手填的输入框，默认 ｛文本框｝。
|
||||
* 插入通用文本项：现场手填的输入框，默认叫「文本框」。
|
||||
*
|
||||
* 每插一个就是一个独立填写项（字段键按出现位置编号，见 signing-fields 的 resolveFieldByLabel），
|
||||
* 所以两处文本框天然是两份取值，不需要为了区分而改名字。
|
||||
* 名称只决定文书里显示的文字：改成「与患者关系」是为了读起来像文书，不影响取值归属。
|
||||
* 每插一个就是一个独立填写项，所以字段键必须**当场取一个没被占用的**
|
||||
* （见 allocateCustomFieldId）——两个文本框是两处要填的内容，共用一个键才是错的。
|
||||
* 名称只决定文书里显示的文字：改成「与患者关系」只是为了读起来像文书，
|
||||
* 不影响它是哪个字段，也不影响历史取值。
|
||||
*/
|
||||
function insertGenericTextField() {
|
||||
insertContent(buildGenericTextToken())
|
||||
const label = GENERIC_TEXT_FIELD_LABEL
|
||||
|
||||
paneRef.value?.insertField({
|
||||
id: allocateCustomFieldId(valueHtml.value, label),
|
||||
label,
|
||||
kind: 'text',
|
||||
required: false,
|
||||
options: [],
|
||||
})
|
||||
}
|
||||
|
||||
/** 已插入的填写项：让科室在保存前确认签名位、日期位有没有漏 */
|
||||
/** 已插入的填写项：让科室在保存前确认签名位、日期位有没有漏，并点进去改配置 */
|
||||
const detectedFields = computed(() => collectFieldDefs(valueHtml.value))
|
||||
|
||||
/** 正在配置的那一项（从 detectedFields 里现取，保证面板显示的就是正文里的口径） */
|
||||
const selectedField = computed(
|
||||
() => detectedFields.value.find((field) => field.id === selectedFieldId.value) ?? null,
|
||||
)
|
||||
|
||||
/**
|
||||
* 配置草稿。
|
||||
*
|
||||
* 与 selectedField 分开保存：面板上改到一半、还没点「应用修改」时，
|
||||
* 正文（valueHtml）不能跟着变——那会让编辑区每次敲键盘都重排一次。
|
||||
*/
|
||||
const fieldDraft = reactive({
|
||||
label: '',
|
||||
kind: 'text' as SigningFieldKind,
|
||||
required: false,
|
||||
optionsText: '',
|
||||
multi: false,
|
||||
risk: '',
|
||||
})
|
||||
|
||||
function syncDraft(field: SigningFieldDef | null) {
|
||||
fieldDraft.label = field?.label ?? ''
|
||||
fieldDraft.kind = field?.kind ?? 'text'
|
||||
fieldDraft.required = field?.required ?? false
|
||||
// 选项用顿号展示：科室更习惯「同意、不同意」这种写法，逗号也能识别
|
||||
fieldDraft.optionsText = (field?.options ?? []).join('、')
|
||||
// 缺省口径与 signing-fields 的 SigningFieldDef.multi 一致：勾选类默认可多选
|
||||
fieldDraft.multi = field?.multi ?? field?.kind === 'checkbox'
|
||||
fieldDraft.risk = field?.risk ?? ''
|
||||
}
|
||||
|
||||
// 只在"选中项变了"时对齐草稿。不要 watch selectedField —— 它是 computed，
|
||||
// 正文每敲一个字都会重算并换掉对象引用，那样会把面板上没提交的编辑冲掉。
|
||||
watch(
|
||||
() => selectedFieldId.value,
|
||||
(fieldId) => {
|
||||
syncDraft(detectedFields.value.find((field) => field.id === fieldId) ?? null)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
/** 点正文里的胶囊：直接选中并刷新草稿（同一个胶囊连点两次也应把草稿复原） */
|
||||
function selectFieldFromEditor(field: SigningFieldDef) {
|
||||
selectedFieldId.value = field.id
|
||||
syncDraft(field)
|
||||
}
|
||||
|
||||
/** 点列表项：再点一次收起，也顺带把草稿复原 */
|
||||
function toggleField(fieldId: string) {
|
||||
selectedFieldId.value = selectedFieldId.value === fieldId ? '' : fieldId
|
||||
}
|
||||
|
||||
/** 选项文本 → 选项数组。顿号、中英文逗号、竖线都当分隔符（竖线与 data-options 口径一致） */
|
||||
function parseOptions(text: string): string[] {
|
||||
return text
|
||||
.split(/[、,，|]/)
|
||||
.map((option) => option.trim())
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
function applyFieldDraft() {
|
||||
const field = selectedField.value
|
||||
|
||||
if (!field) {
|
||||
return
|
||||
}
|
||||
|
||||
const label = fieldDraft.label.trim()
|
||||
|
||||
if (!label) {
|
||||
ElMessage.error('填写项名称不能为空')
|
||||
return
|
||||
}
|
||||
|
||||
const needsOptions = fieldDraft.kind === 'choice' || fieldDraft.kind === 'checkbox'
|
||||
const options = needsOptions ? parseOptions(fieldDraft.optionsText) : []
|
||||
|
||||
if (needsOptions && !options.length) {
|
||||
ElMessage.error('单选 / 勾选至少要有一个选项')
|
||||
return
|
||||
}
|
||||
|
||||
// 字段键（field.id）刻意保持不变：id 是取值的归属，改叫法不该让历史取值对不上。
|
||||
// 目录外的自定义文本项也一样——它的键里虽然带着旧名字，但那只是个内部标识。
|
||||
//
|
||||
// 改的是**编辑器模型**而不是 valueHtml 字符串：字符串往返要经过 setHtml，
|
||||
// 会重建整篇文档——用户此刻的光标还停在正文里，旧选区在新 DOM 上找不到位置就抛异常，
|
||||
// 而且光标也会丢。改模型两个问题都没有。
|
||||
const changed = paneRef.value?.updateField(field.id, {
|
||||
label,
|
||||
kind: fieldDraft.kind,
|
||||
required: fieldDraft.required,
|
||||
options,
|
||||
multi: options.length ? fieldDraft.multi : undefined,
|
||||
risk: fieldDraft.risk.trim() || undefined,
|
||||
})
|
||||
|
||||
if (!changed) {
|
||||
ElMessage.warning(`正文里已经没有「${field.label}」了，请重新选择要修改的填写项`)
|
||||
selectedFieldId.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
ElMessage.success(`已更新「${label}」（正文里 ${changed} 处）`)
|
||||
}
|
||||
|
||||
function removeField() {
|
||||
const field = selectedField.value
|
||||
|
||||
if (!field) {
|
||||
return
|
||||
}
|
||||
|
||||
// 整项作废：正文里它的每一处出现都删掉（签名位在每页都出现是常态）
|
||||
const changed = paneRef.value?.removeField(field.id) ?? 0
|
||||
|
||||
selectedFieldId.value = ''
|
||||
ElMessage.success(`已删除「${field.label}」（正文里 ${changed} 处）`)
|
||||
}
|
||||
|
||||
const placeholderHints = computed(() => {
|
||||
const hints: string[] = []
|
||||
const ids = new Set(detectedFields.value.map((field) => field.id))
|
||||
@@ -179,6 +343,10 @@ async function handleDocxChange(event: Event) {
|
||||
const arrayBuffer = await file.arrayBuffer()
|
||||
const mammoth = await import('mammoth/mammoth.browser')
|
||||
const result = await mammoth.convertToHtml({ arrayBuffer })
|
||||
// 已知问题（既有，与本次占位符改动无关）：编辑器已有光标时这一句会让 wangEditor 抛一条
|
||||
// 未捕获的 promise 异常——setHtml 内部会 e.focus()，把缓存的上次选区装回去，
|
||||
// 新正文的节点还没绑上 DOM 就先做了一次 DOM 同步。
|
||||
// 正文仍然会正常导入（异常发生在同步选区那一步），要彻底修需要重建编辑器实例，另行处理。
|
||||
valueHtml.value = result.value || '<p><br></p>'
|
||||
importMessage.value = result.messages.length
|
||||
? `已导入，${result.messages.length} 条转换提示（部分 Word 特性可能未还原）`
|
||||
@@ -335,18 +503,81 @@ function save() {
|
||||
|
||||
<div class="placeholder-check">
|
||||
<div class="placeholder-check__head">
|
||||
<strong>占位符检查</strong>
|
||||
<span>{{ detectedFields.length }} 个填写项</span>
|
||||
<strong>填写项</strong>
|
||||
<span>{{ detectedFields.length }} 个</span>
|
||||
<span v-if="upgradeNotice" class="placeholder-check__notice">{{ upgradeNotice }}</span>
|
||||
</div>
|
||||
<div v-if="detectedFields.length" class="placeholder-check__list">
|
||||
<span v-for="field in detectedFields" :key="field.id" class="placeholder-check__item">
|
||||
<button
|
||||
v-for="field in detectedFields"
|
||||
:key="field.id"
|
||||
type="button"
|
||||
class="placeholder-check__item"
|
||||
:class="{ 'is-active': field.id === selectedFieldId }"
|
||||
:title="`点击配置「${field.label}」的名称 / 类型 / 必填 / 选项`"
|
||||
@click="toggleField(field.id)"
|
||||
>
|
||||
{{ field.label }}
|
||||
<em>{{ kindLabels[field.kind] }}</em>
|
||||
</span>
|
||||
<i v-if="field.required">必填</i>
|
||||
<i v-if="field.options.length">{{ field.options.length }} 选项</i>
|
||||
</button>
|
||||
</div>
|
||||
<p v-else class="placeholder-check__empty">
|
||||
文书中还没有任何填写项，签署时不会采集患者填写内容。
|
||||
</p>
|
||||
|
||||
<div v-if="selectedField" class="field-config">
|
||||
<div class="field-config__head">
|
||||
<strong>配置「{{ selectedField.label }}」</strong>
|
||||
<span>字段键 {{ selectedField.id }}（改名称不影响取值归属）</span>
|
||||
</div>
|
||||
<div class="field-config__row">
|
||||
<label class="field-config__item">
|
||||
<span>名称</span>
|
||||
<input v-model="fieldDraft.label" type="text" />
|
||||
</label>
|
||||
<label class="field-config__item">
|
||||
<span>类型</span>
|
||||
<select v-model="fieldDraft.kind">
|
||||
<option v-for="(text, kind) in kindLabels" :key="kind" :value="kind">
|
||||
{{ text }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field-config__item grow">
|
||||
<span>高危值（取值命中即标为异常项）</span>
|
||||
<input v-model="fieldDraft.risk" type="text" placeholder="如 否" />
|
||||
</label>
|
||||
<label class="field-config__check">
|
||||
<input v-model="fieldDraft.required" type="checkbox" />
|
||||
<span>必填</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
v-if="fieldDraft.kind === 'choice' || fieldDraft.kind === 'checkbox'"
|
||||
class="field-config__row"
|
||||
>
|
||||
<label class="field-config__item grow">
|
||||
<span>选项（用、或 | 分隔）</span>
|
||||
<input v-model="fieldDraft.optionsText" type="text" placeholder="如 同意、不同意" />
|
||||
</label>
|
||||
<label class="field-config__check">
|
||||
<input v-model="fieldDraft.multi" type="checkbox" />
|
||||
<span>可多选</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-config__actions">
|
||||
<button type="button" class="field-config__button primary" @click="applyFieldDraft">
|
||||
应用修改
|
||||
</button>
|
||||
<button type="button" class="field-config__button danger" @click="removeField">
|
||||
删除该项
|
||||
</button>
|
||||
<span>改动会作用到正文里该项的每一处出现，保存文书后生效</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul v-if="placeholderHints.length" class="placeholder-check__hints">
|
||||
<li v-for="hint in placeholderHints" :key="hint">{{ hint }}</li>
|
||||
</ul>
|
||||
@@ -374,8 +605,8 @@ function save() {
|
||||
<span v-else class="docx-hint">
|
||||
建议从 Word/WPS
|
||||
中全选复制文书后直接粘贴到下方编辑区；需要患者勾选的内容可点上方「插入勾选框」按钮插入（光标停在表格单元格里就插到该单元格），或用表头含「勾选」列的表格承载；
|
||||
需要患者现场填写的内容（与患者关系、受托人姓名等）点「文本框」插入输入框占位符，插几个就是几处独立填写、各填各的；把名称改成实际叫法只是为了读起来像文书。
|
||||
占位符与勾选框在编辑区会显示成带类型标签的胶囊，便于和正文区分。
|
||||
需要患者现场填写的内容（与患者关系、受托人姓名等）点「文本框」插入输入框占位符，插几个就是几处独立填写、各填各的。
|
||||
占位符在编辑区显示成带类型标签的胶囊：点一下即整块选中，按一次退格就整块删除；名称、类型、必填、选项在下方「填写项」里点开改。
|
||||
</span>
|
||||
</div>
|
||||
<p class="docx-header-note">
|
||||
@@ -388,6 +619,7 @@ function save() {
|
||||
ref="paneRef"
|
||||
:model-value="valueHtml"
|
||||
@update:model-value="valueHtml = $event"
|
||||
@select-field="selectFieldFromEditor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -578,12 +810,22 @@ function save() {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 打开文书时若升级了旧式占位符，在这里说一声——不静默改内容 */
|
||||
.placeholder-check__notice {
|
||||
padding: 2px 8px;
|
||||
color: var(--brand);
|
||||
font-size: 11px;
|
||||
background: var(--brand-l);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.placeholder-check__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* 每一项都是按钮：点开即可改名称 / 类型 / 必填 / 选项，再点一次收起 */
|
||||
.placeholder-check__item {
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
@@ -594,6 +836,17 @@ function save() {
|
||||
background: #f4f8fa;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.placeholder-check__item:hover {
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.placeholder-check__item.is-active {
|
||||
color: #fff;
|
||||
background: var(--brand);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.placeholder-check__item em {
|
||||
@@ -602,6 +855,137 @@ function save() {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.placeholder-check__item i {
|
||||
padding: 0 5px;
|
||||
color: var(--mut);
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
background: rgb(0 0 0 / 5%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.placeholder-check__item.is-active em,
|
||||
.placeholder-check__item.is-active i {
|
||||
color: #fff;
|
||||
background: rgb(255 255 255 / 22%);
|
||||
}
|
||||
|
||||
/* ---- 填写项配置 ---- */
|
||||
|
||||
.field-config {
|
||||
padding: 9px 10px;
|
||||
margin-top: 8px;
|
||||
background: #f8fbfc;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.field-config__head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: baseline;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.field-config__head strong {
|
||||
color: var(--ink);
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.field-config__head span {
|
||||
color: var(--mut);
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.field-config__row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.field-config__item {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.field-config__item.grow {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.field-config__item > span {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
color: var(--ink);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-config__item input,
|
||||
.field-config__item select {
|
||||
width: 100%;
|
||||
padding: 5px 7px;
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.field-config__item input:focus,
|
||||
.field-config__item select:focus {
|
||||
border-color: var(--brand);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-config__check {
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
padding-bottom: 6px;
|
||||
color: var(--ink);
|
||||
font-size: 11.5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.field-config__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.field-config__actions > span {
|
||||
color: var(--mut);
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.field-config__button {
|
||||
padding: 4px 11px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.field-config__button.primary {
|
||||
color: #fff;
|
||||
background: var(--brand);
|
||||
border: 1px solid var(--brand);
|
||||
}
|
||||
|
||||
.field-config__button.danger {
|
||||
color: var(--danger, #c0392b);
|
||||
background: #fff;
|
||||
border: 1px solid currentcolor;
|
||||
}
|
||||
|
||||
.field-config__button:hover {
|
||||
filter: brightness(0.96);
|
||||
}
|
||||
|
||||
.placeholder-check__empty {
|
||||
margin: 0;
|
||||
color: var(--mut);
|
||||
|
||||
@@ -3,14 +3,28 @@ import '@wangeditor/editor/dist/css/style.css'
|
||||
|
||||
import { onBeforeUnmount, shallowRef } from 'vue'
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
import { DomEditor } from '@wangeditor/editor'
|
||||
import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
|
||||
|
||||
import type { SigningFieldDef } from '@/api/workbench/types'
|
||||
import { normalizePastedHtml } from '@/utils/rich-text'
|
||||
import { decorateSigningMarkers, registerSigningEditorMarks } from '@/utils/signing-editor-marks'
|
||||
import {
|
||||
createSignFieldNode,
|
||||
isSignFieldElement,
|
||||
readFieldFromSignFieldNode,
|
||||
registerSigningFieldNode,
|
||||
removeSignFieldNodes,
|
||||
SIGN_FIELD_CHIP_CLASS,
|
||||
SIGN_FIELD_TYPE,
|
||||
updateSignFieldNodes,
|
||||
} from '@/utils/signing-field-node'
|
||||
|
||||
// 渲染钩子是 wangEditor 的全局注册表，必须在编辑器创建前挂上，
|
||||
// 否则首帧渲染出来的占位符/勾选框还是普通文字（要等下一次重渲染才变胶囊）。
|
||||
// 这两个都是 wangEditor 的全局注册表，必须在编辑器创建前挂上：
|
||||
// - 渲染钩子决定旧式 ｛…｝ 占位符与 □ 勾选框的显示（要等下一次重渲染才生效就晚了）；
|
||||
// - 元素节点决定结构化占位符能不能被还原成原子胶囊（首帧就要是胶囊，否则看起来像丢内容）。
|
||||
registerSigningEditorMarks()
|
||||
registerSigningFieldNode()
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
@@ -18,6 +32,8 @@ const props = defineProps<{
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
/** 点中了正文里的结构化占位符，交给上层打开「填写项配置」 */
|
||||
'select-field': [field: SigningFieldDef]
|
||||
}>()
|
||||
|
||||
const editorRef = shallowRef<IDomEditor>()
|
||||
@@ -96,6 +112,44 @@ function handleCreated(editor: IDomEditor) {
|
||||
editableRef.value = editable
|
||||
editable.addEventListener('pointerdown', markUserCaret)
|
||||
editable.addEventListener('keydown', markUserCaret)
|
||||
editable.addEventListener('click', handleFieldClick)
|
||||
}
|
||||
|
||||
/**
|
||||
* 点中正文里的占位符胶囊 → 整块选中并通知上层打开配置面板。
|
||||
*
|
||||
* 必须再判一次 toSlateNode 的结果：旧式 ｛…｝ 占位符被 decorate 渲染成了
|
||||
* 同名的 .ms-sign-chip，它只是个叶子、不是原子节点，
|
||||
* 点它时什么都不该发生（它的配置从上方「填写项」列表里改）。
|
||||
*/
|
||||
function handleFieldClick(event: Event) {
|
||||
const editor = editorRef.value
|
||||
const target = event.target
|
||||
|
||||
if (!editor || !(target instanceof Element)) {
|
||||
return
|
||||
}
|
||||
|
||||
const chip = target.closest(`.${SIGN_FIELD_CHIP_CLASS}`)
|
||||
|
||||
if (!chip) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const node = DomEditor.toSlateNode(editor, chip)
|
||||
|
||||
if (!isSignFieldElement(node)) {
|
||||
return
|
||||
}
|
||||
|
||||
editor.focus()
|
||||
editor.select(DomEditor.findPath(editor, node))
|
||||
emit('select-field', readFieldFromSignFieldNode(node))
|
||||
} catch {
|
||||
// 解不出节点（点到装饰件、或节点已不在模型里）就静默放过：
|
||||
// 点击本身不该报错，保持浏览器默认行为即可
|
||||
}
|
||||
}
|
||||
|
||||
function getText(): string {
|
||||
@@ -116,11 +170,68 @@ function insertText(text: string) {
|
||||
editor.insertNode({ text })
|
||||
}
|
||||
|
||||
defineExpose({ getText, insertText })
|
||||
/**
|
||||
* 在光标处插入一个**结构化占位符**（Slate 元素，不是文本）。
|
||||
*
|
||||
* 与 insertText 的区别就是这个模块存在的理由：它进的是原子节点，
|
||||
* 点一下即整块选中、一次退格整块删除；字段键、类型、必填、选项、多选
|
||||
* 都挂在元素上，导出正文时还原成 `<span data-field>`，
|
||||
* 与签署渲染端（utils/signing-document）共用同一份契约。
|
||||
*/
|
||||
function insertField(field: SigningFieldDef) {
|
||||
const editor = editorRef.value
|
||||
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
|
||||
editor.focus(!userPlacedCaret.value)
|
||||
|
||||
// 当前选中的就是占位符时先右移一格：否则新节点会插进上一个占位符内部，
|
||||
// 连插两个签名位会互相嵌套（内置图片节点也是这么处理的）
|
||||
if (DomEditor.getSelectedNodeByType(editor, SIGN_FIELD_TYPE)) {
|
||||
editor.move(1)
|
||||
}
|
||||
|
||||
editor.insertNode(createSignFieldNode(field))
|
||||
}
|
||||
|
||||
/**
|
||||
* 就地改写某个字段的每一处占位符，返回命中的节点数。
|
||||
*
|
||||
* 面板改字段走这里而不是「改 HTML 字符串再塞回编辑器」：
|
||||
* 字符串往返要经过 setHtml，而 setHtml 内部会 `e.focus()`——它会把缓存的上次选区装回去，
|
||||
* 于是新正文的节点还没绑上 DOM 就先做了一次 DOM 同步，抛
|
||||
* `Cannot resolve a DOM node from Slate node`（实测必现，且与光标在哪儿无关）。
|
||||
* 改模型既保住光标，也彻底绕开这条路径。字段 id 不变，历史取值不受影响。
|
||||
*/
|
||||
function updateField(fieldId: string, patch: Partial<Omit<SigningFieldDef, 'id'>>): number {
|
||||
const editor = editorRef.value
|
||||
|
||||
if (!editor) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return updateSignFieldNodes(editor, fieldId, patch)
|
||||
}
|
||||
|
||||
/** 就地删掉某个字段的每一处占位符，返回命中的节点数 */
|
||||
function removeField(fieldId: string): number {
|
||||
const editor = editorRef.value
|
||||
|
||||
if (!editor) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return removeSignFieldNodes(editor, fieldId)
|
||||
}
|
||||
|
||||
defineExpose({ getText, insertText, insertField, updateField, removeField })
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
editableRef.value?.removeEventListener('pointerdown', markUserCaret)
|
||||
editableRef.value?.removeEventListener('keydown', markUserCaret)
|
||||
editableRef.value?.removeEventListener('click', handleFieldClick)
|
||||
editorRef.value?.destroy()
|
||||
})
|
||||
</script>
|
||||
@@ -205,8 +316,12 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
/* ---- 占位符 / 勾选框胶囊 ----
|
||||
utils/signing-editor-marks 把 ｛患者姓名｝ 切成「｛ / 患者姓名 / ｝」三段叶子、
|
||||
把 □ 切成一 段叶子，这里负责把它们渲染成一眼能认出是"待签署内容"的形态。 */
|
||||
现在有两种占位符胶囊，样式刻意保持一致（都代表"待签署内容"，不该靠外观区分重要性）：
|
||||
|
||||
① 结构化占位符（.ms-sign-node）：Slate 元素节点，正文里存成 <span data-field>。
|
||||
标签文字走下面的 ::before，DOM 里没有可落光标的文字，一次退格整块删除。
|
||||
② 旧式 ｛患者姓名｝（.ms-sign-brace + .ms-sign-chip）：decorate 出来的叶子，
|
||||
只是显示成胶囊，本质还是文字，要按多次退格。存量模板打开后会被升级成 ①。 */
|
||||
|
||||
/* 大括号：只缩小调淡，不移除。这两个字符必须留在 DOM 里参与光标偏移计算，
|
||||
隐藏它们会让点击胶囊时的落点整体算错，也会让退格静默删掉看不见的字符 */
|
||||
@@ -238,6 +353,25 @@ onBeforeUnmount(() => {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 结构化占位符的标签文字：走 CSS 内容而不是 DOM 文本节点。
|
||||
元素是 void，DOM 里只有它自己与一个绝对定位的零宽占位叶子；
|
||||
若在这里放真实文字，浏览器原生光标会落进文字里，
|
||||
一次退格就只删掉一个字符 —— 正好破坏"一次退格整块删除"这个设计目标 */
|
||||
.pane-content :deep(.ms-sign-node)::before {
|
||||
content: attr(data-sign-label);
|
||||
}
|
||||
|
||||
/* 选中态：点一下即整块选中，给个明确的反色，让人知道接下来的退格会删掉整块 */
|
||||
.pane-content :deep(.ms-sign-node.is-selected) {
|
||||
color: #fff;
|
||||
background: var(--brand);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.pane-content :deep(.ms-sign-node.is-selected)::after {
|
||||
border-left-color: rgb(255 255 255 / 35%);
|
||||
}
|
||||
|
||||
/* 类型角标：签名/日期/文本……让科室不点开也知道这一项要填什么。
|
||||
所有占位符共用一个样式，靠这个角标区分类型，不再按必填/签名位分色 */
|
||||
.pane-content :deep(.ms-sign-chip)::after {
|
||||
|
||||
@@ -3,6 +3,7 @@ import { computed, onMounted, ref, watch } from 'vue'
|
||||
|
||||
import type { SigningAnswers, SigningTaskRecord } from '@/api/workbench/types'
|
||||
import {
|
||||
applyAnswerToFieldHost,
|
||||
applySignatureToRoot,
|
||||
buildSigningDocumentHtml,
|
||||
describeFieldProgress,
|
||||
@@ -143,24 +144,9 @@ function applyStoredValues() {
|
||||
return
|
||||
}
|
||||
|
||||
if (typeof value === 'boolean') {
|
||||
const checkbox = host.querySelector<HTMLInputElement>('input[type="checkbox"]')
|
||||
if (checkbox) {
|
||||
checkbox.checked = value
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const input = host.querySelector<HTMLInputElement>(
|
||||
'input:not([type="radio"]):not([type="checkbox"])',
|
||||
)
|
||||
if (input) {
|
||||
input.value = value
|
||||
}
|
||||
|
||||
host.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((radio) => {
|
||||
radio.checked = radio.value === value
|
||||
})
|
||||
// 读写的判据都在 signing-document 里（readAnswersFromRoot 的镜像），
|
||||
// 这里不自己写 data-sign-* 选择器，否则多选组这类"同 DOM 不同语义"的控件会两处漂移
|
||||
applyAnswerToFieldHost(host, value)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user