From af53070f6a3041e9f475f29818678b2e19fbbc11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E7=A5=81?= <593401899@qq.com>
Date: Tue, 3 Mar 2026 18:01:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(bpm):=20=E6=94=AF=E6=8C=81=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=91=98=E8=A6=81=E4=B8=ADBase64=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在流程实例、抄送任务、已完成任务和待办任务页面中实现Base64图片识别和预览功能
- 添加isBase64Image方法用于检测Base64格式图片
- 重构摘要数据显示逻辑，支持图片和文本两种类型的动态渲染
- 为图片添加el-image组件实现点击预览功能
- 设计summary-item、summary-key、summary-value和summary-image样式类
- 保持原有文本显示的单行省略特性
- 支持png、jpg、jpeg、gif、webp、svg等常见图片格式
---
 src/views/bpm/processInstance/index.vue | 65 +++++++++++++++++++++++-
 src/views/bpm/task/copy/index.vue       | 65 +++++++++++++++++++++++-
 src/views/bpm/task/done/index.vue       | 66 ++++++++++++++++++++++++-
 src/views/bpm/task/todo/index.vue       | 65 +++++++++++++++++++++++-
 4 files changed, 253 insertions(+), 8 deletions(-)

diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index 1a8ef8900..6f493a3d4 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -122,8 +122,23 @@
       <el-table-column label="摘要" prop="summary" width="180" fixed="left">
         <template #default="scope">
           <div class="flex flex-col" v-if="scope.row.summary && scope.row.summary.length > 0">
-            <div v-for="(item, index) in scope.row.summary" :key="index">
-              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            <div v-for="(item, index) in scope.row.summary" :key="index" class="summary-item">
+              <!-- <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text> -->
+              <!-- 1. 标签部分 (key) -->
+              <span class="summary-key">{{ item.key }}:</span>
+
+              <!-- 2. 内容部分 (value) - 动态判断 -->
+              <template v-if="isBase64Image(item.value)">
+                <!-- 情况 A：是 Base64 图片 -->
+                <el-image :src="item.value" :preview-src-list="[item.value]" fit="cover" class="summary-image"
+                          append-to-body :preview-teleported="true" :initial-index="index" />
+              </template>
+              <template v-else>
+                <!-- 情况 B：是普通文本 (保持单行省略) -->
+                <span class="summary-value" :title="item.value">
+                  {{ item.value }}
+                </span>
+              </template>
             </div>
           </div>
         </template>
@@ -248,6 +263,12 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
 const showPopover = ref(false) // 高级筛选是否展示
+// 判断是否为 Base64 图片的方法
+const isBase64Image = (str) => {
+  if (typeof str !== 'string') return false;
+  // 支持常见的图片格式：png, jpg, jpeg, gif, webp, svg
+  return /^data:image\/(png|jpe?g|gif|webp|svg\+xml);base64,/.test(str);
+}
 
 /** 查询列表 */
 const getList = async () => {
@@ -336,3 +357,43 @@ onMounted(async () => {
   processDefinitionList.value = await DefinitionApi.getSimpleProcessDefinitionList()
 })
 </script>
+
+<style scope>
+/* 每一行 item 的容器 */
+.summary-item {
+  display: flex;
+  align-items: center;
+  /* align-items: flex-start; */
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+/* 标签 Key 的样式 */
+.summary-key {
+  color: #909399;
+  /* el-text type="info" 的颜色 */
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
+/* 普通文本 Value 的样式 (单行省略) */
+.summary-value {
+  color: #606266;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 图片的样式 */
+.summary-image {
+  width: 80px;
+  /* 限制图片宽度 */
+  height: 40px;
+  /* 限制图片高度 */
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 2px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/bpm/task/copy/index.vue b/src/views/bpm/task/copy/index.vue
index 91cfaafef..508a01852 100644
--- a/src/views/bpm/task/copy/index.vue
+++ b/src/views/bpm/task/copy/index.vue
@@ -49,8 +49,23 @@
       <el-table-column label="摘要" prop="summary" min-width="180">
         <template #default="scope">
           <div class="flex flex-col" v-if="scope.row.summary && scope.row.summary.length > 0">
-            <div v-for="(item, index) in scope.row.summary" :key="index">
-              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            <div v-for="(item, index) in scope.row.summary" :key="index" class="summary-item">
+              <!-- <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text> -->
+              <!-- 1. 标签部分 (key) -->
+              <span class="summary-key">{{ item.key }}:</span>
+
+              <!-- 2. 内容部分 (value) - 动态判断 -->
+              <template v-if="isBase64Image(item.value)">
+                <!-- 情况 A：是 Base64 图片 -->
+                <el-image :src="item.value" :preview-src-list="[item.value]" fit="cover" class="summary-image"
+                          append-to-body :preview-teleported="true" :initial-index="index" />
+              </template>
+              <template v-else>
+                <!-- 情况 B：是普通文本 (保持单行省略) -->
+                <span class="summary-value" :title="item.value">
+                  {{ item.value }}
+                </span>
+              </template>
             </div>
           </div>
         </template>
@@ -114,6 +129,12 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
+// 判断是否为 Base64 图片的方法
+const isBase64Image = (str) => {
+  if (typeof str !== 'string') return false;
+  // 支持常见的图片格式：png, jpg, jpeg, gif, webp, svg
+  return /^data:image\/(png|jpe?g|gif|webp|svg\+xml);base64,/.test(str);
+}
 
 /** 查询任务列表 */
 const getList = async () => {
@@ -159,3 +180,43 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style scope>
+/* 每一行 item 的容器 */
+.summary-item {
+  display: flex;
+  align-items: center;
+  /* align-items: flex-start; */
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+/* 标签 Key 的样式 */
+.summary-key {
+  color: #909399;
+  /* el-text type="info" 的颜色 */
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
+/* 普通文本 Value 的样式 (单行省略) */
+.summary-value {
+  color: #606266;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 图片的样式 */
+.summary-image {
+  width: 80px;
+  /* 限制图片宽度 */
+  height: 40px;
+  /* 限制图片高度 */
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 2px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/bpm/task/done/index.vue b/src/views/bpm/task/done/index.vue
index 202cd0e7d..dcb1cb65e 100644
--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
@@ -132,8 +132,23 @@
             class="flex flex-col"
             v-if="scope.row.processInstance.summary && scope.row.processInstance.summary.length > 0"
           >
-            <div v-for="(item, index) in scope.row.processInstance.summary" :key="index">
-              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            <div v-for="(item, index) in scope.row.processInstance.summary" :key="index" class="summary-item">
+              <!-- <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text> -->
+              <!-- 1. 标签部分 (key) -->
+              <span class="summary-key">{{ item.key }}:</span>
+
+              <!-- 2. 内容部分 (value) - 动态判断 -->
+              <template v-if="isBase64Image(item.value)">
+                <!-- 情况 A：是 Base64 图片 -->
+                <el-image :src="item.value" :preview-src-list="[item.value]" fit="cover" class="summary-image"
+                          append-to-body :preview-teleported="true" :initial-index="index" />
+              </template>
+              <template v-else>
+                <!-- 情况 B：是普通文本 (保持单行省略) -->
+                <span class="summary-value" :title="item.value">
+                  {{ item.value }}
+                </span>
+              </template>
             </div>
           </div>
         </template>
@@ -229,6 +244,13 @@ const queryFormRef = ref() // 搜索的表单
 const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
 const showPopover = ref(false) // 高级筛选是否展示
 
+// 判断是否为 Base64 图片的方法
+const isBase64Image = (str) => {
+  if (typeof str !== 'string') return false;
+  // 支持常见的图片格式：png, jpg, jpeg, gif, webp, svg
+  return /^data:image\/(png|jpe?g|gif|webp|svg\+xml);base64,/.test(str);
+}
+
 /** 查询任务列表 */
 const getList = async () => {
   loading.value = true
@@ -280,3 +302,43 @@ onMounted(async () => {
   processDefinitionList.value = await DefinitionApi.getSimpleProcessDefinitionList()
 })
 </script>
+
+<style scope>
+/* 每一行 item 的容器 */
+.summary-item {
+  display: flex;
+  align-items: center;
+  /* align-items: flex-start; */
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+/* 标签 Key 的样式 */
+.summary-key {
+  color: #909399;
+  /* el-text type="info" 的颜色 */
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
+/* 普通文本 Value 的样式 (单行省略) */
+.summary-value {
+  color: #606266;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 图片的样式 */
+.summary-image {
+  width: 80px;
+  /* 限制图片宽度 */
+  height: 40px;
+  /* 限制图片高度 */
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 2px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/bpm/task/todo/index.vue b/src/views/bpm/task/todo/index.vue
index 2c72e8222..07748cb4c 100644
--- a/src/views/bpm/task/todo/index.vue
+++ b/src/views/bpm/task/todo/index.vue
@@ -115,8 +115,23 @@
             class="flex flex-col"
             v-if="scope.row.processInstance.summary && scope.row.processInstance.summary.length > 0"
           >
-            <div v-for="(item, index) in scope.row.processInstance.summary" :key="index">
-              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            <div v-for="(item, index) in scope.row.processInstance.summary" :key="index" class="summary-item">
+              <!-- <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text> -->
+              <!-- 1. 标签部分 (key) -->
+              <span class="summary-key">{{ item.key }}:</span>
+
+              <!-- 2. 内容部分 (value) - 动态判断 -->
+              <template v-if="isBase64Image(item.value)">
+                <!-- 情况 A：是 Base64 图片 -->
+                <el-image :src="item.value" :preview-src-list="[item.value]" fit="cover" class="summary-image"
+                          append-to-body :preview-teleported="true" :initial-index="index" />
+              </template>
+              <template v-else>
+                <!-- 情况 B：是普通文本 (保持单行省略) -->
+                <span class="summary-value" :title="item.value">
+                  {{ item.value }}
+                </span>
+              </template>
             </div>
           </div>
         </template>
@@ -190,6 +205,12 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
 const showPopover = ref(false) // 高级筛选是否展示
+// 判断是否为 Base64 图片的方法
+const isBase64Image = (str) => {
+  if (typeof str !== 'string') return false;
+  // 支持常见的图片格式：png, jpg, jpeg, gif, webp, svg
+  return /^data:image\/(png|jpe?g|gif|webp|svg\+xml);base64,/.test(str);
+}
 
 /** 查询任务列表 */
 const getList = async () => {
@@ -234,3 +255,43 @@ onMounted(async () => {
   processDefinitionList.value = await DefinitionApi.getSimpleProcessDefinitionList()
 })
 </script>
+
+<style scope>
+/* 每一行 item 的容器 */
+.summary-item {
+  display: flex;
+  align-items: center;
+  /* align-items: flex-start; */
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+/* 标签 Key 的样式 */
+.summary-key {
+  color: #909399;
+  /* el-text type="info" 的颜色 */
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
+/* 普通文本 Value 的样式 (单行省略) */
+.summary-value {
+  color: #606266;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 图片的样式 */
+.summary-image {
+  width: 80px;
+  /* 限制图片宽度 */
+  height: 40px;
+  /* 限制图片高度 */
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 2px;
+  cursor: pointer;
+}
+</style>