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

src/views/bpm/model/form/PrintTemplate/Index.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
+import {IDomEditor} from '@wangeditor/editor'
+import MentionModal from "./MentionModal.vue";
+
+const emit = defineEmits(['confirm'])
+
+// mention
+const isShowModal = ref(false)
+const showModal = () => {
+  isShowModal.value = true
+}
+const hideModal = () => {
+  isShowModal.value = false
+}
+const insertMention = (id, name) => {
+  const mentionNode = {
+    type: 'mention',
+    value: name,
+    info: {id},
+    children: [{text: ''}],
+  }
+  const editor = editorRef.value
+  if (editor) {
+    editor.restoreSelection()
+    editor.deleteBackward('character')
+    editor.insertNode(mentionNode)
+    editor.move(1)
+  }
+}
+
+// Dialog
+const dialogVisible = ref(false)
+const open = async (template) => {
+  dialogVisible.value = true
+  valueHtml.value = template
+}
+defineExpose({open})
+const handleConfirm = () => {
+  emit('confirm', valueHtml.value)
+  dialogVisible.value = false
+}
+
+// Editor
+const editorRef = shallowRef<IDomEditor>()
+const editorId = ref('wangeEditor-1')
+const toolbarConfig = {
+  excludeKeys: ['group-video'],
+  insertKeys: {
+    index: 31,
+    keys: ['ProcessRecordMenu']
+  }
+}
+const editorConfig = {
+  placeholder: '请输入内容...',
+  EXTEND_CONF: {
+    mentionConfig: {
+      showModal,
+      hideModal,
+    },
+  },
+}
+const valueHtml = ref()
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value = editor
+}
+
+// onBeforeUnmount
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogVisible" title="自定义模板" fullscreen>
+    <div style="margin: 0 10px;">
+      <el-alert title="输入 @ 可选择插入流程表单选项和默认选项" type="info" show-icon
+                :closable="false"/>
+    </div>
+    <div style="border: 1px solid #ccc;margin: 10px;">
+      <Toolbar
+        style="border-bottom: 1px solid #ccc;"
+        :editor="editorRef"
+        :editorId="editorId"
+        :defaultConfig="toolbarConfig"
+      />
+      <Editor
+        style="height: 500px; overflow-y: hidden;"
+        v-model="valueHtml"
+        :defaultConfig="editorConfig"
+        :editorId="editorId"
+        @onCreated="handleCreated"
+      />
+      <MentionModal v-if="isShowModal"
+                    @hideMentionModal="hideModal"
+                    @insertMention="insertMention"/>
+    </div>
+    <div style="margin-right: 10px;float: right;">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style src="../../../../../../node_modules/@wangeditor/editor/dist/css/style.css"></style>