提交代码
姜玉琦
parent
ecbb506578
commit
73f42a722d
|
|
@ -19,23 +19,31 @@
|
|||
"@vueup/vue-quill": "1.1.0",
|
||||
"@vueuse/core": "9.5.0",
|
||||
"animate.css": "4.1.1",
|
||||
"await-to-js": "^3.0.0",
|
||||
"axios": "^1.0.0",
|
||||
"bpmn-js": "^8.10.0",
|
||||
"bpmn-js-task-resize": "^1.2.0",
|
||||
"bpmn-js-token-simulation": "^0.10.0",
|
||||
"codemirror-editor-vue3": "^2.0.6",
|
||||
"core-js": "^3.6.5",
|
||||
"diagram-js": "^12.2.0",
|
||||
"diagram-js-minimap": "^2.1.1",
|
||||
"echarts": "5.4.0",
|
||||
"element-plus": "2.2.27",
|
||||
"file-saver": "2.0.5",
|
||||
"fuse.js": "6.6.2",
|
||||
"js-cookie": "3.0.1",
|
||||
"jsencrypt": "3.3.1",
|
||||
"lodash": "^4.17.21",
|
||||
"mitt": "^3.0.1",
|
||||
"nprogress": "0.2.0",
|
||||
"path-browserify": "1.0.1",
|
||||
"path-to-regexp": "6.2.0",
|
||||
"pinia": "2.0.22",
|
||||
"vue": "3.2.45",
|
||||
"vue-cropper": "1.0.3",
|
||||
"vue-router": "4.1.4",
|
||||
"yanzhu": "file:"
|
||||
"x2js": "^3.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "3.1.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,214 @@
|
|||
<template>
|
||||
<div class="process-design" :style="'display: flex; height:' + height">
|
||||
<my-process-designer
|
||||
v-model="xmlString"
|
||||
v-bind="controlForm"
|
||||
keyboard
|
||||
ref="processDesigner"
|
||||
:events="[
|
||||
'element.click',
|
||||
'connection.added',
|
||||
'connection.removed',
|
||||
'connection.changed'
|
||||
]"
|
||||
@element-click="elementClick"
|
||||
@init-finished="initModeler"
|
||||
@element-contextmenu="elementContextmenu"
|
||||
@save="onSaveProcess"
|
||||
/>
|
||||
<my-process-penal :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" />
|
||||
|
||||
<!-- demo config -->
|
||||
<!-- <div class="demo-control-bar">-->
|
||||
<!-- <div class="open-model-button" @click="controlDrawerVisible = true"><el-icon><setting /></el-icon></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <el-drawer v-model="controlDrawerVisible" size="400px" title="偏好设置" append-to-body destroy-on-close>-->
|
||||
<!-- <el-form :model="controlForm" size="small" label-width="100px" class="control-form" @submit.prevent>-->
|
||||
<!-- <el-form-item label="流程ID">-->
|
||||
<!-- <el-input v-model="controlForm.processId" @change="reloadProcessDesigner(true)" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="流程名称">-->
|
||||
<!-- <el-input v-model="controlForm.processName" @change="reloadProcessDesigner(true)" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="流转模拟">-->
|
||||
<!-- <el-switch v-model="controlForm.simulation" inactive-text="停用" active-text="启用" @change="reloadProcessDesigner()" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="禁用双击">-->
|
||||
<!-- <el-switch v-model="controlForm.labelEditing" inactive-text="停用" active-text="启用" @change="changeLabelEditingStatus" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="自定义渲染">-->
|
||||
<!-- <el-switch v-model="controlForm.labelVisible" inactive-text="停用" active-text="启用" @change="changeLabelVisibleStatus" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="流程引擎">-->
|
||||
<!-- <el-radio-group v-model="controlForm.prefix" @change="reloadProcessDesigner()">-->
|
||||
<!-- <el-radio label="camunda">camunda</el-radio>-->
|
||||
<!-- <el-radio label="flowable">flowable</el-radio>-->
|
||||
<!-- <el-radio label="activiti">activiti</el-radio>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="工具栏">-->
|
||||
<!-- <el-radio-group v-model="controlForm.headerButtonSize">-->
|
||||
<!-- <el-radio label="small">small</el-radio>-->
|
||||
<!-- <el-radio label="default">default</el-radio>-->
|
||||
<!-- <el-radio label="large">large</el-radio>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-switch v-model="pageMode" active-text="dark" inactive-text="light" @change="changePageMode"></el-switch>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-drawer>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyProcessDesigner from '@/package/designer';
|
||||
// import MyProcessPalette from '@/package/palette';
|
||||
import MyProcessPenal from '@/package/penal';
|
||||
// 自定义渲染（隐藏了 label 标签）
|
||||
import CustomRenderer from '@/modules/custom-renderer';
|
||||
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
|
||||
import CustomContentPadProvider from '@/package/designer/plugins/content-pad';
|
||||
// 自定义左侧菜单（修改 默认任务 为 用户任务）
|
||||
import CustomPaletteProvider from '@/package/designer/plugins/palette';
|
||||
|
||||
import '@/package/theme/index.scss';
|
||||
import 'bpmn-js/dist/assets/diagram-js.css';
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
|
||||
|
||||
export default {
|
||||
name: 'ProcessDesigner',
|
||||
props: {
|
||||
bpmnXml: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
designerForm: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MyProcessDesigner,
|
||||
MyProcessPenal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
height: document.documentElement.clientHeight - 94.5 + "px;",
|
||||
xmlString: this.bpmnXml,
|
||||
modeler: null,
|
||||
controlDrawerVisible: false,
|
||||
infoTipVisible: false,
|
||||
pageMode: false,
|
||||
controlForm: {
|
||||
processId: this.designerForm.processKey || '',
|
||||
processName: this.designerForm.processName || '',
|
||||
simulation: true,
|
||||
labelEditing: false,
|
||||
labelVisible: false,
|
||||
prefix: 'flowable',
|
||||
headerButtonSize: 'default',
|
||||
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
|
||||
},
|
||||
addis: {
|
||||
CustomContentPadProvider,
|
||||
CustomPaletteProvider
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reloadProcessDesigner(notDeep) {
|
||||
this.controlForm.additionalModel = [];
|
||||
for (const key in this.addis) {
|
||||
if (this.addis[key]) {
|
||||
this.controlForm.additionalModel.push(this.addis[key]);
|
||||
}
|
||||
}
|
||||
!notDeep && (this.xmlString = undefined);
|
||||
this.reloadIndex += 1;
|
||||
this.modeler = null; // 避免 panel 异常
|
||||
},
|
||||
changeLabelEditingStatus(status) {
|
||||
this.addis.labelEditing = status ? { labelEditingProvider: ['value', ''] } : false;
|
||||
this.reloadProcessDesigner();
|
||||
},
|
||||
changeLabelVisibleStatus(status) {
|
||||
this.addis.customRenderer = status ? CustomRenderer : false;
|
||||
this.reloadProcessDesigner();
|
||||
},
|
||||
elementClick(element) {
|
||||
this.element = element;
|
||||
},
|
||||
initModeler(modeler) {
|
||||
setTimeout(() => {
|
||||
this.modeler = modeler;
|
||||
}, 10);
|
||||
},
|
||||
elementContextmenu(element) {
|
||||
},
|
||||
onSaveProcess(saveData) {
|
||||
this.$emit('save', saveData);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body,
|
||||
body * {
|
||||
/* 滚动条 */
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: #fff; /*滚动条的背景颜色*/
|
||||
-webkit-border-radius: 0; /*滚动条的圆角宽度*/
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px; /*滚动条的宽度*/
|
||||
height: 8px; /*滚动条的高度*/
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:vertical {
|
||||
/*垂直滚动条的样式*/
|
||||
height: 50px;
|
||||
background-color: rgba(153, 153, 153, 0.5);
|
||||
-webkit-border-radius: 4px;
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: -2px;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条的hover样式*/
|
||||
background-color: rgba(159, 159, 159, 0.3);
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
/*滚动条的hover样式*/
|
||||
background-color: rgba(159, 159, 159, 0.5);
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.demo-control-bar {
|
||||
position: fixed;
|
||||
right: 8px;
|
||||
bottom: 48px;
|
||||
z-index: 1;
|
||||
}
|
||||
.open-model-button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
background: rgba(64, 158, 255, 1);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
<template>
|
||||
<div class="process-viewer">
|
||||
<div class="process-canvas" style="height: 100%;" ref="processCanvas" v-show="!isLoading" />
|
||||
<!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
|
||||
<defs ref="customSuccessDefs">
|
||||
<marker id="sequenceflow-end-white-success" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
|
||||
<path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
|
||||
</marker>
|
||||
<marker id="conditional-flow-marker-white-success" viewBox="0 0 20 20" refX="-1" refY="10" markerWidth="10" markerHeight="10" orient="auto">
|
||||
<path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
|
||||
<defs ref="customFailDefs">
|
||||
<marker id="sequenceflow-end-white-fail" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
|
||||
<path class="fail-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
|
||||
</marker>
|
||||
<marker id="conditional-flow-marker-white-fail" viewBox="0 0 20 20" refX="-1" refY="10" markerWidth="10" markerHeight="10" orient="auto">
|
||||
<path class="fail-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- 已完成节点悬浮弹窗 -->
|
||||
<el-dialog class="comment-dialog" :title="dlgTitle || '审批记录'" v-model="dialogVisible">
|
||||
<el-row>
|
||||
<el-table :data="taskCommentList" border header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
|
||||
<el-table-column label="候选办理" prop="candidate" width="150px" align="center" />
|
||||
<el-table-column label="实际办理" prop="assigneeName" width="100px" align="center" />
|
||||
<el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
|
||||
<el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
|
||||
<el-table-column label="耗时" prop="duration" width="100px" align="center" />
|
||||
<el-table-column label="审批意见" align="center">
|
||||
<template #default="scope">
|
||||
{{scope.row.commentList&&scope.row.commentList[0]?scope.row.commentList[0].fullMessage:''}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
<div style="position: absolute; top: 0; left: 0; width: 100%;">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button-group key="scale-control">
|
||||
<el-button :plain="true" :disabled="defaultZoom <= 0.3" icon="ZoomOut" @click="processZoomOut()" />
|
||||
<el-button style="width: 90px;">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
|
||||
<el-button :plain="true" :disabled="defaultZoom >= 3.9" icon="ZoomIn" @click="processZoomIn()" />
|
||||
<el-button icon="ScaleToOriginal" @click="processReZoom()" />
|
||||
<slot />
|
||||
</el-button-group>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/package/theme/index.scss';
|
||||
import BpmnViewer from 'bpmn-js/lib/Viewer';
|
||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
xml: {
|
||||
type: String
|
||||
},
|
||||
finishedInfo: {
|
||||
type: Object
|
||||
},
|
||||
// 所有节点审批记录
|
||||
allCommentList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dlgTitle: undefined,
|
||||
defaultZoom: 1,
|
||||
// 是否正在加载流程图
|
||||
isLoading: false,
|
||||
bpmnViewer: undefined,
|
||||
// 已完成流程元素
|
||||
processNodeInfo: undefined,
|
||||
// 当前任务id
|
||||
selectTaskId: undefined,
|
||||
// 任务节点审批记录
|
||||
taskCommentList: [],
|
||||
// 已完成任务悬浮延迟Timer
|
||||
hoverTimer: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
xml: {
|
||||
handler(newXml) {
|
||||
this.importXML(newXml);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
finishedInfo: {
|
||||
handler(newInfo) {
|
||||
this.setProcessStatus(newInfo);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.importXML(this.xml)
|
||||
this.setProcessStatus(this.finishedInfo);
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
processReZoom() {
|
||||
this.defaultZoom = 1;
|
||||
this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto');
|
||||
},
|
||||
processZoomIn(zoomStep = 0.1) {
|
||||
let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
|
||||
if (newZoom > 4) {
|
||||
throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4');
|
||||
}
|
||||
this.defaultZoom = newZoom;
|
||||
this.bpmnViewer.get('canvas').zoom(this.defaultZoom);
|
||||
},
|
||||
processZoomOut(zoomStep = 0.1) {
|
||||
let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
|
||||
if (newZoom < 0.2) {
|
||||
throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2');
|
||||
}
|
||||
this.defaultZoom = newZoom;
|
||||
this.bpmnViewer.get('canvas').zoom(this.defaultZoom);
|
||||
},
|
||||
// 流程图预览清空
|
||||
clearViewer() {
|
||||
if (this.$refs.processCanvas) {
|
||||
this.$refs.processCanvas.innerHTML = '';
|
||||
}
|
||||
if (this.bpmnViewer) {
|
||||
this.bpmnViewer.destroy();
|
||||
}
|
||||
this.bpmnViewer = null;
|
||||
},
|
||||
// 添加自定义箭头
|
||||
addCustomDefs() {
|
||||
const canvas = this.bpmnViewer.get('canvas');
|
||||
const svg = canvas._svg;
|
||||
const customSuccessDefs = this.$refs.customSuccessDefs;
|
||||
const customFailDefs = this.$refs.customFailDefs;
|
||||
svg.appendChild(customSuccessDefs);
|
||||
svg.appendChild(customFailDefs);
|
||||
},
|
||||
// 任务悬浮弹窗
|
||||
onSelectElement(element) {
|
||||
this.selectTaskId = undefined;
|
||||
this.dlgTitle = undefined;
|
||||
|
||||
if (this.processNodeInfo == null || this.processNodeInfo.finishedTaskSet == null) return;
|
||||
|
||||
if (element == null || this.processNodeInfo.finishedTaskSet.indexOf(element.id) === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectTaskId = element.id;
|
||||
this.dlgTitle = element.businessObject ? element.businessObject.name : undefined;
|
||||
// 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
|
||||
this.taskCommentList = (this.allCommentList || []).filter(item => {
|
||||
return item.activityId === this.selectTaskId;
|
||||
});
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 显示流程图
|
||||
async importXML(xml) {
|
||||
this.clearViewer();
|
||||
if (xml != null && xml !== '') {
|
||||
try {
|
||||
this.bpmnViewer = new BpmnViewer({
|
||||
additionalModules: [
|
||||
// 移动整个画布
|
||||
MoveCanvasModule
|
||||
],
|
||||
container: this.$refs.processCanvas,
|
||||
});
|
||||
// 任务节点悬浮事件
|
||||
this.bpmnViewer.on('element.click', ({ element }) => {
|
||||
this.onSelectElement(element);
|
||||
});
|
||||
|
||||
this.isLoading = true;
|
||||
await this.bpmnViewer.importXML(xml);
|
||||
this.addCustomDefs();
|
||||
} catch (e) {
|
||||
this.clearViewer();
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
this.setProcessStatus(this.processNodeInfo);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 设置流程图元素状态
|
||||
setProcessStatus (processNodeInfo) {
|
||||
this.processNodeInfo = processNodeInfo;
|
||||
if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return;
|
||||
let { finishedTaskSet, rejectedTaskSet, unfinishedTaskSet, finishedSequenceFlowSet } = this.processNodeInfo;
|
||||
const canvas = this.bpmnViewer.get('canvas');
|
||||
const elementRegistry = this.bpmnViewer.get('elementRegistry');
|
||||
if (Array.isArray(finishedSequenceFlowSet)) {
|
||||
finishedSequenceFlowSet.forEach(item => {
|
||||
if (item != null) {
|
||||
canvas.addMarker(item, 'success');
|
||||
let element = elementRegistry.get(item);
|
||||
const conditionExpression = element.businessObject.conditionExpression;
|
||||
if (conditionExpression) {
|
||||
canvas.addMarker(item, 'condition-expression');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (Array.isArray(finishedTaskSet)) {
|
||||
finishedTaskSet.forEach(item => canvas.addMarker(item, 'success'));
|
||||
}
|
||||
if (Array.isArray(unfinishedTaskSet)) {
|
||||
unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary'));
|
||||
}
|
||||
if (Array.isArray(rejectedTaskSet)) {
|
||||
rejectedTaskSet.forEach(item => {
|
||||
if (item != null) {
|
||||
let element = elementRegistry.get(item);
|
||||
if (element.type.includes('Task')) {
|
||||
canvas.addMarker(item, 'danger');
|
||||
} else {
|
||||
canvas.addMarker(item, 'warning');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import AutoPlace from 'diagram-js/lib/features/auto-place/AutoPlace';
|
||||
|
||||
export default function CustomAutoPlace(eventBus, modeling) {
|
||||
AutoPlace.call(this, eventBus, modeling, 3000);
|
||||
|
||||
eventBus.on('autoPlace', 3000, function(context) {
|
||||
const shape = context.shape;
|
||||
const source = context.source;
|
||||
|
||||
return getNewCustomShapePosition(source, shape);
|
||||
});
|
||||
|
||||
this.append = function(source, shape, hints) {
|
||||
eventBus.fire('autoPlace.start', {
|
||||
source: source,
|
||||
shape: shape
|
||||
});
|
||||
|
||||
// allow others to provide the position
|
||||
var position = eventBus.fire('autoPlace', {
|
||||
source: source,
|
||||
shape: shape
|
||||
});
|
||||
|
||||
console.log('hints', hints, 'position', position);
|
||||
|
||||
var newShape = modeling.appendShape(source, shape, position, source.parent, hints);
|
||||
|
||||
eventBus.fire('autoPlace.end', {
|
||||
source: source,
|
||||
shape: newShape
|
||||
});
|
||||
|
||||
return newShape;
|
||||
};
|
||||
}
|
||||
|
||||
export function asTRBL(bounds) {
|
||||
return {
|
||||
top: bounds.y,
|
||||
right: bounds.x + (bounds.width || 0),
|
||||
bottom: bounds.y + (bounds.height || 0),
|
||||
left: bounds.x
|
||||
};
|
||||
}
|
||||
|
||||
export function roundPoint(point) {
|
||||
return {
|
||||
x: Math.round(point.x),
|
||||
y: Math.round(point.y)
|
||||
};
|
||||
}
|
||||
|
||||
export function getMid(bounds) {
|
||||
return roundPoint({
|
||||
x: bounds.x + (bounds.width || 0) / 2,
|
||||
y: bounds.y + (bounds.height || 0) / 2
|
||||
});
|
||||
}
|
||||
|
||||
export function getNewCustomShapePosition(source, element, hints) {
|
||||
if (!hints) {
|
||||
hints = {};
|
||||
}
|
||||
|
||||
var distance = hints.defaultDistance || 50;
|
||||
|
||||
var sourceMid = getMid(source);
|
||||
var sourceTrbl = asTRBL(source);
|
||||
|
||||
// simply put element right next to source
|
||||
return {
|
||||
x: sourceMid.x,
|
||||
y: sourceTrbl.bottom + distance + element.height / 2
|
||||
};
|
||||
}
|
||||
|
||||
const F = function() {}; // 核心，利用空对象作为中介；
|
||||
F.prototype = AutoPlace.prototype; // 核心，将父类的原型赋值给空对象F；
|
||||
CustomAutoPlace.prototype = new F(); // 核心，将 F的实例赋值给子类；
|
||||
CustomAutoPlace.prototype.constructor = AutoPlace; // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import CustomAutoPlace from './CustomAutoPlace';
|
||||
|
||||
export default {
|
||||
__init__: ['autoPlace'],
|
||||
autoPlace: ['type', CustomAutoPlace]
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import BpmnRenderer from 'bpmn-js/lib/draw/BpmnRenderer';
|
||||
|
||||
export default function CustomRenderer(eventBus, styles, pathMap, canvas, textRenderer) {
|
||||
const config = {
|
||||
defaultFillColor: '',
|
||||
defaultStrokeColor: '#8b238f',
|
||||
defaultLabelColor: '#2dd257'
|
||||
};
|
||||
BpmnRenderer.call(this, config, eventBus, styles, pathMap, canvas, textRenderer, 2000);
|
||||
}
|
||||
|
||||
CustomRenderer.$inject = ['eventBus', 'styles', 'pathMap', 'canvas', 'textRenderer'];
|
||||
|
||||
const F = function() {}; // 核心，利用空对象作为中介；
|
||||
F.prototype = BpmnRenderer.prototype; // 核心，将父类的原型赋值给空对象F；
|
||||
CustomRenderer.prototype = new F(); // 核心，将 F的实例赋值给子类；
|
||||
CustomRenderer.prototype.constructor = CustomRenderer; // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import CustomRenderer from './CustomRenderer';
|
||||
|
||||
export default {
|
||||
__init__: ['customRenderer'],
|
||||
customRenderer: ['type', CustomRenderer]
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import BpmnRules from 'bpmn-js/lib/features/rules/BpmnRules';
|
||||
import inherits from 'inherits';
|
||||
|
||||
export default function CustomRules(eventBus) {
|
||||
BpmnRules.call(this, eventBus);
|
||||
}
|
||||
|
||||
inherits(CustomRules, BpmnRules);
|
||||
|
||||
CustomRules.prototype.canDrop = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
CustomRules.prototype.canMove = function() {
|
||||
return false;
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import CustomRules from './CustomRules';
|
||||
|
||||
export default {
|
||||
__init__: ['customRules'],
|
||||
customRules: ['type', CustomRules]
|
||||
};
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
function Log() {}
|
||||
|
||||
Log.prototype.type = ['primary', 'success', 'warn', 'error', 'info'];
|
||||
|
||||
Log.prototype.typeColor = function(type) {
|
||||
let color = '';
|
||||
switch (type) {
|
||||
case 'primary':
|
||||
color = '#2d8cf0';
|
||||
break;
|
||||
case 'success':
|
||||
color = '#19be6b';
|
||||
break;
|
||||
case 'info':
|
||||
color = '#909399';
|
||||
break;
|
||||
case 'warn':
|
||||
color = '#ff9900';
|
||||
break;
|
||||
case 'error':
|
||||
color = '#f03f14';
|
||||
break;
|
||||
default:
|
||||
color = '#35495E';
|
||||
break;
|
||||
}
|
||||
return color;
|
||||
};
|
||||
|
||||
Log.prototype.isArray = function(obj) {
|
||||
return Object.prototype.toString.call(obj) === '[object Array]';
|
||||
};
|
||||
|
||||
Log.prototype.print = function(text, type = 'default', back = false) {
|
||||
if (typeof text === 'object') {
|
||||
// 如果是對象則調用打印對象方式
|
||||
this.isArray(text) ? console.table(text) : console.dir(text);
|
||||
return;
|
||||
}
|
||||
if (back) {
|
||||
// 如果是打印帶背景圖的
|
||||
console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px; color: #fff;`);
|
||||
} else {
|
||||
console.log(
|
||||
`%c ${text} `,
|
||||
`border: 1px solid ${this.typeColor(type)};
|
||||
padding: 2px; border-radius: 4px;
|
||||
color: ${this.typeColor(type)};`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
Log.prototype.printBack = function(type = 'primary', title) {
|
||||
this.print(type, title, true);
|
||||
};
|
||||
|
||||
Log.prototype.pretty = function(type = 'primary', title, text) {
|
||||
if (typeof text === 'object') {
|
||||
console.group('Console Group', title);
|
||||
console.log(
|
||||
`%c ${title}`,
|
||||
`background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)};
|
||||
padding: 1px; border-radius: 4px; color: #fff;`
|
||||
);
|
||||
this.isArray(text) ? console.table(text) : console.dir(text);
|
||||
console.groupEnd();
|
||||
return;
|
||||
}
|
||||
console.log(
|
||||
`%c ${title} %c ${text} %c`,
|
||||
`background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)};
|
||||
padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
|
||||
`border:1px solid ${this.typeColor(type)};
|
||||
padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
|
||||
'background:transparent'
|
||||
);
|
||||
};
|
||||
|
||||
Log.prototype.prettyPrimary = function(title, ...text) {
|
||||
text.forEach(t => this.pretty('primary', title, t));
|
||||
};
|
||||
|
||||
Log.prototype.prettySuccess = function(title, ...text) {
|
||||
text.forEach(t => this.pretty('success', title, t));
|
||||
};
|
||||
|
||||
Log.prototype.prettyWarn = function(title, ...text) {
|
||||
text.forEach(t => this.pretty('warn', title, t));
|
||||
};
|
||||
|
||||
Log.prototype.prettyError = function(title, ...text) {
|
||||
text.forEach(t => this.pretty('error', title, t));
|
||||
};
|
||||
|
||||
Log.prototype.prettyInfo = function(title, ...text) {
|
||||
text.forEach(t => this.pretty('info', title, t));
|
||||
};
|
||||
|
||||
export default new Log();
|
||||
|
|
@ -0,0 +1,520 @@
|
|||
<template>
|
||||
<div class="my-process-designer">
|
||||
<div class="my-process-designer__header">
|
||||
<slot name="control-header"></slot>
|
||||
<template v-if="!$slots['control-header']">
|
||||
<el-button-group key="file-control">
|
||||
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-edit-outline" @click="onSave">保存流程</el-button>
|
||||
<el-button :size="headerButtonSize" :type="headerButtonType" :icon="FolderOpened" @click="$refs.refFile.click()">打开文件</el-button>
|
||||
<el-tooltip effect="light">
|
||||
<template #content>
|
||||
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsXml()">下载为XML文件</el-button>
|
||||
<br />
|
||||
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
|
||||
<br />
|
||||
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
|
||||
</template>
|
||||
<el-button :size="headerButtonSize" :type="headerButtonType" :icon="Download">下载文件</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light">
|
||||
<template #content>
|
||||
<el-button :size="headerButtonSize" type="text" @click="previewProcessXML">预览XML</el-button>
|
||||
<br />
|
||||
<el-button :size="headerButtonSize" type="text" @click="previewProcessJson">预览JSON</el-button>
|
||||
</template>
|
||||
<el-button :size="headerButtonSize" :type="headerButtonType" :icon="View">预览</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="simulation" effect="light" :content="this.simulationStatus ? '退出模拟' : '开启模拟'">
|
||||
<el-button :size="headerButtonSize" :type="headerButtonType" :icon="Cpu" @click="processSimulation">
|
||||
模拟
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
<el-button-group key="align-control">
|
||||
<el-tooltip effect="light" content="向左对齐">
|
||||
<el-button :size="headerButtonSize" class="align align-left" :icon="Histogram" @click="elementsAlign('left')" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="向右对齐">
|
||||
<el-button :size="headerButtonSize" class="align align-right" :icon="Histogram" @click="elementsAlign('right')" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="向上对齐">
|
||||
<el-button :size="headerButtonSize" class="align align-top" :icon="Histogram" @click="elementsAlign('top')" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="向下对齐">
|
||||
<el-button :size="headerButtonSize" class="align align-bottom" :icon="Histogram" @click="elementsAlign('bottom')" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="水平居中">
|
||||
<el-button :size="headerButtonSize" class="align align-center" :icon="Histogram" @click="elementsAlign('center')" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="垂直居中">
|
||||
<el-button :size="headerButtonSize" class="align align-middle" :icon="Histogram" @click="elementsAlign('middle')" />
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
<el-button-group key="scale-control">
|
||||
<el-tooltip effect="light" content="缩小视图">
|
||||
<el-button :size="headerButtonSize" :disabled="defaultZoom < 0.2" :icon="ZoomOut" @click="processZoomOut()" />
|
||||
</el-tooltip>
|
||||
<el-button :size="headerButtonSize">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
|
||||
<el-tooltip effect="light" content="放大视图">
|
||||
<el-button :size="headerButtonSize" :disabled="defaultZoom > 4" :icon="ZoomIn" @click="processZoomIn()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="重置视图并居中">
|
||||
<el-button :size="headerButtonSize" :icon="ScaleToOriginal" @click="processReZoom()" />
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
<el-button-group key="stack-control">
|
||||
<el-tooltip effect="light" content="撤销">
|
||||
<el-button :size="headerButtonSize" :disabled="!revocable" :icon="RefreshLeft" @click="processUndo()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="恢复">
|
||||
<el-button :size="headerButtonSize" :disabled="!recoverable" :icon="RefreshRight" @click="processRedo()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="重新绘制">
|
||||
<el-button :size="headerButtonSize" :icon="Refresh" @click="processRestart" />
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
<!-- 用于打开本地文件-->
|
||||
<input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
|
||||
</div>
|
||||
<div class="my-process-designer__container">
|
||||
<div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
|
||||
</div>
|
||||
<el-dialog :title="`预览${previewType}`" width="60%" v-model="previewModelVisible" append-to-body destroy-on-close>
|
||||
<Codemirror
|
||||
v-model:value="previewResult"
|
||||
:options="cmOptions"
|
||||
border
|
||||
:height="600"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Histogram, Cpu, Refresh, RefreshLeft, RefreshRight, ZoomOut, ZoomIn, View, Download, FolderOpened, ScaleToOriginal } from '@element-plus/icons-vue'
|
||||
import BpmnModeler from "bpmn-js/lib/Modeler";
|
||||
import DefaultEmptyXML from "./plugins/defaultEmpty";
|
||||
// 翻译方法
|
||||
import customTranslate from "./plugins/translate/customTranslate";
|
||||
import translationsCN from "./plugins/translate/zh";
|
||||
// 模拟流转流程
|
||||
import tokenSimulation from "bpmn-js-token-simulation";
|
||||
// 标签解析构建器
|
||||
// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
|
||||
// 标签解析 Moddle
|
||||
import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json';
|
||||
import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json';
|
||||
import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json';
|
||||
// 标签解析 Extension
|
||||
import camundaModdleExtension from './plugins/extension-moddle/camunda';
|
||||
import activitiModdleExtension from './plugins/extension-moddle/activiti';
|
||||
import flowableModdleExtension from './plugins/extension-moddle/flowable';
|
||||
// 引入json转换与高亮
|
||||
// import convert from "xml-js";
|
||||
import X2JS from "x2js";
|
||||
|
||||
import Codemirror from 'codemirror-editor-vue3';
|
||||
import 'codemirror/theme/monokai.css'
|
||||
import 'codemirror/mode/javascript/javascript.js';
|
||||
import 'codemirror/mode/xml/xml.js';
|
||||
|
||||
export default {
|
||||
name: "MyProcessDesigner",
|
||||
componentName: "MyProcessDesigner",
|
||||
components: {
|
||||
Codemirror
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
Histogram, Cpu, Refresh, RefreshLeft, RefreshRight, ZoomOut, ZoomIn, View, Download, FolderOpened, ScaleToOriginal
|
||||
}
|
||||
},
|
||||
emits: ['destroy', 'init-finished', 'commandStack-changed', 'update:modelValue', 'change', 'canvas-viewbox-changed', 'element-click'],
|
||||
props: {
|
||||
modelValue: String, // xml 字符串
|
||||
processId: String,
|
||||
processName: String,
|
||||
translations: Object, // 自定义的翻译文件
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}, // 自定义的翻译文件
|
||||
additionalModel: [Object, Array], // 自定义model
|
||||
moddleExtension: Object, // 自定义moddle
|
||||
onlyCustomizeAddi: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
onlyCustomizeModdle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
simulation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
keyboard: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "camunda"
|
||||
},
|
||||
events: {
|
||||
type: Array,
|
||||
default: () => ["element.click"]
|
||||
},
|
||||
headerButtonSize: {
|
||||
type: String,
|
||||
default: "small",
|
||||
validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
|
||||
},
|
||||
headerButtonType: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultZoom: 1,
|
||||
previewModelVisible: false,
|
||||
simulationStatus: false,
|
||||
previewResult: "",
|
||||
previewType: "xml",
|
||||
recoverable: false,
|
||||
revocable: false,
|
||||
cmOptions: {
|
||||
mode: 'xml', // 语言模式
|
||||
theme: 'monokai', // 主题
|
||||
lineNumbers: true, // 显示行号
|
||||
smartIndent: true, // 智能缩进
|
||||
readOnly: true,
|
||||
indentUnit: 2, // 智能缩进单位为4个空格长度
|
||||
foldGutter: true, // 启用行槽中的代码折叠
|
||||
styleActiveLine: true // 显示选中行的样式
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
additionalModules() {
|
||||
const Modules = [];
|
||||
// 仅保留用户自定义扩展模块
|
||||
if (this.onlyCustomizeAddi) {
|
||||
if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
|
||||
return this.additionalModel || [];
|
||||
}
|
||||
return [this.additionalModel];
|
||||
}
|
||||
|
||||
// 插入用户自定义扩展模块
|
||||
if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
|
||||
Modules.push(...this.additionalModel);
|
||||
} else {
|
||||
this.additionalModel && Modules.push(this.additionalModel);
|
||||
}
|
||||
|
||||
// 翻译模块
|
||||
const TranslateModule = {
|
||||
translate: ["value", customTranslate(this.translations || translationsCN)]
|
||||
};
|
||||
Modules.push(TranslateModule);
|
||||
|
||||
// 模拟流转模块
|
||||
if (this.simulation) {
|
||||
Modules.push(tokenSimulation);
|
||||
}
|
||||
|
||||
// 根据需要的流程类型设置扩展元素构建模块
|
||||
// if (this.prefix === "bpmn") {
|
||||
// Modules.push(bpmnModdleExtension);
|
||||
// }
|
||||
if (this.prefix === "camunda") {
|
||||
Modules.push(camundaModdleExtension);
|
||||
}
|
||||
if (this.prefix === "flowable") {
|
||||
Modules.push(flowableModdleExtension);
|
||||
}
|
||||
if (this.prefix === "activiti") {
|
||||
Modules.push(activitiModdleExtension);
|
||||
}
|
||||
|
||||
return Modules;
|
||||
},
|
||||
moddleExtensions() {
|
||||
const Extensions = {};
|
||||
// 仅使用用户自定义模块
|
||||
if (this.onlyCustomizeModdle) {
|
||||
return this.moddleExtension || null;
|
||||
}
|
||||
|
||||
// 插入用户自定义模块
|
||||
if (this.moddleExtension) {
|
||||
for (let key in this.moddleExtension) {
|
||||
Extensions[key] = this.moddleExtension[key];
|
||||
}
|
||||
}
|
||||
|
||||
// 根据需要的 "流程类型" 设置 对应的解析文件
|
||||
if (this.prefix === "activiti") {
|
||||
Extensions.activiti = activitiModdleDescriptor;
|
||||
}
|
||||
if (this.prefix === "flowable") {
|
||||
Extensions.flowable = flowableModdleDescriptor;
|
||||
}
|
||||
if (this.prefix === "camunda") {
|
||||
Extensions.camunda = camundaModdleDescriptor;
|
||||
}
|
||||
|
||||
return Extensions;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initBpmnModeler();
|
||||
this.createNewDiagram(this.modelValue);
|
||||
// this.$once("hook:beforeUnmount", () => {
|
||||
// if (this.bpmnModeler) this.bpmnModeler.destroy();
|
||||
// this.$emit("destroy", this.bpmnModeler);
|
||||
// this.bpmnModeler = null;
|
||||
// });
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.bpmnModeler) this.bpmnModeler.destroy();
|
||||
this.$emit("destroy", this.bpmnModeler);
|
||||
this.bpmnModeler = null;
|
||||
},
|
||||
methods: {
|
||||
onSave () {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.bpmnModeler == null) {
|
||||
reject();
|
||||
}
|
||||
this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
this.$emit('save', xml);
|
||||
resolve(xml);
|
||||
});
|
||||
})
|
||||
},
|
||||
initBpmnModeler() {
|
||||
if (this.bpmnModeler) return;
|
||||
this.bpmnModeler = new BpmnModeler({
|
||||
container: this.$refs["bpmn-canvas"],
|
||||
keyboard: this.keyboard ? { bindTo: document } : null,
|
||||
additionalModules: this.additionalModules,
|
||||
moddleExtensions: this.moddleExtensions,
|
||||
...this.options
|
||||
});
|
||||
this.$emit("init-finished", this.bpmnModeler);
|
||||
this.initModelListeners();
|
||||
},
|
||||
initModelListeners() {
|
||||
const EventBus = this.bpmnModeler.get("eventBus");
|
||||
const that = this;
|
||||
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
|
||||
this.events.forEach(event => {
|
||||
EventBus.on(event, function(eventObj) {
|
||||
let eventName = event.replace(/\./g, "-");
|
||||
let element = eventObj ? eventObj.element : null;
|
||||
that.$emit(eventName, element, eventObj);
|
||||
});
|
||||
});
|
||||
// 监听图形改变返回xml
|
||||
EventBus.on("commandStack.changed", async event => {
|
||||
try {
|
||||
this.recoverable = this.bpmnModeler.get("commandStack").canRedo();
|
||||
this.revocable = this.bpmnModeler.get("commandStack").canUndo();
|
||||
let { xml } = await this.bpmnModeler.saveXML({ format: true });
|
||||
this.$emit("commandStack-changed", event);
|
||||
this.$emit('update:modelValue', xml);
|
||||
this.$emit("change", xml);
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn]: ${e.message || e}`);
|
||||
}
|
||||
});
|
||||
// 监听视图缩放变化
|
||||
this.bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
|
||||
this.$emit("canvas-viewbox-changed", { viewbox });
|
||||
const { scale } = viewbox;
|
||||
this.defaultZoom = Math.floor(scale * 100) / 100;
|
||||
});
|
||||
},
|
||||
/* 创建新的流程图 */
|
||||
async createNewDiagram(xml) {
|
||||
// 将字符串转换成图显示出来
|
||||
let newId = this.processId || `Process_${new Date().getTime()}`;
|
||||
let newName = this.processName || `业务流程_${new Date().getTime()}`;
|
||||
let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
|
||||
try {
|
||||
let { warnings } = await this.bpmnModeler.importXML(xmlString);
|
||||
if (warnings && warnings.length) {
|
||||
warnings.forEach(warn => console.warn(warn));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn]: ${e?.message || e}`);
|
||||
}
|
||||
},
|
||||
|
||||
// 下载流程图到本地
|
||||
/**
|
||||
* @param {string} type
|
||||
* @param {*} name
|
||||
*/
|
||||
async downloadProcess(type, name) {
|
||||
try {
|
||||
const _this = this;
|
||||
// 按需要类型创建文件并下载
|
||||
if (type === "xml" || type === "bpmn") {
|
||||
const { err, xml } = await this.bpmnModeler.saveXML();
|
||||
// 读取异常时抛出异常
|
||||
if (err) {
|
||||
console.error(`[Process Designer Warn ]: ${err.message || err}`);
|
||||
}
|
||||
let { href, filename } = _this.setEncoded(type.toUpperCase(), name, xml);
|
||||
downloadFunc(href, filename);
|
||||
} else {
|
||||
const { err, svg } = await this.bpmnModeler.saveSVG();
|
||||
// 读取异常时抛出异常
|
||||
if (err) {
|
||||
return console.error(err);
|
||||
}
|
||||
let { href, filename } = _this.setEncoded("SVG", name, svg);
|
||||
downloadFunc(href, filename);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn ]: ${e.message || e}`);
|
||||
}
|
||||
// 文件下载方法
|
||||
function downloadFunc(href, filename) {
|
||||
if (href && filename) {
|
||||
let a = document.createElement("a");
|
||||
a.download = filename; //指定下载的文件名
|
||||
a.href = href; // URL对象
|
||||
a.click(); // 模拟点击
|
||||
URL.revokeObjectURL(a.href); // 释放URL 对象
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 根据所需类型进行转码并返回下载地址
|
||||
setEncoded(type, filename = "diagram", data) {
|
||||
const encodedData = encodeURIComponent(data);
|
||||
return {
|
||||
filename: `${filename}.${type}`,
|
||||
href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
|
||||
data: data
|
||||
};
|
||||
},
|
||||
|
||||
// 加载本地文件
|
||||
importLocalFile() {
|
||||
const that = this;
|
||||
const file = this.$refs.refFile.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file);
|
||||
reader.onload = function() {
|
||||
let xmlStr = this.result;
|
||||
that.createNewDiagram(xmlStr);
|
||||
};
|
||||
},
|
||||
/* ------------------------------------------------ refs methods ------------------------------------------------------ */
|
||||
downloadProcessAsXml() {
|
||||
this.downloadProcess("xml");
|
||||
},
|
||||
downloadProcessAsBpmn() {
|
||||
this.downloadProcess("bpmn");
|
||||
},
|
||||
downloadProcessAsSvg() {
|
||||
this.downloadProcess("svg");
|
||||
},
|
||||
processSimulation() {
|
||||
this.simulationStatus = !this.simulationStatus;
|
||||
this.simulation && this.bpmnModeler.get("toggleMode").toggleMode();
|
||||
},
|
||||
processRedo() {
|
||||
this.bpmnModeler.get("commandStack").redo();
|
||||
},
|
||||
processUndo() {
|
||||
this.bpmnModeler.get("commandStack").undo();
|
||||
},
|
||||
processZoomIn(zoomStep = 0.1) {
|
||||
let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
|
||||
if (newZoom > 4) {
|
||||
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
|
||||
}
|
||||
this.defaultZoom = newZoom;
|
||||
this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
|
||||
},
|
||||
processZoomOut(zoomStep = 0.1) {
|
||||
let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
|
||||
if (newZoom < 0.2) {
|
||||
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
|
||||
}
|
||||
this.defaultZoom = newZoom;
|
||||
this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
|
||||
},
|
||||
processZoomTo(newZoom = 1) {
|
||||
if (newZoom < 0.2) {
|
||||
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
|
||||
}
|
||||
if (newZoom > 4) {
|
||||
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
|
||||
}
|
||||
this.defaultZoom = newZoom;
|
||||
this.bpmnModeler.get("canvas").zoom(newZoom);
|
||||
},
|
||||
processReZoom() {
|
||||
this.defaultZoom = 1;
|
||||
this.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
|
||||
},
|
||||
processRestart() {
|
||||
this.recoverable = false;
|
||||
this.revocable = false;
|
||||
this.createNewDiagram(null);
|
||||
},
|
||||
elementsAlign(align) {
|
||||
const Align = this.bpmnModeler.get("alignElements");
|
||||
const Selection = this.bpmnModeler.get("selection");
|
||||
const SelectedElements = Selection.get();
|
||||
if (!SelectedElements || SelectedElements.length <= 1) {
|
||||
this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
|
||||
return;
|
||||
}
|
||||
this.$confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => Align.trigger(SelectedElements, align));
|
||||
},
|
||||
/*----------------------------- 方法结束 ---------------------------------*/
|
||||
previewProcessXML() {
|
||||
this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
this.previewResult = xml;
|
||||
this.previewType = 'xml';
|
||||
this.cmOptions.mode = 'xml'
|
||||
this.previewModelVisible = true;
|
||||
});
|
||||
},
|
||||
previewProcessJson() {
|
||||
// this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
// this.previewResult = convert.xml2json(xml, { spaces: 2 });
|
||||
// this.previewType = "json";
|
||||
// this.previewModelVisible = true;
|
||||
// });
|
||||
const newConvert = new X2JS();
|
||||
this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
const { definitions } = newConvert.xml2js(xml);
|
||||
if (definitions) {
|
||||
this.previewResult = JSON.stringify(definitions, null, 4);
|
||||
} else {
|
||||
this.previewResult = "";
|
||||
}
|
||||
|
||||
this.previewType = "json";
|
||||
this.previewModelVisible = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import MyProcessDesigner from './ProcessDesigner.vue';
|
||||
|
||||
MyProcessDesigner.install = function(Vue) {
|
||||
Vue.component(MyProcessDesigner.name, MyProcessDesigner);
|
||||
};
|
||||
|
||||
export default MyProcessDesigner;
|
||||
|
|
@ -0,0 +1,390 @@
|
|||
import { assign, forEach, isArray } from 'min-dash';
|
||||
|
||||
import { is } from 'bpmn-js/lib/util/ModelUtil';
|
||||
|
||||
import { isExpanded, isEventSubProcess } from 'bpmn-js/lib/util/DiUtil';
|
||||
|
||||
import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
|
||||
|
||||
import { getChildLanes } from 'bpmn-js/lib/features/modeling/util/LaneUtil';
|
||||
|
||||
import { hasPrimaryModifier } from 'diagram-js/lib/util/Mouse';
|
||||
|
||||
/**
|
||||
* A provider for BPMN 2.0 elements context pad
|
||||
*/
|
||||
export default function ContextPadProvider(
|
||||
config,
|
||||
injector,
|
||||
eventBus,
|
||||
contextPad,
|
||||
modeling,
|
||||
elementFactory,
|
||||
connect,
|
||||
create,
|
||||
popupMenu,
|
||||
canvas,
|
||||
rules,
|
||||
translate,
|
||||
elementRegistry
|
||||
) {
|
||||
config = config || {};
|
||||
|
||||
contextPad.registerProvider(this);
|
||||
|
||||
this._contextPad = contextPad;
|
||||
|
||||
this._modeling = modeling;
|
||||
|
||||
this._elementFactory = elementFactory;
|
||||
this._connect = connect;
|
||||
this._create = create;
|
||||
this._popupMenu = popupMenu;
|
||||
this._canvas = canvas;
|
||||
this._rules = rules;
|
||||
this._translate = translate;
|
||||
|
||||
if (config.autoPlace !== false) {
|
||||
this._autoPlace = injector.get('autoPlace', false);
|
||||
}
|
||||
|
||||
eventBus.on('create.end', 250, function(event) {
|
||||
var context = event.context;
|
||||
var shape = context.shape;
|
||||
|
||||
if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var entries = contextPad.getEntries(shape);
|
||||
|
||||
if (entries.replace) {
|
||||
entries.replace.action.click(event, shape);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ContextPadProvider.$inject = [
|
||||
'config.contextPad',
|
||||
'injector',
|
||||
'eventBus',
|
||||
'contextPad',
|
||||
'modeling',
|
||||
'elementFactory',
|
||||
'connect',
|
||||
'create',
|
||||
'popupMenu',
|
||||
'canvas',
|
||||
'rules',
|
||||
'translate',
|
||||
'elementRegistry'
|
||||
];
|
||||
|
||||
ContextPadProvider.prototype.getContextPadEntries = function(element) {
|
||||
var contextPad = this._contextPad;
|
||||
var modeling = this._modeling;
|
||||
var elementFactory = this._elementFactory;
|
||||
var connect = this._connect;
|
||||
var create = this._create;
|
||||
var popupMenu = this._popupMenu;
|
||||
var canvas = this._canvas;
|
||||
var rules = this._rules;
|
||||
var autoPlace = this._autoPlace;
|
||||
var translate = this._translate;
|
||||
|
||||
var actions = {};
|
||||
|
||||
if (element.type === 'label') {
|
||||
return actions;
|
||||
}
|
||||
|
||||
var businessObject = element.businessObject;
|
||||
|
||||
function startConnect(event, element) {
|
||||
connect.start(event, element);
|
||||
}
|
||||
|
||||
function removeElement() {
|
||||
modeling.removeElements([element]);
|
||||
}
|
||||
|
||||
function getReplaceMenuPosition(element) {
|
||||
var Y_OFFSET = 5;
|
||||
|
||||
var diagramContainer = canvas.getContainer();
|
||||
var pad = contextPad.getPad(element).html;
|
||||
|
||||
var diagramRect = diagramContainer.getBoundingClientRect();
|
||||
var padRect = pad.getBoundingClientRect();
|
||||
|
||||
var top = padRect.top - diagramRect.top;
|
||||
var left = padRect.left - diagramRect.left;
|
||||
|
||||
var pos = {
|
||||
x: left,
|
||||
y: top + padRect.height + Y_OFFSET
|
||||
};
|
||||
|
||||
return pos;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an append action
|
||||
*
|
||||
* @param {string} type
|
||||
* @param {string} className
|
||||
* @param {string} [title]
|
||||
* @param {Object} [options]
|
||||
*
|
||||
* @return {Object} descriptor
|
||||
*/
|
||||
function appendAction(type, className, title, options) {
|
||||
if (typeof title !== 'string') {
|
||||
options = title;
|
||||
title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
|
||||
}
|
||||
|
||||
function appendStart(event, element) {
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
create.start(event, shape, {
|
||||
source: element
|
||||
});
|
||||
}
|
||||
|
||||
var append = autoPlace
|
||||
? function(event, element) {
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
|
||||
autoPlace.append(element, shape);
|
||||
}
|
||||
: appendStart;
|
||||
|
||||
return {
|
||||
group: 'model',
|
||||
className: className,
|
||||
title: title,
|
||||
action: {
|
||||
dragstart: appendStart,
|
||||
click: append
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function splitLaneHandler(count) {
|
||||
return function(event, element) {
|
||||
// actual split
|
||||
modeling.splitLane(element, count);
|
||||
|
||||
// refresh context pad after split to
|
||||
// get rid of split icons
|
||||
contextPad.open(element, true);
|
||||
};
|
||||
}
|
||||
|
||||
if (isAny(businessObject, ['bpmn:Lane', 'bpmn:Participant']) && isExpanded(businessObject)) {
|
||||
var childLanes = getChildLanes(element);
|
||||
|
||||
assign(actions, {
|
||||
'lane-insert-above': {
|
||||
group: 'lane-insert-above',
|
||||
className: 'bpmn-icon-lane-insert-above',
|
||||
title: translate('Add Lane above'),
|
||||
action: {
|
||||
click: function(event, element) {
|
||||
modeling.addLane(element, 'top');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (childLanes.length < 2) {
|
||||
if (element.height >= 120) {
|
||||
assign(actions, {
|
||||
'lane-divide-two': {
|
||||
group: 'lane-divide',
|
||||
className: 'bpmn-icon-lane-divide-two',
|
||||
title: translate('Divide into two Lanes'),
|
||||
action: {
|
||||
click: splitLaneHandler(2)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (element.height >= 180) {
|
||||
assign(actions, {
|
||||
'lane-divide-three': {
|
||||
group: 'lane-divide',
|
||||
className: 'bpmn-icon-lane-divide-three',
|
||||
title: translate('Divide into three Lanes'),
|
||||
action: {
|
||||
click: splitLaneHandler(3)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
assign(actions, {
|
||||
'lane-insert-below': {
|
||||
group: 'lane-insert-below',
|
||||
className: 'bpmn-icon-lane-insert-below',
|
||||
title: translate('Add Lane below'),
|
||||
action: {
|
||||
click: function(event, element) {
|
||||
modeling.addLane(element, 'bottom');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:FlowNode')) {
|
||||
if (is(businessObject, 'bpmn:EventBasedGateway')) {
|
||||
assign(actions, {
|
||||
'append.receive-task': appendAction('bpmn:ReceiveTask', 'bpmn-icon-receive-task', translate('Append ReceiveTask')),
|
||||
'append.message-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-message',
|
||||
translate('Append MessageIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:MessageEventDefinition' }
|
||||
),
|
||||
'append.timer-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-timer',
|
||||
translate('Append TimerIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:TimerEventDefinition' }
|
||||
),
|
||||
'append.condition-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-condition',
|
||||
translate('Append ConditionIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:ConditionalEventDefinition' }
|
||||
),
|
||||
'append.signal-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-signal',
|
||||
translate('Append SignalIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:SignalEventDefinition' }
|
||||
)
|
||||
});
|
||||
} else if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
|
||||
assign(actions, {
|
||||
'append.compensation-activity': appendAction('bpmn:Task', 'bpmn-icon-task', translate('Append compensation activity'), {
|
||||
isForCompensation: true
|
||||
})
|
||||
});
|
||||
} else if (
|
||||
!is(businessObject, 'bpmn:EndEvent') &&
|
||||
!businessObject.isForCompensation &&
|
||||
!isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
|
||||
!isEventSubProcess(businessObject)
|
||||
) {
|
||||
assign(actions, {
|
||||
'append.end-event': appendAction('bpmn:EndEvent', 'bpmn-icon-end-event-none', translate('Append EndEvent')),
|
||||
'append.gateway': appendAction('bpmn:ExclusiveGateway', 'bpmn-icon-gateway-none', translate('Append Gateway')),
|
||||
'append.append-task': appendAction('bpmn:UserTask', 'bpmn-icon-user-task', translate('Append Task')),
|
||||
'append.intermediate-event': appendAction(
|
||||
'bpmn:IntermediateThrowEvent',
|
||||
'bpmn-icon-intermediate-event-none',
|
||||
translate('Append Intermediate/Boundary Event')
|
||||
)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
|
||||
// Replace menu entry
|
||||
assign(actions, {
|
||||
replace: {
|
||||
group: 'edit',
|
||||
className: 'bpmn-icon-screw-wrench',
|
||||
title: translate('Change type'),
|
||||
action: {
|
||||
click: function(event, element) {
|
||||
var position = assign(getReplaceMenuPosition(element), {
|
||||
cursor: { x: event.x, y: event.y }
|
||||
});
|
||||
|
||||
popupMenu.open(element, 'bpmn-replace', position);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (isAny(businessObject, ['bpmn:FlowNode', 'bpmn:InteractionNode', 'bpmn:DataObjectReference', 'bpmn:DataStoreReference'])) {
|
||||
assign(actions, {
|
||||
'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation'),
|
||||
|
||||
connect: {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Connect using ' + (businessObject.isForCompensation ? '' : 'Sequence/MessageFlow or ') + 'Association'),
|
||||
action: {
|
||||
click: startConnect,
|
||||
dragstart: startConnect
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (isAny(businessObject, ['bpmn:DataObjectReference', 'bpmn:DataStoreReference'])) {
|
||||
assign(actions, {
|
||||
connect: {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Connect using DataInputAssociation'),
|
||||
action: {
|
||||
click: startConnect,
|
||||
dragstart: startConnect
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:Group')) {
|
||||
assign(actions, {
|
||||
'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
|
||||
});
|
||||
}
|
||||
|
||||
// delete element entry, only show if allowed by rules
|
||||
var deleteAllowed = rules.allowed('elements.delete', { elements: [element] });
|
||||
|
||||
if (isArray(deleteAllowed)) {
|
||||
// was the element returned as a deletion candidate?
|
||||
deleteAllowed = deleteAllowed[0] === element;
|
||||
}
|
||||
|
||||
if (deleteAllowed) {
|
||||
assign(actions, {
|
||||
delete: {
|
||||
group: 'edit',
|
||||
className: 'bpmn-icon-trash',
|
||||
title: translate('Remove'),
|
||||
action: {
|
||||
click: removeElement
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return actions;
|
||||
};
|
||||
|
||||
// helpers /////////
|
||||
|
||||
function isEventType(eventBo, type, definition) {
|
||||
var isType = eventBo.$instanceOf(type);
|
||||
var isDefinition = false;
|
||||
|
||||
var definitions = eventBo.eventDefinitions || [];
|
||||
forEach(definitions, function(def) {
|
||||
if (def.$type === definition) {
|
||||
isDefinition = true;
|
||||
}
|
||||
});
|
||||
|
||||
return isType && isDefinition;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import CustomContextPadProvider from './contentPadProvider';
|
||||
|
||||
export default {
|
||||
__init__: ['contextPadProvider'],
|
||||
contextPadProvider: ['type', CustomContextPadProvider]
|
||||
};
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
export default (key, name, type) => {
|
||||
if (!type) type = 'camunda';
|
||||
const TYPE_TARGET = {
|
||||
activiti: 'http://activiti.org/bpmn',
|
||||
camunda: 'http://bpmn.io/schema/bpmn',
|
||||
flowable: 'http://flowable.org/bpmn'
|
||||
};
|
||||
return `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn2:definitions
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
|
||||
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
|
||||
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
|
||||
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
|
||||
id="diagram_${key}"
|
||||
targetNamespace="${TYPE_TARGET[type]}">
|
||||
<bpmn2:process id="${key}" name="${name}" isExecutable="true">
|
||||
</bpmn2:process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn2:definitions>`;
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,73 @@
|
|||
'use strict';
|
||||
|
||||
import { some } from '@/utils/min-dash.js';
|
||||
|
||||
var ALLOWED_TYPES = {
|
||||
FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
|
||||
Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
|
||||
Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
|
||||
};
|
||||
|
||||
function is(element, type) {
|
||||
return element && typeof element.$instanceOf === 'function' && element.$instanceOf(type);
|
||||
}
|
||||
|
||||
function exists(element) {
|
||||
return element && element.length;
|
||||
}
|
||||
|
||||
function includesType(collection, type) {
|
||||
return (
|
||||
exists(collection) &&
|
||||
some(collection, function(element) {
|
||||
return is(element, type);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function anyType(element, types) {
|
||||
return some(types, function(type) {
|
||||
return is(element, type);
|
||||
});
|
||||
}
|
||||
|
||||
function isAllowed(propName, propDescriptor, newElement) {
|
||||
var name = propDescriptor.name;
|
||||
var types = ALLOWED_TYPES[name.replace(/activiti:/, '')];
|
||||
|
||||
return name === propName && anyType(newElement, types);
|
||||
}
|
||||
|
||||
export default function ActivitiModdleExtension(eventBus) {
|
||||
eventBus.on(
|
||||
'property.clone',
|
||||
function(context) {
|
||||
var newElement = context.newElement;
|
||||
var propDescriptor = context.propertyDescriptor;
|
||||
|
||||
this.canCloneProperty(newElement, propDescriptor);
|
||||
},
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
ActivitiModdleExtension.$inject = ['eventBus'];
|
||||
|
||||
ActivitiModdleExtension.prototype.canCloneProperty = function(newElement, propDescriptor) {
|
||||
if (isAllowed('activiti:FailedJobRetryTimeCycle', propDescriptor, newElement)) {
|
||||
return (
|
||||
includesType(newElement.eventDefinitions, 'bpmn:TimerEventDefinition') ||
|
||||
includesType(newElement.eventDefinitions, 'bpmn:SignalEventDefinition') ||
|
||||
is(newElement.loopCharacteristics, 'bpmn:MultiInstanceLoopCharacteristics')
|
||||
);
|
||||
}
|
||||
|
||||
if (isAllowed('activiti:Connector', propDescriptor, newElement)) {
|
||||
return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition');
|
||||
}
|
||||
|
||||
if (isAllowed('activiti:Field', propDescriptor, newElement)) {
|
||||
return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* @author igdianov
|
||||
* address https://github.com/igdianov/activiti-bpmn-moddle
|
||||
* */
|
||||
|
||||
import ActivitiModdleExtension from './activitiExtension.js'
|
||||
export default {
|
||||
__init__: ['ActivitiModdleExtension'],
|
||||
ActivitiModdleExtension: ['type', ActivitiModdleExtension]
|
||||
};
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
'use strict';
|
||||
|
||||
import { some, isObject, isFunction } from '@/utils/min-dash.js';
|
||||
|
||||
var WILDCARD = '*';
|
||||
|
||||
export default function CamundaModdleExtension(eventBus) {
|
||||
var self = this;
|
||||
|
||||
eventBus.on('moddleCopy.canCopyProperty', function(context) {
|
||||
var property = context.property;
|
||||
var parent = context.parent;
|
||||
|
||||
return self.canCopyProperty(property, parent);
|
||||
});
|
||||
}
|
||||
|
||||
CamundaModdleExtension.$inject = ['eventBus'];
|
||||
|
||||
/**
|
||||
* Check wether to disallow copying property.
|
||||
*/
|
||||
CamundaModdleExtension.prototype.canCopyProperty = function(property, parent) {
|
||||
// (1) check wether property is allowed in parent
|
||||
if (isObject(property) && !isAllowedInParent(property, parent)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// (2) check more complex scenarios
|
||||
|
||||
if (is(property, 'camunda:InputOutput') && !this.canHostInputOutput(parent)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (isAny(property, ['camunda:Connector', 'camunda:Field']) && !this.canHostConnector(parent)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (is(property, 'camunda:In') && !this.canHostIn(parent)) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
CamundaModdleExtension.prototype.canHostInputOutput = function(parent) {
|
||||
// allowed in camunda:Connector
|
||||
var connector = getParent(parent, 'camunda:Connector');
|
||||
|
||||
if (connector) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// special rules inside bpmn:FlowNode
|
||||
var flowNode = getParent(parent, 'bpmn:FlowNode');
|
||||
|
||||
if (!flowNode) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (isAny(flowNode, ['bpmn:StartEvent', 'bpmn:Gateway', 'bpmn:BoundaryEvent'])) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (is(flowNode, 'bpmn:SubProcess') && flowNode.get('triggeredByEvent')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
CamundaModdleExtension.prototype.canHostConnector = function(parent) {
|
||||
var serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike');
|
||||
|
||||
if (is(serviceTaskLike, 'bpmn:MessageEventDefinition')) {
|
||||
// only allow on throw and end events
|
||||
return getParent(parent, 'bpmn:IntermediateThrowEvent') || getParent(parent, 'bpmn:EndEvent');
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
CamundaModdleExtension.prototype.canHostIn = function(parent) {
|
||||
var callActivity = getParent(parent, 'bpmn:CallActivity');
|
||||
|
||||
if (callActivity) {
|
||||
return true;
|
||||
}
|
||||
|
||||
var signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition');
|
||||
|
||||
if (signalEventDefinition) {
|
||||
// only allow on throw and end events
|
||||
return getParent(parent, 'bpmn:IntermediateThrowEvent') || getParent(parent, 'bpmn:EndEvent');
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// helpers //////////
|
||||
|
||||
function is(element, type) {
|
||||
return element && isFunction(element.$instanceOf) && element.$instanceOf(type);
|
||||
}
|
||||
|
||||
function isAny(element, types) {
|
||||
return some(types, function(t) {
|
||||
return is(element, t);
|
||||
});
|
||||
}
|
||||
|
||||
function getParent(element, type) {
|
||||
if (!type) {
|
||||
return element.$parent;
|
||||
}
|
||||
|
||||
if (is(element, type)) {
|
||||
return element;
|
||||
}
|
||||
|
||||
if (!element.$parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
return getParent(element.$parent, type);
|
||||
}
|
||||
|
||||
function isAllowedInParent(property, parent) {
|
||||
// (1) find property descriptor
|
||||
var descriptor = property.$type && property.$model.getTypeDescriptor(property.$type);
|
||||
|
||||
var allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn;
|
||||
|
||||
if (!allowedIn || isWildcard(allowedIn)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// (2) check wether property has parent of allowed type
|
||||
return some(allowedIn, function(type) {
|
||||
return getParent(parent, type);
|
||||
});
|
||||
}
|
||||
|
||||
function isWildcard(allowedIn) {
|
||||
return allowedIn.indexOf(WILDCARD) !== -1;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
import CamundaModdleExtension from './extension.js';
|
||||
export default {
|
||||
__init__: ['CamundaModdleExtension'],
|
||||
CamundaModdleExtension: ['type', CamundaModdleExtension]
|
||||
};
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
'use strict';
|
||||
|
||||
import { some } from '@/utils/min-dash.js';
|
||||
|
||||
var ALLOWED_TYPES = {
|
||||
FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
|
||||
Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
|
||||
Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
|
||||
};
|
||||
|
||||
function is(element, type) {
|
||||
return element && typeof element.$instanceOf === 'function' && element.$instanceOf(type);
|
||||
}
|
||||
|
||||
function exists(element) {
|
||||
return element && element.length;
|
||||
}
|
||||
|
||||
function includesType(collection, type) {
|
||||
return (
|
||||
exists(collection) &&
|
||||
some(collection, function(element) {
|
||||
return is(element, type);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function anyType(element, types) {
|
||||
return some(types, function(type) {
|
||||
return is(element, type);
|
||||
});
|
||||
}
|
||||
|
||||
function isAllowed(propName, propDescriptor, newElement) {
|
||||
var name = propDescriptor.name;
|
||||
var types = ALLOWED_TYPES[name.replace(/flowable:/, '')];
|
||||
|
||||
return name === propName && anyType(newElement, types);
|
||||
}
|
||||
|
||||
export default function FlowableModdleExtension(eventBus) {
|
||||
eventBus.on(
|
||||
'property.clone',
|
||||
function(context) {
|
||||
var newElement = context.newElement;
|
||||
var propDescriptor = context.propertyDescriptor;
|
||||
|
||||
this.canCloneProperty(newElement, propDescriptor);
|
||||
},
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
FlowableModdleExtension.$inject = ['eventBus'];
|
||||
|
||||
FlowableModdleExtension.prototype.canCloneProperty = function(newElement, propDescriptor) {
|
||||
if (isAllowed('flowable:FailedJobRetryTimeCycle', propDescriptor, newElement)) {
|
||||
return (
|
||||
includesType(newElement.eventDefinitions, 'bpmn:TimerEventDefinition') ||
|
||||
includesType(newElement.eventDefinitions, 'bpmn:SignalEventDefinition') ||
|
||||
is(newElement.loopCharacteristics, 'bpmn:MultiInstanceLoopCharacteristics')
|
||||
);
|
||||
}
|
||||
|
||||
if (isAllowed('flowable:Connector', propDescriptor, newElement)) {
|
||||
return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition');
|
||||
}
|
||||
|
||||
if (isAllowed('flowable:Field', propDescriptor, newElement)) {
|
||||
return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition');
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* @author igdianov
|
||||
* address https://github.com/igdianov/activiti-bpmn-moddle
|
||||
* */
|
||||
|
||||
import FlowableModdleExtension from './flowableExtension.js'
|
||||
export default {
|
||||
__init__: ['FlowableModdleExtension'],
|
||||
FlowableModdleExtension: ['type', FlowableModdleExtension]
|
||||
};
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
|
||||
import { assign } from '@/utils/min-dash.js';
|
||||
|
||||
export default function CustomPalette(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
|
||||
PaletteProvider.call(this, palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate, 2000);
|
||||
}
|
||||
|
||||
const F = function() {}; // 核心，利用空对象作为中介；
|
||||
F.prototype = PaletteProvider.prototype; // 核心，将父类的原型赋值给空对象F；
|
||||
|
||||
// 利用中介函数重写原型链方法
|
||||
F.prototype.getPaletteEntries = function() {
|
||||
var actions = {};
|
||||
var create = this._create;
|
||||
var elementFactory = this._elementFactory;
|
||||
var spaceTool = this._spaceTool;
|
||||
var lassoTool = this._lassoTool;
|
||||
var handTool = this._handTool;
|
||||
var globalConnect = this._globalConnect;
|
||||
var translate = this._translate;
|
||||
|
||||
function createAction(type, group, className, title, options) {
|
||||
function createListener(event) {
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
|
||||
if (options) {
|
||||
shape.businessObject.di.isExpanded = options.isExpanded;
|
||||
}
|
||||
|
||||
create.start(event, shape);
|
||||
}
|
||||
|
||||
var shortType = type.replace(/^bpmn:/, '');
|
||||
|
||||
return {
|
||||
group: group,
|
||||
className: className,
|
||||
title: title || translate('Create {type}', { type: shortType }),
|
||||
action: {
|
||||
dragstart: createListener,
|
||||
click: createListener
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function createSubprocess(event) {
|
||||
var subProcess = elementFactory.createShape({
|
||||
type: 'bpmn:SubProcess',
|
||||
x: 0,
|
||||
y: 0,
|
||||
isExpanded: true
|
||||
});
|
||||
|
||||
var startEvent = elementFactory.createShape({
|
||||
type: 'bpmn:StartEvent',
|
||||
x: 40,
|
||||
y: 82,
|
||||
parent: subProcess
|
||||
});
|
||||
|
||||
create.start(event, [subProcess, startEvent], {
|
||||
hints: {
|
||||
autoSelect: [startEvent]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createParticipant(event) {
|
||||
create.start(event, elementFactory.createParticipantShape());
|
||||
}
|
||||
|
||||
assign(actions, {
|
||||
'hand-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-hand-tool',
|
||||
title: translate('Activate the hand tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
handTool.activateHand(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'lasso-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-lasso-tool',
|
||||
title: translate('Activate the lasso tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
lassoTool.activateSelection(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'space-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-space-tool',
|
||||
title: translate('Activate the create/remove space tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
spaceTool.activateSelection(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'global-connect-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Activate the global connect tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
globalConnect.toggle(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'tool-separator': {
|
||||
group: 'tools',
|
||||
separator: true
|
||||
},
|
||||
'create.start-event': createAction('bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none', translate('Create StartEvent')),
|
||||
'create.intermediate-event': createAction(
|
||||
'bpmn:IntermediateThrowEvent',
|
||||
'event',
|
||||
'bpmn-icon-intermediate-event-none',
|
||||
translate('Create Intermediate/Boundary Event')
|
||||
),
|
||||
'create.end-event': createAction('bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none', translate('Create EndEvent')),
|
||||
'create.exclusive-gateway': createAction('bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-none', translate('Create Gateway')),
|
||||
'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', translate('Create User Task')),
|
||||
'create.data-object': createAction('bpmn:DataObjectReference', 'data-object', 'bpmn-icon-data-object', translate('Create DataObjectReference')),
|
||||
'create.data-store': createAction('bpmn:DataStoreReference', 'data-store', 'bpmn-icon-data-store', translate('Create DataStoreReference')),
|
||||
'create.subprocess-expanded': {
|
||||
group: 'activity',
|
||||
className: 'bpmn-icon-subprocess-expanded',
|
||||
title: translate('Create expanded SubProcess'),
|
||||
action: {
|
||||
dragstart: createSubprocess,
|
||||
click: createSubprocess
|
||||
}
|
||||
},
|
||||
'create.participant-expanded': {
|
||||
group: 'collaboration',
|
||||
className: 'bpmn-icon-participant',
|
||||
title: translate('Create Pool/Participant'),
|
||||
action: {
|
||||
dragstart: createParticipant,
|
||||
click: createParticipant
|
||||
}
|
||||
},
|
||||
'create.group': createAction('bpmn:Group', 'artifact', 'bpmn-icon-group', translate('Create Group'))
|
||||
});
|
||||
|
||||
return actions;
|
||||
};
|
||||
|
||||
CustomPalette.$inject = ['palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool', 'handTool', 'globalConnect', 'translate'];
|
||||
|
||||
CustomPalette.prototype = new F(); // 核心，将 F的实例赋值给子类；
|
||||
CustomPalette.prototype.constructor = CustomPalette; // 修复子类CustomPalette的构造器指向，防止原型链的混乱；
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import CustomPalette from './CustomPalette';
|
||||
|
||||
export default {
|
||||
__init__: ['customPalette'],
|
||||
customPalette: ['type', CustomPalette]
|
||||
};
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
import { assign } from '@/utils/min-dash.js';
|
||||
|
||||
/**
|
||||
* A palette provider for BPMN 2.0 elements.
|
||||
*/
|
||||
export default function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
|
||||
this._palette = palette;
|
||||
this._create = create;
|
||||
this._elementFactory = elementFactory;
|
||||
this._spaceTool = spaceTool;
|
||||
this._lassoTool = lassoTool;
|
||||
this._handTool = handTool;
|
||||
this._globalConnect = globalConnect;
|
||||
this._translate = translate;
|
||||
|
||||
palette.registerProvider(this);
|
||||
}
|
||||
|
||||
PaletteProvider.$inject = ['palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool', 'handTool', 'globalConnect', 'translate'];
|
||||
|
||||
PaletteProvider.prototype.getPaletteEntries = function() {
|
||||
var actions = {};
|
||||
var create = this._create;
|
||||
var elementFactory = this._elementFactory;
|
||||
var spaceTool = this._spaceTool;
|
||||
var lassoTool = this._lassoTool;
|
||||
var handTool = this._handTool;
|
||||
var globalConnect = this._globalConnect;
|
||||
var translate = this._translate;
|
||||
|
||||
function createAction(type, group, className, title, options) {
|
||||
function createListener(event) {
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
|
||||
if (options) {
|
||||
shape.businessObject.di.isExpanded = options.isExpanded;
|
||||
}
|
||||
|
||||
create.start(event, shape);
|
||||
}
|
||||
|
||||
var shortType = type.replace(/^bpmn:/, '');
|
||||
|
||||
return {
|
||||
group: group,
|
||||
className: className,
|
||||
title: title || translate('Create {type}', { type: shortType }),
|
||||
action: {
|
||||
dragstart: createListener,
|
||||
click: createListener
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function createSubprocess(event) {
|
||||
var subProcess = elementFactory.createShape({
|
||||
type: 'bpmn:SubProcess',
|
||||
x: 0,
|
||||
y: 0,
|
||||
isExpanded: true
|
||||
});
|
||||
|
||||
var startEvent = elementFactory.createShape({
|
||||
type: 'bpmn:StartEvent',
|
||||
x: 40,
|
||||
y: 82,
|
||||
parent: subProcess
|
||||
});
|
||||
|
||||
create.start(event, [subProcess, startEvent], {
|
||||
hints: {
|
||||
autoSelect: [startEvent]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createParticipant(event) {
|
||||
create.start(event, elementFactory.createParticipantShape());
|
||||
}
|
||||
|
||||
assign(actions, {
|
||||
'hand-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-hand-tool',
|
||||
title: translate('Activate the hand tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
handTool.activateHand(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'lasso-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-lasso-tool',
|
||||
title: translate('Activate the lasso tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
lassoTool.activateSelection(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'space-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-space-tool',
|
||||
title: translate('Activate the create/remove space tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
spaceTool.activateSelection(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'global-connect-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Activate the global connect tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
globalConnect.toggle(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'tool-separator': {
|
||||
group: 'tools',
|
||||
separator: true
|
||||
},
|
||||
'create.start-event': createAction('bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none', translate('Create StartEvent')),
|
||||
'create.intermediate-event': createAction(
|
||||
'bpmn:IntermediateThrowEvent',
|
||||
'event',
|
||||
'bpmn-icon-intermediate-event-none',
|
||||
translate('Create Intermediate/Boundary Event')
|
||||
),
|
||||
'create.end-event': createAction('bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none', translate('Create EndEvent')),
|
||||
'create.exclusive-gateway': createAction('bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-none', translate('Create Gateway')),
|
||||
'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', translate('Create User Task')),
|
||||
'create.data-object': createAction('bpmn:DataObjectReference', 'data-object', 'bpmn-icon-data-object', translate('Create DataObjectReference')),
|
||||
'create.data-store': createAction('bpmn:DataStoreReference', 'data-store', 'bpmn-icon-data-store', translate('Create DataStoreReference')),
|
||||
'create.subprocess-expanded': {
|
||||
group: 'activity',
|
||||
className: 'bpmn-icon-subprocess-expanded',
|
||||
title: translate('Create expanded SubProcess'),
|
||||
action: {
|
||||
dragstart: createSubprocess,
|
||||
click: createSubprocess
|
||||
}
|
||||
},
|
||||
'create.participant-expanded': {
|
||||
group: 'collaboration',
|
||||
className: 'bpmn-icon-participant',
|
||||
title: translate('Create Pool/Participant'),
|
||||
action: {
|
||||
dragstart: createParticipant,
|
||||
click: createParticipant
|
||||
}
|
||||
},
|
||||
'create.group': createAction('bpmn:Group', 'artifact', 'bpmn-icon-group', translate('Create Group'))
|
||||
});
|
||||
|
||||
return actions;
|
||||
};
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
// import translations from "./zh";
|
||||
//
|
||||
// export default function customTranslate(template, replacements) {
|
||||
// replacements = replacements || {};
|
||||
//
|
||||
// // Translate
|
||||
// template = translations[template] || template;
|
||||
//
|
||||
// // Replace
|
||||
// return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||
// let str = replacements[key];
|
||||
// if (
|
||||
// translations[replacements[key]] !== null &&
|
||||
// translations[replacements[key]] !== "undefined"
|
||||
// ) {
|
||||
// // eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||
// str = translations[replacements[key]];
|
||||
// // eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||
// }
|
||||
// return str || "{" + key + "}";
|
||||
// });
|
||||
// }
|
||||
|
||||
export default function customTranslate(translations) {
|
||||
return function(template, replacements) {
|
||||
replacements = replacements || {};
|
||||
// Translate
|
||||
template = translations[template] || template;
|
||||
|
||||
// Replace
|
||||
return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||
let str = replacements[key];
|
||||
if (translations[replacements[key]] !== null && translations[replacements[key]] !== undefined) {
|
||||
// eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||
str = translations[replacements[key]];
|
||||
// eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||
}
|
||||
return str || '{' + key + '}';
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
/**
|
||||
* This is a sample file that should be replaced with the actual translation.
|
||||
*
|
||||
* Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
|
||||
* translations and labels to translate.
|
||||
*/
|
||||
export default {
|
||||
// 添加部分
|
||||
'Append EndEvent': '追加结束事件',
|
||||
'Append Gateway': '追加网关',
|
||||
'Append Task': '追加任务',
|
||||
'Append Intermediate/Boundary Event': '追加中间抛出事件/边界事件',
|
||||
|
||||
'Activate the global connect tool': '激活全局连接工具',
|
||||
'Append {type}': '添加 {type}',
|
||||
'Add Lane above': '在上面添加道',
|
||||
'Divide into two Lanes': '分割成两个道',
|
||||
'Divide into three Lanes': '分割成三个道',
|
||||
'Add Lane below': '在下面添加道',
|
||||
'Append compensation activity': '追加补偿活动',
|
||||
'Change type': '修改类型',
|
||||
'Connect using Association': '使用关联连接',
|
||||
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
|
||||
'Connect using DataInputAssociation': '使用数据输入关联连接',
|
||||
Remove: '移除',
|
||||
'Activate the hand tool': '激活抓手工具',
|
||||
'Activate the lasso tool': '激活套索工具',
|
||||
'Activate the create/remove space tool': '激活创建/删除空间工具',
|
||||
'Create expanded SubProcess': '创建扩展子过程',
|
||||
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
|
||||
'Create Pool/Participant': '创建池/参与者',
|
||||
'Parallel Multi Instance': '并行多重事件',
|
||||
'Sequential Multi Instance': '时序多重事件',
|
||||
DataObjectReference: '数据对象参考',
|
||||
DataStoreReference: '数据存储参考',
|
||||
Loop: '循环',
|
||||
'Ad-hoc': '即席',
|
||||
'Create {type}': '创建 {type}',
|
||||
Task: '任务',
|
||||
'Send Task': '发送任务',
|
||||
'Receive Task': '接收任务',
|
||||
'User Task': '用户任务',
|
||||
'Manual Task': '手工任务',
|
||||
'Business Rule Task': '业务规则任务',
|
||||
'Service Task': '服务任务',
|
||||
'Script Task': '脚本任务',
|
||||
'Call Activity': '调用活动',
|
||||
'Sub Process (collapsed)': '子流程（折叠的）',
|
||||
'Sub Process (expanded)': '子流程（展开的）',
|
||||
'Start Event': '开始事件',
|
||||
StartEvent: '开始事件',
|
||||
'Intermediate Throw Event': '中间事件',
|
||||
'End Event': '结束事件',
|
||||
EndEvent: '结束事件',
|
||||
'Create StartEvent': '创建开始事件',
|
||||
'Create EndEvent': '创建结束事件',
|
||||
'Create Task': '创建任务',
|
||||
'Create User Task': '创建用户任务',
|
||||
'Create Gateway': '创建网关',
|
||||
'Create DataObjectReference': '创建数据对象',
|
||||
'Create DataStoreReference': '创建数据存储',
|
||||
'Create Group': '创建分组',
|
||||
'Create Intermediate/Boundary Event': '创建中间/边界事件',
|
||||
'Message Start Event': '消息开始事件',
|
||||
'Timer Start Event': '定时开始事件',
|
||||
'Conditional Start Event': '条件开始事件',
|
||||
'Signal Start Event': '信号开始事件',
|
||||
'Error Start Event': '错误开始事件',
|
||||
'Escalation Start Event': '升级开始事件',
|
||||
'Compensation Start Event': '补偿开始事件',
|
||||
'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
|
||||
'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
|
||||
'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
|
||||
'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
|
||||
'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
|
||||
'Message Intermediate Catch Event': '消息中间捕获事件',
|
||||
'Message Intermediate Throw Event': '消息中间抛出事件',
|
||||
'Timer Intermediate Catch Event': '定时中间捕获事件',
|
||||
'Escalation Intermediate Throw Event': '升级中间抛出事件',
|
||||
'Conditional Intermediate Catch Event': '条件中间捕获事件',
|
||||
'Link Intermediate Catch Event': '链接中间捕获事件',
|
||||
'Link Intermediate Throw Event': '链接中间抛出事件',
|
||||
'Compensation Intermediate Throw Event': '补偿中间抛出事件',
|
||||
'Signal Intermediate Catch Event': '信号中间捕获事件',
|
||||
'Signal Intermediate Throw Event': '信号中间抛出事件',
|
||||
'Message End Event': '消息结束事件',
|
||||
'Escalation End Event': '定时结束事件',
|
||||
'Error End Event': '错误结束事件',
|
||||
'Cancel End Event': '取消结束事件',
|
||||
'Compensation End Event': '补偿结束事件',
|
||||
'Signal End Event': '信号结束事件',
|
||||
'Terminate End Event': '终止结束事件',
|
||||
'Message Boundary Event': '消息边界事件',
|
||||
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
|
||||
'Timer Boundary Event': '定时边界事件',
|
||||
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
|
||||
'Escalation Boundary Event': '升级边界事件',
|
||||
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
|
||||
'Conditional Boundary Event': '条件边界事件',
|
||||
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
|
||||
'Error Boundary Event': '错误边界事件',
|
||||
'Cancel Boundary Event': '取消边界事件',
|
||||
'Signal Boundary Event': '信号边界事件',
|
||||
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
|
||||
'Compensation Boundary Event': '补偿边界事件',
|
||||
'Exclusive Gateway': '互斥网关',
|
||||
'Parallel Gateway': '并行网关',
|
||||
'Inclusive Gateway': '相容网关',
|
||||
'Complex Gateway': '复杂网关',
|
||||
'Event based Gateway': '事件网关',
|
||||
Transaction: '转运',
|
||||
'Sub Process': '子流程',
|
||||
'Event Sub Process': '事件子流程',
|
||||
'Collapsed Pool': '折叠池',
|
||||
'Expanded Pool': '展开池',
|
||||
|
||||
// Errors
|
||||
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
|
||||
'no shape type specified': '没有指定的形状类型',
|
||||
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
|
||||
'out of bounds release': 'out of bounds release',
|
||||
'more than {count} child lanes': '子道大于{count} ',
|
||||
'element required': '元素不能为空',
|
||||
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
|
||||
'no diagram to display': '没有可展示的流程图',
|
||||
'no process or collaboration to display': '没有可展示的流程/协作',
|
||||
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
|
||||
'already rendered {element}': '{element} 已被渲染',
|
||||
'failed to import {element}': '导入{element}失败',
|
||||
// 属性面板的参数
|
||||
Id: '编号',
|
||||
Name: '名称',
|
||||
General: '常规',
|
||||
Details: '详情',
|
||||
'Message Name': '消息名称',
|
||||
Message: '消息',
|
||||
Initiator: '创建者',
|
||||
'Asynchronous Continuations': '持续异步',
|
||||
'Asynchronous Before': '异步前',
|
||||
'Asynchronous After': '异步后',
|
||||
'Job Configuration': '工作配置',
|
||||
Exclusive: '排除',
|
||||
'Job Priority': '工作优先级',
|
||||
'Retry Time Cycle': '重试时间周期',
|
||||
Documentation: '文档',
|
||||
'Element Documentation': '元素文档',
|
||||
'History Configuration': '历史配置',
|
||||
'History Time To Live': '历史的生存时间',
|
||||
Forms: '表单',
|
||||
'Form Key': '表单key',
|
||||
'Form Fields': '表单字段',
|
||||
'Business Key': '业务key',
|
||||
'Form Field': '表单字段',
|
||||
ID: '编号',
|
||||
Type: '类型',
|
||||
Label: '名称',
|
||||
'Default Value': '默认值',
|
||||
'Default Flow': '默认流转路径',
|
||||
'Conditional Flow': '条件流转路径',
|
||||
'Sequence Flow': '普通流转路径',
|
||||
Validation: '校验',
|
||||
'Add Constraint': '添加约束',
|
||||
Config: '配置',
|
||||
Properties: '属性',
|
||||
'Add Property': '添加属性',
|
||||
Value: '值',
|
||||
Listeners: '监听器',
|
||||
'Execution Listener': '执行监听',
|
||||
'Event Type': '事件类型',
|
||||
'Listener Type': '监听器类型',
|
||||
'Java Class': 'Java类',
|
||||
Expression: '表达式',
|
||||
'Must provide a value': '必须提供一个值',
|
||||
'Delegate Expression': '代理表达式',
|
||||
Script: '脚本',
|
||||
'Script Format': '脚本格式',
|
||||
'Script Type': '脚本类型',
|
||||
'Inline Script': '内联脚本',
|
||||
'External Script': '外部脚本',
|
||||
Resource: '资源',
|
||||
'Field Injection': '字段注入',
|
||||
Extensions: '扩展',
|
||||
'Input/Output': '输入/输出',
|
||||
'Input Parameters': '输入参数',
|
||||
'Output Parameters': '输出参数',
|
||||
Parameters: '参数',
|
||||
'Output Parameter': '输出参数',
|
||||
'Timer Definition Type': '定时器定义类型',
|
||||
'Timer Definition': '定时器定义',
|
||||
Date: '日期',
|
||||
Duration: '持续',
|
||||
Cycle: '循环',
|
||||
Signal: '信号',
|
||||
'Signal Name': '信号名称',
|
||||
Escalation: '升级',
|
||||
Error: '错误',
|
||||
'Link Name': '链接名称',
|
||||
Condition: '条件名称',
|
||||
'Variable Name': '变量名称',
|
||||
'Variable Event': '变量事件',
|
||||
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
|
||||
'Wait for Completion': '等待完成',
|
||||
'Activity Ref': '活动参考',
|
||||
'Version Tag': '版本标签',
|
||||
Executable: '可执行文件',
|
||||
'External Task Configuration': '扩展任务配置',
|
||||
'Task Priority': '任务优先级',
|
||||
External: '外部',
|
||||
Connector: '连接器',
|
||||
'Must configure Connector': '必须配置连接器',
|
||||
'Connector Id': '连接器编号',
|
||||
Implementation: '实现方式',
|
||||
'Field Injections': '字段注入',
|
||||
Fields: '字段',
|
||||
'Result Variable': '结果变量',
|
||||
Topic: '主题',
|
||||
'Configure Connector': '配置连接器',
|
||||
'Input Parameter': '输入参数',
|
||||
Assignee: '代理人',
|
||||
'Candidate Users': '候选用户',
|
||||
'Candidate Groups': '候选组',
|
||||
'Due Date': '到期时间',
|
||||
'Follow Up Date': '跟踪日期',
|
||||
Priority: '优先级',
|
||||
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
|
||||
'跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
|
||||
'跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
Variables: '变量',
|
||||
'Candidate Starter Configuration': '候选人起动器配置',
|
||||
'Candidate Starter Groups': '候选人起动器组',
|
||||
'This maps to the process definition key.': '这映射到流程定义键。',
|
||||
'Candidate Starter Users': '候选人起动器的用户',
|
||||
'Specify more than one user as a comma separated list.': '指定多个用户作为逗号分隔的列表。',
|
||||
'Tasklist Configuration': 'Tasklist配置',
|
||||
Startable: '启动',
|
||||
'Specify more than one group as a comma separated list.': '指定多个组作为逗号分隔的列表。'
|
||||
};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import MyProcessDesigner from './designer';
|
||||
import MyProcessPalette from './palette';
|
||||
import MyProcessPenal from './penal';
|
||||
|
||||
const components = [MyProcessDesigner, MyProcessPenal, MyProcessPalette];
|
||||
|
||||
const install = function(Vue) {
|
||||
components.forEach(component => {
|
||||
Vue.component(component.name, component);
|
||||
});
|
||||
};
|
||||
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
install(window.Vue);
|
||||
}
|
||||
|
||||
export default {
|
||||
version: '0.0.1',
|
||||
install,
|
||||
...components
|
||||
};
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div class="my-process-palette">
|
||||
<p>简易palette</p>
|
||||
<el-collapse>
|
||||
<el-collapse-item title="任务" name="1">
|
||||
<!-- 可以简化。。。 -->
|
||||
<div class="custom-button" @click="createElement($event, 'Task')" @mousedown="createElement($event, 'Task')">
|
||||
任务
|
||||
</div>
|
||||
<div class="custom-button" @click="createElement($event, 'UserTask')" @mousedown="createElement($event, 'UserTask')">
|
||||
用户任务
|
||||
</div>
|
||||
<div class="custom-button" @click="createElement($event, 'SendTask')" @mousedown="createElement($event, 'SendTask')">
|
||||
发送任务
|
||||
</div>
|
||||
<div class="custom-button" @click="createElement($event, 'ReceiveTask')" @mousedown="createElement($event, 'ReceiveTask')">
|
||||
接收任务
|
||||
</div>
|
||||
<div class="custom-button" @click="createElement($event, 'ScriptTask')" @mousedown="createElement($event, 'ScriptTask')">
|
||||
脚本任务
|
||||
</div>
|
||||
<div class="custom-button" @click="createElement($event, 'ServiceTask')" @mousedown="createElement($event, 'ServiceTask')">
|
||||
服务任务
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="网关" name="2">
|
||||
<div class="custom-button" @click="createElement($event, 'Gateway')" @mousedown="createElement($event, 'Gateway')">
|
||||
网关
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="开始" name="3">
|
||||
<div class="custom-button" @click="createElement($event, 'StartEvent')" @mousedown="createElement($event, 'StartEvent')">
|
||||
开始
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="结束" name="4">
|
||||
<div class="custom-button" @click="createElement($event, 'EndEvent')" @mousedown="createElement($event, 'EndEvent')">
|
||||
结束
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="工具" name="5">
|
||||
<div class="custom-button" @click="startTool($event, 'handTool')" @mousedown="startTool($event, 'handTool')">
|
||||
手型工具
|
||||
</div>
|
||||
<div class="custom-button" @click="startTool($event, 'lassoTool')" @mousedown="startTool($event, 'lassoTool')">
|
||||
框选工具
|
||||
</div>
|
||||
<div class="custom-button" @click="startTool($event, 'connectTool')" @mousedown="startTool($event, 'connectTool')">
|
||||
连线工具
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { assign } from 'min-dash';
|
||||
|
||||
export default {
|
||||
name: 'MyProcessPalette',
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
createElement(event, type, options = {}) {
|
||||
const ElementFactory = window.bpmnInstances.elementFactory;
|
||||
const create = window.bpmnInstances.modeler.get('create');
|
||||
const shape = ElementFactory.createShape(assign({ type: `bpmn:${type}` }, options));
|
||||
if (options) {
|
||||
shape.businessObject.di.isExpanded = options.isExpanded;
|
||||
}
|
||||
create.start(event, shape);
|
||||
},
|
||||
startTool(event, type) {
|
||||
if (type === 'handTool') {
|
||||
window.bpmnInstances.modeler.get('handTool').activateHand(event);
|
||||
}
|
||||
if (type === 'lassoTool') {
|
||||
window.bpmnInstances.modeler.get('lassoTool').activateSelection(event);
|
||||
}
|
||||
if (type === 'connectTool') {
|
||||
window.bpmnInstances.modeler.get('globalConnect').toggle(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-process-palette {
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
.custom-button {
|
||||
box-sizing: border-box;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(24, 144, 255, 0.8);
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
&:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import MyPropertiesPalette from './ProcessPalette.vue';
|
||||
|
||||
MyPropertiesPalette.install = function(Vue) {
|
||||
Vue.component(MyPropertiesPalette.name, MyPropertiesPalette);
|
||||
};
|
||||
|
||||
export default MyPropertiesPalette;
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<template>
|
||||
<div class="process-panel__container" :style="{ width: `${this.width}px` }">
|
||||
<el-collapse v-model="activeTab">
|
||||
<el-collapse-item name="base">
|
||||
<template #title>
|
||||
<div class="panel-tab__title"><el-icon><info-filled /></el-icon>常规</div>
|
||||
</template>
|
||||
<element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
|
||||
<template #title>
|
||||
<div class="panel-tab__title"><el-icon><comment /></el-icon>消息与信号</div>
|
||||
</template>
|
||||
<signal-and-massage />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
|
||||
<template #title>
|
||||
<div class="panel-tab__title"><el-icon><promotion /></el-icon>流转条件</div>
|
||||
</template>
|
||||
<flow-condition :business-object="elementBusinessObject" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="condition" v-if="formVisible" key="form">
|
||||
<template #title>
|
||||
<div class="panel-tab__title"><el-icon><list /></el-icon>表单</div>
|
||||
</template>
|
||||
<element-form :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
|
||||
<template #title>
|
||||
<div class="panel-tab__title"><el-icon><checked /></el-icon>任务</div>
|
||||
</template>
|
||||
<element-task :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1" key="multiInstance">
|
||||
<template #title>
|
||||
<div class="panel-tab__title"><el-icon><help-filled /></el-icon>多实例</div>
|
||||
</template>
|
||||
<element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
|
||||
<template #title>
|
||||
<div class="panel-tab__title"><el-icon><bell-filled /></el-icon>任务监听器</div>
|
||||
</template>
|
||||
<user-task-listeners :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="listeners" key="listeners">
|
||||
<template #title>
|
||||
<div class="panel-tab__title"><el-icon><bell-filled /></el-icon>执行监听器</div>
|
||||
</template>
|
||||
<element-listeners :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="extensions" key="extensions">
|
||||
<template #title>
|
||||
<div class="panel-tab__title"><el-icon><circle-plus /></el-icon>扩展属性</div>
|
||||
</template>
|
||||
<element-properties :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="other" key="other">
|
||||
<template #title>
|
||||
|
||||
<div class="panel-tab__title"><el-icon><promotion /></el-icon>其他</div>
|
||||
</template>
|
||||
<element-other-config :id="elementId" />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ElementBaseInfo from "./base/ElementBaseInfo";
|
||||
import ElementOtherConfig from "./other/ElementOtherConfig";
|
||||
import ElementTask from "./task/ElementTask";
|
||||
import ElementMultiInstance from "./multi-instance/ElementMultiInstance";
|
||||
import FlowCondition from "./flow-condition/FlowCondition";
|
||||
import SignalAndMassage from "./signal-message/SignalAndMessage";
|
||||
import ElementListeners from "./listeners/ElementListeners";
|
||||
import ElementProperties from "./properties/ElementProperties";
|
||||
import ElementForm from "./form/ElementForm";
|
||||
import UserTaskListeners from "./listeners/UserTaskListeners";
|
||||
import Log from "../Log";
|
||||
/**
|
||||
* 侧边栏
|
||||
* @Author MiyueFE
|
||||
* @Home https://github.com/miyuesc
|
||||
* @Date 2021年3月31日18:57:51
|
||||
*/
|
||||
export default {
|
||||
name: "MyPropertiesPanel",
|
||||
components: {
|
||||
UserTaskListeners,
|
||||
ElementForm,
|
||||
ElementProperties,
|
||||
ElementListeners,
|
||||
SignalAndMassage,
|
||||
FlowCondition,
|
||||
ElementMultiInstance,
|
||||
ElementTask,
|
||||
ElementOtherConfig,
|
||||
ElementBaseInfo
|
||||
},
|
||||
componentName: "MyPropertiesPanel",
|
||||
props: {
|
||||
bpmnModeler: Object,
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "camunda"
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 480
|
||||
},
|
||||
idEditDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
prefix: this.prefix,
|
||||
width: this.width
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: "base",
|
||||
elementId: "",
|
||||
elementType: "",
|
||||
elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
|
||||
conditionFormVisible: false, // 流转条件设置
|
||||
formVisible: false // 表单配置
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
elementId: {
|
||||
handler() {
|
||||
this.activeTab = "base";
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initModels();
|
||||
},
|
||||
methods: {
|
||||
initModels() {
|
||||
// 初始化 modeler 以及其他 moddle
|
||||
if (!this.bpmnModeler) {
|
||||
// 避免加载时 流程图 并未加载完成
|
||||
this.timer = setTimeout(() => this.initModels(), 10);
|
||||
return;
|
||||
}
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
window.bpmnInstances = {
|
||||
modeler: this.bpmnModeler,
|
||||
modeling: this.bpmnModeler.get("modeling"),
|
||||
moddle: this.bpmnModeler.get("moddle"),
|
||||
eventBus: this.bpmnModeler.get("eventBus"),
|
||||
bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
|
||||
elementFactory: this.bpmnModeler.get("elementFactory"),
|
||||
elementRegistry: this.bpmnModeler.get("elementRegistry"),
|
||||
replace: this.bpmnModeler.get("replace"),
|
||||
selection: this.bpmnModeler.get("selection")
|
||||
};
|
||||
this.getActiveElement();
|
||||
},
|
||||
getActiveElement() {
|
||||
// 初始第一个选中元素 bpmn:Process
|
||||
this.initFormOnChanged(null);
|
||||
this.bpmnModeler.on("import.done", e => {
|
||||
this.initFormOnChanged(null);
|
||||
});
|
||||
// 监听选择事件，修改当前激活的元素以及表单
|
||||
this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
|
||||
this.initFormOnChanged(newSelection[0] || null);
|
||||
});
|
||||
this.bpmnModeler.on("element.changed", ({ element }) => {
|
||||
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
|
||||
if (element && element.id === this.elementId) {
|
||||
this.initFormOnChanged(element);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 初始化数据
|
||||
initFormOnChanged(element) {
|
||||
let activatedElement = element;
|
||||
if (!activatedElement) {
|
||||
activatedElement =
|
||||
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
|
||||
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
|
||||
}
|
||||
if (!activatedElement) return;
|
||||
Log.printBack(`select element changed: id: ${activatedElement.id} , type: ${activatedElement.businessObject.$type}`);
|
||||
Log.prettyInfo("businessObject", activatedElement.businessObject);
|
||||
window.bpmnInstances.bpmnElement = activatedElement;
|
||||
this.bpmnElement = activatedElement;
|
||||
this.elementId = activatedElement.id;
|
||||
this.elementType = activatedElement.type.split(":")[1] || "";
|
||||
this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
|
||||
this.conditionFormVisible = !!(
|
||||
this.elementType === "SequenceFlow" &&
|
||||
activatedElement.source &&
|
||||
activatedElement.source.type.indexOf("StartEvent") === -1
|
||||
);
|
||||
this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.bpmnInstances = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="small" label-width="90px" @submit.prevent>
|
||||
<el-form-item label="ID">
|
||||
<el-input v-model="elementBaseInfo.id" :disabled="idEditDisabled" clearable @change="updateBaseInfo('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
|
||||
</el-form-item>
|
||||
<!--流程的基础属性-->
|
||||
<template v-if="elementBaseInfo.$type === 'bpmn:Process'">
|
||||
<el-form-item label="版本标签">
|
||||
<el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="可执行">
|
||||
<el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item v-if="elementBaseInfo.$type === 'bpmn:SubProcess'" label="状态">
|
||||
<el-switch v-model="elementBaseInfo.isExpanded" active-text="展开" inactive-text="折叠" @change="updateBaseInfo('isExpanded')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementBaseInfo",
|
||||
props: {
|
||||
businessObject: Object,
|
||||
type: String,
|
||||
idEditDisabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementBaseInfo: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
businessObject: {
|
||||
immediate: false,
|
||||
handler: function(val) {
|
||||
if (val) {
|
||||
this.$nextTick(() => this.resetBaseInfo());
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetBaseInfo() {
|
||||
this.bpmnElement = window?.bpmnInstances?.bpmnElement || {};
|
||||
this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
|
||||
if (this.elementBaseInfo && this.elementBaseInfo.$type === "bpmn:SubProcess") {
|
||||
this.elementBaseInfo["isExpanded"] = this.elementBaseInfo.di?.isExpanded
|
||||
}
|
||||
},
|
||||
updateBaseInfo(key) {
|
||||
if (key === "id") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
id: this.elementBaseInfo[key],
|
||||
di: { id: `${this.elementBaseInfo[key]}_di` }
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (key === "isExpanded") {
|
||||
window?.bpmnInstances?.modeling.toggleCollapse(this.bpmnElement);
|
||||
return;
|
||||
}
|
||||
const attrObj = Object.create(null);
|
||||
attrObj[key] = this.elementBaseInfo[key];
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form :model="flowConditionForm" label-width="90px" size="small" @submit.prevent>
|
||||
<el-form-item label="流转类型">
|
||||
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
|
||||
<el-option label="普通流转路径" value="normal" />
|
||||
<el-option label="默认流转路径" value="default" />
|
||||
<el-option label="条件流转路径" value="condition" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
|
||||
<el-select v-model="flowConditionForm.conditionType">
|
||||
<el-option label="表达式" value="expression" />
|
||||
<el-option label="脚本" value="script" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
|
||||
<el-input v-model="flowConditionForm.body" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
|
||||
<el-form-item label="脚本语言" key="language">
|
||||
<el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型" key="scriptType">
|
||||
<el-select v-model="flowConditionForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
|
||||
<el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
|
||||
<el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FlowCondition',
|
||||
props: {
|
||||
businessObject: Object,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flowConditionForm: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
businessObject: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.$nextTick(() => this.resetFlowCondition());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetFlowCondition() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.bpmnElementSource = this.bpmnElement.source;
|
||||
this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef;
|
||||
if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
|
||||
// 默认
|
||||
this.flowConditionForm = { type: 'default' };
|
||||
} else if (!this.bpmnElement.businessObject.conditionExpression) {
|
||||
// 普通
|
||||
this.flowConditionForm = { type: 'normal' };
|
||||
} else {
|
||||
// 带条件
|
||||
const conditionExpression = this.bpmnElement.businessObject.conditionExpression;
|
||||
this.flowConditionForm = { ...conditionExpression, type: 'condition' };
|
||||
// resource 可直接标识 是否是外部资源脚本
|
||||
if (this.flowConditionForm.resource) {
|
||||
this.flowConditionForm['conditionType'] = 'script'
|
||||
this.flowConditionForm['scriptType'] = 'externalScript'
|
||||
return;
|
||||
}
|
||||
if (conditionExpression.language) {
|
||||
this.flowConditionForm['conditionType'] = 'script'
|
||||
this.flowConditionForm['scriptType'] = 'inlineScript'
|
||||
return;
|
||||
}
|
||||
this.flowConditionForm['conditionType'] = 'expression'
|
||||
}
|
||||
},
|
||||
updateFlowType(flowType) {
|
||||
// 正常条件类
|
||||
if (flowType === 'condition') {
|
||||
this.flowConditionRef = window.bpmnInstances.moddle.create('bpmn:FormalExpression');
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
conditionExpression: this.flowConditionRef
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 默认路径
|
||||
if (flowType === 'default') {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
conditionExpression: null
|
||||
});
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
|
||||
default: this.bpmnElement
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
|
||||
if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
|
||||
default: null
|
||||
});
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
conditionExpression: null
|
||||
});
|
||||
},
|
||||
updateFlowCondition() {
|
||||
const { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
|
||||
let condition;
|
||||
if (conditionType === 'expression') {
|
||||
condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { body });
|
||||
} else {
|
||||
if (scriptType === 'inlineScript') {
|
||||
condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { body, language });
|
||||
this.flowConditionForm['resource'] = ''
|
||||
} else {
|
||||
this.flowConditionForm['body'] = ''
|
||||
condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { resource, language });
|
||||
}
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition });
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.bpmnElement = null;
|
||||
this.bpmnElementSource = null;
|
||||
this.bpmnElementSourceRef = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,415 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="small" label-width="80px" @submit.prevent>
|
||||
<el-form-item label="表单" prop="formKey">
|
||||
<el-select v-model="formKey" placeholder="请选择表单" @change="updateElementFormKey" clearable>
|
||||
<el-option v-for="item in formOptions" :key="item.formId" :label="item.formName" :value="`key_${item.formId}`" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="localScope">
|
||||
<template #label>
|
||||
<div class="flex align-center">
|
||||
<el-tooltip content="若为节点表单，则表单信息仅在此节点可用，默认为全局表单，表单信息在整个流程实例中可用" placement="top-start">
|
||||
<el-icon><InfoFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
<span>节点表单</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-switch
|
||||
:disabled="type === 'StartEvent'"
|
||||
v-model="localScope"
|
||||
active-text="是"
|
||||
inactive-text="否"
|
||||
@change="updateElementFormScope()"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="表单标识">-->
|
||||
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="业务标识">-->
|
||||
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
|
||||
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
|
||||
<!-- <el-option label="无" value="" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
|
||||
<!--字段列表-->
|
||||
<!-- <div class="element-property list-property">-->
|
||||
<!-- <el-divider><el-icon><coin /></el-icon> 表单字段</el-divider>-->
|
||||
<!-- <el-table :data="fieldList" size="small" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" type="index" width="50px" />-->
|
||||
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template v-slot="{ row, $index }">-->
|
||||
<!-- <el-button link type="" @click="openFieldForm(row, $index)">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button link type="" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button size="small" type="primary" :icon="Plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!--字段配置侧边栏-->
|
||||
<!-- <el-drawer v-model="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
|
||||
<!-- <el-form :model="formFieldForm" label-width="90px" size="small" @submit.prevent>-->
|
||||
<!-- <el-form-item label="字段ID">-->
|
||||
<!-- <el-input v-model="formFieldForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型">-->
|
||||
<!-- <el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">-->
|
||||
<!-- <el-option v-for="(value, key) of fieldType" :key="key" :label="value" :value="key" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item v-if="formFieldForm.typeType === 'custom'" label="类型名称">-->
|
||||
<!-- <el-input v-model="formFieldForm.type" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称">-->
|
||||
<!-- <el-input v-model="formFieldForm.label" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item v-if="formFieldForm.typeType === 'date'" label="时间格式">-->
|
||||
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="默认值">-->
|
||||
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- 枚举值设置 -->
|
||||
<!-- <template v-if="formFieldForm.type === 'enum'">-->
|
||||
<!-- <el-divider key="enum-divider" />-->
|
||||
<!-- <p key="enum-title" class="listener-filed__title">-->
|
||||
<!-- <span>-->
|
||||
<!-- <el-icon>-->
|
||||
<!-- <menu />-->
|
||||
<!-- </el-icon>-->
|
||||
<!-- 枚举值列表：-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table key="enum-table" :data="fieldEnumList" size="small" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template v-slot="{ row, $index }">-->
|
||||
<!-- <el-button link type="" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button link type="" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- 校验规则 -->
|
||||
<!-- <el-divider key="validation-divider" />-->
|
||||
<!-- <p key="validation-title" class="listener-filed__title">-->
|
||||
<!-- <span><el-icon><menu /></el-icon>约束条件列表：</span>-->
|
||||
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table key="validation-table" :data="fieldConstraintsList" size="small" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template v-slot="{ row, $index }">-->
|
||||
<!-- <el-button link type="" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button link type="" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- 表单属性 -->
|
||||
<!-- <el-divider key="property-divider" />-->
|
||||
<!-- <p key="property-title" class="listener-filed__title">-->
|
||||
<!-- <span><el-icon><menu /></el-icon>字段属性列表：</span>-->
|
||||
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table key="property-table" :data="fieldPropertiesList" size="small" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template v-slot="{ row, $index }">-->
|
||||
<!-- <el-button link type="" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button link type="" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button size="small">取 消</el-button>-->
|
||||
<!-- <el-button size="small" type="primary" @click="saveField">保 存</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-drawer>-->
|
||||
|
||||
<el-dialog v-model="fieldOptionModelVisible" :title="optionModelTitle" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="fieldOptionForm" size="small" label-width="96px" @submit.prevent>
|
||||
<el-form-item v-if="fieldOptionType !== 'constraint'" key="option-id" label="编号/ID">
|
||||
<el-input v-model="fieldOptionForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="fieldOptionType !== 'property'" key="option-name" label="名称">
|
||||
<el-input v-model="fieldOptionForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="fieldOptionType === 'constraint'" key="option-config" label="配置">
|
||||
<el-input v-model="fieldOptionForm.config" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="fieldOptionType === 'property'" key="option-value" label="值">
|
||||
<el-input v-model="fieldOptionForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button size="small" @click="fieldOptionModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveFieldOption">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { listAllForm } from "@/api/workflow/form";
|
||||
|
||||
export default {
|
||||
name: 'ElementForm',
|
||||
setup() {
|
||||
return {
|
||||
Plus
|
||||
}
|
||||
},
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: 'prefix',
|
||||
width: 'width'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formKey: '',
|
||||
formOptions: [],
|
||||
localScope: false,
|
||||
businessKey: '',
|
||||
optionModelTitle: '',
|
||||
fieldList: [],
|
||||
formFieldForm: {},
|
||||
fieldType: {
|
||||
long: '长整型',
|
||||
string: '字符串',
|
||||
boolean: '布尔类',
|
||||
date: '日期类',
|
||||
enum: '枚举类',
|
||||
custom: '自定义类型'
|
||||
},
|
||||
formFieldIndex: -1, // 编辑中的字段， -1 为新增
|
||||
formFieldOptionIndex: -1, // 编辑中的字段配置项， -1 为新增
|
||||
fieldModelVisible: false,
|
||||
fieldOptionModelVisible: false,
|
||||
fieldOptionForm: {}, // 当前激活的字段配置项数据
|
||||
fieldOptionType: '', // 当前激活的字段配置项弹窗 类型
|
||||
fieldEnumList: [], // 枚举值列表
|
||||
fieldConstraintsList: [], // 约束条件列表
|
||||
fieldPropertiesList: [] // 绑定属性列表
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.$nextTick(() => this.resetFormList());
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/** 查询流程分类列表 */
|
||||
this.getFormList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询表单列表 */
|
||||
getFormList() {
|
||||
listAllForm().then(response => this.formOptions = response.data)
|
||||
},
|
||||
resetFormList() {
|
||||
this.bpmnELement = window.bpmnInstances.bpmnElement;
|
||||
this.formKey = this.bpmnELement.businessObject.formKey;
|
||||
this.localScope = this.bpmnELement.businessObject.localScope;
|
||||
// 获取元素扩展属性 或者 创建扩展属性
|
||||
this.elExtensionElements =
|
||||
this.bpmnELement.businessObject.get('extensionElements') || window.bpmnInstances.moddle.create('bpmn:ExtensionElements', { values: [] });
|
||||
// 获取元素表单配置 或者 创建新的表单配置
|
||||
// try {
|
||||
// this.formData =
|
||||
// this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)[0] ||
|
||||
// window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
|
||||
// } catch (error) {
|
||||
// this.formData = {}
|
||||
// console.log(error)
|
||||
// }
|
||||
|
||||
// 业务标识 businessKey， 绑定在 formData 中
|
||||
// this.businessKey = this.formData.businessKey;
|
||||
|
||||
// 保留剩余扩展元素，便于后面更新该元素对应属性
|
||||
this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`);
|
||||
|
||||
// 复制原始值，填充表格
|
||||
// this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
|
||||
|
||||
// 更新元素扩展属性，避免后续报错
|
||||
// this.updateElementExtensions();
|
||||
},
|
||||
updateElementFormKey() {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey });
|
||||
},
|
||||
updateElementFormScope() {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { localScope: this.localScope });
|
||||
},
|
||||
updateElementBusinessKey() {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey });
|
||||
},
|
||||
// 根据类型调整字段type
|
||||
changeFieldTypeType(type) {
|
||||
this.formFieldForm['type'] = type === 'custom' ? '' : type
|
||||
},
|
||||
|
||||
// 打开字段详情侧边栏
|
||||
openFieldForm(field, index) {
|
||||
this.formFieldIndex = index;
|
||||
if (index !== -1) {
|
||||
const FieldObject = this.formData.fields[index];
|
||||
this.formFieldForm = JSON.parse(JSON.stringify(field));
|
||||
// 设置自定义类型
|
||||
this.formFieldForm['typeType'] = !this.fieldType[field.type] ? 'custom' : field.type
|
||||
// 初始化枚举值列表
|
||||
field.type === 'enum' && (this.fieldEnumList = JSON.parse(JSON.stringify(FieldObject?.values || [])));
|
||||
// 初始化约束条件列表
|
||||
this.fieldConstraintsList = JSON.parse(JSON.stringify(FieldObject?.validation?.constraints || []));
|
||||
// 初始化自定义属性列表
|
||||
this.fieldPropertiesList = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []));
|
||||
} else {
|
||||
this.formFieldForm = {};
|
||||
// 初始化枚举值列表
|
||||
this.fieldEnumList = [];
|
||||
// 初始化约束条件列表
|
||||
this.fieldConstraintsList = [];
|
||||
// 初始化自定义属性列表
|
||||
this.fieldPropertiesList = [];
|
||||
}
|
||||
this.fieldModelVisible = true;
|
||||
},
|
||||
// 打开字段 某个 配置项 弹窗
|
||||
openFieldOptionForm(option, index, type) {
|
||||
this.fieldOptionModelVisible = true;
|
||||
this.fieldOptionType = type;
|
||||
this.formFieldOptionIndex = index;
|
||||
if (type === 'property') {
|
||||
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
|
||||
return (this.optionModelTitle = '属性配置');
|
||||
}
|
||||
if (type === 'enum') {
|
||||
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
|
||||
return (this.optionModelTitle = '枚举值配置');
|
||||
}
|
||||
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
|
||||
return (this.optionModelTitle = '约束条件配置');
|
||||
},
|
||||
|
||||
// 保存字段 某个 配置项
|
||||
saveFieldOption() {
|
||||
if (this.formFieldOptionIndex === -1) {
|
||||
if (this.fieldOptionType === 'property') {
|
||||
this.fieldPropertiesList.push(this.fieldOptionForm);
|
||||
}
|
||||
if (this.fieldOptionType === 'constraint') {
|
||||
this.fieldConstraintsList.push(this.fieldOptionForm);
|
||||
}
|
||||
if (this.fieldOptionType === 'enum') {
|
||||
this.fieldEnumList.push(this.fieldOptionForm);
|
||||
}
|
||||
} else {
|
||||
this.fieldOptionType === 'property' && this.fieldPropertiesList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
|
||||
this.fieldOptionType === 'constraint' && this.fieldConstraintsList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
|
||||
this.fieldOptionType === 'enum' && this.fieldEnumList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
|
||||
}
|
||||
this.fieldOptionModelVisible = false;
|
||||
this.fieldOptionForm = {};
|
||||
},
|
||||
// 保存字段配置
|
||||
saveField() {
|
||||
const { id, type, label, defaultValue, datePattern } = this.formFieldForm;
|
||||
const Field = window.bpmnInstances.moddle.create(`${this.prefix}:FormField`, { id, type, label });
|
||||
defaultValue && (Field.defaultValue = defaultValue);
|
||||
datePattern && (Field.datePattern = datePattern);
|
||||
// 构建属性
|
||||
if (this.fieldPropertiesList && this.fieldPropertiesList.length) {
|
||||
const fieldPropertyList = this.fieldPropertiesList.map(fp => {
|
||||
return window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { id: fp.id, value: fp.value });
|
||||
});
|
||||
Field.properties = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { values: fieldPropertyList });
|
||||
}
|
||||
// 构建校验规则
|
||||
if (this.fieldConstraintsList && this.fieldConstraintsList.length) {
|
||||
const fieldConstraintList = this.fieldConstraintsList.map(fc => {
|
||||
return window.bpmnInstances.moddle.create(`${this.prefix}:Constraint`, { name: fc.name, config: fc.config });
|
||||
});
|
||||
Field.validation = window.bpmnInstances.moddle.create(`${this.prefix}:Validation`, { constraints: fieldConstraintList });
|
||||
}
|
||||
// 构建枚举值
|
||||
if (this.fieldEnumList && this.fieldEnumList.length) {
|
||||
Field.values = this.fieldEnumList.map(fe => {
|
||||
return window.bpmnInstances.moddle.create(`${this.prefix}:Value`, { name: fe.name, id: fe.id });
|
||||
});
|
||||
}
|
||||
// 更新数组 与 表单配置实例
|
||||
if (this.formFieldIndex === -1) {
|
||||
this.fieldList.push(this.formFieldForm);
|
||||
this.formData.fields && this.formData.fields.push(Field);
|
||||
} else {
|
||||
this.fieldList.splice(this.formFieldIndex, 1, this.formFieldForm);
|
||||
this.formData.fields.splice(this.formFieldIndex, 1, Field);
|
||||
}
|
||||
this.updateElementExtensions();
|
||||
this.fieldModelVisible = false;
|
||||
},
|
||||
|
||||
// 移除某个 字段的 配置项
|
||||
removeFieldOptionItem(option, index, type) {
|
||||
if (type === 'property') {
|
||||
this.fieldPropertiesList.splice(index, 1);
|
||||
return;
|
||||
}
|
||||
if (type === 'enum') {
|
||||
this.fieldEnumList.splice(index, 1);
|
||||
return;
|
||||
}
|
||||
this.fieldConstraintsList.splice(index, 1);
|
||||
},
|
||||
// 移除 字段
|
||||
removeField(field, index) {
|
||||
this.fieldList.splice(index, 1);
|
||||
this.formData.fields.splice(index, 1);
|
||||
this.updateElementExtensions();
|
||||
},
|
||||
|
||||
updateElementExtensions() {
|
||||
// 更新回扩展元素
|
||||
const newElExtensionElements = window.bpmnInstances.moddle.create(`bpmn:ExtensionElements`, {
|
||||
values: this.otherExtensions.concat(this.formData)
|
||||
});
|
||||
// 更新到元素上
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
|
||||
extensionElements: newElExtensionElements
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import MyPropertiesPanel from './PropertiesPanel.vue';
|
||||
|
||||
MyPropertiesPanel.install = function(Vue) {
|
||||
Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
|
||||
};
|
||||
|
||||
export default MyPropertiesPanel;
|
||||
|
|
@ -0,0 +1,303 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="small" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="100px" prop="event" />
|
||||
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button link type="" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button link type="" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="small" type="primary" :icon="Plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer v-model="listenerFormModelVisible" title="执行监听器" :size="`${width}px`" append-to-body destroy-on-close>
|
||||
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option label="start" value="start" />
|
||||
<el-option label="end" value="end" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="listener-class"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.class" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="listener-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.expression" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="listener-delegate"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><el-icon><Menu /></el-icon>注入字段：</span>
|
||||
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button link type="" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button link type="" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createListenerObject, updateElementExtensions } from "../../utils";
|
||||
import { initListenerType, initListenerForm, listenerType, fieldType } from "./utilSelf";
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
|
||||
export default {
|
||||
name: "ElementListeners",
|
||||
setup() {
|
||||
return { Plus }
|
||||
},
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementListenersList: [], // 监听器列表
|
||||
listenerForm: {}, // 监听器详情表单
|
||||
listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
|
||||
fieldsListOfListener: [],
|
||||
listenerFieldForm: {}, // 监听器 注入字段 详情表单
|
||||
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
|
||||
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
|
||||
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
|
||||
listenerTypeObject: listenerType,
|
||||
fieldTypeObject: fieldType
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.$nextTick(() => this.resetListenersList());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetListenersList() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.otherExtensionList = [];
|
||||
this.bpmnElementListeners =
|
||||
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
|
||||
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
|
||||
},
|
||||
// 打开 监听器详情 侧边栏
|
||||
openListenerForm(listener, index) {
|
||||
if (listener) {
|
||||
this.listenerForm = initListenerForm(listener);
|
||||
this.editingListenerIndex = index;
|
||||
} else {
|
||||
this.listenerForm = {};
|
||||
this.editingListenerIndex = -1; // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
this.fieldsListOfListener = listener.fields.map(field => ({
|
||||
...field,
|
||||
fieldType: field.string ? "string" : "expression"
|
||||
}));
|
||||
} else {
|
||||
this.fieldsListOfListener = [];
|
||||
this.listenerForm["fields"] = []
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
this.listenerFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 打开监听器字段编辑弹窗
|
||||
openListenerFieldForm(field, index) {
|
||||
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
|
||||
this.editingListenerFieldIndex = field ? index : -1;
|
||||
this.listenerFieldFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 保存监听器注入字段
|
||||
async saveListenerFiled() {
|
||||
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
if (this.editingListenerFieldIndex === -1) {
|
||||
this.fieldsListOfListener.push(this.listenerFieldForm);
|
||||
this.listenerForm.fields.push(this.listenerFieldForm);
|
||||
} else {
|
||||
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
}
|
||||
this.listenerFieldFormModelVisible = false;
|
||||
this.$nextTick(() => (this.listenerFieldForm = {}));
|
||||
},
|
||||
// 移除监听器字段
|
||||
removeListenerField(field, index) {
|
||||
this.$confirm("确认移除该字段吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.fieldsListOfListener.splice(index, 1);
|
||||
this.listenerForm.fields.splice(index, 1);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 移除监听器
|
||||
removeListener(listener, index) {
|
||||
this.$confirm("确认移除该监听器吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.bpmnElementListeners.splice(index, 1);
|
||||
this.elementListenersList.splice(index, 1);
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 保存监听器配置
|
||||
async saveListenerConfig() {
|
||||
let validateStatus = await this.$refs["listenerFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
|
||||
if (this.editingListenerIndex === -1) {
|
||||
this.bpmnElementListeners.push(listenerObject);
|
||||
this.elementListenersList.push(this.listenerForm);
|
||||
} else {
|
||||
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
|
||||
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
|
||||
}
|
||||
// 保存其他配置
|
||||
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
// 4. 隐藏侧边栏
|
||||
this.listenerFormModelVisible = false;
|
||||
this.listenerForm = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="small" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="formatterEvent" />
|
||||
<!-- <el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />-->
|
||||
<el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="formatterListener" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button link type="primary" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-button link type="danger" @click="removeListener(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="small" type="primary" :icon="Plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer
|
||||
v-model="listenerFormModelVisible"
|
||||
title="任务监听器"
|
||||
:size="`${width}px`"
|
||||
class="listener-drawer"
|
||||
append-to-body
|
||||
destroy-on-close>
|
||||
<el-form :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择事件类型' }">
|
||||
<el-select v-model="listenerForm.event" style="width: 100%">
|
||||
<el-option v-for="item in TASK_EVENT_TYPE" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择监听器类型' }">
|
||||
<el-input
|
||||
v-model="listenerForm[selectedProp]"
|
||||
clearable
|
||||
class="input-with-select">
|
||||
<template #prepend>
|
||||
<el-select v-model="listenerForm.listenerType" style="width: 100%">
|
||||
<el-option v-for="item in LISTENER_TYPE" :key="item.key" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" />
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
</el-form-item>
|
||||
<!-- 脚本类型 -->
|
||||
<!-- <template v-if="listenerForm.listenerType === LISTENER_TYPE[LISTENER_TYPE.length - 1].value">-->
|
||||
<!-- <el-form-item-->
|
||||
<!-- label="脚本格式"-->
|
||||
<!-- prop="scriptFormat"-->
|
||||
<!-- key="listener-script-format"-->
|
||||
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"-->
|
||||
<!-- >-->
|
||||
<!-- <el-input v-model="listenerForm.scriptFormat" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item-->
|
||||
<!-- label="脚本类型"-->
|
||||
<!-- prop="scriptType"-->
|
||||
<!-- key="listener-script-type"-->
|
||||
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"-->
|
||||
<!-- >-->
|
||||
<!-- <el-select v-model="listenerForm.scriptType">-->
|
||||
<!-- <el-option v-for="item in SCRIPT_TYPE" :key="item.value" :label="item.label" :value="item.value" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item-->
|
||||
<!-- v-if="listenerForm.scriptType === SCRIPT_TYPE[0].value"-->
|
||||
<!-- label="脚本内容"-->
|
||||
<!-- prop="value"-->
|
||||
<!-- key="listener-script"-->
|
||||
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"-->
|
||||
<!-- >-->
|
||||
<!-- <el-input v-model="listenerForm.value" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item-->
|
||||
<!-- v-if="listenerForm.scriptType === SCRIPT_TYPE[1].value"-->
|
||||
<!-- label="资源地址"-->
|
||||
<!-- prop="resource"-->
|
||||
<!-- key="listener-resource"-->
|
||||
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"-->
|
||||
<!-- >-->
|
||||
<!-- <el-input v-model="listenerForm.resource" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </template>-->
|
||||
<!-- 监听事件： 超时 -->
|
||||
<template v-if="listenerForm.event === TASK_EVENT_TYPE[TASK_EVENT_TYPE.length - 1].value">
|
||||
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
|
||||
<el-select v-model="listenerForm.eventDefinitionType">
|
||||
<el-option v-for="item in EVENT_DEFINITION_TYPE" :key="item.value" :value="item.value" :label="item.label" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
|
||||
label="定时器"
|
||||
prop="eventTimeDefinitions"
|
||||
key="eventTimeDefinitions"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<div class="listener-filed__title">
|
||||
<span><el-icon><Menu /></el-icon>注入字段：</span>
|
||||
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</div>
|
||||
<el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="formatterField" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button link type="primary" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-button link type="danger" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段名称' }">
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择字段类型' }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="item in FIELD_TYPE" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === FIELD_TYPE[0].value"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段值' }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === FIELD_TYPE[1].value"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写表达式' }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createListenerObject, updateElementExtensions } from "../../utils";
|
||||
import {
|
||||
initListenerForm,
|
||||
initListenerType,
|
||||
FIELD_TYPE,
|
||||
LISTENER_TYPE,
|
||||
TASK_EVENT_TYPE,
|
||||
SCRIPT_TYPE,
|
||||
EVENT_DEFINITION_TYPE
|
||||
} from "./utilSelf";
|
||||
import { Plus, Search } from '@element-plus/icons-vue'
|
||||
export default {
|
||||
name: "UserTaskListeners",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
setup() {
|
||||
return { Plus, Search }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementListenersList: [],
|
||||
listenerFormModelVisible: false,
|
||||
listenerForm: {},
|
||||
fieldsListOfListener: [],
|
||||
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
|
||||
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
|
||||
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
|
||||
listenerFieldForm: {} // 监听器 注入字段 详情表单
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.$nextTick(() => this.resetListenersList());
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
TASK_EVENT_TYPE() { return TASK_EVENT_TYPE },
|
||||
LISTENER_TYPE() { return LISTENER_TYPE },
|
||||
FIELD_TYPE() { return FIELD_TYPE },
|
||||
SCRIPT_TYPE() { return SCRIPT_TYPE },
|
||||
EVENT_DEFINITION_TYPE() { return EVENT_DEFINITION_TYPE },
|
||||
formatterEvent() {
|
||||
return (row) => {
|
||||
return TASK_EVENT_TYPE.find(find => find.value === row.event)?.label || ""
|
||||
}
|
||||
},
|
||||
formatterListener() {
|
||||
return (row) => {
|
||||
return LISTENER_TYPE.find(find => find.value === row.listener)?.label || ""
|
||||
}
|
||||
},
|
||||
formatterField() {
|
||||
return (row) => {
|
||||
return FIELD_TYPE.find(find => find.value === row.fieldType)?.label || ""
|
||||
}
|
||||
},
|
||||
selectedProp() {
|
||||
return LISTENER_TYPE.find(find => find.value === this.listenerForm.listenerType)?.prop || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetListenersList() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.otherExtensionList = [];
|
||||
this.bpmnElementListeners = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:TaskListener`) ?? [];
|
||||
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
|
||||
},
|
||||
openListenerForm(listener, index) {
|
||||
if (listener) {
|
||||
this.listenerForm = initListenerForm(listener);
|
||||
this.editingListenerIndex = index;
|
||||
} else {
|
||||
this.listenerForm = {};
|
||||
this.editingListenerIndex = -1; // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
this.fieldsListOfListener = listener.fields.map(field => ({
|
||||
...field,
|
||||
fieldType: field.string ? "string" : "expression"
|
||||
}));
|
||||
} else {
|
||||
this.fieldsListOfListener = [];
|
||||
this.listenerForm["fields"] = []
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
this.listenerFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 移除监听器
|
||||
removeListener(listener, index) {
|
||||
this.$confirm("确认移除该监听器吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.bpmnElementListeners.splice(index, 1);
|
||||
this.elementListenersList.splice(index, 1);
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 保存监听器
|
||||
async saveListenerConfig() {
|
||||
let validateStatus = await this.$refs["listenerFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
|
||||
if (this.editingListenerIndex === -1) {
|
||||
this.bpmnElementListeners.push(listenerObject);
|
||||
this.elementListenersList.push(this.listenerForm);
|
||||
} else {
|
||||
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
|
||||
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
|
||||
}
|
||||
// 保存其他配置
|
||||
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:TaskListener`) ?? [];
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
// 4. 隐藏侧边栏
|
||||
this.listenerFormModelVisible = false;
|
||||
this.listenerForm = {};
|
||||
},
|
||||
// 打开监听器字段编辑弹窗
|
||||
openListenerFieldForm(field, index) {
|
||||
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
|
||||
this.editingListenerFieldIndex = field ? index : -1;
|
||||
this.listenerFieldFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 保存监听器注入字段
|
||||
async saveListenerFiled() {
|
||||
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
if (this.editingListenerFieldIndex === -1) {
|
||||
this.fieldsListOfListener.push(this.listenerFieldForm);
|
||||
this.listenerForm.fields.push(this.listenerFieldForm);
|
||||
} else {
|
||||
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
}
|
||||
this.listenerFieldFormModelVisible = false;
|
||||
this.$nextTick(() => (this.listenerFieldForm = {}));
|
||||
},
|
||||
// 移除监听器字段
|
||||
removeListenerField(field, index) {
|
||||
this.$confirm("确认移除该字段吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.fieldsListOfListener.splice(index, 1);
|
||||
this.listenerForm.fields.splice(index, 1);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
export const template = isTaskListener => {
|
||||
return `
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="small" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="100px" prop="event" />
|
||||
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button link type="" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button link type="" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="small" type="primary" :icon="Plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer v-model="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
|
||||
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option label="start" value="start" />
|
||||
<el-option label="end" value="end" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="listener-class"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.class" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="listener-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.expression" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="listener-delegate"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
${
|
||||
isTaskListener
|
||||
? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
|
||||
"<el-select v-model='listenerForm.eventDefinitionType'>" +
|
||||
"<el-option label='日期' value='date' />" +
|
||||
"<el-option label='持续时长' value='duration' />" +
|
||||
"<el-option label='循环' value='cycle' />" +
|
||||
"<el-option label='无' value='' />" +
|
||||
'</el-select>' +
|
||||
'</el-form-item>' +
|
||||
"<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
|
||||
"<el-input v-model='listenerForm.eventDefinitions' clearable />" +
|
||||
'</el-form-item>'
|
||||
: ''
|
||||
}
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><el-icon><Menu /></el-icon>注入字段：</span>
|
||||
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button link type="" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button link type="" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
// 初始化表单数据
|
||||
export function initListenerForm(listener) {
|
||||
let self = {
|
||||
...listener
|
||||
};
|
||||
if (listener.script) {
|
||||
self = {
|
||||
...listener,
|
||||
...listener.script,
|
||||
scriptType: listener.script.resource ? "externalScript" : "inlineScript"
|
||||
};
|
||||
}
|
||||
if (listener.event === "timeout" && listener.eventDefinitions) {
|
||||
if (listener.eventDefinitions.length) {
|
||||
let k = "";
|
||||
for (let key in listener.eventDefinitions[0]) {
|
||||
console.log(listener.eventDefinitions, key);
|
||||
if (key.indexOf("time") !== -1) {
|
||||
k = key;
|
||||
self.eventDefinitionType = key.replace("time", "").toLowerCase();
|
||||
}
|
||||
}
|
||||
console.log(k);
|
||||
self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
|
||||
}
|
||||
}
|
||||
return self;
|
||||
}
|
||||
|
||||
export function initListenerType(listener) {
|
||||
let listenerType;
|
||||
if (listener.class) listenerType = "classListener";
|
||||
if (listener.expression) listenerType = "expressionListener";
|
||||
if (listener.delegateExpression) listenerType = "delegateExpressionListener";
|
||||
if (listener.script) listenerType = "scriptListener";
|
||||
return {
|
||||
...JSON.parse(JSON.stringify(listener)),
|
||||
...(listener.script ?? {}),
|
||||
listenerType: listenerType
|
||||
};
|
||||
}
|
||||
|
||||
// 监听类型
|
||||
export const LISTENER_TYPE = [
|
||||
{ label: "Java 类", value: "classListener", prop: "class", key: "listener-class" },
|
||||
{ label: "表达式", value: "expressionListener", prop: "expression", key: "listener-expression" },
|
||||
{ label: "代理表达式", value: "delegateExpressionListener", prop: "delegateExpression", key: "listener-delegate" },
|
||||
// { label: "脚本", value: "scriptListener", prop: "scriptFormat", key: "listener-script-format" },
|
||||
]
|
||||
// 脚本类型
|
||||
export const SCRIPT_TYPE = [
|
||||
{ label: "内联脚本", value: "inlineScript" },
|
||||
{ label: "外部脚本", value: "externalScript" },
|
||||
]
|
||||
// 任务监听器: 事件类型
|
||||
export const TASK_EVENT_TYPE = [
|
||||
{ label: "创建", value: "create" },
|
||||
{ label: "指派", value: "assignment" },
|
||||
{ label: "完成", value: "complete" },
|
||||
{ label: "删除", value: "delete" },
|
||||
{ label: "更新", value: "update" },
|
||||
{ label: "超时", value: "timeout" },
|
||||
]
|
||||
// 执行监听器: 事件类型
|
||||
export const EXECUTION_EVENT_TYPE = [
|
||||
{ label: "开始", value: "start" },
|
||||
{ label: "结束", value: "end" },
|
||||
]
|
||||
// 事件类型: 定时器类型
|
||||
export const EVENT_DEFINITION_TYPE = [
|
||||
{ label: "无", value: "null" },
|
||||
{ label: "日期", value: "date" },
|
||||
{ label: "持续时长", value: "duration" },
|
||||
{ label: "循环", value: "cycle" },
|
||||
]
|
||||
// 字段配置
|
||||
export const FIELD_TYPE = [
|
||||
{ label: "字符串", value: "string" },
|
||||
{ label: "表达式", value: "expression" },
|
||||
]
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="small" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="100px" prop="event" :formatter="formatterEvent" />
|
||||
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="formatterListener" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button link type="primary" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-button link type="danger" @click="removeListener(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="small" type="primary" :icon="Plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer
|
||||
v-model="listenerFormModelVisible"
|
||||
title="执行监听器"
|
||||
:size="`${width}px`"
|
||||
class="listener-drawer"
|
||||
append-to-body
|
||||
destroy-on-close>
|
||||
<el-form :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择事件类型' }">
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option v-for="item in EXECUTION_EVENT_TYPE" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择监听器类型' }">
|
||||
<el-input
|
||||
v-model="listenerForm[selectedProp]"
|
||||
clearable
|
||||
class="input-with-select">
|
||||
<template #prepend>
|
||||
<el-select v-model="listenerForm.listenerType" style="width: 100%">
|
||||
<el-option v-for="item in LISTENER_TYPE" :key="item.key" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<template v-for="item in LISTENER_TYPEWithoutJB">
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === item.value"
|
||||
:key="item.key"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm[item.prop]" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- 脚本类型 -->
|
||||
<!-- <template v-if="listenerForm.listenerType === LISTENER_TYPE[LISTENER_TYPE.length - 1].value">-->
|
||||
<!-- <el-form-item-->
|
||||
<!-- label="脚本格式"-->
|
||||
<!-- prop="scriptFormat"-->
|
||||
<!-- key="listener-script-format"-->
|
||||
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"-->
|
||||
<!-- >-->
|
||||
<!-- <el-input v-model="listenerForm.scriptFormat" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item-->
|
||||
<!-- label="脚本类型"-->
|
||||
<!-- prop="scriptType"-->
|
||||
<!-- key="listener-script-type"-->
|
||||
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"-->
|
||||
<!-- >-->
|
||||
<!-- <el-select v-model="listenerForm.scriptType">-->
|
||||
<!-- <el-option v-for="item in SCRIPT_TYPE" :key="item.value" :label="item.label" :value="item.value" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item-->
|
||||
<!-- v-if="listenerForm.scriptType === SCRIPT_TYPE[0].value"-->
|
||||
<!-- label="脚本内容"-->
|
||||
<!-- prop="value"-->
|
||||
<!-- key="listener-script"-->
|
||||
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"-->
|
||||
<!-- >-->
|
||||
<!-- <el-input v-model="listenerForm.value" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item-->
|
||||
<!-- v-if="listenerForm.scriptType === SCRIPT_TYPE[1].value"-->
|
||||
<!-- label="资源地址"-->
|
||||
<!-- prop="resource"-->
|
||||
<!-- key="listener-resource"-->
|
||||
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"-->
|
||||
<!-- >-->
|
||||
<!-- <el-input v-model="listenerForm.resource" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </template>-->
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<div class="listener-filed__title">
|
||||
<span><el-icon><Menu /></el-icon>注入字段：</span>
|
||||
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</div>
|
||||
<el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="formatterField" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button link type="primary" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-button link type="danger" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段名称' }">
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择字段类型' }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="item in FIELD_TYPE" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === FIELD_TYPE[0].value"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段值' }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === FIELD_TYPE[1].value"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写表达式' }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createListenerObject, updateElementExtensions } from "../../utils";
|
||||
import {
|
||||
initListenerType,
|
||||
initListenerForm,
|
||||
EXECUTION_EVENT_TYPE,
|
||||
LISTENER_TYPE,
|
||||
FIELD_TYPE,
|
||||
SCRIPT_TYPE,
|
||||
EVENT_DEFINITION_TYPE
|
||||
} from "./utilSelf";
|
||||
import { Plus, Search } from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
name: "ElementListeners",
|
||||
setup() {
|
||||
return { Plus, Search }
|
||||
},
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementListenersList: [], // 监听器列表
|
||||
listenerForm: {}, // 监听器详情表单
|
||||
listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
|
||||
fieldsListOfListener: [],
|
||||
listenerFieldForm: {}, // 监听器 注入字段 详情表单
|
||||
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
|
||||
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
|
||||
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.$nextTick(() => this.resetListenersList());
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
EXECUTION_EVENT_TYPE() { return EXECUTION_EVENT_TYPE },
|
||||
LISTENER_TYPE() { return LISTENER_TYPE },
|
||||
FIELD_TYPE() { return FIELD_TYPE },
|
||||
SCRIPT_TYPE() { return SCRIPT_TYPE },
|
||||
EVENT_DEFINITION_TYPE() { return EVENT_DEFINITION_TYPE },
|
||||
formatterEvent() {
|
||||
return (row) => {
|
||||
return EXECUTION_EVENT_TYPE.find(find => find.value === row.event)?.label || ""
|
||||
}
|
||||
},
|
||||
formatterListener() {
|
||||
return (row) => {
|
||||
return LISTENER_TYPE.find(find => find.value === row.listener)?.label || ""
|
||||
}
|
||||
},
|
||||
formatterField() {
|
||||
return (row) => {
|
||||
return FIELD_TYPE.find(find => find.value === row.fieldType)?.label || ""
|
||||
}
|
||||
},
|
||||
selectedProp() {
|
||||
return LISTENER_TYPE.find(find => find.value === this.listenerForm.listenerType)?.prop || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetListenersList() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.otherExtensionList = [];
|
||||
this.bpmnElementListeners =
|
||||
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
|
||||
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
|
||||
},
|
||||
// 打开 监听器详情 侧边栏
|
||||
openListenerForm(listener, index) {
|
||||
if (listener) {
|
||||
this.listenerForm = initListenerForm(listener);
|
||||
this.editingListenerIndex = index;
|
||||
} else {
|
||||
this.listenerForm = {};
|
||||
this.editingListenerIndex = -1; // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
this.fieldsListOfListener = listener.fields.map(field => ({
|
||||
...field,
|
||||
fieldType: field.string ? "string" : "expression"
|
||||
}));
|
||||
} else {
|
||||
this.fieldsListOfListener = [];
|
||||
this.listenerForm["fields"] = []
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
this.listenerFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 打开监听器字段编辑弹窗
|
||||
openListenerFieldForm(field, index) {
|
||||
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
|
||||
this.editingListenerFieldIndex = field ? index : -1;
|
||||
this.listenerFieldFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 保存监听器注入字段
|
||||
async saveListenerFiled() {
|
||||
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
if (this.editingListenerFieldIndex === -1) {
|
||||
this.fieldsListOfListener.push(this.listenerFieldForm);
|
||||
this.listenerForm.fields.push(this.listenerFieldForm);
|
||||
} else {
|
||||
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
}
|
||||
this.listenerFieldFormModelVisible = false;
|
||||
this.$nextTick(() => (this.listenerFieldForm = {}));
|
||||
},
|
||||
// 移除监听器字段
|
||||
removeListenerField(field, index) {
|
||||
this.$confirm("确认移除该字段吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.fieldsListOfListener.splice(index, 1);
|
||||
this.listenerForm.fields.splice(index, 1);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 移除监听器
|
||||
removeListener(listener, index) {
|
||||
this.$confirm("确认移除该监听器吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.bpmnElementListeners.splice(index, 1);
|
||||
this.elementListenersList.splice(index, 1);
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 保存监听器配置
|
||||
async saveListenerConfig() {
|
||||
let validateStatus = await this.$refs["listenerFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
|
||||
if (this.editingListenerIndex === -1) {
|
||||
this.bpmnElementListeners.push(listenerObject);
|
||||
this.elementListenersList.push(this.listenerForm);
|
||||
} else {
|
||||
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
|
||||
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
|
||||
}
|
||||
// 保存其他配置
|
||||
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
// 4. 隐藏侧边栏
|
||||
this.listenerFormModelVisible = false;
|
||||
this.listenerForm = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<div class="element-property input-property">
|
||||
<div class="element-property__label">元素文档：</div>
|
||||
<div class="element-property__value">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="documentation"
|
||||
size="small"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
@input="updateDocumentation"
|
||||
@blur="updateDocumentation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementOtherConfig",
|
||||
props: {
|
||||
id: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
documentation: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler: function(id) {
|
||||
if (id && id.length) {
|
||||
this.$nextTick(() => {
|
||||
const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
|
||||
this.documentation = documentations && documentations.length ? documentations[0].text : "";
|
||||
});
|
||||
} else {
|
||||
this.documentation = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateDocumentation() {
|
||||
(this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
|
||||
const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: this.documentation });
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
documentation: [documentation]
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementPropertyList" size="small" max-height="240" border fit>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
|
||||
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button link type="" @click="openAttributesForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button link type="" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="small" type="primary" :icon="Plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="propertyForm" label-width="80px" size="small" ref="attributeFormRef" @submit.prevent>
|
||||
<el-form-item label="属性名：" prop="name">
|
||||
<el-input v-model="propertyForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="属性值：" prop="value">
|
||||
<el-input v-model="propertyForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button size="small" @click="propertyFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveAttribute">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
export default {
|
||||
name: "ElementProperties",
|
||||
setup() {
|
||||
return {
|
||||
Plus
|
||||
}
|
||||
},
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementPropertyList: [],
|
||||
propertyForm: {},
|
||||
editingPropertyIndex: -1,
|
||||
propertyFormModelVisible: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.resetAttributesList();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetAttributesList() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.otherExtensionList = []; // 其他扩展配置
|
||||
this.bpmnElementProperties =
|
||||
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
|
||||
if (ex.$type !== `${this.prefix}:Properties`) {
|
||||
this.otherExtensionList.push(ex);
|
||||
}
|
||||
return ex.$type === `${this.prefix}:Properties`;
|
||||
}) ?? [];
|
||||
|
||||
// 保存所有的 扩展属性字段
|
||||
this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
|
||||
// 复制 显示
|
||||
this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
|
||||
},
|
||||
openAttributesForm(attr, index) {
|
||||
this.editingPropertyIndex = index;
|
||||
this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
|
||||
this.propertyFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
removeAttributes(attr, index) {
|
||||
this.$confirm("确认移除该属性吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.elementPropertyList.splice(index, 1);
|
||||
this.bpmnElementPropertyList.splice(index, 1);
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||
values: this.bpmnElementPropertyList
|
||||
});
|
||||
this.updateElementExtensions(propertiesObject);
|
||||
this.resetAttributesList();
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
saveAttribute() {
|
||||
const { name, value } = this.propertyForm;
|
||||
console.log(this.bpmnElementPropertyList);
|
||||
if (this.editingPropertyIndex !== -1) {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
|
||||
name,
|
||||
value
|
||||
});
|
||||
} else {
|
||||
// 新建属性字段
|
||||
const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||
values: this.bpmnElementPropertyList.concat([newPropertyObject])
|
||||
});
|
||||
this.updateElementExtensions(propertiesObject);
|
||||
}
|
||||
this.propertyFormModelVisible = false;
|
||||
this.resetAttributesList();
|
||||
},
|
||||
updateElementExtensions(properties) {
|
||||
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
|
||||
values: this.otherExtensionList.concat([properties])
|
||||
});
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
extensionElements: extensions
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<div class="panel-tab__content--title">
|
||||
<span><el-icon style="margin-right: 8px; color: #555555"><Menu /></el-icon>消息列表</span>
|
||||
<el-button size="small" type="primary" :icon="Plus" @click="openModel('message')">创建新消息</el-button>
|
||||
</div>
|
||||
<el-table :data="messageList" size="small" border>
|
||||
<el-table-column type="index" label="序号" width="60px" />
|
||||
<el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
|
||||
<span><el-icon style="margin-right: 8px; color: #555555"><Menu /></el-icon>信号列表</span>
|
||||
<el-button size="small" type="primary" :icon="Plus" @click="openModel('signal')">创建新信号</el-button>
|
||||
</div>
|
||||
<el-table :data="signalList" size="small" border>
|
||||
<el-table-column type="index" label="序号" width="60px" />
|
||||
<el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="modelVisible" :title="modelConfig.title" :close-on-click-modal="false" width="400px" append-to-body destroy-on-close>
|
||||
<el-form :model="modelObjectForm" size="small" label-width="90px" @submit.prevent>
|
||||
<el-form-item :label="modelConfig.idLabel">
|
||||
<el-input v-model="modelObjectForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="modelConfig.nameLabel">
|
||||
<el-input v-model="modelObjectForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button size="small" @click="modelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addNewObject">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
export default {
|
||||
name: 'SignalAndMassage',
|
||||
setup() {
|
||||
return {
|
||||
Plus
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
signalList: [],
|
||||
messageList: [],
|
||||
modelVisible: false,
|
||||
modelType: '',
|
||||
modelObjectForm: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
modelConfig() {
|
||||
if (this.modelType === 'message') {
|
||||
return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' };
|
||||
} else {
|
||||
return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' };
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initDataList();
|
||||
},
|
||||
methods: {
|
||||
initDataList() {
|
||||
this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
|
||||
this.messageIdMap = {};
|
||||
this.signalIdMap = {};
|
||||
this.messageList = [];
|
||||
this.signalList = [];
|
||||
this.rootElements.forEach(el => {
|
||||
if (el.$type === 'bpmn:Message') {
|
||||
this.messageIdMap[el.id] = true;
|
||||
this.messageList.push({ ...el });
|
||||
}
|
||||
if (el.$type === 'bpmn:Signal') {
|
||||
this.signalIdMap[el.id] = true;
|
||||
this.signalList.push({ ...el });
|
||||
}
|
||||
});
|
||||
},
|
||||
openModel(type) {
|
||||
this.modelType = type;
|
||||
this.modelObjectForm = {};
|
||||
this.modelVisible = true;
|
||||
},
|
||||
addNewObject() {
|
||||
if (this.modelType === 'message') {
|
||||
if (this.messageIdMap[this.modelObjectForm.id]) {
|
||||
return this.$message.error('该消息已存在，请修改id后重新保存');
|
||||
}
|
||||
const messageRef = window.bpmnInstances.moddle.create('bpmn:Message', this.modelObjectForm);
|
||||
this.rootElements.push(messageRef);
|
||||
} else {
|
||||
if (this.signalIdMap[this.modelObjectForm.id]) {
|
||||
return this.$message.error('该信号已存在，请修改id后重新保存');
|
||||
}
|
||||
const signalRef = window.bpmnInstances.moddle.create('bpmn:Signal', this.modelObjectForm);
|
||||
this.rootElements.push(signalRef);
|
||||
}
|
||||
this.modelVisible = false;
|
||||
this.initDataList();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="small" label-width="90px" @submit.prevent>
|
||||
<!-- <el-form-item label="异步延续">-->
|
||||
<!-- <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
|
||||
<!-- <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
|
||||
<!-- <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<component :is="witchTaskComponent" v-bind="$props" />
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserTask from "./task-components/UserTask";
|
||||
import ScriptTask from "./task-components/ScriptTask";
|
||||
import ReceiveTask from "./task-components/ReceiveTask";
|
||||
|
||||
export default {
|
||||
name: "ElementTaskConfig",
|
||||
components: { UserTask, ScriptTask, ReceiveTask },
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
taskConfigForm: {
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false
|
||||
},
|
||||
witchTaskComponent: "",
|
||||
installedComponent: {
|
||||
// 手工任务与普通任务一致，不需要其他配置
|
||||
// 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
|
||||
// 发送任务、服务任务、业务规则任务共用一个相同配置
|
||||
UserTask: "UserTask", // 用户任务配置
|
||||
ScriptTask: "ScriptTask", // 脚本任务配置
|
||||
ReceiveTask: "ReceiveTask" // 消息接收任务
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
// this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
|
||||
// this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
|
||||
// this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
|
||||
}
|
||||
},
|
||||
type: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.witchTaskComponent = this.installedComponent[this.$props.type];
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTaskAsync() {
|
||||
if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
|
||||
this.taskConfigForm.exclusive = false;
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
|
||||
...this.taskConfigForm
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="消息实例">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
|
||||
<el-select v-model="bindMessageId" @change="updateTaskMessage">
|
||||
<el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
|
||||
</el-select>
|
||||
<el-button size="small" type="primary" :icon="Plus" style="margin-left: 8px" @click="openMessageModel" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-dialog v-model="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
|
||||
<el-form :model="newMessageForm" size="small" label-width="90px" @submit.prevent>
|
||||
<el-form-item label="消息ID">
|
||||
<el-input v-model="newMessageForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="消息名称">
|
||||
<el-input v-model="newMessageForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
export default {
|
||||
name: "ReceiveTask",
|
||||
setup() {
|
||||
return {
|
||||
Plus
|
||||
}
|
||||
},
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bindMessageId: "",
|
||||
newMessageForm: {},
|
||||
messageMap: {},
|
||||
messageModelVisible: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.$nextTick(() => this.getBindMessage());
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.bpmnMessageRefsMap = Object.create(null);
|
||||
this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
|
||||
this.bpmnRootElements
|
||||
.filter(el => el.$type === "bpmn:Message")
|
||||
.forEach(m => {
|
||||
this.bpmnMessageRefsMap[m.id] = m;
|
||||
this.messageMap[m.id] = m.name
|
||||
});
|
||||
this.messageMap["-1"] = "无" // 添加一个空对象，保证可以取消原消息绑定
|
||||
},
|
||||
methods: {
|
||||
getBindMessage() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || "-1";
|
||||
},
|
||||
openMessageModel() {
|
||||
this.messageModelVisible = true;
|
||||
this.newMessageForm = {};
|
||||
},
|
||||
createNewMessage() {
|
||||
if (this.messageMap[this.newMessageForm.id]) {
|
||||
this.$message.error("该消息已存在，请修改id后重新保存");
|
||||
return;
|
||||
}
|
||||
const newMessage = window.bpmnInstances.moddle.create("bpmn:Message", this.newMessageForm);
|
||||
this.bpmnRootElements.push(newMessage);
|
||||
this.messageMap[this.newMessageForm.id] = this.newMessageForm.name
|
||||
this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
|
||||
this.messageModelVisible = false;
|
||||
},
|
||||
updateTaskMessage(messageId) {
|
||||
if (messageId === "-1") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
messageRef: null
|
||||
});
|
||||
} else {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
messageRef: this.bpmnMessageRefsMap[messageId]
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="脚本格式">
|
||||
<el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型">
|
||||
<el-select v-model="scriptTaskForm.scriptType">
|
||||
<el-option label="内联脚本" value="inline" />
|
||||
<el-option label="外部资源" value="external" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.script"
|
||||
type="textarea"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
|
||||
<el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结果变量">
|
||||
<el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ScriptTask",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultTaskForm: {
|
||||
scriptFormat: "",
|
||||
script: "",
|
||||
resource: "",
|
||||
resultVariable: ""
|
||||
},
|
||||
scriptTaskForm: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.$nextTick(() => this.resetTaskForm());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetTaskForm() {
|
||||
for (let key in this.defaultTaskForm) {
|
||||
let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
|
||||
this.scriptTaskForm[key] = value
|
||||
}
|
||||
this.scriptTaskForm["scriptType"] = this.scriptTaskForm.script ? "inline" : "external"
|
||||
},
|
||||
updateElementTask() {
|
||||
let taskAttr = Object.create(null);
|
||||
taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
|
||||
taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
|
||||
if (this.scriptTaskForm.scriptType === "inline") {
|
||||
taskAttr.script = this.scriptTaskForm.script || null;
|
||||
taskAttr.resource = null;
|
||||
} else {
|
||||
taskAttr.resource = this.scriptTaskForm.resource || null;
|
||||
taskAttr.script = null;
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,666 @@
|
|||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-row>
|
||||
<h4 class="mb-10 fw-700">审批人设置</h4>
|
||||
<el-radio-group v-model="dataType" @change="changeDataType">
|
||||
<el-radio
|
||||
v-for="item in USER_TASK_GROUP"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
>{{item.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" v-if="dataType === USER_TASK_GROUP[0].value">
|
||||
<el-tag v-for="userText in selectedUser.text" :key="userText" effect="plain" closable @close="handleClose(userText)">
|
||||
{{userText}}
|
||||
</el-tag>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="default" type="primary" :icon="Plus" @click="onSelectUsers()">添加用户</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24" v-else-if="dataType === USER_TASK_GROUP[1].value">
|
||||
<el-select v-model="roleIds" multiple size="default" placeholder="请选择角色" @change="changeSelectRoles" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.roleId"
|
||||
:label="item.roleName"
|
||||
:value="`ROLE${item.roleId}`"
|
||||
:disabled="item.status === 1">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="24" v-else-if="dataType === USER_TASK_GROUP[2].value">
|
||||
<TreeSelect
|
||||
size="small"
|
||||
:options="deptTreeData"
|
||||
:objMap="deptProps"
|
||||
multiple
|
||||
clearable
|
||||
checkStrictly
|
||||
nodeKey="id"
|
||||
:selectValue="deptIds"
|
||||
collapseTags
|
||||
@change="checkedDeptChange">
|
||||
</TreeSelect>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" v-show="showMultiFlog">
|
||||
<el-divider />
|
||||
<h4><b>多实例审批方式</b></h4>
|
||||
<el-row>
|
||||
<el-radio-group v-model="multiLoopType" @change="changeMultiLoopType()" class="flex-column radio-group-flex">
|
||||
<el-row v-for="item in MULTI_INSTANCE_TYPE" :key="item.value">
|
||||
<el-radio :label="item.value">{{item.label}}</el-radio>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row v-if="multiLoopType !== MULTI_INSTANCE_TYPE[0].value">
|
||||
<el-tooltip content="开启后，实例需按顺序轮流审批" placement="top-start" @click.stop.prevent>
|
||||
<el-icon><InfoFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
<span class="custom-label">顺序审批：</span>
|
||||
<el-switch v-model="isSequential" @change="changeMultiLoopType()" />
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 候选用户弹窗 -->
|
||||
<el-dialog title="候选用户" v-model="userOpen" width="60%" append-to-body>
|
||||
<el-row type="flex" :gutter="20">
|
||||
<!--部门数据-->
|
||||
<el-col :span="7">
|
||||
<el-card shadow="never" style="height: 100%">
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="deptName"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
size="small"
|
||||
:prefix-icon="Search"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
<el-tree
|
||||
:data="deptOptions"
|
||||
:props="deptProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
ref="deptTree"
|
||||
:default-expand-all="false"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
@current-change="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="用户名称" prop="nickName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Search"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button>
|
||||
<el-button
|
||||
:icon="Refresh"
|
||||
@click="resetQuery"
|
||||
>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
height="600"
|
||||
v-loading="tableLoading"
|
||||
:data="userTableList"
|
||||
border
|
||||
@row-click="clickRow"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="用户名" align="center" prop="nickName" />
|
||||
<el-table-column label="部门" align="center" prop="dept.deptName" />
|
||||
</el-table>
|
||||
<pagination
|
||||
:total="userTotal"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer class="dialog-footer">
|
||||
<el-button type="primary" size="default" @click="handleTaskUserComplete">确 定</el-button>
|
||||
<el-button size="default" @click="userOpen = false">取 消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listUser, deptTreeSelect } from "@/api/system/user";
|
||||
import { listRole } from "@/api/system/role";
|
||||
import TreeSelect from "@/components/TreeSelect/index";
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { uniqBy } from 'lodash'
|
||||
|
||||
const USER_TASK_GROUP = [
|
||||
{
|
||||
label: "指定用户",
|
||||
value: "USERS",
|
||||
},
|
||||
{
|
||||
label: "角色",
|
||||
value: "ROLES",
|
||||
},
|
||||
{
|
||||
label: "部门",
|
||||
value: "DEPTS",
|
||||
},
|
||||
{
|
||||
label: "发起人",
|
||||
value: "INITIATOR",
|
||||
},
|
||||
]
|
||||
const USER_TASK_FORM = {
|
||||
dataType: '',
|
||||
assignee: '',
|
||||
candidateUsers: '',
|
||||
candidateGroups: '',
|
||||
text: '',
|
||||
deptId: '',
|
||||
// dueDate: '',
|
||||
// followUpDate: '',
|
||||
// priority: ''
|
||||
}
|
||||
const MULTI_INSTANCE_TYPE = [
|
||||
{ label: "无", value: 'Null' },
|
||||
{ label: "会签（需所有审批人同意）", value: 'SequentialMultiInstance' },
|
||||
{ label: "或签（一名审批人同意即可）", value: 'ParallelMultiInstance' },
|
||||
{ label: "自定义", value: 'DiyMultiInstance' },
|
||||
]
|
||||
export default {
|
||||
name: "UserTask",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
components: { TreeSelect },
|
||||
setup() {
|
||||
return { Plus, Search, Refresh }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableLoading: false,
|
||||
dataType: USER_TASK_GROUP[0].value,
|
||||
selectedUser: {
|
||||
ids: [],
|
||||
text: []
|
||||
},
|
||||
userOpen: false,
|
||||
deptName: undefined,
|
||||
deptOptions: [], //部门列表
|
||||
deptProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
value: 'id'
|
||||
},
|
||||
userTableList: [],
|
||||
userTotal: 0,
|
||||
selectedUserDate: [],
|
||||
roleOptions: [],
|
||||
roleIds: [],
|
||||
deptTreeData: [],
|
||||
deptIds: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
deptId: undefined,
|
||||
nickName: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
showMultiFlog: false,
|
||||
isSequential: false,
|
||||
multiLoopType: MULTI_INSTANCE_TYPE[0].value,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.$nextTick(() => this.resetTaskForm());
|
||||
}
|
||||
},
|
||||
// 根据名称筛选部门树
|
||||
deptName(val) {
|
||||
this.$refs.deptTree.filter(val);
|
||||
},
|
||||
userTableList: {
|
||||
handler(tableList) {
|
||||
if(tableList.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if(!!USER_TASK_FORM.assignee) {
|
||||
//单选用户
|
||||
const findObj = tableList.find(item => item.userId === USER_TASK_FORM.assignee)
|
||||
this.selectedUserDate = [findObj]
|
||||
} else if (!!USER_TASK_FORM.candidateUsers) {
|
||||
this.selectedUserDate = USER_TASK_FORM.candidateUsers?.split(',')?.map(Id => {
|
||||
const findObj = tableList.find(item => item.userId === Id)
|
||||
return {...findObj}
|
||||
}) || []
|
||||
}
|
||||
// console.log('this.selectedUserDate', this.selectedUserDate);
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
USER_TASK_GROUP() { return USER_TASK_GROUP },
|
||||
MULTI_INSTANCE_TYPE() { return MULTI_INSTANCE_TYPE }
|
||||
},
|
||||
methods: {
|
||||
// 初始化变量
|
||||
async resetTaskForm() {
|
||||
const bpmnElementObj = this.bpmnElement?.businessObject;
|
||||
if (!bpmnElementObj) {
|
||||
return;
|
||||
}
|
||||
this.clearOptionsData()
|
||||
this.dataType = bpmnElementObj.dataType;
|
||||
if (this.dataType === USER_TASK_GROUP[0].value) {
|
||||
let userIdData = bpmnElementObj['candidateUsers'] || bpmnElementObj['assignee'];
|
||||
let userText = bpmnElementObj.text || [];
|
||||
if (userIdData && userIdData.toString().length > 0 && userText && userText.length > 0) {
|
||||
this.selectedUser.ids = userIdData?.toString().split(',');
|
||||
this.selectedUser.text = userText?.split(',');
|
||||
}
|
||||
if (this.selectedUser.ids.length > 1) {
|
||||
this.showMultiFlog = true;
|
||||
}
|
||||
} else if (this.dataType === USER_TASK_GROUP[1].value) {
|
||||
// 获取角色列表
|
||||
this.getRoleOptions();
|
||||
let roleIdData = bpmnElementObj['candidateGroups'] || [];
|
||||
if (roleIdData && roleIdData.length > 0) {
|
||||
this.roleIds = roleIdData.split(',')
|
||||
}
|
||||
this.showMultiFlog = true;
|
||||
} else if (this.dataType === USER_TASK_GROUP[2].value) {
|
||||
// 获取部门列表
|
||||
await this.getDeptTreeData();
|
||||
let deptIdData = bpmnElementObj['candidateGroups'] || [];
|
||||
if (deptIdData && deptIdData.length > 0) {
|
||||
this.deptIds = deptIdData.split(',');
|
||||
// 回显
|
||||
this.checkedDeptChange(this.deptIds);
|
||||
}
|
||||
this.showMultiFlog = true;
|
||||
}
|
||||
this.getElementLoop(bpmnElementObj);
|
||||
},
|
||||
// 清空选项数据
|
||||
clearOptionsData() {
|
||||
this.selectedUser.ids = [];
|
||||
this.selectedUser.text = [];
|
||||
this.roleIds = [];
|
||||
this.deptIds = [];
|
||||
},
|
||||
// 更新节点数据
|
||||
updateElementTask() {
|
||||
const taskObj = Object.assign({}, { ...USER_TASK_FORM })
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskObj);
|
||||
// console.log('updateElementTask', this.bpmnElement?.businessObject);
|
||||
},
|
||||
// 查询部门下拉树结构
|
||||
getDeptOptions() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.deptOptions || this.deptOptions.length <= 0) {
|
||||
// 选择部门树 数据第一次请求
|
||||
deptTreeSelect().then(response => {
|
||||
this.deptOptions = [].concat(
|
||||
[{ id: '', label: '全部', children: [] }],
|
||||
[...response.data]
|
||||
);
|
||||
this.handleNodeClick(this.deptOptions[0])
|
||||
resolve()
|
||||
})
|
||||
} else {
|
||||
// 确保选择部门树已初始化 但仍请求表格数据 复选框回显
|
||||
this.handleNodeClick(this.deptOptions[0])
|
||||
}
|
||||
});
|
||||
},
|
||||
// 查询部门下拉树结构（含部门前缀）
|
||||
getDeptTreeData() {
|
||||
function refactorTree(data) {
|
||||
return data.map(node => {
|
||||
let treeData = { id: `DEPT${node.id}`, label: node.label, parentId: node.parentId, weight: node.weight };
|
||||
if (node.children && node.children.length > 0) {
|
||||
treeData.children = refactorTree(node.children);
|
||||
}
|
||||
return treeData;
|
||||
});
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.deptTreeData || this.deptTreeData.length <= 0) {
|
||||
deptTreeSelect().then((res) => {
|
||||
this.deptTreeData = refactorTree(res.data);
|
||||
resolve()
|
||||
}).catch(() => {
|
||||
reject()
|
||||
})
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 查询部门下拉树结构
|
||||
getRoleOptions() {
|
||||
if (!this.roleOptions || this.roleOptions.length <= 0) {
|
||||
listRole().then(response => this.roleOptions = response.rows);
|
||||
}
|
||||
},
|
||||
// 查询用户列表
|
||||
getList() {
|
||||
this.tableLoading = true
|
||||
listUser({ ...this.queryParams }).then(response => {
|
||||
this.userTableList = response.rows;
|
||||
this.userTotal = response.total;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.selectedUserDate?.forEach(each => {
|
||||
const findObj = this.userTableList.find(find => find.userId === each.userId) || {}
|
||||
if(Object.keys(findObj).length > 0) {
|
||||
this.$refs.multipleTable.toggleRowSelection(findObj)
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
})
|
||||
}).finally(() => {
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.$refs.queryForm.resetFields();
|
||||
this.$refs.queryForm.clearValidate();
|
||||
this.queryParams = {
|
||||
deptId: '',
|
||||
nickName: undefined,
|
||||
pageSize: 20
|
||||
};
|
||||
this.handleQuery();
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
// 节点单击事件
|
||||
handleNodeClick(data) {
|
||||
this.queryParams.deptId = data.id;
|
||||
this.handleQuery();
|
||||
},
|
||||
// 关闭标签
|
||||
handleClose(tag) {
|
||||
this.selectedUserDate.splice(this.selectedUserDate.indexOf(tag), 1);
|
||||
this.handleTaskUserChange()
|
||||
},
|
||||
/**
|
||||
* 选择行
|
||||
*/
|
||||
clickRow(row) {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
if(selection.length) {
|
||||
const concatData = [].concat(selection, this.selectedUserDate);
|
||||
this.selectedUserDate = uniqBy(concatData, 'userId');
|
||||
}
|
||||
},
|
||||
// 添加用户
|
||||
onSelectUsers() {
|
||||
this.$refs.multipleTable?.clearSelection();
|
||||
this.getDeptOptions()
|
||||
this.userOpen = true;
|
||||
},
|
||||
// 添加用户-确认按钮
|
||||
handleTaskUserComplete() {
|
||||
if (!this.selectedUserDate || this.selectedUserDate.length <= 0) {
|
||||
this.$modal.msgError('请选择用户');
|
||||
return;
|
||||
}
|
||||
USER_TASK_FORM.dataType = USER_TASK_GROUP[0].value;
|
||||
USER_TASK_FORM.deptId = this.queryParams.deptId;
|
||||
this.handleTaskUserChange()
|
||||
this.changeMultiLoopType();
|
||||
this.userOpen = false;
|
||||
},
|
||||
// 指定用户改变确定
|
||||
handleTaskUserChange() {
|
||||
this.selectedUser.text = this.selectedUserDate.map(item => item.nickName) || [];
|
||||
if (this.selectedUserDate.length === 1) {
|
||||
let data = this.selectedUserDate[0];
|
||||
USER_TASK_FORM.assignee = data.userId;
|
||||
USER_TASK_FORM.text = data.nickName;
|
||||
USER_TASK_FORM.candidateUsers = null;
|
||||
this.showMultiFlog = false;
|
||||
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
|
||||
} else {
|
||||
USER_TASK_FORM.candidateUsers = this.selectedUserDate.map(item => item.userId).join() || null;
|
||||
USER_TASK_FORM.text = this.selectedUserDate.map(item => item.nickName).join() || null;
|
||||
USER_TASK_FORM.assignee = null;
|
||||
this.showMultiFlog = true;
|
||||
}
|
||||
this.updateElementTask();
|
||||
},
|
||||
// 选中角色
|
||||
changeSelectRoles(roleArray) {
|
||||
let groups = null;
|
||||
let text = null;
|
||||
if (roleArray && roleArray.length > 0) {
|
||||
USER_TASK_FORM.dataType = USER_TASK_GROUP[1].value;
|
||||
groups = roleArray.join() || null;
|
||||
let textArr = this.roleOptions.filter(k => roleArray.indexOf(`ROLE${k.roleId}`) >= 0);
|
||||
text = textArr?.map(k => k.roleName).join() || null;
|
||||
} else {
|
||||
USER_TASK_FORM.dataType = null;
|
||||
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
|
||||
}
|
||||
USER_TASK_FORM.candidateGroups = groups;
|
||||
USER_TASK_FORM.text = text;
|
||||
this.updateElementTask();
|
||||
this.changeMultiLoopType();
|
||||
},
|
||||
// 选中部门
|
||||
checkedDeptChange(deptArray) {
|
||||
let groups = null;
|
||||
let text = null;
|
||||
this.deptIds = deptArray;
|
||||
if (deptArray && deptArray.length > 0) {
|
||||
USER_TASK_FORM.dataType = USER_TASK_GROUP[2].value;
|
||||
groups = deptArray.join(',') || null;
|
||||
let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
|
||||
const filterData = treeStarkData?.filter(item => {
|
||||
return deptArray.includes(item.id)
|
||||
})
|
||||
text = filterData?.map(item => item.label).join(',') || null
|
||||
} else {
|
||||
USER_TASK_FORM.dataType = null;
|
||||
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
|
||||
}
|
||||
USER_TASK_FORM.candidateGroups = groups;
|
||||
USER_TASK_FORM.text = text;
|
||||
this.updateElementTask();
|
||||
this.changeMultiLoopType();
|
||||
},
|
||||
// 修改审批人类型
|
||||
changeDataType(val) {
|
||||
if (val === USER_TASK_GROUP[1].value || val === USER_TASK_GROUP[2].value || (val === USER_TASK_GROUP[0].value && this.selectedUser.ids.length > 1)) {
|
||||
this.showMultiFlog = true;
|
||||
} else {
|
||||
this.showMultiFlog = false;
|
||||
}
|
||||
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
|
||||
this.changeMultiLoopType();
|
||||
// 清空 USER_TASK_FORM 所有属性值
|
||||
Object.keys(USER_TASK_FORM).forEach(key => USER_TASK_FORM[key] = null);
|
||||
USER_TASK_FORM.dataType = val;
|
||||
if (val === USER_TASK_GROUP[0].value) {
|
||||
if (this.selectedUser && this.selectedUser.ids && this.selectedUser.ids.length > 0) {
|
||||
if (this.selectedUser.ids.length === 1) {
|
||||
USER_TASK_FORM.assignee = this.selectedUser.ids[0];
|
||||
} else {
|
||||
USER_TASK_FORM.candidateUsers = this.selectedUser.ids.join()
|
||||
}
|
||||
USER_TASK_FORM.text = this.selectedUser.text?.join() || null
|
||||
}
|
||||
} else if (val === USER_TASK_GROUP[1].value) {
|
||||
this.getRoleOptions();
|
||||
if (this.roleIds && this.roleIds.length > 0) {
|
||||
USER_TASK_FORM.candidateGroups = this.roleIds.join() || null;
|
||||
let textArr = this.roleOptions.filter(k => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0);
|
||||
USER_TASK_FORM.text = textArr?.map(k => k.roleName).join() || null;
|
||||
}
|
||||
} else if (val === USER_TASK_GROUP[2].value) {
|
||||
this.getDeptTreeData();
|
||||
if (this.deptIds && this.deptIds.length > 0) {
|
||||
USER_TASK_FORM.candidateGroups = this.deptIds.join() || null;
|
||||
let textArr = []
|
||||
let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
|
||||
this.deptIds.forEach(id => {
|
||||
let stark = []
|
||||
stark = stark.concat(treeStarkData);
|
||||
while(stark.length) {
|
||||
let temp = stark.shift();
|
||||
if(temp.children) {
|
||||
stark = temp.children.concat(stark);
|
||||
}
|
||||
if(id === temp.id) {
|
||||
textArr.push(temp);
|
||||
}
|
||||
}
|
||||
})
|
||||
USER_TASK_FORM.text = textArr?.map(k => k.label).join() || null;
|
||||
}
|
||||
} else {
|
||||
USER_TASK_FORM.assignee = "${initiator}";
|
||||
USER_TASK_FORM.text = "流程发起人";
|
||||
}
|
||||
this.updateElementTask();
|
||||
},
|
||||
// 初始化多实例变量
|
||||
getElementLoop(businessObject) {
|
||||
if (!businessObject.loopCharacteristics) {
|
||||
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
|
||||
return;
|
||||
}
|
||||
this.isSequential = businessObject.loopCharacteristics.isSequential;
|
||||
if (businessObject.loopCharacteristics.completionCondition) {
|
||||
if (businessObject.loopCharacteristics.completionCondition.body === "${nrOfCompletedInstances >= nrOfInstances}") {
|
||||
this.multiLoopType = MULTI_INSTANCE_TYPE[1].value; // 会签
|
||||
} else if (businessObject.loopCharacteristics.completionCondition.body === "${nrOfCompletedInstances >= 0}") {
|
||||
this.multiLoopType = MULTI_INSTANCE_TYPE[2].value; // 或签
|
||||
} else {
|
||||
this.multiLoopType = MULTI_INSTANCE_TYPE[3].value; // 自定义
|
||||
}
|
||||
}
|
||||
},
|
||||
// 更新多实例变量
|
||||
changeMultiLoopType() {
|
||||
// 取消多实例配置
|
||||
if (this.multiLoopType === MULTI_INSTANCE_TYPE[0].value) {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null, assignee: null });
|
||||
return;
|
||||
}
|
||||
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: this.isSequential });
|
||||
// 更新多实例配置
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
loopCharacteristics: this.multiLoopInstance,
|
||||
assignee: '${assignee}'
|
||||
});
|
||||
// 设置审批人
|
||||
USER_TASK_FORM.assignee = '${assignee}';
|
||||
// 完成条件
|
||||
let completionCondition = null;
|
||||
switch (this.multiLoopType) {
|
||||
case MULTI_INSTANCE_TYPE[1].value:
|
||||
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances >= nrOfInstances}" });
|
||||
break;
|
||||
case MULTI_INSTANCE_TYPE[2].value:
|
||||
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances > 0}" });
|
||||
break;
|
||||
default:
|
||||
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "" });
|
||||
break;
|
||||
}
|
||||
// 更新模块属性信息
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
|
||||
collection: MULTI_INSTANCE_TYPE[1].value || MULTI_INSTANCE_TYPE[2].value ? '${multiInstanceHandler.getUserIds(execution)}' : "",
|
||||
elementVariable: MULTI_INSTANCE_TYPE[1].value || MULTI_INSTANCE_TYPE[2].value ? 'assignee' : "",
|
||||
completionCondition
|
||||
});
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.el-row .el-radio-group {
|
||||
margin-bottom: 15px;
|
||||
.el-radio {
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.el-tag {
|
||||
margin-bottom: 10px;
|
||||
+ .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-label {
|
||||
padding-left: 5px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.head-container {
|
||||
height: 480px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-row .radio-group-flex {
|
||||
margin: 15px 0 0 0;
|
||||
justify-items: flex-start;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
/* 改变主题色变量 */
|
||||
$--color-primary: #1890ff;
|
||||
$--color-danger: #ff4d4f;
|
||||
|
||||
/* 改变 icon 字体路径变量，必需 */
|
||||
// $--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
// @import "~element-ui/packages/theme-chalk/src/index";
|
||||
|
||||
.el-table td,
|
||||
.el-table th {
|
||||
color: #333;
|
||||
}
|
||||
.el-drawer__header {
|
||||
padding: 16px 16px 8px 16px;
|
||||
margin: 0;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
div[class^="el-drawer"]:focus,
|
||||
span:focus {
|
||||
outline: none;
|
||||
}
|
||||
.el-drawer__body {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
margin-top: 50vh !important;
|
||||
transform: translateY(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-dialog__wrapper {
|
||||
overflow: hidden;
|
||||
max-height: 100vh;
|
||||
}
|
||||
.el-dialog__header {
|
||||
padding: 16px 16px 8px 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 16px;
|
||||
max-height: 80vh;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
.el-dialog__close {
|
||||
font-weight: 600;
|
||||
}
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-divider:not(.el-divider--horizontal) {
|
||||
margin: 0 8px ;
|
||||
}
|
||||
.el-divider.el-divider--horizontal {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
@import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
|
||||
@import "bpmn-js-token-simulation/assets/css/font-awesome.min.css";
|
||||
@import "bpmn-js-token-simulation/assets/css/normalize.css";
|
||||
@import "bpmn-js/dist/assets/diagram-js.css";
|
||||
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
|
||||
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
|
||||
@import "./process-designer.scss";
|
||||
@import "./process-panel.scss";
|
||||
|
||||
$success-color: #4eb819;
|
||||
$primary-color: #409EFF;
|
||||
$warning-color: #E6A23C;
|
||||
$danger-color: #F56C6C;
|
||||
$cancel-color: #909399;
|
||||
|
||||
.process-viewer {
|
||||
position: relative;
|
||||
border: 1px solid #EFEFEF;
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
|
||||
|
||||
.success-arrow {
|
||||
fill: $success-color;
|
||||
stroke: $success-color;
|
||||
}
|
||||
|
||||
.success-conditional {
|
||||
fill: white;
|
||||
stroke: $success-color;
|
||||
}
|
||||
|
||||
.fail-arrow {
|
||||
fill: $warning-color;
|
||||
stroke: $warning-color;
|
||||
}
|
||||
|
||||
.fail-conditional {
|
||||
fill: white;
|
||||
stroke: $warning-color;
|
||||
}
|
||||
|
||||
.success.djs-connection {
|
||||
.djs-visual path {
|
||||
stroke: $success-color!important;
|
||||
marker-end: url(#sequenceflow-end-white-success)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.success.djs-connection.condition-expression {
|
||||
.djs-visual path {
|
||||
marker-start: url(#conditional-flow-marker-white-success)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.success.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $success-color!important;
|
||||
fill: $success-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $success-color!important;
|
||||
}
|
||||
|
||||
.djs-visual path:nth-child(2) {
|
||||
stroke: $success-color!important;
|
||||
fill: $success-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $success-color!important;
|
||||
fill: $success-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
|
||||
.primary.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $primary-color!important;
|
||||
fill: $primary-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $primary-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $primary-color!important;
|
||||
fill: $primary-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
|
||||
.warning.djs-connection {
|
||||
.djs-visual path {
|
||||
stroke: $warning-color!important;
|
||||
marker-end: url(#sequenceflow-end-white-fail)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.warning.djs-connection.condition-expression {
|
||||
.djs-visual path {
|
||||
marker-start: url(#conditional-flow-marker-white-fail)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.warning.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $warning-color!important;
|
||||
fill: $warning-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $warning-color!important;
|
||||
}
|
||||
|
||||
.djs-visual path:nth-child(2) {
|
||||
stroke: $warning-color!important;
|
||||
fill: $warning-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $warning-color!important;
|
||||
fill: $warning-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
|
||||
.danger.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $danger-color!important;
|
||||
fill: $danger-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $danger-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $danger-color!important;
|
||||
fill: $danger-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $cancel-color!important;
|
||||
fill: $cancel-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $cancel-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $cancel-color!important;
|
||||
fill: $cancel-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
@import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
|
||||
@import "bpmn-js-token-simulation/assets/css/font-awesome.min.css";
|
||||
@import "bpmn-js-token-simulation/assets/css/normalize.css";
|
||||
@import "diagram-js-minimap/assets/diagram-js-minimap.css";
|
||||
|
||||
// 边框被 token-simulation 样式覆盖了
|
||||
.djs-palette {
|
||||
background: var(--palette-background-color);
|
||||
border: solid 1px var(--palette-border-color) !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.my-process-designer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
.my-process-designer__header {
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
.el-button {
|
||||
text-align: center;
|
||||
}
|
||||
.el-button-group {
|
||||
margin: 4px;
|
||||
}
|
||||
.el-tooltip__popper {
|
||||
.el-button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.el-button:hover {
|
||||
background: rgba(64, 158, 255, 0.8);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.align {
|
||||
position: relative;
|
||||
i {
|
||||
&:after {
|
||||
content: "|";
|
||||
position: absolute;
|
||||
transform: rotate(90deg) translate(200%, -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.align.align-left i {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.align.align-right i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.align.align-top i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.align.align-bottom i {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.align.align-center i {
|
||||
transform: rotate(90deg);
|
||||
&:after {
|
||||
transform: rotate(90deg) translate(0, -10%);
|
||||
}
|
||||
}
|
||||
.align.align-middle i {
|
||||
transform: rotate(0deg);
|
||||
&:after {
|
||||
transform: rotate(90deg) translate(0, -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.my-process-designer__container {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.my-process-designer__canvas {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
|
||||
repeat !important;
|
||||
div.toggle-mode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.my-process-designer__property-panel {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//侧边栏配置
|
||||
.djs-palette.open {
|
||||
.djs-palette-entries {
|
||||
div[class^="bpmn-icon-"]:before,
|
||||
div[class*="bpmn-icon-"]:before {
|
||||
line-height: unset;
|
||||
}
|
||||
div.entry {
|
||||
position: relative;
|
||||
}
|
||||
div.entry:hover {
|
||||
&::after {
|
||||
width: max-content;
|
||||
content: attr(title);
|
||||
vertical-align: text-bottom;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
transform: translateX(100%);
|
||||
font-size: 0.5em;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
background: #fafafa;
|
||||
box-shadow: 0 0 6px #eeeeee;
|
||||
border: 1px solid #cccccc;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
max-height: calc(80vh - 32px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.hljs {
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.hljs * {
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
.process-panel__container {
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
border-left: 1px solid #eeeeee;
|
||||
box-shadow: 0 0 8px #cccccc;
|
||||
max-height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.panel-tab__title {
|
||||
font-weight: 600;
|
||||
padding: 0 8px;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2em;
|
||||
i {
|
||||
margin-right: 8px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.panel-tab__content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #eeeeee;
|
||||
padding: 8px 16px;
|
||||
.panel-tab__content--title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-property {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 8px 0;
|
||||
.element-property__label {
|
||||
display: block;
|
||||
width: 90px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
padding-right: 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.element-property__value {
|
||||
flex: 1;
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
}
|
||||
.list-property {
|
||||
flex-direction: column;
|
||||
.element-listener-item {
|
||||
width: 100%;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 16px auto 32px 32px;
|
||||
grid-column-gap: 8px;
|
||||
}
|
||||
.element-listener-item + .element-listener-item {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.listener-drawer {
|
||||
|
||||
.el-drawer__header {
|
||||
margin: 0PX;
|
||||
padding: 10PX;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
.el-drawer__title {
|
||||
font-size: 18px
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
.el-form-item__label {
|
||||
font-size: 14PX;
|
||||
font-weight: 500;
|
||||
}
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: var(--el-fill-color-blank);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listener-filed__title {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
span {
|
||||
// width: 200px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.element-drawer__button {
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.element-drawer__button > .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.el-input.is-disabled .el-input__inner {
|
||||
color: #999999;
|
||||
}
|
||||
.el-form-item.el-form-item--mini {
|
||||
margin-bottom: 0;
|
||||
& + .el-form-item {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
// 创建监听器实例
|
||||
export function createListenerObject(options, isTask, prefix) {
|
||||
const listenerObj = Object.create(null);
|
||||
listenerObj.event = options.event;
|
||||
isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
|
||||
switch (options.listenerType) {
|
||||
case 'scriptListener':
|
||||
listenerObj.script = createScriptObject(options, prefix);
|
||||
break;
|
||||
case 'expressionListener':
|
||||
listenerObj.expression = options.expression;
|
||||
break;
|
||||
case 'delegateExpressionListener':
|
||||
listenerObj.delegateExpression = options.delegateExpression;
|
||||
break;
|
||||
default:
|
||||
listenerObj.class = options.class;
|
||||
}
|
||||
// 注入字段
|
||||
if (options.fields) {
|
||||
listenerObj.fields = options.fields.map(field => {
|
||||
return createFieldObject(field, prefix);
|
||||
});
|
||||
}
|
||||
// 任务监听器的 定时器 设置
|
||||
if (isTask && options.event === 'timeout' && !!options.eventDefinitionType) {
|
||||
const timeDefinition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
|
||||
body: options.eventTimeDefinitions
|
||||
});
|
||||
const TimerEventDefinition = window.bpmnInstances.moddle.create('bpmn:TimerEventDefinition', {
|
||||
id: `TimerEventDefinition_${uuid(8)}`,
|
||||
[`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
|
||||
});
|
||||
listenerObj.eventDefinitions = [TimerEventDefinition];
|
||||
}
|
||||
return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`, listenerObj);
|
||||
}
|
||||
|
||||
// 创建 监听器的注入字段 实例
|
||||
export function createFieldObject(option, prefix) {
|
||||
const { name, fieldType, string, expression } = option;
|
||||
const fieldConfig = fieldType === 'string' ? { name, string } : { name, expression };
|
||||
return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
|
||||
}
|
||||
|
||||
// 创建脚本实例
|
||||
export function createScriptObject(options, prefix) {
|
||||
const { scriptType, scriptFormat, value, resource } = options;
|
||||
const scriptConfig = scriptType === 'inlineScript' ? { scriptFormat, value } : { scriptFormat, resource };
|
||||
return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
|
||||
}
|
||||
|
||||
// 更新元素扩展属性
|
||||
export function updateElementExtensions(element, extensionList) {
|
||||
const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
|
||||
values: extensionList
|
||||
});
|
||||
window.bpmnInstances.modeling.updateProperties(element, {
|
||||
extensionElements: extensions
|
||||
});
|
||||
}
|
||||
|
||||
// 创建一个id
|
||||
export function uuid(length = 8, chars) {
|
||||
let result = '';
|
||||
const charsString = chars || '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
for (let i = length; i > 0; --i) {
|
||||
result += charsString[Math.floor(Math.random() * charsString.length)];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
|
@ -0,0 +1,694 @@
|
|||
/* eslint-disable no-func-assign */
|
||||
/**
|
||||
* Flatten array, one level deep.
|
||||
*
|
||||
* @param {Array<?>} arr
|
||||
*
|
||||
* @return {Array<?>}
|
||||
*/
|
||||
function flatten(arr) {
|
||||
return Array.prototype.concat.apply([], arr);
|
||||
}
|
||||
|
||||
var nativeToString = Object.prototype.toString;
|
||||
var nativeHasOwnProperty = Object.prototype.hasOwnProperty;
|
||||
function isUndefined(obj) {
|
||||
return obj === undefined;
|
||||
}
|
||||
function isDefined(obj) {
|
||||
return obj !== undefined;
|
||||
}
|
||||
function isNil(obj) {
|
||||
return obj == null;
|
||||
}
|
||||
function isArray(obj) {
|
||||
return nativeToString.call(obj) === '[object Array]';
|
||||
}
|
||||
function isObject(obj) {
|
||||
return nativeToString.call(obj) === '[object Object]';
|
||||
}
|
||||
function isNumber(obj) {
|
||||
return nativeToString.call(obj) === '[object Number]';
|
||||
}
|
||||
function isFunction(obj) {
|
||||
var tag = nativeToString.call(obj);
|
||||
return tag === '[object Function]' || tag === '[object AsyncFunction]' || tag === '[object GeneratorFunction]' || tag === '[object AsyncGeneratorFunction]' || tag === '[object Proxy]';
|
||||
}
|
||||
function isString(obj) {
|
||||
return nativeToString.call(obj) === '[object String]';
|
||||
}
|
||||
/**
|
||||
* Ensure collection is an array.
|
||||
*
|
||||
* @param {Object} obj
|
||||
*/
|
||||
|
||||
function ensureArray(obj) {
|
||||
if (isArray(obj)) {
|
||||
return;
|
||||
}
|
||||
|
||||
throw new Error('must supply array');
|
||||
}
|
||||
/**
|
||||
* Return true, if target owns a property with the given key.
|
||||
*
|
||||
* @param {Object} target
|
||||
* @param {String} key
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
|
||||
function has(target, key) {
|
||||
return nativeHasOwnProperty.call(target, key);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find element in collection.
|
||||
*
|
||||
* @param {Array|Object} collection
|
||||
* @param {Function|Object} matcher
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
|
||||
function find(collection, matcher) {
|
||||
matcher = toMatcher(matcher);
|
||||
var match;
|
||||
forEach(collection, function(val, key) {
|
||||
if (matcher(val, key)) {
|
||||
match = val;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return match;
|
||||
}
|
||||
/**
|
||||
* Find element index in collection.
|
||||
*
|
||||
* @param {Array|Object} collection
|
||||
* @param {Function} matcher
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
|
||||
function findIndex(collection, matcher) {
|
||||
matcher = toMatcher(matcher);
|
||||
var idx = isArray(collection) ? -1 : undefined;
|
||||
forEach(collection, function(val, key) {
|
||||
if (matcher(val, key)) {
|
||||
idx = key;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return idx;
|
||||
}
|
||||
/**
|
||||
* Find element in collection.
|
||||
*
|
||||
* @param {Array|Object} collection
|
||||
* @param {Function} matcher
|
||||
*
|
||||
* @return {Array} result
|
||||
*/
|
||||
|
||||
function filter(collection, matcher) {
|
||||
var result = [];
|
||||
forEach(collection, function(val, key) {
|
||||
if (matcher(val, key)) {
|
||||
result.push(val);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* Iterate over collection; returning something
|
||||
* (non-undefined) will stop iteration.
|
||||
*
|
||||
* @param {Array|Object} collection
|
||||
* @param {Function} iterator
|
||||
*
|
||||
* @return {Object} return result that stopped the iteration
|
||||
*/
|
||||
|
||||
function forEach(collection, iterator) {
|
||||
var val, result;
|
||||
|
||||
if (isUndefined(collection)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var convertKey = isArray(collection) ? toNum : identity;
|
||||
|
||||
for (var key in collection) {
|
||||
if (has(collection, key)) {
|
||||
val = collection[key];
|
||||
result = iterator(val, convertKey(key));
|
||||
|
||||
if (result === false) {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Return collection without element.
|
||||
*
|
||||
* @param {Array} arr
|
||||
* @param {Function} matcher
|
||||
*
|
||||
* @return {Array}
|
||||
*/
|
||||
|
||||
function without(arr, matcher) {
|
||||
if (isUndefined(arr)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
ensureArray(arr);
|
||||
matcher = toMatcher(matcher);
|
||||
return arr.filter(function(el, idx) {
|
||||
return !matcher(el, idx);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Reduce collection, returning a single result.
|
||||
*
|
||||
* @param {Object|Array} collection
|
||||
* @param {Function} iterator
|
||||
* @param {Any} result
|
||||
*
|
||||
* @return {Any} result returned from last iterator
|
||||
*/
|
||||
|
||||
function reduce(collection, iterator, result) {
|
||||
forEach(collection, function(value, idx) {
|
||||
result = iterator(result, value, idx);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* Return true if every element in the collection
|
||||
* matches the criteria.
|
||||
*
|
||||
* @param {Object|Array} collection
|
||||
* @param {Function} matcher
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
|
||||
function every(collection, matcher) {
|
||||
return !!reduce(collection, function(matches, val, key) {
|
||||
return matches && matcher(val, key);
|
||||
}, true);
|
||||
}
|
||||
/**
|
||||
* Return true if some elements in the collection
|
||||
* match the criteria.
|
||||
*
|
||||
* @param {Object|Array} collection
|
||||
* @param {Function} matcher
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
|
||||
function some(collection, matcher) {
|
||||
return !!find(collection, matcher);
|
||||
}
|
||||
/**
|
||||
* Transform a collection into another collection
|
||||
* by piping each member through the given fn.
|
||||
*
|
||||
* @param {Object|Array} collection
|
||||
* @param {Function} fn
|
||||
*
|
||||
* @return {Array} transformed collection
|
||||
*/
|
||||
|
||||
function map(collection, fn) {
|
||||
var result = [];
|
||||
forEach(collection, function(val, key) {
|
||||
result.push(fn(val, key));
|
||||
});
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* Get the collections keys.
|
||||
*
|
||||
* @param {Object|Array} collection
|
||||
*
|
||||
* @return {Array}
|
||||
*/
|
||||
|
||||
function keys(collection) {
|
||||
return collection && Object.keys(collection) || [];
|
||||
}
|
||||
/**
|
||||
* Shorthand for `keys(o).length`.
|
||||
*
|
||||
* @param {Object|Array} collection
|
||||
*
|
||||
* @return {Number}
|
||||
*/
|
||||
|
||||
function size(collection) {
|
||||
return keys(collection).length;
|
||||
}
|
||||
/**
|
||||
* Get the values in the collection.
|
||||
*
|
||||
* @param {Object|Array} collection
|
||||
*
|
||||
* @return {Array}
|
||||
*/
|
||||
|
||||
function values(collection) {
|
||||
return map(collection, function(val) {
|
||||
return val;
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Group collection members by attribute.
|
||||
*
|
||||
* @param {Object|Array} collection
|
||||
* @param {Function} extractor
|
||||
*
|
||||
* @return {Object} map with { attrValue => [ a, b, c ] }
|
||||
*/
|
||||
|
||||
function groupBy(collection, extractor) {
|
||||
var grouped = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
extractor = toExtractor(extractor);
|
||||
forEach(collection, function(val) {
|
||||
var discriminator = extractor(val) || '_';
|
||||
var group = grouped[discriminator];
|
||||
|
||||
if (!group) {
|
||||
group = grouped[discriminator] = [];
|
||||
}
|
||||
|
||||
group.push(val);
|
||||
});
|
||||
return grouped;
|
||||
}
|
||||
function uniqueBy(extractor) {
|
||||
extractor = toExtractor(extractor);
|
||||
var grouped = {};
|
||||
|
||||
for (var _len = arguments.length, collections = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||
collections[_key - 1] = arguments[_key];
|
||||
}
|
||||
|
||||
forEach(collections, function(c) {
|
||||
return groupBy(c, extractor, grouped);
|
||||
});
|
||||
var result = map(grouped, function(val, key) {
|
||||
return val[0];
|
||||
});
|
||||
return result;
|
||||
}
|
||||
var unionBy = uniqueBy;
|
||||
/**
|
||||
* Sort collection by criteria.
|
||||
*
|
||||
* @param {Object|Array} collection
|
||||
* @param {String|Function} extractor
|
||||
*
|
||||
* @return {Array}
|
||||
*/
|
||||
|
||||
function sortBy(collection, extractor) {
|
||||
extractor = toExtractor(extractor);
|
||||
var sorted = [];
|
||||
forEach(collection, function(value, key) {
|
||||
var disc = extractor(value, key);
|
||||
var entry = {
|
||||
d: disc,
|
||||
v: value
|
||||
};
|
||||
|
||||
for (var idx = 0; idx < sorted.length; idx++) {
|
||||
var d = sorted[idx].d;
|
||||
|
||||
if (disc < d) {
|
||||
sorted.splice(idx, 0, entry);
|
||||
return;
|
||||
}
|
||||
} // not inserted, append (!)
|
||||
|
||||
sorted.push(entry);
|
||||
});
|
||||
return map(sorted, function(e) {
|
||||
return e.v;
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Create an object pattern matcher.
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* const matcher = matchPattern({ id: 1 });
|
||||
*
|
||||
* let element = find(elements, matcher);
|
||||
*
|
||||
* @param {Object} pattern
|
||||
*
|
||||
* @return {Function} matcherFn
|
||||
*/
|
||||
|
||||
function matchPattern(pattern) {
|
||||
return function(el) {
|
||||
return every(pattern, function(val, key) {
|
||||
return el[key] === val;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function toExtractor(extractor) {
|
||||
return isFunction(extractor) ? extractor : function(e) {
|
||||
return e[extractor];
|
||||
};
|
||||
}
|
||||
|
||||
function toMatcher(matcher) {
|
||||
return isFunction(matcher) ? matcher : function(e) {
|
||||
return e === matcher;
|
||||
};
|
||||
}
|
||||
|
||||
function identity(arg) {
|
||||
return arg;
|
||||
}
|
||||
|
||||
function toNum(arg) {
|
||||
return Number(arg);
|
||||
}
|
||||
|
||||
/**
|
||||
* Debounce fn, calling it only once if the given time
|
||||
* elapsed between calls.
|
||||
*
|
||||
* Lodash-style the function exposes methods to `#clear`
|
||||
* and `#flush` to control internal behavior.
|
||||
*
|
||||
* @param {Function} fn
|
||||
* @param {Number} timeout
|
||||
*
|
||||
* @return {Function} debounced function
|
||||
*/
|
||||
function debounce(fn, timeout) {
|
||||
var timer;
|
||||
var lastArgs;
|
||||
var lastThis;
|
||||
var lastNow;
|
||||
|
||||
function fire(force) {
|
||||
var now = Date.now();
|
||||
var scheduledDiff = force ? 0 : lastNow + timeout - now;
|
||||
|
||||
if (scheduledDiff > 0) {
|
||||
return schedule(scheduledDiff);
|
||||
}
|
||||
|
||||
fn.apply(lastThis, lastArgs);
|
||||
clear();
|
||||
}
|
||||
|
||||
function schedule(timeout) {
|
||||
timer = setTimeout(fire, timeout);
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
|
||||
timer = lastNow = lastArgs = lastThis = undefined;
|
||||
}
|
||||
|
||||
function flush() {
|
||||
if (timer) {
|
||||
fire(true);
|
||||
}
|
||||
|
||||
clear();
|
||||
}
|
||||
|
||||
function callback() {
|
||||
lastNow = Date.now();
|
||||
|
||||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
lastArgs = args;
|
||||
lastThis = this; // ensure an execution is scheduled
|
||||
|
||||
if (!timer) {
|
||||
schedule(timeout);
|
||||
}
|
||||
}
|
||||
|
||||
callback.flush = flush;
|
||||
callback.cancel = clear;
|
||||
return callback;
|
||||
}
|
||||
/**
|
||||
* Throttle fn, calling at most once
|
||||
* in the given interval.
|
||||
*
|
||||
* @param {Function} fn
|
||||
* @param {Number} interval
|
||||
*
|
||||
* @return {Function} throttled function
|
||||
*/
|
||||
|
||||
function throttle(fn, interval) {
|
||||
var throttling = false;
|
||||
return function() {
|
||||
if (throttling) {
|
||||
return;
|
||||
}
|
||||
|
||||
fn.apply(void 0, arguments);
|
||||
throttling = true;
|
||||
setTimeout(function() {
|
||||
throttling = false;
|
||||
}, interval);
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Bind function against target <this>.
|
||||
*
|
||||
* @param {Function} fn
|
||||
* @param {Object} target
|
||||
*
|
||||
* @return {Function} bound function
|
||||
*/
|
||||
|
||||
function bind(fn, target) {
|
||||
return fn.bind(target);
|
||||
}
|
||||
|
||||
function _typeof(obj) {
|
||||
'@babel/helpers - typeof';
|
||||
|
||||
if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
|
||||
_typeof = function(obj) {
|
||||
return typeof obj;
|
||||
};
|
||||
} else {
|
||||
_typeof = function(obj) {
|
||||
return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
|
||||
};
|
||||
}
|
||||
|
||||
return _typeof(obj);
|
||||
}
|
||||
|
||||
function _extends() {
|
||||
_extends = Object.assign || function(target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
return _extends.apply(this, arguments);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convenience wrapper for `Object.assign`.
|
||||
*
|
||||
* @param {Object} target
|
||||
* @param {...Object} others
|
||||
*
|
||||
* @return {Object} the target
|
||||
*/
|
||||
|
||||
function assign(target) {
|
||||
for (var _len = arguments.length, others = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||
others[_key - 1] = arguments[_key];
|
||||
}
|
||||
|
||||
return _extends.apply(void 0, [target].concat(others));
|
||||
}
|
||||
/**
|
||||
* Sets a nested property of a given object to the specified value.
|
||||
*
|
||||
* This mutates the object and returns it.
|
||||
*
|
||||
* @param {Object} target The target of the set operation.
|
||||
* @param {(string|number)[]} path The path to the nested value.
|
||||
* @param {any} value The value to set.
|
||||
*/
|
||||
|
||||
function set(target, path, value) {
|
||||
var currentTarget = target;
|
||||
forEach(path, function(key, idx) {
|
||||
if (typeof key !== 'number' && typeof key !== 'string') {
|
||||
throw new Error('illegal key type: ' + _typeof(key) + '. Key should be of type number or string.');
|
||||
}
|
||||
|
||||
if (key === 'constructor') {
|
||||
throw new Error('illegal key: constructor');
|
||||
}
|
||||
|
||||
if (key === '__proto__') {
|
||||
throw new Error('illegal key: __proto__');
|
||||
}
|
||||
|
||||
var nextKey = path[idx + 1];
|
||||
var nextTarget = currentTarget[key];
|
||||
|
||||
if (isDefined(nextKey) && isNil(nextTarget)) {
|
||||
nextTarget = currentTarget[key] = isNaN(+nextKey) ? {} : [];
|
||||
}
|
||||
|
||||
if (isUndefined(nextKey)) {
|
||||
if (isUndefined(value)) {
|
||||
delete currentTarget[key];
|
||||
} else {
|
||||
currentTarget[key] = value;
|
||||
}
|
||||
} else {
|
||||
currentTarget = nextTarget;
|
||||
}
|
||||
});
|
||||
return target;
|
||||
}
|
||||
/**
|
||||
* Gets a nested property of a given object.
|
||||
*
|
||||
* @param {Object} target The target of the get operation.
|
||||
* @param {(string|number)[]} path The path to the nested value.
|
||||
* @param {any} [defaultValue] The value to return if no value exists.
|
||||
*/
|
||||
|
||||
function get(target, path, defaultValue) {
|
||||
var currentTarget = target;
|
||||
forEach(path, function(key) {
|
||||
// accessing nil property yields <undefined>
|
||||
if (isNil(currentTarget)) {
|
||||
currentTarget = undefined;
|
||||
return false;
|
||||
}
|
||||
|
||||
currentTarget = currentTarget[key];
|
||||
});
|
||||
return isUndefined(currentTarget) ? defaultValue : currentTarget;
|
||||
}
|
||||
/**
|
||||
* Pick given properties from the target object.
|
||||
*
|
||||
* @param {Object} target
|
||||
* @param {Array} properties
|
||||
*
|
||||
* @return {Object} target
|
||||
*/
|
||||
|
||||
function pick(target, properties) {
|
||||
var result = {};
|
||||
var obj = Object(target);
|
||||
forEach(properties, function(prop) {
|
||||
if (prop in obj) {
|
||||
result[prop] = target[prop];
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* Pick all target properties, excluding the given ones.
|
||||
*
|
||||
* @param {Object} target
|
||||
* @param {Array} properties
|
||||
*
|
||||
* @return {Object} target
|
||||
*/
|
||||
|
||||
function omit(target, properties) {
|
||||
var result = {};
|
||||
var obj = Object(target);
|
||||
forEach(obj, function(prop, key) {
|
||||
if (properties.indexOf(key) === -1) {
|
||||
result[key] = prop;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* Recursively merge `...sources` into given target.
|
||||
*
|
||||
* Does support merging objects; does not support merging arrays.
|
||||
*
|
||||
* @param {Object} target
|
||||
* @param {...Object} sources
|
||||
*
|
||||
* @return {Object} the target
|
||||
*/
|
||||
|
||||
function merge(target) {
|
||||
for (var _len2 = arguments.length, sources = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
||||
sources[_key2 - 1] = arguments[_key2];
|
||||
}
|
||||
|
||||
if (!sources.length) {
|
||||
return target;
|
||||
}
|
||||
|
||||
forEach(sources, function(source) {
|
||||
// skip non-obj sources, i.e. null
|
||||
if (!source || !isObject(source)) {
|
||||
return;
|
||||
}
|
||||
|
||||
forEach(source, function(sourceVal, key) {
|
||||
if (key === '__proto__') {
|
||||
return;
|
||||
}
|
||||
|
||||
var targetVal = target[key];
|
||||
|
||||
if (isObject(sourceVal)) {
|
||||
if (!isObject(targetVal)) {
|
||||
// override target[key] with object
|
||||
targetVal = {};
|
||||
}
|
||||
|
||||
target[key] = merge(targetVal, sourceVal);
|
||||
} else {
|
||||
target[key] = sourceVal;
|
||||
}
|
||||
});
|
||||
});
|
||||
return target;
|
||||
}
|
||||
|
||||
export { assign, bind, debounce, ensureArray, every, filter, find, findIndex, flatten, forEach, get, groupBy, has, isArray, isDefined, isFunction, isNil, isNumber, isObject, isString, isUndefined, keys, map, matchPattern, merge, omit, pick, reduce, set, size, some, sortBy, throttle, unionBy, uniqueBy, values, without };
|
||||
|
|
@ -12,20 +12,10 @@
|
|||
<el-form-item label="流程分类" prop="category">
|
||||
<el-select v-model="queryParams.category" clearable placeholder="请选择" @change="handleQuery">
|
||||
<el-option
|
||||
v-for="item in categoryOptions"
|
||||
:key="item.categoryId"
|
||||
:label="item.categoryName"
|
||||
:value="item.code">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程分类" prop="category">
|
||||
<el-select v-model="queryParams.category" clearable placeholder="请选择" @change="handleQuery">
|
||||
<el-option
|
||||
v-for="item in categoryOptions"
|
||||
:key="item.categoryId"
|
||||
:label="item.categoryName"
|
||||
:value="item.code">
|
||||
v-for="item in sys_flow_category"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -63,7 +53,11 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模型名称" align="center" prop="modelName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="流程分类" align="center" prop="categoryName" :formatter="categoryFormat" />
|
||||
<el-table-column label="流程分类" align="center" prop="categoryName">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="sys_flow_category" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模型版本" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag size="small">v{{ scope.row.version }}</el-tag>
|
||||
|
|
@ -137,7 +131,11 @@
|
|||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="模型标识" align="center" prop="modelKey" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="模型名称" align="center" prop="modelName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="流程分类" align="center" prop="categoryName" :formatter="categoryFormat" />
|
||||
<el-table-column label="流程分类" align="center" >
|
||||
<template #default="scope">
|
||||
<dict-tag :options="sys_flow_category" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模型版本" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag>v{{ scope.row.version }}</el-tag>
|
||||
|
|
@ -169,14 +167,13 @@
|
|||
|
||||
<script setup name="Model" lang="ts">
|
||||
import { getBpmnXml, listModel, historyModel, latestModel, addModel, updateModel, saveModel, delModel, deployModel, getModel } from "@/api/flowable/model";
|
||||
import { listAllCategory } from "@/api/flowable/category";
|
||||
import { ModelForm, ModelQuery, ModelVO, DesignerForm } from "@/api/flowable/model/types";
|
||||
import { CategoryVO } from "@/api/flowable/category/types";
|
||||
import ProcessDesigner from "@/components/ProcessDesigner";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import { ElForm } from 'element-plus';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_flow_category } = proxy.useDict("sys_flow_category");
|
||||
|
||||
const modelList = ref<ModelVO[]>([]);
|
||||
const loading = ref(true);
|
||||
|
|
@ -185,7 +182,6 @@ const ids = ref<Array<string>>([]);
|
|||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const categoryOptions = ref<CategoryVO[]>([]);
|
||||
const designerLoading = ref(true);
|
||||
const bpmnXml = ref<string>('');
|
||||
const reloadIndex = ref(0);
|
||||
|
|
@ -389,11 +385,6 @@ const submitForm = () => {
|
|||
}
|
||||
})
|
||||
}
|
||||
/** 查询流程分类列表 */
|
||||
const getCategoryList = async () => {
|
||||
const res = await listAllCategory();
|
||||
categoryOptions.value = res.data;
|
||||
}
|
||||
|
||||
const onSaveDesigner = async (str: string) => {
|
||||
bpmnXml.value = str;
|
||||
|
|
@ -418,12 +409,7 @@ const confirmSave = async (body: any, newVersion: boolean) => {
|
|||
designer.visible = false;
|
||||
}
|
||||
|
||||
const categoryFormat = (row: ModelVO) => {
|
||||
return categoryOptions.value.find(k => k.code === row.category)?.categoryName ?? '';
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCategoryList()
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ export default defineConfig(({ mode, command }) => {
|
|||
// 预编译
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
'pinia',
|
||||
'@/lib/vform/designer.umd.js',
|
||||
]
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue