flowable撤销流程

对于 Flowable 工作流引擎来说，撤销流程并不是一个内建的功能。一般情况下，已经完成的流程实例是不能被撤销的。然而，你可以通过以下两种方式实现类似的效果：

1. 停止当前流程实例：你可以终止当前正在运行的流程实例。这将会使流程实例终止，并且不能再继续执行。你可以使用 Flowable 提供的 API 来停止流程实例，例如 `runtimeService.deleteProcessInstance(processInstanceId, deleteReason)`。

2. 取消已经提交但尚未完成的任务：如果你想要取消已经提交但还没有完成的任务，你可以使用 Flowable 提供的 API 来撤销这些任务。你可以通过查询待办任务列表，并且根据需要使用 `taskService.deleteTask(taskId, deleteReason)` 方法来删除任务。

需要注意的是，以上两种方式都是通过 Flowable 的 API 来操作的。具体实现方式可能会根据你的业务需求和具体的应用场景而有所变化。

相关问题

flowable 撤销

Flowable可以通过添加撤回节点和更新任务状态来实现撤销功能。

首先，在流程定义中添加一个撤回节点，并允许任务的发起人在任务未被处理前撤回任务。这个撤回节点可以使用以下代码示例来实现：

<userTask id="cancelTask" name="撤回任务" flowable:assignee="${initiator}">
    <extensionElements>
        <flowable:formProperty id="reason" name="撤回原因" type="string" required="true" />
    </extensionElements>
</userTask>

在这个示例中，`cancelTask`表示撤回节点的ID，`撤回任务`表示节点的名称，`${initiator}`表示任务的发起人。

然后，更新任务状态。在任务表中添加一个状态字段，例如`status`，并将其默认设置为`pending`，表示待处理状态。你可以使用以下代码示例来更新任务状态：

@Entity
@Table(name = "flowable_task")
public class FlowableTask {
    // 其他字段省略
    
    @Column(name = "status")
    private String status = "pending"; // 任务状态，默认为待处理
    
    // getter 和 setter 方法省略
}

通过以上步骤，你可以实现Flowable的撤销功能。当任务的发起人选择撤回任务时，任务将被撤回至撤回节点，并且发起人可以修改后再次提交任务。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

vue3集成bpmn-js在线设计flowable的流程图的实现代码

在 Vue3 中集成 `bpmn-js` 在线设计 `flowable` 流程图的实现代码如下：

<template>
  <div>
    <div ref="canvas" class="bpmn-canvas"></div>
    <div>
      <button @click="save">保存</button>
      <button @click="undo">撤销</button>
      <button @click="redo">重做</button>
    </div>
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
import 'bpmn-js-properties-panel/dist/assets/properties.css';
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css';

export default {
  mounted() {
    this.bpmnModeler = new BpmnModeler({
      container: this.$refs.canvas,
      propertiesPanel: {
        parent: '#properties-panel',
      },
      additionalModules: [
        // properties panel module
        require('bpmn-js-properties-panel'),
        // properties provider module
        require('bpmn-js-properties-panel/lib/provider/camunda'),
        // custom module
        require('./CustomModule'),
      ],
      moddleExtensions: {
        camunda: require('camunda-bpmn-moddle/resources/camunda'),
      },
    });

    this.bpmnModeler.createDiagram(() => {
      this.bpmnModeler.get('canvas').zoom('fit-viewport');
    });
  },
  methods: {
    save() {
      this.bpmnModeler.saveXML((err, xml) => {
        if (err) {
          console.error('保存失败', err);
        } else {
          console.log('保存成功', xml);
          // 发送给后台进行保存
        }
      });
    },
    undo() {
      this.bpmnModeler.get('commandStack').undo();
    },
    redo() {
      this.bpmnModeler.get('commandStack').redo();
    },
  },
};
</script>

首先，我们需要引入 `bpmn-js` 和 `bpmn-js-properties-panel` 两个依赖。然后，在 `additionalModules` 中添加我们自定义的 `CustomModule` 模块，该模块将在后面实现。

在 `mounted` 生命周期中，我们创建了一个 `BpmnModeler` 实例，并使用 `createDiagram` 方法创建一个新的 BPMN 图表。最后，我们将 BPMN 图表缩放以适应视口大小。

在 `methods` 中，我们实现了保存、撤销和重做功能。`save` 方法将当前 BPMN 图表保存为 XML 字符串，你可以将该字符串发送给后台进行保存。`undo` 和 `redo` 方法分别实现了撤销和重做操作。

接下来我们需要实现 `CustomModule` 模块。该模块可以添加自定义的工具栏按钮和事件监听器。下面是实现代码：

const CustomModule = {
  __init__: [
    'customRenderer',
    'customPalette',
    'customContextPad',
  ],
  customRenderer: ['type', require('./CustomRenderer')],
  customPalette: ['type', require('./CustomPalette')],
  customContextPad: ['type', require('./CustomContextPad')],
};

module.exports = CustomModule;

这里我们定义了三个模块：`customRenderer`、`customPalette` 和 `customContextPad`。分别用来实现自定义的渲染器、自定义的工具栏和自定义的上下文菜单。

下面是 `CustomRenderer` 的实现代码：

function CustomRenderer(eventBus, bpmnRenderer) {
  bpmnRenderer.drawShape = function (p, element) {
    const shape = bpmnRenderer.drawShape(p, element);
    if (element.type === 'bpmn:ServiceTask') {
      const rect = drawRect(p, 2, shape.width - 4, shape.height - 4, 10, '#000000');
      const path = drawPath(p, `M ${shape.width / 2} ${shape.height / 2 + 10} L ${shape.width / 2} ${shape.height - 10}`, { strokeWidth: 2, stroke: '#ffffff' });
      return [shape, rect, path];
    }
    return shape;
  };
}

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer'];

module.exports = CustomRenderer;

// 封装绘制矩形方法
function drawRect(p, x, y, width, height, color) {
  return p.rect(x, y, width, height, 10).attr({ fill: color });
}

// 封装绘制线段方法
function drawPath(p, path, attrs) {
  return p.path(path).attr(attrs);
}

这里我们实现了自定义的渲染器，通过修改 `bpmnRenderer` 来实现。我们在 `bpmn:ServiceTask` 上添加了一个矩形和一条竖线，用来表示该节点需要进行某个操作。

下面是 `CustomPalette` 的实现代码：

function CustomPalette(palette, create) {
  this._create = create;
  palette.registerProvider(this);
}

CustomPalette.$inject = ['palette', 'create'];

module.exports = CustomPalette;

CustomPalette.prototype.getPaletteEntries = function () {
  const create = this._create;
  function createAction(type) {
    return function (event) {
      const shape = create.start(event, type);
      create.end(event, shape);
    };
  }
  return {
    'create.service-task': {
      group: 'activity',
      className: 'bpmn-icon-service-task',
      title: 'Service Task',
      action: {
        dragstart: createAction('bpmn:ServiceTask'),
        click: createAction('bpmn:ServiceTask'),
      },
    },
  };
};

这里我们实现了自定义的工具栏，通过 `getPaletteEntries` 方法返回一个工具栏项，并在 `createAction` 方法中实现具体的操作。

最后是 `CustomContextPad` 的实现代码：

function CustomContextPad(eventBus, contextPad, create, elementFactory) {
  this._eventBus = eventBus;
  this._contextPad = contextPad;
  this._create = create;
  this._elementFactory = elementFactory;

  eventBus.on('shape.added', 2000, (event) => {
    const shape = event.element;
    if (shape.type === 'bpmn:ServiceTask') {
      this.appendAction(shape, 'Edit', 'bpmn-icon-service-task', 'custom-action', {
        action: 'edit',
        icon: 'bpmn-icon-service-task',
      });
    }
  });
}

CustomContextPad.$inject = ['eventBus', 'contextPad', 'create', 'elementFactory'];

module.exports = CustomContextPad;

CustomContextPad.prototype.appendAction = function (element, name, cssClass, title, options = {}) {
  const {
    action,
    icon,
  } = options;
  const self = this;
  const click = options.click || function (event, element) {
    self.triggerAction(action, element);
  };

  const button = document.createElement('div');
  button.title = title;
  button.className = `entry ${cssClass}`;
  button.innerHTML = `<i class="${icon}"></i>`;
  this._contextPad.registerProvider(element, {
    getEntries: () => {
      const entries = {};
      entries[name] = {
        action: click,
        className: cssClass,
        id: action,
        title,
      };
      return entries;
    },
  });

  return button;
};

CustomContextPad.prototype.triggerAction = function (action, element) {
  switch (action) {
    case 'edit':
      this._eventBus.fire('serviceTask.edit', { element });
      break;
    default:
      console.warn(`未知操作: ${action}`);
      break;
  }
};

这里我们实现了自定义的上下文菜单，通过在 `shape.added` 事件中添加自定义的菜单项。

至此，我们实现了在 Vue3 中集成 `bpmn-js` 在线设计 `flowable` 流程图的完整代码。