Pre Merge pull request !865 from 王祁/bpm-bugfix

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>

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>

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>

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>