去除 jeeplus-bpmn 的工作流编辑器，原因：功能相对不完善。使用 bpmnProcessDesigner 替代
YunaiV
parent
d1c95c4d8a
commit
9804e781f4
|
|
@ -41,7 +41,6 @@
|
||||||
"axios": "0.21.0",
|
"axios": "0.21.0",
|
||||||
"clipboard": "2.0.6",
|
"clipboard": "2.0.6",
|
||||||
"core-js": "3.19.1",
|
"core-js": "3.19.1",
|
||||||
"jeeplus-bpmn": "^6.0.10",
|
|
||||||
"echarts": "4.9.0",
|
"echarts": "4.9.0",
|
||||||
"element-ui": "2.15.0",
|
"element-ui": "2.15.0",
|
||||||
"file-saver": "2.0.4",
|
"file-saver": "2.0.4",
|
||||||
|
|
|
||||||
|
|
@ -1,152 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-button-group>
|
|
||||||
<el-tooltip class="item" effect="dark" content="保存并发布" placement="bottom">
|
|
||||||
<el-button type="primary" size="small" @click="save"><i class="fa fa-save"> 保存</i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" content="打开流程文件" placement="bottom">
|
|
||||||
<el-button type="primary" size="small" @click="importXml"><i class="fa fa-folder-open"></i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" content="创建新流程图" placement="bottom">
|
|
||||||
<el-button type="primary" size="small" @click="reset"><i class="fa fa-plus-circle"></i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" content="下载流程图" placement="bottom">
|
|
||||||
<el-button type="primary" size="small" @click="downloadSvg"><i class="fa fa-picture-o"></i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" content="下载流程文件" placement="bottom">
|
|
||||||
<el-button type="primary" size="small" @click="downloadBpmn"><i class="fa fa-download"></i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" content="撤销" placement="bottom">
|
|
||||||
<el-button size="small"><i class="fa fa-rotate-left" @click="undo"></i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" content="恢复" placement="bottom">
|
|
||||||
<el-button size="small"><i class="fa fa-rotate-right" :class="!canRedo?'default-undo':''"
|
|
||||||
@click="redo"></i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" content="放大" placement="bottom">
|
|
||||||
<el-button size="small" @click="zoom(0.05)"><i class="fa fa-search-plus"></i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" content="缩小" placement="bottom">
|
|
||||||
<el-button size="small" @click="zoom(-0.05)"><i class="fa fa-search-minus"></i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" content="重置大小" placement="bottom">
|
|
||||||
<el-button size="small" @click="zoom(0)"><i class="fa fa-arrows"></i></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button-group>
|
|
||||||
|
|
||||||
<div class="closeClass" @click="beforeClose()"><i class="el-icon-close"></i></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "ViewerHeader",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
scale: 1.0,
|
|
||||||
canRedo: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
processData: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
modeler: {
|
|
||||||
type: Object
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {},
|
|
||||||
methods: {
|
|
||||||
deploy() {
|
|
||||||
let that = this;
|
|
||||||
let _xml;
|
|
||||||
let _svg;
|
|
||||||
this.modeler.saveXML((err, xml) => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
}
|
|
||||||
_xml = xml;
|
|
||||||
})
|
|
||||||
this.modeler.saveSVG((err, svg) => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
}
|
|
||||||
_svg = svg;
|
|
||||||
})
|
|
||||||
// that.post(this.Apis.deployProcess, {
|
|
||||||
// processKey: "s1111",
|
|
||||||
// processName: "阿达达",
|
|
||||||
// resourceName: "test01",
|
|
||||||
// xml: _xml,
|
|
||||||
// svg: _svg
|
|
||||||
// }, function (data) {
|
|
||||||
// console.log(data)
|
|
||||||
// });
|
|
||||||
},
|
|
||||||
save(){
|
|
||||||
let that = this;
|
|
||||||
let _xml;
|
|
||||||
let _svg;
|
|
||||||
this.modeler.saveXML((err, xml) => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
}
|
|
||||||
_xml = xml;
|
|
||||||
})
|
|
||||||
this.modeler.saveSVG((err, svg) => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
}
|
|
||||||
_svg = svg;
|
|
||||||
})
|
|
||||||
that.$emit("processSave",{"xmlStr":_xml,"svgStr":_svg});
|
|
||||||
},
|
|
||||||
reset() {
|
|
||||||
this.$emit('restart')
|
|
||||||
},
|
|
||||||
importXml() {
|
|
||||||
this.$emit('importXml')
|
|
||||||
},
|
|
||||||
downloadSvg() {
|
|
||||||
this.$emit("handleExportSvg")
|
|
||||||
},
|
|
||||||
downloadBpmn() {
|
|
||||||
this.$emit("handleExportBpmn");
|
|
||||||
},
|
|
||||||
undo() {
|
|
||||||
this.modeler.get('commandStack').undo();
|
|
||||||
this.canRedo = this.modeler.get('commandStack').canRedo();
|
|
||||||
},
|
|
||||||
redo() {
|
|
||||||
if (!this.canRedo) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.modeler.get('commandStack').redo()
|
|
||||||
this.canRedo = this.modeler.get('commandStack').canRedo();
|
|
||||||
},
|
|
||||||
zoom(val) {
|
|
||||||
let newScale = !val ? 1.0 : ((this.scale + val) <= 0.2) ? 0.2 : (this.scale + val);
|
|
||||||
this.modeler.get('canvas').zoom(newScale);
|
|
||||||
this.scale = newScale;
|
|
||||||
},
|
|
||||||
beforeClose(val) {
|
|
||||||
this.$emit("beforeClose");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.closeClass{
|
|
||||||
|
|
||||||
float: right;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.closeClass:hover{
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,280 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="bpmnclass">
|
|
||||||
<ImportDialog :dialogVisibleBool="importXmlShow" @closeShowXmlDialog="closeShowXmlDialog"></ImportDialog>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24">
|
|
||||||
<vue-header class="bpmn-viewer-header" :processData="initData" :modeler="bpmnModeler" @restart="restart" @importXml="importXml"
|
|
||||||
@handleExportSvg="handleExportSvg" @handleExportBpmn="handleExportBpmn" @processSave="processSave" @beforeClose="beforeClose"></vue-header>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row style="margin-left: 1%">
|
|
||||||
<el-tabs v-model="activeName" type="card" >
|
|
||||||
<el-tab-pane label="流程设计器" name="first">
|
|
||||||
<el-col :span="19">
|
|
||||||
<div class="bpmn-viewer">
|
|
||||||
<div class="bpmn-viewer-content" ref="bpmnViewer" ></div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="5">
|
|
||||||
<bpmn-panel style="width: 92%" @updateXml="updateXml" v-if="bpmnModeler" :modeler="bpmnModeler" :process="initData"></bpmn-panel>
|
|
||||||
</el-col>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="流程XML" name="second">
|
|
||||||
<editor v-model="xmlShowWatch" @init="editorInit" lang="xml" theme="chrome" width="98%" height="calc(100vh - 100px)"></editor>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import templateXml from "./data/template";
|
|
||||||
import ImportDialog from "./dialog/ImportDialog";
|
|
||||||
// import activitiCom from "../provider/activiti";
|
|
||||||
// import BpmnModeler2 from 'bpmn-js/lib/Modeler';
|
|
||||||
import BpmnModeler from 'jeeplus-bpmn/lib/Modeler'
|
|
||||||
import customTranslate from "./data/translate/customTranslate";
|
|
||||||
import VueHeader from "./Header";
|
|
||||||
import BpmnPanel from "./panel/index";
|
|
||||||
import activitiModule from './data/activiti.json'
|
|
||||||
import flowableModule from './data/flowable.json'
|
|
||||||
import './assets/css/vue-bmpn.css'
|
|
||||||
import './assets/css/font-awesome.min.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 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "VueBpmn",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
bpmnModeler: null,
|
|
||||||
importXmlShow: false,
|
|
||||||
xmlShowWatch: "",
|
|
||||||
initTemplate: "",
|
|
||||||
activeName: "first",
|
|
||||||
initData: {},
|
|
||||||
xmlShow: ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
product: String,
|
|
||||||
bpmnData: Object,
|
|
||||||
bpmnXml: {
|
|
||||||
type: String,
|
|
||||||
required: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
editor: require('vue2-ace-editor'),
|
|
||||||
VueHeader, BpmnPanel,ImportDialog
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
xmlShow: {
|
|
||||||
handler(){
|
|
||||||
this.xmlShowWatch = this.xmlShow
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
let processId = new Date().getTime();
|
|
||||||
this.initTemplate = templateXml.initTemplate(processId)
|
|
||||||
|
|
||||||
this.initData = {
|
|
||||||
key: this.bpmnData.key ? this.bpmnData.key : "process" + processId,
|
|
||||||
name: this.bpmnData.name ? this.bpmnData.name : "流程" + processId,
|
|
||||||
description: this.bpmnData.metaInfo ? JSON.parse(this.bpmnData.metaInfo).description : "" ,
|
|
||||||
xml: this.initTemplate}
|
|
||||||
if (this.bpmnXml != null && this.bpmnXml !== "") {
|
|
||||||
this.initTemplate = this.bpmnXml
|
|
||||||
}
|
|
||||||
this.init();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
editorInit: function (editor) {
|
|
||||||
require('brace/mode/xml')
|
|
||||||
require('brace/theme/chrome')
|
|
||||||
editor.setOptions({
|
|
||||||
fontSize: "15px"
|
|
||||||
})
|
|
||||||
editor.getSession().setUseWrapMode(true);
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
const _this = this;
|
|
||||||
// 支持activiti和flowable
|
|
||||||
let _moddleExtensions = this.getModdleExtensions();
|
|
||||||
// 获取画布 element
|
|
||||||
this.canvas = this.$refs.bpmnViewer;
|
|
||||||
// 创建Bpmn对象
|
|
||||||
this.bpmnModeler = new BpmnModeler({
|
|
||||||
container: this.canvas,
|
|
||||||
additionalModules: [
|
|
||||||
{
|
|
||||||
translate: ['value', customTranslate]
|
|
||||||
},
|
|
||||||
// activitiCom
|
|
||||||
],
|
|
||||||
moddleExtensions: _moddleExtensions
|
|
||||||
});
|
|
||||||
// 初始化建模器内容
|
|
||||||
this.initDiagram(this.initTemplate);
|
|
||||||
setTimeout(function () {
|
|
||||||
_this.bpmnModeler.saveXML({format: true}, function (err, xml) {
|
|
||||||
_this.updateXml(xml)
|
|
||||||
});
|
|
||||||
// console.log(_this.bpmnModeler);
|
|
||||||
// const elementRegistry = _this.bpmnModeler.get('elementRegistry');
|
|
||||||
// const startEvenList = elementRegistry.filter (
|
|
||||||
// (item) => item.type === 'bpmn:StartEvent'
|
|
||||||
// );
|
|
||||||
// // 初始化 开始节点
|
|
||||||
// _this.bpmnModeler.get("modeling").updateProperties(startEvenList[0], {"activiti:initiator": "applyUserId"});
|
|
||||||
}, 300)
|
|
||||||
|
|
||||||
},
|
|
||||||
initDiagram(xml) {
|
|
||||||
this.bpmnModeler.importXML(xml, err => {
|
|
||||||
if (err) {
|
|
||||||
// this.$Message.error("打开模型出错,请确认该模型符合Bpmn2.0规范");
|
|
||||||
}
|
|
||||||
let _tag = document.getElementsByTagName("svg")[0];
|
|
||||||
if (_tag) {
|
|
||||||
_tag.style.width = "100%";
|
|
||||||
_tag.style.height = "700px";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
handleExportBpmn() {
|
|
||||||
const _this = this;
|
|
||||||
this.bpmnModeler.saveXML(function (err, xml) {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
}
|
|
||||||
let {filename, href} = _this.setEncoded('BPMN', xml);
|
|
||||||
if (href && filename) {
|
|
||||||
let a = document.createElement('a');
|
|
||||||
a.download = filename; //指定下载的文件名
|
|
||||||
a.href = href; // URL对象
|
|
||||||
a.click(); // 模拟点击
|
|
||||||
URL.revokeObjectURL(a.href); // 释放URL 对象
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateXml(xmlShow) {
|
|
||||||
this.xmlShow = xmlShow
|
|
||||||
},
|
|
||||||
handleExportSvg() {
|
|
||||||
const _this = this;
|
|
||||||
this.bpmnModeler.saveSVG(function (err, svg) {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
}
|
|
||||||
let {filename, href} = _this.setEncoded('SVG', svg);
|
|
||||||
if (href && filename) {
|
|
||||||
let a = document.createElement('a');
|
|
||||||
a.download = filename;
|
|
||||||
a.href = href;
|
|
||||||
a.click();
|
|
||||||
URL.revokeObjectURL(a.href);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
setEncoded(type, data) {
|
|
||||||
const encodedData = encodeURIComponent(data);
|
|
||||||
if (data) {
|
|
||||||
if (type === 'XML') {
|
|
||||||
return {
|
|
||||||
filename: 'diagram.bpmn20.xml',
|
|
||||||
href: "data:application/bpmn20-xml;charset=UTF-8," + encodedData,
|
|
||||||
data: data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (type === 'BPMN') {
|
|
||||||
return {
|
|
||||||
filename: 'diagram.bpmn',
|
|
||||||
href: "data:application/bpmn20-xml;charset=UTF-8," + encodedData,
|
|
||||||
data: data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (type === 'SVG') {
|
|
||||||
this.initData.svg = data;
|
|
||||||
return {
|
|
||||||
filename: 'diagram.svg',
|
|
||||||
href: "data:application/text/xml;charset=UTF-8," + encodedData,
|
|
||||||
data: data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
processSave(data){
|
|
||||||
let initData = this.initData;
|
|
||||||
const dataXml = this.bpmnData
|
|
||||||
dataXml.bpmnXml = this.xmlShow;
|
|
||||||
dataXml.name = initData.name;
|
|
||||||
dataXml.key = initData.key;
|
|
||||||
dataXml.description = initData.description;
|
|
||||||
this.$emit("processSave",dataXml);
|
|
||||||
},
|
|
||||||
restart() {
|
|
||||||
let processId = new Date().getTime();
|
|
||||||
this.initTemplate = templateXml.initTemplate(processId)
|
|
||||||
this.initData = {
|
|
||||||
key: this.bpmnData.key ? this.bpmnData.key : "process" + processId,
|
|
||||||
name: this.bpmnData.name ? this.bpmnData.name : "流程" + processId,
|
|
||||||
description: this.bpmnData.metaInfo ? JSON.parse(this.bpmnData.metaInfo).description : "" ,
|
|
||||||
xml: this.initTemplate}
|
|
||||||
this.initDiagram(this.initTemplate)
|
|
||||||
},
|
|
||||||
importXml() {
|
|
||||||
this.importXmlShow = true
|
|
||||||
},
|
|
||||||
closeShowXmlDialog(xmlData) {
|
|
||||||
this.importXmlShow = false
|
|
||||||
const that =this;
|
|
||||||
if (xmlData != null) {
|
|
||||||
this.initDiagram(xmlData)
|
|
||||||
// 刷新数据
|
|
||||||
setTimeout(function () {
|
|
||||||
that.bpmnModeler.saveXML({format: true}, function (err, xml) {
|
|
||||||
that.updateXml(xml)
|
|
||||||
})
|
|
||||||
},500)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getModdleExtensions() {
|
|
||||||
let moddleExtensions = {};
|
|
||||||
if (this.product === "flowable") {
|
|
||||||
moddleExtensions = {
|
|
||||||
flowable: flowableModule
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.product === "activiti") {
|
|
||||||
moddleExtensions = {
|
|
||||||
activiti: activitiModule
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return moddleExtensions;
|
|
||||||
},
|
|
||||||
beforeClose() {
|
|
||||||
this.$emit("beforeClose");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.djs-palette{
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
/deep/.el-tabs__header{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
/deep/.el-tabs--card>.el-tabs__header{
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,55 +0,0 @@
|
||||||
.bjs-powered-by{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.djs-palette.two-column.open{
|
|
||||||
width: 48px;
|
|
||||||
}
|
|
||||||
.container{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.bpmn-viewer{
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.bpmn-viewer-header{
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
padding-left: 20px;
|
|
||||||
background: #f8f8f8;
|
|
||||||
}
|
|
||||||
.bpmn-viewer-container{
|
|
||||||
padding: 10px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.bpmn-viewer-content{
|
|
||||||
width: 100%;
|
|
||||||
/*height: 100%;*/
|
|
||||||
height: calc(100vh - 150px);
|
|
||||||
overflow-x: hidden;
|
|
||||||
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+") repeat!important;
|
|
||||||
}
|
|
||||||
.el-collapse-item__header{
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
.bpmnclass .djs-direct-editing-parent{
|
|
||||||
/*display: none;*/
|
|
||||||
}
|
|
||||||
.bpmnclass .bpmn-panel {
|
|
||||||
/*width: 370px;*/
|
|
||||||
border: 1px solid #eeeeee;
|
|
||||||
padding: 0 5px;
|
|
||||||
}
|
|
||||||
.bpmnclass .el-select--small{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.bpmnclass > .is-fullscreen > .el-dialog__header:first-of-type{
|
|
||||||
padding: 0 ;
|
|
||||||
}
|
|
||||||
.bpmnclass .el-dialog > .el-dialog__body{
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0 ;
|
|
||||||
/*border: 1px solid #cccccc;*/
|
|
||||||
}
|
|
||||||
.bpmnclass .default-undo{
|
|
||||||
color: #c0c4cc;
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,13 +0,0 @@
|
||||||
{
|
|
||||||
"datalist": {
|
|
||||||
"error": {
|
|
||||||
"type": 1,
|
|
||||||
"number": [
|
|
||||||
1
|
|
||||||
],
|
|
||||||
"list": []
|
|
||||||
},
|
|
||||||
"not": [],
|
|
||||||
"right": []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div v-if="type==1"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "data",
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,22 +0,0 @@
|
||||||
let xml = `
|
|
||||||
<bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
|
|
||||||
<bpmn2:process id="process{str}" name="流程{str}">
|
|
||||||
<bpmn2:startEvent id="StartEvent_01ydzqe" name="开始" activiti:initiator="applyUserId" />
|
|
||||||
</bpmn2:process>
|
|
||||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
|
||||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process{str}">
|
|
||||||
<bpmndi:BPMNShape id="StartEvent_01ydzqe_di" bpmnElement="StartEvent_01ydzqe">
|
|
||||||
<dc:Bounds x="142" y="212" width="36" height="36" />
|
|
||||||
<bpmndi:BPMNLabel>
|
|
||||||
<dc:Bounds x="149" y="255" width="22" height="14" />
|
|
||||||
</bpmndi:BPMNLabel>
|
|
||||||
</bpmndi:BPMNShape>
|
|
||||||
</bpmndi:BPMNPlane>
|
|
||||||
</bpmndi:BPMNDiagram>
|
|
||||||
</bpmn2:definitions>`;
|
|
||||||
|
|
||||||
export default {
|
|
||||||
initTemplate: function (str) {
|
|
||||||
return xml.replace(/{str}/g, str)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import translations from './zn'
|
|
||||||
export default function customTranslate(template, replacements) {
|
|
||||||
replacements = replacements || {};
|
|
||||||
|
|
||||||
// Translate
|
|
||||||
template = translations[template] || template;
|
|
||||||
|
|
||||||
// Replace
|
|
||||||
return template.replace(/{([^}]+)}/g, function(_, key) {
|
|
||||||
return replacements[key] || '{' + key + '}';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
export default {
|
|
||||||
|
|
||||||
// Labels
|
|
||||||
'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': '启动 Lasso 工具',
|
|
||||||
'Activate the create/remove space tool': '启动创建/删除空间工具',
|
|
||||||
'Create expanded SubProcess': '创建可折叠子流程',
|
|
||||||
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出/边界事件',
|
|
||||||
'Create Pool/Participant': '创建池/参与者',
|
|
||||||
'Parallel Multi Instance': '并行多实例',
|
|
||||||
'Sequential Multi Instance': '串行多实例',
|
|
||||||
'Loop': '循环',
|
|
||||||
'Ad-hoc': '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': '开始事件',
|
|
||||||
'Intermediate Throw Event': '中间抛出事件',
|
|
||||||
'End 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}': '在 {element} 中没有父元素 {parent}',
|
|
||||||
'no shape type specified': '未指定形状类型',
|
|
||||||
'flow elements must be children of pools/participants': '元素必须是池/参与者的子级',
|
|
||||||
'out of bounds release': '越界释放',
|
|
||||||
'more than {count} child lanes': '超过 {count} 条通道',
|
|
||||||
'element required': '需要元素',
|
|
||||||
'diagram not part of bpmn:Definitions': '图表不是 bpmn:Definitions 的一部分',
|
|
||||||
'no diagram to display': '没有要显示的图表',
|
|
||||||
'no process or collaboration to display': '没有可显示的流程或协作',
|
|
||||||
'element {element} referenced by {referenced}#{property} not yet drawn': '元素 {element} 的引用 {referenced}#{property} 尚未绘制',
|
|
||||||
'already rendered {element}': '{element} 已呈现',
|
|
||||||
'failed to import {element}': '{element} 导入失败',
|
|
||||||
|
|
||||||
'Create StartEvent':'创建开始节点',
|
|
||||||
'Create Intermediate/Boundary Event':'创建中间/边界事件',
|
|
||||||
'Create EndEvent':'创建结束节点',
|
|
||||||
'Create Gateway':'创建网关',
|
|
||||||
'Create Task':'创建任务',
|
|
||||||
'Append ExclusiveGateway':'网关',
|
|
||||||
'Append UserTask':'用户任务',
|
|
||||||
'Append EndEvent':'结束节点'
|
|
||||||
};
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-dialog title="导入BPMN" :visible.sync="dialogFormVisible" :before-close="close">
|
|
||||||
<el-form>
|
|
||||||
<editor v-model="xmlData" @init="editorInit" lang="xml" theme="chrome" width="98%" height="calc(60vh - 100px)"></editor>
|
|
||||||
</el-form>
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="commitForm()">确 定</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "ImportDialog",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeNames: ['1'],
|
|
||||||
formLabelWidth: "200px",
|
|
||||||
xmlData: "类",
|
|
||||||
value: "类",
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: "类",
|
|
||||||
label: "类"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
editor: require('vue2-ace-editor'),
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
dialogVisibleBool:{
|
|
||||||
type: Boolean,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
dialogFormVisible:{
|
|
||||||
get(){
|
|
||||||
this.xmlData = null
|
|
||||||
return this.dialogVisibleBool
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.xmlData = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
editorInit: function (editor) {
|
|
||||||
require('brace/mode/xml')
|
|
||||||
require('brace/theme/chrome')
|
|
||||||
editor.setOptions({
|
|
||||||
fontSize: "15px"
|
|
||||||
})
|
|
||||||
editor.getSession().setUseWrapMode(true);
|
|
||||||
},
|
|
||||||
commitForm(){
|
|
||||||
this.$emit('closeShowXmlDialog', this.xmlData);
|
|
||||||
},
|
|
||||||
close(){
|
|
||||||
this.$emit('closeShowXmlDialog', null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,319 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!-- 流程属性 -->
|
|
||||||
<el-collapse v-model="activeNames" accordion>
|
|
||||||
<el-collapse-item name="1">
|
|
||||||
<template slot="title">
|
|
||||||
<div class="title">
|
|
||||||
<i class="header-icon el-icon-setting"></i>
|
|
||||||
<span>基本设置</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<el-form label-position="right" label-width="70px">
|
|
||||||
<el-form-item label="节点类型">
|
|
||||||
<el-input v-model="localFormData.type" disabled></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="ID">
|
|
||||||
<el-input v-model="localFormData.id" @input="updateId"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="名称">
|
|
||||||
<el-input v-model="localFormData.name " @input="updateName"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-if="localFormData.type==='bpmn:SequenceFlow'" label="分支条件">
|
|
||||||
<el-input v-model="localFormData.sequenceFlow" @input="updateSequenceFlow"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
|
|
||||||
<el-collapse-item name="2">
|
|
||||||
<template slot="title">
|
|
||||||
<div class="title">
|
|
||||||
<i class="header-icon el-icon-setting"></i>
|
|
||||||
<span>执行监听</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<div style="margin: 10px 3%;float: right">
|
|
||||||
<el-button size="mini" plain @click="showEventDialogMethod">添加</el-button>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
border :data="listenerTable"
|
|
||||||
style="width: 93%;margin: 0 auto">
|
|
||||||
<el-table-column align="center" prop="event"
|
|
||||||
label="事件">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="type" :show-overflow-tooltip="true"
|
|
||||||
label="类型">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="class" :show-overflow-tooltip="true"
|
|
||||||
label="实现">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center"
|
|
||||||
label="操作">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div>
|
|
||||||
<i class="el-icon-delete" @click="deleteEvent(scope.$index)"></i>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="3" v-if="localFormData.type=='bpmn:UserTask'" >
|
|
||||||
<template slot="title">
|
|
||||||
<div class="title">
|
|
||||||
<i class="header-icon el-icon-setting"></i>
|
|
||||||
<span>权限设置</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<el-form style="margin-top: 25px" label-position="right" label-width="90px">
|
|
||||||
<el-form-item label="用户类型:">
|
|
||||||
<el-select v-model="localFormData.userType" placeholder="请选择" @change="changeUserType" style="width: 90%">
|
|
||||||
<el-option value="assignee" label="指定人员"></el-option>
|
|
||||||
<el-option value="candidateUsers" label="候选人员"></el-option>
|
|
||||||
<el-option value="candidateGroups" label="角色/岗位"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="指定人员" v-if="localFormData.userType === 'assignee'">
|
|
||||||
<el-input placeholder="请输入内容" v-model="localFormData.assignee" @input="(value) => addUser({assignee: value})" style="width: 90%">
|
|
||||||
<template slot="append">
|
|
||||||
<div class="icon-div">
|
|
||||||
<i class="el-icon-user" @click="showUserDialogMethod" />
|
|
||||||
<!-- <div role="separator" class="ant-divider ant-divider-vertical"></div>-->
|
|
||||||
<!-- <i class="el-icon-c-scale-to-original" />-->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="候选人员" v-else-if="localFormData.userType === 'candidateUsers'">
|
|
||||||
<el-input placeholder="请输入内容" v-model="localFormData.candidateUsers" @input="(value) => addUser({candidateUsers: value})" style="width: 90%">
|
|
||||||
<template slot="append">
|
|
||||||
<div class="icon-div">
|
|
||||||
<i class="el-icon-user" @click="showUserDialogMethod" />
|
|
||||||
<!-- <div role="separator" class="ant-divider ant-divider-vertical"></div>-->
|
|
||||||
<!-- <i class="el-icon-c-scale-to-original" />-->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="角色/岗位" v-else-if="localFormData.userType === 'candidateGroups'">
|
|
||||||
<el-input placeholder="请输入内容" v-model="localFormData.candidateGroups" @input="(value) => addUser({candidateGroups: value})" style="width: 90%">
|
|
||||||
<template slot="append">
|
|
||||||
<div class="icon-div">
|
|
||||||
<i class="el-icon-user" @click="showUserDialogMethod" />
|
|
||||||
<!-- <div role="separator" class="ant-divider ant-divider-vertical"></div>-->
|
|
||||||
<!-- <i class="el-icon-c-scale-to-original" />-->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
<EventListenerDialog @commitEventForm="commitEventForm"
|
|
||||||
:dialogFormVisibleBool="showEventDialog"
|
|
||||||
:formData="eventFormData" :nodeElement="nodeElement" :modeler="modeler" :listenerTable="listenerTable"></EventListenerDialog>
|
|
||||||
<UserSelectDialog @commitUserForm="commitUserForm"
|
|
||||||
:type="localFormData.userType"
|
|
||||||
:dialogFormVisibleBool="showUserDialog"
|
|
||||||
:formData="userFormData"
|
|
||||||
:nodeElement="nodeElement"
|
|
||||||
:modeler="modeler"></UserSelectDialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import EventListenerDialog from "./dialog/EventListenerDialog"
|
|
||||||
import UserSelectDialog from "./dialog/UserSelectDialog"
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "NodePropertyPanel",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeNames: ['1'],
|
|
||||||
listenerTable: [],
|
|
||||||
showEventDialog: false,
|
|
||||||
showUserDialog: false,
|
|
||||||
eventFormData: {},
|
|
||||||
userFormData: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
EventListenerDialog,UserSelectDialog
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modeler: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
nodeElement: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
formData:{
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
localFormData:{
|
|
||||||
get(){
|
|
||||||
return this.formData
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const that = this
|
|
||||||
if (this.nodeElement.businessObject
|
|
||||||
&& this.nodeElement.businessObject.extensionElements
|
|
||||||
&& this.nodeElement.businessObject.extensionElements.values) {
|
|
||||||
// 根据xml 组合当前节点的监听数据
|
|
||||||
that.listenerTable = this.nodeElement.businessObject.extensionElements.values.filter(
|
|
||||||
(item) => {
|
|
||||||
if (item.$type === 'activiti:ExecutionListener') {
|
|
||||||
item.type = Object.keys(item)[1]
|
|
||||||
item.class = item[Object.keys(item)[1]]
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
nodeElement:{
|
|
||||||
handler(){
|
|
||||||
if(this.nodeElement.type==="bpmn:StartEvent"){
|
|
||||||
this.updateName("开始");
|
|
||||||
}
|
|
||||||
if(this.nodeElement.type==="bpmn:EndEvent"){
|
|
||||||
this.updateName("结束");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateProperties(properties){
|
|
||||||
this.modeler.get("modeling").updateProperties(this.nodeElement, properties);
|
|
||||||
},
|
|
||||||
updateId(name) {
|
|
||||||
this.updateProperties({id: name});
|
|
||||||
},
|
|
||||||
updateName(name) {
|
|
||||||
this.updateProperties({name: name});
|
|
||||||
},
|
|
||||||
changeUserType() {
|
|
||||||
},
|
|
||||||
updateSequenceFlow(val){
|
|
||||||
let newCondition = this.modeler.get("moddle").create('bpmn:FormalExpression', {
|
|
||||||
body: val
|
|
||||||
});
|
|
||||||
this.updateProperties({conditionExpression:newCondition});
|
|
||||||
},
|
|
||||||
addUser(properties){
|
|
||||||
this.updateProperties(properties);
|
|
||||||
Object.assign(properties, {
|
|
||||||
userType: Object.keys(properties)[0]
|
|
||||||
});
|
|
||||||
console.log(properties)
|
|
||||||
this.$emit('modifyFormData',properties);
|
|
||||||
},
|
|
||||||
showEventDialogMethod(){
|
|
||||||
this.showEventDialog = true;
|
|
||||||
this.eventFormData= {
|
|
||||||
event:"start",
|
|
||||||
type:"class"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showUserDialogMethod(){
|
|
||||||
this.showUserDialog = true;
|
|
||||||
this.eventFormData= {
|
|
||||||
event:"start",
|
|
||||||
type:"class"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteEvent(index){
|
|
||||||
const data = this.listenerTable[index]
|
|
||||||
if (this.nodeElement.businessObject
|
|
||||||
&& this.nodeElement.businessObject.extensionElements
|
|
||||||
&& this.nodeElement.businessObject.extensionElements.values) {
|
|
||||||
// 排除全局监听类型 并且class为删除的class的数据。
|
|
||||||
const filterArr = this.nodeElement.businessObject.extensionElements.values.filter(
|
|
||||||
(item) => !(item.$type === 'activiti:ExecutionListener' && item.event === data.event && data.class === item[data.type])
|
|
||||||
)
|
|
||||||
// 刷新数据
|
|
||||||
let extensionElements = this.modeler.get("bpmnFactory").create("bpmn:ExtensionElements", {values: filterArr});
|
|
||||||
this.modeler.get("modeling").updateProperties(this.nodeElement, {extensionElements});
|
|
||||||
}
|
|
||||||
this.listenerTable.splice(index, 1);
|
|
||||||
},
|
|
||||||
commitEventForm(from){
|
|
||||||
this.showEventDialog = false
|
|
||||||
if (from != null) {
|
|
||||||
// 筛选原来数组里是不是有跟刚提交的数据一模一样的数据
|
|
||||||
this.listenerTable.push(from)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
commitUserForm(from){
|
|
||||||
this.showUserDialog = false
|
|
||||||
if (from != null) {
|
|
||||||
console.log(from)
|
|
||||||
// 筛选原来数组里是不是有跟刚提交的数据一模一样的数据
|
|
||||||
// this.listenerTable.push(from)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.bpmnclass .title span{
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
.bpmnclass .el-select .el-input .el-select__caret{
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
.bpmnclass .el-input__icon{
|
|
||||||
height: 20px !important;
|
|
||||||
line-height: 20px !important;
|
|
||||||
}
|
|
||||||
.bpmnclass .el-input-group__append{
|
|
||||||
padding: 0 5px !important;
|
|
||||||
}
|
|
||||||
.bpmnclass .icon-div{
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: bold !important;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.bpmnclass .icon-div i{
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
.bpmnclass .icon-div i:hover{
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
.bpmnclass .ant-divider-vertical {
|
|
||||||
position: relative;
|
|
||||||
top: -0.08em;
|
|
||||||
display: inline-block;
|
|
||||||
width: 2px;
|
|
||||||
height: 0.9em;
|
|
||||||
/*margin: 0 8px;*/
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.bpmnclass .ant-divider {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
font-size: 14px;
|
|
||||||
font-variant: tabular-nums;
|
|
||||||
line-height: 1.5;
|
|
||||||
list-style: none;
|
|
||||||
/*font-feature-settings: "tnum";*/
|
|
||||||
background: #e8e8e8;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,245 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-collapse v-model="activeNames" accordion>
|
|
||||||
<el-collapse-item name="1">
|
|
||||||
<template slot="title">
|
|
||||||
<div class="title">
|
|
||||||
<i class="header-icon el-icon-setting"></i>
|
|
||||||
<span>基本设置</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<el-form label-position="right" label-width="70px">
|
|
||||||
<el-form-item label="流程ID">
|
|
||||||
<el-input v-model="localProcessData.key" @input="updateId"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="流程名称">
|
|
||||||
<el-input v-model="localProcessData.name" @input="updateName"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="流程描述">
|
|
||||||
<el-input v-model="localProcessData.description" @input="updateDesc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="2">
|
|
||||||
<template slot="title">
|
|
||||||
<div class="title">
|
|
||||||
<i class="header-icon el-icon-setting"></i>
|
|
||||||
<span>执行监听</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<div style="margin: 10px 3%;float: right">
|
|
||||||
<el-button size="mini" plain @click="showEventDialogMethod">添加</el-button>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
border :data="listenerTable"
|
|
||||||
style="width: 93%;margin: 0 auto">
|
|
||||||
<el-table-column align="center" prop="event"
|
|
||||||
label="事件">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="type" :show-overflow-tooltip="true"
|
|
||||||
label="类型">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="class" :show-overflow-tooltip="true"
|
|
||||||
label="实现">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center"
|
|
||||||
label="操作">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div>
|
|
||||||
<i class="el-icon-delete" @click="deleteEvent(scope.$index)"></i>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="3">
|
|
||||||
<template slot="title">
|
|
||||||
<div class="title">
|
|
||||||
<i class="header-icon el-icon-setting"></i>
|
|
||||||
<span>全局监听</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<div style="margin: 10px 3%;float: right">
|
|
||||||
<el-button size="mini" plain @click="showGlobalDialogMethod">添加</el-button>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
border :data="globalFormTable"
|
|
||||||
style="width: 93%;margin: 0 auto">
|
|
||||||
<el-table-column align="center" prop="class" :show-overflow-tooltip="true"
|
|
||||||
label="值">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center"
|
|
||||||
label="操作">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div>
|
|
||||||
<i class="el-icon-delete" @click="deleteGlobalEvent(scope.$index)"></i>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
<GlobalEventListenerDialog @commitGlobalForm="commitGlobalForm"
|
|
||||||
:dialogFormVisibleBool="showGlobalDialog"
|
|
||||||
:formData="globalFormData" :element="element" :modeler="modeler" :globalFormTable="globalFormTable"></GlobalEventListenerDialog>
|
|
||||||
<EventListenerDialog @commitEventForm="commitEventForm"
|
|
||||||
:dialogFormVisibleBool="showEventDialog"
|
|
||||||
:formData="eventFormData" :nodeElement="element" :modeler="modeler" :listenerTable="listenerTable"></EventListenerDialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import GlobalEventListenerDialog from "./dialog/GlobalEventListenerDialog"
|
|
||||||
import EventListenerDialog from "./dialog/EventListenerDialog"
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "ProcessProperty",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeNames: ['1'],
|
|
||||||
showGlobalDialog: false,
|
|
||||||
showEventDialog: false,
|
|
||||||
listenerTable: [
|
|
||||||
|
|
||||||
],
|
|
||||||
globalFormTable: [
|
|
||||||
|
|
||||||
],
|
|
||||||
globalFormData: {
|
|
||||||
type:"start"
|
|
||||||
},
|
|
||||||
eventFormData: {
|
|
||||||
event:"class",
|
|
||||||
type:"start"
|
|
||||||
},
|
|
||||||
localProcessData:this.processData
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
GlobalEventListenerDialog,EventListenerDialog
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
processData: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
modeler: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
element: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
var that = this
|
|
||||||
if (this.element.businessObject
|
|
||||||
&& this.element.businessObject.extensionElements
|
|
||||||
&& this.element.businessObject.extensionElements.values) {
|
|
||||||
that.globalFormTable = this.element.businessObject.extensionElements.values.filter(
|
|
||||||
(item) => item.$type === 'activiti:EventListener'
|
|
||||||
)
|
|
||||||
that.listenerTable = this.element.businessObject.extensionElements.values.filter(
|
|
||||||
(item) => {
|
|
||||||
if (item.$type === 'activiti:ExecutionListener') {
|
|
||||||
item.type = Object.keys(item)[1]
|
|
||||||
item.class = item[Object.keys(item)[1]]
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
deleteGlobalEvent(index){
|
|
||||||
const data = this.globalFormTable[index]
|
|
||||||
if (this.element.businessObject
|
|
||||||
&& this.element.businessObject.extensionElements
|
|
||||||
&& this.element.businessObject.extensionElements.values) {
|
|
||||||
// 排除全局监听类型 并且class为删除的class的数据。
|
|
||||||
const filterArr = this.element.businessObject.extensionElements.values.filter(
|
|
||||||
(item) => !(item.$type === 'activiti:EventListener' && item.class === data.class)
|
|
||||||
)
|
|
||||||
// 刷新数据
|
|
||||||
let extensionElements = this.modeler.get("bpmnFactory").create("bpmn:ExtensionElements", {values: filterArr});
|
|
||||||
this.modeler.get("modeling").updateProperties(this.element, {extensionElements});
|
|
||||||
}
|
|
||||||
this.globalFormTable.splice(index, 1);
|
|
||||||
},
|
|
||||||
deleteEvent(index){
|
|
||||||
const data = this.listenerTable[index]
|
|
||||||
if (this.element.businessObject
|
|
||||||
&& this.element.businessObject.extensionElements
|
|
||||||
&& this.element.businessObject.extensionElements.values) {
|
|
||||||
// 排除全局监听类型 并且class为删除的class的数据。
|
|
||||||
const filterArr = this.element.businessObject.extensionElements.values.filter(
|
|
||||||
(item) => !(item.$type === 'activiti:ExecutionListener' && item.event === data.event && data.class === item[data.type])
|
|
||||||
)
|
|
||||||
// 刷新数据
|
|
||||||
let extensionElements = this.modeler.get("bpmnFactory").create("bpmn:ExtensionElements", {values: filterArr});
|
|
||||||
this.modeler.get("modeling").updateProperties(this.element, {extensionElements});
|
|
||||||
}
|
|
||||||
this.listenerTable.splice(index, 1);
|
|
||||||
},
|
|
||||||
showGlobalDialogMethod(){
|
|
||||||
this.showGlobalDialog = true;
|
|
||||||
this.globalFormData={
|
|
||||||
type:"class"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showEventDialogMethod(){
|
|
||||||
this.showEventDialog = true;
|
|
||||||
this.eventFormData= {
|
|
||||||
event:"start",
|
|
||||||
type:"class"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateId(name) {
|
|
||||||
this.modeler.get("modeling").updateProperties(this.element, {id: name});
|
|
||||||
},
|
|
||||||
updateName(name) {
|
|
||||||
this.modeler.get("modeling").updateProperties(this.element, {name: name});
|
|
||||||
},
|
|
||||||
updateDesc(name) {
|
|
||||||
let doc = this.modeler.get("bpmnFactory").create("bpmn:Documentation", {text: name});
|
|
||||||
this.modeler.get("modeling").updateProperties(this.element, {documentation: [doc]});
|
|
||||||
console.log( this.modeler.get("modeling"))
|
|
||||||
},
|
|
||||||
commitEventForm(from){
|
|
||||||
this.showEventDialog = false
|
|
||||||
if (from != null) {
|
|
||||||
this.listenerTable.push(from)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
commitGlobalForm(from){
|
|
||||||
this.showGlobalDialog = false
|
|
||||||
if (from != null) {
|
|
||||||
|
|
||||||
this.globalFormTable.push(from)
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.bpmnclass .title span{
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
.el-tooltip__popper{
|
|
||||||
font-size: 14px;
|
|
||||||
max-width:50%;
|
|
||||||
backgroud: #68859a !important; /*背景色 !important优先级*/
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,240 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!-- 开始节点 -->
|
|
||||||
<el-collapse v-if="localFormData.type=='bpmn:StartEvent'" v-model="activeNames" accordion>
|
|
||||||
<el-collapse-item name="1">
|
|
||||||
<template slot="title">
|
|
||||||
<div class="title">
|
|
||||||
<i class="header-icon el-icon-setting"></i>
|
|
||||||
<span>基本设置</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<el-form label-position="right" label-width="70px">
|
|
||||||
<el-form-item label="节点类型">
|
|
||||||
<el-input v-model="localFormData.type" disabled></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="ID">
|
|
||||||
<el-input v-model="localFormData.id" @input="updateId"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="名称">
|
|
||||||
<el-input v-model="localFormData.name " @input="updateName"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="2">
|
|
||||||
<template slot="title">
|
|
||||||
<div class="title">
|
|
||||||
<i class="header-icon el-icon-setting"></i>
|
|
||||||
<span>执行监听</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<div style="margin: 10px 3%;float: right">
|
|
||||||
<el-button size="mini" plain @click="showEventDialogMethod">添加</el-button>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
border :data="listenerTable"
|
|
||||||
style="width: 93%;margin: 0 auto">
|
|
||||||
<el-table-column align="center" prop="event"
|
|
||||||
label="事件">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="type" :show-overflow-tooltip="true"
|
|
||||||
label="类型">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="class" :show-overflow-tooltip="true"
|
|
||||||
label="实现">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center"
|
|
||||||
label="操作">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div>
|
|
||||||
<i class="el-icon-delete" @click="deleteEvent(scope.$index)"></i>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
|
|
||||||
</el-collapse>
|
|
||||||
<EventListenerDialog @commitEventForm="commitEventForm"
|
|
||||||
:dialogFormVisibleBool="showEventDialog"
|
|
||||||
:formData="eventFormData" :nodeElement="nodeElement" :modeler="modeler" :listenerTable="listenerTable"></EventListenerDialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import EventListenerDialog from "./dialog/EventListenerDialog"
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "NodePropertyPanel",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeNames: ['1'],
|
|
||||||
input3: 1,
|
|
||||||
listenerTable: [],
|
|
||||||
showEventDialog: false,
|
|
||||||
eventFormData: {},
|
|
||||||
bpmnData: {
|
|
||||||
assignees: [{
|
|
||||||
value: "${assignee}",
|
|
||||||
label: "表达式"
|
|
||||||
}, {
|
|
||||||
value: "1001",
|
|
||||||
label: "张三"
|
|
||||||
}, {
|
|
||||||
value: "1002",
|
|
||||||
label: "李四"
|
|
||||||
}, {
|
|
||||||
value: "1003",
|
|
||||||
label: "王五"
|
|
||||||
}],
|
|
||||||
candidateUsers:[{
|
|
||||||
value: "1001",
|
|
||||||
label: "张三"
|
|
||||||
}, {
|
|
||||||
value: "1002",
|
|
||||||
label: "李四"
|
|
||||||
}, {
|
|
||||||
value: "1003",
|
|
||||||
label: "王五"
|
|
||||||
}],
|
|
||||||
roles: [
|
|
||||||
{
|
|
||||||
value: "manager",
|
|
||||||
label: "经理"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "personnel",
|
|
||||||
label: "人事"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "charge",
|
|
||||||
label: "主管"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
EventListenerDialog
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modeler: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
nodeElement: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
formData:{
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
localFormData:{
|
|
||||||
get(){
|
|
||||||
return this.formData
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
nodeElement:{
|
|
||||||
handler(){
|
|
||||||
if(this.nodeElement.type==="bpmn:StartEvent"){
|
|
||||||
this.updateName("开始");
|
|
||||||
}
|
|
||||||
if(this.nodeElement.type==="bpmn:EndEvent"){
|
|
||||||
this.updateName("结束");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const that = this
|
|
||||||
if (this.nodeElement.businessObject
|
|
||||||
&& this.nodeElement.businessObject.extensionElements
|
|
||||||
&& this.nodeElement.businessObject.extensionElements.values) {
|
|
||||||
// 根据xml 组合当前节点的监听数据
|
|
||||||
that.listenerTable = this.nodeElement.businessObject.extensionElements.values.filter(
|
|
||||||
(item) => {
|
|
||||||
if (item.$type === 'activiti:ExecutionListener') {
|
|
||||||
item.type = Object.keys(item)[1]
|
|
||||||
item.class = item[Object.keys(item)[1]]
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateProperties(properties){
|
|
||||||
console.log(this.nodeElement)
|
|
||||||
console.log(properties)
|
|
||||||
this.modeler.get("modeling").updateProperties(this.nodeElement, properties);
|
|
||||||
},
|
|
||||||
updateId(name) {
|
|
||||||
this.updateProperties({id: name});
|
|
||||||
},
|
|
||||||
updateName(name) {
|
|
||||||
this.updateProperties({name: name});
|
|
||||||
},
|
|
||||||
changeUserType() {
|
|
||||||
},
|
|
||||||
updateSequenceFlow(val){
|
|
||||||
let newCondition = this.modeler.get("moddle").create('bpmn:FormalExpression', {
|
|
||||||
body: val
|
|
||||||
});
|
|
||||||
this.updateProperties({conditionExpression:newCondition});
|
|
||||||
},
|
|
||||||
addUser(properties){
|
|
||||||
this.updateProperties(properties);
|
|
||||||
Object.assign(properties, {
|
|
||||||
userType: Object.keys(properties)[0]
|
|
||||||
});
|
|
||||||
console.log(properties)
|
|
||||||
this.$emit('modifyFormData',properties);
|
|
||||||
},
|
|
||||||
showEventDialogMethod(){
|
|
||||||
this.showEventDialog = true;
|
|
||||||
this.eventFormData= {
|
|
||||||
event:"start",
|
|
||||||
type:"class"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteEvent(index){
|
|
||||||
const data = this.listenerTable[index]
|
|
||||||
if (this.nodeElement.businessObject
|
|
||||||
&& this.nodeElement.businessObject.extensionElements
|
|
||||||
&& this.nodeElement.businessObject.extensionElements.values) {
|
|
||||||
// 排除全局监听类型 并且class为删除的class的数据。
|
|
||||||
const filterArr = this.nodeElement.businessObject.extensionElements.values.filter(
|
|
||||||
(item) => !(item.$type === 'activiti:ExecutionListener' && item.event === data.event && data.class === item[data.type])
|
|
||||||
)
|
|
||||||
// 刷新数据
|
|
||||||
let extensionElements = this.modeler.get("bpmnFactory").create("bpmn:ExtensionElements", {values: filterArr});
|
|
||||||
this.modeler.get("modeling").updateProperties(this.nodeElement, {extensionElements});
|
|
||||||
}
|
|
||||||
this.listenerTable.splice(index, 1);
|
|
||||||
},
|
|
||||||
commitEventForm(from){
|
|
||||||
this.showEventDialog = false
|
|
||||||
if (from != null) {
|
|
||||||
this.listenerTable.push(from)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.bpmnclass .title span{
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,119 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-dialog title="自定义全局监听器" :visible.sync="dialogFormVisible" :before-close="close">
|
|
||||||
<el-form :model="form">
|
|
||||||
<el-form-item label="事件类型:" :label-width="formLabelWidth">
|
|
||||||
<el-select v-model="form.type" placeholder="选择">
|
|
||||||
<el-option label="类" value="class"></el-option>
|
|
||||||
<el-option label="表达式" value="expression"></el-option>
|
|
||||||
<el-option label="代理表达式" value="delegateExpression"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="事件类型:" :label-width="formLabelWidth">
|
|
||||||
<el-select v-model="form.event" placeholder="选择">
|
|
||||||
<el-option label="start" value="start"></el-option>
|
|
||||||
<el-option label="take" value="take"></el-option>
|
|
||||||
<el-option label="end" value="end"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="值:" :label-width="formLabelWidth">
|
|
||||||
<el-input v-model="form.class" style="width: 50%"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="commitForm()">确 定</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "EventListenerDialog",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeNames: ['1'],
|
|
||||||
formLabelWidth: "200px",
|
|
||||||
value: "类",
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: "类",
|
|
||||||
label: "类"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
formData:{
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
dialogFormVisibleBool:{
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
modeler: {
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
nodeElement:{
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
listenerTable:{
|
|
||||||
type: Array,
|
|
||||||
required: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
form:{
|
|
||||||
get(){
|
|
||||||
return this.formData;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dialogFormVisible:{
|
|
||||||
get(){
|
|
||||||
return this.dialogFormVisibleBool
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
commitForm(){
|
|
||||||
if (!this.form.class || this.form.class === "" ) {
|
|
||||||
this.msgError("class不能为空");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const from = this.form
|
|
||||||
const filterArr = this.listenerTable.filter(
|
|
||||||
(item) => (item.event === from.event && from.type === item.type && from.class === item.class)
|
|
||||||
)
|
|
||||||
if (filterArr.length !== 0) {
|
|
||||||
this.$emit('commitEventForm', null);
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let data = {}
|
|
||||||
data[from.type] = from.class
|
|
||||||
data['event'] = from.event
|
|
||||||
if (this.nodeElement.businessObject
|
|
||||||
&& this.nodeElement.businessObject.extensionElements
|
|
||||||
&& this.nodeElement.businessObject.extensionElements.values) {
|
|
||||||
let eventListener = this.modeler.get("bpmnFactory").create("activiti:ExecutionListener", data);
|
|
||||||
let extensionElements = this.modeler.get("bpmnFactory").create("bpmn:ExtensionElements",
|
|
||||||
{values: this.nodeElement.businessObject.extensionElements.values.concat(eventListener),});
|
|
||||||
this.modeler.get("modeling").updateProperties(this.nodeElement, {extensionElements});
|
|
||||||
} else {
|
|
||||||
|
|
||||||
let eventListener = this.modeler.get("bpmnFactory").create("activiti:ExecutionListener", data);
|
|
||||||
let extensionElements = this.modeler.get("bpmnFactory").create("bpmn:ExtensionElements", {values: [eventListener],});
|
|
||||||
this.modeler.get("modeling").updateProperties(this.nodeElement, {extensionElements});
|
|
||||||
}
|
|
||||||
this.$emit('commitEventForm', this.form);
|
|
||||||
},
|
|
||||||
close(){
|
|
||||||
this.$emit('commitEventForm', null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-dialog title="自定义全局监听器" :visible.sync="dialogFormVisible" :before-close="close">
|
|
||||||
<el-form :model="form">
|
|
||||||
<el-form-item label="监听类型:" :label-width="formLabelWidth">
|
|
||||||
<el-select v-model="form.type" placeholder="选择">
|
|
||||||
<el-option label="类" value="class"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="值:" :label-width="formLabelWidth">
|
|
||||||
<el-input v-model="form.class" style="width: 50%"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="commitForm()">确 定</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "GlobalEventListenerDialog",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeNames: ['1'],
|
|
||||||
listenerTable: [],
|
|
||||||
formLabelWidth: "200px",
|
|
||||||
value: "类",
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: "类",
|
|
||||||
label: "类"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
formData:{
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
dialogFormVisibleBool:{
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
modeler: {
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
element:{
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
globalFormTable:{
|
|
||||||
type: Array,
|
|
||||||
required: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
form:{
|
|
||||||
get(){
|
|
||||||
return this.formData;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dialogFormVisible:{
|
|
||||||
get(){
|
|
||||||
return this.dialogFormVisibleBool
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
commitForm(){
|
|
||||||
if (!this.formData.class || this.formData.class === "" ) {
|
|
||||||
this.msgError("class不能为空");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const from = this.formData;
|
|
||||||
// 获取原数组中是否存在这个class了 如果存在就退出不操作
|
|
||||||
const filterArr = this.globalFormTable.filter(
|
|
||||||
(item) => item.class === from.class
|
|
||||||
)
|
|
||||||
if (filterArr.length !== 0) {
|
|
||||||
this.$emit('commitGlobalForm', null);
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.element.businessObject
|
|
||||||
&& this.element.businessObject.extensionElements
|
|
||||||
&& this.element.businessObject.extensionElements.values) {
|
|
||||||
let eventListener = this.modeler.get("bpmnFactory").create("activiti:EventListener", from);
|
|
||||||
let extensionElements = this.modeler.get("bpmnFactory").create("bpmn:ExtensionElements",
|
|
||||||
{
|
|
||||||
values: this.element.businessObject.extensionElements.values.concat(eventListener),
|
|
||||||
}
|
|
||||||
);
|
|
||||||
this.modeler.get("modeling").updateProperties(this.element, {extensionElements});
|
|
||||||
} else {
|
|
||||||
let eventListener = this.modeler.get("bpmnFactory").create("activiti:EventListener", from);
|
|
||||||
let extensionElements = this.modeler.get("bpmnFactory").create("bpmn:ExtensionElements",
|
|
||||||
{
|
|
||||||
values: [eventListener],
|
|
||||||
}
|
|
||||||
);
|
|
||||||
this.modeler.get("modeling").updateProperties(this.element, {extensionElements});
|
|
||||||
}
|
|
||||||
this.$emit('commitGlobalForm', this.form);
|
|
||||||
},
|
|
||||||
close(){
|
|
||||||
this.$emit('commitGlobalForm', null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-dialog width="60%" title="用户选择" :visible.sync="dialogFormVisible" :before-close="close">
|
|
||||||
<el-form>
|
|
||||||
<el-row style="width: 93%;margin: 0 auto">
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="账户:" >
|
|
||||||
<el-input v-model="searchData.account" style="width:80%" ></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="昵称:">
|
|
||||||
<el-input v-model="searchData.name" style="width:80%" ></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="5">
|
|
||||||
<el-button type="primary">查询</el-button>
|
|
||||||
<el-button >重置</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-form-item>
|
|
||||||
<el-table v-show="type === 'assignee'"
|
|
||||||
border :data="options"
|
|
||||||
style="width: 93%;margin: 0 auto">
|
|
||||||
<el-table-column align="center" prop="account"
|
|
||||||
label="账户">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="name" :show-overflow-tooltip="true"
|
|
||||||
label="昵称">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center"
|
|
||||||
label="操作">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" @click="commitForm(scope.$index)">选择</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<el-table v-show="type === 'candidateUsers'"
|
|
||||||
border :data="options" @selection-change="handleSelectionChange"
|
|
||||||
style="width: 93%;margin: 0 auto">
|
|
||||||
<!--批量选择用户的时候需要复选框-->
|
|
||||||
<el-table-column
|
|
||||||
type="selection"
|
|
||||||
width="55">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="account"
|
|
||||||
label="账户">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="name" :show-overflow-tooltip="true"
|
|
||||||
label="昵称">
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<el-pagination style="float: right;margin:20px 2.7% 0 0"
|
|
||||||
background
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="1000">
|
|
||||||
</el-pagination>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<!--批量选择用户的时候需要确认按钮-->
|
|
||||||
<div slot="footer" class="dialog-footer" v-if="type === 'candidateUsers'">
|
|
||||||
<el-button type="primary" @click="commitForm()">确 定</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "UserSelectDialog",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeNames: ['1'],
|
|
||||||
formLabelWidth: "200px",
|
|
||||||
value: "类",
|
|
||||||
searchData: {},
|
|
||||||
multipleSelection: [],
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
name: "张三",
|
|
||||||
account: "admin1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "李四",
|
|
||||||
account: "admin2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "王五",
|
|
||||||
account: "admin3"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
formData:{
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
dialogFormVisibleBool:{
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
modeler: {
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
nodeElement:{
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
form:{
|
|
||||||
get(){
|
|
||||||
return this.formData;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dialogFormVisible:{
|
|
||||||
get(){
|
|
||||||
return this.dialogFormVisibleBool
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
type:{
|
|
||||||
handler(){
|
|
||||||
console.log(this.type)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateProperties(properties){
|
|
||||||
this.modeler.get("modeling").updateProperties(this.nodeElement, properties);
|
|
||||||
},
|
|
||||||
commitForm(index){
|
|
||||||
if (this.type === 'assignee') {
|
|
||||||
this.modeler.get("modeling").updateProperties(this.nodeElement, {
|
|
||||||
assignee: this.options[index].account
|
|
||||||
});
|
|
||||||
this.$emit('commitUserForm', this.options[index]);
|
|
||||||
} else if(this.type === 'candidateUsers'){
|
|
||||||
let updateStr = null
|
|
||||||
let candidateUsersStr = this.multipleSelection.map(item => item.account);
|
|
||||||
if (candidateUsersStr.length > 0) {
|
|
||||||
updateStr = candidateUsersStr.join(",")
|
|
||||||
}
|
|
||||||
this.modeler.get("modeling").updateProperties(this.nodeElement, {
|
|
||||||
candidateUsers: updateStr
|
|
||||||
});
|
|
||||||
this.$emit('commitUserForm', null);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
close(){
|
|
||||||
this.$emit('commitUserForm', null);
|
|
||||||
},
|
|
||||||
handleSelectionChange(val) {
|
|
||||||
this.multipleSelection = val;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,220 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="bpmn-panel">
|
|
||||||
<el-container>
|
|
||||||
<!-- <el-header height="45px">-->
|
|
||||||
<!-- <div class="config-tab" :class="{active: configTab=='node'}" @click="handleConfigSelect('node')">节点属性</div>-->
|
|
||||||
<!-- <div class="config-tab" :class="{active: configTab=='process'}" @click="handleConfigSelect('process')">流程属性</div>-->
|
|
||||||
<!-- </el-header>-->
|
|
||||||
<el-main>
|
|
||||||
<!-- 节点的控制面板-->
|
|
||||||
<node-property-panel v-if="configTab==='node'" :modeler="modeler" @modifyConfigTab="modifyConfigTab"
|
|
||||||
:nodeElement="nodeElement" :formData="formData" @modifyFormData="modifyFormData"></node-property-panel>
|
|
||||||
<start-event-node-property-panel v-if="configTab==='start-node'" :modeler="modeler" @modifyConfigTab="modifyConfigTab"
|
|
||||||
:nodeElement="nodeElement" :formData="formData" @modifyFormData="modifyFormData"></start-event-node-property-panel>
|
|
||||||
<!-- 流程的控制面板-->
|
|
||||||
<process-property-panel v-if="configTab==='process'" :modeler="modeler" :process-data="process"
|
|
||||||
:element="element"></process-property-panel>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import NodePropertyPanel from "./NodePropertyPanel";
|
|
||||||
import ProcessPropertyPanel from "./ProcessPropertyPanel";
|
|
||||||
import StartEventNodePropertyPanel from "./StartEventNodePropertyPanel";
|
|
||||||
export default {
|
|
||||||
name: "index",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
configTab: 'process',
|
|
||||||
panelIndex: 8,
|
|
||||||
element: {},
|
|
||||||
nodeElement: {},
|
|
||||||
formData: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modeler: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
process: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.handleModeler();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleConfigSelect(value) {
|
|
||||||
this.configTab = value;
|
|
||||||
},
|
|
||||||
handleModeler() {
|
|
||||||
const _this = this;
|
|
||||||
this.modeler.on("root.added", e => {
|
|
||||||
let element = e.element;
|
|
||||||
if (this.isImplicitRoot(element)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.element = element;
|
|
||||||
});
|
|
||||||
// 数据变化
|
|
||||||
this.modeler.on("commandStack.changed", () => {
|
|
||||||
_this.modeler.saveXML({format: true}, function (err, xml) {
|
|
||||||
_this.$emit('updateXml', xml)
|
|
||||||
});
|
|
||||||
})
|
|
||||||
//数据变化
|
|
||||||
this.modeler.on("selection.changed", e => {
|
|
||||||
const element = e.newSelection[0];
|
|
||||||
if (!element) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.log("selection.changed: element", element)
|
|
||||||
this.modifyConfigTab(element);
|
|
||||||
this.handleFormData(element);
|
|
||||||
this.changeFormData(element)
|
|
||||||
})
|
|
||||||
this.modeler.on("element.changed", e => {
|
|
||||||
const {element} = e;
|
|
||||||
if (!element) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.log("element.changed: element", element)
|
|
||||||
this.handleFormData(element);
|
|
||||||
this.changeFormData(element)
|
|
||||||
});
|
|
||||||
this.modeler.on("element.click", e => {
|
|
||||||
const {element} = e;
|
|
||||||
console.log("click: element", element)
|
|
||||||
this.handleFormData(element)
|
|
||||||
if (element.type == this.modeler._definitions.rootElements[0].$type) {
|
|
||||||
this.modifyConfigTab(element)
|
|
||||||
} else {
|
|
||||||
this.modifyConfigTab(element)
|
|
||||||
this.changeFormData(element)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
changeFormData(element){
|
|
||||||
const _this = this;
|
|
||||||
if(element.type === "bpmn:UserTask"){
|
|
||||||
let _businessObject = element.businessObject;
|
|
||||||
if(_businessObject.assignee){
|
|
||||||
_this.formData.userType = "assignee";
|
|
||||||
_this.formData.assignee = _businessObject.assignee;
|
|
||||||
}
|
|
||||||
if (_this.formData.assignee) {
|
|
||||||
_this.formData.userType = "assignee"
|
|
||||||
}
|
|
||||||
if (_this.formData.candidateGroups) {
|
|
||||||
_this.formData.userType = "candidateGroups"
|
|
||||||
}
|
|
||||||
if (_this.formData.candidateUsers) {
|
|
||||||
_this.formData.userType = "candidateUsers"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isImplicitRoot(element) {
|
|
||||||
return element.id === '__implicitroot';
|
|
||||||
},
|
|
||||||
modifyConfigTab(element) {
|
|
||||||
let configTab = 'node'
|
|
||||||
if (element !== undefined
|
|
||||||
&& element.type !== undefined
|
|
||||||
&& element.type==="bpmn:Process") {
|
|
||||||
configTab = 'process'
|
|
||||||
}
|
|
||||||
if (element !== undefined
|
|
||||||
&& element.type !== undefined
|
|
||||||
&& element.type==='bpmn:StartEvent') {
|
|
||||||
configTab = 'start-node'
|
|
||||||
}
|
|
||||||
console.log("configTab:" + configTab)
|
|
||||||
this.configTab = configTab
|
|
||||||
},
|
|
||||||
handleFormData(element) {
|
|
||||||
if (!element.id) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let businessObject = element.businessObject;
|
|
||||||
this.formData = {
|
|
||||||
type: element.type,
|
|
||||||
id: businessObject.id,
|
|
||||||
name: businessObject.name,
|
|
||||||
userType: businessObject.$attrs.userType ? businessObject.$attrs.userType : businessObject.userType,
|
|
||||||
assignee: businessObject.$attrs.assignee ? businessObject.$attrs.assignee : businessObject.assignee,
|
|
||||||
candidateGroups: businessObject.$attrs.candidateGroups ? businessObject.$attrs.candidateGroups : businessObject.candidateGroups,
|
|
||||||
candidateUsers: businessObject.$attrs.candidateUsers ? businessObject.$attrs.candidateUsers : businessObject.candidateUsers,
|
|
||||||
sequenceFlow: businessObject.conditionExpression ? businessObject.conditionExpression.body : '',
|
|
||||||
extensionElements: businessObject.extensionElements ? businessObject.extensionElements.values : null
|
|
||||||
}
|
|
||||||
console.log("formData",this.formData)
|
|
||||||
this.nodeElement = element;
|
|
||||||
},
|
|
||||||
modifyFormData(data){
|
|
||||||
this.formData.assignee = data.assignee;
|
|
||||||
this.formData.userType = data.userType;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
NodePropertyPanel, ProcessPropertyPanel, StartEventNodePropertyPanel
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-main{
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/.el-collapse .el-input__inner{
|
|
||||||
height: 30px !important;
|
|
||||||
line-height: 30px !important;
|
|
||||||
}
|
|
||||||
/deep/.el-collapse .el-form-item__content{
|
|
||||||
height: 30px !important;
|
|
||||||
line-height: 30px !important;
|
|
||||||
}
|
|
||||||
/deep/.el-collapse .el-form-item__label{
|
|
||||||
height: 30px !important;
|
|
||||||
line-height: 30px !important;
|
|
||||||
}
|
|
||||||
/deep/.el-collapse .el-form-item__label{
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
/deep/.el-collapse .el-form{
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
/deep/.el-collapse .is-active{
|
|
||||||
border-bottom: 1px solid #EBEEF5
|
|
||||||
}
|
|
||||||
.bpmn-panel {
|
|
||||||
/*width: 350px;*/
|
|
||||||
border: 1px solid #eeeeee;
|
|
||||||
padding: 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-header {
|
|
||||||
border-bottom: solid 2px #e4e7ed;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-tab {
|
|
||||||
height: 43px;
|
|
||||||
line-height: 43px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 50%;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-tab.active {
|
|
||||||
border-bottom: solid 2px #409EFF;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -68,10 +68,10 @@
|
||||||
@pagination="getList"/>
|
@pagination="getList"/>
|
||||||
|
|
||||||
<!-- 流程编辑器 -->
|
<!-- 流程编辑器 -->
|
||||||
<el-dialog class="bpmnclass dialogClass" :visible.sync="showBpmnOpen" :before-cancel="cancel" :fullscreen="true">
|
<!-- <el-dialog class="bpmnclass dialogClass" :visible.sync="showBpmnOpen" :before-cancel="cancel" :fullscreen="true">-->
|
||||||
<vue-bpmn v-if="showBpmnOpen" product="activiti" @processSave="processSave"
|
<!-- <vue-bpmn v-if="showBpmnOpen" product="activiti" @processSave="processSave"-->
|
||||||
:bpmnXml="bpmnXML" :bpmnData="bpmnData" @beforeClose="cancel" />
|
<!-- :bpmnXml="bpmnXML" :bpmnData="bpmnData" @beforeClose="cancel" />-->
|
||||||
</el-dialog>
|
<!-- </el-dialog>-->
|
||||||
|
|
||||||
<!-- 流程表单配置详情 -->
|
<!-- 流程表单配置详情 -->
|
||||||
<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
|
<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
|
||||||
|
|
@ -84,7 +84,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {deleteModel, deployModel, createModel, updateModel, getModelPage, getModel} from "@/api/bpm/model";
|
import {deleteModel, deployModel, createModel, updateModel, getModelPage, getModel} from "@/api/bpm/model";
|
||||||
import VueBpmn from "@/components/bpmn/VueBpmn";
|
// import VueBpmn from "@/components/bpmn/VueBpmn";
|
||||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||||
import {getForm} from "@/api/bpm/form";
|
import {getForm} from "@/api/bpm/form";
|
||||||
import {decodeFields} from "@/utils/formGenerator";
|
import {decodeFields} from "@/utils/formGenerator";
|
||||||
|
|
@ -94,7 +94,7 @@ export default {
|
||||||
name: "model",
|
name: "model",
|
||||||
components: {
|
components: {
|
||||||
Parser,
|
Parser,
|
||||||
VueBpmn
|
// VueBpmn
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -4,19 +4,17 @@
|
||||||
|
|
||||||
<!-- TODO 芋艿：去除测试任务 -->
|
<!-- TODO 芋艿：去除测试任务 -->
|
||||||
<!-- <my-process-palette />-->
|
<!-- <my-process-palette />-->
|
||||||
|
|
||||||
<my-process-designer
|
<my-process-designer
|
||||||
:key="`designer-${reloadIndex}`"
|
:key="`designer-${reloadIndex}`"
|
||||||
v-model="xmlString"
|
v-model="xmlString"
|
||||||
v-bind="controlForm"
|
v-bind="controlForm"
|
||||||
keyboard
|
keyboard
|
||||||
ref="processDesigner"
|
ref="processDesigner"
|
||||||
@element-click="elementClick"
|
|
||||||
@init-finished="initModeler"
|
@init-finished="initModeler"
|
||||||
/>
|
/>
|
||||||
<my-properties-panel :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" />
|
<my-properties-panel :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" />
|
||||||
|
|
||||||
<!-- demo config -->
|
<!-- 右边的全局设置 -->
|
||||||
<div class="demo-control-bar">
|
<div class="demo-control-bar">
|
||||||
<div class="open-control-dialog" @click="controlDrawerVisible = true"><i class="el-icon-setting"></i></div>
|
<div class="open-control-dialog" @click="controlDrawerVisible = true"><i class="el-icon-setting"></i></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -84,7 +82,7 @@ export default {
|
||||||
components: { MyProcessPalette },
|
components: { MyProcessPalette },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
xmlString: "",
|
xmlString: "", // BPMN XML
|
||||||
modeler: null,
|
modeler: null,
|
||||||
reloadIndex: 0,
|
reloadIndex: 0,
|
||||||
controlDrawerVisible: false,
|
controlDrawerVisible: false,
|
||||||
|
|
@ -95,7 +93,7 @@ export default {
|
||||||
simulation: true,
|
simulation: true,
|
||||||
labelEditing: false,
|
labelEditing: false,
|
||||||
labelVisible: false,
|
labelVisible: false,
|
||||||
prefix: "flowable",
|
prefix: "activiti",
|
||||||
headerButtonSize: "mini",
|
headerButtonSize: "mini",
|
||||||
// additionalModel: []
|
// additionalModel: []
|
||||||
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
|
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
|
||||||
|
|
@ -138,44 +136,17 @@ export default {
|
||||||
// this.addis.customRenderer = status ? CustomRenderer : false;
|
// this.addis.customRenderer = status ? CustomRenderer : false;
|
||||||
// this.reloadProcessDesigner();
|
// this.reloadProcessDesigner();
|
||||||
// },
|
// },
|
||||||
elementClick(element) {
|
|
||||||
this.element = element;
|
|
||||||
|
|
||||||
!this.elementOverlayIds && (this.elementOverlayIds = {});
|
|
||||||
|
|
||||||
!this.overlays && (this.overlays = this.modeler.get("overlays"));
|
|
||||||
!this.contextPad && (this.contextPad = this.modeler.get("contextPad"));
|
|
||||||
|
|
||||||
this.modeler.on("element.hover", ({ element }) => {
|
|
||||||
if (!this.elementOverlayIds[element.id] && element.type !== "bpmn:Process") {
|
|
||||||
this.elementOverlayIds[element.id] = this.overlays.add(element, {
|
|
||||||
position: { left: 0, bottom: 0 },
|
|
||||||
html: `<div class="element-overlays">
|
|
||||||
<p>Elemet id: ${element.id}</p>
|
|
||||||
<p>Elemet type: ${element.type}</p>
|
|
||||||
</div>`
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.modeler.on("element.out", ({ element }) => {
|
|
||||||
if (element) {
|
|
||||||
this.overlays.remove({ element });
|
|
||||||
this.elementOverlayIds[element.id] = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
body {
|
//body {
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
margin: 0;
|
// margin: 0;
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
}
|
//}
|
||||||
//#app {
|
//.app {
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
// height: 100%;
|
// height: 100%;
|
||||||
// box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
|
|
@ -224,45 +195,22 @@ body {
|
||||||
color: #fafafa;
|
color: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bjs-container {
|
.my-process-designer {
|
||||||
height: 400px !important; // TODO 芋艿：bjs 容器的高度不对，临时改下
|
height: calc(100vh - 84px);
|
||||||
|
//height: 800px !important; // TODO 芋艿：bjs 容器的高度不对，临时改下
|
||||||
|
//z-index: 0 !important;
|
||||||
|
//pointer-events: none !important;
|
||||||
}
|
}
|
||||||
.process-panel__container { // TODO 芋艿：右边的位置不对，临时改下
|
.process-panel__container { // TODO 芋艿：右边的位置不对，临时改下
|
||||||
margin-top: -200px;
|
//margin-top: -800px !important;
|
||||||
float: right;
|
//float: right;
|
||||||
height: 800px;
|
//margin-left: 800px !important;
|
||||||
z-index: 2147483647 !important;
|
//height: 800px;
|
||||||
|
//z-index: 2147483647 !important;
|
||||||
|
//cursor:pointer !important;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 55px;
|
||||||
}
|
}
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -42,14 +42,14 @@
|
||||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||||
@pagination="getList"/>
|
@pagination="getList"/>
|
||||||
<el-dialog :visible.sync="showBpmnBool" :before-close="close" :fullscreen="true">
|
<el-dialog :visible.sync="showBpmnBool" :before-close="close" :fullscreen="true">
|
||||||
<vue-bpmn v-if="showBpmnBool" product="activiti" @processSave="processSave" :bpmnXml="bpmnXML" :bpmnData="bpmnData" @beforeClose="close"></vue-bpmn>
|
<!-- <vue-bpmn v-if="showBpmnBool" product="activiti" @processSave="processSave" :bpmnXml="bpmnXML" :bpmnData="bpmnData" @beforeClose="close"></vue-bpmn>-->
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {page} from "@/api/bpm/processDefinition";
|
import {page} from "@/api/bpm/processDefinition";
|
||||||
import VueBpmn from "@/components/bpmn/VueBpmn";
|
// import VueBpmn from "@/components/bpmn/VueBpmn";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "processDefinition",
|
name: "processDefinition",
|
||||||
|
|
@ -73,7 +73,7 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {VueBpmn},
|
// components: {VueBpmn},
|
||||||
created() {
|
created() {
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue