admin-ui/src/views/settings/modelConfigV2/index.vue

<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search mb15">
				<el-input
					v-model="searchParams.modelName"
					size="default"
					placeholder="请输入模型名称"
					style="max-width: 180px"
					clearable
					@clear="handleSearch"
				/>
				<el-cascader
					v-model="selectedCascaderPath"
					:options="modelTypes"
					:props="{ expandTrigger: 'hover' }"
					clearable
					placeholder="请选择模型类型"
					style="max-width: 180px"
					class="ml10"
					@change="onCascaderChange"
				/>
				<el-button size="default" type="primary" class="ml10" @click="handleSearch">
					<el-icon><Search /></el-icon>
					查询
				</el-button>
				<el-button size="default" type="success" class="ml10" @click="handleAdd">
					<el-icon><Plus /></el-icon>
					新增模型配置
				</el-button>
			</div>

			<el-table :data="modelList" v-loading="loading" stripe style="width: 100%" class="fixed-table">
				<el-table-column type="index" label="序号" width="55" />
				<el-table-column prop="modelName" label="模型名称" show-overflow-tooltip />
				<el-table-column label="模型类型" show-overflow-tooltip>
					<template #default="{ row }">
						{{ resolveModelTypeLabel(row.modelType) }}
					</template>
				</el-table-column>
				<el-table-column label="模型归属">
					<template #default="scope">
						<el-tag :type="scope.row.systemModel ? 'warning' : 'success'">{{ scope.row.systemModel ? '系统' : '用户' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="供应商" show-overflow-tooltip>
					<template #default="scope">
						{{ resolveSupplierLabel(scope.row.modelSupplier) }}
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template #default="scope">
						<el-tag :type="scope.row.enabled ? 'success' : 'danger'">{{ scope.row.enabled ? '启用' : '禁用' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip />
				<el-table-column prop="updatedAt" label="更新时间" show-overflow-tooltip />
				<el-table-column label="操作" fixed="right">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="handleEdit(scope.row)">修改</el-button>
						<el-button size="small" text type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handlePageChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30, 50]"
				v-model:current-page="pagination.pageNum"
				background
				v-model:page-size="pagination.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"
			/>
		</el-card>
		<EditModule ref="editModuleRef" :model-types="modelTypes" @refresh="fetchModelList" />
	</div>
</template>

<script setup lang="ts" name="modelConfigV2">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus } from '@element-plus/icons-vue';
import EditModule from './component/editModule.vue';
import { listModelManage, getModelManageTypes, deleteModelManage, getModelSupplierList, type ModelManageItem, type ModelTypeTreeNode, type ModelSupplierItem } from '/@/api/settings/modelConfigV2';

const searchParams = reactive({
	modelName: '',
	modelType: undefined as number | undefined,
});

const pagination = reactive({
	pageNum: 1,
	pageSize: 10,
	total: 0,
});

const modelList = ref<ModelManageItem[]>([]);
const loading = ref(false);
const modelTypes = ref<ModelTypeTreeNode[]>([]);
const supplierList = ref<ModelSupplierItem[]>([]);
const editModuleRef = ref();

/** 级联选择器的选中路径（例：[200, 201]） */
const selectedCascaderPath = ref<number[]>([]);

/** 级联选择器值变化时，取叶子节点的值作为筛选参数 */
const onCascaderChange = (val: number[]) => {
	searchParams.modelType = val.length > 0 ? val[val.length - 1] : undefined;
};

/** 从树形结构中查找标签（含一级/二级路径） */
const resolveModelTypeLabel = (modelType: number | string | undefined | null): string => {
	if (modelType === undefined || modelType === null || modelType === '') {
		return '—';
	}
	const key = String(modelType).trim();
	for (const group of modelTypes.value) {
		if (group.children) {
			const child = group.children.find((c) => String(c.value).trim() === key);
			if (child) return `${group.label} / ${child.label}`;
		}
		if (String(group.value).trim() === key) {
			return group.label;
		}
	}
	return String(modelType);
};

/** 加载模型类型选项（树形结构，供 el-cascader 使用） */
const loadModelTypes = async () => {
	try {
		const res = await getModelManageTypes();
		modelTypes.value = res.data?.list || [];
	} catch {
		modelTypes.value = [];
	}
};

/** 加载模型供应商列表 */
const loadSupplierList = async () => {
	try {
		const res = await getModelSupplierList();
		supplierList.value = res.data?.list || [];
	} catch {
		supplierList.value = [];
	}
};

/** 根据供应商值显示名称 */
const resolveSupplierLabel = (supplier: number | undefined | null): string => {
	if (supplier === undefined || supplier === null) return '—';
	return supplierList.value.find((s) => s.value === supplier)?.label ?? String(supplier);
};

/** 获取模型列表 */
const fetchModelList = async () => {
	loading.value = true;
	try {
		const params = {
			pageNum: pagination.pageNum,
			pageSize: pagination.pageSize,
			modelName: searchParams.modelName || undefined,
			modelType: searchParams.modelType,
		};
		const res = await listModelManage(params);
		modelList.value = res.data?.list || [];
		pagination.total = res.data?.total || 0;
	} catch {
		modelList.value = [];
		pagination.total = 0;
	} finally {
		loading.value = false;
	}
};

const handleAdd = () => {
	editModuleRef.value?.openDialog('add');
};

const handleSearch = () => {
	pagination.pageNum = 1;
	fetchModelList();
};

const handlePageChange = (page: number) => {
	pagination.pageNum = page;
	fetchModelList();
};

const handleSizeChange = (size: number) => {
	pagination.pageSize = size;
	pagination.pageNum = 1;
	fetchModelList();
};

const handleEdit = (row: ModelManageItem) => {
	editModuleRef.value?.openDialog('edit', row.id)
};

const handleDelete = (row: ModelManageItem) => {
	ElMessageBox.confirm(`确定要删除模型"${row.modelName}"吗？`, '删除确认', {
		confirmButtonText: '确定删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			try {
				await deleteModelManage(row.id);
				ElMessage.success('删除成功');
				fetchModelList();
			} catch {
				// 接口错误由 request 全局提示
			}
		})
		.catch(() => {});
};

onMounted(async () => {
	await loadModelTypes();
	loadSupplierList();
	fetchModelList();
});
</script>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table.fixed-table {
			flex: 1;
			table-layout: fixed;
		}
	}
}
</style>