Condivisione della tecnologia

Apprendimento BPMN.js

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Visualizza il diagramma di flusso

processView: {
  title: '',
  open: false,
  index: undefined,
  xmlData:"",
},
  1. <el-table-column label="模型名称" align="center" :show-overflow-tooltip="true">
  2. <template slot-scope="scope">
  3. <el-button type="text" @click="handleProcessView(scope.row)">
  4. <span>{{ scope.row.modelName }}</span>
  5. </el-button>
  6. </template>
  7. </el-table-column>
  8. <!-- 流程图 -->
  9. <el-dialog :title="processView.title" :visible.sync="processView.open" width="70%" append-to-body>
  10. <!-- 传递了key和xml -->
  11. <process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" />
  12. </el-dialog>
  13. ----------------------------------------------------------------------------------------
  14. /** 查看流程图 */
  15. handleProcessView(row) {
  16. let modelId = row.modelId;
  17. this.processView.title = "流程图";
  18. this.processView.index = modelId;
  19. // 发送请求,获取xml
  20. getBpmnXml(modelId).then(response => {
  21. this.processView.xmlData = response.data;
  22. })
  23. this.processView.open = true;
  24. },
  25. ----------------------------------------------------------------------------------------

Avvia il processo

  1. submit(data) {
  2. if (data && this.definitionId) {
  3. // 启动流程并将表单数据加入流程变量
  4. startProcess(this.definitionId, JSON.stringify(data.valData))
  5. .then(
  6. this.$tab.closeOpenPage({path: '/run/own' })
  7. // this.pollForResult();
  8. ).catch(err =>console.error("发生错误:",error))
  9. }
  10. },

Ottieni se sono presenti dati del modulo di avvio

  1. this.deployId = this.$route.params && this.$route.params.deployId;
  2. this.definitionId = this.$route.query && this.$route.query.definitionId;
  3. this.procInsId = this.$route.query && this.$route.query.procInsId;
  4. getProcessForm({
  5. definitionId: this.definitionId,
  6. deployId: this.deployId,
  7. procInsId: this.procInsId
  8. }).then(res => {
  9. if (res.data) {
  10. this.formData = res.data;
  11. this.formOpen = true
  12. }
  13. })