diff --git a/src/main.ts b/src/main.ts
index 874f7668d..211ecfbc3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -42,6 +42,9 @@ import Logger from '@/utils/Logger'
import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
+// wangeditor插件注册
+import {setupWangeditorPlugin} from "@/views/bpm/model/form/PrintTemplate";
+
// 创建实例
const setupAll = async () => {
const app = createApp(App)
@@ -62,6 +65,8 @@ const setupAll = async () => {
setupAuth(app)
setupMountedFocus(app)
+ setupWangeditorPlugin()
+
await router.isReady()
app.use(VueDOMPurifyHTML)
diff --git a/src/views/bpm/model/form/ExtraSettings.vue b/src/views/bpm/model/form/ExtraSettings.vue
index b75fbbd06..73d316a9b 100644
--- a/src/views/bpm/model/form/ExtraSettings.vue
+++ b/src/views/bpm/model/form/ExtraSettings.vue
@@ -1,5 +1,5 @@
-
+
提交人权限
@@ -231,7 +231,30 @@
/>
+
+
+ 自定义打印模板
+
+
+
+
diff --git a/src/views/bpm/model/form/PrintTemplate/Index.vue b/src/views/bpm/model/form/PrintTemplate/Index.vue
new file mode 100644
index 000000000..ddb4383ca
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/Index.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 取 消
+ 确 定
+
+
+
+
+
diff --git a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
new file mode 100644
index 000000000..c990ea0e6
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
diff --git a/src/views/bpm/model/form/PrintTemplate/index.ts b/src/views/bpm/model/form/PrintTemplate/index.ts
new file mode 100644
index 000000000..1f5298e39
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/index.ts
@@ -0,0 +1,9 @@
+import {Boot} from '@wangeditor/editor'
+import processRecordModule from "./module";
+import mentionModule from "@wangeditor/plugin-mention";
+
+// 注册。要在创建编辑器之前注册,且只能注册一次,不可重复注册。
+export const setupWangeditorPlugin = () => {
+ Boot.registerModule(processRecordModule)
+ Boot.registerModule(mentionModule)
+}
diff --git a/src/views/bpm/model/form/PrintTemplate/module/elem-to-html.ts b/src/views/bpm/model/form/PrintTemplate/module/elem-to-html.ts
new file mode 100644
index 000000000..3b688c357
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/module/elem-to-html.ts
@@ -0,0 +1,12 @@
+import { SlateElement } from '@wangeditor/editor'
+
+function processRecordToHtml(elem: SlateElement, childrenHtml: string): string {
+ return `流程记录`
+}
+
+const conf = {
+ type: 'process-record',
+ elemToHtml: processRecordToHtml,
+}
+
+export default conf
diff --git a/src/views/bpm/model/form/PrintTemplate/module/index.ts b/src/views/bpm/model/form/PrintTemplate/module/index.ts
new file mode 100644
index 000000000..813b8ebf5
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/module/index.ts
@@ -0,0 +1,16 @@
+import {IModuleConf} from '@wangeditor/editor'
+import withProcessRecord from './plugin'
+import renderElemConf from './render-elem'
+import elemToHtmlConf from './elem-to-html'
+import parseHtmlConf from './parse-elem-html'
+import processRecordMenu from "./menu/ProcessRecordMenu"
+
+const module: Partial = {
+ editorPlugin: withProcessRecord,
+ renderElems: [renderElemConf],
+ elemsToHtml: [elemToHtmlConf],
+ parseElemsHtml: [parseHtmlConf],
+ menus: [processRecordMenu],
+}
+
+export default module
diff --git a/src/views/bpm/model/form/PrintTemplate/module/menu/ProcessRecordMenu.ts b/src/views/bpm/model/form/PrintTemplate/module/menu/ProcessRecordMenu.ts
new file mode 100644
index 000000000..076ec0e65
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/module/menu/ProcessRecordMenu.ts
@@ -0,0 +1,42 @@
+import { IButtonMenu, IDomEditor } from '@wangeditor/editor'
+
+class ProcessRecordMenu implements IButtonMenu {
+ readonly tag: string;
+ readonly title: string;
+
+ constructor() {
+ this.title = '流程记录'
+ this.tag = 'button'
+ }
+
+ getValue(editor: IDomEditor): string {
+ return ''
+ }
+
+ isActive(editor: IDomEditor): boolean {
+ return false
+ }
+
+ isDisabled(editor: IDomEditor): boolean {
+ return false
+ }
+
+ exec(editor: IDomEditor, value: string) {
+ if (this.isDisabled(editor)) return
+ const processRecordElem = {
+ type: 'process-record',
+ children: [{ text: '' }],
+ }
+ editor.insertNode(processRecordElem)
+ editor.move(1)
+ }
+}
+
+const ProcessRecordMenuConf = {
+ key: 'ProcessRecordMenu',
+ factory() {
+ return new ProcessRecordMenu()
+ }
+}
+
+export default ProcessRecordMenuConf
diff --git a/src/views/bpm/model/form/PrintTemplate/module/parse-elem-html.ts b/src/views/bpm/model/form/PrintTemplate/module/parse-elem-html.ts
new file mode 100644
index 000000000..44925cfb1
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/module/parse-elem-html.ts
@@ -0,0 +1,20 @@
+import { DOMElement } from './utils/dom'
+import { IDomEditor, SlateDescendant, SlateElement } from '@wangeditor/editor'
+
+function parseHtml(
+ elem: DOMElement,
+ children: SlateDescendant[],
+ editor: IDomEditor
+): SlateElement {
+ return {
+ type: 'process-record',
+ children: [{ text: '' }],
+ }
+}
+
+const parseHtmlConf = {
+ selector: 'span[data-w-e-type="process-record"]',
+ parseElemHtml: parseHtml,
+}
+
+export default parseHtmlConf
diff --git a/src/views/bpm/model/form/PrintTemplate/module/plugin.ts b/src/views/bpm/model/form/PrintTemplate/module/plugin.ts
new file mode 100644
index 000000000..40cdd193e
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/module/plugin.ts
@@ -0,0 +1,28 @@
+import { DomEditor, IDomEditor } from '@wangeditor/editor'
+
+function withProcessRecord(editor: T) {
+ const { isInline, isVoid } = editor
+ const newEditor = editor
+
+ newEditor.isInline = elem => {
+ const type = DomEditor.getNodeType(elem)
+ if (type === 'process-record') {
+ return true
+ }
+
+ return isInline(elem)
+ }
+
+ newEditor.isVoid = elem => {
+ const type = DomEditor.getNodeType(elem)
+ if (type === 'process-record') {
+ return true
+ }
+
+ return isVoid(elem)
+ }
+
+ return newEditor
+}
+
+export default withProcessRecord
diff --git a/src/views/bpm/model/form/PrintTemplate/module/render-elem.ts b/src/views/bpm/model/form/PrintTemplate/module/render-elem.ts
new file mode 100644
index 000000000..58a9e6b0e
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/module/render-elem.ts
@@ -0,0 +1,72 @@
+import {h, VNode} from 'snabbdom'
+import {DomEditor, IDomEditor, SlateElement} from '@wangeditor/editor'
+
+function renderProcessRecord(elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode {
+ const selected = DomEditor.isNodeSelected(editor, elem)
+
+ const vnode = h(
+ 'table',
+ {
+ props: {
+ contentEditable: false,
+ },
+ style: {
+ width: '100%',
+ border: selected
+ ? '2px solid var(--w-e-textarea-selected-border-color)'
+ : '',
+ },
+ },
+ [
+ h('thead', [
+ h('tr', [h('th', {attrs: {colSpan: 3}}, '流程记录')])
+ ]),
+ h('tbody', [
+ h('tr', [
+ h('td', [h(
+ 'span',
+ {
+ props: {
+ contentEditable: false,
+ },
+ style: {
+ marginLeft: '3px',
+ marginRight: '3px',
+ backgroundColor: 'var(--w-e-textarea-slight-bg-color)',
+ borderRadius: '3px',
+ padding: '0 3px',
+ },
+ },
+ `节点`
+ )
+ ]),
+ h('td', [h(
+ 'span',
+ {
+ props: {
+ contentEditable: false,
+ },
+ style: {
+ marginLeft: '3px',
+ marginRight: '3px',
+ backgroundColor: 'var(--w-e-textarea-slight-bg-color)',
+ borderRadius: '3px',
+ padding: '0 3px',
+ },
+ },
+ `操作`
+ )
+ ])
+ ])
+ ])
+ ]
+ )
+ return vnode
+}
+
+const conf = {
+ type: 'process-record',
+ renderElem: renderProcessRecord,
+}
+
+export default conf
diff --git a/src/views/bpm/model/form/PrintTemplate/module/utils/dom.ts b/src/views/bpm/model/form/PrintTemplate/module/utils/dom.ts
new file mode 100644
index 000000000..89ab553ef
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/module/utils/dom.ts
@@ -0,0 +1,21 @@
+import $, { append, on, hide, click } from 'dom7'
+
+if (hide) $.fn.hide = hide
+if (append) $.fn.append = append
+if (click) $.fn.click = click
+if (on) $.fn.on = on
+
+export { Dom7Array } from 'dom7'
+export default $
+
+// COMPAT: This is required to prevent TypeScript aliases from doing some very
+// weird things for Slate's types with the same name as globals. (2019/11/27)
+// https://github.com/microsoft/TypeScript/issues/35002
+import DOMNode = globalThis.Node
+import DOMComment = globalThis.Comment
+import DOMElement = globalThis.Element
+import DOMText = globalThis.Text
+import DOMRange = globalThis.Range
+import DOMSelection = globalThis.Selection
+import DOMStaticRange = globalThis.StaticRange
+export { DOMNode, DOMComment, DOMElement, DOMText, DOMRange, DOMSelection, DOMStaticRange }
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 1933e4314..9974f0829 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -174,7 +174,10 @@ const formData: any = ref({
enable: false,
summary: []
},
- allowWithdrawTask: false
+ allowWithdrawTask: false,
+ printTemplateSetting: {
+ enable: false
+ }
})
// 流程数据