Activiti6--[3] 整合Activiti6流程設計器

原創 春风吹又生 2020-02-23 17:29

1 目的

基於【2】中的項目將流程圖設計相關頁面拷貝遷移到項目中。

2 準備

2.1 項目結構

activiti-1

2.2. 項目依賴

 	<properties>
		<java.version>1.8</java.version>
		<apache.xmlgraphics.version>1.7</apache.xmlgraphics.version>

	</properties>


	<dependencies>

		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-spring-boot-starter-basic</artifactId>
			<version>6.0.0</version>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-json-converter</artifactId>
			<version>6.0.0</version>
			<exclusions>
				<exclusion>
					<groupId>org.activiti</groupId>
					<artifactId>activiti-bpmn-model</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.apache.xmlgraphics</groupId>
			<artifactId>batik-codec</artifactId>
			<version>${apache.xmlgraphics.version}</version>
		</dependency>
		<dependency>
			<groupId>org.apache.xmlgraphics</groupId>
			<artifactId>batik-css</artifactId>
			<version>${apache.xmlgraphics.version}</version>
		</dependency>
		<dependency>
			<groupId>org.apache.xmlgraphics</groupId>
			<artifactId>batik-svg-dom</artifactId>
			<version>${apache.xmlgraphics.version}</version>
		</dependency>
		<dependency>
			<groupId>org.apache.xmlgraphics</groupId>
			<artifactId>batik-svggen</artifactId>
			<version>${apache.xmlgraphics.version}</version>
		</dependency>
	</dependencies>

3 拷貝資源

路徑：activiti-6.0.0 > wars > activiti-app > editor > editor-app
activiti-2

3.1 拷貝靜態資源

activiti-3

3.2 拷貝主頁

activiti-4
activiti-5

3.3 拷貝libs

將activiti-app中的libs拷貝到項目中靜態資源的libs中
activiti-6
activiti-7

3.4 拷貝css和js

【1】將activiti-app下的styles下的資源拷貝到css文件夾中

在這裏插入圖片描述
在這裏插入圖片描述

【2】拷貝style-editor.css到css文件夾中

在這裏插入圖片描述
在這裏插入圖片描述

【3】拷貝scripts到editor-app

在這裏插入圖片描述
在這裏插入圖片描述

  • activiti-app中editor下的scripts的controllers、services、*.js拷貝到common文件夾下
    在這裏插入圖片描述
    在這裏插入圖片描述
  • activiti-app中editor下的scripts的configuration下的文件拷貝到項目中configuration中。
    在這裏插入圖片描述

3.5 修改index.html引用路徑

<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Activiti Editor</title>
    <link rel="icon" type="image/ico" href="favicon.ico">
    <meta name="description" content="">
    <meta name="viewport"
          content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="Stylesheet" href="editor-app/libs/ui-grid_3.0.0/ui-grid.css" type="text/css"/>

    <!-- build:css styles/3thparty.css -->
    <link rel="stylesheet" href="editor-app/libs/bootstrap_3.1.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="editor-app/libs/bootstrap-tour_0.9.1/bootstrap-tour.min.css"/>
    <link rel="stylesheet" href="editor-app/libs/angular-spectrum-colorpicker_1.0.13/spectrum.css"/>
    <!-- endbuild -->

    <link rel="Stylesheet" media="screen" href="editor-app/editor/css/editor.css?v=2" type="text/css"/>
    <link rel="stylesheet" href="editor-app/css/style.css?v=2" type="text/css"/>

    <!-- build:css styles/style.css -->
    <link href="editor-app/css/common/style.css" rel="stylesheet">
    <link href="editor-app/css/common/style-retina.css" rel="stylesheet">
    <link rel="stylesheet" href="editor-app/css/style-editor.css">
    <!-- endbuild -->

</head>
<body ng-app="activitiModeler" ng-cloak>

    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation" id="main-header">
        <div class="fixed-container">
            <div class="navbar-header">
                <a ng-click="backToLanding()" class="landing-logo" ng-if="account != null && account != undefined" title="{{'GENERAL.MAIN-TITLE' | translate}}">
                    <img ng-if="account.tenantPictureId && account.tenantId"
                         ng-src="{{restRootUrl()}}/app/rest/tenants/{{account.tenantId}}/logo">

                    <img ng-if="!account.tenantPictureId" ng-src="{{appResourceRoot}}../images/activiti-logo.png">
                </a>
                <ul class="nav navbar-nav" id="main-nav" ng-show="authenticated">
                    <li ng-class="{'active' : item.id == mainPage.id}" ng-repeat="item in mainNavigation"
                        ng-show="(authenticated && !item.unauthenticated) || (item.unauthenticated && !authenticated)">
                        <a ng-click="setMainPage(item)">{{item.title | translate}}</a>
                    </li>
                </ul>
            </div>
            <div class="pull-right {{currentAppDefinition.definition.theme}}"
                 ng-class="{'app-indicator': currentAppDefinition}" ng-if="authenticated" ng-cloack>
                <span ng-if="currentAppDefinition.definition.theme">
                    {{currentAppDefinition.name}}
                </span>
                <i class="glyphicon {{currentAppDefinition.definition.icon}}"></i>

                <div class="dropdown btn-group btn-group-sm" activiti-fix-dropdown-bug>
                    <button type="button" class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown">{{account.firstName}} {{account.lastName}}
                        <span class="glyphicon glyphicon-chevron-down" style="font-size: 10px" aria-hidden="true"></span>
                    </button>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="" ng-click="logout()" translate>GENERAL.ACTION.LOGOUT</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--[if lt IE 9]>
    <div class="unsupported-browser">
        <p class="alert error">You are using an unsupported browser. Please upgrade your browser in order to use the
            editor.</p>
    </div>
    <![endif]-->
    <!--[if IE 9]>
    <div id="no-flash-message" class="unsupported-browser" style="display: none">
        <p class="alert error">No Adobe Flash installed. Please install Adobe Flash in order to use the file upload capabilities on this version of Internet Explorer.</p>
    </div>
    <script>
        var hasFlash = false;
        try {
            hasFlash = Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));
        } catch(exception) {
            hasFlash = ('undefined' != typeof navigator.mimeTypes['application/x-shockwave-flash']);
        }
        if (!hasFlash) {
            var showNoFlashMessage = function () {
                var element = document.getElementById('no-flash-message');
                element.style.display="block";
            };
            showNoFlashMessage();
        }
    </script>
    <![endif]-->
    <div class="alert-wrapper" ng-cloak>
        <div class="alert fadein {{alerts.current.type}}" ng-show="alerts.current" ng-click="dismissAlert()">
            <i class="glyphicon"
               ng-class="{'glyphicon-ok': alerts.current.type == 'info', 'glyphicon-remove': alerts.current.type == 'error'}"></i>
            <span>{{alerts.current.message}}</span>

            <div class="pull-right" ng-show="alerts.queue.length > 0">
                <span class="badge">{{alerts.queue.length + 1}}</span>
            </div>
        </div>
    </div>

    <div id="main" class="wrapper full clearfix" ng-view="" ng-cloak ng-style="{height: window.height + 'px'}">
    </div>

<!--[if lt IE 9]>
<script src="editor-app/libs/es5-shim-15.3.4.5/es5-shim.js"></script>
<script src="editor-app/libs/json3_3.2.6/lib/json3.min.js"></script>
<![endif]-->

<script src="editor-app/libs/jquery_1.11.0/jquery.min.js"></script>
<script src="editor-app/libs/jquery-ui-1.10.3.custom.min.js"></script>

<script src="editor-app/libs/angular_1.3.13/angular.min.js"></script>
<script src="editor-app/libs/angular-animate_1.3.13/angular-animate.min.js"></script>
<script src="editor-app/libs/bootstrap_3.1.1/js/bootstrap.min.js"></script>
<script src="editor-app/libs/angular-resource_1.3.13/angular-resource.min.js"></script>
<script src="editor-app/libs/angular-cookies_1.3.13/angular-cookies.min.js"></script>
<script src="editor-app/libs/angular-sanitize_1.3.13/angular-sanitize.min.js"></script>
<script src="editor-app/libs/angular-route_1.3.13/angular-route.min.js"></script>
<script src="editor-app/libs/angular-translate_2.4.2/angular-translate.min.js"></script>
<script src="editor-app/libs/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
<script src="editor-app/libs/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="editor-app/libs/angular-strap_2.1.6/angular-strap.min.js"></script>
<script src="editor-app/libs/angular-strap_2.1.6/angular-strap.tpl.min.js"></script>
<script src="editor-app/libs/momentjs_2.5.1/momentjs.min.js"></script>
<script src="editor-app/libs/bootstrap-tour_0.9.1/bootstrap-tour.min.js"></script>
<script src="editor-app/libs/ng-file-upload/ng-file-upload-shim.min.js"></script>
<script src="editor-app/libs/ng-file-upload/ng-file-upload.min.js"></script>

<script src="editor-app/libs/ui-utils.min-0.2.1.js" type="text/javascript"></script>
<script src="editor-app/libs/ui-grid_3.0.0/ui-grid.js" type="text/javascript"></script>
<script src="editor-app/libs/angular-dragdrop_1.0.11/angular-dragdrop.min.js" type="text/javascript"></script>
<script src="editor-app/libs/mousetrap-1.4.5.min.js" type="text/javascript"></script>
<script src="editor-app/libs/jquery.autogrow-textarea.js" type="text/javascript"></script>

<script src="editor-app/libs/prototype-1.5.1.js" type="text/javascript"></script>
<script src="editor-app/libs/path_parser.js" type="text/javascript"></script>

<script src="editor-app/libs/angular-spectrum-colorpicker_1.0.13/spectrum.js" type="text/javascript"></script>
<script src="editor-app/libs/angular-spectrum-colorpicker_1.0.13/angular-spectrum-colorpicker.min.js" type="text/javascript"></script>
<script src="editor-app/libs/angular-scroll_0.5.7/angular-scroll.min.js" type="text/javascript"></script>
<script src="editor-app/libs/angular-drag-and-drop-lists_1.2.0/angular-drag-and-drop-lists.js" type="text/javascript"></script>
<script src="editor-app/libs/html2canvas_0.4.1/html2canvas.js"></script>

<!-- Configuration -->
<script src="editor-app/app-cfg.js?v=2"></script>

<!-- build:js scripts/scripts.js -->
<script src="editor-app/editor/i18n/translation_en_us.js" type="text/javascript"></script>
<script src="editor-app/editor/i18n/translation_signavio_en_us.js" type="text/javascript"></script>
<script src="editor-app/editor/oryx.js" type="text/javascript"></script>

<script src="editor-app/common/http-auth-interceptor.js"></script>
<script src="editor-app/common/services/auth-services.js"></script>
<script src="editor-app/common/app.js"></script>
<script src="editor-app/common/editor-directives.js"></script>
<script src="editor-app/common/controllers/processes.js"></script>
<script src="editor-app/common/controllers/process.js"></script>
<script src="editor-app/common/controllers/forms.js"></script>
<script src="editor-app/common/controllers/form.js"></script>
<script src="editor-app/common/controllers/decision-tables.js"></script>
<script src="editor-app/common/controllers/decision-table.js"></script>
<script src="editor-app/common/controllers/app-definitions.js"></script>
<script src="editor-app/common/controllers/app-definition.js"></script>
<script src="editor-app/common/controllers/model-common-actions.js"></script>

<script src="editor-app/common/services/util-services.js"></script>
<script src="editor-app/common/services/identity-services.js"></script>

<script src="editor-app/common/services/form-services.js"></script>
<script src="editor-app/common/controllers/form-builder.js"></script>
<script src="editor-app/configuration/form-builder-toolbar-default-actions.js" type="text/javascript"></script>
<script src="editor-app/configuration/form-builder-toolbar.js" type="text/javascript"></script>
<script src="editor-app/common/controllers/form-toolbar-controller.js" type="text/javascript"></script>
<script src="editor-app/common/controllers/form-readonly-view.js"></script>

<script src="editor-app/common/services/decision-table-service.js"></script>
<script src="editor-app/common/controllers/decision-table-editor.js"></script>
<script src="editor-app/configuration/decision-table-toolbar-default-actions.js" type="text/javascript"></script>
<script src="editor-app/configuration/decision-table-toolbar.js" type="text/javascript"></script>
<script src="editor-app/common/controllers/decision-table-toolbar-controller.js" type="text/javascript"></script>

<script src="editor-app/common/controllers/app-definition-builder.js"></script>
<script src="editor-app/configuration/app-definition-toolbar-default-actions.js" type="text/javascript"></script>
<script src="editor-app/configuration/app-definition-toolbar.js" type="text/javascript"></script>
<script src="editor-app/common/controllers/app-definition-toolbar-controller.js" type="text/javascript"></script>

<script src="editor-app/eventbus.js" type="text/javascript"></script>

<script src="editor-app/editor-controller.js" type="text/javascript"></script>
<script src="editor-app/stencil-controller.js" type="text/javascript"></script>
<script src="editor-app/toolbar-controller.js" type="text/javascript"></script>
<script src="editor-app/header-controller.js" type="text/javascript"></script>
<script src="editor-app/select-shape-controller.js" type="text/javascript"></script>
<script src="editor-app/define-data-controller.js" type="text/javascript"></script>

<script src="editor-app/tour.js" type="text/javascript"></script>
<script src="editor-app/editor-utils.js" type="text/javascript"></script>
<script src="editor-app/configuration/toolbar-default-actions.js" type="text/javascript"></script>

<script src="editor-app/configuration/properties-default-controllers.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-execution-listeners-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-event-listeners-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-assignment-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-fields-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-form-properties-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-in-parameters-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-multiinstance-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-out-parameters-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-task-listeners-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-collapsed-subprocess-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-form-reference-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-sequenceflow-order-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-condition-expression-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-signal-definitions-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-signal-scope-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-message-definitions-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-message-scope-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-duedate-controller.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-decisiontable-reference-controller.js" type="text/javascript"></script>

<script src="editor-app/editor-config.js" type="text/javascript"></script>

<script src="editor-app/configuration/url-config.js" type="text/javascript"></script>

<script src="editor-app/configuration/toolbar.js" type="text/javascript"></script>
<script src="editor-app/configuration/toolbar-custom-actions.js" type="text/javascript"></script>

<script src="editor-app/configuration/properties.js" type="text/javascript"></script>
<script src="editor-app/configuration/properties-custom-controllers.js" type="text/javascript"></script>

<script src="editor-app/configuration/kis-header-custom.js" type="text/javascript"></script>
<script src="editor-app/configuration/kis-toolbar-custom-actions.js" type="text/javascript"></script>

<script src="editor-app/common/services/related-content-service.js"></script>
<script src="editor-app/common/directives.js"></script>
<script src="editor-app/common/providers-config.js"></script>
<script src="editor-app/common/services/resource-service.js"></script>
<script src="editor-app/common/services/recursion-helper.js"></script>
<script src="editor-app/common/services/authentication-service.js"></script>
<script src="editor-app/common/services/runtime-app-definition-service.js"></script>
<script src="editor-app/common/controllers/about.js"></script>
<!-- endbuild -->

<!-- Integration extensions -->
<script src="editor-app/resource-loader.js?v=2" app="editor"></script>

</body>
</html>

4 訪問index.html

訪問會出現報錯，經【5】問題解決後，再繼續下面的測試。
【1】先創建模型，拿到模型id然後訪問以下地址即可
在這裏插入圖片描述
【2】訪問http://localhost:8083/index.html#/editor/模型id
例如：http://localhost:8083/index.html#/editor/45001
在這裏插入圖片描述

5 問題記錄

5.1 控制層

5.1.1 創建模型並返回模型id

package com.ft.spring.activiti.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.node.ObjectNode;
import org.activiti.editor.constants.ModelDataJsonConstants;
import org.activiti.engine.RepositoryService;
import org.activiti.engine.repository.Model;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author luobaimang
 * @date 2019/11/28
 */
@Controller
public class ModelController {

    private static final Logger logger = LoggerFactory.getLogger(ModelController.class);

    @Autowired
    private RepositoryService repositoryService;
    @Autowired
    private ObjectMapper objectMapper;

    /**
     * 創建模型
     * @param response
     * @param name 模型名稱
     * @param key 模型key
     */
    @RequestMapping("/create")
    @ResponseBody
    public String create(HttpServletResponse response, String name, String key) throws IOException {
        logger.info("創建模型入參name：{},key:{}",name,key);
        Model model = repositoryService.newModel();
        ObjectNode modelNode = objectMapper.createObjectNode();
        modelNode.put(ModelDataJsonConstants.MODEL_NAME, name);
        modelNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION, "");
        modelNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
        model.setName(name);
        model.setKey(key);
        model.setMetaInfo(modelNode.toString());
        repositoryService.saveModel(model);
        createObjectNode(model.getId());
        logger.info("創建模型結束，返回模型ID：{}",model.getId());
        return model.getId();
    }

    /**
     * 創建模型時完善ModelEditorSource
     * @param modelId
     */
    @SuppressWarnings("deprecation")
    private void createObjectNode(String modelId){
        logger.info("創建模型完善ModelEditorSource入參模型ID：{}",modelId);
        ObjectNode editorNode = objectMapper.createObjectNode();
        editorNode.put("id", "canvas");
        editorNode.put("resourceId", "canvas");
        ObjectNode stencilSetNode = objectMapper.createObjectNode();
        stencilSetNode.put("namespace","http://b3mn.org/stencilset/bpmn2.0#");
        editorNode.put("stencilset", stencilSetNode);
        try {
            repositoryService.addModelEditorSource(modelId,editorNode.toString().getBytes("utf-8"));
        } catch (Exception e) {
            logger.info("創建模型時完善ModelEditorSource服務異常：{}",e);
        }
        logger.info("創建模型完善ModelEditorSource結束");
    }

}

5.1.2 工作流需要的接口

package com.ft.spring.activiti.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.node.ObjectNode;
import org.activiti.editor.constants.ModelDataJsonConstants;
import org.activiti.engine.ActivitiException;
import org.activiti.engine.RepositoryService;
import org.activiti.engine.repository.Model;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.PNGTranscoder;
import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.*;

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.InputStream;

/**
 * @author luobaimang
 * @date 2019/11/28
 */
@RestController
@RequestMapping("service")
public class ModelRestController implements ModelDataJsonConstants {

        protected static final Logger LOGGER = LoggerFactory.getLogger(ModelRestController.class);

        @Autowired
        private RepositoryService repositoryService;

        @Autowired
        private ObjectMapper objectMapper;

        /**
         * 更新流程
         *
         * @param modelId     模型ID
         * @param name        流程模型名稱
         * @param description
         * @param json_xml    流程文件
         * @param svg_xml     圖片
         */
        @RequestMapping(value = "/model/{modelId}/save", method = RequestMethod.PUT)
        @ResponseStatus(value = HttpStatus.OK)
        public void saveModel(@PathVariable String modelId
                , String name, String description
                , String json_xml, String svg_xml) {
            try {

                Model model = repositoryService.getModel(modelId);

                ObjectNode modelJson = (ObjectNode) objectMapper.readTree(model.getMetaInfo());

                modelJson.put(MODEL_NAME, name);
                modelJson.put(MODEL_DESCRIPTION, description);
                modelJson.put(ModelDataJsonConstants.MODEL_REVISION, model.getVersion() + 1);
                model.setMetaInfo(modelJson.toString());
                model.setName(name);
                repositoryService.saveModel(model);

                repositoryService.addModelEditorSource(model.getId(), json_xml.getBytes("utf-8"));

                InputStream svgStream = new ByteArrayInputStream(svg_xml.getBytes("utf-8"));
                TranscoderInput input = new TranscoderInput(svgStream);

                PNGTranscoder transcoder = new PNGTranscoder();
                // Setup output
                ByteArrayOutputStream outStream = new ByteArrayOutputStream();
                TranscoderOutput output = new TranscoderOutput(outStream);

                // Do the transformation
                transcoder.transcode(input, output);
                final byte[] result = outStream.toByteArray();
                repositoryService.addModelEditorSourceExtra(model.getId(), result);
                outStream.close();
            } catch (Exception e) {
                LOGGER.error("Error saving model", e);
                throw new ActivitiException("Error saving model", e);
            }
        }


    /**
     * 獲取model的節點信息，編輯器根據返回的json進行繪圖
     *
     * @param modelId
     * @return
     */
    @SuppressWarnings("deprecation")
    @RequestMapping(value = "/model/{modelId}/json", method = RequestMethod.GET, produces = "application/json")
    public ObjectNode getEditorJson(@PathVariable String modelId) {
        ObjectNode modelNode = null;
        Model model = repositoryService.getModel(modelId);
        if (model != null) {
            try {
                if (StringUtils.isNotEmpty(model.getMetaInfo())) {
                    modelNode = (ObjectNode) objectMapper.readTree(model.getMetaInfo());
                } else {
                    modelNode = objectMapper.createObjectNode();
                    modelNode.put(MODEL_NAME, model.getName());
                }
                modelNode.put(MODEL_ID, model.getId());
                ObjectNode editorJsonNode = (ObjectNode) objectMapper.readTree(
                        new String(repositoryService.getModelEditorSource(model.getId()), "utf-8"));
                modelNode.put("model", editorJsonNode);
            } catch (Exception e) {
                LOGGER.error("Error creating model JSON", e);
                throw new ActivitiException("Error creating model JSON", e);
            }
        }
        return modelNode;
    }

    /**
     * 獲取編輯器組件及配置項信息
     * 獲取流程json文件
     *
     * @return
     */
    @RequestMapping(value = "/editor/stencilset", method = RequestMethod.GET, produces = "application/json;charset=utf-8")
    @ResponseBody
    public String getStencilset() {
        InputStream stencilsetStream = this.getClass().getClassLoader().getResourceAsStream("stencilset.json");
        try {
            return IOUtils.toString(stencilsetStream, "utf-8");
        } catch (Exception e) {
            throw new ActivitiException("Error while loading stencil set", e);
        }
    }
}

5.2 修改js

5.2.1 去掉權限驗證

原因訪問index.html重定向到登陸界面
http://localhost:8083/#/login?redirectUrl=http:%2F%2Flocalhost:8083%2Findex.html%23%2Fprocesses
【1】修改app.js
在這裏插入圖片描述
在這裏插入圖片描述

5.2.2 拷貝en.json

在這裏插入圖片描述

5.2.3 修改base路徑，正確訪問editor頁面

在這裏插入圖片描述

5.2.4 修改url-config.js

根據5.1.2 修改成以下訪問地址

var KISBPM = KISBPM || {};
KISBPM.URL = {
    getModel: function(modelId) {
        return ACTIVITI.CONFIG.contextRoot + '/model/' + modelId + '/json';
    },

    getStencilSet: function() {
        return ACTIVITI.CONFIG.contextRoot + '/editor/stencilset?version=' + Date.now();
    },

    putModel: function(modelId) {
        return ACTIVITI.CONFIG.contextRoot + '/model/' + modelId + '/save';
    }
};

5.2.5 修改app-cfg.js

ACTIVITI.CONFIG = {
	'onPremise' : true,
	'contextRoot' : '/service',
	'webContextRoot' : '/activiti-app'
};

5.2.6 修改oryx.debug.js、oryx.js

因訪問報錯404：http://localhost:8083/service/app/rest/stencil-sets/editor?version=1574941194439
在這裏插入圖片描述
因訪問地址改了，故需要訪問請求地址，讓其能正確訪問。修改如下：
在這裏插入圖片描述
在這裏插入圖片描述

5.2.7 修改editor-controller.js

報：TypeError: Cannot read property ‘firstName’ of undefined
at Object.gettingStarted
註釋掉該行。
在這裏插入圖片描述

5.3 新增漢化文件

在這裏插入圖片描述

5.4 新增fonts

報：http://localhost:8083/editor-app/fonts/lato-bold-webfont.woff net::ERR_ABORTED 404
jquery.min.js:4 GET http://localhost:8083/editor-app/fonts/lato-regular-webfont.woff net::ERR_ABORTED 404
GET http://localhost:8083/editor-app/fonts/lato-bold-webfont.ttf net::ERR_ABORTED 404
editor-app/fonts/lato-regular-webfont.ttf:1 GET http://localhost:8083/editor-app/fonts/lato-regular-webfont.ttf net::ERR_ABORTED 404
在這裏插入圖片描述

6 項目地址

https://gitee.com/idcory/ft-spring-demo/tree/master/ft-demo-activiti

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

工作流設計器

對工作流可視化，工作流設計器是非常重要的支撐工具，有CS端及BS端的。 總體調研下來，建議BS端使用BPMN.io定製開發，CS端使用Camunda Modeler，與IDE集成顯示使用Camunda BPMN visualizer插件。

原創 2023-02-19 23:57:01

eclipse安裝activiti bpmn 2.0 designer

1. 安裝eclipse 的幾個插件 org.eclipse.emf.transaction_1.4.0.201306111400.jar org.eclipse.emf.validation.ui_1.7.0.201403111711.

原創 2021-12-25 21:10:49

activiti部署之後，流程圖亂碼

問題 1：在生成流程圖時，設置的是宋體；InputStream imageStream = diagramGenerator.generateDiagram(bpmnModel, "png", highLightedActivitis,h

原創 2021-09-01 21:22:50

springboot 集成 activiti 流程引擎

1. pom <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId>

原創 2021-08-13 09:12:39

activiti7表說明

數據表分類 通用數據(act_ge_) 表名 解釋 act_ge_bytearray 二進制數據表，存儲通用的流程定義和流程資源。 act_ge_property 系統相關屬性，屬性數據表存儲整個流程引擎級別的數據，初始

原創 2021-07-27 21:21:19

現在工作流都用什麼？ activiti 和 flowable 哪個好

activiti5以及activiti6、flowable是Tijs Rademakers團隊開發的。 Activiti7是 Salaboy團隊開發的。activiti6以及activiti5代碼目前有 Salaboy團隊進行維護。 因爲T

原創 2021-07-01 21:13:31

工作流項目一般都有哪些模塊？

工作流模塊------------------------------- 1.模型管理 ：web在線流程設計器、導入導出xml、複製流程、部署流程 2.流程管理 ：導入導出流程資源文件、查看流程圖、根據流程實例反射出流程模型、激活掛起 3.

原創 2021-06-21 21:12:42

Activiti 開發案例之 API 映射 SQL 查詢

前言 Activiti 自身提供了一套用戶管理，但是在開發中業務系統本身就有一套用戶管理系統，這時候就要把業務系統中的部分用戶數據同步到 Activiti 用戶表管理中。那麼，如果不同步呢？不少開發者一開始以爲必須要有用戶纔可以運行

文文1 2021-06-03 09:14:15

activiti 和 flowable 哪個好

activiti5以及activiti6、flowable是Tijs Rademakers團隊開發的。 Activiti7是 Salaboy團隊開發的。activiti6以及activiti5代碼目前有 Salaboy團隊進行維護。因爲Ti

原創 2021-04-10 21:13:09

Java 流行的工作流引擎

Java 流行的工作流引擎 JBPM 工作流 JBPM 是一個Java業務流程管理系統，是JBoss中一款開源的工作流引擎，是一個輕量級的，使用BPMN 2規範可擴展的 工作流引擎，也是一個工作流管理系統，它可以運行在任何java環境，嵌

原創 2021-02-21 21:23:33

【程序源代碼】Activiti6+java+oa開發框架系統

關鍵字：基於Springboot後臺，前臺vue.js跨域前端，Activiti6工作流的開發框架；是一個非常不錯的工作流程開發框架；比較適合做中小型OA項目。 -------------------------------------

osc_bwy4ep83 2021-01-30 21:25:07

spring SPI 實現方式

方式1：引入某個jar 包就能自動初始化某些bean 1.需要在resource/META-INF 下創建一個 名爲 spring.factories 的文件，並指定配置類型如 org.springframework.boot.auto

原創 2021-01-30 11:14:20

activiti6

https://zhengjianfeng.cn/?p=167

原創 2021-01-30 11:11:22

IDEA 安裝ACTIVITI 插件以及 插件中文亂碼

安裝插件 打開IDEA,按ctrl+alt+S,打開Pluging             亂碼問題 idea 安轉activiti插件後，編輯流程圖發現保存後中文亂碼，並且idea的字符集（Settings—>Editor—>Fil

原創 2021-01-30 11:08:37

Activiti工作流引擎(Spring boot 2.0集成)

最近根據工作需要研究了下activiti工作流引擎，集成spring boot,以此僅做記錄。 項目可直接下載導入IDEA中直接運行,項目啓動自動創建數據庫相關表,主要集成了activiti modeler、diagram-viewer。

原創 2021-01-30 10:54:18