feat(signing): 正文手打方框在导入粘贴时转为结构化勾选项

This commit is contained in:
yelan
2026-10-06 17:57:43 +08:00
parent a0e4aa6bb7
commit b3210c5fac
6 changed files with 224 additions and 20 deletions
@@ -6,6 +6,7 @@ import {
allocateCustomFieldId,
collectFieldDefs,
convertCheckboxColumnsToFields,
convertInlineBoxesToFields,
SIGNING_FIELD_KIND_LABELS,
SIGNING_FIELD_PRESETS,
upgradeFieldTokensToStructured,
@@ -249,7 +250,11 @@ watch(
// 打开时统一升级成结构化占位符(原子节点、一次退格整块删除)。
// 升级沿用同一套解析口径,字段键前后完全一致,历史 fieldAnswers 不受影响;
// 正文里没有 { 时这一步原样返回,不会白白做一次 DOM 往返。
valueHtml.value = upgradeFieldTokensToStructured(rawContent)
//
// 再把手打的方框(□)也换成结构化勾选项:这一步会改写正文,但存量模板里的 □
// 在签署渲染期本来就会被 convertInlineOptions 转成勾选控件,换成占位符只是把
// 同一件事提前到编辑期做,让科室在保存前就能核对、能改名称。
valueHtml.value = convertInlineBoxesToFields(upgradeFieldTokensToStructured(rawContent))
needConfirm.value = Boolean(props.template?.needConfirm)
message.text = ''
message.tone = ''
@@ -481,8 +486,11 @@ async function handleDocxChange(event: Event) {
const mammoth = await import('mammoth/mammoth.browser')
const result = await mammoth.convertToHtml({ arrayBuffer })
// 表头含「勾选」的表格在导入时就转成结构化占位符(原型 docCheckboxize 的口径),
// 这样科室在保存前就能点开核对每一项勾选,而不是留一张看不出要勾哪儿的空表格
const html = convertCheckboxColumnsToFields(result.value || '<p><br></p>')
// 这样科室在保存前就能点开核对每一项勾选,而不是留一张看不出要勾哪儿的空表格。
// 再扫一遍手打的方框(表头不叫「勾选」、或直接写在格子里的 □),同样换成结构化勾选项。
const html = convertInlineBoxesToFields(
convertCheckboxColumnsToFields(result.value || '<p><br></p>'),
)
valueHtml.value = html
previewing.value = false
@@ -32,6 +32,7 @@ import {
SIGN_FIELD_TYPE,
updateSignFieldNodes,
} from '@/utils/signing-field-node'
import { convertInlineBoxesToFields } from '@/utils/signing-fields'
// 这两个都是 wangEditor 的全局注册表,必须在编辑器创建前挂上:
// - 渲染钩子决定旧式 {…} 占位符与 □ 勾选框的显示(要等下一次重渲染才生效就晚了);
@@ -131,7 +132,10 @@ const editorConfig: Partial<IEditorConfig> = {
const html = event.clipboardData?.getData('text/html')
if (html) {
editor.dangerouslyInsertHtml(normalizePastedHtml(html))
// 归一化之后还要把科室手打的方框转成结构化勾选项:否则粘进来的 □ 只是被 decorate
// 标了个底色,与工具栏「勾选项」插出来的绿色胶囊两副长相,也点不开填写项配置。
// 放在这里而不是等保存,是为了让科室粘完当场就能看到、能核对。
editor.dangerouslyInsertHtml(convertInlineBoxesToFields(normalizePastedHtml(html)))
return false
}
@@ -464,7 +468,7 @@ onBeforeUnmount(() => {
border-color: #c07f00;
}
/* 勾选 / 选择:绿,并在标签前补一个 ☑(原型 .docfld.k-checkbox::before) */
/* 勾选 / 选择:绿(原型 .docfld.k-checkbox) */
.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox']),
.pane-content :deep(.ms-sign-node[data-sign-kind='choice']) {
color: #0b7a4b;
@@ -472,7 +476,17 @@ onBeforeUnmount(() => {
border-color: #0f9d6c;
}
.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox'])::before,
/* 勾选项在正文里就是**一个待勾的方框**,不带名称。
这是**有意偏离原型 V10.2**(2026-10-06 定):原型给勾选胶囊带【名称】,
而这一处在勾什么由旁边的文字交代(表格的其它列、正文的上一句),
自带一个【名称】只会把版面挤开;签署层渲染出来也只有一个 ☐,
编辑层挂着名称会让同一处控件在两层两副长相。
名称仍留在 title 里(见 utils/signing-field-node 的 renderSignField),悬停可见。 */
.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox'])::before {
content: '\2611';
}
/* 单选仍带名称:一组单选(是 / 否)要靠名字才能分辨,去掉就只剩一个认不出的符号 */
.pane-content :deep(.ms-sign-node[data-sign-kind='choice'])::before {
content: '\2611 【' attr(data-sign-label) '】';
}