boot-admin整合flowable官方editor-app进行BPMN2.0建模 - ToB企服应用市场:ToB评测及商务社交产业平台

<!doctype html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Activiti Editor</title>
<meta name="description" content="">
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
<link rel="Stylesheet" media="screen" href="/editor-app/libs/ng-grid-2.0.7.min.css" type="text/css"/>
<link rel="stylesheet" href="/editor-app/libs/bootstrap_3.1.1/css/bootstrap.min.css"/>
<link rel="Stylesheet" media="screen" href="/editor-app/editor/css/editor.css" type="text/css"/>
<link rel="stylesheet" href="/editor-app/css/style.css" type="text/css"/>
<link rel="stylesheet" href="/editor-app/css/style-common.css">
<link rel="stylesheet" href="/editor-app/css/style-editor.css">
</head>
<body>
<i
ng-></i>
{{alerts.current.message}}
0">
{{alerts.queue.length + 1}}
</body>
</html>

复制代码

var ACTIVITI = ACTIVITI || {};
ACTIVITI.CONFIG = {
'contextRoot' : 'http://网关IP:网关端口号/api/workflow/auth/activiti',
};

复制代码

var KISBPM = KISBPM || {};
KISBPM.URL = {
//通过modelId，获取已保存模型的json数据
getModel: function(modelId) {
return ACTIVITI.CONFIG.contextRoot + '/model/json?modelId=' + modelId;
},
//获取汉化资源json数据
getStencilSet: function() {
return ACTIVITI.CONFIG.contextRoot + '/editor/stencilset?version=' + Date.now();
},
//保存模型数据
putModel: function(modelId) {
return ACTIVITI.CONFIG.contextRoot + '/model/save?modelId=' + modelId;
},
//从cookie中读取令牌
getToken: function() {
var cookies = document.cookie;
var list = cookies.split("; "); // 解析出名/值对列表
for (var i = 0; i < list.length; i++) {
var arr = list[i].split("="); // 解析出名和值
if (arr[0] == "Admin-Token") {
var cookieVal = decodeURIComponent(arr[1]); // 对cookie值解码
break;
}
}
return 'Bearer' + cookieVal;
}
};

复制代码

$http({method: 'GET',
headers: {
'X-Token': KISBPM.URL.getToken()
},
url: KISBPM.URL.getStencilSet()})
.success(function (data, status, headers, config) {
var quickMenuDefinition = ['UserTask', 'EndNoneEvent', 'ExclusiveGateway',
'CatchTimerEvent', 'ThrowNoneEvent', 'TextAnnotation',
'SequenceFlow', 'Association'];
var ignoreForPaletteDefinition = ['SequenceFlow', 'MessageFlow', 'Association', 'DataAssociation', 'DataStore', 'SendTask'];
var quickMenuItems = [];
var morphRoles = [];
for (var i = 0; i < data.rules.morphingRules.length; i++)
{
var role = data.rules.morphingRules[i].role;
var roleItem = {'role': role, 'morphOptions': []};
morphRoles.push(roleItem);
}
// Check all received items
for (var stencilIndex = 0; stencilIndex < data.stencils.length; stencilIndex++)
{
// Check if the root group is the 'diagram' group. If so, this item should not be shown.
var currentGroupName = data.stencils[stencilIndex].groups[0];
if (currentGroupName === 'Diagram' || currentGroupName === 'Form') {
continue; // go to next item
}
var removed = false;
if (data.stencils[stencilIndex].removed) {
removed = true;
}
var currentGroup = undefined;
if (!removed) {
// Check if this group already exists. If not, we create a new one
if (currentGroupName !== null && currentGroupName !== undefined && currentGroupName.length > 0) {
currentGroup = findGroup(currentGroupName, stencilItemGroups); // Find group in root groups array
if (currentGroup === null) {
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>currentGroup = addGroup(currentGroupName, stencilItemGroups);
}
// Add all child groups (if any)
for (var groupIndex = 1; groupIndex < data.stencils[stencilIndex].groups.length; groupIndex++) {
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>var childGroupName = data.stencils[stencilIndex].groups[groupIndex];
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>var childGroup = findGroup(childGroupName, currentGroup.groups);
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>if (childGroup === null) {
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> childGroup = addGroup(childGroupName, currentGroup.groups);
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>}
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>// The current group variable holds the parent of the next group (if any),
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>// and is basically the last element in the array of groups defined in the stencil item
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>currentGroup = childGroup;
}
}
}
// Construct the stencil item
var stencilItem = {'id': data.stencils[stencilIndex].id,
'name': data.stencils[stencilIndex].title,
'description': data.stencils[stencilIndex].description,
'icon': data.stencils[stencilIndex].icon,
'type': data.stencils[stencilIndex].type,
'roles': data.stencils[stencilIndex].roles,
'removed': removed,
'customIcon': false,
'canConnect': false,
'canConnectTo': false,
'canConnectAssociation': false};
if (data.stencils[stencilIndex].customIconId && data.stencils[stencilIndex].customIconId > 0) {
stencilItem.customIcon = true;
stencilItem.icon = data.stencils[stencilIndex].customIconId;
}
if (!removed) {
if (quickMenuDefinition.indexOf(stencilItem.id) >= 0) {
quickMenuItems[quickMenuDefinition.indexOf(stencilItem.id)] = stencilItem;
}
}
if (stencilItem.id === 'TextAnnotation' || stencilItem.id === 'BoundaryCompensationEvent') {
stencilItem.canConnectAssociation = true;
}
for (var i = 0; i < data.stencils[stencilIndex].roles.length; i++) {
var stencilRole = data.stencils[stencilIndex].roles[i];
if (stencilRole === 'sequence_start') {
stencilItem.canConnect = true;
} else if (stencilRole === 'sequence_end') {
stencilItem.canConnectTo = true;
}
for (var j = 0; j < morphRoles.length; j++) {
if (stencilRole === morphRoles[j].role) {
if (!removed) {
morphRoles[j].morphOptions.push(stencilItem);
}
stencilItem.morphRole = morphRoles[j].role;
break;
}
}
}
if (currentGroup) {
// Add the stencil item to the correct group
currentGroup.items.push(stencilItem);
if (ignoreForPaletteDefinition.indexOf(stencilItem.id) < 0) {
currentGroup.paletteItems.push(stencilItem);
}
} else {
// It's a root stencil element
if (!removed) {
stencilItemGroups.push(stencilItem);
}
}
}
for (var i = 0; i < stencilItemGroups.length; i++)
{
if (stencilItemGroups[i].paletteItems && stencilItemGroups[i].paletteItems.length == 0)
{
stencilItemGroups[i].visible = false;
}
}
$scope.stencilItemGroups = stencilItemGroups;
var containmentRules = [];
for (var i = 0; i < data.rules.containmentRules.length; i++)
{
var rule = data.rules.containmentRules[i];
containmentRules.push(rule);
}
$scope.containmentRules = containmentRules;
// remove quick menu items which are not available anymore due to custom pallette
var availableQuickMenuItems = [];
for (var i = 0; i < quickMenuItems.length; i++)
{
if (quickMenuItems[i]) {
availableQuickMenuItems[availableQuickMenuItems.length] = quickMenuItems[i];
}
}
$scope.quickMenuItems = availableQuickMenuItems;
$scope.morphRoles = morphRoles;
}).
error(function (data, status, headers, config) {
console.log('Something went wrong when fetching stencil items:' + JSON.stringify(data));
});

复制代码

function fetchModel(modelId) {
var modelUrl = KISBPM.URL.getModel(modelId);
$http({method: 'GET',
headers: {'X-Token': KISBPM.URL.getToken()},
url: modelUrl}).
success(function (data, status, headers, config) {
$rootScope.editor = new ORYX.Editor(data);
$rootScope.modelData = angular.fromJson(data);
$rootScope.editorFactory.resolve();
}).
error(function (data, status, headers, config) {
console.log('Error loading model with id ' + modelId + ' ' + data);
});
}

复制代码

$http({ method: 'PUT',
data: params,
ignoreErrors: true,
headers: {'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'X-Token': KISBPM.URL.getToken()},
transformRequest: function (obj) {
var str = [];
for (var p in obj) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
},
url: KISBPM.URL.putModel(modelMetaData.modelId)})
.success(function (data, status, headers, config) {
$scope.editor.handleEvents({
type: ORYX.CONFIG.EVENT_SAVED
});
$scope.modelData.name = $scope.saveDialog.name;
$scope.modelData.lastUpdated = data.lastUpdated;
$scope.status.loading = false;
$scope.$hide();
// Fire event to all who is listening
var saveEvent = {
type: KISBPM.eventBus.EVENT_TYPE_MODEL_SAVED,
model: params,
modelId: modelMetaData.modelId,
eventType: 'update-model'
};
KISBPM.eventBus.dispatch(KISBPM.eventBus.EVENT_TYPE_MODEL_SAVED, saveEvent);
// Reset state
$scope.error = undefined;
$scope.status.loading = false;
// Execute any callback
if (successCallback) {
successCallback();
}
})
.error(function (data, status, headers, config) {
$scope.error = {};
console.log('Something went wrong when updating the process model:' + JSON.stringify(data));
$scope.status.loading = false;
});

复制代码

<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>

复制代码

<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> 查询重置关闭<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>刷新新建查询<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>{{ props.row.id }}<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> {{ props.row.key }}<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> {{ props.row.name }}<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> {{ props.row.version }}<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> {{ $commonUtils.dateTimeFormat(props.row.createTime) }}<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> {{ $commonUtils.dateTimeFormat(props.row.lastUpdateTime) }}<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> 修改删除部署 XML<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template><template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> 关闭创建重置<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template> 关闭生成文件<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="模型编辑器" @close="closeDialog">
<iframe ref="Modeler" id="map" scrolling="auto" v-bind:src="contents"
frameborder="0" ></iframe>
</el-dialog>
</template>

复制代码

import request from '@/utils/request'
//分页获取模型数据
export function fetchModelPage(data) {
return request({
url: '/api/workflow/auth/activiti/model/page',
method: 'post',
data
})
}
//保存模型
export function saveNewModel(data) {
return request({
url: '/api/workflow/auth/activiti/model/add',
method: 'post',
data
})
}
//删除模型数据
export function delModel(data) {
return request({
url: '/api/workflow/auth/activiti/model/del',
method: 'post',
data
})
}
//部署模型
export function deployModel(data) {
return request({
url: '/api/workflow/auth/activiti/model/deploy',
method: 'post',
data
})
}
//获取模型XML
export function fetchXml(data) {
return request({
url: '/api/workflow/auth/activiti/model/xml',
method: 'post',
data
})
}

复制代码