BPMN.js学习

查看流程图

复制代码
processView: {
  title: '',
  open: false,
  index: undefined,
  xmlData:"",
},
复制代码
<el-table-column label="模型名称" align="center" :show-overflow-tooltip="true">
   <template slot-scope="scope">
       <el-button type="text" @click="handleProcessView(scope.row)">
            <span>{{ scope.row.modelName }}</span>
       </el-button>
   </template>
</el-table-column>

   <!-- 流程图 -->
 <el-dialog :title="processView.title" :visible.sync="processView.open" width="70%" append-to-body>
      <!-- 传递了key和xml -->
      <process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" />
 </el-dialog>
----------------------------------------------------------------------------------------
 /** 查看流程图 */
    handleProcessView(row) {
      let modelId = row.modelId;
      this.processView.title = "流程图";
      this.processView.index = modelId;
      // 发送请求,获取xml
      getBpmnXml(modelId).then(response => {
        this.processView.xmlData = response.data;
      })
      this.processView.open = true;
    },
----------------------------------------------------------------------------------------

启动流程

复制代码
    submit(data) {
      if (data && this.definitionId) {
        // 启动流程并将表单数据加入流程变量
        startProcess(this.definitionId, JSON.stringify(data.valData))
          .then(
            this.$tab.closeOpenPage({path: '/run/own' })
          // this.pollForResult();
        ).catch(err =>console.error("发生错误:",error))
      }
    },

获取是否有开始表单数据

复制代码
      this.deployId = this.$route.params && this.$route.params.deployId;
      this.definitionId = this.$route.query && this.$route.query.definitionId;
      this.procInsId = this.$route.query && this.$route.query.procInsId;
      getProcessForm({
        definitionId: this.definitionId,
        deployId: this.deployId,
        procInsId: this.procInsId
      }).then(res => {
        if (res.data) {
          this.formData = res.data;
          this.formOpen = true
        }
      })
相关推荐
余额瞒着我当琳1 分钟前
C++--vector第二讲:手写 C++ STL:vector 源码剖析与迭代器失效分析
android·java·c++
程序员-珍5 分钟前
安卓开发:同名 styles.xml 在不同分支/文件夹的合并规则
android·xml·前端
资源大佬星 课it7 分钟前
黑马 Java+AI新版V16零基础就业班视频课程百度网盘下载
java·开发语言·人工智能
Ashley的成长之路11 分钟前
前端性能优化实战手册·第5篇(最终篇):性能监控与 CI/CD 集成
前端·ci/cd·性能优化
二十雨辰14 分钟前
[Java]-微服务面试题
java·开发语言·微服务
我命由我1234515 分钟前
Compose Codelab 学习 - Compose 中的基本布局
android·java·java-ee·kotlin·android studio·android-studio·android runtime
chemddd22 分钟前
第四节课:前端
前端
界面开发小八哥23 分钟前
界面控件DevExpress Blazor v26.1新版亮点 - TreeList & 数据编辑器
javascript·编辑器·.net·界面控件·blazor·devexpress·用户界面
雪芽蓝域zzs25 分钟前
(一)Vue3+JS+Vite+pnpm 仿若依后台 从零搭建
前端
风月说与山鬼31 分钟前
二、uni-app入口文件(main.js)
javascript·uni-app