import customTranslate from '@/components/bpmnProcess/customTranslate/customTranslate';
import flowableDescriptor from '@/components/bpmnProcess/properties-panel/descriptor/flowable.json';
import flowableMoudle from '@/components/bpmnProcess/properties-panel/extension-moddle/flowable';
export default{
data(){
return{
}
},
methods:{
async getViewer(){
const {CustomModeler} = await require('@/components/bpmnProcess/customModeler')
let modeler = await new CustomModeler({
container: this.$refs.bpmnbox,
height: '100%',
moddleExtensions: {
flowable: flowableDescriptor
},
additionalModules: [
flowableMoudle,
{
translate: ['value', customTranslate],
paletteProvider:["value",''],//禁用/清空左侧工具栏
labelEditingProvider:["value",''],//禁用节点编辑
contextPadProvider:["value",''],//禁用图形菜单
bendpoints:["value",{}],//禁用连线拖动
zoomScroll:["value",''],//禁用滚动
moveCanvas:['value',''],//禁用拖动整个流程图
move:['value','']//禁用单个图形拖动
}
]
})
return modeler
}
}
}
//这里也可以直接用官方的bpmnViewer对象,小编这里只是不想重新修改一遍,用已经汉化过,自定义过的CustomModeler对象,实属是为了以后万一要开放什么功能做准备;
引导:
关于bpmnjs+vue的更多篇章,小编已经全部整理在这里:
bpmnjs+vue中文文档API常见方法使用总结