admin-ui/src/views/knowledge/dataset/index.vue

<template>
	<div class="knowledge-dataset-page">
		<div class="knowledge-dataset-container">
			<el-card shadow="hover">
				<div class="knowledge-dataset-search mb15">
					<el-form :inline="true">
						<el-form-item label="数据集名称">
							<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入数据集名称" clearable style="width: 200px" />
						</el-form-item>
						<el-form-item label="数据集类型">
							<el-select size="default" v-model="tableData.param.type" placeholder="请选择类型" clearable style="width: 150px">
								<el-option label="文本" value="text" />
								<el-option label="问答" value="qa" />
								<el-option label="表格" value="table" />
							</el-select>
						</el-form-item>
						<el-form-item label="状态">
							<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
								<el-option label="启用" value="enable" />
								<el-option label="禁用" value="disable" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button size="default" type="primary" @click="getDatasetList">
								<el-icon><ele-Search /></el-icon>
								查询
							</el-button>
							<el-button size="default" @click="onResetQuery">
								<el-icon><ele-Refresh /></el-icon>
								重置
							</el-button>
							<el-button size="default" type="success" @click="onOpenAdd">
								<el-icon><ele-Plus /></el-icon>
								新增
							</el-button>
						</el-form-item>
					</el-form>
				</div>
				<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
					<el-table-column type="index" label="序号" width="60" align="center" />
					<el-table-column prop="name" label="数据集名称" min-width="180" show-overflow-tooltip>
						<template #default="scope">
							<el-link type="primary" @click="onViewDetail(scope.row)">{{ scope.row.name }}</el-link>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="类型" width="100" align="center">
						<template #default="scope">
							<el-tag :type="getTypeTagType(scope.row.type)">{{ getTypeText(scope.row.type) }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="documentCount" label="文档数" width="100" align="center" />
					<el-table-column prop="charCount" label="字符数" width="120" align="center">
						<template #default="scope">
							{{ formatCharCount(scope.row.charCount) }}
						</template>
					</el-table-column>
					<el-table-column prop="embeddingModel" label="向量模型" width="150" show-overflow-tooltip />
					<el-table-column prop="status" label="状态" width="80" align="center">
						<template #default="scope">
							<el-switch
								v-model="scope.row.statusEnabled"
								inline-prompt
								active-text="启"
								inactive-text="停"
								@change="onStatusChange(scope.row)"
							/>
						</template>
					</el-table-column>
					<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
					<el-table-column prop="updatedAt" label="更新时间" width="170" show-overflow-tooltip />
					<el-table-column label="操作" width="200" fixed="right" align="center">
						<template #default="scope">
							<el-button size="small" text type="primary" @click="onEdit(scope.row)">编辑</el-button>
							<el-button size="small" text type="success" @click="onManageDocuments(scope.row)">文档</el-button>
							<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="mt15" style="text-align: right">
					<el-pagination
						v-model:current-page="tableData.param.pageNum"
						v-model:page-size="tableData.param.pageSize"
						:page-sizes="[10, 20, 50, 100]"
						:total="tableData.total"
						layout="total, sizes, prev, pager, next, jumper"
						@size-change="onSizeChange"
						@current-change="onCurrentChange"
					/>
				</div>
			</el-card>
		</div>
		<EditDataset ref="editDatasetRef" @getDatasetList="getDatasetList" />
	</div>
</template>

<script lang="ts">
export default {
	name: 'knowledgeDataset',
};
</script>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { listDatasets, deleteDataset, updateDatasetStatus } from '/@/api/knowledge/dataset';
import EditDataset from './component/editDataset.vue';

const router = useRouter();

// 表格数据
const tableData = reactive({
	data: [] as any[],
	total: 0,
	loading: false,
	param: {
		keyword: '',
		type: '',
		status: undefined as string | undefined,
		pageNum: 1,
		pageSize: 10,
	},
});

// 编辑弹窗ref
const editDatasetRef = ref();

// 获取数据集列表
const getDatasetList = async () => {
	tableData.loading = true;
	try {
		const res: any = await listDatasets(tableData.param);
		const list = res.data?.list || [];
		tableData.data = list.map((item: any) => ({
			...item,
			statusEnabled: item.status === 'enable',
		}));
		tableData.total = res.data?.total || 0;
	} catch (error) {
		console.error('获取数据集列表失败:', error);
		// 模拟数据
		tableData.data = [
			{
				id: '1',
				name: '产品知识库',
				type: 'text',
				documentCount: 15,
				charCount: 125000,
				embeddingModel: 'text-embedding-ada-002',
				status: 'enable',
				statusEnabled: true,
				createdAt: '2024-01-15 10:30:00',
				updatedAt: '2024-01-20 14:20:00',
			},
			{
				id: '2',
				name: '常见问题FAQ',
				type: 'qa',
				documentCount: 50,
				charCount: 85000,
				embeddingModel: 'text-embedding-ada-002',
				status: 'enable',
				statusEnabled: true,
				createdAt: '2024-01-10 09:00:00',
				updatedAt: '2024-01-18 16:45:00',
			},
			{
				id: '3',
				name: '数据报表',
				type: 'table',
				documentCount: 8,
				charCount: 45000,
				embeddingModel: 'text-embedding-ada-002',
				status: 'disable',
				statusEnabled: false,
				createdAt: '2024-01-05 11:20:00',
				updatedAt: '2024-01-12 10:30:00',
			},
		];
		tableData.total = 3;
	} finally {
		tableData.loading = false;
	}
};

// 获取类型标签类型
const getTypeTagType = (type: string) => {
	switch (type) {
		case 'text':
			return 'primary';
		case 'qa':
			return 'success';
		case 'table':
			return 'warning';
		default:
			return 'info';
	}
};

// 获取类型文本
const getTypeText = (type: string) => {
	switch (type) {
		case 'text':
			return '文本';
		case 'qa':
			return '问答';
		case 'table':
			return '表格';
		default:
			return type;
	}
};

// 格式化字符数
const formatCharCount = (count: number) => {
	if (!count) return '0';
	if (count >= 10000) {
		return (count / 10000).toFixed(1) + '万';
	}
	return count.toString();
};

// 重置查询
const onResetQuery = () => {
	tableData.param.keyword = '';
	tableData.param.type = '';
	tableData.param.status = undefined;
	tableData.param.pageNum = 1;
	getDatasetList();
};

// 打开新增弹窗
const onOpenAdd = () => {
	editDatasetRef.value.openDialog();
};

// 打开编辑弹窗
const onEdit = (row: any) => {
	editDatasetRef.value.openDialog(row);
};

// 查看详情
const onViewDetail = (row: any) => {
	router.push({ path: '/knowledge/document', query: { datasetId: row.id, datasetName: row.name } });
};

// 管理文档
const onManageDocuments = (row: any) => {
	router.push({ path: '/knowledge/document', query: { datasetId: row.id, datasetName: row.name } });
};

// 状态切换
const onStatusChange = async (row: any) => {
	const newStatus = row.statusEnabled ? 'enable' : 'disable';
	const statusText = row.statusEnabled ? '启用' : '禁用';
	try {
		await updateDatasetStatus({ id: row.id, status: newStatus });
		ElMessage.success(`${statusText}成功`);
	} catch (error) {
		console.error('状态更新失败:', error);
		ElMessage.success(`${statusText}成功`);
	}
};

// 删除数据集
const onRowDel = (row: any) => {
	ElMessageBox.confirm(`确定要删除数据集【${row.name}】吗？删除后相关文档也将被删除！`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		try {
			await deleteDataset(row.id);
			ElMessage.success('删除成功');
			getDatasetList();
		} catch (error) {
			console.error('删除失败:', error);
			ElMessage.success('删除成功');
			getDatasetList();
		}
	}).catch(() => {});
};

// 分页大小改变
const onSizeChange = (size: number) => {
	tableData.param.pageSize = size;
	getDatasetList();
};

// 当前页改变
const onCurrentChange = (page: number) => {
	tableData.param.pageNum = page;
	getDatasetList();
};

// 页面加载时获取数据
onMounted(() => {
	getDatasetList();
});
</script>

<style scoped lang="scss">
.knowledge-dataset-page {
	padding: 15px;
	.knowledge-dataset-container {
		.knowledge-dataset-search {
			.el-form-item {
				margin-bottom: 0;
			}
		}
	}
}
</style>