首页 > Vue >

bpmnjs自定义之初始化流程设计器[新建、编辑、保存、发布的使用例子]

时间: 作者:admin 浏览:

写了很多关于bpmnjs的使用方法,突然发现没有写一篇怎么初始化流程设计器的例子给大家参考,其实这个过程已经写过了,只不过没有单独作为一篇文章写出来,而是放在了自定义bpmnjs右侧属性面板的文章里:

bpmnjs自定义右侧属性面板properties-panel

所以可能大家没有发现,今天单独拿出来作为独立一篇,方便大家查阅;
打开流程设计器,发现左侧图标拖不进画布里,画布提示底色变红,大多数情况是因为没有引入bpmnjs初始化xml,具体初始化过程看下面的代码:

template部分:

<el-form>
    <el-form-item>
        <div ref="paletteBox" class="palette-box"></div>
        <div ref="bpmnbox" class="canvas-box"></div>
        <custom-properties-panel
            ref="propertiesPanel"
            :modeler="awaitModeler"
            :queryData="queryData"
        />
    </el-form-item>
</el-form>

js部分:

import customPropertiesPanel from './properties-panel';
export default {
    components:{
        customPropertiesPanel
    },
    data(){
        return {
            xml:'',
            modeler:"",
            awaitModeler:'',
            queryData:"",
            type:'create'
        }
    },
    computed:{
        queryData(){
            return {
                formId: '',
                flowId: ''
            }
        },
    },
    async mounted(){
        await this.getXml()
        await this.getModelerInit()
        this.createModifyDiagram()
    },
    methods:{
        async getXml(){
            this.xml = this.type=='create'?"" : await this.$axios({url:'getXmlDatasUrl',method:'post'...})
        },
        async getModelerInit(){
            this.modeler = await this.getModeler()
        },
        async createModifyDiagram() {
            if(!this.xml) {
                //新建
                let processId = 'process_'+Math.random()
                //这里的newDiagram一般都是固定的,所以可以用js文件存起来引用,具体内容看文章末尾更多api有给出
                this.xml = await (require('@/components/bpmnProcess/plugins/newDiagram').default)(processId,'','','')
            } else {
                //回填
                this.xml = this.xml.replace(/CDATA/g,"").replace(/\<\!\[\[/g,'').replace(/\]\]\>/g,"")
            }
            this.modeler.importXML(this.xml).then((res) => {
                this.modeler.get('canvas').zoom('fit-viewport', 'auto')
                this.awaitModeler = this.modeler
            })
        },
        async handleSubmit() {
            //编辑完后获取最新xml,验证、保存、发布等操作
            const {xml} = await this.modeler.saveXML({format: true})
            const {svg} = await this.modeler.saveSVG()
            this.xml = xml
            this.allValidate()//验证是否符合规则或者漏了必填
        },
        allValidate(){
            ............
            if("验证通过条件"){
                this.processSaveAndDepoly()
            }else{
                //报错或者报错且定位到报错的节点(自动选中某个节点)
            }
        },
        processSaveAndDepoly(){
            //保存并发布流程
            this.$api.process.processSaveAndDepolys().then(res => {
                //保存、发布成功提示,更新列表数据等
            })
        }
    }
}

好了,大概过程都写在上面了,算是比较完整吧,具体细节靠你们自己写了哇。

引导:

关于bpmnjs+vue的更多篇章,小编已经全部整理在这里:
bpmnjs+vue中文文档API常见方法使用总结

前端新手交流群
欢迎加入web前端新手交流qq群:
734802480(已满)、 794324979

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4