• 搭建一个自定义的工作流管理平台（二）

    在上一篇里面我搭建了一个Web的工作流管理平台，实现了对工作流的编辑和部署。现在我们继续完善这个工作流平台的功能，增加查看已部署的工作流，对工作流进行启动，查看执行结果等功能。

    要查看已部署的工作流的定义，可以调用camunda的GET /process-definition接口，启动工作流需要调用POST /process-definition/{id}/start的接口，查看执行结果需要调用POST /history/variable-instance接口。

    为了能在页面上方便的展示已部署的工作流的列表，我用到了datatable.js这个组件，具体用法可以参见官网DataTables | Table plug-in for jQuery。因为我的Web的框架用的是bootstrap v4版本，所以用以下命令安装对应的库。

    npm install --save datatables.net-bs4

    在webpack.config.js的copyplugin里面增加以下三句：

    1. { from: 'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css', to: 'vendor/datatables.net-bs4/assets' },
    2. { from: 'node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js', to: 'vendor/datatables.net-bs4/assets' },
    3. { from: 'node_modules/datatables.net/js/jquery.dataTables.min.js', to: 'vendor/datatables.net-bs4/assets' },

    新建一个名为definitions.html的页面，内容如下:

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    6.     <meta name="description" content="">
    7.     <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    8.     <meta name="generator" content="Hugo 0.101.0">
    9.     <title>Workflow Definitionstitle>
    10.  
    11.     
    12.     <link href="assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    13.     <link rel="stylesheet" href="vendor/datatables.net-bs4/assets/dataTables.bootstrap4.min.css">
    14.  
    15.     <style>
    16.       .bd-placeholder-img {
    17.         font-size: 1.125rem;
    18.         text-anchor: middle;
    19.         -webkit-user-select: none;
    20.         -moz-user-select: none;
    21.         -ms-user-select: none;
    22.         user-select: none;
    23.       }
    24.  
    25.       @media (min-width: 768px) {
    26.         .bd-placeholder-img-lg {
    27.           font-size: 3.5rem;
    28.         }
    29.       }
    30.     style>
    31.     
    32.     
    33.     <link href="assets/workflow.css" rel="stylesheet">
    34.   head>
    35.   <body>
    36.     <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    37.       <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">工作流管理平台a>
    38.       <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
    39.         <span class="navbar-toggler-icon">span>
    40.       button>
    41.       <ul class="navbar-nav px-3">
    42.         <li class="nav-item text-nowrap">
    43.           <a class="nav-link" href="#">退出登录a>
    44.         li>
    45.       ul>
    46.     nav>
    47.  
    48.     <div class="container-fluid d-flex h-75">
    49.       <div class="row flex-fill">
    50.         <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
    51.           <div class="sidebar-sticky pt-3">
    52.             <ul class="nav flex-column">
    53.               <li class="nav-item">
    54.                 <a class="nav-link active" href="workflow.html">
    55.                   <i data-feather="home">i>
    56.                   编辑工作流
    57.                 a>
    58.               li>
    59.               <li class="nav-item">
    60.                 <a class="nav-link" href="definitions.html">
    61.                   <i data-feather="file">i>
    62.                   查看工作流
    63.                 a>
    64.               li>
    65.               <li class="nav-item">
    66.                 <a class="nav-link" href="#">
    67.                   <i data-feather="shopping-cart">i>
    68.                   编辑规则
    69.                 a>
    70.               li>
    71.               <li class="nav-item">
    72.                 <a class="nav-link" href="#">
    73.                   <i data-feather="users">i>
    74.                   查看规则
    75.                 a>
    76.               li>
    77.             ul>
    78.           div>
    79.         nav>
    80.  
    81.         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
    82.           <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    83.             <h1 class="h2">工作流定义列表h1>
    84.           div>
    85.           <div class="card shadow mb-4">
    86.             <div class="card-body">
    87.                 <div class="table-responsive">
    88.                     <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
    89.                         <thead>
    90.                             <tr>
    91.                                 <th>idth>
    92.                                 <th>名字th>
    93.                                 <th>描述th>
    94.                                 <th>版本th>
    95.                                 <th>操作th>
    96.                             tr>
    97.                         thead>
    98.                         <tbody>
    99.                         tbody>
    100.                     table>
    101.                 div>
    102.             div>
    103.         main>
    104.       div>
    105.     div>
    106.  
    107.     
    108.     <div class="modal fade" id="startModal" tabindex="-1" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    109.       <div class="modal-dialog">
    110.         <div class="modal-content">
    111.           <div class="modal-header">
    112.             <h5 class="modal-title" id="exampleModalLabel">启动工作流h5>
    113.             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    114.               <span aria-hidden="true">×span>
    115.             button>
    116.           div>
    117.           <div class="modal-body">
    118.             <form id="startForm" instanceId="">
    119.               <div id="row_1" class="form-row">
    120.                 <div class="col-auto">
    121.                   <div class="text-align:center m-auto">
    122.                     <button type="button" class="btn-transparent pt-2" onclick="addFormRow('row_1')">
    123.                       <i data-feather="plus-circle">i>
    124.                     button>
    125.                   div>
    126.                 div>
    127.                 <div class="col">
    128.                   <input id="row_1_variable" type="text" class="form-control" placeholder="变量名">
    129.                 div>
    130.                 <div class="col">
    131.                   <input id="row_1_value" type="text" class="form-control" placeholder="数值">
    132.                 div>
    133.                 <div class="col">
    134.                   <select id="row_1_type" class="custom-select">
    135.                     <option selected value="String">Stringoption>
    136.                     <option value="Integer">Integeroption>
    137.                     <option value="Double">Doubleoption>
    138.                     <option value="Boolean">Booleanoption>
    139.                   select>
    140.                 div>
    141.                 <div class="col-auto">
    142.                   <div class="text-align:center m-auto">
    143.                     <button type="button" class="btn-transparent pt-2" onclick="removeFormRow('row_1')">
    144.                       <i data-feather="minus-circle">i>
    145.                     button>
    146.                   div>
    147.                 div>
    148.               div>
    149.             form>
    150.           div>
    151.           <div class="modal-footer">
    152.             <button type="button" class="btn btn-primary" onclick="startForm()">启动button>
    153.             <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭button>
    154.           div>
    155.         div>
    156.       div>
    157.     div>
    158.     <script src="assets/jquery/dist/jquery.slim.min.js">script>
    159.     <script src="assets/bootstrap/dist/bootstrap.bundle.min.js">script>
    160.     <script src="vendor/datatables.net-bs4/assets/jquery.dataTables.min.js">script>
    161.     <script src="vendor/datatables.net-bs4/assets/dataTables.bootstrap4.min.js">script>
    162.     <script src="modals.js">script>
    163.     <script src="definitions.bundle.js">script>
    164.     <script src="assets/feather-icons/dist/feather.min.js">script>
    165.     <script>feather.replace()script>
    166.   body>
    167. html>

    这个页面的主要功能是查询现有已部署的工作流的定义，并通过datatable展示出来。datatable的每一行对应一个工作流定义的一个特定版本，用户可以对这个工作流定义进行启动，暂停，激活，删除等操作，也可点击这个工作流定义的ID来查看相关的已执行完的工作流进程的信息。

    这个页面的第88到100行定义了过一个datatable，这里只定义了表头，表的内容则是动态查询工作流定义之后再加载。

    第108到157行定义了一个modal，这是bootstrap里面的一个对话框组件。当点击工作流定义的启动按钮时，这个modal将显示出来，用户可以添加启动工作流所需要的参数，并进行启动。

    之后我们定义一个definitions.js文件，内容如下：

    1. import axios from 'axios';
    2. import Keycloak from 'keycloak-js';
    3. import config from './config.json';
    4. const feather = require('feather-icons');
    5.  
    6. async function initKeycloak() {
    7.   const keycloak = new Keycloak();
    8.   await keycloak.init({onLoad: 'login-required'});
    9.   return keycloak.token;
    10. }
    11.  
    12. var token;
    13. var rowNumber = 1;
    14.  
    15. window.startDefinition = function startDefinition(id) {
    16.   rowNumber = 1;
    17.   $('#startForm').empty();
    18.   $('#startForm').attr("definitionId", id);
    19.   $('#startForm').append(generateFormRowHtml(rowNumber));
    20.   $('#startModal').modal();
    21. }
    22.  
    23. window.suspendDefinition = function suspendDefinition(id, flag) {
    24.   var data = {"suspended": flag, "includeProcessInstances": true};
    25.   axios.create({withCredentials: true}).put(
    26.     config.baseurl + '/engine-rest/process-definition/'+id+'/suspended', 
    27.     data,
    28.     {headers: {'Content-Type':'application/json', 'Authorization': 'Bearer '+token}}
    29.   ).then(
    30.     res=>{
    31.       if (res.status==204) {
    32.         if (flag) {
    33.           alert("工作流进程已暂停");
    34.         }
    35.         else {
    36.           alert("工作流进程已激活");
    37.         }
    38.       }
    39.       else {
    40.         alert("操作失败，故障码为"+res.status.toString());
    41.       }
    42.     }
    43.   )
    44. }
    45.  
    46. window.deleteDefinition = function deleteDefinition(id) {
    47.   var flag = confirm("确定要删除这个工作流定义及所有相关的进程吗?");
    48.   if (flag) {
    49.     axios.create({withCredentials: true}).delete(
    50.       config.baseurl + '/engine-rest/process-definition/'+id+'?cascade=true&skipCustomListeners=true&skipIoMappings=true', 
    51.       {headers: {'Authorization': 'Bearer '+token}}
    52.     ).then(
    53.       res=>{
    54.         if (res.status==200) {
    55.           alert("工作流已删除");
    56.           location.reload();
    57.         }
    58.         else {
    59.           alert("操作失败，故障码为"+res.status.toString());
    60.         }
    61.       }
    62.     )
    63.   }
    64. }
    65.  
    66. window.generateFormRowHtml = function generateFormRowHtml(id) {
    67.   var htmlcode = '
      toString()+'" class="form-row mt-2">' +
    68.     '
      ' +
    69.     '
      ' +
    70.     '
    71.     feather.icons['plus-circle'].toSvg() +
    72.     '' +
    73.     '
      ' +
  • '
    ' +
  • '
    ' +
  • 'toString()+'_variable" type="text" class="form-control" placeholder="变量名">' +
  • '
    ' +
  • '
    ' +
  • 'toString()+'_value" type="text" class="form-control" placeholder="数值">' +
  • '
    ' +
  • '
    ' +
  • '' +
  • '
    ' +
  • '
    ' +
  • '
    ' +
  • '
  • feather.icons['minus-circle'].toSvg() +
  • '' +
  • '
    ' +
  • '
    ' +
  • '
    ';
  • return htmlcode;
  • }
  • window.addFormRow = function addFormRow(id) {
  • rowNumber += 1;
  • $('#startForm').append(generateFormRowHtml(id));
  • }
  • window.removeFormRow = function removeFormRow(id) {
  • $('#'+id).remove();
  • }
  • window.startForm = function startForm() {
  • var formValues = {"variables":{}};
  • for (var i=1;i1;i++) {
  • var rowname = 'row_' + i.toString() + '_';
  • console.log(rowname+'variable');
  • if ($('#'+rowname+'variable')) {
  • var varName = $('#'+rowname+'variable').val();
  • var varValue = $('#'+rowname+'value').val();
  • var varType = $('#'+rowname+'type').val();
  • if (varType=='Float') {
  • varValue = parseFloat(varValue);
  • }
  • if (varType=='Integer') {
  • varValue = parseInt(varValue);
  • }
  • if (varType=='Boolean') {
  • varValue = Boolean(varValue);
  • }
  • if (varName && varValue && varType) {
  • formValues['variables'][varName] = {
  • "value": varValue,
  • "type": varType
  • }
  • }
  • }
  • }
  • var definitionId = $('#startForm').attr('definitionId');
  • $('#startModal').modal('hide');
  • axios.create({withCredentials: true}).post(
  • config.baseurl + '/engine-rest/process-definition/'+definitionId+'/start',
  • formValues,
  • {headers: {'Content-Type':'application/json', 'Authorization': 'Bearer '+token}}
  • ).then(
  • res=>{
  • if (res.status==200) {
  • alert("工作流进程启动成功:"+res.data.links[0].href);
  • }
  • else {
  • alert("操作失败，故障码为"+res.status.toString());
  • }
  • }
  • )
  • console.log(JSON.stringify(formValues));
  • }
  • $(document).ready(async function () {
  • token = await initKeycloak();
  • axios.create({withCredentials: true}).get(
  • config.baseurl + '/engine-rest/process-definition',
  • {headers: {'Content-Type':'application/json', 'Authorization': 'Bearer '+token}}
  • ).then(
  • res=>{
  • console.log(res.data);
  • var tableData = res.data;
  • for (var i=0;ilength;i++) {
  • tableData[i].operation = ''+
  • ''+
  • ''+
  • ''+
  • '';
  • }
  • $('#dataTable').DataTable({
  • data: tableData,
  • columns: [
  • {
  • data: "id",
  • render: function(data) {
  • return ''processinstance.html?id=' + data + '">' + data + '';
  • }
  • },
  • {data: "name"},
  • {data: "description"},
  • {data: "version"},
  • {data: "operation"}
  • ]
  • });
  • }
  • )
  • });

    • 这个JS程序里面的第156到186行是调用Camunda的接口，查询现在已部署的工作流定义的数据，并动态加载到datatable中。

    其他的代码是提供了对工作流定义的操作。其中当点击编辑的按钮时，将跳转到之前的workflow.html页面进行编辑。为此，我们需要对之前的workflow.js代码做一点小的改动，使得可以获取到跳转过来时带的definitionId的参数，并读取camunda的接口，获取这个工作流的XML数据并呈现出来，改动后的workflow.js的内容如下：

    1. import $ from 'jquery';
    2. import './workflow.less';
    3. import BpmnModeler from 'bpmn-js/lib/Modeler';
    4. import diagramXML from './diagram.bpmn';
    5. import Keycloak from 'keycloak-js';
    6. import axios from 'axios';
    7. import config from './config.json';
    8.  
    9. import {
    10.   BpmnPropertiesPanelModule,
    11.   BpmnPropertiesProviderModule,
    12.   CamundaPlatformPropertiesProviderModule
    13. } from 'bpmn-js-properties-panel';
    14.  
    15. import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json';
    16. import customTranslate from './customTranslate/customTranslate';
    17.  
    18. var customTranslateModule = {
    19.     translate: [ 'value', customTranslate ]
    20.   };
    21.    
    22. var modeler = new BpmnModeler({
    23.     container: '#js-canvas',
    24.     propertiesPanel: {
    25.         parent: '#js-properties-panel'
    26.     },
    27.     additionalModules: [
    28.         BpmnPropertiesPanelModule,
    29.         BpmnPropertiesProviderModule,
    30.         CamundaPlatformPropertiesProviderModule,
    31.         customTranslateModule
    32.     ],
    33.     moddleExtensions: {
    34.         camunda: CamundaBpmnModdle
    35.     }
    36. });
    37.  
    38. var container = $('#js-drop-zone');
    39. var token;
    40.  
    41. async function initKeycloak() {
    42.     const keycloak = new Keycloak();
    43.     await keycloak.init({onLoad: 'login-required'});
    44.     return keycloak.token;
    45.   }
    46.  
    47. $(document).ready(async function () {
    48.     token = await initKeycloak();
    49.     console.log(token);
    50.     var str = window.location.search;
    51.     if (str) {
    52.         var parameter = str.split('=');
    53.         var definitionId = parameter[1];
    54.  
    55.         axios.get(
    56.             config.baseurl + '/engine-rest/process-definition/'+definitionId+'/xml', 
    57.             {headers: {'Content-Type':'application/json', 'Authorization': 'Bearer '+token}}
    58.         ).then(
    59.             res=>{
    60.               if (res.status==200) {
    61.                 createNewDiagram(res.data.bpmn20Xml);
    62.               }
    63.               else {
    64.                 alert("读取工作流定义失败，故障码为"+res.status.toString());
    65.               }
    66.             }
    67.         );
    68.     }
    69. });
    70.  
    71. // Deployment button
    72. $('#js-deployment').on("click", async function(event){
    73.     const { xml } = await modeler.saveXML({ format: true });
    74.     const parser = new DOMParser();
    75.     const xmldoc = parser.parseFromString(xml, "application/xml");
    76.     const processes = xmldoc.getElementsByTagName('bpmn2:process');
    77.     const process_name = processes[0].getAttribute('name');
    78.     const file = new File([xml], "diagram.bpmn", {type: "text/plain"});
    79.     const { svg } = await modeler.saveSVG();
    80.     const img_file = new File([svg], "diagram.svg", {type: "image/svg+xml"});
    81.     const data = new FormData();
    82.     data.append("deployment-name", process_name);
    83.     data.append("deployment-source", "process application");
    84.     data.append("data", file);
    85.     data.append("diagram", img_file);
    86.     axios.create({withCredentials: true}).post(
    87.         config.baseurl+'/engine-rest/deployment/create', 
    88.         data, 
    89.         {headers: {'Content-Type':'multipart/form-data', 'Authorization': 'Bearer '+token}}
    90.         ).then(
    91.             res=>{
    92.                 if (res.status==200) {
    93.                     alert("部署成功，点击链接查看:"+res.data.links[0].href);
    94.                 }
    95.             }
    96.     );
    97. });
    98.  
    99. function createNewDiagram(xml) {
    100.     openDiagram(xml);
    101. }
    102.   
    103. async function openDiagram(xml) {
    104.     try {
    105.         await modeler.importXML(xml);
    106.         container
    107.             .removeClass('with-error')
    108.             .addClass('with-diagram');
    109.     } catch (err) {
    110.         container
    111.             .removeClass('with-diagram')
    112.             .addClass('with-error');
    113.         container.find('.error pre').text(err.message);
    114.         console.error(err);
    115.     }
    116. }
    117.   
    118. function registerFileDrop(container, callback) {
    119.     function handleFileSelect(e) {
    120.         e.stopPropagation();
    121.         e.preventDefault();
    122.         var files = e.dataTransfer.files;
    123.         var file = files[0];
    124.         var reader = new FileReader();
    125.         reader.onload = function(e) {
    126.             var xml = e.target.result;
    127.             callback(xml);
    128.         };
    129.         reader.readAsText(file);
    130.     }
    131.   
    132.     function handleDragOver(e) {
    133.         e.stopPropagation();
    134.         e.preventDefault();
    135.         e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    136.     }
    137.   
    138.     container.get(0).addEventListener('dragover', handleDragOver, false);
    139.     container.get(0).addEventListener('drop', handleFileSelect, false);
    140. }
    141.   
    142.   
    143. // file drag / drop ///
    144. // check file api availability
    145. if (!window.FileList || !window.FileReader) {
    146.     window.alert(
    147.         'Looks like you use an older browser that does not support drag and drop. ' +
    148.         'Try using Chrome, Firefox or the Internet Explorer > 10.');
    149.     } else {
    150.     registerFileDrop(container, openDiagram);
    151.     console.log("registered");
    152. }
    153.   
    154. // bootstrap diagram functions
    155. $(function() {
    156.     $('#js-create-diagram').on('click', function(e) {
    157.       e.stopPropagation();
    158.       e.preventDefault();
    159.       createNewDiagram(diagramXML);
    160.     });
    161.   
    162.     var downloadLink = $('#js-download-diagram');
    163.     var downloadSvgLink = $('#js-download-svg');
    164.   
    165.     $('.buttons a').on('click', function(e) {
    166.         if (!$(this).is('.active')) {
    167.             e.preventDefault();
    168.             e.stopPropagation();
    169.         }
    170.     });
    171.   
    172.     function setEncoded(link, name, data) {
    173.         var encodedData = encodeURIComponent(data);
    174.         if (data) {
    175.             link.addClass('active').attr({
    176.                 'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
    177.                 'download': name
    178.             });
    179.         } else {
    180.             link.removeClass('active');
    181.         }
    182.     }
    183.   
    184.     var exportArtifacts = debounce(async function() {
    185.         try {
    186.             const { svg } = await modeler.saveSVG();
    187.             setEncoded(downloadSvgLink, 'diagram.svg', svg);
    188.         } catch (err) {
    189.             console.error('Error happened saving svg: ', err);
    190.             setEncoded(downloadSvgLink, 'diagram.svg', null);
    191.         }
    192.         try {
    193.             const { xml } = await modeler.saveXML({ format: true });
    194.             setEncoded(downloadLink, 'diagram.bpmn', xml);
    195.         } catch (err) {
    196.             console.error('Error happened saving XML: ', err);
    197.             setEncoded(downloadLink, 'diagram.bpmn', null);
    198.         }
    199.     }, 500);
    200.   
    201.     modeler.on('commandStack.changed', exportArtifacts);
    202. });
    203.  
    204. // helpers //
    205. function debounce(fn, timeout) {
    206.     var timer;
    207.     return function() {
    208.         if (timer) {
    209.             clearTimeout(timer);
    210.         }
    211.         timer = setTimeout(fn, timeout);
    212.     };
    213. }

    运行npm run build编译后，效果如下：

    view_workflow_1

  • 相关阅读:
    【无标题】
    pytorch的安装【全官网流程】
    【C进阶】之指针函数和函数指针
    【软考】文件的组织结构
    前端开发神器之 VsCode AI 辅助插件 DevChat
    (十三)admin-boot项目之redis注解实现接口限流
    如何选择线程数量
    一分钟让你学会如何合并PDF文件
    基于蚁群结合遗传算法的路径规划问题附Matlab代码
    【Skynet 入门实战练习】开发环境搭建 | 运行第一个项目 | debug console 简单使用
  • 原文地址：https://blog.csdn.net/gzroy/article/details/127527456