feat: 通过wangeditor自定义打印模板

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