由于没有中文文档,所以也摸索了一天的时间,终于是完成了需求:

第一步:引入GOJS(官方文档上下载的有水印,我用的是破解版本的,需要的可以找我拿一下QQ:1013218132)

话不多说,直接上代码:      gojs的引入和echarts有点类似,也是画布完成的,都是根据ID值获取页面节点去渲染标签的

<template>

<div class="modelingBox">

<div class="modelingHead">

<el-button id="SaveButton" @click="save">保存</el-button>

<el-button @click="load">清空</el-button>

<textarea id="mySavedModel" style="width:100%;height:300px;">                 { "class": "go.GraphLinksModel",                "linkFromPortIdProperty": "fromPort",                "linkToPortIdProperty": "toPort",                "nodeDataArray": [               ],                "linkDataArray": [               ]}

</textarea>

<div class="msg_">

<p>流程</p>

<el-select v-model="valueOptions" @change="selectChange" filterable placeholder="请选择">

<el-option v-for="item in options"                               :key="item.value"                               :label="item.label"                               :value="item.value"></el-option>

</el-select>

<div id="sample">

<div style="width: 100%;height:100%; display: flex; justify-content: space-between">

<div id="myPaletteDiv" style="width: 200px; margin-right: 2px; background-color: #fafafa;"></div>

<div id="myDiagramDiv" style="flex-grow: 1; height: 100%; background-color: #fafafa;"></div>

<el-dialog title="开始节点" :visible.sync="StartShow" width="30%" :before-close="handleClose">

<span>这是一段信息</span>            <span slot="footer" class="dialog-footer">

<el-button @click="StartShow = false">取 消</el-button>

<el-button type="primary" @click="StartShow = false">确 定</el-button>            </span>

</el-dialog>

<el-dialog title="审批节点" :visible.sync="ActivityShow" width="30%" :before-close="handleClose">

<span>这是一段信息</span>            <span slot="footer" class="dialog-footer">

<el-button @click="ActivityShow = false">取 消</el-button>

<el-button type="primary" @click="ActivityShow = false">确 定</el-button>            </span>

</el-dialog>