feat:文本预览

src/components/PreviewText/index.vue

@@ -0,0 +1,67 @@
+<template>
+	<div class="preview-text">
+		<el-button v-if="textContent" :style="textViewStyle" type="text" link @click="textViewVisible = true">
+			<span :style="textViewStyle" class="text-view">{{ textContent }}</span>
+		</el-button>
+		<span v-else>--</span>
+
+		<el-dialog v-model="textViewVisible" :title="title" width="min(720px, 90vw)" append-to-body>
+			<pre class="text-content" v-text="textContent"></pre>
+			<template #footer>
+				<el-button @click="textViewVisible = false">关闭</el-button>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts" setup name="preview-text">
+type Props = {
+	width?: number
+	text?: string
+	title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	width: 0,
+	text: "",
+	title: "文本详情",
+})
+
+const textViewVisible = ref(false)
+
+const textContent = computed(() => props.text || "")
+
+const textViewStyle = computed(() => ({
+	width: props.width ? `${props.width}px` : "160px",
+	maxWidth: "100%",
+}))
+</script>
+
+<style lang="scss" scoped>
+.preview-text {
+	max-width: 100%;
+}
+
+.text-view {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.text-content {
+	max-height: 60vh;
+	margin: 0;
+	padding: 16px;
+	overflow: auto;
+	color: var(--el-text-color-primary);
+	font-family: inherit;
+	font-size: 14px;
+	line-height: 1.6;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	background-color: var(--el-fill-color-light);
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 4px;
+}
+</style>

src/components/index.ts

@@ -15,6 +15,7 @@ import TagList from "/@/components/TagList/index.vue"
 import SvgIcon from "/@/components/SvgIcon/index.vue"
 import PreviewImage from "/@/components/PreviewImage/index.vue"
 import PreviewJson from "/@/components/PreviewJson/index.vue"
+import PreviewText from "/@/components/PreviewText/index.vue"
 import PreviewXml from "/@/components/PreviewXml/index.vue"
 import DraggableDepTree from "/@/components/DraggableDepTree/index.vue"
 
@@ -80,6 +81,7 @@ export default {
 		app.component("SvgIcon", SvgIcon)
 		app.component("PreviewImage", PreviewImage)
 		app.component("PreviewJson", PreviewJson)
+		app.component("PreviewText", PreviewText)
 		app.component("PreviewXml", PreviewXml)
 		app.component("DraggableDepTree", DraggableDepTree)
 		app.component("TreeMultipleSelect", TreeMultipleSelect)

src/views/hard/hard-door-flow/index.vue

@@ -43,7 +43,11 @@
 							<dict-tag :options="hard_door_flow" :value="row.flowStatus" />
 						</template>
 					</el-table-column>
-					<el-table-column prop="errorDesc" label="错误描述" width="120" />
+					<el-table-column prop="errorDesc" label="错误描述" width="120">
+						<template #default="{ row }">
+							<preview-text :text="row.errorDesc" :width="96" title="错误描述" />
+						</template>
+					</el-table-column>
 				</el-table-column>
 				<el-table-column label="购买用户">
 					<el-table-column prop="username" label="姓名" width="120" />