保存、预览流程
This commit is contained in:
@ -22,12 +22,11 @@
|
||||
"axios": "0.27.2",
|
||||
"bpmn-js-token-simulation": "0.10.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"diagram-js": "^11.4.1",
|
||||
"echarts": "5.4.0",
|
||||
"element-plus": "2.2.21",
|
||||
"file-saver": "2.0.5",
|
||||
"fuse.js": "6.6.2",
|
||||
"highlight.js": "^11.7.0",
|
||||
"highlight.js": "10.5.0",
|
||||
"js-cookie": "3.0.1",
|
||||
"jsencrypt": "3.3.1",
|
||||
"nprogress": "0.2.0",
|
||||
@ -47,8 +46,8 @@
|
||||
"@vue/babel-helper-vue-transform-on": "^1.0.2",
|
||||
"@vue/compiler-sfc": "3.2.45",
|
||||
"bpmn-js": "7.4.0",
|
||||
"bpmn-js-properties-panel": "^1.13.1",
|
||||
"camunda-bpmn-moddle": "^7.0.1",
|
||||
"bpmn-js-properties-panel": "0.37.2",
|
||||
"camunda-bpmn-moddle": "4.4.1",
|
||||
"sass": "1.56.1",
|
||||
"unplugin-auto-import": "0.11.4",
|
||||
"vite": "3.2.3",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
v-bind="controlForm"
|
||||
keyboard
|
||||
ref="processDesigner"
|
||||
:events="[
|
||||
:eventlist="[
|
||||
'element.click',
|
||||
'connection.added',
|
||||
'connection.removed',
|
||||
@ -28,10 +28,13 @@
|
||||
import BmpnProcessPenal from "@/plugins/package/penal";
|
||||
import BpmnProcessDesigner from "@/plugins/package/designer";
|
||||
import "@/plugins/package/theme/index.scss";
|
||||
// import vuePlugin from "@/plugins/package/highlight";
|
||||
// import "highlight.js/styles/atom-one-dark-reasonable.css";
|
||||
// import "highlight.js/styles/atom-one-dark-reasonable.css";
|
||||
import CustomContentPadProvider from "@/plugins/package/designer/plugins/content-pad";
|
||||
import CustomPaletteProvider from "@/plugins/package/designer/plugins/palette";
|
||||
import { ref } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
bpmnXml: {
|
||||
type: String,
|
||||
@ -43,12 +46,12 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const { bpmnXml, designerForm } = toRefs(props);
|
||||
let element;
|
||||
const modeler = ref(null);
|
||||
const height = ref(document.documentElement.clientHeight - 94.5 + "px;");
|
||||
const xmlString = ref(bpmnXml.value);
|
||||
const emit = defineEmits(["save"]);
|
||||
const data = reactive({
|
||||
element: null,
|
||||
controlForm: {
|
||||
processId: designerForm.value.processKey || "",
|
||||
processName: designerForm.value.processName || "",
|
||||
@ -60,16 +63,14 @@ const data = reactive({
|
||||
additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
|
||||
},
|
||||
});
|
||||
const { controlForm, element } = toRefs(data);
|
||||
const { controlForm } = toRefs(data);
|
||||
|
||||
function elementClick(elementArgv) {
|
||||
element.value = elementArgv;
|
||||
console.log(elementArgv);
|
||||
element = elementArgv;
|
||||
}
|
||||
function initModeler(modelerArgv) {
|
||||
setTimeout(() => {
|
||||
modeler.value = modelerArgv;
|
||||
console.log(modeler.value.get("eventBus"), "71");
|
||||
}, 10);
|
||||
}
|
||||
function handlerEvent(eventName, element) {}
|
||||
|
||||
@ -1,49 +1,183 @@
|
||||
<template>
|
||||
<div class="process-viewer">
|
||||
<div class="process-canvas" style="height: 100%;" ref="processCanvas" v-show="!isLoading" />
|
||||
<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
|
||||
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
|
||||
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
|
||||
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
|
||||
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 || '审批记录'" :visible.sync="dialogVisible">
|
||||
<el-dialog
|
||||
class="comment-dialog"
|
||||
:title="dlgTitle || '审批记录'"
|
||||
v-model="dialogVisible"
|
||||
>
|
||||
<el-row>
|
||||
<el-table :data="taskCommentList" size="mini" 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
|
||||
:data="taskCommentList"
|
||||
size="mini"
|
||||
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 slot-scope="scope">
|
||||
{{scope.row.commentList&&scope.row.commentList[0]?scope.row.commentList[0].fullMessage:''}}
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
row.commentList && row.commentList[0]
|
||||
? row.commentList[0].fullMessage
|
||||
: ""
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
|
||||
<div style="position: absolute; top: 0px; left: 0px; width: 100%">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button-group key="scale-control" size="medium">
|
||||
<el-button size="medium" type="default" :plain="true" :disabled="defaultZoom <= 0.3" icon="el-icon-zoom-out" @click="processZoomOut()" />
|
||||
<el-button size="medium" type="default" style="width: 90px;">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
|
||||
<el-button size="medium" type="default" :plain="true" :disabled="defaultZoom >= 3.9" icon="el-icon-zoom-in" @click="processZoomIn()" />
|
||||
<el-button size="medium" type="default" icon="el-icon-c-scale-to-original" @click="processReZoom()" />
|
||||
<el-button-group key="scale-control" size="default">
|
||||
<el-button
|
||||
size="default"
|
||||
type="default"
|
||||
:plain="true"
|
||||
:disabled="defaultZoom <= 0.3"
|
||||
icon="zoom-out"
|
||||
@click="processZoomOut()"
|
||||
/>
|
||||
<el-button size="default" type="default" style="width: 90px">{{
|
||||
Math.floor(defaultZoom * 10 * 10) + "%"
|
||||
}}</el-button>
|
||||
<el-button
|
||||
size="default"
|
||||
type="default"
|
||||
:plain="true"
|
||||
:disabled="defaultZoom >= 3.9"
|
||||
icon="zoom-in"
|
||||
@click="processZoomIn()"
|
||||
/>
|
||||
<el-button
|
||||
size="default"
|
||||
type="default"
|
||||
icon="scale-to-original"
|
||||
@click="processReZoom()"
|
||||
/>
|
||||
<slot />
|
||||
</el-button-group>
|
||||
</el-row>
|
||||
@ -51,209 +185,215 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/plugins/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
|
||||
}
|
||||
<script setup name="">
|
||||
import "@/plugins/package/theme/index.scss";
|
||||
import BpmnViewer from "bpmn-js/lib/Viewer";
|
||||
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
|
||||
import { nextTick, onBeforeUnmount, toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
xml: {
|
||||
type: String,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dlgTitle: undefined,
|
||||
defaultZoom: 1,
|
||||
// 是否正在加载流程图
|
||||
isLoading: false,
|
||||
bpmnViewer: undefined,
|
||||
// 已完成流程元素
|
||||
processNodeInfo: undefined,
|
||||
// 当前任务id
|
||||
selectTaskId: undefined,
|
||||
// 任务节点审批记录
|
||||
taskCommentList: [],
|
||||
// 已完成任务悬浮延迟Timer
|
||||
hoverTimer: null
|
||||
}
|
||||
finishedInfo: {
|
||||
type: Object,
|
||||
},
|
||||
watch: {
|
||||
xml: {
|
||||
handler(newXml) {
|
||||
this.importXML(newXml);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
finishedInfo: {
|
||||
handler(newInfo) {
|
||||
this.setProcessStatus(newInfo);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
// 所有节点审批记录
|
||||
allCommentList: {
|
||||
type: Array,
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.importXML(this.xml)
|
||||
this.setProcessStatus(this.finishedInfo);
|
||||
})
|
||||
});
|
||||
|
||||
const { xml, finishedInfo, allCommentList } = toRefs(props);
|
||||
const dialogVisible = ref(false);
|
||||
const dlgTitle = ref(undefined);
|
||||
const defaultZoom = ref(1);
|
||||
// 是否正在加载流程图
|
||||
const isLoading = ref(false);
|
||||
const bpmnViewer = ref(undefined);
|
||||
// 已完成流程元素
|
||||
const processNodeInfo = ref(undefined);
|
||||
// 当前任务id
|
||||
const selectTaskId = ref(undefined);
|
||||
// 任务节点审批记录
|
||||
const taskCommentList = ref([]);
|
||||
// 已完成任务悬浮延迟Timer
|
||||
const hoverTimer = ref(null);
|
||||
|
||||
const processCanvas = ref();
|
||||
const customFailDefs = ref();
|
||||
const customSuccessDefs = ref();
|
||||
|
||||
watch(
|
||||
xml,
|
||||
(newXml) => {
|
||||
importXML(newXml);
|
||||
},
|
||||
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);
|
||||
},
|
||||
getOperationTagType(type) {
|
||||
return 'success';
|
||||
// switch (type) {
|
||||
// case this.SysFlowTaskOperationType.AGREE:
|
||||
// case this.SysFlowTaskOperationType.MULTI_AGREE:
|
||||
// return 'success';
|
||||
// case this.SysFlowTaskOperationType.REFUSE:
|
||||
// case this.SysFlowTaskOperationType.PARALLEL_REFUSE:
|
||||
// case this.SysFlowTaskOperationType.MULTI_REFUSE:
|
||||
// return 'warning';
|
||||
// case this.SysFlowTaskOperationType.STOP:
|
||||
// return 'danger'
|
||||
// default:
|
||||
// return 'primary';
|
||||
// }
|
||||
},
|
||||
// 流程图预览清空
|
||||
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;
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
if (this.processNodeInfo == null || this.processNodeInfo.finishedTaskSet == null) return;
|
||||
watch(
|
||||
finishedInfo,
|
||||
(newInfo) => {
|
||||
setProcessStatus(newInfo);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
nextTick(() => {
|
||||
importXML(xml.value);
|
||||
setProcessStatus(finishedInfo.value);
|
||||
});
|
||||
function processReZoom() {
|
||||
defaultZoom.value = 1;
|
||||
bpmnViewer.value.get("canvas").zoom("fit-viewport", "auto");
|
||||
}
|
||||
function processZoomIn(zoomStep = 0.1) {
|
||||
let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
|
||||
if (newZoom > 4) {
|
||||
throw new Error(
|
||||
"[Process Designer Warn ]: The zoom ratio cannot be greater than 4"
|
||||
);
|
||||
}
|
||||
defaultZoom.value = newZoom;
|
||||
bpmnViewer.value.get("canvas").zoom(defaultZoom.value);
|
||||
}
|
||||
function processZoomOut(zoomStep = 0.1) {
|
||||
let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100;
|
||||
if (newZoom < 0.2) {
|
||||
throw new Error(
|
||||
"[Process Designer Warn ]: The zoom ratio cannot be less than 0.2"
|
||||
);
|
||||
}
|
||||
defaultZoom.value = newZoom;
|
||||
bpmnViewer.value.get("canvas").zoom(defaultZoom.value);
|
||||
}
|
||||
|
||||
if (element == null || this.processNodeInfo.finishedTaskSet.indexOf(element.id) === -1) {
|
||||
return;
|
||||
}
|
||||
// 流程图预览清空
|
||||
function clearViewer() {
|
||||
if (processCanvas.value) {
|
||||
processCanvas.value.innerHTML = "";
|
||||
}
|
||||
if (bpmnViewer.value) {
|
||||
bpmnViewer.value.destroy();
|
||||
}
|
||||
bpmnViewer.value = null;
|
||||
}
|
||||
// 添加自定义箭头
|
||||
function addCustomDefs() {
|
||||
const canvas = bpmnViewer.value.get("canvas");
|
||||
const svg = canvas._svg;
|
||||
// const customSuccessDefs = customSuccessDefs.value;
|
||||
// const customFailDefs = customFailDefs.value;
|
||||
svg.appendChild(customSuccessDefs.value);
|
||||
svg.appendChild(customFailDefs.value);
|
||||
}
|
||||
// 任务悬浮弹窗
|
||||
function onSelectElement(element) {
|
||||
selectTaskId.value = undefined;
|
||||
dlgTitle.value = undefined;
|
||||
|
||||
this.selectTaskId = element.id;
|
||||
this.dlgTitle = element.businessObject ? element.businessObject.name : undefined;
|
||||
// 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
|
||||
this.taskCommentList = (this.allCommentList || []).filter(item => {
|
||||
return item.activityId === this.selectTaskId;
|
||||
if (
|
||||
processNodeInfo.value == null ||
|
||||
processNodeInfo.value.finishedTaskSet == null
|
||||
)
|
||||
return;
|
||||
|
||||
if (
|
||||
element == null ||
|
||||
processNodeInfo.value.finishedTaskSet.indexOf(element.id) === -1
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectTaskId.value = element.id;
|
||||
dlgTitle.value = element.businessObject
|
||||
? element.businessObject.name
|
||||
: undefined;
|
||||
// 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
|
||||
taskCommentList.value = (allCommentList.value || []).filter((item) => {
|
||||
return item.activityId === selectTaskId.value;
|
||||
});
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
// 显示流程图
|
||||
async function importXML(xml) {
|
||||
clearViewer();
|
||||
if (xml != null && xml !== "") {
|
||||
try {
|
||||
bpmnViewer.value = new BpmnViewer({
|
||||
additionalModules: [
|
||||
// 移动整个画布
|
||||
MoveCanvasModule,
|
||||
],
|
||||
container: processCanvas.value,
|
||||
});
|
||||
// 任务节点悬浮事件
|
||||
bpmnViewer.value.on("element.click", ({ element }) => {
|
||||
onSelectElement(element);
|
||||
});
|
||||
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');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
isLoading.value = true;
|
||||
await bpmnViewer.value.importXML(xml);
|
||||
addCustomDefs();
|
||||
} catch (e) {
|
||||
clearViewer();
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
setProcessStatus(processNodeInfo.value);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.clearViewer();
|
||||
}
|
||||
}
|
||||
// 设置流程图元素状态
|
||||
function setProcessStatus(processNodeInfoArgv) {
|
||||
processNodeInfo.value = processNodeInfoArgv;
|
||||
if (
|
||||
isLoading.value ||
|
||||
processNodeInfo.value == null ||
|
||||
bpmnViewer.value == null
|
||||
)
|
||||
return;
|
||||
let {
|
||||
finishedTaskSet,
|
||||
rejectedTaskSet,
|
||||
unfinishedTaskSet,
|
||||
finishedSequenceFlowSet,
|
||||
} = processNodeInfo.value;
|
||||
const canvas = bpmnViewer.value.get("canvas");
|
||||
const elementRegistry = bpmnViewer.value.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");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearViewer();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -259,7 +259,8 @@ import { ElMessage, ElMessageBox } from "element-plus";
|
||||
const bpmnCanvasRef = ref();
|
||||
const refFile = ref();
|
||||
const props = defineProps({
|
||||
value: String, // xml 字符串
|
||||
modelValue: String, // xml 字符串
|
||||
// value: String,
|
||||
processId: String,
|
||||
processName: String,
|
||||
translations: Object, // 自定义的翻译文件
|
||||
@ -285,7 +286,7 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: "flowable",
|
||||
},
|
||||
events: {
|
||||
eventlist: {
|
||||
type: Array,
|
||||
default: () => ["element.click"],
|
||||
},
|
||||
@ -305,7 +306,8 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const {
|
||||
value,
|
||||
// value,
|
||||
modelValue,
|
||||
processId,
|
||||
processName,
|
||||
translations,
|
||||
@ -316,7 +318,7 @@ const {
|
||||
simulation,
|
||||
keyboard,
|
||||
prefix,
|
||||
events,
|
||||
eventlist,
|
||||
headerButtonSize,
|
||||
headerButtonType,
|
||||
} = toRefs(props);
|
||||
@ -375,22 +377,21 @@ const additionalModules = computed(() => {
|
||||
}
|
||||
|
||||
// 根据需要的流程类型设置扩展元素构建模块
|
||||
// if (prefix.value === "bpmn") {
|
||||
// Modules.push(bpmnModdleExtension);
|
||||
// }
|
||||
// // if (prefix.value === "bpmn") {
|
||||
// // Modules.push(bpmnModdleExtension);
|
||||
// // }
|
||||
if (prefix.value === "camunda") {
|
||||
Modules.push(camundaModdleExtension);
|
||||
}
|
||||
// FIXME: Function.prototype.bind.apply(...) is not a constructor
|
||||
// if (prefix.value === "flowable") {
|
||||
// Modules.push(flowableModdleExtension);
|
||||
// }
|
||||
|
||||
if (prefix.value === "flowable") {
|
||||
Modules.push(flowableModdleExtension);
|
||||
}
|
||||
if (prefix.value === "activiti") {
|
||||
Modules.push(activitiModdleExtension);
|
||||
}
|
||||
return Modules;
|
||||
});
|
||||
console.log(additionalModules.value);
|
||||
const moddleExtensions = computed(() => {
|
||||
const Extensions = {};
|
||||
// 仅使用用户自定义模块
|
||||
@ -421,7 +422,7 @@ const moddleExtensions = computed(() => {
|
||||
|
||||
onMounted(() => {
|
||||
initBpmnModeler();
|
||||
createNewDiagram(value.value);
|
||||
createNewDiagram(modelValue.value);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (bpmnModeler) bpmnModeler.destroy();
|
||||
@ -447,19 +448,14 @@ function initBpmnModeler() {
|
||||
additionalModules: additionalModules.value,
|
||||
moddleExtensions: moddleExtensions.value,
|
||||
});
|
||||
console.log("init-finished");
|
||||
emit("init-finished", bpmnModeler);
|
||||
initModelListeners();
|
||||
}
|
||||
function initModelListeners() {
|
||||
const EventBus = bpmnModeler.get("eventBus");
|
||||
console.log(EventBus);
|
||||
// const that = this;
|
||||
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
|
||||
events.value.forEach((event) => {
|
||||
bpmnModeler.on(event, function (eventObj) {
|
||||
console.log("element-click", eventObj);
|
||||
|
||||
eventlist.value.forEach((event) => {
|
||||
EventBus.on(event, function (eventObj) {
|
||||
let eventName = event.replace(/\./g, "-");
|
||||
let element = eventObj ? eventObj.element : null;
|
||||
emit(eventName, element, eventObj);
|
||||
@ -467,18 +463,18 @@ function initModelListeners() {
|
||||
});
|
||||
});
|
||||
//FIXME: 监听图形改变返回xml
|
||||
// EventBus.on("commandStack.changed", async (event) => {
|
||||
// try {
|
||||
// recoverable.value = bpmnModeler.get("commandStack").canRedo();
|
||||
// revocable.value = bpmnModeler.get("commandStack").canUndo();
|
||||
// let { xml } = await bpmnModeler.saveXML({ format: true });
|
||||
// emit("commandStack-changed", event);
|
||||
// emit("input", xml);
|
||||
// emit("change", xml);
|
||||
// } catch (e) {
|
||||
// console.error(`[Process Designer Warn]: ${e.message || e}`);
|
||||
// }
|
||||
// });
|
||||
EventBus.on("commandStack.changed", async (event) => {
|
||||
try {
|
||||
recoverable.value = bpmnModeler.get("commandStack").canRedo();
|
||||
revocable.value = bpmnModeler.get("commandStack").canUndo();
|
||||
let { xml } = await bpmnModeler.saveXML({ format: true });
|
||||
emit("commandStack-changed", event);
|
||||
emit("input", xml);
|
||||
emit("change", xml);
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn]: ${e.message || e}`);
|
||||
}
|
||||
});
|
||||
// 监听视图缩放变化
|
||||
bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
|
||||
emit("canvas-viewbox-changed", { viewbox });
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
* @author igdianov
|
||||
* address https://github.com/igdianov/activiti-bpmn-moddle
|
||||
* */
|
||||
|
||||
import flowableExtension from './flowableExtension'
|
||||
export default {
|
||||
__init__: ["FlowableModdleExtension"],
|
||||
FlowableModdleExtension: ["type", () => import("./flowableExtension")],
|
||||
FlowableModdleExtension: ["type", flowableExtension],
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// import hljs from "highlight.js/lib/core";
|
||||
// hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml"));
|
||||
// hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json"));
|
||||
import hljs from "highlight.js/lib/core";
|
||||
hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json"));
|
||||
|
||||
// export default hljs;
|
||||
export default hljs;
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
<div class="process-panel__container" :style="{ width: `${this.width}px` }">
|
||||
<el-collapse v-model="activeTab">
|
||||
<el-collapse-item name="base">
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-info"></i>常规
|
||||
</div>
|
||||
<template #title>
|
||||
<div class="panel-tab__title">
|
||||
<el-icon><InfoFilled /></el-icon>常规
|
||||
</div>
|
||||
</template>
|
||||
<element-base-info
|
||||
:id-edit-disabled="idEditDisabled"
|
||||
:business-object="elementBusinessObject"
|
||||
@ -16,9 +18,11 @@
|
||||
v-if="elementType === 'Process'"
|
||||
key="message"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-comment"></i>消息与信号
|
||||
</div>
|
||||
<template #title>
|
||||
<div class="panel-tab__title">
|
||||
<el-icon><Comment /></el-icon>消息与信号
|
||||
</div>
|
||||
</template>
|
||||
<signal-and-massage />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
@ -26,18 +30,22 @@
|
||||
v-if="conditionFormVisible"
|
||||
key="condition"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-promotion"></i>流转条件
|
||||
</div>
|
||||
<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">
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-order"></i>表单
|
||||
</div>
|
||||
<template #title>
|
||||
<div class="panel-tab__title">
|
||||
<el-icon><Document /></el-icon>表单
|
||||
</div>
|
||||
</template>
|
||||
<element-form :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
@ -45,9 +53,11 @@
|
||||
v-if="elementType.indexOf('Task') !== -1"
|
||||
key="task"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-claim"></i>任务
|
||||
</div>
|
||||
<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
|
||||
@ -55,18 +65,22 @@
|
||||
v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'"
|
||||
key="multiInstance"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-help"></i>多实例
|
||||
</div>
|
||||
<template #title
|
||||
><div class="panel-tab__title">
|
||||
<el-icon><Help /></el-icon>多实例
|
||||
</div>
|
||||
</template>
|
||||
<element-multi-instance
|
||||
:business-object="elementBusinessObject"
|
||||
:type="elementType"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="listeners" key="listeners">
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-message-solid"></i>执行监听器
|
||||
</div>
|
||||
<template #title
|
||||
><div class="panel-tab__title">
|
||||
<el-icon><Message /></el-icon>执行监听器
|
||||
</div>
|
||||
</template>
|
||||
<element-listeners :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
@ -74,21 +88,27 @@
|
||||
v-if="elementType === 'UserTask'"
|
||||
key="taskListeners"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-message-solid"></i>任务监听器
|
||||
</div>
|
||||
<template #title
|
||||
><div class="panel-tab__title">
|
||||
<el-icon><Message /></el-icon>任务监听器
|
||||
</div></template
|
||||
>
|
||||
<user-task-listeners :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="extensions" key="extensions">
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-circle-plus"></i>扩展属性
|
||||
</div>
|
||||
<template #title
|
||||
><div class="panel-tab__title">
|
||||
<el-icon><CirclePlus /></el-icon>扩展属性
|
||||
</div></template
|
||||
>
|
||||
<element-properties :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="other" key="other">
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-promotion"></i>其他
|
||||
</div>
|
||||
<template #title
|
||||
><div class="panel-tab__title">
|
||||
<el-icon><Promotion /></el-icon>其他
|
||||
</div></template
|
||||
>
|
||||
<element-other-config :id="elementId" />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
@ -128,11 +148,6 @@ const props = defineProps({
|
||||
const { bpmnModeler, prefix, width, idEditDisabled } = toRefs(props);
|
||||
provide("prefix", prefix.value);
|
||||
provide("width", width.value);
|
||||
const bpmnStore = useBpmnStore();
|
||||
// const data = reactive({
|
||||
// timer: undefined,
|
||||
// });
|
||||
// const { timer } = toRefs(data);
|
||||
|
||||
const activeTab = ref("base");
|
||||
const elementId = ref("");
|
||||
@ -143,49 +158,15 @@ const formVisible = ref(false); // 表单配置
|
||||
let timer;
|
||||
let bpmnElement;
|
||||
function initModels() {
|
||||
// bpmnStore.count = 123;
|
||||
console.log(bpmnModeler.value);
|
||||
// 初始化 modeler 以及其他 moddle
|
||||
if (!bpmnModeler.value) {
|
||||
// 避免加载时 流程图 并未加载完成
|
||||
timer = setTimeout(() => initModels(), 10);
|
||||
return;
|
||||
}
|
||||
// console.log(timer);
|
||||
|
||||
if (timer) clearTimeout(timer);
|
||||
// timer = null;
|
||||
console.log(bpmnModeler.value);
|
||||
// bpmnStore.bpmnInstances = {
|
||||
// test: bpmnModeler.value,
|
||||
// };
|
||||
// bpmnModeler.value.get = undefined;
|
||||
// console.log(JSON.stringify(bpmnModeler.value));
|
||||
// bpmnStore.setBpmnInstances({
|
||||
// modeler: { _container: bpmnModeler.value._container },
|
||||
// // modeling: bpmnModeler.value.get("modeling"),
|
||||
// // moddle: bpmnModeler.value.get("moddle"),
|
||||
// // eventBus: bpmnModeler.value.get("eventBus"),
|
||||
// // bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
|
||||
// // elementFactory: bpmnModeler.value.get("elementFactory"),
|
||||
// elementRegistry: {
|
||||
// _elements: bpmnModeler.value.get("elementRegistry")._elements,
|
||||
// },
|
||||
// // replace: bpmnModeler.value.get("replace"),
|
||||
// // selection: bpmnModeler.value.get("selection"),
|
||||
// });
|
||||
// bpmnStore.bpmnInstances =
|
||||
// {
|
||||
// modeler: bpmnModeler.value,
|
||||
// modeling: bpmnModeler.value.get("modeling"),
|
||||
// moddle: bpmnModeler.value.get("moddle"),
|
||||
// eventBus: bpmnModeler.value.get("eventBus"),
|
||||
// bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
|
||||
// elementFactory: bpmnModeler.value.get("elementFactory"),
|
||||
// elementRegistry: bpmnModeler.value.get("elementRegistry"),
|
||||
// replace: bpmnModeler.value.get("replace"),
|
||||
// selection: bpmnModeler.value.get("selection"),
|
||||
// };
|
||||
console.log(bpmnStore.bpmnInstances, "167");
|
||||
|
||||
window.bpmnInstances = {
|
||||
modeler: bpmnModeler.value,
|
||||
modeling: bpmnModeler.value.get("modeling"),
|
||||
@ -200,7 +181,6 @@ function initModels() {
|
||||
getActiveElement();
|
||||
}
|
||||
function getActiveElement() {
|
||||
console.log("select first");
|
||||
// 初始第一个选中元素 bpmn:Process
|
||||
initFormOnChanged(null);
|
||||
bpmnModeler.value.on("import.done", (e) => {
|
||||
@ -208,7 +188,6 @@ function getActiveElement() {
|
||||
});
|
||||
// 监听选择事件，修改当前激活的元素以及表单
|
||||
bpmnModeler.value.on("selection.changed", ({ newSelection }) => {
|
||||
console.log("selection.changed");
|
||||
initFormOnChanged(newSelection[0] || null);
|
||||
});
|
||||
bpmnModeler.value.on("element.changed", ({ element }) => {
|
||||
@ -254,9 +233,9 @@ function initFormOnChanged(element) {
|
||||
formVisible.value =
|
||||
elementType.value === "UserTask" || elementType.value === "StartEvent";
|
||||
}
|
||||
function beforeDestroy() {
|
||||
onBeforeUnmount(() => {
|
||||
window.bpmnInstances = null;
|
||||
}
|
||||
});
|
||||
|
||||
watch(elementId, (val) => {
|
||||
activeTab.value = "base";
|
||||
|
||||
@ -40,8 +40,7 @@
|
||||
|
||||
<script setup name="ElementBaseInfo">
|
||||
import { nextTick, onBeforeUnmount, toRefs } from "vue";
|
||||
import useBpmnStore from "@/store/modules/bpmn";
|
||||
const bpmnStore = useBpmnStore();
|
||||
let bpmnElement;
|
||||
const props = defineProps({
|
||||
businessObject: Object,
|
||||
type: String,
|
||||
@ -55,7 +54,7 @@ const data = reactive({
|
||||
elementBaseInfo: {},
|
||||
bpmnElement: undefined,
|
||||
});
|
||||
const { elementBaseInfo, bpmnElement } = toRefs(data);
|
||||
const { elementBaseInfo } = toRefs(data);
|
||||
watch(
|
||||
businessObject,
|
||||
(val) => {
|
||||
@ -69,24 +68,24 @@ watch(
|
||||
);
|
||||
|
||||
function resetBaseInfo() {
|
||||
bpmnElement.value = window?.bpmnInstances?.bpmnElement;
|
||||
bpmnElement = window?.bpmnInstances?.bpmnElement;
|
||||
elementBaseInfo.value = JSON.parse(
|
||||
JSON.stringify(bpmnElement.value.businessObject)
|
||||
JSON.stringify(bpmnElement.businessObject)
|
||||
);
|
||||
}
|
||||
function updateBaseInfo(key) {
|
||||
const attrObj = Object.create(null);
|
||||
attrObj[key] = elementBaseInfo.value[key];
|
||||
if (key === "id") {
|
||||
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
|
||||
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
|
||||
id: elementBaseInfo.value[key],
|
||||
di: { id: `${elementBaseInfo.value[key]}_di` },
|
||||
});
|
||||
} else {
|
||||
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj);
|
||||
window.bpmnInstances.modeling.updateProperties(bpmnElement, attrObj);
|
||||
}
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null;
|
||||
bpmnElement = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -181,7 +181,7 @@
|
||||
<el-input v-model="fieldOptionForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<template #footer>
|
||||
<el-button size="small" @click="fieldOptionModelVisible = false"
|
||||
>取 消</el-button
|
||||
>
|
||||
|
||||
@ -11,16 +11,13 @@
|
||||
/>
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
@click="openListenerForm(row, $index)"
|
||||
<el-button size="small" link @click="openListenerForm(row, $index)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
link
|
||||
style="color: #ff4d4f"
|
||||
@click="removeListener(row, $index)"
|
||||
>移除</el-button
|
||||
@ -196,14 +193,14 @@
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
link
|
||||
@click="openListenerFieldForm(row, $index)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
link
|
||||
style="color: #ff4d4f"
|
||||
@click="removeListenerField(row, $index)"
|
||||
>移除</el-button
|
||||
@ -278,7 +275,7 @@
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<template #footer>
|
||||
<el-button size="small" @click="listenerFieldFormModelVisible = false"
|
||||
>取 消</el-button
|
||||
>
|
||||
|
||||
@ -2,35 +2,98 @@
|
||||
<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="row => listenerEventTypeObject[row.event]" />
|
||||
<el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
|
||||
<el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column
|
||||
label="事件类型"
|
||||
min-width="80px"
|
||||
show-overflow-tooltip
|
||||
:formatter="(row) => listenerEventTypeObject[row.event]"
|
||||
/>
|
||||
<el-table-column
|
||||
label="事件id"
|
||||
min-width="80px"
|
||||
prop="id"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="监听器类型"
|
||||
min-width="80px"
|
||||
show-overflow-tooltip
|
||||
:formatter="(row) => listenerTypeObject[row.listenerType]"
|
||||
/>
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-button size="small" link @click="openListenerForm(row, $index)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
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="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-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.native.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<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.native.prevent
|
||||
>
|
||||
<el-form-item
|
||||
label="事件类型"
|
||||
prop="event"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
|
||||
<el-option
|
||||
v-for="i in Object.keys(listenerEventTypeObject)"
|
||||
:key="i"
|
||||
:label="listenerEventTypeObject[i]"
|
||||
:value="i"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-form-item
|
||||
label="监听器ID"
|
||||
prop="id"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<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-option
|
||||
v-for="i in Object.keys(listenerTypeObject)"
|
||||
:key="i"
|
||||
:label="listenerTypeObject[i]"
|
||||
:value="i"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -65,7 +128,11 @@
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请填写脚本格式',
|
||||
}"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
@ -73,7 +140,11 @@
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请选择脚本类型',
|
||||
}"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
@ -85,7 +156,11 @@
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请填写脚本内容',
|
||||
}"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
@ -94,14 +169,22 @@
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请填写资源地址',
|
||||
}"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-if="listenerForm.event === 'timeout'">
|
||||
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
|
||||
<el-form-item
|
||||
label="定时器类型"
|
||||
prop="eventDefinitionType"
|
||||
key="eventDefinitionType"
|
||||
>
|
||||
<el-select v-model="listenerForm.eventDefinitionType">
|
||||
<el-option label="日期" value="date" />
|
||||
<el-option label="持续时长" value="duration" />
|
||||
@ -110,11 +193,18 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
|
||||
v-if="
|
||||
!!listenerForm.eventDefinitionType &&
|
||||
listenerForm.eventDefinitionType !== 'null'
|
||||
"
|
||||
label="定时器"
|
||||
prop="eventTimeDefinitions"
|
||||
key="eventTimeDefinitions"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请填写定时器配置',
|
||||
}"
|
||||
>
|
||||
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
|
||||
</el-form-item>
|
||||
@ -124,37 +214,100 @@
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
<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
|
||||
: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="字段类型"
|
||||
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 slot-scope="{ row, $index }">
|
||||
<el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
@click="openListenerFieldForm(row, $index)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
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>
|
||||
<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.native.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<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.native.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-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-option
|
||||
v-for="i in Object.keys(fieldTypeObject)"
|
||||
:key="i"
|
||||
:label="fieldTypeObject[i]"
|
||||
:value="i"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -176,26 +329,37 @@
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
<template #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 { ElMessageBox } from "element-plus";
|
||||
import { createListenerObject, updateElementExtensions } from "../../utils";
|
||||
import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from "./utilSelf";
|
||||
import {
|
||||
initListenerForm,
|
||||
initListenerType,
|
||||
eventType,
|
||||
listenerType,
|
||||
fieldType,
|
||||
} from "./utilSelf";
|
||||
|
||||
export default {
|
||||
name: "UserTaskListeners",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
type: String,
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
width: "width",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -209,7 +373,7 @@ export default {
|
||||
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
|
||||
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
|
||||
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
|
||||
listenerFieldForm: {} // 监听器 注入字段 详情表单
|
||||
listenerFieldForm: {}, // 监听器 注入字段 详情表单
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -217,15 +381,20 @@ export default {
|
||||
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}:TaskListener`) ?? [];
|
||||
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
|
||||
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) {
|
||||
@ -236,7 +405,10 @@ export default {
|
||||
this.editingListenerIndex = -1; // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
|
||||
this.fieldsListOfListener = listener.fields.map((field) => ({
|
||||
...field,
|
||||
fieldType: field.string ? "string" : "expression",
|
||||
}));
|
||||
} else {
|
||||
this.fieldsListOfListener = [];
|
||||
this.$set(this.listenerForm, "fields", []);
|
||||
@ -244,19 +416,23 @@ export default {
|
||||
// 打开侧边栏并清楚验证状态
|
||||
this.listenerFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
|
||||
if (this.$refs["listenerFormRef"])
|
||||
this.$refs["listenerFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 移除监听器
|
||||
removeListener(listener, index) {
|
||||
this.$confirm("确认移除该监听器吗？", "提示", {
|
||||
ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
cancelButtonText: "取 消",
|
||||
})
|
||||
.then(() => {
|
||||
this.bpmnElementListeners.splice(index, 1);
|
||||
this.elementListenersList.splice(index, 1);
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
updateElementExtensions(
|
||||
this.bpmnElement,
|
||||
this.otherExtensionList.concat(this.bpmnElementListeners)
|
||||
);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
@ -264,17 +440,35 @@ export default {
|
||||
async saveListenerConfig() {
|
||||
let validateStatus = await this.$refs["listenerFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
|
||||
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.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));
|
||||
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 = {};
|
||||
@ -285,7 +479,8 @@ export default {
|
||||
this.editingListenerFieldIndex = field ? index : -1;
|
||||
this.listenerFieldFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
|
||||
if (this.$refs["listenerFieldFormRef"])
|
||||
this.$refs["listenerFieldFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 保存监听器注入字段
|
||||
@ -296,8 +491,16 @@ export default {
|
||||
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.fieldsListOfListener.splice(
|
||||
this.editingListenerFieldIndex,
|
||||
1,
|
||||
this.listenerFieldForm
|
||||
);
|
||||
this.listenerForm.fields.splice(
|
||||
this.editingListenerFieldIndex,
|
||||
1,
|
||||
this.listenerFieldForm
|
||||
);
|
||||
}
|
||||
this.listenerFieldFormModelVisible = false;
|
||||
this.$nextTick(() => (this.listenerFieldForm = {}));
|
||||
@ -306,14 +509,14 @@ export default {
|
||||
removeListenerField(field, index) {
|
||||
this.$confirm("确认移除该字段吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
cancelButtonText: "取 消",
|
||||
})
|
||||
.then(() => {
|
||||
this.fieldsListOfListener.splice(index, 1);
|
||||
this.listenerForm.fields.splice(index, 1);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -7,9 +7,9 @@ export const template = isTaskListener => {
|
||||
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-button size="small" link @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
<el-button size="small" link style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -97,21 +97,20 @@ export const template = isTaskListener => {
|
||||
<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>"
|
||||
: ""
|
||||
}
|
||||
${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">
|
||||
@ -125,9 +124,9 @@ export const template = isTaskListener => {
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-button size="small" link @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
<el-button size="small" link style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -168,7 +167,7 @@ export const template = isTaskListener => {
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<template #footer>
|
||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
|
||||
@ -16,44 +16,47 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ElementOtherConfig">
|
||||
import { toRefs } from "vue";
|
||||
|
||||
<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]
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
});
|
||||
const { id } = toRefs(props);
|
||||
let bpmnElement;
|
||||
const documentation = ref("");
|
||||
|
||||
watch(
|
||||
id,
|
||||
(val) => {
|
||||
if (id && id.length) {
|
||||
nextTick(() => {
|
||||
const documentations =
|
||||
window.bpmnInstances.bpmnElement.businessObject?.documentation;
|
||||
documentation.value =
|
||||
documentations && documentations.length ? documentations[0].text : "";
|
||||
});
|
||||
} else {
|
||||
documentation.value = "";
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
};
|
||||
);
|
||||
|
||||
function updateDocumentation() {
|
||||
(bpmnElement && bpmnElement.id === this.id) ||
|
||||
(bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
|
||||
const documentation = window.bpmnInstances.bpmnFactory.create(
|
||||
"bpmn:Documentation",
|
||||
{ text: this.documentation }
|
||||
);
|
||||
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
|
||||
documentation: [documentation],
|
||||
});
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,23 +1,65 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementPropertyList" size="small" max-height="240" border fit>
|
||||
<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="属性名"
|
||||
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 slot-scope="{ row, $index }">
|
||||
<el-button size="small" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
|
||||
<el-button size="small" link @click="openAttributesForm(row, $index)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
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="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-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.native.prevent>
|
||||
<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.native.prevent
|
||||
>
|
||||
<el-form-item label="属性名：" prop="name">
|
||||
<el-input v-model="propertyForm.name" clearable />
|
||||
</el-form-item>
|
||||
@ -25,110 +67,139 @@
|
||||
<el-input v-model="propertyForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="small" @click="propertyFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveAttribute">确 定</el-button>
|
||||
<template #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 setup name="ElementProperties">
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { toRefs } from "vue";
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementProperties",
|
||||
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`;
|
||||
}) ?? [];
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String,
|
||||
});
|
||||
const { id, type } = toRefs(props);
|
||||
const prefix = inject("prefix");
|
||||
const width = inject("width");
|
||||
const data = reactive({
|
||||
propertyForm: {},
|
||||
});
|
||||
const { propertyForm } = toRefs(data);
|
||||
|
||||
// 保存所有的 扩展属性字段
|
||||
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;
|
||||
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);
|
||||
let bpmnElement;
|
||||
let otherExtensionList;
|
||||
let bpmnElementPropertyList;
|
||||
let bpmnElementProperties;
|
||||
const elementPropertyList = ref([]);
|
||||
const editingPropertyIndex = ref(-1);
|
||||
const propertyFormModelVisible = ref(false);
|
||||
|
||||
watch(
|
||||
id,
|
||||
(val) => {
|
||||
val && val.length && resetAttributesList();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
function resetAttributesList() {
|
||||
bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
otherExtensionList = []; // 其他扩展配置
|
||||
bpmnElementProperties =
|
||||
bpmnElement.businessObject?.extensionElements?.values?.filter((ex) => {
|
||||
if (ex.$type !== `${prefix}:Properties`) {
|
||||
otherExtensionList.push(ex);
|
||||
}
|
||||
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
|
||||
});
|
||||
}
|
||||
return ex.$type === `${prefix}:Properties`;
|
||||
}) ?? [];
|
||||
|
||||
// 保存所有的 扩展属性字段
|
||||
bpmnElementPropertyList = bpmnElementProperties.reduce(
|
||||
(pre, current) => pre.concat(current.values),
|
||||
[]
|
||||
);
|
||||
// 复制 显示
|
||||
elementPropertyList.value = JSON.parse(
|
||||
JSON.stringify(bpmnElementPropertyList ?? [])
|
||||
);
|
||||
}
|
||||
const attributeFormRef = ref();
|
||||
|
||||
function openAttributesForm(attr, index) {
|
||||
editingPropertyIndex.value = index;
|
||||
propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
|
||||
propertyFormModelVisible.value = true;
|
||||
nextTick(() => {
|
||||
if (attributeFormRef.value) attributeFormRef.value.clearValidate();
|
||||
});
|
||||
}
|
||||
|
||||
function removeAttributes(attr, index) {
|
||||
ElMessageBox.confirm("确认移除该属性吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消",
|
||||
})
|
||||
.then(() => {
|
||||
elementPropertyList.value.splice(index, 1);
|
||||
bpmnElementPropertyList.splice(index, 1);
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(
|
||||
`${prefix}:Properties`,
|
||||
{
|
||||
values: bpmnElementPropertyList,
|
||||
}
|
||||
);
|
||||
updateElementExtensions(propertiesObject);
|
||||
resetAttributesList();
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
}
|
||||
function saveAttribute() {
|
||||
const { name, value } = propertyForm.value;
|
||||
if (editingPropertyIndex.value !== -1) {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(
|
||||
bpmnElement,
|
||||
bpmnElementPropertyList[editingPropertyIndex.value],
|
||||
{
|
||||
name,
|
||||
value,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
// 新建属性字段
|
||||
const newPropertyObject = window.bpmnInstances.moddle.create(
|
||||
`${prefix}:Property`,
|
||||
{ name, value }
|
||||
);
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(
|
||||
`${prefix}:Properties`,
|
||||
{
|
||||
values: bpmnElementPropertyList.concat([newPropertyObject]),
|
||||
}
|
||||
);
|
||||
updateElementExtensions(propertiesObject);
|
||||
}
|
||||
};
|
||||
propertyFormModelVisible.value = false;
|
||||
resetAttributesList();
|
||||
}
|
||||
function updateElementExtensions(properties) {
|
||||
const extensions = window.bpmnInstances.moddle.create(
|
||||
"bpmn:ExtensionElements",
|
||||
{
|
||||
values: otherExtensionList.concat([properties]),
|
||||
}
|
||||
);
|
||||
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
|
||||
extensionElements: extensions,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
icon="plus"
|
||||
@click="openModel('message')"
|
||||
>创建新消息</el-button
|
||||
>
|
||||
@ -39,7 +39,7 @@
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
icon="plus"
|
||||
@click="openModel('signal')"
|
||||
>创建新信号</el-button
|
||||
>
|
||||
@ -81,7 +81,7 @@
|
||||
<el-input v-model="modelObjectForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<template #footer>
|
||||
<el-button size="small" @click="modelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addNewObject"
|
||||
>保 存</el-button
|
||||
@ -90,77 +90,77 @@
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "SignalAndMassage",
|
||||
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 ElMessage.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 setup name="SignalAndMassage">
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref } from "vue";
|
||||
|
||||
let rootElements;
|
||||
let messageIdMap;
|
||||
let signalIdMap;
|
||||
const signalList = ref([]);
|
||||
const messageList = ref([]);
|
||||
const modelVisible = ref(false);
|
||||
const modelType = ref("");
|
||||
const data = reactive({
|
||||
modelObjectForm: {},
|
||||
});
|
||||
const { modelObjectForm } = toRefs(data);
|
||||
|
||||
const modelConfig = computed(() => {
|
||||
if (modelType.value === "message") {
|
||||
return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
|
||||
} else {
|
||||
return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
|
||||
}
|
||||
});
|
||||
|
||||
function initDataList() {
|
||||
rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
|
||||
messageIdMap = {};
|
||||
signalIdMap = {};
|
||||
messageList.value = [];
|
||||
signalList.value = [];
|
||||
rootElements.forEach((el) => {
|
||||
if (el.$type === "bpmn:Message") {
|
||||
messageIdMap[el.id] = true;
|
||||
messageList.value.push({ ...el });
|
||||
}
|
||||
if (el.$type === "bpmn:Signal") {
|
||||
signalIdMap[el.id] = true;
|
||||
signalList.value.push({ ...el });
|
||||
}
|
||||
});
|
||||
}
|
||||
function openModel(type) {
|
||||
modelType.value = type;
|
||||
modelObjectForm.value = {};
|
||||
modelVisible.value = true;
|
||||
}
|
||||
function addNewObject() {
|
||||
if (modelType.value === "message") {
|
||||
if (messageIdMap[modelObjectForm.value.id]) {
|
||||
return ElMessage.error("该消息已存在，请修改id后重新保存");
|
||||
}
|
||||
const messageRef = window.bpmnInstances.moddle.create(
|
||||
"bpmn:Message",
|
||||
modelObjectForm.value
|
||||
);
|
||||
rootElements.push(messageRef);
|
||||
} else {
|
||||
if (signalIdMap[modelObjectForm.value.id]) {
|
||||
return ElMessage.error("该信号已存在，请修改id后重新保存");
|
||||
}
|
||||
const signalRef = window.bpmnInstances.moddle.create(
|
||||
"bpmn:Signal",
|
||||
modelObjectForm.value
|
||||
);
|
||||
rootElements.push(signalRef);
|
||||
}
|
||||
modelVisible.value = false;
|
||||
initDataList();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initDataList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<el-input v-model="newMessageForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<template #footer>
|
||||
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.panel-tab__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
padding: 0 8px;
|
||||
font-size: 1.1em;
|
||||
@ -93,7 +95,7 @@
|
||||
.element-drawer__button > .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@ -107,4 +109,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,108 +1,146 @@
|
||||
import axios from 'axios'
|
||||
import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import errorCode from '@/utils/errorCode'
|
||||
import { tansParams, blobValidate } from '@/utils/ruoyi'
|
||||
import cache from '@/plugins/cache'
|
||||
import { saveAs } from 'file-saver'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import axios from "axios";
|
||||
import {
|
||||
ElNotification,
|
||||
ElMessageBox,
|
||||
ElMessage,
|
||||
ElLoading,
|
||||
} from "element-plus";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import errorCode from "@/utils/errorCode";
|
||||
import { tansParams, blobValidate } from "@/utils/ruoyi";
|
||||
import cache from "@/plugins/cache";
|
||||
import { saveAs } from "file-saver";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
|
||||
let downloadLoadingInstance;
|
||||
// 是否显示重新登录
|
||||
export let isRelogin = { show: false };
|
||||
|
||||
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
||||
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
|
||||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
// axios中请求配置有baseURL选项，表示请求URL公共部分
|
||||
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||
// 超时
|
||||
timeout: 10000
|
||||
})
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(config => {
|
||||
// 是否需要设置 token
|
||||
const isToken = (config.headers || {}).isToken === false
|
||||
// 是否需要防止数据重复提交
|
||||
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
|
||||
if (getToken() && !isToken) {
|
||||
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
}
|
||||
// get请求映射params参数
|
||||
if (config.method === 'get' && config.params) {
|
||||
let url = config.url + '?' + tansParams(config.params);
|
||||
url = url.slice(0, -1);
|
||||
config.params = {};
|
||||
config.url = url;
|
||||
}
|
||||
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
|
||||
const requestObj = {
|
||||
url: config.url,
|
||||
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
|
||||
time: new Date().getTime()
|
||||
service.interceptors.request.use(
|
||||
(config) => {
|
||||
// 是否需要设置 token
|
||||
const isToken = (config.headers || {}).isToken === false;
|
||||
// 是否需要防止数据重复提交
|
||||
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
|
||||
if (getToken() && !isToken) {
|
||||
config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
}
|
||||
const sessionObj = cache.session.getJSON('sessionObj')
|
||||
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
|
||||
cache.session.setJSON('sessionObj', requestObj)
|
||||
} else {
|
||||
const s_url = sessionObj.url; // 请求地址
|
||||
const s_data = sessionObj.data; // 请求数据
|
||||
const s_time = sessionObj.time; // 请求时间
|
||||
const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
|
||||
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
|
||||
const message = '数据正在处理，请勿重复提交';
|
||||
console.warn(`[${s_url}]: ` + message)
|
||||
return Promise.reject(new Error(message))
|
||||
// get请求映射params参数
|
||||
if (config.method === "get" && config.params) {
|
||||
let url = config.url + "?" + tansParams(config.params);
|
||||
url = url.slice(0, -1);
|
||||
config.params = {};
|
||||
config.url = url;
|
||||
}
|
||||
if (
|
||||
!isRepeatSubmit &&
|
||||
(config.method === "post" || config.method === "put")
|
||||
) {
|
||||
const requestObj = {
|
||||
url: config.url,
|
||||
data:
|
||||
typeof config.data === "object"
|
||||
? JSON.stringify(config.data)
|
||||
: config.data,
|
||||
time: new Date().getTime(),
|
||||
};
|
||||
const sessionObj = cache.session.getJSON("sessionObj");
|
||||
if (
|
||||
sessionObj === undefined ||
|
||||
sessionObj === null ||
|
||||
sessionObj === ""
|
||||
) {
|
||||
cache.session.setJSON("sessionObj", requestObj);
|
||||
} else {
|
||||
cache.session.setJSON('sessionObj', requestObj)
|
||||
const s_url = sessionObj.url; // 请求地址
|
||||
const s_data = sessionObj.data; // 请求数据
|
||||
const s_time = sessionObj.time; // 请求时间
|
||||
const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
|
||||
if (
|
||||
s_data === requestObj.data &&
|
||||
requestObj.time - s_time < interval &&
|
||||
s_url === requestObj.url
|
||||
) {
|
||||
const message = "数据正在处理，请勿重复提交";
|
||||
console.warn(`[${s_url}]: ` + message);
|
||||
return Promise.reject(new Error(message));
|
||||
} else {
|
||||
cache.session.setJSON("sessionObj", requestObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
Promise.reject(error);
|
||||
}
|
||||
return config
|
||||
}, error => {
|
||||
console.log(error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
);
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(res => {
|
||||
service.interceptors.response.use(
|
||||
(res) => {
|
||||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || 200;
|
||||
// 获取错误信息
|
||||
const msg = errorCode[code] || res.data.msg || errorCode['default']
|
||||
const msg = errorCode[code] || res.data.msg || errorCode["default"];
|
||||
// 二进制数据则直接返回
|
||||
if(res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer'){
|
||||
return res.data
|
||||
if (
|
||||
res.request.responseType === "blob" ||
|
||||
res.request.responseType === "arraybuffer"
|
||||
) {
|
||||
return res.data;
|
||||
}
|
||||
if (code === 401) {
|
||||
if (!isRelogin.show) {
|
||||
isRelogin.show = true;
|
||||
ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
|
||||
isRelogin.show = false;
|
||||
useUserStore().logOut().then(() => {
|
||||
location.href = '/index';
|
||||
ElMessageBox.confirm(
|
||||
"登录状态已过期，您可以继续留在该页面，或者重新登录",
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "重新登录",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
isRelogin.show = false;
|
||||
useUserStore()
|
||||
.logOut()
|
||||
.then(() => {
|
||||
location.href = "/index";
|
||||
});
|
||||
})
|
||||
}).catch(() => {
|
||||
isRelogin.show = false;
|
||||
});
|
||||
}
|
||||
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
|
||||
.catch(() => {
|
||||
isRelogin.show = false;
|
||||
});
|
||||
}
|
||||
return Promise.reject("无效的会话，或者会话已过期，请重新登录。");
|
||||
} else if (code === 500) {
|
||||
ElMessage({ message: msg, type: 'error' })
|
||||
return Promise.reject(new Error(msg))
|
||||
ElMessage({ message: msg, type: "error" });
|
||||
return Promise.reject(new Error(msg));
|
||||
} else if (code === 601) {
|
||||
ElMessage({ message: msg, type: 'warning' })
|
||||
return Promise.reject(new Error(msg))
|
||||
ElMessage({ message: msg, type: "warning" });
|
||||
return Promise.reject(new Error(msg));
|
||||
} else if (code !== 200) {
|
||||
ElNotification.error({ title: msg })
|
||||
return Promise.reject('error')
|
||||
ElNotification.error({ title: msg });
|
||||
return Promise.reject("error");
|
||||
} else {
|
||||
return Promise.resolve(res.data)
|
||||
return Promise.resolve(res.data);
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log('err' + error)
|
||||
(error) => {
|
||||
console.log("err" + error);
|
||||
let { message } = error;
|
||||
if (message == "Network Error") {
|
||||
message = "后端接口连接异常";
|
||||
@ -111,36 +149,47 @@ service.interceptors.response.use(res => {
|
||||
} else if (message.includes("Request failed with status code")) {
|
||||
message = "系统接口" + message.substr(message.length - 3) + "异常";
|
||||
}
|
||||
ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
|
||||
return Promise.reject(error)
|
||||
ElMessage({ message: message, type: "error", duration: 5 * 1000 });
|
||||
return Promise.reject(error);
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
// 通用下载方法
|
||||
export function download(url, params, filename, config) {
|
||||
downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
|
||||
return service.post(url, params, {
|
||||
transformRequest: [(params) => { return tansParams(params) }],
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
responseType: 'blob',
|
||||
...config
|
||||
}).then(async (data) => {
|
||||
const isLogin = await blobValidate(data);
|
||||
if (isLogin) {
|
||||
const blob = new Blob([data])
|
||||
saveAs(blob, filename)
|
||||
} else {
|
||||
const resText = await data.text();
|
||||
const rspObj = JSON.parse(resText);
|
||||
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
|
||||
ElMessage.error(errMsg);
|
||||
}
|
||||
downloadLoadingInstance.close();
|
||||
}).catch((r) => {
|
||||
console.error(r)
|
||||
ElMessage.error('下载文件出现错误，请联系管理员！')
|
||||
downloadLoadingInstance.close();
|
||||
})
|
||||
downloadLoadingInstance = ElLoading.service({
|
||||
text: "正在下载数据，请稍候",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
return service
|
||||
.post(url, params, {
|
||||
transformRequest: [
|
||||
(params) => {
|
||||
return tansParams(params);
|
||||
},
|
||||
],
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
responseType: "blob",
|
||||
...config,
|
||||
})
|
||||
.then(async (data) => {
|
||||
const isLogin = await blobValidate(data);
|
||||
if (isLogin) {
|
||||
const blob = new Blob([data]);
|
||||
saveAs(blob, filename);
|
||||
} else {
|
||||
const resText = await data.text();
|
||||
const rspObj = JSON.parse(resText);
|
||||
const errMsg =
|
||||
errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
|
||||
ElMessage.error(errMsg);
|
||||
}
|
||||
downloadLoadingInstance.close();
|
||||
})
|
||||
.catch((r) => {
|
||||
console.error(r);
|
||||
ElMessage.error("下载文件出现错误，请联系管理员！");
|
||||
downloadLoadingInstance.close();
|
||||
});
|
||||
}
|
||||
|
||||
export default service
|
||||
export default service;
|
||||
|
||||
@ -100,14 +100,14 @@
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
link
|
||||
icon="el-icon-view"
|
||||
@click="handleDetail(scope.row)"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
link
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['workflow:form:edit']"
|
||||
@ -115,7 +115,7 @@
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
link
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['workflow:form:remove']"
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button link @click="handleProcessView(row)">
|
||||
<el-button type="primary" link @click="handleProcessView(row)">
|
||||
<span>{{ row.modelName }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
@ -159,60 +159,62 @@
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleUpdate(row)"
|
||||
v-hasPermi="['flowable:model:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
size="small"
|
||||
icon="brush"
|
||||
@click="handleDesigner(row)"
|
||||
v-hasPermi="['flowable:model:designer']"
|
||||
>设计</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
size="small"
|
||||
icon="video-play"
|
||||
v-hasPermi="['flowable:model:deploy']"
|
||||
@click.native="handleDeploy(row)"
|
||||
>部署</el-button
|
||||
>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon>
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
更多
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- TODO: v-hasPermi="['flowable:model:query']" -->
|
||||
<el-dropdown-item
|
||||
icon="view"
|
||||
@click.native="handleProcessView(row)"
|
||||
>流程图</el-dropdown-item
|
||||
>
|
||||
<!-- TODO: v-hasPermi="['flowable:model:list']" -->
|
||||
<el-dropdown-item
|
||||
icon="price-tag"
|
||||
@click.native="handleHistory(row)"
|
||||
>历史</el-dropdown-item
|
||||
>
|
||||
<!-- TODO: v-hasPermi="['flowable:model:remove']" -->
|
||||
<el-dropdown-item
|
||||
icon="delete"
|
||||
@click.native="handleDelete(row)"
|
||||
>删除</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div class="model-operation">
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleUpdate(row)"
|
||||
v-hasPermi="['flowable:model:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
size="small"
|
||||
icon="brush"
|
||||
@click="handleDesigner(row)"
|
||||
v-hasPermi="['flowable:model:designer']"
|
||||
>设计</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
size="small"
|
||||
icon="video-play"
|
||||
v-hasPermi="['flowable:model:deploy']"
|
||||
@click.native="handleDeploy(row)"
|
||||
>部署</el-button
|
||||
>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon>
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
更多
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- TODO: v-hasPermi="['flowable:model:query']" -->
|
||||
<el-dropdown-item
|
||||
icon="view"
|
||||
@click.native="handleProcessView(row)"
|
||||
>流程图</el-dropdown-item
|
||||
>
|
||||
<!-- TODO: v-hasPermi="['flowable:model:list']" -->
|
||||
<el-dropdown-item
|
||||
icon="price-tag"
|
||||
@click.native="handleHistory(row)"
|
||||
>历史</el-dropdown-item
|
||||
>
|
||||
<!-- TODO: v-hasPermi="['flowable:model:remove']" -->
|
||||
<el-dropdown-item
|
||||
icon="delete"
|
||||
@click.native="handleDelete(row)"
|
||||
>删除</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -323,16 +325,16 @@
|
||||
<!-- 流程图 -->
|
||||
<el-dialog
|
||||
:title="processView.title"
|
||||
:visible.sync="processView.open"
|
||||
v-model="processView.open"
|
||||
width="70%"
|
||||
append-to-body
|
||||
>
|
||||
<!-- TODO: -->
|
||||
<!-- <process-viewer
|
||||
<process-viewer
|
||||
:key="`designer-${processView.index}`"
|
||||
:xml="processView.xmlData"
|
||||
:style="{ height: '400px' }"
|
||||
/> -->
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="模型历史" v-model="history.open" width="70%">
|
||||
@ -452,10 +454,11 @@ import {
|
||||
import { listCategory } from "@/api/flowable/category";
|
||||
import { ArrowDown } from "@element-plus/icons-vue";
|
||||
import ProcessDesigner from "@/components/ProcessDesigner";
|
||||
// import ProcessViewer from "@/components/ProcessViewer";
|
||||
import ProcessViewer from "@/components/ProcessViewer";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
let bpmnXml;
|
||||
// 显示搜索条件
|
||||
const showSearch = ref(true);
|
||||
// 遮罩层
|
||||
@ -598,12 +601,12 @@ function handleSelectionChange(selection) {
|
||||
}
|
||||
/** 部署流程 */
|
||||
function handleDeploy(row) {
|
||||
this.loading = true;
|
||||
loading.value = true;
|
||||
deployModel({
|
||||
modelId: row.modelId,
|
||||
})
|
||||
.then((response) => {
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
ElMessage.success(response.msg);
|
||||
let obj = { name: "Deploy", path: "/workflow/deploy" };
|
||||
return this.$store
|
||||
.dispatch("tagsView/delCachedView", obj)
|
||||
@ -613,36 +616,36 @@ function handleDeploy(row) {
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
/** 查看流程图 */
|
||||
function handleProcessView(row) {
|
||||
let modelId = row.modelId;
|
||||
this.processView.title = "流程图";
|
||||
this.processView.index = modelId;
|
||||
processView.value.title = "流程图";
|
||||
processView.value.index = modelId;
|
||||
// 发送请求，获取xml
|
||||
getBpmnXml(modelId).then((response) => {
|
||||
this.processView.xmlData = response.data;
|
||||
processView.value.xmlData = response.data;
|
||||
});
|
||||
this.processView.open = true;
|
||||
processView.value.open = true;
|
||||
}
|
||||
function getHistoryList() {
|
||||
this.history.loading = true;
|
||||
historyModel(this.queryHistoryParams).then((response) => {
|
||||
this.historyTotal = response.total;
|
||||
this.historyList = response.rows;
|
||||
this.history.loading = false;
|
||||
history.value.loading = true;
|
||||
historyModel(queryHistoryParams.value).then((response) => {
|
||||
historyTotal.value = response.total;
|
||||
historyList.value = response.rows;
|
||||
history.value.loading = false;
|
||||
});
|
||||
}
|
||||
function handleHistory(row) {
|
||||
this.history.open = true;
|
||||
this.queryHistoryParams.modelKey = row.modelKey;
|
||||
this.getHistoryList();
|
||||
history.value.open = true;
|
||||
queryHistoryParams.value.modelKey = row.modelKey;
|
||||
getHistoryList();
|
||||
}
|
||||
/** 设为最新版 */
|
||||
function handleLatest(row) {
|
||||
this.$modal.confirm("是否确认将此版本设为最新？").then(() => {
|
||||
ElMessageBox.confirm("是否确认将此版本设为最新？").then(() => {
|
||||
this.history.loading = true;
|
||||
latestModel({
|
||||
modelId: row.modelId,
|
||||
@ -650,7 +653,7 @@ function handleLatest(row) {
|
||||
.then((response) => {
|
||||
this.history.open = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
ElMessage.success(response.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
this.history.loading = false;
|
||||
@ -719,59 +722,58 @@ function handleDesigner(row) {
|
||||
});
|
||||
}
|
||||
}
|
||||
function onSaveDesigner(bpmnXml) {
|
||||
this.bpmnXml = bpmnXml;
|
||||
function onSaveDesigner(bpmnXmlArgv) {
|
||||
// bpmnXml = bpmnXmlArgv;
|
||||
let dataBody = {
|
||||
modelId: this.designerData.modelId,
|
||||
bpmnXml: this.bpmnXml,
|
||||
modelId: designerData.value.modelId,
|
||||
bpmnXml: bpmnXmlArgv,
|
||||
};
|
||||
this.$confirm("是否将此模型保存为新版本？", "提示", {
|
||||
ElMessageBox.confirm("是否将此模型保存为新版本？", "提示", {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: "是",
|
||||
cancelButtonText: "否",
|
||||
})
|
||||
.then(() => {
|
||||
this.confirmSave(dataBody, true);
|
||||
confirmSave(dataBody, true);
|
||||
})
|
||||
.catch((action) => {
|
||||
if (action === "cancel") {
|
||||
this.confirmSave(dataBody, false);
|
||||
confirmSave(dataBody, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
function confirmSave(body, newVersion) {
|
||||
this.designerData.loading = true;
|
||||
designerData.value.loading = true;
|
||||
saveModel(
|
||||
Object.assign(body, {
|
||||
newVersion: newVersion,
|
||||
})
|
||||
)
|
||||
.then((res) => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.designerOpen = false;
|
||||
this.getList();
|
||||
ElMessage.success(res.msg);
|
||||
designerOpen.value = false;
|
||||
getList();
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$modal.msgError(res.msg);
|
||||
this.designerData.loading = false;
|
||||
ElMessage.error(res.msg);
|
||||
designerData.value.loading = false;
|
||||
});
|
||||
}
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const modelIds = row.modelId || this.ids;
|
||||
this.$modal
|
||||
.confirm('是否确认删除模型编号为"' + modelIds + '"的数据项？')
|
||||
const modelIds = row.modelId || ids.value;
|
||||
ElMessageBox.confirm('是否确认删除模型编号为"' + modelIds + '"的数据项？')
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
loading.value = true;
|
||||
return delModel(modelIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
loading.value = false;
|
||||
getList();
|
||||
ElMessage.success("删除成功");
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
@ -821,6 +823,12 @@ function submitSave() {
|
||||
getList();
|
||||
getCategoryList();
|
||||
</script>
|
||||
<style scoped>
|
||||
.model-operation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user