BPMN 汉化

BPMN 在TS中的汉化实测

1、节点文档可以去官网搜一个比较全的，根据项目摘找需要的
在customTranslate.ts 文件中导入

// BPMN汉化
import translations from './translationsChinese'
import { bpmnType } from './BpmnType'export default function customTranslate(template: bpmnType,replacements: { [x: string]: any }
) {replacements = replacements || {}// Translateconst templatelist = translations[template] || template// Replacereturn templatelist.replace(/{([^}]+)}/g, function(_: any, key: bpmnType) {return replacements[key] || '{' + key + '}'})
}

2、 BpmnType.ts文件 汉化字段类型 JS则不需要这个文件

export type bpmnType =| 'Activate the global connect tool'| 'Change type'| 'Append EndEvent'| 'Append Gateway'| 'Append Task'| 'Append TextAnnotation'| 'Connect using Sequence/MessageFlow or Association'| 'Remove'| 'Activate the hand tool'| 'Activate the lasso tool'| 'Activate the create/remove space tool'| 'Task'| 'Send Task'| 'Service Task'| 'Script Task'| 'Start Event'| 'End Event'| 'Create StartEvent'| 'Create EndEvent'| 'Create Gateway'| 'Create Task'| 'Error End Event'| 'Parallel Gateway'
}

3、translationsChinese.ts 需要汉化的字段

export default {'Activate the global connect tool': '激活全局连接工具','Change type': '修改类型','Append EndEvent': '追加结束事件节点','Append Gateway': '追加网关节点','Append Task': '追加任务节点','Append TextAnnotation': '追加文本批注', // 此句要有效，必须在CustomContexPadProvide给此节点增加一个translate('Append TextAnnotation')'Connect using Sequence/MessageFlow or Association':'使用顺序/消息流或者关联连接','Remove: '移除','Activate the hand tool': '激活抓手工具','Activate the lasso tool': '激活套索工具','Activate the create/remove space tool': '激活创建/删除空间工具','Task: '任务','Send Task': '发送任务','Service Task': '服务任务','Script Task': '函数任务','Start Event': '开始事件','End Event': '结束事件','Create StartEvent': '创建开始事件','Create EndEvent': '创建结束事件','Create Gateway': '创建网关','Create Task': '创建任务','Error End Event': '错误结束事件','Parallel Gateway': '并行网关'
}

4、在index 的bpmn 文件中 import customTranslate.ts 导入汉化方法文件

import customTranslateModule from customTranslate.ts 
// 声明
const customTranslateModule = {translate: ['value', customTranslate]
}

5、调用

import BpmnModeler from 'bpmn-js/lib/Modeler'
// 建模，官方文档这里讲的很详细
new BpmnModeler = ({additionalModules:[customTranslateModule]
}) 实例化的时候调用 customTranslateModule 方法

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！