mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-14 02:55:07 +08:00
引入 bpmnProcessDesigner 组件
This commit is contained in:
YunaiV
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<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" />
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<element-task :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1" 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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<element-other-config :id="elementId" />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ElementBaseInfo from "./base/ElementBaseInfo";
|
||||
import ElementOtherConfig from "./other/ElementOtherConfig";
|
||||
import ElementTask from "./task/ElementTask";
|
||||
import ElementMultiInstance from "./multi-instance/ElementMultiInstance";
|
||||
import FlowCondition from "./flow-condition/FlowCondition";
|
||||
import SignalAndMassage from "./signal-message/SignalAndMessage";
|
||||
import ElementListeners from "./listeners/ElementListeners";
|
||||
import ElementProperties from "./properties/ElementProperties";
|
||||
import ElementForm from "./form/ElementForm";
|
||||
import UserTaskListeners from "./listeners/UserTaskListeners";
|
||||
/**
|
||||
* 侧边栏
|
||||
* @Author MiyueFE
|
||||
* @Home https://github.com/miyuesc
|
||||
* @Date 2021年3月31日18:57:51
|
||||
*/
|
||||
export default {
|
||||
name: "MyPropertiesPanel",
|
||||
components: {
|
||||
UserTaskListeners,
|
||||
ElementForm,
|
||||
ElementProperties,
|
||||
ElementListeners,
|
||||
SignalAndMassage,
|
||||
FlowCondition,
|
||||
ElementMultiInstance,
|
||||
ElementTask,
|
||||
ElementOtherConfig,
|
||||
ElementBaseInfo
|
||||
},
|
||||
componentName: "MyPropertiesPanel",
|
||||
props: {
|
||||
bpmnModeler: Object,
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "camunda"
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 480
|
||||
},
|
||||
idEditDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
prefix: this.prefix,
|
||||
width: this.width
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: "base",
|
||||
elementId: "",
|
||||
elementType: "",
|
||||
elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
|
||||
conditionFormVisible: false, // 流转条件设置
|
||||
formVisible: false // 表单配置
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
elementId: {
|
||||
handler() {
|
||||
this.activeTab = "base";
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initModels();
|
||||
},
|
||||
methods: {
|
||||
initModels() {
|
||||
// 初始化 modeler 以及其他 moddle
|
||||
if (!this.bpmnModeler) {
|
||||
// 避免加载时 流程图 并未加载完成
|
||||
this.timer = setTimeout(() => this.initModels(), 10);
|
||||
return;
|
||||
}
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
window.bpmnInstances = {
|
||||
modeler: this.bpmnModeler,
|
||||
modeling: this.bpmnModeler.get("modeling"),
|
||||
moddle: this.bpmnModeler.get("moddle"),
|
||||
eventBus: this.bpmnModeler.get("eventBus"),
|
||||
bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
|
||||
elementFactory: this.bpmnModeler.get("elementFactory"),
|
||||
elementRegistry: this.bpmnModeler.get("elementRegistry"),
|
||||
replace: this.bpmnModeler.get("replace"),
|
||||
selection: this.bpmnModeler.get("selection")
|
||||
};
|
||||
this.getActiveElement();
|
||||
},
|
||||
getActiveElement() {
|
||||
// 初始第一个选中元素 bpmn:Process
|
||||
this.initFormOnChanged(null);
|
||||
this.bpmnModeler.on("import.done", e => {
|
||||
this.initFormOnChanged(null);
|
||||
});
|
||||
// 监听选择事件，修改当前激活的元素以及表单
|
||||
this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
|
||||
this.initFormOnChanged(newSelection[0] || null);
|
||||
});
|
||||
this.bpmnModeler.on("element.changed", ({ element }) => {
|
||||
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
|
||||
if (element && element.id === this.elementId) {
|
||||
this.initFormOnChanged(element);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 初始化数据
|
||||
initFormOnChanged(element) {
|
||||
let activatedElement = element;
|
||||
if (!activatedElement) {
|
||||
activatedElement =
|
||||
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
|
||||
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
|
||||
}
|
||||
if (!activatedElement) return;
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item label="ID">
|
||||
<el-input
|
||||
v-model="elementBaseInfo.id"
|
||||
:disabled="idEditDisabled || elementBaseInfo.$type === 'bpmn:Process'"
|
||||
clearable
|
||||
@change="updateBaseInfo('id')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
|
||||
</el-form-item>
|
||||
<!--流程的基础属性-->
|
||||
<template v-if="elementBaseInfo.$type === 'bpmn:Process'">
|
||||
<el-form-item label="版本标签">
|
||||
<el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="可执行">
|
||||
<el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementBaseInfo",
|
||||
props: {
|
||||
businessObject: Object,
|
||||
type: String,
|
||||
idEditDisabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementBaseInfo: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
businessObject: {
|
||||
immediate: false,
|
||||
handler: function(val) {
|
||||
if (val) {
|
||||
this.$nextTick(() => this.resetBaseInfo());
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetBaseInfo() {
|
||||
this.bpmnElement = window?.bpmnInstances?.bpmnElement;
|
||||
this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
|
||||
},
|
||||
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;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form :model="flowConditionForm" label-width="90px" size="mini" @submit.native.prevent>
|
||||
<el-form-item label="流转类型">
|
||||
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
|
||||
<el-option label="普通流转路径" value="normal" />
|
||||
<el-option label="默认流转路径" value="default" />
|
||||
<el-option label="条件流转路径" value="condition" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
|
||||
<el-select v-model="flowConditionForm.conditionType">
|
||||
<el-option label="表达式" value="expression" />
|
||||
<el-option label="脚本" value="script" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
|
||||
<el-input v-model="flowConditionForm.body" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
|
||||
<el-form-item label="脚本语言" key="language">
|
||||
<el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型" key="scriptType">
|
||||
<el-select v-model="flowConditionForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
|
||||
<el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
|
||||
<el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FlowCondition",
|
||||
props: {
|
||||
businessObject: Object,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flowConditionForm: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
businessObject: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.$nextTick(() => this.resetFlowCondition());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetFlowCondition() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.bpmnElementSource = this.bpmnElement.source;
|
||||
this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef;
|
||||
if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
|
||||
// 默认
|
||||
this.flowConditionForm = { type: "default" };
|
||||
} else if (!this.bpmnElement.businessObject.conditionExpression) {
|
||||
// 普通
|
||||
this.flowConditionForm = { type: "normal" };
|
||||
} else {
|
||||
// 带条件
|
||||
const conditionExpression = this.bpmnElement.businessObject.conditionExpression;
|
||||
this.flowConditionForm = { ...conditionExpression, type: "condition" };
|
||||
// resource 可直接标识 是否是外部资源脚本
|
||||
if (this.flowConditionForm.resource) {
|
||||
this.$set(this.flowConditionForm, "conditionType", "script");
|
||||
this.$set(this.flowConditionForm, "scriptType", "externalScript");
|
||||
return;
|
||||
}
|
||||
if (conditionExpression.language) {
|
||||
this.$set(this.flowConditionForm, "conditionType", "script");
|
||||
this.$set(this.flowConditionForm, "scriptType", "inlineScript");
|
||||
return;
|
||||
}
|
||||
this.$set(this.flowConditionForm, "conditionType", "expression");
|
||||
}
|
||||
},
|
||||
updateFlowType(flowType) {
|
||||
// 正常条件类
|
||||
if (flowType === "condition") {
|
||||
this.flowConditionRef = window.bpmnInstances.moddle.create("bpmn:FormalExpression");
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
conditionExpression: this.flowConditionRef
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 默认路径
|
||||
if (flowType === "default") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
conditionExpression: null
|
||||
});
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
|
||||
default: this.bpmnElement
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
|
||||
if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
|
||||
default: null
|
||||
});
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
conditionExpression: null
|
||||
});
|
||||
},
|
||||
updateFlowCondition() {
|
||||
let { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
|
||||
let condition;
|
||||
if (conditionType === "expression") {
|
||||
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body });
|
||||
} else {
|
||||
if (scriptType === "inlineScript") {
|
||||
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body, language });
|
||||
this.$set(this.flowConditionForm, "resource", "");
|
||||
} else {
|
||||
this.$set(this.flowConditionForm, "body", "");
|
||||
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { resource, language });
|
||||
}
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition });
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
this.bpmnElementSource = null;
|
||||
this.bpmnElementSourceRef = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="80px" @submit.native.prevent>
|
||||
<el-form-item label="表单标识">
|
||||
<el-input v-model="formKey" clearable @change="updateElementFormKey" />
|
||||
</el-form-item>
|
||||
<el-form-item label="业务标识">
|
||||
<el-select v-model="businessKey" @change="updateElementBusinessKey">
|
||||
<el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />
|
||||
<el-option label="无" value="" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!--字段列表-->
|
||||
<div class="element-property list-property">
|
||||
<el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>
|
||||
<el-table :data="fieldList" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" 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>
|
||||
</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-form-item label="字段ID">
|
||||
<el-input v-model="formFieldForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">
|
||||
<el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">
|
||||
<el-input v-model="formFieldForm.type" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="formFieldForm.label" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">
|
||||
<el-input v-model="formFieldForm.datePattern" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="默认值">
|
||||
<el-input v-model="formFieldForm.defaultValue" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 枚举值设置 -->
|
||||
<template v-if="formFieldForm.type === 'enum'">
|
||||
<el-divider key="enum-divider" />
|
||||
<p 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>
|
||||
</p>
|
||||
<el-table :data="fieldEnumList" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<!-- 校验规则 -->
|
||||
<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>
|
||||
</p>
|
||||
<el-table :data="fieldConstraintsList" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 表单属性 -->
|
||||
<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>
|
||||
</p>
|
||||
<el-table :data="fieldPropertiesList" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveField">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<el-dialog :visible.sync="fieldOptionModelVisible" :title="optionModelTitle" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="fieldOptionForm" size="mini" label-width="96px" @submit.native.prevent>
|
||||
<el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">
|
||||
<el-input v-model="fieldOptionForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">
|
||||
<el-input v-model="fieldOptionForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">
|
||||
<el-input v-model="fieldOptionForm.config" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">
|
||||
<el-input v-model="fieldOptionForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="fieldOptionModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveFieldOption">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementForm",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formKey: "",
|
||||
businessKey: "",
|
||||
optionModelTitle: "",
|
||||
fieldList: [],
|
||||
formFieldForm: {},
|
||||
fieldType: {
|
||||
long: "长整型",
|
||||
string: "字符串",
|
||||
boolean: "布尔类",
|
||||
date: "日期类",
|
||||
enum: "枚举类",
|
||||
custom: "自定义类型"
|
||||
},
|
||||
formFieldIndex: -1, // 编辑中的字段， -1 为新增
|
||||
formFieldOptionIndex: -1, // 编辑中的字段配置项， -1 为新增
|
||||
fieldModelVisible: false,
|
||||
fieldOptionModelVisible: false,
|
||||
fieldOptionForm: {}, // 当前激活的字段配置项数据
|
||||
fieldOptionType: "", // 当前激活的字段配置项弹窗 类型
|
||||
fieldEnumList: [], // 枚举值列表
|
||||
fieldConstraintsList: [], // 约束条件列表
|
||||
fieldPropertiesList: [] // 绑定属性列表
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.$nextTick(() => this.resetFormList());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetFormList() {
|
||||
this.bpmnELement = window.bpmnInstances.bpmnElement;
|
||||
this.formKey = this.bpmnELement.businessObject.formKey;
|
||||
// 获取元素扩展属性 或者 创建扩展属性
|
||||
this.elExtensionElements =
|
||||
this.bpmnELement.businessObject.get("extensionElements") || window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: [] });
|
||||
// 获取元素表单配置 或者 创建新的表单配置
|
||||
this.formData =
|
||||
this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
|
||||
window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
|
||||
|
||||
// 业务标识 businessKey， 绑定在 formData 中
|
||||
this.businessKey = this.formData.businessKey;
|
||||
|
||||
// 保留剩余扩展元素，便于后面更新该元素对应属性
|
||||
this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`);
|
||||
|
||||
// 复制原始值，填充表格
|
||||
this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
|
||||
|
||||
// 更新元素扩展属性，避免后续报错
|
||||
this.updateElementExtensions();
|
||||
},
|
||||
updateElementFormKey() {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey });
|
||||
},
|
||||
updateElementBusinessKey() {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey });
|
||||
},
|
||||
// 根据类型调整字段type
|
||||
changeFieldTypeType(type) {
|
||||
this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
|
||||
},
|
||||
|
||||
// 打开字段详情侧边栏
|
||||
openFieldForm(field, index) {
|
||||
this.formFieldIndex = index;
|
||||
if (index !== -1) {
|
||||
const FieldObject = this.formData.fields[index];
|
||||
this.formFieldForm = JSON.parse(JSON.stringify(field));
|
||||
// 设置自定义类型
|
||||
this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
|
||||
// 初始化枚举值列表
|
||||
field.type === "enum" && (this.fieldEnumList = JSON.parse(JSON.stringify(FieldObject?.values || [])));
|
||||
// 初始化约束条件列表
|
||||
this.fieldConstraintsList = JSON.parse(JSON.stringify(FieldObject?.validation?.constraints || []));
|
||||
// 初始化自定义属性列表
|
||||
this.fieldPropertiesList = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []));
|
||||
} else {
|
||||
this.formFieldForm = {};
|
||||
// 初始化枚举值列表
|
||||
this.fieldEnumList = [];
|
||||
// 初始化约束条件列表
|
||||
this.fieldConstraintsList = [];
|
||||
// 初始化自定义属性列表
|
||||
this.fieldPropertiesList = [];
|
||||
}
|
||||
this.fieldModelVisible = true;
|
||||
},
|
||||
// 打开字段 某个 配置项 弹窗
|
||||
openFieldOptionForm(option, index, type) {
|
||||
this.fieldOptionModelVisible = true;
|
||||
this.fieldOptionType = type;
|
||||
this.formFieldOptionIndex = index;
|
||||
if (type === "property") {
|
||||
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
|
||||
return (this.optionModelTitle = "属性配置");
|
||||
}
|
||||
if (type === "enum") {
|
||||
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
|
||||
return (this.optionModelTitle = "枚举值配置");
|
||||
}
|
||||
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
|
||||
return (this.optionModelTitle = "约束条件配置");
|
||||
},
|
||||
|
||||
// 保存字段 某个 配置项
|
||||
saveFieldOption() {
|
||||
if (this.formFieldOptionIndex === -1) {
|
||||
if (this.fieldOptionType === "property") {
|
||||
this.fieldPropertiesList.push(this.fieldOptionForm);
|
||||
}
|
||||
if (this.fieldOptionType === "constraint") {
|
||||
this.fieldConstraintsList.push(this.fieldOptionForm);
|
||||
}
|
||||
if (this.fieldOptionType === "enum") {
|
||||
this.fieldEnumList.push(this.fieldOptionForm);
|
||||
}
|
||||
} else {
|
||||
this.fieldOptionType === "property" && this.fieldPropertiesList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
|
||||
this.fieldOptionType === "constraint" && this.fieldConstraintsList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
|
||||
this.fieldOptionType === "enum" && this.fieldEnumList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
|
||||
}
|
||||
this.fieldOptionModelVisible = false;
|
||||
this.fieldOptionForm = {};
|
||||
},
|
||||
// 保存字段配置
|
||||
saveField() {
|
||||
const { id, type, label, defaultValue, datePattern } = this.formFieldForm;
|
||||
const Field = window.bpmnInstances.moddle.create(`${this.prefix}:FormField`, { id, type, label });
|
||||
defaultValue && (Field.defaultValue = defaultValue);
|
||||
datePattern && (Field.datePattern = datePattern);
|
||||
// 构建属性
|
||||
if (this.fieldPropertiesList && this.fieldPropertiesList.length) {
|
||||
const fieldPropertyList = this.fieldPropertiesList.map(fp => {
|
||||
return window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { id: fp.id, value: fp.value });
|
||||
});
|
||||
Field.properties = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { values: fieldPropertyList });
|
||||
}
|
||||
// 构建校验规则
|
||||
if (this.fieldConstraintsList && this.fieldConstraintsList.length) {
|
||||
const fieldConstraintList = this.fieldConstraintsList.map(fc => {
|
||||
return window.bpmnInstances.moddle.create(`${this.prefix}:Constraint`, { name: fc.name, config: fc.config });
|
||||
});
|
||||
Field.validation = window.bpmnInstances.moddle.create(`${this.prefix}:Validation`, { constraints: fieldConstraintList });
|
||||
}
|
||||
// 构建枚举值
|
||||
if (this.fieldEnumList && this.fieldEnumList.length) {
|
||||
Field.values = this.fieldEnumList.map(fe => {
|
||||
return window.bpmnInstances.moddle.create(`${this.prefix}:Value`, { name: fe.name, id: fe.id });
|
||||
});
|
||||
}
|
||||
// 更新数组 与 表单配置实例
|
||||
if (this.formFieldIndex === -1) {
|
||||
this.fieldList.push(this.formFieldForm);
|
||||
this.formData.fields.push(Field);
|
||||
} else {
|
||||
this.fieldList.splice(this.formFieldIndex, 1, this.formFieldForm);
|
||||
this.formData.fields.splice(this.formFieldIndex, 1, Field);
|
||||
}
|
||||
this.updateElementExtensions();
|
||||
this.fieldModelVisible = false;
|
||||
},
|
||||
|
||||
// 移除某个 字段的 配置项
|
||||
removeFieldOptionItem(option, index, type) {
|
||||
if (type === "property") {
|
||||
this.fieldPropertiesList.splice(index, 1);
|
||||
return;
|
||||
}
|
||||
if (type === "enum") {
|
||||
this.fieldEnumList.splice(index, 1);
|
||||
return;
|
||||
}
|
||||
this.fieldConstraintsList.splice(index, 1);
|
||||
},
|
||||
// 移除 字段
|
||||
removeField(field, index) {
|
||||
this.fieldList.splice(index, 1);
|
||||
this.formData.fields.splice(index, 1);
|
||||
this.updateElementExtensions();
|
||||
},
|
||||
|
||||
updateElementExtensions() {
|
||||
// 更新回扩展元素
|
||||
const newElExtensionElements = window.bpmnInstances.moddle.create(`bpmn:ExtensionElements`, {
|
||||
values: this.otherExtensions.concat(this.formData)
|
||||
});
|
||||
// 更新到元素上
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
|
||||
extensionElements: newElExtensionElements
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,7 @@
|
||||
import MyPropertiesPanel from "./PropertiesPanel.vue";
|
||||
|
||||
MyPropertiesPanel.install = function(Vue) {
|
||||
Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
|
||||
};
|
||||
|
||||
export default MyPropertiesPanel;
|
||||
@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" 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>
|
||||
</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-select v-model="listenerForm.event">
|
||||
<el-option label="start" value="start" />
|
||||
<el-option label="end" value="end" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="listener-class"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.class" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="listener-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.expression" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="listener-delegate"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" 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>
|
||||
</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-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" 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>
|
||||
@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" 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>
|
||||
</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-select v-model="listenerForm.event">
|
||||
<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-input v-model="listenerForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="listener-class"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.class" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="listener-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.expression" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="listener-delegate"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-if="listenerForm.event === 'timeout'">
|
||||
<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="null" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
|
||||
label="定时器"
|
||||
prop="eventTimeDefinitions"
|
||||
key="eventTimeDefinitions"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" 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>
|
||||
</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-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createListenerObject, updateElementExtensions } from "../../utils";
|
||||
import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from "./utilSelf";
|
||||
|
||||
export default {
|
||||
name: "UserTaskListeners",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementListenersList: [],
|
||||
listenerEventTypeObject: eventType,
|
||||
listenerTypeObject: listenerType,
|
||||
listenerFormModelVisible: false,
|
||||
listenerForm: {},
|
||||
fieldTypeObject: fieldType,
|
||||
fieldsListOfListener: [],
|
||||
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
|
||||
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
|
||||
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
|
||||
listenerFieldForm: {} // 监听器 注入字段 详情表单
|
||||
};
|
||||
},
|
||||
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}:TaskListener`) ?? [];
|
||||
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
|
||||
},
|
||||
openListenerForm(listener, index) {
|
||||
if (listener) {
|
||||
this.listenerForm = initListenerForm(listener);
|
||||
this.editingListenerIndex = index;
|
||||
} else {
|
||||
this.listenerForm = {};
|
||||
this.editingListenerIndex = -1; // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
|
||||
} else {
|
||||
this.fieldsListOfListener = [];
|
||||
this.$set(this.listenerForm, "fields", []);
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
this.listenerFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 移除监听器
|
||||
removeListener(listener, index) {
|
||||
this.$confirm("确认移除该监听器吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.bpmnElementListeners.splice(index, 1);
|
||||
this.elementListenersList.splice(index, 1);
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 保存监听器
|
||||
async saveListenerConfig() {
|
||||
let validateStatus = await this.$refs["listenerFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
|
||||
if (this.editingListenerIndex === -1) {
|
||||
this.bpmnElementListeners.push(listenerObject);
|
||||
this.elementListenersList.push(this.listenerForm);
|
||||
} else {
|
||||
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
|
||||
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
|
||||
}
|
||||
// 保存其他配置
|
||||
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:TaskListener`) ?? [];
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
// 4. 隐藏侧边栏
|
||||
this.listenerFormModelVisible = false;
|
||||
this.listenerForm = {};
|
||||
},
|
||||
// 打开监听器字段编辑弹窗
|
||||
openListenerFieldForm(field, index) {
|
||||
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
|
||||
this.editingListenerFieldIndex = field ? index : -1;
|
||||
this.listenerFieldFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 保存监听器注入字段
|
||||
async saveListenerFiled() {
|
||||
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
if (this.editingListenerFieldIndex === -1) {
|
||||
this.fieldsListOfListener.push(this.listenerFieldForm);
|
||||
this.listenerForm.fields.push(this.listenerFieldForm);
|
||||
} else {
|
||||
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
}
|
||||
this.listenerFieldFormModelVisible = false;
|
||||
this.$nextTick(() => (this.listenerFieldForm = {}));
|
||||
},
|
||||
// 移除监听器字段
|
||||
removeListenerField(field, index) {
|
||||
this.$confirm("确认移除该字段吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.fieldsListOfListener.splice(index, 1);
|
||||
this.listenerForm.fields.splice(index, 1);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,178 @@
|
||||
export const template = isTaskListener => {
|
||||
return `
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" 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>
|
||||
</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-select v-model="listenerForm.event">
|
||||
<el-option label="start" value="start" />
|
||||
<el-option label="end" value="end" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="listener-class"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.class" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="listener-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.expression" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="listener-delegate"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
${
|
||||
isTaskListener
|
||||
? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
|
||||
"<el-select v-model='listenerForm.eventDefinitionType'>" +
|
||||
"<el-option label='日期' value='date' />" +
|
||||
"<el-option label='持续时长' value='duration' />" +
|
||||
"<el-option label='循环' value='cycle' />" +
|
||||
"<el-option label='无' value='' />" +
|
||||
"</el-select>" +
|
||||
"</el-form-item>" +
|
||||
"<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
|
||||
"<el-input v-model='listenerForm.eventDefinitions' clearable />" +
|
||||
"</el-form-item>"
|
||||
: ""
|
||||
}
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" 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>
|
||||
</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-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
@ -0,0 +1,62 @@
|
||||
// 初始化表单数据
|
||||
export function initListenerForm(listener) {
|
||||
let self = {
|
||||
...listener
|
||||
};
|
||||
if (listener.script) {
|
||||
self = {
|
||||
...listener,
|
||||
...listener.script,
|
||||
scriptType: listener.script.resource ? "externalScript" : "inlineScript"
|
||||
};
|
||||
}
|
||||
if (listener.event === "timeout" && listener.eventDefinitions) {
|
||||
if (listener.eventDefinitions.length) {
|
||||
let k = "";
|
||||
for (let key in listener.eventDefinitions[0]) {
|
||||
console.log(listener.eventDefinitions, key);
|
||||
if (key.indexOf("time") !== -1) {
|
||||
k = key;
|
||||
self.eventDefinitionType = key.replace("time", "").toLowerCase();
|
||||
}
|
||||
}
|
||||
console.log(k);
|
||||
self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
|
||||
}
|
||||
}
|
||||
return self;
|
||||
}
|
||||
|
||||
export function initListenerType(listener) {
|
||||
let listenerType;
|
||||
if (listener.class) listenerType = "classListener";
|
||||
if (listener.expression) listenerType = "expressionListener";
|
||||
if (listener.delegateExpression) listenerType = "delegateExpressionListener";
|
||||
if (listener.script) listenerType = "scriptListener";
|
||||
return {
|
||||
...JSON.parse(JSON.stringify(listener)),
|
||||
...(listener.script ?? {}),
|
||||
listenerType: listenerType
|
||||
};
|
||||
}
|
||||
|
||||
export const listenerType = {
|
||||
classListener: "Java 类",
|
||||
expressionListener: "表达式",
|
||||
delegateExpressionListener: "代理表达式",
|
||||
scriptListener: "脚本"
|
||||
};
|
||||
|
||||
export const eventType = {
|
||||
create: "创建",
|
||||
assignment: "指派",
|
||||
complete: "完成",
|
||||
delete: "删除",
|
||||
update: "更新",
|
||||
timeout: "超时"
|
||||
};
|
||||
|
||||
export const fieldType = {
|
||||
string: "字符串",
|
||||
expression: "表达式"
|
||||
};
|
||||
@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item label="回路特性">
|
||||
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
|
||||
<!--bpmn:MultiInstanceLoopCharacteristics-->
|
||||
<el-option label="并行多重事件" value="ParallelMultiInstance" />
|
||||
<el-option label="时序多重事件" value="SequentialMultiInstance" />
|
||||
<!--bpmn:StandardLoopCharacteristics-->
|
||||
<el-option label="循环事件" value="StandardLoop" />
|
||||
<el-option label="无" value="Null" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template v-if="loopCharacteristics === 'ParallelMultiInstance' || loopCharacteristics === 'SequentialMultiInstance'">
|
||||
<el-form-item label="循环基数" key="loopCardinality">
|
||||
<el-input v-model="loopInstanceForm.loopCardinality" clearable @change="updateLoopCardinality" />
|
||||
</el-form-item>
|
||||
<el-form-item label="集合" key="collection">
|
||||
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="元素变量" key="elementVariable">
|
||||
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="完成条件" key="completionCondition">
|
||||
<el-input v-model="loopInstanceForm.completionCondition" clearable @change="updateLoopCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="异步状态" key="async">
|
||||
<el-checkbox v-model="loopInstanceForm.asyncBefore" label="异步前" @change="updateLoopAsync('asyncBefore')" />
|
||||
<el-checkbox v-model="loopInstanceForm.asyncAfter" label="异步后" @change="updateLoopAsync('asyncAfter')" />
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.exclusive"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
label="排除"
|
||||
@change="updateLoopAsync('exclusive')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="重试周期" prop="timeCycle" v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore" key="timeCycle">
|
||||
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementMultiInstance",
|
||||
props: {
|
||||
businessObject: Object,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loopCharacteristics: "",
|
||||
//默认配置，用来覆盖原始不存在的选项，避免报错
|
||||
defaultLoopInstanceForm: {
|
||||
completionCondition: "",
|
||||
loopCardinality: "",
|
||||
extensionElements: [],
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false
|
||||
},
|
||||
loopInstanceForm: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
businessObject: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.getElementLoop(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getElementLoop(businessObject) {
|
||||
if (!businessObject.loopCharacteristics) {
|
||||
this.loopCharacteristics = "Null";
|
||||
this.loopInstanceForm = {};
|
||||
return;
|
||||
}
|
||||
if (businessObject.loopCharacteristics.$type === "bpmn:StandardLoopCharacteristics") {
|
||||
this.loopCharacteristics = "StandardLoop";
|
||||
this.loopInstanceForm = {};
|
||||
return;
|
||||
}
|
||||
if (businessObject.loopCharacteristics.isSequential) {
|
||||
this.loopCharacteristics = "SequentialMultiInstance";
|
||||
} else {
|
||||
this.loopCharacteristics = "ParallelMultiInstance";
|
||||
}
|
||||
// 合并配置
|
||||
this.loopInstanceForm = {
|
||||
...this.defaultLoopInstanceForm,
|
||||
...businessObject.loopCharacteristics,
|
||||
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? "",
|
||||
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ""
|
||||
};
|
||||
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
|
||||
this.multiLoopInstance = window.bpmnInstances.bpmnElement.businessObject.loopCharacteristics;
|
||||
// 更新表单
|
||||
if (
|
||||
businessObject.loopCharacteristics.extensionElements &&
|
||||
businessObject.loopCharacteristics.extensionElements.values &&
|
||||
businessObject.loopCharacteristics.extensionElements.values.length
|
||||
) {
|
||||
this.$set(this.loopInstanceForm, "timeCycle", businessObject.loopCharacteristics.extensionElements.values[0].body);
|
||||
}
|
||||
},
|
||||
changeLoopCharacteristicsType(type) {
|
||||
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
|
||||
// 取消多实例配置
|
||||
if (type === "Null") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null });
|
||||
return;
|
||||
}
|
||||
// 配置循环
|
||||
if (type === "StandardLoop") {
|
||||
const loopCharacteristicsObject = window.bpmnInstances.moddle.create("bpmn:StandardLoopCharacteristics");
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
loopCharacteristics: loopCharacteristicsObject
|
||||
});
|
||||
this.multiLoopInstance = null;
|
||||
return;
|
||||
}
|
||||
// 时序
|
||||
if (type === "SequentialMultiInstance") {
|
||||
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: true });
|
||||
} else {
|
||||
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics");
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
loopCharacteristics: this.multiLoopInstance
|
||||
});
|
||||
},
|
||||
// 循环基数
|
||||
updateLoopCardinality(cardinality) {
|
||||
let loopCardinality = null;
|
||||
if (cardinality && cardinality.length) {
|
||||
loopCardinality = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: cardinality });
|
||||
}
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { loopCardinality });
|
||||
},
|
||||
// 完成条件
|
||||
updateLoopCondition(condition) {
|
||||
let completionCondition = null;
|
||||
if (condition && condition.length) {
|
||||
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: condition });
|
||||
}
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { completionCondition });
|
||||
},
|
||||
// 重试周期
|
||||
updateLoopTimeCycle(timeCycle) {
|
||||
const extensionElements = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
|
||||
values: [
|
||||
window.bpmnInstances.moddle.create(`${this.prefix}:FailedJobRetryTimeCycle`, {
|
||||
body: timeCycle
|
||||
})
|
||||
]
|
||||
});
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { extensionElements });
|
||||
},
|
||||
// 直接更新的基础信息
|
||||
updateLoopBase() {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
|
||||
collection: this.loopInstanceForm.collection || null,
|
||||
elementVariable: this.loopInstanceForm.elementVariable || null
|
||||
});
|
||||
},
|
||||
// 各异步状态
|
||||
updateLoopAsync(key) {
|
||||
const { asyncBefore, asyncAfter } = this.loopInstanceForm;
|
||||
let asyncAttr = Object.create(null);
|
||||
if (!asyncBefore && !asyncAfter) {
|
||||
this.$set(this.loopInstanceForm, "exclusive", false);
|
||||
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null };
|
||||
} else {
|
||||
asyncAttr[key] = this.loopInstanceForm[key];
|
||||
}
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, asyncAttr);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.multiLoopInstance = null;
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<div class="element-property input-property">
|
||||
<div class="element-property__label">元素文档：</div>
|
||||
<div class="element-property__value">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="documentation"
|
||||
size="mini"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
@input="updateDocumentation"
|
||||
@blur="updateDocumentation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementOtherConfig",
|
||||
props: {
|
||||
id: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
documentation: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler: function(id) {
|
||||
if (id && id.length) {
|
||||
this.$nextTick(() => {
|
||||
const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
|
||||
this.documentation = documentations && documentations.length ? documentations[0].text : "";
|
||||
});
|
||||
} else {
|
||||
this.documentation = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateDocumentation() {
|
||||
(this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
|
||||
const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: this.documentation });
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
documentation: [documentation]
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementPropertyList" size="mini" 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-divider direction="vertical" />
|
||||
<el-button size="mini" 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>
|
||||
</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-form-item label="属性名：" prop="name">
|
||||
<el-input v-model="propertyForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="属性值：" prop="value">
|
||||
<el-input v-model="propertyForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="propertyFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveAttribute">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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`;
|
||||
}) ?? [];
|
||||
|
||||
// 保存所有的 扩展属性字段
|
||||
this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
|
||||
// 复制 显示
|
||||
this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
|
||||
},
|
||||
openAttributesForm(attr, index) {
|
||||
this.editingPropertyIndex = index;
|
||||
this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
|
||||
this.propertyFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
removeAttributes(attr, index) {
|
||||
this.$confirm("确认移除该属性吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.elementPropertyList.splice(index, 1);
|
||||
this.bpmnElementPropertyList.splice(index, 1);
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||
values: this.bpmnElementPropertyList
|
||||
});
|
||||
this.updateElementExtensions(propertiesObject);
|
||||
this.resetAttributesList();
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
saveAttribute() {
|
||||
const { name, value } = this.propertyForm;
|
||||
console.log(this.bpmnElementPropertyList);
|
||||
if (this.editingPropertyIndex !== -1) {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
|
||||
name,
|
||||
value
|
||||
});
|
||||
} else {
|
||||
// 新建属性字段
|
||||
const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||
values: this.bpmnElementPropertyList.concat([newPropertyObject])
|
||||
});
|
||||
this.updateElementExtensions(propertiesObject);
|
||||
}
|
||||
this.propertyFormModelVisible = false;
|
||||
this.resetAttributesList();
|
||||
},
|
||||
updateElementExtensions(properties) {
|
||||
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
|
||||
values: this.otherExtensionList.concat([properties])
|
||||
});
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
extensionElements: extensions
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,104 @@
|
||||
<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>
|
||||
</div>
|
||||
<el-table :data="messageList" size="mini" border>
|
||||
<el-table-column type="index" label="序号" width="60px" />
|
||||
<el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
|
||||
<span><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>
|
||||
<el-table :data="signalList" size="mini" border>
|
||||
<el-table-column type="index" label="序号" width="60px" />
|
||||
<el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
|
||||
</el-table>
|
||||
|
||||
<el-dialog :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-form-item :label="modelConfig.idLabel">
|
||||
<el-input v-model="modelObjectForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="modelConfig.nameLabel">
|
||||
<el-input v-model="modelObjectForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="modelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
|
||||
</template>
|
||||
</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 this.$message.error("该消息已存在，请修改id后重新保存");
|
||||
}
|
||||
const messageRef = window.bpmnInstances.moddle.create("bpmn:Message", this.modelObjectForm);
|
||||
this.rootElements.push(messageRef);
|
||||
} else {
|
||||
if (this.signalIdMap[this.modelObjectForm.id]) {
|
||||
return this.$message.error("该信号已存在，请修改id后重新保存");
|
||||
}
|
||||
const signalRef = window.bpmnInstances.moddle.create("bpmn:Signal", this.modelObjectForm);
|
||||
this.rootElements.push(signalRef);
|
||||
}
|
||||
this.modelVisible = false;
|
||||
this.initDataList();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" 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" />
|
||||
<el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />
|
||||
</el-form-item>
|
||||
<component :is="witchTaskComponent" v-bind="$props" />
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserTask from "./task-components/UserTask";
|
||||
import ScriptTask from "./task-components/ScriptTask";
|
||||
import ReceiveTask from "./task-components/ReceiveTask";
|
||||
|
||||
export default {
|
||||
name: "ElementTaskConfig",
|
||||
components: { UserTask, ScriptTask, ReceiveTask },
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
taskConfigForm: {
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false
|
||||
},
|
||||
witchTaskComponent: "",
|
||||
installedComponent: {
|
||||
// 手工任务与普通任务一致，不需要其他配置
|
||||
// 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
|
||||
// 发送任务、服务任务、业务规则任务共用一个相同配置
|
||||
UserTask: "UserTask", // 用户任务配置
|
||||
ScriptTask: "ScriptTask", // 脚本任务配置
|
||||
ReceiveTask: "ReceiveTask" // 消息接收任务
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
|
||||
this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
|
||||
this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
|
||||
}
|
||||
},
|
||||
type: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.witchTaskComponent = this.installedComponent[this.type];
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTaskAsync() {
|
||||
if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
|
||||
this.taskConfigForm.exclusive = false;
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
|
||||
...this.taskConfigForm
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="消息实例">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
|
||||
<el-select v-model="bindMessageId" @change="updateTaskMessage">
|
||||
<el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
|
||||
</el-select>
|
||||
<el-button size="mini" 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-form-item label="消息ID">
|
||||
<el-input v-model="newMessageForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="消息名称">
|
||||
<el-input v-model="newMessageForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ReceiveTask",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bindMessageId: "",
|
||||
newMessageForm: {},
|
||||
messageMap: {},
|
||||
messageModelVisible: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.$nextTick(() => this.getBindMessage());
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.bpmnMessageRefsMap = Object.create(null);
|
||||
this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
|
||||
this.bpmnRootElements
|
||||
.filter(el => el.$type === "bpmn:Message")
|
||||
.forEach(m => {
|
||||
this.bpmnMessageRefsMap[m.id] = m;
|
||||
this.$set(this.messageMap, m.id, m.name);
|
||||
});
|
||||
this.$set(this.messageMap, "-1", "无"); // 添加一个空对象，保证可以取消原消息绑定
|
||||
},
|
||||
methods: {
|
||||
getBindMessage() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || "-1";
|
||||
},
|
||||
openMessageModel() {
|
||||
this.messageModelVisible = true;
|
||||
this.newMessageForm = {};
|
||||
},
|
||||
createNewMessage() {
|
||||
if (this.messageMap[this.newMessageForm.id]) {
|
||||
this.$message.error("该消息已存在，请修改id后重新保存");
|
||||
return;
|
||||
}
|
||||
const newMessage = window.bpmnInstances.moddle.create("bpmn:Message", this.newMessageForm);
|
||||
this.bpmnRootElements.push(newMessage);
|
||||
this.$set(this.messageMap, this.newMessageForm.id, this.newMessageForm.name);
|
||||
this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
|
||||
this.messageModelVisible = false;
|
||||
},
|
||||
updateTaskMessage(messageId) {
|
||||
if (messageId === "-1") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
messageRef: null
|
||||
});
|
||||
} else {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
messageRef: this.bpmnMessageRefsMap[messageId]
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="脚本格式">
|
||||
<el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型">
|
||||
<el-select v-model="scriptTaskForm.scriptType">
|
||||
<el-option label="内联脚本" value="inline" />
|
||||
<el-option label="外部资源" value="external" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.script"
|
||||
type="textarea"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
|
||||
<el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结果变量">
|
||||
<el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ScriptTask",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultTaskForm: {
|
||||
scriptFormat: "",
|
||||
script: "",
|
||||
resource: "",
|
||||
resultVariable: ""
|
||||
},
|
||||
scriptTaskForm: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.$nextTick(() => this.resetTaskForm());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetTaskForm() {
|
||||
for (let key in this.defaultTaskForm) {
|
||||
let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
|
||||
this.$set(this.scriptTaskForm, key, value);
|
||||
}
|
||||
this.$set(this.scriptTaskForm, "scriptType", this.scriptTaskForm.script ? "inline" : "external");
|
||||
},
|
||||
updateElementTask() {
|
||||
let taskAttr = Object.create(null);
|
||||
taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
|
||||
taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
|
||||
if (this.scriptTaskForm.scriptType === "inline") {
|
||||
taskAttr.script = this.scriptTaskForm.script || null;
|
||||
taskAttr.resource = null;
|
||||
} else {
|
||||
taskAttr.resource = this.scriptTaskForm.resource || null;
|
||||
taskAttr.script = null;
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="处理用户">
|
||||
<el-select v-model="userTaskForm.assignee" @change="updateElementTask('assignee')">
|
||||
<el-option v-for="ak in mockData" :key="'ass-' + ak" :label="`用户${ak}`" :value="`user${ak}`" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="候选用户">
|
||||
<el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">
|
||||
<el-option v-for="uk in mockData" :key="'user-' + uk" :label="`用户${uk}`" :value="`user${uk}`" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="候选分组">
|
||||
<el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">
|
||||
<el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="到期时间">
|
||||
<el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="跟踪时间">
|
||||
<el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级">
|
||||
<el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserTask",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultTaskForm: {
|
||||
assignee: "",
|
||||
candidateUsers: [],
|
||||
candidateGroups: [],
|
||||
dueDate: "",
|
||||
followUpDate: "",
|
||||
priority: ""
|
||||
},
|
||||
userTaskForm: {},
|
||||
mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.$nextTick(() => this.resetTaskForm());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetTaskForm() {
|
||||
for (let key in this.defaultTaskForm) {
|
||||
let value;
|
||||
if (key === "candidateUsers" || key === "candidateGroups") {
|
||||
value = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") : [];
|
||||
} else {
|
||||
value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
|
||||
}
|
||||
this.$set(this.userTaskForm, key, value);
|
||||
}
|
||||
},
|
||||
updateElementTask(key) {
|
||||
const taskAttr = Object.create(null);
|
||||
if (key === "candidateUsers" || key === "candidateGroups") {
|
||||
taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
|
||||
} else {
|
||||
taskAttr[key] = this.userTaskForm[key] || null;
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user