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 || {}

  // Translate
  const templatelist = translations[template] || template

  // Replace
  return 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 方法