admin-ui/src/components/markdown/plugins/impl/VueStructData.vue

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Download, Grid, TrendCharts, BarChart } from '@element-plus/icons-vue'
import assist from '/@/api/assist'
import { useLoading } from '/@/utils/loading-util'
import VueCharts from './VueCharts.vue'
import download from 'downloadjs'

const props = defineProps<{
	uuid: string
}>()

// 定义数据结构类型
interface StructData {
	fields: string[]
	data: { [key: string]: string }[]
}

const data = ref<StructData>()

const { loading: loadingStruct, doLoading: doLoadingStruct } = useLoading(async () => {
	data.value = await assist.struct(props.uuid)
})

// 导出数据为CSV格式
const exportToCSV = () => {
	if (!data.value || !data.value.fields || !data.value.data) {
		ElMessage.warning('暂无数据可导出')
		return
	}

	try {
		// 构建CSV内容
		const headers = data.value.fields.map((it) => `"${it}"`).join(',')
		const rows = data.value.data.map(rowJson => {
			return data.value!.fields.map(field => `"${rowJson[field]}"`).join(',')
		})

		const csvContent = [headers, ...rows].join('\n')

		download(csvContent, 'export.csv', 'text/csv,charset=utf-8;')

		ElMessage.success('数据导出成功')
	} catch (error) {
		console.error('导出失败:', error)
		ElMessage.error('导出失败，请重试')
	}
}

// 组件挂载时加载数据
onMounted(doLoadingStruct)

const display = ref<'table' | 'bar' | 'line'>('table')

const barChart = ref()
const lineChart = ref()
</script>

<template>
	<div class="struct-data-container">
		<el-card v-loading="loadingStruct" shadow="none" :body-style="{ padding: 0, margin: 0 }">
			<template #header>
				<div class="card-header">
					<span>结构化数据表格</span>
					<el-popover placement="top" :width="120" trigger="hover" content="导出为CSV文件">
						<template #reference>
							<el-button
								:icon="Download"
								size="small"
								text
								circle
								@click="exportToCSV"
								:disabled="!data || !data.fields || !data.data || data.data.length === 0"
								class="export-btn"
							/>
						</template>
					</el-popover>
				</div>
			</template>
			<!-- 表格内容 -->
			<div v-if="data && data.fields && data.data" class="table-wrapper">
				<el-table :data="data.data" stripe border size="small" max-height="400">
					<el-table-column v-for="field in data.fields" :key="field" :prop="field" :label="field" align="center" min-width="120">
						<template #default="{ row }">
							<span>{{ row[field] || '-' }}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 空数据状态 -->
			<div v-else-if="!loadingStruct" class="empty-state">
				<el-empty description="暂无数据" />
			</div>
		</el-card>
	</div>
</template>

<style scoped lang="scss">
.struct-data-container {
	margin: 16px 0;

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 500;
		color: var(--el-text-color-primary);

		.export-btn {
			color: var(--el-color-primary);

			&:hover {
				background-color: var(--el-color-primary-light-9);
			}

			&:disabled {
				color: var(--el-text-color-disabled);
				cursor: not-allowed;
			}
		}
	}

	.table-wrapper {
		.el-table {
			overflow: hidden;
		}
	}

	.empty-state {
		padding: 40px 0;
		text-align: center;
	}

	:deep(table) {
		margin: 0 !important;
	}
}

.el-card {
	background: transparent !important;
}

:deep(.el-table__cell) {
	background: transparent !important;
}
</style>