intelligent-etmf-system-admin/国际化处理说明-项目管理.md

项目管理模块国际化说明

已完成内容

1. 静态页面国际化

已完成以下部分的国际化：

搜索表单

• 项目编号、名称、项目语言、项目类型
• PD/GPD、PM/GPM、CTA/GCTA
• 申办方、CRO
• 开始时间、结束时间、创建时间、更新时间
• 搜索、重置按钮

操作按钮

• 新增、修改、删除、导出按钮

表格列

• 序号、项目编号、名称、图标
• 项目语言、项目类型、状态
• PD/GPD、PM/GPM、CTA/GCTA
• 申办方、CRO、备注
• 创建者、创建时间、更新时间
• 操作列（修改、删除tooltip）

表单对话框

• 对话框标题（添加/修改项目）
• 所有表单字段标签和占位符
• 确定、取消按钮

提示信息

• 删除确认提示
• 操作成功、删除成功提示

验证规则

• 序号、项目编号、名称、项目语言、项目类型的必填验证提示

2. 国际化文件位置

• 中文: src/lang/modules/project/management/zh_CN.ts
• 英文: src/lang/modules/project/management/en_US.ts

3. 使用方式

在Vue组件中：

import { useI18n } from 'vue-i18n';
import { parseI18nName } from '@/utils/i18n';

const { t } = useI18n();

// 使用国际化函数
t('project.management.search.code')
t('project.management.button.add')
t('project.management.table.name')

// 解析字典的国际化名称
parseI18nName(dict.label)

字典国际化

需要国际化的字典

1. project_type (项目类型)
2. project_language (项目语言)

字典国际化方法

字典数据存储在数据库中，其label字段应该是JSON格式，包含多语言数据：

{
  "zh_CN": "中文名称",
  "en_US": "English Name"
}

数据库字典配置示例

project_type (项目类型)

字典值	字典标签（JSON格式）
1	{"zh_CN":"临床试验","en_US":"Clinical Trial"}
2	{"zh_CN":"真实世界研究","en_US":"Real World Study"}
3	{"zh_CN":"上市后研究","en_US":"Post-Marketing Study"}

project_language (项目语言)

字典值	字典标签（JSON格式）
zh_CN	{"zh_CN":"中文","en_US":"Chinese"}
en_US	{"zh_CN":"英文","en_US":"English"}
zh_TW	{"zh_CN":"繁体中文","en_US":"Traditional Chinese"}

在管理后台配置字典

1. 进入系统管理 -> 字典管理
2. 找到对应的字典类型（project_type、project_language）

3. 编辑字典数据的标签字段，使用JSON格式：

   {"zh_CN":"中文标签","en_US":"English Label"}
   

前端处理

前端代码已使用parseI18nName(dict.label)函数处理字典显示：

<!-- 下拉选择 -->
<el-option 
  v-for="dict in project_language" 
  :key="dict.value" 
  :label="parseI18nName(dict.label)" 
  :value="dict.value"
/>

<!-- 表格显示 -->
<dict-tag :options="project_language" :value="scope.row.language"/>

parseI18nName函数会：

1. 解析JSON格式的label
2. 根据当前语言环境返回对应的翻译
3. 如果解析失败或找不到对应语言，返回原始值

注意事项

1. 字典标签格式：必须是有效的JSON格式
2. 语言代码：使用zh_CN和en_US作为键名
3. 回退机制：如果当前语言没有翻译，会依次尝试zh_CN、en_US，最后使用原值
4. DictTag组件：已自动支持国际化，无需修改

类型错误说明

当前存在一个与国际化无关的TypeScript类型错误：

• 位置：第175行 <image-upload v-model="form.icon"/>
• 原因：form.icon的类型定义与image-upload组件预期类型不匹配
• 影响：不影响运行，仅是类型检查警告
• 建议：需要更新ManagementForm类型定义或image-upload组件的props类型

测试建议

1. 切换语言测试所有文本是否正确显示
2. 验证字典数据的国际化显示
3. 测试表单验证提示信息
4. 测试操作提示消息（成功、删除确认等）