cxc/car_management
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

model

Browse Source
This commit is contained in:
cxc
2022-12-19 17:29:18 +08:00
parent 75538be028
commit 7726fcbf54
26 changed files with 1499 additions and 929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -22,6 +22,7 @@
"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",
@ -31,6 +32,7 @@
"jsencrypt": "3.3.1",
"nprogress": "0.2.0",
"pinia": "2.0.22",
"stream-browserify": "^3.0.0",
"throttle-debounce": "^5.0.0",
"vue": "3.2.45",
"vue-cropper": "1.0.3",
@ -44,7 +46,7 @@
"@vitejs/plugin-vue-jsx": "^3.0.0",
"@vue/babel-helper-vue-transform-on": "^1.0.2",
"@vue/compiler-sfc": "3.2.45",
"bpmn-js": "^11.1.0",
"bpmn-js": "7.4.0",
"bpmn-js-properties-panel": "^1.13.1",
"camunda-bpmn-moddle": "^7.0.1",
"sass": "1.56.1",

70
src/components/ProcessDesigner/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="process-design" :style="'display: flex; height:' + height">
<!-- <bpmn-process-designer
<bpmn-process-designer
v-model="xmlString"
v-bind="controlForm"
keyboard
@ -16,15 +16,21 @@
@event="handlerEvent"
@save="onSaveProcess"
/>
<bmpn-process-penal
:bpmn-modeler="modeler"
:prefix="controlForm.prefix"
class="process-panel"
/> -->
/>
</div>
</template>
<script setup>
import BmpnProcessPenal from "@/plugins/package/penal";
import BpmnProcessDesigner from "@/plugins/package/designer";
import "@/plugins/package/theme/index.scss";
// 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: {
@ -37,9 +43,39 @@ const props = defineProps({
},
});
const { bpmnXml, designerForm } = toRefs(props);
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 || "",
simulation: false,
labelEditing: false,
labelVisible: false,
prefix: "flowable",
headerButtonSize: "small",
additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
},
});
const { controlForm, element } = toRefs(data);
function elementClick(elementArgv) {
element.value = elementArgv;
console.log(elementArgv);
}
function initModeler(modelerArgv) {
setTimeout(() => {
modeler.value = modelerArgv;
console.log(modeler.value.get("eventBus"), "71");
}, 10);
}
function handlerEvent(eventName, element) {}
function onSaveProcess(saveData) {
emit("save", saveData);
}
</script>
<!--
@ -51,7 +87,7 @@ import CustomContentPadProvider from "@/plugins/package/designer/plugins/content
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from "@/plugins/package/designer/plugins/palette";
import vuePlugin from "@/plugins/package/highlight";
import "highlight.js/styles/atom-one-dark-reasonable.css";
// import "highlight.js/styles/atom-one-dark-reasonable.css";
// Vue.use(vuePlugin);
export default {
@ -63,32 +99,12 @@ export default {
},
data() {
return {
modeler: null,
controlForm: {
processId: this.designerForm.processKey || "",
processName: this.designerForm.processName || "",
simulation: false,
labelEditing: false,
labelVisible: false,
prefix: "flowable",
headerButtonSize: "small",
additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
},
};
},
methods: {
elementClick(element) {
this.element = element;
},
initModeler(modeler) {
setTimeout(() => {
this.modeler = modeler;
}, 10);
},
handlerEvent(eventName, element) {},
onSaveProcess(saveData) {
this.$emit("save", saveData);
},
},
};
</script>

953
src/plugins/package/designer/ProcessDesigner.vue
View File

File diff suppressed because it is too large Load Diff

2
src/plugins/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
View File

@ -95,4 +95,4 @@ ActivitiModdleExtension.prototype.canCloneProperty = function (
}
};
module.exports = ActivitiModdleExtension;
export default ActivitiModdleExtension;

2
src/plugins/package/designer/plugins/extension-moddle/camunda/extension.js
View File

@ -108,7 +108,7 @@ CamundaModdleExtension.prototype.canHostIn = function (parent) {
return true;
};
module.exports = CamundaModdleExtension;
export default CamundaModdleExtension;
// helpers //////////

2
src/plugins/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
View File

@ -94,4 +94,4 @@ FlowableModdleExtension.prototype.canCloneProperty = function (
}
};
module.exports = FlowableModdleExtension;
export default FlowableModdleExtension;

0
src/plugins/package/designer/test.vue Normal file
View File

8
src/plugins/package/highlight/index.js
View File

@ -1,5 +1,5 @@
const hljs = require("highlight.js/lib/core");
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("json", require("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;

364
src/plugins/package/penal/PropertiesPanel.vue
View File

@ -2,49 +2,100 @@
<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>
<element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType" />
<div slot="title" class="panel-tab__title">
<i class="el-icon-info"></i>常规
</div>
<element-base-info
:id-edit-disabled="idEditDisabled"
:business-object="elementBusinessObject"
:type="elementType"
/>
</el-collapse-item>
<el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
<div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
<el-collapse-item
name="condition"
v-if="elementType === 'Process'"
key="message"
>
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-comment"></i>消息与信号
</div>
<signal-and-massage />
</el-collapse-item>
<el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
<div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
<flow-condition :business-object="elementBusinessObject" :type="elementType" />
<el-collapse-item
name="condition"
v-if="conditionFormVisible"
key="condition"
>
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-promotion"></i>流转条件
</div>
<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>
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-order"></i>表单
</div>
<element-form :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
<div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
<el-collapse-item
name="task"
v-if="elementType.indexOf('Task') !== -1"
key="task"
>
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-claim"></i>任务
</div>
<element-task :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="multiInstance" 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>
<element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
<el-collapse-item
name="multiInstance"
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>
<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>
<div slot="title" class="panel-tab__title">
<i class="el-icon-message-solid"></i>执行监听器
</div>
<element-listeners :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
<div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听器</div>
<el-collapse-item
name="taskListeners"
v-if="elementType === 'UserTask'"
key="taskListeners"
>
<div slot="title" class="panel-tab__title">
<i class="el-icon-message-solid"></i>任务监听器
</div>
<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>
<div slot="title" class="panel-tab__title">
<i class="el-icon-circle-plus"></i>扩展属性
</div>
<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>
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-promotion"></i>其他
</div>
<element-other-config :id="elementId" />
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
<script setup name="BpmnPropertiesPanel">
import ElementBaseInfo from "./base/ElementBaseInfo";
import ElementOtherConfig from "./other/ElementOtherConfig";
import ElementTask from "./task/ElementTask";
@ -55,139 +106,160 @@ import ElementListeners from "./listeners/ElementListeners";
import ElementProperties from "./properties/ElementProperties";
import ElementForm from "./form/ElementForm";
import UserTaskListeners from "./listeners/UserTaskListeners";
/**
* 侧边栏
* @Author MiyueFE
* @Home https://github.com/miyuesc
* @Date 2021年3月31日18:57:51
*/
export default {
name: "BpmnPropertiesPanel",
components: {
UserTaskListeners,
ElementForm,
ElementProperties,
ElementListeners,
SignalAndMassage,
FlowCondition,
ElementMultiInstance,
ElementTask,
ElementOtherConfig,
ElementBaseInfo
import { provide, toRefs, watch } from "vue";
import useBpmnStore from "@/store/modules/bpmn";
const props = defineProps({
bpmnModeler: Object,
prefix: {
type: String,
default: "camunda",
},
componentName: "BpmnPropertiesPanel",
props: {
bpmnModeler: Object,
prefix: {
type: String,
default: "camunda"
},
width: {
type: Number,
default: 480
},
idEditDisabled: {
type: Boolean,
default: false
width: {
type: Number,
default: 480,
},
idEditDisabled: {
type: Boolean,
default: false,
},
});
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("");
const elementType = ref("");
const elementBusinessObject = ref({}); // 元素 businessObject 镜像，提供给需要做判断的组件使用
const conditionFormVisible = ref(false); // 流转条件设置
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"),
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"),
};
getActiveElement();
}
function getActiveElement() {
console.log("select first");
// 初始第一个选中元素 bpmn:Process
initFormOnChanged(null);
bpmnModeler.value.on("import.done", (e) => {
initFormOnChanged(null);
});
// 监听选择事件，修改当前激活的元素以及表单
bpmnModeler.value.on("selection.changed", ({ newSelection }) => {
console.log("selection.changed");
initFormOnChanged(newSelection[0] || null);
});
bpmnModeler.value.on("element.changed", ({ element }) => {
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
if (element && element.id === elementId.value) {
initFormOnChanged(element);
}
},
provide() {
return {
prefix: this.prefix,
width: this.width
};
},
data() {
return {
activeTab: "base",
elementId: "",
elementType: "",
elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
conditionFormVisible: false, // 流转条件设置
formVisible: false // 表单配置
};
},
watch: {
elementId: {
handler() {
this.activeTab = "base";
}
}
},
created() {
this.initModels();
},
methods: {
initModels() {
// 初始化 modeler 以及其他 moddle
if (!this.bpmnModeler) {
// 避免加载时 流程图 并未加载完成
this.timer = setTimeout(() => this.initModels(), 10);
return;
}
if (this.timer) clearTimeout(this.timer);
window.bpmnInstances = {
modeler: this.bpmnModeler,
modeling: this.bpmnModeler.get("modeling"),
moddle: this.bpmnModeler.get("moddle"),
eventBus: this.bpmnModeler.get("eventBus"),
bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
elementFactory: this.bpmnModeler.get("elementFactory"),
elementRegistry: this.bpmnModeler.get("elementRegistry"),
replace: this.bpmnModeler.get("replace"),
selection: this.bpmnModeler.get("selection")
};
this.getActiveElement();
},
getActiveElement() {
// 初始第一个选中元素 bpmn:Process
this.initFormOnChanged(null);
this.bpmnModeler.on("import.done", e => {
this.initFormOnChanged(null);
});
// 监听选择事件，修改当前激活的元素以及表单
this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
this.initFormOnChanged(newSelection[0] || null);
});
this.bpmnModeler.on("element.changed", ({ element }) => {
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
if (element && element.id === this.elementId) {
this.initFormOnChanged(element);
}
});
},
// 初始化数据
initFormOnChanged(element) {
let activatedElement = element;
if (!activatedElement) {
activatedElement =
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
}
if (!activatedElement) return;
console.log(`
});
}
// 初始化数据
function initFormOnChanged(element) {
let activatedElement = element;
if (!activatedElement) {
activatedElement =
window.bpmnInstances.elementRegistry.find(
(el) => el.type === "bpmn:Process"
) ??
window.bpmnInstances.elementRegistry.find(
(el) => el.type === "bpmn:Collaboration"
);
}
if (!activatedElement) return;
console.log(`
----------
select element changed:
id: ${activatedElement.id}
type: ${activatedElement.businessObject.$type}
----------
`);
console.log("businessObject: ", activatedElement.businessObject);
window.bpmnInstances.bpmnElement = activatedElement;
this.bpmnElement = activatedElement;
this.elementId = activatedElement.id;
this.elementType = activatedElement.type.split(":")[1] || "";
this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
this.conditionFormVisible = !!(
this.elementType === "SequenceFlow" &&
activatedElement.source &&
activatedElement.source.type.indexOf("StartEvent") === -1
);
this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
},
beforeDestroy() {
window.bpmnInstances = null;
}
}
};
console.log("businessObject: ", activatedElement.businessObject);
window.bpmnInstances.bpmnElement = activatedElement;
bpmnElement = activatedElement;
elementId.value = activatedElement.id;
elementType.value = activatedElement.type.split(":")[1] || "";
elementBusinessObject.value = JSON.parse(
JSON.stringify(activatedElement.businessObject)
);
conditionFormVisible.value = !!(
elementType.value === "SequenceFlow" &&
activatedElement.source &&
activatedElement.source.type.indexOf("StartEvent") === -1
);
formVisible.value =
elementType.value === "UserTask" || elementType.value === "StartEvent";
}
function beforeDestroy() {
window.bpmnInstances = null;
}
watch(elementId, (val) => {
activeTab.value = "base";
});
initModels();
</script>

114
src/plugins/package/penal/base/ElementBaseInfo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="panel-tab__content">
<el-form size="mini" label-width="90px" @submit.native.prevent>
<el-form size="small" label-width="90px" @submit.native.prevent>
<el-form-item label="ID">
<el-input
v-model="elementBaseInfo.id"
@ -10,67 +10,83 @@
/>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
<el-input
v-model="elementBaseInfo.name"
clearable
@change="updateBaseInfo('name')"
/>
</el-form-item>
<!--流程的基础属性-->
<template v-if="elementBaseInfo.$type === 'bpmn:Process'">
<el-form-item label="版本标签">
<el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
<el-input
v-model="elementBaseInfo.versionTag"
clearable
@change="updateBaseInfo('versionTag')"
/>
</el-form-item>
<el-form-item label="可执行">
<el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
<el-switch
v-model="elementBaseInfo.isExecutable"
active-text="是"
inactive-text="否"
@change="updateBaseInfo('isExecutable')"
/>
</el-form-item>
</template>
</el-form>
</div>
</template>
<script>
export default {
name: "ElementBaseInfo",
props: {
businessObject: Object,
type: String,
idEditDisabled: {
type: Boolean,
default: true
<script setup name="ElementBaseInfo">
import { nextTick, onBeforeUnmount, toRefs } from "vue";
import useBpmnStore from "@/store/modules/bpmn";
const bpmnStore = useBpmnStore();
const props = defineProps({
businessObject: Object,
type: String,
idEditDisabled: {
type: Boolean,
default: true,
},
});
const { businessObject, type, idEditDisabled } = toRefs(props);
const data = reactive({
elementBaseInfo: {},
bpmnElement: undefined,
});
const { elementBaseInfo, bpmnElement } = toRefs(data);
watch(
businessObject,
(val) => {
if (val) {
nextTick(() => {
resetBaseInfo();
});
}
},
data() {
return {
elementBaseInfo: {},
};
},
watch: {
businessObject: {
immediate: false,
handler: function(val) {
if (val) {
this.$nextTick(() => this.resetBaseInfo());
}
}
}
},
methods: {
resetBaseInfo() {
this.bpmnElement = window?.bpmnInstances?.bpmnElement;
this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
},
updateBaseInfo(key) {
const attrObj = Object.create(null);
attrObj[key] = this.elementBaseInfo[key];
if (key === "id") {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
id: this.elementBaseInfo[key],
di: { id: `${this.elementBaseInfo[key]}_di` }
});
} else {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
}
}
},
beforeDestroy() {
this.bpmnElement = null;
{ immediate: false }
);
function resetBaseInfo() {
bpmnElement.value = window?.bpmnInstances?.bpmnElement;
elementBaseInfo.value = JSON.parse(
JSON.stringify(bpmnElement.value.businessObject)
);
}
function updateBaseInfo(key) {
const attrObj = Object.create(null);
attrObj[key] = elementBaseInfo.value[key];
if (key === "id") {
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
id: elementBaseInfo.value[key],
di: { id: `${elementBaseInfo.value[key]}_di` },
});
} else {
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj);
}
};
}
onBeforeUnmount(() => {
bpmnElement.value = null;
});
</script>

2
src/plugins/package/penal/flow-condition/FlowCondition.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="panel-tab__content">
<el-form :model="flowConditionForm" label-width="90px" size="mini" @submit.native.prevent>
<el-form :model="flowConditionForm" label-width="90px" size="small" @submit.native.prevent>
<el-form-item label="流转类型">
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
<el-option label="普通流转路径" value="normal" />

50
src/plugins/package/penal/form/ElementForm.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="panel-tab__content">
<el-form size="mini" label-width="80px" @submit.native.prevent>
<el-form size="small" label-width="80px" @submit.native.prevent>
<el-form-item label="表单" prop="formKey">
<el-select
v-model="formKey"
@ -30,27 +30,27 @@
<!--字段列表-->
<!-- <div class="element-property list-property">-->
<!-- <el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>-->
<!-- <el-table :data="fieldList" size="mini" max-height="240" border fit>-->
<!-- <el-table :data="fieldList" size="small" max-height="240" border fit>-->
<!-- <el-table-column label="序号" type="index" width="50px" />-->
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
<!-- <el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />-->
<!-- <el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template slot-scope="{ row, $index }">-->
<!-- <el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
<!-- <el-button size="small" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
<!-- <el-button size="small" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </div>-->
<!-- <div class="element-drawer__button">-->
<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
<!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
<!-- </div>-->
<!--字段配置侧边栏-->
<!-- <el-drawer :visible.sync="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
<!-- <el-form :model="formFieldForm" label-width="90px" size="mini" @submit.native.prevent>-->
<!-- <el-drawer v-model="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
<!-- <el-form :model="formFieldForm" label-width="90px" size="small" @submit.native.prevent>-->
<!-- <el-form-item label="字段ID">-->
<!-- <el-input v-model="formFieldForm.id" clearable />-->
<!-- </el-form-item>-->
@ -78,17 +78,17 @@
<!-- <el-divider key="enum-divider" />-->
<!-- <p class="listener-filed__title" key="enum-title">-->
<!-- <span><i class="el-icon-menu"></i>枚举值列表：</span>-->
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
<!-- </p>-->
<!-- <el-table :data="fieldEnumList" size="mini" key="enum-table" max-height="240" border fit>-->
<!-- <el-table :data="fieldEnumList" size="small" key="enum-table" max-height="240" border fit>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template slot-scope="{ row, $index }">-->
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
<!-- <el-button size="small" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
<!-- <el-button size="small" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
@ -98,17 +98,17 @@
<!-- <el-divider key="validation-divider" />-->
<!-- <p class="listener-filed__title" key="validation-title">-->
<!-- <span><i class="el-icon-menu"></i>约束条件列表：</span>-->
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
<!-- </p>-->
<!-- <el-table :data="fieldConstraintsList" size="mini" key="validation-table" max-height="240" border fit>-->
<!-- <el-table :data="fieldConstraintsList" size="small" key="validation-table" max-height="240" border fit>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template slot-scope="{ row, $index }">-->
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
<!-- <el-button size="small" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
<!-- <el-button size="small" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
@ -117,30 +117,30 @@
<!-- <el-divider key="property-divider" />-->
<!-- <p class="listener-filed__title" key="property-title">-->
<!-- <span><i class="el-icon-menu"></i>字段属性列表：</span>-->
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
<!-- </p>-->
<!-- <el-table :data="fieldPropertiesList" size="mini" key="property-table" max-height="240" border fit>-->
<!-- <el-table :data="fieldPropertiesList" size="small" key="property-table" max-height="240" border fit>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template slot-scope="{ row, $index }">-->
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
<!-- <el-button size="small" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
<!-- <el-button size="small" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 底部按钮 &ndash;&gt;-->
<!-- <div class="element-drawer__button">-->
<!-- <el-button size="mini">取 消</el-button>-->
<!-- <el-button size="mini" type="primary" @click="saveField">保 存</el-button>-->
<!-- <el-button size="small">取 消</el-button>-->
<!-- <el-button size="small" type="primary" @click="saveField">保 存</el-button>-->
<!-- </div>-->
<!-- </el-drawer>-->
<el-dialog
:visible.sync="fieldOptionModelVisible"
v-model="fieldOptionModelVisible"
:title="optionModelTitle"
width="600px"
append-to-body
@ -148,7 +148,7 @@
>
<el-form
:model="fieldOptionForm"
size="mini"
size="small"
label-width="96px"
@submit.native.prevent
>
@ -182,10 +182,10 @@
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="fieldOptionModelVisible = false"
<el-button size="small" @click="fieldOptionModelVisible = false"
>取 消</el-button
>
<el-button size="mini" type="primary" @click="saveFieldOption"
<el-button size="small" type="primary" @click="saveFieldOption"
>确 定</el-button
>
</template>

487
src/plugins/package/penal/listeners/ElementListeners.vue
View File

@ -1,33 +1,80 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="mini" border>
<el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="事件类型" min-width="100px" prop="event" />
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column
label="监听器类型"
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="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-button
size="small"
type="text"
@click="openListenerForm(row, $index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
<el-button
size="small"
type="text"
style="color: #ff4d4f"
@click="removeListener(row, $index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" 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 :visible.sync="listenerFormModelVisible" title="执行监听器" :size="`${width}px`" append-to-body destroy-on-close>
<el-form size="mini" :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 label="start" value="start" />
<el-option label="end" value="end" />
</el-select>
</el-form-item>
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-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
@ -62,7 +109,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>
@ -70,7 +121,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" />
@ -82,7 +137,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>
@ -91,7 +150,11 @@
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>
@ -100,37 +163,100 @@
<el-divider />
<p class="listener-filed__title">
<span><i class="el-icon-menu"></i>注入字段：</span>
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
<el-button
size="small"
type="primary"
@click="openListenerFieldForm(null)"
>添加字段</el-button
>
</p>
<el-table :data="fieldsListOfListener" size="mini" 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="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-button
size="small"
type="text"
@click="openListenerFieldForm(row, $index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
<el-button
size="small"
type="text"
style="color: #ff4d4f"
@click="removeListenerField(row, $index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="mini" 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="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
<el-form :model="listenerFieldForm" size="mini" 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
@ -153,144 +279,183 @@
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
<el-button size="small" @click="listenerFieldFormModelVisible = false"
>取 消</el-button
>
<el-button size="small" type="primary" @click="saveListenerFiled"
>确 定</el-button
>
</template>
</el-dialog>
</div>
</template>
<script>
import { createListenerObject, updateElementExtensions } from "../../utils";
import { initListenerType, initListenerForm, listenerType, fieldType } from "./utilSelf";
export default {
name: "ElementListeners",
props: {
id: String,
type: String
},
inject: {
prefix: "prefix",
width: "width"
},
data() {
return {
elementListenersList: [], // 监听器列表
listenerForm: {}, // 监听器详情表单
listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
fieldsListOfListener: [],
listenerFieldForm: {}, // 监听器 注入字段 详情表单
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
listenerTypeObject: listenerType,
fieldTypeObject: fieldType
};
},
watch: {
id: {
immediate: true,
handler(val) {
val && val.length && this.$nextTick(() => this.resetListenersList());
}
}
},
methods: {
resetListenersList() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.otherExtensionList = [];
this.bpmnElementListeners =
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
},
// 打开 监听器详情 侧边栏
openListenerForm(listener, index) {
if (listener) {
this.listenerForm = initListenerForm(listener);
this.editingListenerIndex = index;
} else {
this.listenerForm = {};
this.editingListenerIndex = -1; // 标记为新增
}
if (listener && listener.fields) {
this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
} else {
this.fieldsListOfListener = [];
this.$set(this.listenerForm, "fields", []);
}
// 打开侧边栏并清楚验证状态
this.listenerFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
});
},
// 打开监听器字段编辑弹窗
openListenerFieldForm(field, index) {
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
this.editingListenerFieldIndex = field ? index : -1;
this.listenerFieldFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
});
},
// 保存监听器注入字段
async saveListenerFiled() {
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
if (!validateStatus) return; // 验证不通过直接返回
if (this.editingListenerFieldIndex === -1) {
this.fieldsListOfListener.push(this.listenerFieldForm);
this.listenerForm.fields.push(this.listenerFieldForm);
} else {
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
}
this.listenerFieldFormModelVisible = false;
this.$nextTick(() => (this.listenerFieldForm = {}));
},
// 移除监听器字段
removeListenerField(field, index) {
this.$confirm("确认移除该字段吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
})
.then(() => {
this.fieldsListOfListener.splice(index, 1);
this.listenerForm.fields.splice(index, 1);
})
.catch(() => console.info("操作取消"));
},
// 移除监听器
removeListener(listener, index) {
this.$confirm("确认移除该监听器吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
})
.then(() => {
this.bpmnElementListeners.splice(index, 1);
this.elementListenersList.splice(index, 1);
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
})
.catch(() => console.info("操作取消"));
},
// 保存监听器配置
async saveListenerConfig() {
let validateStatus = await this.$refs["listenerFormRef"].validate();
if (!validateStatus) return; // 验证不通过直接返回
const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
if (this.editingListenerIndex === -1) {
this.bpmnElementListeners.push(listenerObject);
this.elementListenersList.push(this.listenerForm);
} else {
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
}
// 保存其他配置
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
// 4. 隐藏侧边栏
this.listenerFormModelVisible = false;
this.listenerForm = {};
}
<script setup name="ElementListeners">
import { ElMessageBox } from "element-plus";
import { toRefs } from "vue";
import { createListenerObject, updateElementExtensions } from "../../utils";
import {
initListenerType,
initListenerForm,
listenerType,
fieldType,
} from "./utilSelf";
const props = defineProps({
id: String,
type: String,
});
const { id, type } = toRefs(props);
const data = reactive({
listenerForm: {}, // 监听器详情表单
listenerFieldForm: {}, // 监听器 注入字段 详情表单
});
let bpmnElement;
let otherExtensionList;
let bpmnElementListeners;
const { listenerForm, listenerFieldForm } = toRefs(data);
const listenerFormRef = ref();
const listenerFieldFormRef = ref();
const elementListenersList = ref([]); // 监听器列表
// const listenerForm = ref({});
const listenerFormModelVisible = ref(false); // 监听器 编辑 侧边栏显示状态
const fieldsListOfListener = ref([]);
// const listenerFieldForm = ref({});
const listenerFieldFormModelVisible = ref(false); // 监听器 注入字段表单弹窗 显示状态
const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新增
const listenerTypeObject = ref(listenerType);
const fieldTypeObject = ref(fieldType);
const prefix = inject("prefix");
const width = inject("width");
watch(id, (val) => {
val && val.length && nextTick(() => resetListenersList());
});
function resetListenersList() {
bpmnElement = window.bpmnInstances.bpmnElement;
otherExtensionList = [];
bpmnElementListeners =
bpmnElement.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type === `${prefix.value}:ExecutionListener`
) ?? [];
elementListenersList.value = bpmnElementListeners.map((listener) =>
initListenerType(listener)
);
}
// 打开 监听器详情 侧边栏
function openListenerForm(listener, index) {
if (listener) {
listenerForm.value = initListenerForm(listener);
editingListenerIndex.value = index;
} else {
listenerForm.value = {};
editingListenerIndex.value = -1; // 标记为新增
}
};
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map((field) => ({
...field,
fieldType: field.string ? "string" : "expression",
}));
} else {
fieldsListOfListener.value = [];
listenerForm.value.fields = [];
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true;
nextTick(() => {
if (listenerFormRef.value) listenerFormRef.value.clearValidate();
});
}
// 打开监听器字段编辑弹窗
function openListenerFieldForm(field, index) {
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {};
editingListenerFieldIndex.value = field ? index : -1;
listenerFieldFormModelVisible.value = true;
nextTick(() => {
if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate();
});
}
// 保存监听器注入字段
async function saveListenerFiled() {
let validateStatus = await listenerFieldFormRef.value.validate();
if (!validateStatus) return; // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value);
listenerForm.value.fields.push(listenerFieldForm.value);
} else {
fieldsListOfListener.value.splice(
editingListenerFieldIndex.value,
1,
listenerFieldForm.value
);
listenerForm.value.fields.splice(
editingListenerFieldIndex.value,
1,
listenerFieldForm.value
);
}
listenerFieldFormModelVisible.value = false;
nextTick(() => (listenerFieldForm.value = {}));
}
// 移除监听器字段
function removeListenerField(field, index) {
ElMessageBox.confirm("确认移除该字段吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消",
})
.then(() => {
fieldsListOfListener.value.splice(index, 1);
listenerForm.value.fields.splice(index, 1);
})
.catch(() => console.info("操作取消"));
}
// 移除监听器
function removeListener(listener, index) {
ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消",
})
.then(() => {
bpmnElementListeners.splice(index, 1);
elementListenersList.value.splice(index, 1);
updateElementExtensions(
bpmnElement,
otherExtensionList.concat(bpmnElementListeners)
);
})
.catch(() => console.info("操作取消"));
}
// 保存监听器配置
async function saveListenerConfig() {
let validateStatus = await listenerFormRef.value.validate();
if (!validateStatus) return; // 验证不通过直接返回
const listenerObject = createListenerObject(
listenerForm.value,
false,
prefix.value
);
if (editingListenerIndex.value === -1) {
bpmnElementListeners.push(listenerObject);
elementListenersList.value.push(listenerForm.value);
} else {
bpmnElementListeners.splice(editingListenerIndex.value, 1, listenerObject);
elementListenersList.value.splice(
editingListenerIndex.value,
1,
listenerForm.value
);
}
// 保存其他配置
otherExtensionList =
bpmnElement.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix.value}:ExecutionListener`
) ?? [];
updateElementExtensions(
bpmnElement,
otherExtensionList.concat(bpmnElementListeners)
);
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false;
listenerForm.value = {};
}
</script>

32
src/plugins/package/penal/listeners/UserTaskListeners.vue
View File

@ -1,25 +1,25 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="mini" border>
<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="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" 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 :visible.sync="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
<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" />
@ -124,31 +124,31 @@
<el-divider />
<p class="listener-filed__title">
<span><i class="el-icon-menu"></i>注入字段：</span>
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</p>
<el-table :data="fieldsListOfListener" size="mini" 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="操作" width="100px">
<template slot-scope="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="mini" 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="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
<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>
@ -177,8 +177,8 @@
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template>
</el-dialog>
</div>

32
src/plugins/package/penal/listeners/template.js
View File

@ -1,25 +1,25 @@
export const template = isTaskListener => {
return `
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="mini" border>
<el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="事件类型" min-width="100px" prop="event" />
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column label="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" 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 :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
<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 label="start" value="start" />
@ -116,31 +116,31 @@ export const template = isTaskListener => {
<el-divider />
<p class="listener-filed__title">
<span><i class="el-icon-menu"></i>注入字段：</span>
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</p>
<el-table :data="fieldsListOfListener" size="mini" 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="操作" width="100px">
<template slot-scope="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="mini" 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="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
<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>
@ -169,8 +169,8 @@ export const template = isTaskListener => {
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template>
</el-dialog>
</div>

2
src/plugins/package/penal/multi-instance/ElementMultiInstance.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="panel-tab__content">
<el-form size="mini" label-width="90px" @submit.native.prevent>
<el-form size="small" label-width="90px" @submit.native.prevent>
<el-form-item label="回路特性">
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
<!--bpmn:MultiInstanceLoopCharacteristics-->

2
src/plugins/package/penal/other/ElementOtherConfig.vue
View File

@ -6,7 +6,7 @@
<el-input
type="textarea"
v-model="documentation"
size="mini"
size="small"
resize="vertical"
:autosize="{ minRows: 2, maxRows: 4 }"
@input="updateDocumentation"

16
src/plugins/package/penal/properties/ElementProperties.vue
View File

@ -1,23 +1,23 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementPropertyList" size="mini" 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="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="mini" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
<el-button size="small" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" 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 :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
<el-form :model="propertyForm" label-width="80px" size="mini" 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>
@ -26,8 +26,8 @@
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="propertyFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveAttribute">确 定</el-button>
<el-button size="small" @click="propertyFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveAttribute">确 定</el-button>
</template>
</el-dialog>
</div>

110
src/plugins/package/penal/signal-message/SignalAndMessage.vue
View File

@ -1,26 +1,79 @@
<template>
<div class="panel-tab__content">
<div class="panel-tab__content--title">
<span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>消息列表</span>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('message')">创建新消息</el-button>
<span
><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i
>消息列表</span
>
<el-button
size="small"
type="primary"
icon="el-icon-plus"
@click="openModel('message')"
>创建新消息</el-button
>
</div>
<el-table :data="messageList" size="mini" border>
<el-table :data="messageList" size="small" border>
<el-table-column type="index" label="序号" width="60px" />
<el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
<el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
<el-table-column
label="消息ID"
prop="id"
max-width="300px"
show-overflow-tooltip
/>
<el-table-column
label="消息名称"
prop="name"
max-width="300px"
show-overflow-tooltip
/>
</el-table>
<div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
<span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>信号列表</span>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('signal')">创建新信号</el-button>
<div
class="panel-tab__content--title"
style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee"
>
<span
><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i
>信号列表</span
>
<el-button
size="small"
type="primary"
icon="el-icon-plus"
@click="openModel('signal')"
>创建新信号</el-button
>
</div>
<el-table :data="signalList" size="mini" border>
<el-table :data="signalList" size="small" border>
<el-table-column type="index" label="序号" width="60px" />
<el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
<el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
<el-table-column
label="信号ID"
prop="id"
max-width="300px"
show-overflow-tooltip
/>
<el-table-column
label="信号名称"
prop="name"
max-width="300px"
show-overflow-tooltip
/>
</el-table>
<el-dialog :visible.sync="modelVisible" :title="modelConfig.title" :close-on-click-modal="false" width="400px" append-to-body destroy-on-close>
<el-form :model="modelObjectForm" size="mini" label-width="90px" @submit.native.prevent>
<el-dialog
v-model="modelVisible"
:title="modelConfig.title"
:close-on-click-modal="false"
width="400px"
append-to-body
destroy-on-close
>
<el-form
:model="modelObjectForm"
size="small"
label-width="90px"
@submit.native.prevent
>
<el-form-item :label="modelConfig.idLabel">
<el-input v-model="modelObjectForm.id" clearable />
</el-form-item>
@ -29,8 +82,10 @@
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="modelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
<el-button size="small" @click="modelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="addNewObject"
>保 存</el-button
>
</template>
</el-dialog>
</div>
@ -44,7 +99,7 @@ export default {
messageList: [],
modelVisible: false,
modelType: "",
modelObjectForm: {}
modelObjectForm: {},
};
},
computed: {
@ -54,19 +109,20 @@ export default {
} else {
return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
}
}
},
},
mounted() {
this.initDataList();
},
methods: {
initDataList() {
this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
this.rootElements =
window.bpmnInstances.modeler.getDefinitions().rootElements;
this.messageIdMap = {};
this.signalIdMap = {};
this.messageList = [];
this.signalList = [];
this.rootElements.forEach(el => {
this.rootElements.forEach((el) => {
if (el.$type === "bpmn:Message") {
this.messageIdMap[el.id] = true;
this.messageList.push({ ...el });
@ -85,20 +141,26 @@ export default {
addNewObject() {
if (this.modelType === "message") {
if (this.messageIdMap[this.modelObjectForm.id]) {
return this.$message.error("该消息已存在，请修改id后重新保存");
return ElMessage.error("该消息已存在，请修改id后重新保存");
}
const messageRef = window.bpmnInstances.moddle.create("bpmn:Message", this.modelObjectForm);
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);
const signalRef = window.bpmnInstances.moddle.create(
"bpmn:Signal",
this.modelObjectForm
);
this.rootElements.push(signalRef);
}
this.modelVisible = false;
this.initDataList();
}
}
},
},
};
</script>

2
src/plugins/package/penal/task/ElementTask.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="panel-tab__content">
<el-form size="mini" label-width="90px" @submit.native.prevent>
<el-form size="small" label-width="90px" @submit.native.prevent>
<!-- <el-form-item label="异步延续">-->
<!-- <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
<!-- <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->

8
src/plugins/package/penal/task/task-components/ReceiveTask.vue
View File

@ -5,11 +5,11 @@
<el-select v-model="bindMessageId" @change="updateTaskMessage">
<el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
</el-select>
<el-button size="mini" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
<el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
</div>
</el-form-item>
<el-dialog :visible.sync="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
<el-form :model="newMessageForm" size="mini" label-width="90px" @submit.native.prevent>
<el-dialog v-model="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
<el-form :model="newMessageForm" size="small" label-width="90px" @submit.native.prevent>
<el-form-item label="消息ID">
<el-input v-model="newMessageForm.id" clearable />
</el-form-item>
@ -18,7 +18,7 @@
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
</template>
</el-dialog>
</div>

8
src/plugins/package/penal/task/task-components/UserTask.vue
View File

@ -15,11 +15,11 @@
{{userText}}
</el-tag>
<div class="element-drawer__button">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
<el-button size="small" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
</div>
</div>
<div v-if="dataType === 'ROLES'">
<el-select v-model="roleIds" multiple size="mini" placeholder="请选择 角色" @change="changeSelectRoles">
<el-select v-model="roleIds" multiple size="small" placeholder="请选择 角色" @change="changeSelectRoles">
<el-option
v-for="item in roleOptions"
:key="item.roleId"
@ -33,7 +33,7 @@
<tree-select
:width="320"
:height="400"
size="mini"
size="small"
:data="deptTreeData"
:defaultProps="deptProps"
multiple
@ -67,7 +67,7 @@
</el-row>
<!-- 候选用户弹窗 -->
<el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body>
<el-dialog title="候选用户" v-model="userOpen" width="60%" append-to-body>
<el-row type="flex" :gutter="20">
<!--部门数据-->
<el-col :span="7">

54
src/plugins/package/utils.js
View File

@ -1,3 +1,5 @@
import useBpmnStore from "@/store/modules/bpmn";
const bpmnStore = useBpmnStore();
// 创建监听器实例
export function createListenerObject(options, isTask, prefix) {
const listenerObj = Object.create(null);
@ -18,50 +20,72 @@ export function createListenerObject(options, isTask, prefix) {
}
// 注入字段
if (options.fields) {
listenerObj.fields = options.fields.map(field => {
listenerObj.fields = options.fields.map((field) => {
return createFieldObject(field, prefix);
});
}
// 任务监听器的 定时器 设置
if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
id: `TimerEventDefinition_${uuid(8)}`,
[`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
});
const timeDefinition = window.bpmnInstances.moddle.create(
"bpmn:FormalExpression",
{ body: options.eventTimeDefinitions }
);
const TimerEventDefinition = window.bpmnInstances.moddle.create(
"bpmn:TimerEventDefinition",
{
id: `TimerEventDefinition_${uuid(8)}`,
[`time${options.eventDefinitionType.replace(/^\S/, (s) =>
s.toUpperCase()
)}`]: timeDefinition,
}
);
listenerObj.eventDefinitions = [TimerEventDefinition];
}
return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
return window.bpmnInstances.moddle.create(
`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`,
listenerObj
);
}
// 创建 监听器的注入字段 实例
export function createFieldObject(option, prefix) {
const { name, fieldType, string, expression } = option;
const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
const fieldConfig =
fieldType === "string" ? { name, string } : { name, expression };
return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
}
// 创建脚本实例
export function createScriptObject(options, prefix) {
const { scriptType, scriptFormat, value, resource } = options;
const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
const scriptConfig =
scriptType === "inlineScript"
? { scriptFormat, value }
: { scriptFormat, resource };
return window.bpmnInstances.moddle.create(
`${prefix}:Script`,
scriptConfig
);
}
// 更新元素扩展属性
export function updateElementExtensions(element, extensionList) {
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
values: extensionList
});
const extensions = window.bpmnInstances.moddle.create(
"bpmn:ExtensionElements",
{
values: extensionList,
}
);
window.bpmnInstances.modeling.updateProperties(element, {
extensionElements: extensions
extensionElements: extensions,
});
}
// 创建一个id
export function uuid(length = 8, chars) {
let result = "";
let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
let charsString =
chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (let i = length; i > 0; --i) {
result += charsString[Math.floor(Math.random() * charsString.length)];
}

86
src/store/modules/app.js
View File

@ -1,46 +1,46 @@
import Cookies from 'js-cookie'
import Cookies from "js-cookie";
const useAppStore = defineStore(
'app',
{
state: () => ({
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
withoutAnimation: false,
hide: false
},
device: 'desktop',
size: Cookies.get('size') || 'default'
}),
actions: {
toggleSideBar(withoutAnimation) {
if (this.sidebar.hide) {
return false;
}
this.sidebar.opened = !this.sidebar.opened
this.sidebar.withoutAnimation = withoutAnimation
if (this.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0)
}
},
closeSideBar({ withoutAnimation }) {
Cookies.set('sidebarStatus', 0)
this.sidebar.opened = false
this.sidebar.withoutAnimation = withoutAnimation
},
toggleDevice(device) {
this.device = device
},
setSize(size) {
this.size = size;
Cookies.set('size', size)
},
toggleSideBarHide(status) {
this.sidebar.hide = status
const useAppStore = defineStore("app", {
state: () => ({
sidebar: {
opened: Cookies.get("sidebarStatus")
? !!+Cookies.get("sidebarStatus")
: true,
withoutAnimation: false,
hide: false,
},
device: "desktop",
size: Cookies.get("size") || "default",
}),
actions: {
toggleSideBar(withoutAnimation) {
if (this.sidebar.hide) {
return false;
}
}
})
this.sidebar.opened = !this.sidebar.opened;
this.sidebar.withoutAnimation = withoutAnimation;
if (this.sidebar.opened) {
Cookies.set("sidebarStatus", 1);
} else {
Cookies.set("sidebarStatus", 0);
}
},
closeSideBar({ withoutAnimation }) {
Cookies.set("sidebarStatus", 0);
this.sidebar.opened = false;
this.sidebar.withoutAnimation = withoutAnimation;
},
toggleDevice(device) {
this.device = device;
},
setSize(size) {
this.size = size;
Cookies.set("size", size);
},
toggleSideBarHide(status) {
this.sidebar.hide = status;
},
},
});
export default useAppStore
export default useAppStore;

17
src/store/modules/bpmn.js Normal file
View File

@ -0,0 +1,17 @@
// import { defineStore } from "pinia";
const useBpmnStore = defineStore("bpmn", {
state: () => ({
bpmnInstances: {},
count: 1,
}),
actions: {
setBpmnInstances(data) {
console.log(data);
this.bpmnInstances = data;
// this.bpmnInstances.name = "423";
},
},
});
export default useBpmnStore;

1
vite.config.js
View File

@ -19,6 +19,7 @@ export default defineConfig(({ mode, command }) => {
"~": path.resolve(__dirname, "./"),
// 设置别名
"@": path.resolve(__dirname, "./src"),
stream: "stream-browserify",
},
// https://cn.vitejs.dev/config/#resolve-extensions
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],