- 扩展资源类型,新增软件、资金和其他类别 - 实现获取资源类型图标的函数,提供对应图标映射 - 实现获取资源类型颜色的函数,定义各类型对应颜色 - 在资源名称栏增加图标显示,根据类型渲染对应颜色和图标 - 新增资源图标包装器样式,优化图标展示效果 - 保持鼠标悬停样式和整体界面风格一致
This commit is contained in:
@@ -588,11 +588,42 @@ function getResourceTypeText(type?: string): string {
|
|||||||
equipment: "设备",
|
equipment: "设备",
|
||||||
material: "物料",
|
material: "物料",
|
||||||
human: "人力",
|
human: "人力",
|
||||||
service: "服务"
|
software: "软件",
|
||||||
|
finance: "资金",
|
||||||
|
service: "服务",
|
||||||
|
other: "其他"
|
||||||
};
|
};
|
||||||
return typeMap[type || ""] || type || "其他";
|
return typeMap[type || ""] || type || "其他";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取资源类型图标
|
||||||
|
function getResourceTypeIcon(type?: string): string {
|
||||||
|
const iconMap: Record<string, string> = {
|
||||||
|
equipment: "ri/server-line",
|
||||||
|
material: "ri/archive-line",
|
||||||
|
human: "ri/team-line",
|
||||||
|
software: "ri/code-line",
|
||||||
|
finance: "ri/money-cny-circle-line",
|
||||||
|
service: "ri/service-line",
|
||||||
|
other: "ri/file-list-line"
|
||||||
|
};
|
||||||
|
return iconMap[type || ""] || "ri/file-list-line";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取资源类型颜色
|
||||||
|
function getResourceTypeColor(type?: string): string {
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
equipment: "#409eff", // 设备 - 蓝色
|
||||||
|
material: "#67c23a", // 物料 - 绿色
|
||||||
|
human: "#e6a23c", // 人力 - 橙色
|
||||||
|
software: "#9b59b6", // 软件 - 紫色
|
||||||
|
finance: "#f56c6c", // 资金 - 红色
|
||||||
|
service: "#00bcd4", // 服务 - 青色
|
||||||
|
other: "#909399" // 其他 - 灰色
|
||||||
|
};
|
||||||
|
return colorMap[type || ""] || "#909399";
|
||||||
|
}
|
||||||
|
|
||||||
// 获取资源状态类型
|
// 获取资源状态类型
|
||||||
function getResourceStatusType(
|
function getResourceStatusType(
|
||||||
status?: string
|
status?: string
|
||||||
@@ -1382,9 +1413,24 @@ onMounted(() => {
|
|||||||
<el-table-column label="资源名称" min-width="200">
|
<el-table-column label="资源名称" min-width="200">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<el-avatar :size="32" shape="square" class="bg-gray-100">
|
<div
|
||||||
<component :is="useRenderIcon('ri/box-line')" />
|
class="resource-icon-wrapper"
|
||||||
</el-avatar>
|
:style="{
|
||||||
|
backgroundColor:
|
||||||
|
getResourceTypeColor(row.resourceType) + '20'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-icon
|
||||||
|
:size="18"
|
||||||
|
:color="getResourceTypeColor(row.resourceType)"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="
|
||||||
|
useRenderIcon(getResourceTypeIcon(row.resourceType))
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="font-medium">{{ row.resourceName }}</div>
|
<div class="font-medium">{{ row.resourceName }}</div>
|
||||||
<div class="text-xs text-gray-400">
|
<div class="text-xs text-gray-400">
|
||||||
@@ -2193,6 +2239,17 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 资源图标包装器
|
||||||
|
.resource-icon-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
// 鼠标悬停效果
|
// 鼠标悬停效果
|
||||||
.cursor-pointer {
|
.cursor-pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
Reference in New Issue
Block a user