From 64eea34a63fc977855588aadb315f3ec5e4dafce Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 31 May 2026 18:22:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(bpm):=20=E5=AE=8C=E5=96=84=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=AE=9E=E4=BE=8B=E6=89=93=E5=8D=B0=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Vben5 web-antd/web-ele/web-antdv-next 同步支持更多表单字段打印
- Vue3 + Element Plus 流程打印补齐字典、用户、部门、省市区、文件、图片、开关、富文本等字段展示
- 普通字段和流程记录改为安全文本渲染，保留富文本 HTML 展示
- 打印时间改为每次打开弹窗时刷新
- web-ele 补充 ElButton 显式导入，避免运行时组件解析风险
---
 .../detail/modules/process-print.vue          |  46 +-
 .../detail/modules/process-print.vue          | 423 +++++++++++++++---
 2 files changed, 403 insertions(+), 66 deletions(-)

diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue
index 3f4dec119..3d487af22 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue
@@ -90,6 +90,7 @@ const [Modal, modalApi] = useVbenModal({
 /** 获取打印数据 */
 async function fetchPrintData(id: string) {
   printData.value = await getProcessInstancePrintData(id);
+  printTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm');
   initPrintDataMap();
   await parseFormFields();
 }
@@ -154,7 +155,7 @@ function tryFormatDate(value: unknown) {
     return '';
   }
   const formatted = formatDate(value as Date | number | string);
-  return formatted === 'Invalid Date' ? String(value) : formatted;
+  return formatted === 'Invalid Date' ? escapeHtml(value) : formatted;
 }
 
 function formatDateValue(value: unknown) {
@@ -164,6 +165,15 @@ function formatDateValue(value: unknown) {
   return tryFormatDate(value);
 }
 
+function escapeHtml(value: unknown) {
+  return String(value)
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
 function formatPrimitiveValue(value: unknown): string {
   if (isEmptyValue(value)) {
     return '';
@@ -185,9 +195,9 @@ function formatPrimitiveValue(value: unknown): string {
       getRecordValue(record, 'url') ??
       getRecordValue(record, 'value') ??
       JSON.stringify(value);
-    return String(displayValue);
+    return escapeHtml(displayValue);
   }
-  return String(value);
+  return escapeHtml(value);
 }
 
 function createImageHtml(url: string) {
@@ -248,7 +258,7 @@ function mapValuesWithOptions(
         (option) =>
           option?.value === item || String(option?.value ?? '') === String(item),
       );
-      return matched?.label ?? String(item);
+      return escapeHtml(matched?.label ?? String(item));
     })
     .filter((s) => isNotEmptyString(s));
   return labels.join(', ');
@@ -276,9 +286,11 @@ function mapValueWithLabelMap(
 ) {
   const values = toValueArray(value);
   const labels = values
-    .map((item) => labelMap.get(String(item)) ?? String(item))
+    .map((item) => escapeHtml(labelMap.get(String(item)) ?? String(item)))
     .filter((s) => isNotEmptyString(s));
-  return labels.length > 0 ? labels.join(separator) : formatPrimitiveValue(values);
+  return labels.length > 0
+    ? labels.join(escapeHtml(separator))
+    : formatPrimitiveValue(values);
 }
 
 /**
@@ -380,7 +392,12 @@ function formatPrintField(
       const options = getDictOptions(dictType, valueType);
       return mapValuesWithOptions(value, options);
     }
-    case 'FileUpload': {
+    case 'Editor':
+    case 'Tinymce': {
+      return isEmptyValue(value) ? '' : String(value);
+    }
+    case 'FileUpload':
+    case 'UploadFile': {
       return renderFileListHtml(value);
     }
     case 'IframeComponent': {
@@ -394,21 +411,20 @@ function formatPrintField(
     }
     case 'ImagesUpload':
     case 'ImageUpload':
-    case 'UploadImg': {
+    case 'UploadImg':
+    case 'UploadImgs': {
       return renderImageListHtml(value);
     }
     case 'switch': {
       if (isEmptyValue(value)) return '否';
-      const checkedVal = getRuleProp(rule, 'checkedValue');
+      const checkedVal =
+        getRuleProp(rule, 'checkedValue') ?? getRuleProp(rule, 'activeValue');
       const isChecked =
         checkedVal !== undefined && checkedVal !== null
           ? value === checkedVal
           : Boolean(value);
       return isChecked ? '是' : '否';
     }
-    case 'Tinymce': {
-      return isEmptyValue(value) ? '' : String(value);
-    }
     case 'UserSelect': {
       if (String(getRuleProp(rule, 'returnType')) === 'name') {
         return formatPrimitiveValue(value);
@@ -481,7 +497,7 @@ function getPrintTemplateHTML() {
     const headTd = document.createElement('td');
     headTd.setAttribute('colspan', '2');
     headTd.setAttribute('class', 'border border-black p-1.5 text-center');
-    headTd.innerHTML = '流程记录';
+    headTd.textContent = '流程记录';
     headTr.append(headTd);
     processRecordTable.append(headTr);
 
@@ -489,10 +505,10 @@ function getPrintTemplateHTML() {
       const tr = document.createElement('tr');
       const td1 = document.createElement('td');
       td1.setAttribute('class', 'border border-black p-1.5');
-      td1.innerHTML = item.name;
+      td1.textContent = item.name;
       const td2 = document.createElement('td');
       td2.setAttribute('class', 'border border-black p-1.5');
-      td2.innerHTML = item.description;
+      td2.textContent = item.description;
       tr.append(td1);
       tr.append(td2);
       processRecordTable.append(tr);
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue
index e385e933e..1853f187c 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue
@@ -1,27 +1,59 @@
 <script setup lang="ts">
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+import type { SystemAreaApi } from '#/api/system/area';
 
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
-import { getDictLabel } from '@vben/hooks';
+import { getDictLabel, getDictOptions } from '@vben/hooks';
 import { useUserStore } from '@vben/stores';
 import { formatDate } from '@vben/utils';
 
+import { ElButton } from 'element-plus';
 // @ts-expect-error - 安装 vue3-print-nb 局部指令 v-print
 import vPrint from 'vue3-print-nb';
 
 import { getProcessInstancePrintData } from '#/api/bpm/processInstance';
+import { getAreaTree } from '#/api/system/area';
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getSimpleUserList } from '#/api/system/user';
 import { decodeFields } from '#/components/form-create';
 
 const userStore = useUserStore();
 
+interface FormFieldItem {
+  html: string;
+  id: string;
+  name: string;
+}
+
+interface FormFieldOption {
+  label?: string;
+  value?: unknown;
+}
+
+type FormFieldRule = Record<string, unknown> & {
+  field?: string;
+  options?: FormFieldOption[];
+  props?: Record<string, unknown>;
+  title?: string;
+  type?: string;
+};
+
+type PrintableRecord = Record<string, unknown>;
+
+interface PrintLookupMaps {
+  areaMap: Map<string, string>;
+  deptMap: Map<string, string>;
+  userMap: Map<string, string>;
+}
+
 const printData = ref<BpmProcessInstanceApi.ProcessPrintDataRespVO>();
 const userName = computed(() => userStore.userInfo?.nickname ?? '');
 const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'));
-const formFields = ref<any[]>([]);
-const printDataMap = ref<Record<string, any>>({});
+const formFields = ref<FormFieldItem[]>([]);
+const printDataMap = ref<Record<string, string>>({});
 
 /** 打印配置 */
 const printObj = ref({
@@ -58,58 +90,28 @@ const [Modal, modalApi] = useVbenModal({
 /** 获取打印数据 */
 async function fetchPrintData(id: string) {
   printData.value = await getProcessInstancePrintData(id);
+  printTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm');
   initPrintDataMap();
-  parseFormFields();
+  await parseFormFields();
 }
 
 /** 解析表单字段 */
-function parseFormFields() {
+async function parseFormFields() {
   if (!printData.value) return;
 
   const formFieldsObj = decodeFields(
     printData.value.processInstance.processDefinition?.formFields || [],
-  );
-  const processVariables = printData.value.processInstance.formVariables;
-  const res: any = [];
+  ) as unknown as FormFieldRule[];
+  const processVariables = printData.value.processInstance.formVariables ?? {};
+  const lookupMaps = await loadPrintLookupMaps(formFieldsObj);
+  const res: FormFieldItem[] = [];
 
   for (const item of formFieldsObj) {
-    const id = item.field;
-    const name = item.title;
-    const fieldKey = item.field as string;
+    const fieldKey = String(item.field ?? '');
+    const id = fieldKey;
+    const name = String(item.title ?? fieldKey);
     const variable = processVariables[fieldKey];
-    let html = variable;
-
-    switch (item.type) {
-      case 'checkbox':
-      case 'radio':
-      case 'select': {
-        const options = item.options;
-        const temp: any = [];
-        if (Array.isArray(options)) {
-          if (Array.isArray(variable)) {
-            const labels = options
-              .filter((o: any) => variable.includes(o.value))
-              .map((o: any) => o.label);
-            temp.push(...labels);
-          } else {
-            const opt = options.find((o: any) => o.value === variable);
-            if (opt) {
-              temp.push(opt.label);
-            }
-          }
-        }
-        html = temp.join(',');
-        break;
-      }
-      case 'UploadImg': {
-        const imgEl = document.createElement('img');
-        imgEl.setAttribute('src', variable);
-        imgEl.setAttribute('style', 'max-width: 600px;');
-        html = imgEl.outerHTML;
-        break;
-      }
-      // TODO 更多表单打印展示
-    }
+    const html = formatPrintField(item, variable, lookupMaps);
 
     printDataMap.value[fieldKey] = html;
     res.push({ id, name, html });
@@ -118,6 +120,323 @@ function parseFormFields() {
   formFields.value = res;
 }
 
+function getRuleProp(rule: FormFieldRule, key: string) {
+  return rule?.[key] ?? rule?.props?.[key];
+}
+
+function isPrintableRecord(value: unknown): value is PrintableRecord {
+  return typeof value === 'object' && value !== null;
+}
+
+function getRecordValue(record: PrintableRecord, key: string) {
+  return record[key];
+}
+
+function isNotEmptyString(value: string) {
+  return value.length > 0;
+}
+
+function isEmptyValue(value: unknown) {
+  return value === undefined || value === null || value === '';
+}
+
+function toValueArray(value: unknown) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (isEmptyValue(value)) {
+    return [];
+  }
+  return [value];
+}
+
+function tryFormatDate(value: unknown) {
+  if (isEmptyValue(value)) {
+    return '';
+  }
+  const formatted = formatDate(value as Date | number | string);
+  return formatted === 'Invalid Date' ? escapeHtml(value) : formatted;
+}
+
+function formatDateValue(value: unknown) {
+  if (Array.isArray(value)) {
+    return value.map((item) => tryFormatDate(item)).join(' ~ ');
+  }
+  return tryFormatDate(value);
+}
+
+function escapeHtml(value: unknown) {
+  return String(value)
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+function formatPrimitiveValue(value: unknown): string {
+  if (isEmptyValue(value)) {
+    return '';
+  }
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => formatPrimitiveValue(item))
+      .filter((s) => isNotEmptyString(s))
+      .join(', ');
+  }
+  if (typeof value === 'boolean') {
+    return value ? '是' : '否';
+  }
+  if (isPrintableRecord(value)) {
+    const record = value;
+    const displayValue =
+      getRecordValue(record, 'label') ??
+      getRecordValue(record, 'name') ??
+      getRecordValue(record, 'url') ??
+      getRecordValue(record, 'value') ??
+      JSON.stringify(value);
+    return escapeHtml(displayValue);
+  }
+  return escapeHtml(value);
+}
+
+function createImageHtml(url: string) {
+  const imgEl = document.createElement('img');
+  imgEl.setAttribute('src', url);
+  imgEl.setAttribute('style', 'max-width: 600px; max-height: 300px;');
+  return imgEl.outerHTML;
+}
+
+function renderImageListHtml(value: unknown) {
+  return toValueArray(value)
+    .map((item) => {
+      let url: string | undefined;
+      if (typeof item === 'string') {
+        url = item;
+      } else if (isPrintableRecord(item)) {
+        const recordUrl = getRecordValue(item, 'url');
+        url = recordUrl ? String(recordUrl) : undefined;
+      }
+      return url ? createImageHtml(String(url)) : '';
+    })
+    .filter((s) => isNotEmptyString(s))
+    .join('<br/>');
+}
+
+function createFileLinkHtml(file: unknown) {
+  const record = isPrintableRecord(file) ? file : undefined;
+  const recordUrl = record ? getRecordValue(record, 'url') : undefined;
+  const url = typeof file === 'string' ? file : String(recordUrl ?? '');
+  if (!url) {
+    return '';
+  }
+  const linkEl = document.createElement('a');
+  linkEl.setAttribute('href', String(url));
+  linkEl.setAttribute('target', '_blank');
+  linkEl.setAttribute('rel', 'noopener noreferrer');
+  const fallbackName = String(url).slice(Math.max(0, String(url).lastIndexOf('/') + 1)) || String(url);
+  const recordName = record ? getRecordValue(record, 'name') : undefined;
+  linkEl.textContent = recordName ? String(recordName) : fallbackName;
+  return linkEl.outerHTML;
+}
+
+function renderFileListHtml(value: unknown) {
+  return toValueArray(value)
+    .map((item) => createFileLinkHtml(item))
+    .filter((s) => isNotEmptyString(s))
+    .join('<br/>');
+}
+
+function mapValuesWithOptions(
+  value: unknown,
+  options: FormFieldOption[] = [],
+) {
+  const values = toValueArray(value);
+  const labels = values
+    .map((item) => {
+      const matched = options.find(
+        (option) =>
+          option?.value === item || String(option?.value ?? '') === String(item),
+      );
+      return escapeHtml(matched?.label ?? String(item));
+    })
+    .filter((s) => isNotEmptyString(s));
+  return labels.join(', ');
+}
+
+function flattenAreaTree(
+  list: Array<SystemAreaApi.Area & { children?: SystemAreaApi.Area[] }> = [],
+  map: Map<string, string> = new Map(),
+) {
+  list.forEach((item) => {
+    if (item.id !== undefined) {
+      map.set(String(item.id), item.name);
+    }
+    if (Array.isArray(item.children) && item.children.length > 0) {
+      flattenAreaTree(item.children, map);
+    }
+  });
+  return map;
+}
+
+function mapValueWithLabelMap(
+  value: unknown,
+  labelMap: Map<string, string>,
+  separator = ', ',
+) {
+  const values = toValueArray(value);
+  const labels = values
+    .map((item) => escapeHtml(labelMap.get(String(item)) ?? String(item)))
+    .filter((s) => isNotEmptyString(s));
+  return labels.length > 0
+    ? labels.join(escapeHtml(separator))
+    : formatPrimitiveValue(values);
+}
+
+/**
+ * 按当前表单字段类型按需加载打印所需的关联数据，并构建查找映射表。
+ *
+ * @param formFieldsObj - 已解码的表单字段规则列表
+ * @returns 打印展示时使用的区域、部门、用户名称映射
+ */
+async function loadPrintLookupMaps(formFieldsObj: FormFieldRule[]) {
+  const hasAreaSelect = formFieldsObj.some((item) => item.type === 'AreaSelect');
+  const hasUserSelect = formFieldsObj.some((item) => item.type === 'UserSelect');
+  const hasDeptSelect = formFieldsObj.some((item) => item.type === 'DeptSelect');
+
+  const [areaList, userList, deptList] = await Promise.all([
+    hasAreaSelect ? getAreaTree() : Promise.resolve([]),
+    hasUserSelect ? getSimpleUserList() : Promise.resolve([]),
+    hasDeptSelect ? getSimpleDeptList() : Promise.resolve([]),
+  ]);
+
+  return {
+    areaMap: flattenAreaTree(areaList as Array<SystemAreaApi.Area>),
+    deptMap: new Map(
+      (deptList ?? []).map((item) => [String(item.id), item.name] as const),
+    ),
+    userMap: new Map(
+      (userList ?? []).map(
+        (item) => [String(item.id), item.nickname ?? item.username] as const,
+      ),
+    ),
+  } satisfies PrintLookupMaps;
+}
+
+/**
+ * 根据表单字段规则和字段值，格式化为适合打印展示的 HTML 字符串。
+ *
+ * @param rule - 表单字段规则，包含字段类型、选项、props 等配置信息
+ * @param value - 该字段在流程实例中的实际值
+ * @param lookupMaps - 预加载的查找映射表，包含区域、部门、用户的 id→name 映射
+ * @returns 格式化后的 HTML 字符串（纯文本或富文本，取决于字段类型）
+ */
+function formatPrintField(
+  rule: FormFieldRule,
+  value: unknown,
+  lookupMaps: PrintLookupMaps,
+){
+  const type = String(rule.type ?? '');
+
+  switch (type) {
+    case 'AreaSelect': {
+      const separator = String(getRuleProp(rule, 'separator') || '/');
+      return mapValueWithLabelMap(value, lookupMaps.areaMap, separator);
+    }
+    case 'cascader':
+    case 'checkbox':
+    case 'radio':
+    case 'select':
+    case 'treeSelect': {
+      const options = getRuleProp(rule, 'options');
+      return Array.isArray(options) && options.length > 0
+        ? mapValuesWithOptions(value, options as FormFieldOption[])
+        : formatPrimitiveValue(value);
+    }
+    case 'date':
+    case 'DatePicker':
+    case 'datePicker':
+    case 'daterange':
+    case 'datetime':
+    case 'datetimerange':
+    case 'month':
+    case 'monthrange':
+    case 'RangePicker':
+    case 'rangePicker':
+    case 'TimePicker':
+    case 'timePicker':
+    case 'TimeRangePicker':
+    case 'timeRangePicker': {
+      return formatDateValue(value);
+    }
+    case 'DeptSelect': {
+      if (String(getRuleProp(rule, 'returnType')) === 'name') {
+        return formatPrimitiveValue(value);
+      }
+      return mapValueWithLabelMap(value, lookupMaps.deptMap);
+    }
+    case 'DictSelect': {
+      const dictType = getRuleProp(rule, 'dictType');
+      if (typeof dictType !== 'string' || !dictType) {
+        return formatPrimitiveValue(value);
+      }
+      const valueTypeMap = {
+        bool: 'boolean',
+        int: 'number',
+        str: 'string',
+      } as const;
+      const rawValueType = String(getRuleProp(rule, 'valueType') ?? '');
+      const valueType =
+        (valueTypeMap as Record<string, 'boolean' | 'number' | 'string'>)[rawValueType] ??
+        'string';
+      const options = getDictOptions(dictType, valueType);
+      return mapValuesWithOptions(value, options);
+    }
+    case 'Editor':
+    case 'Tinymce': {
+      return isEmptyValue(value) ? '' : String(value);
+    }
+    case 'FileUpload':
+    case 'UploadFile': {
+      return renderFileListHtml(value);
+    }
+    case 'IframeComponent': {
+      const propsObj = rule.props;
+      const propsUrl =
+        isPrintableRecord(propsObj)
+          ? String(getRecordValue(propsObj, 'url') ?? '')
+          : '';
+      const iframeUrl = isEmptyValue(value) ? propsUrl : String(value ?? '');
+      return iframeUrl ? createFileLinkHtml(iframeUrl) : '';
+    }
+    case 'ImagesUpload':
+    case 'ImageUpload':
+    case 'UploadImg':
+    case 'UploadImgs': {
+      return renderImageListHtml(value);
+    }
+    case 'switch': {
+      if (isEmptyValue(value)) return '否';
+      const checkedVal =
+        getRuleProp(rule, 'checkedValue') ?? getRuleProp(rule, 'activeValue');
+      const isChecked =
+        checkedVal !== undefined && checkedVal !== null
+          ? value === checkedVal
+          : Boolean(value);
+      return isChecked ? '是' : '否';
+    }
+    case 'UserSelect': {
+      if (String(getRuleProp(rule, 'returnType')) === 'name') {
+        return formatPrimitiveValue(value);
+      }
+      return mapValueWithLabelMap(value, lookupMaps.userMap);
+    }
+    default: {
+      return formatPrimitiveValue(value);
+    }
+  }
+}
+
 /** 初始化打印数据映射 */
 function initPrintDataMap() {
   if (!printData.value) return;
@@ -127,16 +446,18 @@ function initPrintDataMap() {
   printDataMap.value.startUserDept =
     printData.value.processInstance.startUser?.deptName || '';
   printDataMap.value.processName = printData.value.processInstance.name;
-  printDataMap.value.processNum = printData.value.processInstance.id;
+  printDataMap.value.processNum = String(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.processInstance.status,
+  printDataMap.value.processStatus = String(
+    getDictLabel(
+      DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+      printData.value.processInstance.status,
+    ) ?? '',
   );
   printDataMap.value.printUser = userName.value;
   printDataMap.value.printTime = printTime.value;
@@ -176,7 +497,7 @@ function getPrintTemplateHTML() {
     const headTd = document.createElement('td');
     headTd.setAttribute('colspan', '2');
     headTd.setAttribute('class', 'border border-black p-1.5 text-center');
-    headTd.innerHTML = '流程记录';
+    headTd.textContent = '流程记录';
     headTr.append(headTd);
     processRecordTable.append(headTr);
 
@@ -184,10 +505,10 @@ function getPrintTemplateHTML() {
       const tr = document.createElement('tr');
       const td1 = document.createElement('td');
       td1.setAttribute('class', 'border border-black p-1.5');
-      td1.innerHTML = item.name;
+      td1.textContent = item.name;
       const td2 = document.createElement('td');
       td2.setAttribute('class', 'border border-black p-1.5');
-      td2.innerHTML = item.description;
+      td2.textContent = item.description;
       tr.append(td1);
       tr.append(td2);
       processRecordTable.append(tr);