项目初始化

klp-ui/src/plugins/package/penal/PropertiesPanel.vue

@@ -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 && elementType !== 'UserTask'" key="multiInstance">
+        <div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>多实例</div>
+        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="listeners" key="listeners">
+        <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听器</div>
+        <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: "BpmnPropertiesPanel",
+  components: {
+    UserTaskListeners,
+    ElementForm,
+    ElementProperties,
+    ElementListeners,
+    SignalAndMassage,
+    FlowCondition,
+    ElementMultiInstance,
+    ElementTask,
+    ElementOtherConfig,
+    ElementBaseInfo
+  },
+  componentName: "BpmnPropertiesPanel",
+  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>

klp-ui/src/plugins/package/penal/base/ElementBaseInfo.vue

@@ -0,0 +1,76 @@
+<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>

klp-ui/src/plugins/package/penal/flow-condition/FlowCondition.vue

@@ -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>

klp-ui/src/plugins/package/penal/form/ElementForm.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="90px" @submit.native.prevent>
+      <el-form-item label="表单" prop="formKey">
+        <el-select v-model="formKey" placeholder="请选择表单" @change="updateElementFormKey" clearable>
+          <el-option v-for="item in formOptions" :key="item.formId" :label="item.formName" :value="`key_${item.formId}`" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="localScope">
+        <span slot="label">
+          <el-tooltip content="若为节点表单，则表单信息仅在此节点可用，默认为全局表单，表单信息在整个流程实例中可用" placement="top-start">
+            <i class="header-icon el-icon-info"></i>
+          </el-tooltip>
+          <span>节点表单</span>
+        </span>
+        <el-switch :disabled="type === 'StartEvent'" v-model="localScope" active-text="是" inactive-text="否" @change="updateElementFormScope()" />
+      </el-form-item>
+<!--      <el-form-item label="表单标识">-->
+<!--        <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="业务标识">-->
+<!--        <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
+<!--          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
+<!--          <el-option label="无" value="" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+    </el-form>
+
+    <!--字段列表-->
+<!--    <div class="element-property list-property">-->
+<!--      <el-divider><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>-->
+
+<!--      &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
+<!--      <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>-->
+
+<!--      &lt;!&ndash; 校验规则 &ndash;&gt;-->
+<!--      <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>-->
+
+<!--      &lt;!&ndash; 表单属性 &ndash;&gt;-->
+<!--      <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>-->
+
+<!--      &lt;!&ndash; 底部按钮 &ndash;&gt;-->
+<!--      <div class="element-drawer__button">-->
+<!--        <el-button size="mini">取 消</el-button>-->
+<!--        <el-button size="mini" type="primary" @click="saveField">保 存</el-button>-->
+<!--      </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>
+import { listForm } from "@/api/workflow/form";
+
+export default {
+  name: "ElementForm",
+  props: {
+    id: String,
+    type: String
+  },
+  inject: {
+    prefix: "prefix",
+    width: "width"
+  },
+  data() {
+    return {
+      formOptions: [],
+      formKey: "",
+      localScope: false,
+      businessKey: "",
+      optionModelTitle: "",
+      fieldList: [],
+      formFieldForm: {},
+      fieldType: {
+        long: "长整型",
+        string: "字符串",
+        boolean: "布尔类",
+        date: "日期类",
+        enum: "枚举类",
+        custom: "自定义类型"
+      },
+      formFieldIndex: -1, // 编辑中的字段， -1 为新增
+      formFieldOptionIndex: -1, // 编辑中的字段配置项， -1 为新增
+      fieldModelVisible: false,
+      fieldOptionModelVisible: false,
+      fieldOptionForm: {}, // 当前激活的字段配置项数据
+      fieldOptionType: "", // 当前激活的字段配置项弹窗 类型
+      fieldEnumList: [], // 枚举值列表
+      fieldConstraintsList: [], // 约束条件列表
+      fieldPropertiesList: [] // 绑定属性列表
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        val && val.length && this.$nextTick(() => this.resetFormList());
+      }
+    }
+  },
+  created() {
+    /** 查询流程分类列表 */
+    this.getFormList();
+  },
+  methods: {
+    /** 查询表单列表 */
+    getFormList() {
+      listForm().then(response => this.formOptions = response.rows)
+    },
+    resetFormList() {
+      this.bpmnELement = window.bpmnInstances.bpmnElement;
+      this.formKey = this.bpmnELement.businessObject.formKey;
+      this.localScope = this.bpmnELement.businessObject.localScope;
+      // 获取元素扩展属性 或者 创建扩展属性
+      this.elExtensionElements =
+        this.bpmnELement.businessObject.get("extensionElements") || window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: [] });
+      // 获取元素表单配置 或者 创建新的表单配置
+      // 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 });
+    },
+    updateElementFormScope() {
+      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { localScope: this.localScope });
+    },
+    updateElementBusinessKey() {
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey });
+    },
+    // 根据类型调整字段type
+    changeFieldTypeType(type) {
+      this.$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>

klp-ui/src/plugins/package/penal/index.js

@@ -0,0 +1,7 @@
+import BpmnPropertiesPanel from "./PropertiesPanel.vue";
+
+BpmnPropertiesPanel.install = function(Vue) {
+  Vue.component(BpmnPropertiesPanel.name, BpmnPropertiesPanel);
+};
+
+export default BpmnPropertiesPanel;

klp-ui/src/plugins/package/penal/listeners/ElementListeners.vue

@@ -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>

klp-ui/src/plugins/package/penal/listeners/UserTaskListeners.vue

@@ -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>

klp-ui/src/plugins/package/penal/listeners/template.js

@@ -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>
+  `;
+};

klp-ui/src/plugins/package/penal/listeners/utilSelf.js

@@ -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: "表达式"
+};

klp-ui/src/plugins/package/penal/multi-instance/ElementMultiInstance.vue

@@ -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>

klp-ui/src/plugins/package/penal/other/ElementOtherConfig.vue

@@ -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>

klp-ui/src/plugins/package/penal/properties/ElementProperties.vue

@@ -0,0 +1,134 @@
+<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;
+      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>

klp-ui/src/plugins/package/penal/signal-message/SignalAndMessage.vue

@@ -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>

klp-ui/src/plugins/package/penal/task/ElementTask.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="96px" @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 ServiceTask from "./task-components/ServiceTask";
+import ScriptTask from "./task-components/ScriptTask";
+import ReceiveTask from "./task-components/ReceiveTask";
+
+export default {
+  name: "ElementTaskConfig",
+  components: { UserTask, ServiceTask, ScriptTask, ReceiveTask },
+  props: {
+    id: String,
+    type: String
+  },
+  data() {
+    return {
+      taskConfigForm: {
+        asyncAfter: false,
+        asyncBefore: false,
+        exclusive: false
+      },
+      witchTaskComponent: "",
+      installedComponent: {
+        // 手工任务与普通任务一致，不需要其他配置
+        // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
+        // 发送任务、服务任务、业务规则任务共用一个相同配置
+        UserTask: "UserTask", // 用户任务配置
+        ServiceTask: "ServiceTask", // 服务任务配置
+        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>

klp-ui/src/plugins/package/penal/task/task-components/ReceiveTask.vue

@@ -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>

klp-ui/src/plugins/package/penal/task/task-components/ScriptTask.vue

@@ -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>

klp-ui/src/plugins/package/penal/task/task-components/ServiceTask.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <el-form-item label="执行类型" key="executeType">
+      <el-select v-model="serviceTaskForm.executeType">
+        <el-option label="Java类" value="class" />
+        <el-option label="表达式" value="expression" />
+        <el-option label="代理表达式" value="delegateExpression" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'class'"
+      label="Java类"
+      prop="class"
+      key="execute-class"
+    >
+      <el-input v-model="serviceTaskForm.class" clearable @change="updateElementTask" />
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'expression'"
+      label="表达式"
+      prop="expression"
+      key="execute-expression"
+    >
+      <el-input v-model="serviceTaskForm.expression" clearable @change="updateElementTask" />
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'delegateExpression'"
+      label="代理表达式"
+      prop="delegateExpression"
+      key="execute-delegate"
+    >
+      <el-input v-model="serviceTaskForm.delegateExpression" clearable @change="updateElementTask" />
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ServiceTask",
+  props: {
+    id: String,
+    type: String
+  },
+  data() {
+    return {
+      defaultTaskForm: {
+        executeType: "",
+        class: "",
+        expression: "",
+        delegateExpression: ""
+      },
+      serviceTaskForm: {}
+    };
+  },
+  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];
+        if (value) this.$set(this.serviceTaskForm, "executeType", key);
+        this.$set(this.serviceTaskForm, key, value);
+      }
+    },
+    updateElementTask() {
+      let taskAttr = Object.create(null);
+      const type = this.serviceTaskForm.executeType;
+      for (let key in this.serviceTaskForm) {
+        if (key !== 'executeType' && key !== type) taskAttr[key] = null;
+      }
+      taskAttr[type] = this.serviceTaskForm[type] || "";
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  }
+};
+</script>

klp-ui/src/plugins/package/penal/task/task-components/UserTask.vue

@@ -0,0 +1,525 @@
+<template>
+  <div>
+    <el-row>
+      <h4><b>审批人设置</b></h4>
+      <el-radio-group v-model="dataType" @change="changeDataType">
+        <el-radio label="USERS">指定用户</el-radio>
+        <el-radio label="ROLES">角色</el-radio>
+        <el-radio label="DEPTS">部门</el-radio>
+        <el-radio label="INITIATOR">发起人</el-radio>
+      </el-radio-group>
+    </el-row>
+    <el-row>
+      <div v-if="dataType === 'USERS'">
+        <el-tag v-for="userText in selectedUser.text" :key="userText" effect="plain">
+          {{userText}}
+        </el-tag>
+        <div class="element-drawer__button">
+          <el-button size="mini" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
+        </div>
+      </div>
+      <div v-if="dataType === 'ROLES'">
+        <el-select v-model="roleIds" multiple size="mini" placeholder="请选择 角色" @change="changeSelectRoles">
+          <el-option
+            v-for="item in roleOptions"
+            :key="item.roleId"
+            :label="item.roleName"
+            :value="`ROLE${item.roleId}`"
+            :disabled="item.status === 1">
+          </el-option>
+        </el-select>
+      </div>
+      <div v-if="dataType === 'DEPTS'">
+        <tree-select
+          :width="320"
+          :height="400"
+          size="mini"
+          :data="deptTreeData"
+          :defaultProps="deptProps"
+          multiple
+          clearable
+          checkStrictly
+          nodeKey="id"
+          :checkedKeys="deptIds"
+          @change="checkedDeptChange">
+        </tree-select>
+      </div>
+    </el-row>
+    <el-row>
+      <div v-show="showMultiFlog">
+        <el-divider />
+        <h4><b>多实例审批方式</b></h4>
+        <el-row>
+          <el-radio-group v-model="multiLoopType" @change="changeMultiLoopType()">
+            <el-row><el-radio label="Null">无</el-radio></el-row>
+            <el-row><el-radio label="SequentialMultiInstance">会签（需所有审批人同意）</el-radio></el-row>
+            <el-row><el-radio label="ParallelMultiInstance">或签（一名审批人同意即可）</el-radio></el-row>
+          </el-radio-group>
+        </el-row>
+        <el-row v-if="multiLoopType !== 'Null'">
+          <el-tooltip content="开启后，实例需按顺序轮流审批" placement="top-start" @click.stop.prevent>
+            <i class="header-icon el-icon-info"></i>
+          </el-tooltip>
+          <span class="custom-label">顺序审批：</span>
+          <el-switch v-model="isSequential" @change="changeMultiLoopType()" />
+        </el-row>
+      </div>
+    </el-row>
+
+    <!-- 候选用户弹窗 -->
+    <el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body>
+      <el-row type="flex" :gutter="20">
+        <!--部门数据-->
+        <el-col :span="7">
+          <el-card shadow="never" style="height: 100%">
+            <div slot="header">
+              <span>部门列表</span>
+            </div>
+            <div class="head-container">
+              <el-input
+                v-model="deptName"
+                placeholder="请输入部门名称"
+                clearable
+                size="small"
+                prefix-icon="el-icon-search"
+                style="margin-bottom: 20px"
+              />
+              <el-tree
+                :data="deptOptions"
+                :props="deptProps"
+                :expand-on-click-node="false"
+                :filter-node-method="filterNode"
+                ref="tree"
+                default-expand-all
+                @node-click="handleNodeClick"
+              />
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="17">
+          <el-table ref="multipleTable" height="600" :data="userTableList" border @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column label="用户名" align="center" prop="nickName" />
+            <el-table-column label="部门" align="center" prop="dept.deptName" />
+          </el-table>
+          <pagination
+            :total="userTotal"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getUserList"
+          />
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleTaskUserComplete">确 定</el-button>
+        <el-button @click="userOpen = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import { listUser, deptTreeSelect } from "@/api/system/user";
+import { listRole } from "@/api/system/role";
+import TreeSelect from "@/components/TreeSelect";
+
+const userTaskForm = {
+  dataType: '',
+  assignee: '',
+  candidateUsers: '',
+  candidateGroups: '',
+  text: '',
+  // dueDate: '',
+  // followUpDate: '',
+  // priority: ''
+}
+
+export default {
+  name: "UserTask",
+  props: {
+    id: String,
+    type: String
+  },
+  components: { TreeSelect },
+  data() {
+    return {
+      loading: false,
+      dataType: 'USERS',
+      selectedUser: {
+        ids: [],
+        text: []
+      },
+      userOpen: false,
+      deptName: undefined,
+      deptOptions: [],
+      deptProps: {
+        children: "children",
+        label: "label"
+      },
+      deptTempOptions: [],
+      userTableList: [],
+      userTotal: 0,
+      selectedUserDate: [],
+      roleOptions: [],
+      roleIds: [],
+      deptTreeData: [],
+      deptIds: [],
+      // 查询参数
+      queryParams: {
+        deptId: undefined
+      },
+      showMultiFlog: false,
+      isSequential: false,
+      multiLoopType: 'Null',
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.bpmnElement = window.bpmnInstances.bpmnElement;
+        this.$nextTick(() => this.resetTaskForm());
+      }
+    },
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  },
+  methods: {
+    resetTaskForm() {
+      const bpmnElementObj = this.bpmnElement?.businessObject;
+      if (!bpmnElementObj) {
+        return;
+      }
+      this.clearOptionsData()
+      this.dataType = bpmnElementObj['dataType'];
+      if (this.dataType === 'USERS') {
+        let userIdData = bpmnElementObj['candidateUsers'] || bpmnElementObj['assignee'];
+        let userText = bpmnElementObj['text'] || [];
+        if (userIdData && userIdData.toString().length > 0 && userText && userText.length > 0) {
+          this.selectedUser.ids = userIdData?.toString().split(',');
+          this.selectedUser.text = userText?.split(',');
+        }
+        if (this.selectedUser.ids.length > 1) {
+          this.showMultiFlog = true;
+        }
+      } else if (this.dataType === 'ROLES') {
+        this.getRoleOptions();
+        let roleIdData = bpmnElementObj['candidateGroups'] || [];
+        if (roleIdData && roleIdData.length > 0) {
+          this.roleIds = roleIdData.split(',')
+        }
+        this.showMultiFlog = true;
+      } else if (this.dataType === 'DEPTS') {
+        this.getDeptTreeData();
+        let deptIdData = bpmnElementObj['candidateGroups'] || [];
+        if (deptIdData && deptIdData.length > 0) {
+          this.deptIds = deptIdData.split(',');
+        }
+        this.showMultiFlog = true;
+      }
+      this.getElementLoop(bpmnElementObj);
+    },
+    /**
+     * 清空选项数据
+     */
+    clearOptionsData() {
+      this.selectedUser.ids = [];
+      this.selectedUser.text = [];
+      this.roleIds = [];
+      this.deptIds = [];
+    },
+    /**
+     * 跟新节点数据
+     */
+    updateElementTask() {
+      const taskAttr = Object.create(null);
+      for (let key in userTaskForm) {
+          taskAttr[key] = userTaskForm[key];
+      }
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
+    },
+    /**
+     * 查询部门下拉树结构
+     */
+    getDeptOptions() {
+      return new Promise((resolve, reject) => {
+        if (!this.deptOptions || this.deptOptions.length <= 0) {
+          deptTreeSelect().then(response => {
+            this.deptTempOptions = response.data;
+            this.deptOptions = response.data;
+            resolve()
+          })
+        } else {
+          reject()
+        }
+      });
+    },
+    /**
+     * 查询部门下拉树结构（含部门前缀）
+     */
+    getDeptTreeData() {
+      function refactorTree(data) {
+        return data.map(node => {
+          let treeData = { id: `DEPT${node.id}`, label: node.label, parentId: node.parentId, weight: node.weight };
+          if (node.children && node.children.length > 0) {
+            treeData.children = refactorTree(node.children);
+          }
+          return treeData;
+        });
+      }
+      return new Promise((resolve, reject) => {
+        if (!this.deptTreeData || this.deptTreeData.length <= 0) {
+          this.getDeptOptions().then(() => {
+            this.deptTreeData = refactorTree(this.deptOptions);
+            resolve()
+          }).catch(() => {
+            reject()
+          })
+        } else {
+          resolve()
+        }
+      })
+    },
+    /**
+     * 查询部门下拉树结构
+     */
+    getRoleOptions() {
+      if (!this.roleOptions || this.roleOptions.length <= 0) {
+        listRole().then(response => this.roleOptions = response.rows);
+      }
+    },
+    /** 查询用户列表 */
+    getUserList() {
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.userTableList = response.rows;
+        this.userTotal = response.total;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.getUserList();
+    },
+    // 关闭标签
+    handleClose(tag) {
+      this.selectedUserDate.splice(this.selectedUserDate.indexOf(tag), 1);
+      this.$refs.multipleTable.toggleRowSelection(tag);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.selectedUserDate = selection;
+    },
+    onSelectUsers() {
+      this.selectedUserDate = []
+      this.$refs.multipleTable?.clearSelection();
+      this.getDeptOptions();
+      this.userOpen = true;
+    },
+    handleTaskUserComplete() {
+      if (!this.selectedUserDate || this.selectedUserDate.length <= 0) {
+        this.$modal.msgError('请选择用户');
+        return;
+      }
+      userTaskForm.dataType = 'USERS';
+      this.selectedUser.text = this.selectedUserDate.map(k => k.nickName) || [];
+      if (this.selectedUserDate.length === 1) {
+        let data = this.selectedUserDate[0];
+        userTaskForm.assignee = data.userId;
+        userTaskForm.text = data.nickName;
+        userTaskForm.candidateUsers = null;
+        this.showMultiFlog = false;
+        this.multiLoopType = 'Null';
+        this.changeMultiLoopType();
+      } else {
+        userTaskForm.candidateUsers = this.selectedUserDate.map(k => k.userId).join() || null;
+        userTaskForm.text = this.selectedUserDate.map(k => k.nickName).join() || null;
+        userTaskForm.assignee = null;
+        this.showMultiFlog = true;
+      }
+      this.updateElementTask()
+      this.userOpen = false;
+    },
+    changeSelectRoles(val) {
+      let groups = null;
+      let text = null;
+      if (val && val.length > 0) {
+        userTaskForm.dataType = 'ROLES';
+        groups = val.join() || null;
+        let textArr = this.roleOptions.filter(k => val.indexOf(`ROLE${k.roleId}`) >= 0);
+        text = textArr?.map(k => k.roleName).join() || null;
+      } else {
+        userTaskForm.dataType = null;
+        this.multiLoopType = 'Null';
+      }
+      userTaskForm.candidateGroups = groups;
+      userTaskForm.text = text;
+      this.updateElementTask();
+      this.changeMultiLoopType();
+    },
+    checkedDeptChange(checkedIds) {
+      let groups = null;
+      let text = null;
+      this.deptIds = checkedIds;
+      if (checkedIds && checkedIds.length > 0) {
+        userTaskForm.dataType = 'DEPTS';
+        groups = checkedIds.join() || null;
+        let textArr = []
+        let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
+        checkedIds.forEach(id => {
+          let stark = []
+          stark = stark.concat(treeStarkData);
+          while(stark.length) {
+            let temp = stark.shift();
+            if(temp.children) {
+              stark = temp.children.concat(stark);
+            }
+            if(id === temp.id) {
+              textArr.push(temp);
+            }
+          }
+        })
+        text = textArr?.map(k => k.label).join() || null;
+      } else {
+        userTaskForm.dataType = null;
+        this.multiLoopType = 'Null';
+      }
+      userTaskForm.candidateGroups = groups;
+      userTaskForm.text = text;
+      this.updateElementTask();
+      this.changeMultiLoopType();
+    },
+    changeDataType(val) {
+      if (val === 'ROLES' || val === 'DEPTS' || (val === 'USERS' && this.selectedUser.ids.length > 1)) {
+        this.showMultiFlog = true;
+      } else {
+        this.showMultiFlog = false;
+      }
+      this.multiLoopType = 'Null';
+      this.changeMultiLoopType();
+      // 清空 userTaskForm 所有属性值
+      Object.keys(userTaskForm).forEach(key => userTaskForm[key] = null);
+      userTaskForm.dataType = val;
+      if (val === 'USERS') {
+        if (this.selectedUser && this.selectedUser.ids && this.selectedUser.ids.length > 0) {
+          if (this.selectedUser.ids.length === 1) {
+            userTaskForm.assignee = this.selectedUser.ids[0];
+          } else {
+            userTaskForm.candidateUsers = this.selectedUser.ids.join()
+          }
+          userTaskForm.text = this.selectedUser.text?.join() || null
+        }
+      } else if (val === 'ROLES') {
+        this.getRoleOptions();
+        if (this.roleIds && this.roleIds.length > 0) {
+          userTaskForm.candidateGroups = this.roleIds.join() || null;
+          let textArr = this.roleOptions.filter(k => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0);
+          userTaskForm.text = textArr?.map(k => k.roleName).join() || null;
+        }
+      } else if (val === 'DEPTS') {
+        this.getDeptTreeData();
+        if (this.deptIds && this.deptIds.length > 0) {
+          userTaskForm.candidateGroups = this.deptIds.join() || null;
+          let textArr = []
+          let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
+          this.deptIds.forEach(id => {
+            let stark = []
+            stark = stark.concat(treeStarkData);
+            while(stark.length) {
+              let temp = stark.shift();
+              if(temp.children) {
+                stark = temp.children.concat(stark);
+              }
+              if(id === temp.id) {
+                textArr.push(temp);
+              }
+            }
+          })
+          userTaskForm.text = textArr?.map(k => k.label).join() || null;
+        }
+      } else if (val === 'INITIATOR') {
+        userTaskForm.assignee = "${initiator}";
+        userTaskForm.text = "流程发起人";
+      }
+      this.updateElementTask();
+    },
+    getElementLoop(businessObject) {
+      if (!businessObject.loopCharacteristics) {
+        this.multiLoopType = "Null";
+        return;
+      }
+      this.isSequential = businessObject.loopCharacteristics.isSequential;
+      if (businessObject.loopCharacteristics.completionCondition) {
+        if (businessObject.loopCharacteristics.completionCondition.body === "${nrOfCompletedInstances >= nrOfInstances}") {
+          this.multiLoopType = "SequentialMultiInstance";
+        } else {
+          this.multiLoopType = "ParallelMultiInstance";
+
+        }
+      }
+    },
+    changeMultiLoopType() {
+      // 取消多实例配置
+      if (this.multiLoopType === "Null") {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null, assignee: null });
+        return;
+      }
+      this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: this.isSequential });
+      // 更新多实例配置
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+        loopCharacteristics: this.multiLoopInstance,
+        assignee: '${assignee}'
+      });
+      // 完成条件
+      let completionCondition = null;
+      // 会签
+      if (this.multiLoopType === "SequentialMultiInstance") {
+        completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances >= nrOfInstances}" });
+      }
+      // 或签
+      if (this.multiLoopType === "ParallelMultiInstance") {
+        completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances > 0}" });
+      }
+      // 更新模块属性信息
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
+        collection: '${multiInstanceHandler.getUserIds(execution)}',
+        elementVariable: 'assignee',
+        completionCondition
+      });
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.el-row .el-radio-group {
+  margin-bottom: 15px;
+  .el-radio {
+    line-height: 28px;
+  }
+}
+.el-tag {
+  margin-bottom: 10px;
+  + .el-tag {
+    margin-left: 10px;
+  }
+}
+
+.custom-label {
+  padding-left: 5px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #606266;
+}
+
+</style>