From 97e538539ea3dc3e460dcf7eb3181390fefb50e9 Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Fri, 29 Aug 2025 10:33:09 +0800
Subject: [PATCH 01/17] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0wangeditor?=
 =?UTF-8?q?=E4=BA=8C=E6=AC=A1=E5=BC=80=E5=8F=91=E7=9B=B8=E5=85=B3=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index d3097b3db..a79cec967 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
+    "@wangeditor/plugin-mention": "^1.0.0",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
     "axios": "1.9.0",
@@ -64,6 +65,7 @@
     "pinia-plugin-persistedstate": "^3.2.1",
     "qrcode": "^1.5.3",
     "qs": "^6.12.0",
+    "snabbdom": "^3.6.2",
     "sortablejs": "^1.15.3",
     "steady-xml": "^0.1.0",
     "url": "^0.11.3",
-- 
Gitee


From 84de7fcd46ca565dda4c5aef6c95714eab5bc2cb Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Fri, 29 Aug 2025 14:19:52 +0800
Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=E9=80=9A=E8=BF=87wangeditor?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=89=93=E5=8D=B0=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts                                   |   5 +
 src/views/bpm/model/form/ExtraSettings.vue    |  48 +++++++-
 .../bpm/model/form/PrintTemplate/Index.vue    | 107 ++++++++++++++++++
 .../model/form/PrintTemplate/MentionModal.vue |  99 ++++++++++++++++
 .../bpm/model/form/PrintTemplate/index.ts     |   9 ++
 .../form/PrintTemplate/module/elem-to-html.ts |  12 ++
 .../model/form/PrintTemplate/module/index.ts  |  16 +++
 .../module/menu/ProcessRecordMenu.ts          |  42 +++++++
 .../PrintTemplate/module/parse-elem-html.ts   |  20 ++++
 .../model/form/PrintTemplate/module/plugin.ts |  28 +++++
 .../form/PrintTemplate/module/render-elem.ts  |  72 ++++++++++++
 .../form/PrintTemplate/module/utils/dom.ts    |  21 ++++
 src/views/bpm/model/form/index.vue            |   5 +-
 13 files changed, 482 insertions(+), 2 deletions(-)
 create mode 100644 src/views/bpm/model/form/PrintTemplate/Index.vue
 create mode 100644 src/views/bpm/model/form/PrintTemplate/MentionModal.vue
 create mode 100644 src/views/bpm/model/form/PrintTemplate/index.ts
 create mode 100644 src/views/bpm/model/form/PrintTemplate/module/elem-to-html.ts
 create mode 100644 src/views/bpm/model/form/PrintTemplate/module/index.ts
 create mode 100644 src/views/bpm/model/form/PrintTemplate/module/menu/ProcessRecordMenu.ts
 create mode 100644 src/views/bpm/model/form/PrintTemplate/module/parse-elem-html.ts
 create mode 100644 src/views/bpm/model/form/PrintTemplate/module/plugin.ts
 create mode 100644 src/views/bpm/model/form/PrintTemplate/module/render-elem.ts
 create mode 100644 src/views/bpm/model/form/PrintTemplate/module/utils/dom.ts

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 @@
 <template>
-  <el-form ref="formRef" :model="modelData" label-width="120px" class="mt-20px">
+  <el-form ref="formRef" :model="modelData" label-width="130px" class="mt-20px">
     <el-form-item class="mb-20px">
       <template #label>
         <el-text size="large" tag="b">提交人权限</el-text>
@@ -231,7 +231,30 @@
         />
       </div>
     </el-form-item>
+    <el-form-item class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">自定义打印模板</el-text>
+      </template>
+      <div class="flex flex-col w-100%">
+        <div class="flex">
+          <el-switch
+            v-model="modelData.printTemplateSetting.enable"
+            @change="handlePrintTemplateEnableChange"
+          />
+          <el-button
+            v-if="modelData.printTemplateSetting.enable"
+            class="ml-80px"
+            type="primary"
+            link
+            @click="handleEditPrintTemplate"
+          >
+            编辑模板
+          </el-button>
+        </div>
+      </div>
+    </el-form-item>
   </el-form>
+  <print-template ref="printTemplateRef" @confirm="confirmPrintTemplate"/>
 </template>
 
 <script setup lang="ts">
@@ -241,6 +264,7 @@ import * as FormApi from '@/api/bpm/form'
 import { parseFormFields } from '@/components/FormCreate/src/utils'
 import { ProcessVariableEnum } from '@/components/SimpleProcessDesignerV2/src/consts'
 import HttpRequestSetting from '@/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue'
+import PrintTemplate from './PrintTemplate/Index.vue'
 
 const modelData = defineModel<any>()
 
@@ -436,6 +460,11 @@ const initData = () => {
   if (modelData.value.allowWithdrawTask) {
     modelData.value.allowWithdrawTask = false
   }
+  if (!modelData.value.printTemplateSetting) {
+    modelData.value.printTemplateSetting = {
+      enable: false
+    }
+  }
 }
 defineExpose({ initData })
 
@@ -460,4 +489,21 @@ watch(
   },
   { immediate: true }
 )
+
+// TODO defaultTemplate 是否需要放到 infra_config
+const defaultTemplate = '<p style="text-align: center;"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></p><p style="text-align: right;">打印人：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印人" data-info="%7B%22id%22%3A%22printUsername%22%7D">@打印人</span></p><p style="text-align: right;">流程编号：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;打印时间：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印时间" data-info="%7B%22id%22%3A%22printTime%22%7D">@打印时间</span></p><table style="width: 100%;"><tbody><tr><td colSpan="1" rowSpan="1" width="auto">发起人</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td><td colSpan="1" rowSpan="1" width="auto">发起时间</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto">所属部门</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td><td colSpan="1" rowSpan="1" width="auto">流程状态</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td></tr></tbody></table><p><span data-w-e-type="process-record" data-w-e-is-void data-w-e-is-inline>流程记录</span></p>'
+const handlePrintTemplateEnableChange = (val: boolean) => {
+  if (val) {
+    if (!modelData.value.printTemplateSetting.template) {
+      modelData.value.printTemplateSetting.template = defaultTemplate
+    }
+  }
+}
+const printTemplateRef = ref()
+const handleEditPrintTemplate = () => {
+  printTemplateRef.value.open(modelData.value.printTemplateSetting.template)
+}
+const confirmPrintTemplate = (template) => {
+  modelData.value.printTemplateSetting.template = template
+}
 </script>
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 @@
+<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>
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 @@
+<script setup lang="ts">
+const emit = defineEmits(['hideMentionModal', 'insertMention'])
+
+const inputRef = ref()
+const top = ref('')
+const left = ref('')
+const searchVal = ref('')
+const list = ref([
+  {id: 'startUser', name: '发起人'},
+  {id: 'startUserDept', name: '发起人部门'},
+  {id: 'processName', name: '流程名称'},
+  {id: 'processNum', name: '流程编号'},
+  {id: 'startTime', name: '发起时间'},
+  {id: 'endTime', name: '发起时间'},
+  {id: 'processStatus', name: '流程状态'},
+  {id: 'processResult', name: '流程结果'},
+  {id: 'printUsername', name: '打印人'},
+  {id: 'printTime', name: '打印时间'},
+])
+const searchedList = computed(() => {
+  const searchValStr = searchVal.value.trim().toLowerCase()
+  return list.value.filter(item => {
+    const name = item.name.toLowerCase()
+    return name.indexOf(searchValStr) >= 0;
+  })
+})
+const inputKeyupHandler = (event) => {
+  if (event.key === 'Escape') {
+    emit('hideMentionModal')
+  }
+  if (event.key === 'Enter') {
+    const firstOne = searchedList.value[0]
+    if (firstOne) {
+      const {id, name} = firstOne
+      insertMentionHandler(id, name)
+    }
+  }
+}
+const insertMentionHandler = (id, name) => {
+  emit('insertMention', id, name)
+  emit('hideMentionModal')
+}
+
+onMounted(()=> {
+  const domSelection = document.getSelection()
+  const domRange = domSelection?.getRangeAt(0)
+  if (domRange == null) return
+  const rect = domRange.getBoundingClientRect()
+
+  top.value = `${rect.top + 20}px`
+  left.value = `${rect.left + 5}px`
+
+  inputRef.value.focus()
+})
+</script>
+
+<template>
+  <div id="mention-modal" :style="{ top: top, left: left }">
+    <input id="mention-input" v-model="searchVal" ref="inputRef" @keyup="inputKeyupHandler" />
+    <ul id="mention-list">
+      <li
+        v-for="item in searchedList"
+        :key="item.id"
+        @click="insertMentionHandler(item.id, item.name)"
+      >{{ item.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style>
+#mention-modal {
+  position: absolute;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  padding: 5px;
+}
+
+#mention-modal input {
+  width: 100px;
+  outline: none;
+}
+
+#mention-modal ul {
+  padding: 0;
+  margin: 0;
+}
+
+#mention-modal ul li {
+  list-style: none;
+  cursor: pointer;
+  padding: 3px 0;
+  text-align: left;
+}
+
+#mention-modal ul li:hover {
+  text-decoration: underline;
+}
+</style>
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 `<span data-w-e-type="process-record" data-w-e-is-void data-w-e-is-inline>流程记录</span>`
+}
+
+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<IModuleConf> = {
+  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<T extends IDomEditor>(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
+  }
 })
 
 // 流程数据
-- 
Gitee


From 77e84cc4fa65ede51395136818474e71fb29af53 Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Fri, 29 Aug 2025 15:03:51 +0800
Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/form/ExtraSettings.vue       |  3 ++-
 src/views/bpm/model/form/PrintTemplate/Index.vue | 16 ++++++++++------
 .../model/form/PrintTemplate/MentionModal.vue    | 12 +++++++++++-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/views/bpm/model/form/ExtraSettings.vue b/src/views/bpm/model/form/ExtraSettings.vue
index 73d316a9b..a1e904b85 100644
--- a/src/views/bpm/model/form/ExtraSettings.vue
+++ b/src/views/bpm/model/form/ExtraSettings.vue
@@ -418,6 +418,7 @@ const formFieldOptions4Summary = computed(() => {
 const unParsedFormFields = ref<string[]>([])
 /** 暴露给子组件 HttpRequestSetting 使用 */
 provide('formFields', unParsedFormFields)
+provide('formFieldsObj', formFields)
 
 /** 兼容以前未配置更多设置的流程 */
 const initData = () => {
@@ -491,7 +492,7 @@ watch(
 )
 
 // TODO defaultTemplate 是否需要放到 infra_config
-const defaultTemplate = '<p style="text-align: center;"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></p><p style="text-align: right;">打印人：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印人" data-info="%7B%22id%22%3A%22printUsername%22%7D">@打印人</span></p><p style="text-align: right;">流程编号：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;打印时间：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印时间" data-info="%7B%22id%22%3A%22printTime%22%7D">@打印时间</span></p><table style="width: 100%;"><tbody><tr><td colSpan="1" rowSpan="1" width="auto">发起人</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td><td colSpan="1" rowSpan="1" width="auto">发起时间</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto">所属部门</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td><td colSpan="1" rowSpan="1" width="auto">流程状态</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td></tr></tbody></table><p><span data-w-e-type="process-record" data-w-e-is-void data-w-e-is-inline>流程记录</span></p>'
+const defaultTemplate = '<p style="text-align: center;"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></p><p style="text-align: right;">打印人：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印人" data-info="%7B%22id%22%3A%22printUser%22%7D">@打印人</span></p><p style="text-align: right;">流程编号：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;打印时间：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印时间" data-info="%7B%22id%22%3A%22printTime%22%7D">@打印时间</span></p><table style="width: 100%;"><tbody><tr><td colSpan="1" rowSpan="1" width="auto">发起人</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td><td colSpan="1" rowSpan="1" width="auto">发起时间</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto">所属部门</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td><td colSpan="1" rowSpan="1" width="auto">流程状态</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td></tr></tbody></table><p><span data-w-e-type="process-record" data-w-e-is-void data-w-e-is-inline>流程记录</span></p>'
 const handlePrintTemplateEnableChange = (val: boolean) => {
   if (val) {
     if (!modelData.value.printTemplateSetting.template) {
diff --git a/src/views/bpm/model/form/PrintTemplate/Index.vue b/src/views/bpm/model/form/PrintTemplate/Index.vue
index ddb4383ca..9b95f6d6b 100644
--- a/src/views/bpm/model/form/PrintTemplate/Index.vue
+++ b/src/views/bpm/model/form/PrintTemplate/Index.vue
@@ -76,8 +76,11 @@ onBeforeUnmount(() => {
 <template>
   <el-dialog v-model="dialogVisible" title="自定义模板" fullscreen>
     <div style="margin: 0 10px;">
-      <el-alert title="输入 @ 可选择插入流程表单选项和默认选项" type="info" show-icon
-                :closable="false"/>
+      <el-alert
+        title="输入 @ 可选择插入流程表单选项和默认选项"
+        type="info"
+        show-icon
+        :closable="false"/>
     </div>
     <div style="border: 1px solid #ccc;margin: 10px;">
       <Toolbar
@@ -91,11 +94,12 @@ onBeforeUnmount(() => {
         v-model="valueHtml"
         :defaultConfig="editorConfig"
         :editorId="editorId"
-        @onCreated="handleCreated"
+        @on-created="handleCreated"
       />
-      <MentionModal v-if="isShowModal"
-                    @hideMentionModal="hideModal"
-                    @insertMention="insertMention"/>
+      <MentionModal
+        v-if="isShowModal"
+        @hide-mention-modal="hideModal"
+        @insert-mention="insertMention"/>
     </div>
     <div style="margin-right: 10px;float: right;">
       <el-button @click="dialogVisible = false">取 消</el-button>
diff --git a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
index c990ea0e6..fe96d66fe 100644
--- a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
+++ b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
@@ -14,7 +14,7 @@ const list = ref([
   {id: 'endTime', name: '发起时间'},
   {id: 'processStatus', name: '流程状态'},
   {id: 'processResult', name: '流程结果'},
-  {id: 'printUsername', name: '打印人'},
+  {id: 'printUser', name: '打印人'},
   {id: 'printTime', name: '打印时间'},
 ])
 const searchedList = computed(() => {
@@ -41,7 +41,17 @@ const insertMentionHandler = (id, name) => {
   emit('hideMentionModal')
 }
 
+const formFields = inject('formFieldsObj')
 onMounted(()=> {
+  if (formFields.value && formFields.value.length > 0) {
+    const cloneFormField = formFields.value.map((item) => {
+      return {
+        name: '[表单]'+item.title,
+        id: item.field
+      }
+    })
+    list.value.push(...cloneFormField)
+  }
   const domSelection = document.getSelection()
   const domRange = domSelection?.getRangeAt(0)
   if (domRange == null) return
-- 
Gitee


From d445845bdb8bd9299236035bd6af5ae6a6c226ae Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Fri, 29 Aug 2025 15:09:04 +0800
Subject: [PATCH 04/17] =?UTF-8?q?fix:=20=E5=BC=95=E5=85=A5=E8=B7=AF?=
 =?UTF-8?q?=E5=BE=84=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/form/PrintTemplate/Index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/bpm/model/form/PrintTemplate/Index.vue b/src/views/bpm/model/form/PrintTemplate/Index.vue
index 9b95f6d6b..6dff06d6a 100644
--- a/src/views/bpm/model/form/PrintTemplate/Index.vue
+++ b/src/views/bpm/model/form/PrintTemplate/Index.vue
@@ -34,6 +34,7 @@ const dialogVisible = ref(false)
 const open = async (template) => {
   dialogVisible.value = true
   valueHtml.value = template
+  console.log(template)
 }
 defineExpose({open})
 const handleConfirm = () => {
@@ -108,4 +109,4 @@ onBeforeUnmount(() => {
   </el-dialog>
 </template>
 
-<style src="../../../../../../node_modules/@wangeditor/editor/dist/css/style.css"></style>
+<style src="@wangeditor/editor/dist/css/style.css"></style>
-- 
Gitee


From df3efa9ca5da9dcfcdad16032f210425638d3d7d Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Fri, 29 Aug 2025 15:31:44 +0800
Subject: [PATCH 05/17] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=89=93?=
 =?UTF-8?q?=E5=8D=B0=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/detail/index.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index c3f83cf06..fc32d2f42 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -8,7 +8,10 @@
           :src="auditIconsMap[processInstance.status]"
           alt=""
         />
-        <div class="text-#878c93 h-15px">编号：{{ id }}</div>
+        <div class="flex">
+          <div class="text-#878c93 h-15px">编号：{{ id }}</div>
+          <Icon icon="ep:printer" class="ml-15px cursor-pointer" @click="handlePrint"/>
+        </div>
         <el-divider class="!my-8px" />
         <div class="flex items-center gap-5 mb-10px h-40px">
           <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
@@ -295,6 +298,10 @@ const refresh = () => {
   getDetail()
 }
 
+const handlePrint = () => {
+  // TODO 打印
+}
+
 /** 当前的Tab */
 const activeTab = ref('form')
 
-- 
Gitee


From 29b2ad4492f7dfcabe4c51d3921226c53c68dece Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Tue, 2 Sep 2025 17:04:01 +0800
Subject: [PATCH 06/17] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=E6=89=93?=
 =?UTF-8?q?=E5=8D=B0=E6=89=80=E9=9C=80=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index a79cec967..84341f3cd 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "vue-i18n": "9.10.2",
     "vue-router": "4.4.5",
     "vue-types": "^5.1.1",
+    "vue3-print-nb": "^0.1.4",
     "vue3-signature": "^0.2.4",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
-- 
Gitee


From 4118112423d0fddac161552edf3f0c91f4a4070a Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Tue, 2 Sep 2025 17:04:31 +0800
Subject: [PATCH 07/17] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=89=93=E5=8D=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/processInstance/index.ts          |   5 +
 src/main.ts                                   |   4 +
 .../processInstance/detail/PrintDialog.vue    | 107 ++++++++++++++++++
 .../bpm/processInstance/detail/index.vue      |   7 +-
 4 files changed, 121 insertions(+), 2 deletions(-)
 create mode 100644 src/views/bpm/processInstance/detail/PrintDialog.vue

diff --git a/src/api/bpm/processInstance/index.ts b/src/api/bpm/processInstance/index.ts
index 6b7921300..1e8f04dac 100644
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -108,3 +108,8 @@ export const getFormFieldsPermission = async (params: any) => {
 export const getProcessInstanceBpmnModelView = async (id: string) => {
   return await request.get({ url: '/bpm/process-instance/get-bpmn-model-view?id=' + id })
 }
+
+// 获取流程实例打印数据
+export const getProcessInstancePrintData = async (id: string) => {
+  return await request.get({ url: '/bpm/process-instance/get-print-data?processInstanceId=' + id })
+}
diff --git a/src/main.ts b/src/main.ts
index 211ecfbc3..3ffa5f0c9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -45,6 +45,8 @@ import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐
 // wangeditor插件注册
 import {setupWangeditorPlugin} from "@/views/bpm/model/form/PrintTemplate";
 
+import print from 'vue3-print-nb' // 打印插件
+
 // 创建实例
 const setupAll = async () => {
   const app = createApp(App)
@@ -71,6 +73,8 @@ const setupAll = async () => {
 
   app.use(VueDOMPurifyHTML)
 
+  app.use(print)
+
   app.mount('#app')
 }
 
diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue
new file mode 100644
index 000000000..498e46b64
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/PrintDialog.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { useUserStore } from '@/store/modules/user'
+import { formatDate } from '@/utils/formatTime'
+
+const userStore = useUserStore()
+
+const visible = ref(false)
+const loading = ref(false)
+
+const printData = ref()
+const userName = computed(() => userStore.user.nickname ?? '')
+const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'))
+
+const open = async (id) => {
+  loading.value = true
+  try {
+    printData.value = await ProcessInstanceApi.getProcessInstancePrintData(id)
+    console.log(printData.value)
+  } finally {
+    loading.value = false
+  }
+  visible.value = true
+}
+defineExpose({ open })
+
+const printObj = ref({
+  id: 'printDivTag',
+  popTitle: '&nbsp',
+  extraCss: '/print.css',
+  extraHead: '',
+  zIndex: 20003
+})
+</script>
+
+<template>
+  <el-dialog v-loading="loading" v-model="visible" :show-close="false">
+    <div id="printDivTag">
+      <div v-if="printData.printTemplateEnable" v-html="printData.printTemplateHtml"></div>
+      <div v-else>
+        <h2 class="text-center">{{ printData.processName }}</h2>
+        <div class="text-right text-15px">{{ '打印人员: ' + userName }}</div>
+        <div class="flex justify-between">
+          <div class="text-15px">{{ '流程编号: ' + printData.processInstanceId }}</div>
+          <div class="text-15px">{{ '打印时间: ' + printTime }}</div>
+        </div>
+        <table class="mt-20px w-100%" border="1" style="border-collapse: collapse">
+          <tbody>
+            <tr>
+              <td class="p-5px w-25%">发起人</td>
+              <td class="p-5px w-25%">{{ printData.startUser }}</td>
+              <td class="p-5px w-25%">发起时间</td>
+              <td class="p-5px w-25%">{{ printData.startTime }}</td>
+            </tr>
+            <tr>
+              <td class="p-5px w-25%">所属部门</td>
+              <td class="p-5px w-25%">{{ printData.startUserDept }}</td>
+              <td class="p-5px w-25%">流程状态</td>
+              <td class="p-5px w-25%">{{ printData.processStatusShow }}</td>
+            </tr>
+            <tr>
+              <td class="p-5px w-100% text-center" colspan="4">
+                <h4>表单内容</h4>
+              </td>
+            </tr>
+            <tr v-for="item in printData.formFields" :key="item.formId">
+              <td class="p-5px w-20%">
+                {{ item.formName }}
+              </td>
+              <td class="p-5px w-80%" colspan="3">
+                <div v-html="item.formValueShow"></div>
+              </td>
+            </tr>
+            <tr>
+              <td class="p-5px w-100% text-center" colspan="4">
+                <h4>流程节点</h4>
+              </td>
+            </tr>
+            <tr v-for="item in printData.approveNodes" :key="item.nodeId">
+              <td class="p-5px w-20%">
+                {{ item.nodeName }}
+              </td>
+              <td class="p-5px w-80%" colspan="3">
+                {{ item.nodeDesc }}
+                <div v-if="item.signUrl !== ''">
+                  <img class="w-90px h-40px" :src="item.signUrl" alt="" />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" v-print="printObj"> 打 印</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss">
+table {
+  border-collapse: collapse;
+}
+</style>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index fc32d2f42..b952560cd 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -128,6 +128,7 @@
       </el-scrollbar>
     </div>
   </ContentWrap>
+  <PrintDialog ref="printRef" />
 </template>
 <script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
@@ -149,6 +150,7 @@ import runningSvg from '@/assets/svgs/bpm/running.svg'
 import approveSvg from '@/assets/svgs/bpm/approve.svg'
 import rejectSvg from '@/assets/svgs/bpm/reject.svg'
 import cancelSvg from '@/assets/svgs/bpm/cancel.svg'
+import PrintDialog from './PrintDialog.vue'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 const props = defineProps<{
@@ -298,8 +300,9 @@ const refresh = () => {
   getDetail()
 }
 
-const handlePrint = () => {
-  // TODO 打印
+const printRef = ref()
+const handlePrint = async () => {
+  printRef.value.open(props.id)
 }
 
 /** 当前的Tab */
-- 
Gitee


From be964a6287ad7f6be6e36f88cb37ba22884e069c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 3 Sep 2025 13:25:05 +0800
Subject: [PATCH 08/17] =?UTF-8?q?review=EF=BC=9A=E3=80=90bpm=20=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E3=80=91=E6=B5=81=E7=A8=8B=E6=89=93=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts                                   |  6 +-
 src/views/bpm/model/form/ExtraSettings.vue    |  9 +-
 .../bpm/model/form/PrintTemplate/Index.vue    | 52 ++++++-----
 .../model/form/PrintTemplate/MentionModal.vue | 39 ++++----
 .../bpm/model/form/PrintTemplate/index.ts     |  9 +-
 .../form/PrintTemplate/module/elem-to-html.ts |  4 +-
 .../model/form/PrintTemplate/module/index.ts  |  7 +-
 .../module/menu/ProcessRecordMenu.ts          | 14 +--
 .../PrintTemplate/module/parse-elem-html.ts   | 11 +--
 .../model/form/PrintTemplate/module/plugin.ts |  4 +-
 .../form/PrintTemplate/module/render-elem.ts  | 89 ++++++++++---------
 .../processInstance/detail/PrintDialog.vue    |  3 +-
 .../bpm/processInstance/detail/index.vue      | 18 ++--
 13 files changed, 139 insertions(+), 126 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 3ffa5f0c9..050695124 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -42,8 +42,8 @@ import Logger from '@/utils/Logger'
 
 import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
 
-// wangeditor插件注册
-import {setupWangeditorPlugin} from "@/views/bpm/model/form/PrintTemplate";
+// wangeditor 插件注册
+import { setupWangeditorPlugin } from '@/views/bpm/model/form/PrintTemplate'
 
 import print from 'vue3-print-nb' // 打印插件
 
@@ -67,12 +67,14 @@ const setupAll = async () => {
   setupAuth(app)
   setupMountedFocus(app)
 
+  // wangeditor 插件注册
   setupWangeditorPlugin()
 
   await router.isReady()
 
   app.use(VueDOMPurifyHTML)
 
+  // 打印
   app.use(print)
 
   app.mount('#app')
diff --git a/src/views/bpm/model/form/ExtraSettings.vue b/src/views/bpm/model/form/ExtraSettings.vue
index a1e904b85..c38ae9cbf 100644
--- a/src/views/bpm/model/form/ExtraSettings.vue
+++ b/src/views/bpm/model/form/ExtraSettings.vue
@@ -254,7 +254,7 @@
       </div>
     </el-form-item>
   </el-form>
-  <print-template ref="printTemplateRef" @confirm="confirmPrintTemplate"/>
+  <print-template ref="printTemplateRef" @confirm="confirmPrintTemplate" />
 </template>
 
 <script setup lang="ts">
@@ -491,8 +491,9 @@ watch(
   { immediate: true }
 )
 
-// TODO defaultTemplate 是否需要放到 infra_config
-const defaultTemplate = '<p style="text-align: center;"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></p><p style="text-align: right;">打印人：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印人" data-info="%7B%22id%22%3A%22printUser%22%7D">@打印人</span></p><p style="text-align: right;">流程编号：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;打印时间：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印时间" data-info="%7B%22id%22%3A%22printTime%22%7D">@打印时间</span></p><table style="width: 100%;"><tbody><tr><td colSpan="1" rowSpan="1" width="auto">发起人</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td><td colSpan="1" rowSpan="1" width="auto">发起时间</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto">所属部门</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td><td colSpan="1" rowSpan="1" width="auto">流程状态</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td></tr></tbody></table><p><span data-w-e-type="process-record" data-w-e-is-void data-w-e-is-inline>流程记录</span></p>'
+// TODO defaultTemplate 是否需要放到 infra_config TODO @lesan：就先 default 这里好了。
+const defaultTemplate =
+  '<p style="text-align: center;"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></p><p style="text-align: right;">打印人：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印人" data-info="%7B%22id%22%3A%22printUser%22%7D">@打印人</span></p><p style="text-align: right;">流程编号：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;打印时间：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印时间" data-info="%7B%22id%22%3A%22printTime%22%7D">@打印时间</span></p><table style="width: 100%;"><tbody><tr><td colSpan="1" rowSpan="1" width="auto">发起人</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td><td colSpan="1" rowSpan="1" width="auto">发起时间</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto">所属部门</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td><td colSpan="1" rowSpan="1" width="auto">流程状态</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td></tr></tbody></table><p><span data-w-e-type="process-record" data-w-e-is-void data-w-e-is-inline>流程记录</span></p>'
 const handlePrintTemplateEnableChange = (val: boolean) => {
   if (val) {
     if (!modelData.value.printTemplateSetting.template) {
@@ -504,7 +505,7 @@ const printTemplateRef = ref()
 const handleEditPrintTemplate = () => {
   printTemplateRef.value.open(modelData.value.printTemplateSetting.template)
 }
-const confirmPrintTemplate = (template) => {
+const confirmPrintTemplate = (template: any) => {
   modelData.value.printTemplateSetting.template = template
 }
 </script>
diff --git a/src/views/bpm/model/form/PrintTemplate/Index.vue b/src/views/bpm/model/form/PrintTemplate/Index.vue
index 6dff06d6a..dd37e1dec 100644
--- a/src/views/bpm/model/form/PrintTemplate/Index.vue
+++ b/src/views/bpm/model/form/PrintTemplate/Index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
-import {IDomEditor} from '@wangeditor/editor'
-import MentionModal from "./MentionModal.vue";
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { IDomEditor } from '@wangeditor/editor'
+import MentionModal from './MentionModal.vue'
 
 const emit = defineEmits(['confirm'])
 
-// mention
+// @mention 相关
 const isShowModal = ref(false)
 const showModal = () => {
   isShowModal.value = true
@@ -13,12 +13,12 @@ const showModal = () => {
 const hideModal = () => {
   isShowModal.value = false
 }
-const insertMention = (id, name) => {
+const insertMention = (id: any, name: any) => {
   const mentionNode = {
     type: 'mention',
     value: name,
-    info: {id},
-    children: [{text: ''}],
+    info: { id },
+    children: [{ text: '' }]
   }
   const editor = editorRef.value
   if (editor) {
@@ -29,20 +29,19 @@ const insertMention = (id, name) => {
   }
 }
 
-// Dialog
+// Dialog 相关
 const dialogVisible = ref(false)
-const open = async (template) => {
+const open = async (template: string) => {
   dialogVisible.value = true
   valueHtml.value = template
-  console.log(template)
 }
-defineExpose({open})
+defineExpose({ open })
 const handleConfirm = () => {
   emit('confirm', valueHtml.value)
   dialogVisible.value = false
 }
 
-// Editor
+// Editor 相关
 const editorRef = shallowRef<IDomEditor>()
 const editorId = ref('wangeEditor-1')
 const toolbarConfig = {
@@ -57,41 +56,45 @@ const editorConfig = {
   EXTEND_CONF: {
     mentionConfig: {
       showModal,
-      hideModal,
-    },
-  },
+      hideModal
+    }
+  }
 }
 const valueHtml = ref()
 const handleCreated = (editor: IDomEditor) => {
   editorRef.value = editor
 }
 
-// onBeforeUnmount
+/** 初始化 */
 onBeforeUnmount(() => {
   const editor = editorRef.value
-  if (editor == null) return
+  if (editor == null) {
+    return
+  }
   editor.destroy()
 })
 </script>
 
 <template>
   <el-dialog v-model="dialogVisible" title="自定义模板" fullscreen>
-    <div style="margin: 0 10px;">
+    <div style="margin: 0 10px">
       <el-alert
         title="输入 @ 可选择插入流程表单选项和默认选项"
         type="info"
         show-icon
-        :closable="false"/>
+        :closable="false"
+      />
     </div>
-    <div style="border: 1px solid #ccc;margin: 10px;">
+    <!-- TODO @unocss 简化 style -->
+    <div style="border: 1px solid #ccc; margin: 10px">
       <Toolbar
-        style="border-bottom: 1px solid #ccc;"
+        style="border-bottom: 1px solid #ccc"
         :editor="editorRef"
         :editorId="editorId"
         :defaultConfig="toolbarConfig"
       />
       <Editor
-        style="height: 500px; overflow-y: hidden;"
+        style="height: 500px; overflow-y: hidden"
         v-model="valueHtml"
         :defaultConfig="editorConfig"
         :editorId="editorId"
@@ -100,9 +103,10 @@ onBeforeUnmount(() => {
       <MentionModal
         v-if="isShowModal"
         @hide-mention-modal="hideModal"
-        @insert-mention="insertMention"/>
+        @insert-mention="insertMention"
+      />
     </div>
-    <div style="margin-right: 10px;float: right;">
+    <div style="margin-right: 10px; float: right">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="handleConfirm">确 定</el-button>
     </div>
diff --git a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
index fe96d66fe..9343f225d 100644
--- a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
+++ b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
@@ -6,47 +6,48 @@ const top = ref('')
 const left = ref('')
 const searchVal = ref('')
 const list = ref([
-  {id: 'startUser', name: '发起人'},
-  {id: 'startUserDept', name: '发起人部门'},
-  {id: 'processName', name: '流程名称'},
-  {id: 'processNum', name: '流程编号'},
-  {id: 'startTime', name: '发起时间'},
-  {id: 'endTime', name: '发起时间'},
-  {id: 'processStatus', name: '流程状态'},
-  {id: 'processResult', name: '流程结果'},
-  {id: 'printUser', name: '打印人'},
-  {id: 'printTime', name: '打印时间'},
+  { id: 'startUser', name: '发起人' },
+  { id: 'startUserDept', name: '发起人部门' },
+  { id: 'processName', name: '流程名称' },
+  { id: 'processNum', name: '流程编号' },
+  { id: 'startTime', name: '发起时间' },
+  { id: 'endTime', name: '发起时间' },
+  { id: 'processStatus', name: '流程状态' },
+  { id: 'processResult', name: '流程结果' },
+  { id: 'printUser', name: '打印人' },
+  { id: 'printTime', name: '打印时间' }
 ])
 const searchedList = computed(() => {
   const searchValStr = searchVal.value.trim().toLowerCase()
-  return list.value.filter(item => {
+  return list.value.filter((item) => {
     const name = item.name.toLowerCase()
-    return name.indexOf(searchValStr) >= 0;
+    return name.indexOf(searchValStr) >= 0
   })
 })
-const inputKeyupHandler = (event) => {
+const inputKeyupHandler = (event: any) => {
   if (event.key === 'Escape') {
     emit('hideMentionModal')
   }
   if (event.key === 'Enter') {
     const firstOne = searchedList.value[0]
     if (firstOne) {
-      const {id, name} = firstOne
+      const { id, name } = firstOne
       insertMentionHandler(id, name)
     }
   }
 }
-const insertMentionHandler = (id, name) => {
+const insertMentionHandler = (id: any, name: any) => {
   emit('insertMention', id, name)
   emit('hideMentionModal')
 }
 
 const formFields = inject('formFieldsObj')
-onMounted(()=> {
+onMounted(() => {
+  // TODO @lesan：这里 idea 会爆红，看看能不能处理下；
   if (formFields.value && formFields.value.length > 0) {
     const cloneFormField = formFields.value.map((item) => {
       return {
-        name: '[表单]'+item.title,
+        name: '[表单]' + item.title,
         id: item.field
       }
     })
@@ -66,13 +67,15 @@ onMounted(()=> {
 
 <template>
   <div id="mention-modal" :style="{ top: top, left: left }">
+    <!-- TODO @lesan：css 可以用 unocss 哇？ -->
     <input id="mention-input" v-model="searchVal" ref="inputRef" @keyup="inputKeyupHandler" />
     <ul id="mention-list">
       <li
         v-for="item in searchedList"
         :key="item.id"
         @click="insertMentionHandler(item.id, item.name)"
-      >{{ item.name }}
+      >
+        {{ item.name }}
       </li>
     </ul>
   </div>
diff --git a/src/views/bpm/model/form/PrintTemplate/index.ts b/src/views/bpm/model/form/PrintTemplate/index.ts
index 1f5298e39..4c304ed79 100644
--- a/src/views/bpm/model/form/PrintTemplate/index.ts
+++ b/src/views/bpm/model/form/PrintTemplate/index.ts
@@ -1,8 +1,9 @@
-import {Boot} from '@wangeditor/editor'
-import processRecordModule from "./module";
-import mentionModule from "@wangeditor/plugin-mention";
+import { Boot } from '@wangeditor/editor'
+import processRecordModule from './module'
+import mentionModule from '@wangeditor/plugin-mention'
 
-// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
+// 注册：要在创建编辑器之前注册，且只能注册一次，不可重复注册
+// TODO @lesan：WangEditor 拼写
 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
index 3b688c357..29af64277 100644
--- a/src/views/bpm/model/form/PrintTemplate/module/elem-to-html.ts
+++ b/src/views/bpm/model/form/PrintTemplate/module/elem-to-html.ts
@@ -1,12 +1,12 @@
 import { SlateElement } from '@wangeditor/editor'
 
-function processRecordToHtml(elem: SlateElement, childrenHtml: string): string {
+function processRecordToHtml(_elem: SlateElement, _childrenHtml: string): string {
   return `<span data-w-e-type="process-record" data-w-e-is-void data-w-e-is-inline>流程记录</span>`
 }
 
 const conf = {
   type: 'process-record',
-  elemToHtml: processRecordToHtml,
+  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
index 813b8ebf5..a4e51d551 100644
--- a/src/views/bpm/model/form/PrintTemplate/module/index.ts
+++ b/src/views/bpm/model/form/PrintTemplate/module/index.ts
@@ -1,16 +1,17 @@
-import {IModuleConf} from '@wangeditor/editor'
+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"
+import processRecordMenu from './menu/ProcessRecordMenu'
 
+// TODO @lesan：PrintTemplate 是参考了哪些文档哇？要不要在 index.ts 稍微写点注释，方便大家理解；
 const module: Partial<IModuleConf> = {
   editorPlugin: withProcessRecord,
   renderElems: [renderElemConf],
   elemsToHtml: [elemToHtmlConf],
   parseElemsHtml: [parseHtmlConf],
-  menus: [processRecordMenu],
+  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
index 076ec0e65..9f0346ff3 100644
--- a/src/views/bpm/model/form/PrintTemplate/module/menu/ProcessRecordMenu.ts
+++ b/src/views/bpm/model/form/PrintTemplate/module/menu/ProcessRecordMenu.ts
@@ -1,31 +1,31 @@
 import { IButtonMenu, IDomEditor } from '@wangeditor/editor'
 
 class ProcessRecordMenu implements IButtonMenu {
-  readonly tag: string;
-  readonly title: string;
+  readonly tag: string
+  readonly title: string
 
   constructor() {
     this.title = '流程记录'
     this.tag = 'button'
   }
 
-  getValue(editor: IDomEditor): string {
+  getValue(_editor: IDomEditor): string {
     return ''
   }
 
-  isActive(editor: IDomEditor): boolean {
+  isActive(_editor: IDomEditor): boolean {
     return false
   }
 
-  isDisabled(editor: IDomEditor): boolean {
+  isDisabled(_editor: IDomEditor): boolean {
     return false
   }
 
-  exec(editor: IDomEditor, value: string) {
+  exec(editor: IDomEditor, _value: string) {
     if (this.isDisabled(editor)) return
     const processRecordElem = {
       type: 'process-record',
-      children: [{ text: '' }],
+      children: [{ text: '' }]
     }
     editor.insertNode(processRecordElem)
     editor.move(1)
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
index 44925cfb1..0582acd22 100644
--- a/src/views/bpm/model/form/PrintTemplate/module/parse-elem-html.ts
+++ b/src/views/bpm/model/form/PrintTemplate/module/parse-elem-html.ts
@@ -2,19 +2,20 @@ import { DOMElement } from './utils/dom'
 import { IDomEditor, SlateDescendant, SlateElement } from '@wangeditor/editor'
 
 function parseHtml(
-  elem: DOMElement,
-  children: SlateDescendant[],
-  editor: IDomEditor
+  _elem: DOMElement,
+  _children: SlateDescendant[],
+  _editor: IDomEditor
 ): SlateElement {
   return {
+    // TODO @lesan：这里有个红色告警，可以去掉哇？
     type: 'process-record',
-    children: [{ text: '' }],
+    children: [{ text: '' }]
   }
 }
 
 const parseHtmlConf = {
   selector: 'span[data-w-e-type="process-record"]',
-  parseElemHtml: parseHtml,
+  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
index 40cdd193e..86c3f38b2 100644
--- a/src/views/bpm/model/form/PrintTemplate/module/plugin.ts
+++ b/src/views/bpm/model/form/PrintTemplate/module/plugin.ts
@@ -4,7 +4,7 @@ function withProcessRecord<T extends IDomEditor>(editor: T) {
   const { isInline, isVoid } = editor
   const newEditor = editor
 
-  newEditor.isInline = elem => {
+  newEditor.isInline = (elem) => {
     const type = DomEditor.getNodeType(elem)
     if (type === 'process-record') {
       return true
@@ -13,7 +13,7 @@ function withProcessRecord<T extends IDomEditor>(editor: T) {
     return isInline(elem)
   }
 
-  newEditor.isVoid = elem => {
+  newEditor.isVoid = (elem) => {
     const type = DomEditor.getNodeType(elem)
     if (type === 'process-record') {
       return true
diff --git a/src/views/bpm/model/form/PrintTemplate/module/render-elem.ts b/src/views/bpm/model/form/PrintTemplate/module/render-elem.ts
index 58a9e6b0e..7f24f82cc 100644
--- a/src/views/bpm/model/form/PrintTemplate/module/render-elem.ts
+++ b/src/views/bpm/model/form/PrintTemplate/module/render-elem.ts
@@ -1,72 +1,73 @@
-import {h, VNode} from 'snabbdom'
-import {DomEditor, IDomEditor, SlateElement} from '@wangeditor/editor'
+import { h, VNode } from 'snabbdom'
+import { DomEditor, IDomEditor, SlateElement } from '@wangeditor/editor'
 
-function renderProcessRecord(elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode {
+function renderProcessRecord(
+  elem: SlateElement,
+  _children: VNode[] | null,
+  editor: IDomEditor
+): VNode {
   const selected = DomEditor.isNodeSelected(editor, elem)
 
-  const vnode = h(
+  return h(
     'table',
     {
       props: {
-        contentEditable: false,
+        contentEditable: false
       },
       style: {
         width: '100%',
-        border: selected
-          ? '2px solid var(--w-e-textarea-selected-border-color)'
-          : '',
-      },
+        border: selected ? '2px solid var(--w-e-textarea-selected-border-color)' : ''
+      }
     },
     [
-      h('thead', [
-        h('tr', [h('th', {attrs: {colSpan: 3}}, '流程记录')])
-      ]),
+      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'
+                }
               },
-            },
-            `节点`
-          )
+              `节点`
+            )
           ]),
-          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,
+  renderElem: renderProcessRecord
 }
 
 export default conf
diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue
index 498e46b64..785b70c53 100644
--- a/src/views/bpm/processInstance/detail/PrintDialog.vue
+++ b/src/views/bpm/processInstance/detail/PrintDialog.vue
@@ -12,7 +12,7 @@ const printData = ref()
 const userName = computed(() => userStore.user.nickname ?? '')
 const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'))
 
-const open = async (id) => {
+const open = async (id: string) => {
   loading.value = true
   try {
     printData.value = await ProcessInstanceApi.getProcessInstancePrintData(id)
@@ -98,6 +98,7 @@ const printObj = ref({
       </div>
     </template>
   </el-dialog>
+  <!-- TODO @lesan：最下面的 table 央视，可以去掉么？ -->
 </template>
 
 <style lang="scss">
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index b952560cd..aec1473e1 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -10,7 +10,7 @@
         />
         <div class="flex">
           <div class="text-#878c93 h-15px">编号：{{ id }}</div>
-          <Icon icon="ep:printer" class="ml-15px cursor-pointer" @click="handlePrint"/>
+          <Icon icon="ep:printer" class="ml-15px cursor-pointer" @click="handlePrint" />
         </div>
         <el-divider class="!my-8px" />
         <div class="flex items-center gap-5 mb-10px h-40px">
@@ -128,6 +128,8 @@
       </el-scrollbar>
     </div>
   </ContentWrap>
+
+  <!-- 打印预览弹窗 -->
   <PrintDialog ref="printRef" />
 </template>
 <script lang="ts" setup>
@@ -192,6 +194,7 @@ const getDetail = () => {
 /** 加载流程实例 */
 const BusinessFormComponent = ref<any>(null) // 异步组件
 /** 获取审批详情 */
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
 const getApprovalDetail = async () => {
   processInstanceLoading.value = true
   try {
@@ -270,11 +273,7 @@ const getProcessModelView = async () => {
   }
 }
 
-// 审批节点信息
-const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
-/**
- * 设置表单权限
- */
+/** 设置表单权限 */
 const setFieldPermission = (field: string, permission: string) => {
   if (permission === FieldPermissionType.READ) {
     //@ts-ignore
@@ -292,20 +291,19 @@ const setFieldPermission = (field: string, permission: string) => {
   }
 }
 
-/**
- * 操作成功后刷新
- */
+/** 操作成功后刷新 */
 const refresh = () => {
   // 重新获取详情
   getDetail()
 }
 
+/** 处理打印 */
 const printRef = ref()
 const handlePrint = async () => {
   printRef.value.open(props.id)
 }
 
-/** 当前的Tab */
+/** 当前的 Tab */
 const activeTab = ref('form')
 
 /** 初始化 */
-- 
Gitee


From 3686b58dbb758769fb16d991f2b499ee09389cb4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 3 Sep 2025 23:07:55 +0800
Subject: [PATCH 09/17] =?UTF-8?q?feat=EF=BC=9A=E3=80=90iot=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E4=BC=98=E5=8C=96=E5=9C=BA=E6=99=AF?=
 =?UTF-8?q?=E8=81=94=E5=8A=A8=E7=9A=84=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/detail/DeviceDetailsInfo.vue       |   1 -
 .../iot/rule/scene/form/inputs/ValueInput.vue | 110 ++++++------------
 .../scene/form/sections/ActionSection.vue     |   2 +-
 src/views/iot/rule/scene/index.vue            |  38 +++---
 4 files changed, 52 insertions(+), 99 deletions(-)

diff --git a/src/views/iot/device/device/detail/DeviceDetailsInfo.vue b/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
index 39a226d4e..930adb678 100644
--- a/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
@@ -150,7 +150,6 @@ const authDialogVisible = ref(false) // 定义设备认证信息弹框的可见
 const authPasswordVisible = ref(false) // 定义密码可见性状态
 const authInfo = ref<IotDeviceAuthInfoVO>({} as IotDeviceAuthInfoVO) // 定义设备认证信息对象
 
-// TODO @AI：注释使用 /** */ 风格，方法注释；
 /** 控制地图显示的标志 */
 const showMap = computed(() => {
   return !!(device.longitude && device.latitude)
diff --git a/src/views/iot/rule/scene/form/inputs/ValueInput.vue b/src/views/iot/rule/scene/form/inputs/ValueInput.vue
index 908141b30..40548bd25 100644
--- a/src/views/iot/rule/scene/form/inputs/ValueInput.vue
+++ b/src/views/iot/rule/scene/form/inputs/ValueInput.vue
@@ -1,15 +1,12 @@
 <!-- 值输入组件 -->
-<!-- TODO @yunai：这个需要在看看。。。 -->
 <template>
   <div class="w-full min-w-0">
     <!-- 布尔值选择 -->
     <el-select
-      v-if="propertyType === 'bool'"
+      v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL"
       v-model="localValue"
       placeholder="请选择布尔值"
-      @change="handleChange"
       class="w-full!"
-      style="width: 100% !important"
     >
       <el-option label="真 (true)" value="true" />
       <el-option label="假 (false)" value="false" />
@@ -17,12 +14,10 @@
 
     <!-- 枚举值选择 -->
     <el-select
-      v-else-if="propertyType === 'enum' && enumOptions.length > 0"
+      v-else-if="propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0"
       v-model="localValue"
       placeholder="请选择枚举值"
-      @change="handleChange"
       class="w-full!"
-      style="width: 100% !important"
     >
       <el-option
         v-for="option in enumOptions"
@@ -34,9 +29,8 @@
 
     <!-- 范围输入 (between 操作符) -->
     <div
-      v-else-if="operator === 'between'"
+      v-else-if="operator === IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value"
       class="w-full! flex items-center gap-8px"
-      style="width: 100% !important"
     >
       <el-input
         v-model="rangeStart"
@@ -53,19 +47,15 @@
         placeholder="最大值"
         @input="handleRangeChange"
         class="flex-1 min-w-0"
-        style="width: auto !important"
       />
     </div>
 
     <!-- 列表输入 (in 操作符) -->
-    <div v-else-if="operator === 'in'" class="w-full!" style="width: 100% !important">
-      <el-input
-        v-model="localValue"
-        placeholder="请输入值列表，用逗号分隔"
-        @input="handleChange"
-        class="w-full!"
-        style="width: 100% !important"
-      >
+    <div
+      v-else-if="operator === IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value"
+      class="w-full!"
+    >
+      <el-input v-model="localValue" placeholder="请输入值列表，用逗号分隔" class="w-full!">
         <template #suffix>
           <el-tooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
             <Icon
@@ -85,7 +75,7 @@
 
     <!-- 日期时间输入 -->
     <el-date-picker
-      v-else-if="propertyType === 'date'"
+      v-else-if="propertyType === IoTDataSpecsDataTypeEnum.DATE"
       v-model="dateValue"
       type="datetime"
       placeholder="请选择日期时间"
@@ -93,7 +83,6 @@
       value-format="YYYY-MM-DD HH:mm:ss"
       @change="handleDateChange"
       class="w-full!"
-      style="width: 100% !important"
     />
 
     <!-- 数字输入 -->
@@ -107,7 +96,6 @@
       placeholder="请输入数值"
       @change="handleNumberChange"
       class="w-full!"
-      style="width: 100% !important"
     />
 
     <!-- 文本输入 -->
@@ -116,9 +104,7 @@
       v-model="localValue"
       :type="getInputType()"
       :placeholder="getPlaceholder()"
-      @input="handleChange"
       class="w-full!"
-      style="width: 100% !important"
     >
       <template #suffix>
         <el-tooltip
@@ -126,9 +112,9 @@
           :content="`单位：${propertyConfig.unit}`"
           placement="top"
         >
-          <span class="text-12px text-[var(--el-text-color-secondary)] px-4px">{{
-            propertyConfig.unit
-          }}</span>
+          <span class="text-12px text-[var(--el-text-color-secondary)] px-4px">
+            {{ propertyConfig.unit }}
+          </span>
         </el-tooltip>
       </template>
     </el-input>
@@ -137,7 +123,10 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { IoTDataSpecsDataTypeEnum } from '@/views/iot/utils/constants'
+import {
+  IoTDataSpecsDataTypeEnum,
+  IotRuleSceneTriggerConditionParameterOperatorEnum
+} from '@/views/iot/utils/constants'
 
 /** 值输入组件 */
 defineOptions({ name: 'ValueInput' })
@@ -165,7 +154,7 @@ const rangeEnd = ref('') // 范围结束值
 const dateValue = ref('') // 日期值
 const numberValue = ref<number>() // 数字值
 
-// 计算属性：枚举选项
+/** 计算属性：枚举选项 */
 const enumOptions = computed(() => {
   if (props.propertyConfig?.enum) {
     return props.propertyConfig.enum.map((item: any) => ({
@@ -176,9 +165,12 @@ const enumOptions = computed(() => {
   return []
 })
 
-// 计算属性：列表预览
+/** 计算属性：列表预览 */
 const listPreview = computed(() => {
-  if (props.operator === 'in' && localValue.value) {
+  if (
+    props.operator === IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value &&
+    localValue.value
+  ) {
     return localValue.value
       .split(',')
       .map((item) => item.trim())
@@ -187,10 +179,7 @@ const listPreview = computed(() => {
   return []
 })
 
-/**
- * 判断是否为数字类型
- * @returns 是否为数字类型
- */
+/** 判断是否为数字类型 */
 const isNumericType = () => {
   return [
     IoTDataSpecsDataTypeEnum.INT,
@@ -199,10 +188,7 @@ const isNumericType = () => {
   ].includes((props.propertyType || '') as any)
 }
 
-/**
- * 获取输入框类型
- * @returns 输入框类型
- */
+/** 获取输入框类型 */
 const getInputType = () => {
   switch (props.propertyType) {
     case IoTDataSpecsDataTypeEnum.INT:
@@ -214,10 +200,7 @@ const getInputType = () => {
   }
 }
 
-/**
- * 获取占位符文本
- * @returns 占位符文本
- */
+/** 获取占位符文本 */
 const getPlaceholder = () => {
   const typeMap = {
     [IoTDataSpecsDataTypeEnum.TEXT]: '请输入字符串',
@@ -230,48 +213,27 @@ const getPlaceholder = () => {
   return typeMap[props.propertyType || ''] || '请输入值'
 }
 
-/**
- * 获取数字精度
- * @returns 数字精度
- */
+/** 获取数字精度 */
 const getPrecision = () => {
   return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 0 : 2
 }
 
-/**
- * 获取数字步长
- * @returns 数字步长
- */
+/** 获取数字步长 */
 const getStep = () => {
   return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 1 : 0.1
 }
 
-/**
- * 获取最小值
- * @returns 最小值
- */
+/** 获取最小值 */
 const getMin = () => {
   return props.propertyConfig?.min || undefined
 }
 
-/**
- * 获取最大值
- * @returns 最大值
- */
+/** 获取最大值 */
 const getMax = () => {
   return props.propertyConfig?.max || undefined
 }
 
-/**
- * 处理值变化事件
- */
-const handleChange = () => {
-  // 值变化处理
-}
-
-/**
- * 处理范围变化事件
- */
+/** 处理范围变化事件 */
 const handleRangeChange = () => {
   if (rangeStart.value && rangeEnd.value) {
     localValue.value = `${rangeStart.value},${rangeEnd.value}`
@@ -280,23 +242,17 @@ const handleRangeChange = () => {
   }
 }
 
-/**
- * 处理日期变化事件
- * @param value 日期值
- */
+/** 处理日期变化事件 */
 const handleDateChange = (value: string) => {
   localValue.value = value || ''
 }
 
-/**
- * 处理数字变化事件
- * @param value 数字值
- */
+/** 处理数字变化事件 */
 const handleNumberChange = (value: number | undefined) => {
   localValue.value = value?.toString() || ''
 }
 
-// 监听操作符变化
+/** 监听操作符变化 */
 watch(
   () => props.operator,
   () => {
diff --git a/src/views/iot/rule/scene/form/sections/ActionSection.vue b/src/views/iot/rule/scene/form/sections/ActionSection.vue
index b41e8cf77..6357afebf 100644
--- a/src/views/iot/rule/scene/form/sections/ActionSection.vue
+++ b/src/views/iot/rule/scene/form/sections/ActionSection.vue
@@ -114,7 +114,7 @@
                 <el-tag size="small" type="warning">自动执行</el-tag>
               </div>
               <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">
-                当触发条件满足时，系统将自动发送告警通知，无需额外配置。
+                当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 -> 告警配置] 管理。
               </div>
             </div>
           </div>
diff --git a/src/views/iot/rule/scene/index.vue b/src/views/iot/rule/scene/index.vue
index da4a75935..f4a7b5585 100644
--- a/src/views/iot/rule/scene/index.vue
+++ b/src/views/iot/rule/scene/index.vue
@@ -79,9 +79,9 @@
               <Icon icon="ep:document" />
             </div>
             <div>
-              <div class="text-24px font-600 text-[#303133] leading-none">{{
-                statistics.total
-              }}</div>
+              <div class="text-24px font-600 text-[#303133] leading-none">
+                {{ statistics.total }}
+              </div>
               <div class="text-14px text-[#909399] mt-4px">总规则数</div>
             </div>
           </div>
@@ -99,9 +99,9 @@
               <Icon icon="ep:check" />
             </div>
             <div>
-              <div class="text-24px font-600 text-[#303133] leading-none">{{
-                statistics.enabled
-              }}</div>
+              <div class="text-24px font-600 text-[#303133] leading-none">
+                {{ statistics.enabled }}
+              </div>
               <div class="text-14px text-[#909399] mt-4px">启用规则</div>
             </div>
           </div>
@@ -119,9 +119,9 @@
               <Icon icon="ep:close" />
             </div>
             <div>
-              <div class="text-24px font-600 text-[#303133] leading-none">{{
-                statistics.disabled
-              }}</div>
+              <div class="text-24px font-600 text-[#303133] leading-none">
+                {{ statistics.disabled }}
+              </div>
               <div class="text-14px text-[#909399] mt-4px">禁用规则</div>
             </div>
           </div>
@@ -139,9 +139,9 @@
               <Icon icon="ep:timer" />
             </div>
             <div>
-              <div class="text-24px font-600 text-[#303133] leading-none">{{
-                statistics.timerRules
-              }}</div>
+              <div class="text-24px font-600 text-[#303133] leading-none">
+                {{ statistics.timerRules }}
+              </div>
               <div class="text-14px text-[#909399] mt-4px">定时规则</div>
             </div>
           </div>
@@ -214,7 +214,7 @@
         </el-table-column>
         <el-table-column label="操作" width="210" fixed="right">
           <template #default="{ row }">
-            <div class="flex gap-8px">
+            <div>
               <el-button type="primary" link @click="handleEdit(row)">
                 <Icon icon="ep:edit" />
                 编辑
@@ -293,7 +293,6 @@ const statistics = ref({
   total: 0,
   enabled: 0,
   disabled: 0,
-  triggered: 0, // 已触发的规则数量 (暂时使用启用状态的规则数量)
   timerRules: 0 // 定时规则数量
 })
 
@@ -321,9 +320,9 @@ const getRuleSceneSummary = (rule: IotSceneRule) => {
       }
       // 添加设备信息（如果有）
       if (trigger.deviceId) {
-        description += ` [设备ID: ${trigger.deviceId}]`
+        description += ` [设备 ID: ${trigger.deviceId}]`
       } else if (trigger.productId) {
-        description += ` [产品ID: ${trigger.productId}]`
+        description += ` [产品 ID: ${trigger.productId}]`
       }
       return description
     }) || []
@@ -334,13 +333,13 @@ const getRuleSceneSummary = (rule: IotSceneRule) => {
       let description = getActionTypeLabel(action.type)
       // 添加设备信息（如果有）
       if (action.deviceId) {
-        description += ` [设备ID: ${action.deviceId}]`
+        description += ` [设备 ID: ${action.deviceId}]`
       } else if (action.productId) {
-        description += ` [产品ID: ${action.productId}]`
+        description += ` [产品 ID: ${action.productId}]`
       }
       // 添加告警配置信息（如果有）
       if (action.alertConfigId) {
-        description += ` [告警配置ID: ${action.alertConfigId}]`
+        description += ` [告警配置 ID: ${action.alertConfigId}]`
       }
       return description
     }) || []
@@ -371,7 +370,6 @@ const updateStatistics = () => {
     total: list.value.length,
     enabled: list.value.filter((item) => item.status === CommonStatusEnum.ENABLE).length,
     disabled: list.value.filter((item) => item.status === CommonStatusEnum.DISABLE).length,
-    triggered: list.value.filter((item) => item.status === CommonStatusEnum.ENABLE).length,
     timerRules: list.value.filter((item) => hasTimerTrigger(item)).length
   }
 }
-- 
Gitee


From 7e0c61c459c5a46a8a3121d19dfcde596caa2a66 Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Thu, 4 Sep 2025 09:16:29 +0800
Subject: [PATCH 10/17] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts                                   |   8 +-
 src/views/bpm/model/form/ExtraSettings.vue    |   1 -
 .../model/form/PrintTemplate/MentionModal.vue |   8 +-
 .../bpm/model/form/PrintTemplate/index.ts     |   3 +-
 .../model/form/PrintTemplate/module/index.ts  |   2 +-
 .../processInstance/detail/PrintDialog.vue    | 113 +++++++++++++++---
 6 files changed, 108 insertions(+), 27 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 050695124..fcfd78096 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -42,8 +42,8 @@ import Logger from '@/utils/Logger'
 
 import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
 
-// wangeditor 插件注册
-import { setupWangeditorPlugin } from '@/views/bpm/model/form/PrintTemplate'
+// wangEditor 插件注册
+import { setupWangEditorPlugin } from '@/views/bpm/model/form/PrintTemplate'
 
 import print from 'vue3-print-nb' // 打印插件
 
@@ -67,8 +67,8 @@ const setupAll = async () => {
   setupAuth(app)
   setupMountedFocus(app)
 
-  // wangeditor 插件注册
-  setupWangeditorPlugin()
+  // wangEditor 插件注册
+  setupWangEditorPlugin()
 
   await router.isReady()
 
diff --git a/src/views/bpm/model/form/ExtraSettings.vue b/src/views/bpm/model/form/ExtraSettings.vue
index c38ae9cbf..98784f125 100644
--- a/src/views/bpm/model/form/ExtraSettings.vue
+++ b/src/views/bpm/model/form/ExtraSettings.vue
@@ -491,7 +491,6 @@ watch(
   { immediate: true }
 )
 
-// TODO defaultTemplate 是否需要放到 infra_config TODO @lesan：就先 default 这里好了。
 const defaultTemplate =
   '<p style="text-align: center;"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></p><p style="text-align: right;">打印人：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印人" data-info="%7B%22id%22%3A%22printUser%22%7D">@打印人</span></p><p style="text-align: right;">流程编号：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;打印时间：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="打印时间" data-info="%7B%22id%22%3A%22printTime%22%7D">@打印时间</span></p><table style="width: 100%;"><tbody><tr><td colSpan="1" rowSpan="1" width="auto">发起人</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td><td colSpan="1" rowSpan="1" width="auto">发起时间</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto">所属部门</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td><td colSpan="1" rowSpan="1" width="auto">流程状态</td><td colSpan="1" rowSpan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td></tr></tbody></table><p><span data-w-e-type="process-record" data-w-e-is-void data-w-e-is-inline>流程记录</span></p>'
 const handlePrintTemplateEnableChange = (val: boolean) => {
diff --git a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
index 9343f225d..598867e2f 100644
--- a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
+++ b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
@@ -11,10 +11,9 @@ const list = ref([
   { id: 'processName', name: '流程名称' },
   { id: 'processNum', name: '流程编号' },
   { id: 'startTime', name: '发起时间' },
-  { id: 'endTime', name: '发起时间' },
+  { id: 'endTime', name: '结束时间' },
   { id: 'processStatus', name: '流程状态' },
-  { id: 'processResult', name: '流程结果' },
-  { id: 'printUser', name: '打印人' },
+  { id: 'printUsername', name: '打印人' },
   { id: 'printTime', name: '打印时间' }
 ])
 const searchedList = computed(() => {
@@ -41,9 +40,8 @@ const insertMentionHandler = (id: any, name: any) => {
   emit('hideMentionModal')
 }
 
-const formFields = inject('formFieldsObj')
+const formFields = inject<any>('formFieldsObj')
 onMounted(() => {
-  // TODO @lesan：这里 idea 会爆红，看看能不能处理下；
   if (formFields.value && formFields.value.length > 0) {
     const cloneFormField = formFields.value.map((item) => {
       return {
diff --git a/src/views/bpm/model/form/PrintTemplate/index.ts b/src/views/bpm/model/form/PrintTemplate/index.ts
index 4c304ed79..fb1d4af95 100644
--- a/src/views/bpm/model/form/PrintTemplate/index.ts
+++ b/src/views/bpm/model/form/PrintTemplate/index.ts
@@ -3,8 +3,7 @@ import processRecordModule from './module'
 import mentionModule from '@wangeditor/plugin-mention'
 
 // 注册：要在创建编辑器之前注册，且只能注册一次，不可重复注册
-// TODO @lesan：WangEditor 拼写
-export const setupWangeditorPlugin = () => {
+export const setupWangEditorPlugin = () => {
   Boot.registerModule(processRecordModule)
   Boot.registerModule(mentionModule)
 }
diff --git a/src/views/bpm/model/form/PrintTemplate/module/index.ts b/src/views/bpm/model/form/PrintTemplate/module/index.ts
index a4e51d551..7670c8556 100644
--- a/src/views/bpm/model/form/PrintTemplate/module/index.ts
+++ b/src/views/bpm/model/form/PrintTemplate/module/index.ts
@@ -5,7 +5,7 @@ import elemToHtmlConf from './elem-to-html'
 import parseHtmlConf from './parse-elem-html'
 import processRecordMenu from './menu/ProcessRecordMenu'
 
-// TODO @lesan：PrintTemplate 是参考了哪些文档哇？要不要在 index.ts 稍微写点注释，方便大家理解；
+// 可参考 wangEditor 官方文档进行自定义扩展插件：https://www.wangeditor.com/v5/development.html#%E5%AE%9A%E4%B9%89%E6%96%B0%E5%85%83%E7%B4%A0
 const module: Partial<IModuleConf> = {
   editorPlugin: withProcessRecord,
   renderElems: [renderElemConf],
diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue
index 785b70c53..dfa1fe6bf 100644
--- a/src/views/bpm/processInstance/detail/PrintDialog.vue
+++ b/src/views/bpm/processInstance/detail/PrintDialog.vue
@@ -2,6 +2,8 @@
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { useUserStore } from '@/store/modules/user'
 import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE, getDictLabel } from '@/utils/dict'
+import { decodeFields } from '@/utils/formCreate'
 
 const userStore = useUserStore()
 
@@ -11,11 +13,15 @@ const loading = ref(false)
 const printData = ref()
 const userName = computed(() => userStore.user.nickname ?? '')
 const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'))
+const formFields = ref()
+const printDataMap = ref({})
 
 const open = async (id: string) => {
   loading.value = true
   try {
     printData.value = await ProcessInstanceApi.getProcessInstancePrintData(id)
+    initPrintDataMap()
+    parseFormFields()
     console.log(printData.value)
   } finally {
     loading.value = false
@@ -24,6 +30,90 @@ const open = async (id: string) => {
 }
 defineExpose({ open })
 
+const parseFormFields = () => {
+  const formFieldsObj = decodeFields(printData.value.formFields)
+  const processVariables = printData.value.processVariables
+  let res: any = []
+  for (const item of formFieldsObj) {
+    const id = item['field']
+    const name = item['title']
+    let html = '暂不支持此类型的表单展示'
+    // TODO 完善各类型表单的展示
+    if (item['type'] === 'input') {
+      html = processVariables[item['field']]
+    }
+    if (item['type'] === 'UploadImg') {
+      html = `<img src="${processVariables[item['field']]}" style="max-width: 600px" />`
+    }
+    printDataMap.value[item['field']] = html
+    res.push({ id, name, html })
+  }
+  formFields.value = res
+}
+
+const initPrintDataMap = () => {
+  printDataMap.value['startUser'] = printData.value.startUser.nickname
+  printDataMap.value['startUserDept'] = printData.value.startUser.deptName
+  printDataMap.value['processName'] = printData.value.processName
+  printDataMap.value['processNum'] = printData.value.processInstanceId
+  printDataMap.value['startTime'] = printData.value.startTime
+  printDataMap.value['endTime'] = printData.value.endTime
+  printDataMap.value['processStatus'] = getDictLabel(
+    DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+    printData.value.processStatus
+  )
+  printDataMap.value['printUsername'] = userName.value
+  printDataMap.value['printTime'] = printTime.value
+}
+
+const getPrintTemplateHTML = () => {
+  const parser = new DOMParser()
+  let doc = parser.parseFromString(printData.value.printTemplateHtml, 'text/html')
+  // table 添加border
+  let tables = doc.querySelectorAll('table')
+  tables.forEach((item) => {
+    item.setAttribute('border', '1')
+    item.setAttribute('style', (item.getAttribute('style') || '') + 'border-collapse:collapse;')
+  })
+  // 替换mentions
+  let mentions = doc.querySelectorAll('[data-w-e-type="mention"]')
+  mentions.forEach((item) => {
+    const mentionId = JSON.parse(decodeURIComponent(item.getAttribute('data-info') ?? ''))['id']
+    item.innerHTML = printDataMap.value[mentionId] ?? ''
+  })
+  // 替换流程记录
+  let processRecords = doc.querySelectorAll('[data-w-e-type="process-record"]')
+  let processRecordTable : Element = document.createElement('table')
+  if (processRecords.length > 0) {
+    // 构建流程记录html
+    processRecordTable.setAttribute('border', '1')
+    processRecordTable.setAttribute('style', 'width:100%;border-collapse:collapse;')
+    const headTr = document.createElement('tr')
+    const headTd = document.createElement('td')
+    headTd.setAttribute('colspan', '2')
+    headTd.setAttribute('width', 'auto')
+    headTd.setAttribute('style', 'text-align: center;')
+    headTd.innerHTML = '流程节点'
+    headTr.appendChild(headTd)
+    processRecordTable.appendChild(headTr)
+    printData.value.approveNodes.forEach(item => {
+      const tr = document.createElement('tr')
+      const td1 = document.createElement('td')
+      td1.innerHTML = item.nodeName
+      const td2 = document.createElement('td')
+      td2.innerHTML = item.nodeDesc
+      tr.appendChild(td1)
+      tr.appendChild(td2)
+      processRecordTable.appendChild(tr)
+    })
+  }
+  processRecords.forEach(item => {
+    item.innerHTML = processRecordTable.outerHTML
+  })
+  // 返回html
+  return doc.body.innerHTML
+}
+
 const printObj = ref({
   id: 'printDivTag',
   popTitle: '&nbsp',
@@ -36,7 +126,7 @@ const printObj = ref({
 <template>
   <el-dialog v-loading="loading" v-model="visible" :show-close="false">
     <div id="printDivTag">
-      <div v-if="printData.printTemplateEnable" v-html="printData.printTemplateHtml"></div>
+      <div v-if="printData.printTemplateEnable" v-html="getPrintTemplateHTML()"></div>
       <div v-else>
         <h2 class="text-center">{{ printData.processName }}</h2>
         <div class="text-right text-15px">{{ '打印人员: ' + userName }}</div>
@@ -48,27 +138,29 @@ const printObj = ref({
           <tbody>
             <tr>
               <td class="p-5px w-25%">发起人</td>
-              <td class="p-5px w-25%">{{ printData.startUser }}</td>
+              <td class="p-5px w-25%">{{ printData.startUser.nickname }}</td>
               <td class="p-5px w-25%">发起时间</td>
               <td class="p-5px w-25%">{{ printData.startTime }}</td>
             </tr>
             <tr>
               <td class="p-5px w-25%">所属部门</td>
-              <td class="p-5px w-25%">{{ printData.startUserDept }}</td>
+              <td class="p-5px w-25%">{{ printData.startUser.deptName }}</td>
               <td class="p-5px w-25%">流程状态</td>
-              <td class="p-5px w-25%">{{ printData.processStatusShow }}</td>
+              <td class="p-5px w-25%">
+                {{ getDictLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, printData.processStatus) }}
+              </td>
             </tr>
             <tr>
               <td class="p-5px w-100% text-center" colspan="4">
                 <h4>表单内容</h4>
               </td>
             </tr>
-            <tr v-for="item in printData.formFields" :key="item.formId">
+            <tr v-for="item in formFields" :key="item.id">
               <td class="p-5px w-20%">
-                {{ item.formName }}
+                {{ item.name }}
               </td>
               <td class="p-5px w-80%" colspan="3">
-                <div v-html="item.formValueShow"></div>
+                <div v-html="item.html"></div>
               </td>
             </tr>
             <tr>
@@ -98,11 +190,4 @@ const printObj = ref({
       </div>
     </template>
   </el-dialog>
-  <!-- TODO @lesan：最下面的 table 央视，可以去掉么？ -->
 </template>
-
-<style lang="scss">
-table {
-  border-collapse: collapse;
-}
-</style>
-- 
Gitee


From 535ccd33890b00c34d8558e433b143b5706eb1f5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 4 Sep 2025 22:53:11 +0800
Subject: [PATCH 11/17] =?UTF-8?q?review=EF=BC=9A=E3=80=90bpm=20=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E3=80=91=E6=B5=81=E7=A8=8B=E6=89=93=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/detail/PrintDialog.vue   | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue
index dfa1fe6bf..527b0e771 100644
--- a/src/views/bpm/processInstance/detail/PrintDialog.vue
+++ b/src/views/bpm/processInstance/detail/PrintDialog.vue
@@ -22,7 +22,6 @@ const open = async (id: string) => {
     printData.value = await ProcessInstanceApi.getProcessInstancePrintData(id)
     initPrintDataMap()
     parseFormFields()
-    console.log(printData.value)
   } finally {
     loading.value = false
   }
@@ -31,6 +30,7 @@ const open = async (id: string) => {
 defineExpose({ open })
 
 const parseFormFields = () => {
+  // TODO @lesan：form field 有可能基于 form-create 什么 api 生成么？好像也挺难的 = =
   const formFieldsObj = decodeFields(printData.value.formFields)
   const processVariables = printData.value.processVariables
   let res: any = []
@@ -39,10 +39,10 @@ const parseFormFields = () => {
     const name = item['title']
     let html = '暂不支持此类型的表单展示'
     // TODO 完善各类型表单的展示
+    // TODO @lesan：要不 UploadImg、UploadFile 特殊处理下，其它就 else processVariables[item['field']]？
     if (item['type'] === 'input') {
       html = processVariables[item['field']]
-    }
-    if (item['type'] === 'UploadImg') {
+    } else if (item['type'] === 'UploadImg') {
       html = `<img src="${processVariables[item['field']]}" style="max-width: 600px" />`
     }
     printDataMap.value[item['field']] = html
@@ -75,7 +75,7 @@ const getPrintTemplateHTML = () => {
     item.setAttribute('border', '1')
     item.setAttribute('style', (item.getAttribute('style') || '') + 'border-collapse:collapse;')
   })
-  // 替换mentions
+  // 替换 mentions
   let mentions = doc.querySelectorAll('[data-w-e-type="mention"]')
   mentions.forEach((item) => {
     const mentionId = JSON.parse(decodeURIComponent(item.getAttribute('data-info') ?? ''))['id']
@@ -83,7 +83,7 @@ const getPrintTemplateHTML = () => {
   })
   // 替换流程记录
   let processRecords = doc.querySelectorAll('[data-w-e-type="process-record"]')
-  let processRecordTable : Element = document.createElement('table')
+  let processRecordTable: Element = document.createElement('table')
   if (processRecords.length > 0) {
     // 构建流程记录html
     processRecordTable.setAttribute('border', '1')
@@ -96,7 +96,7 @@ const getPrintTemplateHTML = () => {
     headTd.innerHTML = '流程节点'
     headTr.appendChild(headTd)
     processRecordTable.appendChild(headTr)
-    printData.value.approveNodes.forEach(item => {
+    printData.value.approveNodes.forEach((item) => {
       const tr = document.createElement('tr')
       const td1 = document.createElement('td')
       td1.innerHTML = item.nodeName
@@ -107,10 +107,10 @@ const getPrintTemplateHTML = () => {
       processRecordTable.appendChild(tr)
     })
   }
-  processRecords.forEach(item => {
+  processRecords.forEach((item) => {
     item.innerHTML = processRecordTable.outerHTML
   })
-  // 返回html
+  // 返回 html
   return doc.body.innerHTML
 }
 
-- 
Gitee


From d64b49ba9427d3b70e86d1a9c742e3d6568db457 Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Sat, 6 Sep 2025 10:37:41 +0800
Subject: [PATCH 12/17] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../processInstance/detail/PrintDialog.vue    | 129 ++++++++++++++----
 1 file changed, 101 insertions(+), 28 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue
index 527b0e771..37ce48a04 100644
--- a/src/views/bpm/processInstance/detail/PrintDialog.vue
+++ b/src/views/bpm/processInstance/detail/PrintDialog.vue
@@ -3,7 +3,9 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { useUserStore } from '@/store/modules/user'
 import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE, getDictLabel } from '@/utils/dict'
-import { decodeFields } from '@/utils/formCreate'
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import formCreate from "@form-create/element-ui";
 
 const userStore = useUserStore()
 
@@ -16,6 +18,21 @@ const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'))
 const formFields = ref()
 const printDataMap = ref({})
 
+const fApi = ref<ApiAttrs>()
+const detailForm = ref({
+  rule: [],
+  option: {},
+  value: {}
+})
+
+const fApiH = ref<ApiAttrs>()
+const detailFormH = ref({
+  rule: [],
+  option: {},
+  value: {}
+})
+const fcRef = ref()
+
 const open = async (id: string) => {
   loading.value = true
   try {
@@ -30,9 +47,38 @@ const open = async (id: string) => {
 defineExpose({ open })
 
 const parseFormFields = () => {
+  const processInstance = printData.value.processInstance
+  const processDefinition = processInstance.processDefinition
+  setConfAndFields2(
+    detailForm,
+    processDefinition.formConf,
+    processDefinition.formFields,
+    processInstance.formVariables
+  )
+  detailForm.value.option = {
+    submitBtn: false,
+    resetBtn: false,
+    form: {
+      disabled: true
+    }
+  }
+  setConfAndFields2(
+    detailFormH,
+    processDefinition.formConf,
+    processDefinition.formFields,
+    processInstance.formVariables
+  )
+  detailFormH.value.option = {
+    submitBtn: false,
+    resetBtn: false,
+    form: {
+      disabled: true
+    }
+  }
+  return
   // TODO @lesan：form field 有可能基于 form-create 什么 api 生成么？好像也挺难的 = =
   const formFieldsObj = decodeFields(printData.value.formFields)
-  const processVariables = printData.value.processVariables
+  const processVariables = printData.value.processInstance.formVariables
   let res: any = []
   for (const item of formFieldsObj) {
     const id = item['field']
@@ -40,6 +86,7 @@ const parseFormFields = () => {
     let html = '暂不支持此类型的表单展示'
     // TODO 完善各类型表单的展示
     // TODO @lesan：要不 UploadImg、UploadFile 特殊处理下，其它就 else processVariables[item['field']]？
+    // TODO @芋艿：感觉很多都要处理一下，select那些都要转为可读的label，还有子表单那些，都需要处理一下...
     if (item['type'] === 'input') {
       html = processVariables[item['field']]
     } else if (item['type'] === 'UploadImg') {
@@ -52,15 +99,15 @@ const parseFormFields = () => {
 }
 
 const initPrintDataMap = () => {
-  printDataMap.value['startUser'] = printData.value.startUser.nickname
-  printDataMap.value['startUserDept'] = printData.value.startUser.deptName
-  printDataMap.value['processName'] = printData.value.processName
-  printDataMap.value['processNum'] = printData.value.processInstanceId
-  printDataMap.value['startTime'] = printData.value.startTime
-  printDataMap.value['endTime'] = printData.value.endTime
+  printDataMap.value['startUser'] = printData.value.processInstance.startUser.nickname
+  printDataMap.value['startUserDept'] = printData.value.processInstance.startUser.deptName
+  printDataMap.value['processName'] = printData.value.processInstance.name
+  printDataMap.value['processNum'] = printData.value.processInstance.id
+  printDataMap.value['startTime'] = formatDate(printData.value.processInstance.startTime)
+  printDataMap.value['endTime'] = formatDate(printData.value.processInstance.endTime)
   printDataMap.value['processStatus'] = getDictLabel(
     DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
-    printData.value.processStatus
+    printData.value.processInstance.status
   )
   printDataMap.value['printUsername'] = userName.value
   printDataMap.value['printTime'] = printTime.value
@@ -96,12 +143,12 @@ const getPrintTemplateHTML = () => {
     headTd.innerHTML = '流程节点'
     headTr.appendChild(headTd)
     processRecordTable.appendChild(headTr)
-    printData.value.approveNodes.forEach((item) => {
+    printData.value.tasks.forEach((item) => {
       const tr = document.createElement('tr')
       const td1 = document.createElement('td')
-      td1.innerHTML = item.nodeName
+      td1.innerHTML = item.name
       const td2 = document.createElement('td')
-      td2.innerHTML = item.nodeDesc
+      td2.innerHTML = item.description
       tr.appendChild(td1)
       tr.appendChild(td2)
       processRecordTable.appendChild(tr)
@@ -114,6 +161,25 @@ const getPrintTemplateHTML = () => {
   return doc.body.innerHTML
 }
 
+const html = ref('')
+const handleDialogOpened = async () => {
+  const processInstance = printData.value.processInstance
+  const processDefinition = processInstance.processDefinition
+  let fcData = {
+    rule: [],
+    option: {},
+    value: {}
+  }
+  setConfAndFields2(
+    fcData,
+    processDefinition.formConf,
+    processDefinition.formFields,
+    processInstance.formVariables
+  )
+  const api = formCreate.create(fcData.rule,fcData.option)
+  console.log(api)
+}
+
 const printObj = ref({
   id: 'printDivTag',
   popTitle: '&nbsp',
@@ -128,26 +194,31 @@ const printObj = ref({
     <div id="printDivTag">
       <div v-if="printData.printTemplateEnable" v-html="getPrintTemplateHTML()"></div>
       <div v-else>
-        <h2 class="text-center">{{ printData.processName }}</h2>
+        <h2 class="text-center">{{ printData.processInstance.name }}</h2>
         <div class="text-right text-15px">{{ '打印人员: ' + userName }}</div>
         <div class="flex justify-between">
-          <div class="text-15px">{{ '流程编号: ' + printData.processInstanceId }}</div>
+          <div class="text-15px">{{ '流程编号: ' + printData.processInstance.id }}</div>
           <div class="text-15px">{{ '打印时间: ' + printTime }}</div>
         </div>
         <table class="mt-20px w-100%" border="1" style="border-collapse: collapse">
           <tbody>
             <tr>
               <td class="p-5px w-25%">发起人</td>
-              <td class="p-5px w-25%">{{ printData.startUser.nickname }}</td>
+              <td class="p-5px w-25%">{{ printData.processInstance.startUser.nickname }}</td>
               <td class="p-5px w-25%">发起时间</td>
-              <td class="p-5px w-25%">{{ printData.startTime }}</td>
+              <td class="p-5px w-25%">{{ formatDate(printData.processInstance.startTime) }}</td>
             </tr>
             <tr>
               <td class="p-5px w-25%">所属部门</td>
-              <td class="p-5px w-25%">{{ printData.startUser.deptName }}</td>
+              <td class="p-5px w-25%">{{ printData.processInstance.startUser.deptName }}</td>
               <td class="p-5px w-25%">流程状态</td>
               <td class="p-5px w-25%">
-                {{ getDictLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, printData.processStatus) }}
+                {{
+                  getDictLabel(
+                    DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+                    printData.processInstance.status
+                  )
+                }}
               </td>
             </tr>
             <tr>
@@ -155,12 +226,14 @@ const printObj = ref({
                 <h4>表单内容</h4>
               </td>
             </tr>
-            <tr v-for="item in formFields" :key="item.id">
-              <td class="p-5px w-20%">
-                {{ item.name }}
-              </td>
-              <td class="p-5px w-80%" colspan="3">
-                <div v-html="item.html"></div>
+            <tr>
+              <td class="p-5px w-100% text-center" colspan="4">
+                <form-create
+                  v-model="detailForm.value"
+                  v-model:api="fApi"
+                  :option="detailForm.option"
+                  :rule="detailForm.rule"
+                />
               </td>
             </tr>
             <tr>
@@ -168,12 +241,12 @@ const printObj = ref({
                 <h4>流程节点</h4>
               </td>
             </tr>
-            <tr v-for="item in printData.approveNodes" :key="item.nodeId">
+            <tr v-for="item in printData.tasks" :key="item.id">
               <td class="p-5px w-20%">
-                {{ item.nodeName }}
+                {{ item.name }}
               </td>
               <td class="p-5px w-80%" colspan="3">
-                {{ item.nodeDesc }}
+                {{ item.description }}
                 <div v-if="item.signUrl !== ''">
                   <img class="w-90px h-40px" :src="item.signUrl" alt="" />
                 </div>
@@ -185,7 +258,7 @@ const printObj = ref({
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="visible = false">取 消</el-button>
+        <el-button @click="handleDialogOpened">取 消</el-button>
         <el-button type="primary" v-print="printObj"> 打 印</el-button>
       </div>
     </template>
-- 
Gitee


From cf357cb1a29a51c7ff90ec4b04feac90ca8c6700 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 6 Sep 2025 10:39:43 +0800
Subject: [PATCH 13/17] =?UTF-8?q?fix=EF=BC=9A=E3=80=90system=20=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E7=AE=A1=E7=90=86=E3=80=91=E9=82=AE=E7=AE=B1=E6=A8=A1?=
 =?UTF-8?q?=E7=89=88=E7=9A=84=E5=88=97=E8=A1=A8=E5=AE=BD=E5=BA=A6=E5=A4=AA?=
 =?UTF-8?q?=E5=B0=8F=EF=BC=8C=E6=A0=B7=E5=BC=8F=E4=B8=91=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/mail/template/index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/system/mail/template/index.vue b/src/views/system/mail/template/index.vue
index 03ea34ede..5913f3013 100644
--- a/src/views/system/mail/template/index.vue
+++ b/src/views/system/mail/template/index.vue
@@ -61,7 +61,6 @@
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
-          style="width: 240px"
           type="daterange"
           value-format="YYYY-MM-DD HH:mm:ss"
           start-placeholder="开始日期"
@@ -122,7 +121,7 @@
         label="模板内容"
         align="center"
         prop="content"
-        width="200"
+        min-width="200"
         :show-overflow-tooltip="true"
       />
       <el-table-column label="邮箱账号" align="center" prop="accountId" width="200">
-- 
Gitee


From bfd918271f30d3a33aa4c6fbdc2a57cbb8512853 Mon Sep 17 00:00:00 2001
From: LesanOuO <1960681385@qq.com>
Date: Sat, 6 Sep 2025 12:02:12 +0800
Subject: [PATCH 14/17] =?UTF-8?q?fix:=20=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model/form/PrintTemplate/MentionModal.vue |  2 +-
 .../processInstance/detail/PrintDialog.vue    | 98 ++++---------------
 2 files changed, 22 insertions(+), 78 deletions(-)

diff --git a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
index 598867e2f..badeb420e 100644
--- a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
+++ b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
@@ -13,7 +13,7 @@ const list = ref([
   { id: 'startTime', name: '发起时间' },
   { id: 'endTime', name: '结束时间' },
   { id: 'processStatus', name: '流程状态' },
-  { id: 'printUsername', name: '打印人' },
+  { id: 'printUser', name: '打印人' },
   { id: 'printTime', name: '打印时间' }
 ])
 const searchedList = computed(() => {
diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue
index 37ce48a04..4be26eed6 100644
--- a/src/views/bpm/processInstance/detail/PrintDialog.vue
+++ b/src/views/bpm/processInstance/detail/PrintDialog.vue
@@ -3,9 +3,7 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { useUserStore } from '@/store/modules/user'
 import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE, getDictLabel } from '@/utils/dict'
-import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import formCreate from "@form-create/element-ui";
+import { decodeFields } from '@/utils/formCreate'
 
 const userStore = useUserStore()
 
@@ -18,21 +16,6 @@ const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'))
 const formFields = ref()
 const printDataMap = ref({})
 
-const fApi = ref<ApiAttrs>()
-const detailForm = ref({
-  rule: [],
-  option: {},
-  value: {}
-})
-
-const fApiH = ref<ApiAttrs>()
-const detailFormH = ref({
-  rule: [],
-  option: {},
-  value: {}
-})
-const fcRef = ref()
-
 const open = async (id: string) => {
   loading.value = true
   try {
@@ -47,37 +30,9 @@ const open = async (id: string) => {
 defineExpose({ open })
 
 const parseFormFields = () => {
-  const processInstance = printData.value.processInstance
-  const processDefinition = processInstance.processDefinition
-  setConfAndFields2(
-    detailForm,
-    processDefinition.formConf,
-    processDefinition.formFields,
-    processInstance.formVariables
-  )
-  detailForm.value.option = {
-    submitBtn: false,
-    resetBtn: false,
-    form: {
-      disabled: true
-    }
-  }
-  setConfAndFields2(
-    detailFormH,
-    processDefinition.formConf,
-    processDefinition.formFields,
-    processInstance.formVariables
-  )
-  detailFormH.value.option = {
-    submitBtn: false,
-    resetBtn: false,
-    form: {
-      disabled: true
-    }
-  }
-  return
   // TODO @lesan：form field 有可能基于 form-create 什么 api 生成么？好像也挺难的 = =
-  const formFieldsObj = decodeFields(printData.value.formFields)
+  // TODO @芋艿：默认打印可以直接用form-create的预览表单模式，但是自定义模板打印就没法这么做
+  const formFieldsObj = decodeFields(printData.value.processInstance.processDefinition.formFields)
   const processVariables = printData.value.processInstance.formVariables
   let res: any = []
   for (const item of formFieldsObj) {
@@ -109,7 +64,7 @@ const initPrintDataMap = () => {
     DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
     printData.value.processInstance.status
   )
-  printDataMap.value['printUsername'] = userName.value
+  printDataMap.value['printUser'] = userName.value
   printDataMap.value['printTime'] = printTime.value
 }
 
@@ -161,25 +116,6 @@ const getPrintTemplateHTML = () => {
   return doc.body.innerHTML
 }
 
-const html = ref('')
-const handleDialogOpened = async () => {
-  const processInstance = printData.value.processInstance
-  const processDefinition = processInstance.processDefinition
-  let fcData = {
-    rule: [],
-    option: {},
-    value: {}
-  }
-  setConfAndFields2(
-    fcData,
-    processDefinition.formConf,
-    processDefinition.formFields,
-    processInstance.formVariables
-  )
-  const api = formCreate.create(fcData.rule,fcData.option)
-  console.log(api)
-}
-
 const printObj = ref({
   id: 'printDivTag',
   popTitle: '&nbsp',
@@ -226,14 +162,22 @@ const printObj = ref({
                 <h4>表单内容</h4>
               </td>
             </tr>
-            <tr>
-              <td class="p-5px w-100% text-center" colspan="4">
-                <form-create
-                  v-model="detailForm.value"
-                  v-model:api="fApi"
-                  :option="detailForm.option"
-                  :rule="detailForm.rule"
-                />
+            <!--            <tr>-->
+            <!--              <td class="p-5px w-100% text-center" colspan="4">-->
+            <!--                <form-create-->
+            <!--                  v-model="detailForm.value"-->
+            <!--                  v-model:api="fApi"-->
+            <!--                  :option="detailForm.option"-->
+            <!--                  :rule="detailForm.rule"-->
+            <!--                />-->
+            <!--              </td>-->
+            <!--            </tr>-->
+            <tr v-for="item in formFields" :key="item.id">
+              <td class="p-5px w-20%">
+                {{ item.name }}
+              </td>
+              <td class="p-5px w-80%" colspan="3">
+                <div v-html="item.html"></div>
               </td>
             </tr>
             <tr>
@@ -258,7 +202,7 @@ const printObj = ref({
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="handleDialogOpened">取 消</el-button>
+        <el-button @click="visible = false">取 消</el-button>
         <el-button type="primary" v-print="printObj"> 打 印</el-button>
       </div>
     </template>
-- 
Gitee


From bcf8f6c821c441c2875d2d436680a6228aceea17 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 7 Sep 2025 17:21:52 +0800
Subject: [PATCH 15/17] =?UTF-8?q?review=EF=BC=9A=E3=80=90bpm=20=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E3=80=91=E6=B5=81=E7=A8=8B=E6=89=93=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/detail/PrintDialog.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue
index 4be26eed6..99cde927b 100644
--- a/src/views/bpm/processInstance/detail/PrintDialog.vue
+++ b/src/views/bpm/processInstance/detail/PrintDialog.vue
@@ -42,6 +42,7 @@ const parseFormFields = () => {
     // TODO 完善各类型表单的展示
     // TODO @lesan：要不 UploadImg、UploadFile 特殊处理下，其它就 else processVariables[item['field']]？
     // TODO @芋艿：感觉很多都要处理一下，select那些都要转为可读的label，还有子表单那些，都需要处理一下...
+    // TODO @lesan：有办法基于 form-create api 来读取值么？如果不行，就兜底让大模型生成一些常用的。子表单可以往后放；
     if (item['type'] === 'input') {
       html = processVariables[item['field']]
     } else if (item['type'] === 'UploadImg') {
@@ -191,8 +192,8 @@ const printObj = ref({
               </td>
               <td class="p-5px w-80%" colspan="3">
                 {{ item.description }}
-                <div v-if="item.signUrl !== ''">
-                  <img class="w-90px h-40px" :src="item.signUrl" alt="" />
+                <div v-if="item.signPicUrl && item.signPicUrl.length > 0">
+                  <img class="w-90px h-40px" :src="item.signPicUrl" alt="" />
                 </div>
               </td>
             </tr>
-- 
Gitee


From ba640310152826d5aada960296847d5fb3a2ed48 Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Mon, 8 Sep 2025 09:57:02 +0800
Subject: [PATCH 16/17] =?UTF-8?q?fix:=20=E6=89=93=E5=8D=B0=E5=8F=AA?=
 =?UTF-8?q?=E8=83=BD=E6=98=BE=E7=A4=BA=E4=B8=80=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/detail/PrintDialog.vue      | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue
index 99cde927b..c152c0196 100644
--- a/src/views/bpm/processInstance/detail/PrintDialog.vue
+++ b/src/views/bpm/processInstance/detail/PrintDialog.vue
@@ -128,7 +128,7 @@ const printObj = ref({
 
 <template>
   <el-dialog v-loading="loading" v-model="visible" :show-close="false">
-    <div id="printDivTag">
+    <div id="printDivTag" style="word-break: break-all;">
       <div v-if="printData.printTemplateEnable" v-html="getPrintTemplateHTML()"></div>
       <div v-else>
         <h2 class="text-center">{{ printData.processInstance.name }}</h2>
@@ -209,3 +209,14 @@ const printObj = ref({
     </template>
   </el-dialog>
 </template>
+
+<style>
+@media print {
+  @page {
+    size: auto;
+  }
+  body, html, div{
+    height: auto!important;
+  }
+}
+</style>
-- 
Gitee


From bd91bd9057a803f2ec7064267db57865a88f2620 Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Mon, 8 Sep 2025 11:27:31 +0800
Subject: [PATCH 17/17] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0radio=E3=80=81c?=
 =?UTF-8?q?heckbox=E3=80=81select=E6=89=93=E5=8D=B0=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../processInstance/detail/PrintDialog.vue    | 56 +++++++++++--------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue
index c152c0196..ab17f8c0f 100644
--- a/src/views/bpm/processInstance/detail/PrintDialog.vue
+++ b/src/views/bpm/processInstance/detail/PrintDialog.vue
@@ -30,23 +30,37 @@ const open = async (id: string) => {
 defineExpose({ open })
 
 const parseFormFields = () => {
-  // TODO @lesan：form field 有可能基于 form-create 什么 api 生成么？好像也挺难的 = =
-  // TODO @芋艿：默认打印可以直接用form-create的预览表单模式，但是自定义模板打印就没法这么做
   const formFieldsObj = decodeFields(printData.value.processInstance.processDefinition.formFields)
   const processVariables = printData.value.processInstance.formVariables
   let res: any = []
   for (const item of formFieldsObj) {
     const id = item['field']
     const name = item['title']
-    let html = '暂不支持此类型的表单展示'
-    // TODO 完善各类型表单的展示
-    // TODO @lesan：要不 UploadImg、UploadFile 特殊处理下，其它就 else processVariables[item['field']]？
-    // TODO @芋艿：感觉很多都要处理一下，select那些都要转为可读的label，还有子表单那些，都需要处理一下...
-    // TODO @lesan：有办法基于 form-create api 来读取值么？如果不行，就兜底让大模型生成一些常用的。子表单可以往后放；
-    if (item['type'] === 'input') {
-      html = processVariables[item['field']]
-    } else if (item['type'] === 'UploadImg') {
-      html = `<img src="${processVariables[item['field']]}" style="max-width: 600px" />`
+    const variable = processVariables[item['field']]
+    let html = variable
+    switch (item['type']) {
+      case 'UploadImg': {
+        let imgEl = document.createElement('img')
+        imgEl.setAttribute('src', variable)
+        imgEl.setAttribute('style', 'max-width: 600px;')
+        html = imgEl.outerHTML
+        break
+      }
+      case 'radio':
+      case 'checkbox':
+      case 'select': {
+        const options = item['options'] || []
+        const temp: any = []
+        if (Array.isArray(variable)) {
+          const labels = options.filter((o) => variable.includes(o.value)).map((o) => o.label)
+          temp.push(...labels)
+        } else {
+          const opt = options.find((o) => o.value === variable)
+          temp.push(opt.label)
+        }
+        html = temp.join(',')
+      }
+      // TODO 更多表单打印展示
     }
     printDataMap.value[item['field']] = html
     res.push({ id, name, html })
@@ -128,7 +142,7 @@ const printObj = ref({
 
 <template>
   <el-dialog v-loading="loading" v-model="visible" :show-close="false">
-    <div id="printDivTag" style="word-break: break-all;">
+    <div id="printDivTag" style="word-break: break-all">
       <div v-if="printData.printTemplateEnable" v-html="getPrintTemplateHTML()"></div>
       <div v-else>
         <h2 class="text-center">{{ printData.processInstance.name }}</h2>
@@ -163,16 +177,6 @@ const printObj = ref({
                 <h4>表单内容</h4>
               </td>
             </tr>
-            <!--            <tr>-->
-            <!--              <td class="p-5px w-100% text-center" colspan="4">-->
-            <!--                <form-create-->
-            <!--                  v-model="detailForm.value"-->
-            <!--                  v-model:api="fApi"-->
-            <!--                  :option="detailForm.option"-->
-            <!--                  :rule="detailForm.rule"-->
-            <!--                />-->
-            <!--              </td>-->
-            <!--            </tr>-->
             <tr v-for="item in formFields" :key="item.id">
               <td class="p-5px w-20%">
                 {{ item.name }}
@@ -211,12 +215,16 @@ const printObj = ref({
 </template>
 
 <style>
+/* 修复打印只显示一页 */
 @media print {
   @page {
     size: auto;
   }
-  body, html, div{
-    height: auto!important;
+
+  body,
+  html,
+  div {
+    height: auto !important;
   }
 }
 </style>
-- 
Gitee