优化操作日志对话框中变更内容的显示效果,为长文本添加截断和悬浮提示功能,同时优化内容区域的滚动和换行处理以提升可读性

src/views/assets/component/operationLogDialog.vue

@@ -10,10 +10,13 @@
 			<el-table-column prop="creator" label="操作人" width="120" />
 			<el-table-column prop="data" label="变更内容" min-width="200">
 				<template #default="scope">
-					<div v-if="scope.row.data && scope.row.data.length > 0">
+					<div v-if="scope.row.data && scope.row.data.length > 0" class="change-content">
 						<div v-for="(item, index) in scope.row.data" :key="index" class="change-item">
 							<span class="field-name">{{ item.FieldName }}:</span>
-							<span class="field-value">{{ formatFieldValue(item.FieldValue) }}</span>
+							<el-tooltip v-if="isLongValue(item.FieldValue)" placement="top" :content="formatFieldValue(item.FieldValue)" :show-after="300">
+								<span class="field-value truncate">{{ truncateValue(item.FieldValue) }}</span>
+							</el-tooltip>
+							<span v-else class="field-value">{{ formatFieldValue(item.FieldValue) }}</span>
 						</div>
 					</div>
 					<span v-else class="no-data">-</span>
@@ -114,6 +117,21 @@ const formatFieldValue = (value: any) => {
 	return String(value);
 };
 
+// 判断是否为长文本
+const isLongValue = (value: any) => {
+	const str = formatFieldValue(value);
+	return str.length > 50;
+};
+
+// 截断长文本
+const truncateValue = (value: any) => {
+	const str = formatFieldValue(value);
+	if (str.length > 50) {
+		return str.substring(0, 50) + '...';
+	}
+	return str;
+};
+
 // 分页
 const onSizeChange = () => {
 	queryParams.pageNum = 1;
@@ -130,8 +148,13 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+.change-content {
+	max-height: 150px;
+	overflow-y: auto;
+}
 .change-item {
 	margin-bottom: 4px;
+	line-height: 1.6;
 	&:last-child {
 		margin-bottom: 0;
 	}
@@ -141,6 +164,14 @@ defineExpose({
 	}
 	.field-value {
 		color: #303133;
+		word-break: break-all;
+		&.truncate {
+			cursor: pointer;
+			color: #409eff;
+			&:hover {
+				text-decoration: underline;
+			}
+		}
 	}
 }
 .no-data {