枚举值中文显示修复指南

已完成的修复

✅ 订单列表 (order/OrderListView.vue) ✅ 售后订单 (order/OrderAfterSaleView.vue) ✅ 所有页面 - 已移除 stripe 隔行换色属性

枚举映射工具

已创建通用枚举映射工具：frontend/src/utils/enumMappings.ts

可用的转换函数

// 订单相关
getOrderStatus(value)        // 订单状态
getShippingStatus(value)     // 发货状态
getPaymentStatus(value)      // 支付状态
getPriorityLabel(value)      // 优先级
getExceptionLabel(value)     // 异常标签

// 售后相关
getAuditStatus(value)        // 审核状态
getRefundStatus(value)       // 退款状态
getAfterSaleType(value)      // 售后类型

// 产品相关
getProductStatus(value)      // 产品状态

// 供应商相关
getSupplierStatus(value)     // 供应商状态

快速修复步骤

步骤 1: 在页面中导入工具

<script setup lang="ts">
import { getOrderStatus, getShippingStatus } from '@/utils/enumMappings';
</script>

步骤 2: 添加辅助函数

<script setup lang="ts">
// 方式1: 直接使用
const statusConfig = (s: string) => getOrderStatus(s);

// 方式2: 解构使用
const { label: statusLabel, type: statusType } = getOrderStatus(row.status);
</script>

步骤 3: 更新模板

修改前（直接显示枚举值）：

<el-table-column prop="status" label="状态" width="100">
  <template #default="{ row }">
    <el-tag :type="statusType(row.status)" size="small">
      {{ row.status }}
    </el-tag>
  </template>
</el-table-column>

修改后（使用枚举映射）：

<el-table-column prop="status" label="状态" width="100">
  <template #default="{ row }">
    <el-tag :type="statusConfig(row.status).type" size="small">
      {{ statusConfig(row.status).label }}
    </el-tag>
  </template>
</el-table-column>

需要修复的页面清单

根据搜索结果，以下页面可能包含枚举值显示问题：

高优先级（核心业务）

product/ProductListView.vue - 产品状态
finance/PaymentView.vue - 支付状态
finance/RefundView.vue - 退款状态
warehouse/WarehouseView.vue - 仓库状态
marketing/PromotionView.vue - 活动状态

中优先级（管理功能）

crm/TicketView.vue - 工单状态/优先级
crm/ServicePerformanceView.vue - 服务状态
supplier/SupplierListView.vue - 供应商状态
logistics/LogisticsProviderView.vue - 物流商状态

低优先级（报表和配置）

report/* - 各类报表页面
system/* - 系统配置页面
inventory/* - 库存页面

添加新的枚举映射

如果 enumMappings.ts 中没有你需要的枚举，按以下格式添加：

// 在 enumMappings.ts 中添加
export const YOUR_ENUM: Record<string, { label: string; type: string }> = {
  key1: { label: '中文1', type: 'primary' },
  key2: { label: '中文2', type: 'success' },
  key3: { label: '中文3', type: 'warning' },
  key4: { label: '中文4', type: 'danger' },
  key5: { label: '中文5', type: 'info' },
};

// 添加快捷函数
export function getYourEnum(value: string) {
  return getEnumWithStyle(YOUR_ENUM, value);
}

Tag 类型参考

type: 'primary'    // 蓝色 - 主要信息
type: 'success'    // 绿色 - 成功/正常
type: 'warning'    // 橙色 - 警告/处理中
type: 'danger'     // 红色 - 危险/错误
type: 'info'       // 灰色 - 信息/禁用

常见问题

Q: 后端返回的是中文，还需要映射吗？

A: 建议仍然使用枚举映射，这样可以：

统一样式和类型
防止后端返回值变化
便于后期维护

Q: 如何处理未知枚举值？

A: getEnumWithStyle 函数会自动返回原值和 info 类型，不会报错

Q: 条件判断怎么处理？

A: 使用中文值进行判断：

<el-button v-if="row.status === '已完成'">查看</el-button>

验证修复

修复后请检查：

✅ 所有状态显示中文
✅ Tag 颜色符合语义
✅ 筛选器选项使用中文
✅ 没有直接显示英文枚举值

注意: 如果遇到问题或需要添加新的枚举映射，请参考 OrderListView.vue 和 OrderAfterSaleView.vue 的实现示例。

ENUM_FIX_GUIDE.md 4.3 KB Historia Raaka