或签

9bc42ce6 · chenjiuping · 3404722f · 9bc42ce6 · 9bc42ce6 · 9bc42ce6
Commit 9bc42ce6 authored Nov 20, 2022 by chenjiuping
18 changed files
--- a/build/index.js
+++ b/build/index.js
@@ -19,7 +19,7 @@ if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
  app.use(
    publicPath,
    serveStatic('./dist', {
-      index: ['index.html', '/']
+      index: ['', '/']
    })
  )

--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
  "author": "捷道",
  "license": "MIT",
  "scripts": {
+    "local": "vue-cli-service serve --mode local",
    "dev": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build",

--- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -72,7 +72,7 @@
            <el-button :size="headerButtonSize" icon="el-icon-refresh" @click="processRestart" />
          </el-tooltip>
        </el-button-group>
-        <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-plus" @click="processSave">保存模型</el-button>
+        <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-plus" @click="processSave" :disabled = "simulationStatus">保存模型</el-button>
      </template>
      <!-- 用于打开本地文件-->
      <input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
@@ -118,6 +118,7 @@ export default {
  componentName: "MyProcessDesigner",
  props: {
    value: String, // xml 字符串
+    valueWatch: true, // xml 字符串的 watch 状态
    processId: String, // 流程 key 标识
    processName: String, // 流程 name 名字
    formId: Number, // 流程 form 表单编号
@@ -252,11 +253,6 @@ export default {
      this.bpmnModeler = null;
    });
  },
-  watch: {
-    value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图
-      this.createNewDiagram(newValue);
-    }
-  },
  methods: {
    initBpmnModeler() {
      if (this.bpmnModeler) return;
@@ -307,7 +303,7 @@ export default {
      let newName = this.processName || `业务流程_${new Date().getTime()}`;
      let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
      try {
-        console.log(this.bpmnModeler.importXML);
+        // console.log(this.bpmnModeler.importXML);
        let { warnings } = await this.bpmnModeler.importXML(xmlString);
        if (warnings && warnings.length) {
          warnings.forEach(warn => console.warn(warn));
@@ -459,7 +455,7 @@ export default {
        this.previewModelVisible = true;
      });
    },
-    /* ------------------------------------------------ 捷道源码 methods ------------------------------------------------------ */
+    /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
    async processSave() {
      const { err, xml } = await this.bpmnModeler.saveXML();
      // 读取异常时抛出异常
@@ -478,8 +474,3 @@ export default {
  }
 };
 </script>
-<style scoped>
-.my-process-designer{
-  height: calc(100vh - 84px - 40px);
-}
-</style>
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -90,15 +90,14 @@ export default {
      let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
      try {
        // console.log(this.bpmnModeler.importXML);
-        let { warnings } = await this.bpmnModeler.importXML(xmlString)
+        let { warnings } = await this.bpmnModeler.importXML(xmlString);
-        // 220906 增加一个缩放，自动适应尺寸
-        this.bpmnModeler.get('canvas').zoom('fit-viewport');
        if (warnings && warnings.length) {
          warnings.forEach(warn => console.warn(warn));
        }
        // 高亮流程图
        await this.highlightDiagram();
+        const canvas = this.bpmnModeler.get('canvas');
+        canvas.zoom("fit-viewport", "auto");
      } catch (e) {
        console.error(e);
        // console.error(`[Process Designer Warn]: ${e?.message || e}`);
@@ -117,23 +116,25 @@ export default {
      let todoActivity = activityList.find(m => !m.endTime) // 找到待办的任务
      let endActivity = activityList[activityList.length - 1] // 获得最后一个任务
      // debugger
-      console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
+      // console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
      this.bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach(n => {
        let activity = activityList.find(m => m.key === n.id) // 找到对应的活动
-        if (n.$type === 'bpmn:UserTask') { // 用户任务
        if (!activity) {
          return;
        }
+        if (n.$type === 'bpmn:UserTask') { // 用户任务
          // 处理用户任务的高亮
          const task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
-          if (task) {
+          if (!task) {
+            return;
+          }
+          // 高亮任务
          canvas.addMarker(n.id, this.getResultCss(task.result));
          // 如果非通过，就不走后面的线条了
          if (task.result !== 2) {
            return;
          }
-          }
          // 处理 outgoing 出线
          const outgoing = this.getActivityOutgoing(activity);
          outgoing?.forEach(nn => {
@@ -157,9 +158,6 @@ export default {
            }
          });
        } else if (n.$type === 'bpmn:ExclusiveGateway') { // 排它网关
-          if (!activity) {
-            return
-          }
          // 设置【bpmn:ExclusiveGateway】排它网关的高亮
          canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
          // 查找需要高亮的连线
@@ -184,9 +182,6 @@ export default {
            canvas.addMarker(matchNN.id, this.getActivityHighlightCss(matchActivity));
          }
        } else if (n.$type === 'bpmn:ParallelGateway') { // 并行网关
-          if (!activity) {
-            return
-          }
          // 设置【bpmn:ParallelGateway】并行网关的高亮
          canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
          n.outgoing?.forEach(nn => {
@@ -212,6 +207,17 @@ export default {
            return;
          }
          canvas.addMarker(n.id, this.getResultCss(this.processInstance.result));
+        } else if (n.$type === 'bpmn:ServiceTask'){ //服务任务
+          if(activity.startTime>0 && activity.endTime===0){//进入执行，标识进行色
+            canvas.addMarker(n.id, this.getResultCss(1));
+          }
+          if(activity.endTime>0){// 执行完成，节点标识完成色, 所有outgoing标识完成色。
+            canvas.addMarker(n.id, this.getResultCss(2));
+            const outgoing = this.getActivityOutgoing(activity)
+            outgoing?.forEach(out=>{
+              canvas.addMarker(out.id,this.getResultCss(2))
+            })
+          }
        }
      })
    },
@@ -219,13 +225,13 @@ export default {
      return activity.endTime ? 'highlight' : 'highlight-todo';
    },
    getResultCss(result) {
-      if (result === 1) {
+      if (result === 1) { // 审批中
        return 'highlight-todo';
-      } else if (result === 2) {
+      } else if (result === 2) { // 已通过
        return 'highlight';
-      } else if (result === 3) {
+      } else if (result === 3) { // 不通过
        return 'highlight-reject';
-      } else if (result === 4) {
+      } else if (result === 4) { // 已取消
        return 'highlight-cancel';
      }
      return '';
@@ -267,6 +273,10 @@ export default {
      !this.elementOverlayIds && (this.elementOverlayIds = {});
      !this.overlays && (this.overlays = this.bpmnModeler.get("overlays"));
      // 展示信息
+      const activity = this.activityList.find(m => m.key === element.id);
+      if (!activity) {
+        return;
+      }
      if (!this.elementOverlayIds[element.id] && element.type !== "bpmn:Process") {
        let html = `<div class="element-overlays">
            <p>Elemet id: ${element.id}</p>
@@ -278,10 +288,6 @@ export default {
                  <p>创建时间：${this.parseTime(this.processInstance.createTime)}`;
        } else if (element.type === 'bpmn:UserTask') {
          // debugger
-          const activity = this.activityList.find(m => m.key === element.id);
-          if (!activity) {
-            return;
-          }
          let task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
          if (!task) {
            return;
@@ -293,9 +299,17 @@ export default {
          if (task.endTime) {
            html += `<p>结束时间：${this.parseTime(task.endTime)}</p>`
          }
-          if (task.comment) {
+          if (task.reason) {
-            html += `<p>审批建议：${task.comment}</p>`
+            html += `<p>审批建议：${task.reason}</p>`
          }
+        } else if (element.type === 'bpmn:ServiceTask' && this.processInstance) {
+          if(activity.startTime>0){
+            html = `<p>创建时间：${this.parseTime(activity.startTime)}</p>`;
+          }
+          if(activity.endTime>0){
+            html += `<p>结束时间：${this.parseTime(activity.endTime)}</p>`
+          }
+          console.log(html)
        } else if (element.type === 'bpmn:EndEvent' && this.processInstance) {
          html = `<p>结果：${this.getDictDataLabel(this.DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, this.processInstance.result)}</p>`;
          if (this.processInstance.endTime) {
@@ -317,7 +331,8 @@ export default {
 };
 </script>
-<style scoped>
+<style>
 /** 处理中 */
 .highlight-todo.djs-connection > .djs-visual > path {
  stroke: #1890ff !important;
@@ -331,13 +346,13 @@ export default {
  fill-opacity: 0.2 !important;
 }
-/deep/.highlight-todo.djs-connection > .djs-visual > path {
+:deep(.highlight-todo.djs-connection > .djs-visual > path) {
  stroke: #1890ff !important;
  stroke-dasharray: 4px !important;
  fill-opacity: 0.2 !important;
  marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
 }
-/deep/.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
+:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
  fill: #1890ff !important;
  stroke: #1890ff !important;
  stroke-dasharray: 4px !important;
@@ -366,20 +381,20 @@ export default {
  fill: green !important; /* color elements as green */
 }
-/deep/.highlight.djs-shape .djs-visual > :nth-child(1) {
+:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
  fill: green !important;
  stroke: green !important;
  fill-opacity: 0.2 !important;
 }
-/deep/.highlight.djs-shape .djs-visual > :nth-child(2) {
+:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
  fill: green !important;
 }
-/deep/.highlight.djs-shape .djs-visual > path {
+:deep(.highlight.djs-shape .djs-visual > path) {
  fill: green !important;
  fill-opacity: 0.2 !important;
  stroke: green !important;
 }
-/deep/.highlight.djs-connection > .djs-visual > path {
+:deep(.highlight.djs-connection > .djs-visual > path) {
  stroke: green !important;
 }
@@ -405,20 +420,20 @@ export default {
  fill: red !important; /* color elements as green */
 }
-/deep/.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
  fill: red !important;
  stroke: red !important;
  fill-opacity: 0.2 !important;
 }
-/deep/.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
  fill: red !important;
 }
-/deep/.highlight-reject.djs-shape .djs-visual > path {
+:deep(.highlight-reject.djs-shape .djs-visual > path) {
  fill: red !important;
  fill-opacity: 0.2 !important;
  stroke: red !important;
 }
-/deep/.highlight-reject.djs-connection > .djs-visual > path {
+:deep(.highlight-reject.djs-connection > .djs-visual > path) {
  stroke: red !important;
 }
@@ -444,20 +459,20 @@ export default {
  fill: grey !important; /* color elements as green */
 }
-/deep/.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
  fill: grey !important;
  stroke: grey !important;
  fill-opacity: 0.2 !important;
 }
-/deep/.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
  fill: grey !important;
 }
-/deep/.highlight-cancel.djs-shape .djs-visual > path {
+:deep(.highlight-cancel.djs-shape .djs-visual > path) {
  fill: grey !important;
  fill-opacity: 0.2 !important;
  stroke: grey !important;
 }
-/deep/.highlight-cancel.djs-connection > .djs-visual > path {
+:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
  stroke: grey !important;
 }

--- a/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js
@@ -49,14 +49,14 @@ export default function ContextPadProvider(
  }
  eventBus.on("create.end", 250, function(event) {
-    var context = event.context,
+    const context = event.context,
-      shape = context.shape;
+      shape = context.shape
    if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
      return;
    }
-    var entries = contextPad.getEntries(shape);
+    const entries = contextPad.getEntries(shape)
    if (entries.replace) {
      entries.replace.action.click(event, shape);
@@ -81,7 +81,7 @@ ContextPadProvider.$inject = [
 ];
 ContextPadProvider.prototype.getContextPadEntries = function(element) {
-  var contextPad = this._contextPad,
+  const contextPad = this._contextPad,
    modeling = this._modeling,
    elementFactory = this._elementFactory,
    connect = this._connect,
@@ -90,15 +90,15 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
    canvas = this._canvas,
    rules = this._rules,
    autoPlace = this._autoPlace,
-    translate = this._translate;
+    translate = this._translate
-  var actions = {};
+  const actions = {}
  if (element.type === "label") {
    return actions;
  }
-  var businessObject = element.businessObject;
+  const businessObject = element.businessObject
  function startConnect(event, element) {
    connect.start(event, element);
@@ -109,21 +109,21 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
  }
  function getReplaceMenuPosition(element) {
-    var Y_OFFSET = 5;
+    const Y_OFFSET = 5
-    var diagramContainer = canvas.getContainer(),
+    const diagramContainer = canvas.getContainer(),
-      pad = contextPad.getPad(element).html;
+      pad = contextPad.getPad(element).html
-    var diagramRect = diagramContainer.getBoundingClientRect(),
+    const diagramRect = diagramContainer.getBoundingClientRect(),
-      padRect = pad.getBoundingClientRect();
+      padRect = pad.getBoundingClientRect()
-    var top = padRect.top - diagramRect.top;
+    const top = padRect.top - diagramRect.top
-    var left = padRect.left - diagramRect.left;
+    const left = padRect.left - diagramRect.left
-    var pos = {
+    const pos = {
      x: left,
      y: top + padRect.height + Y_OFFSET
-    };
+    }
    return pos;
  }
@@ -145,19 +145,19 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
    }
    function appendStart(event, element) {
-      var shape = elementFactory.createShape(assign({ type: type }, options));
+      const shape = elementFactory.createShape(assign({ type: type }, options))
      create.start(event, shape, {
        source: element
      });
    }
-    var append = autoPlace
+    const append = autoPlace
      ? function(event, element) {
-          var shape = elementFactory.createShape(assign({ type: type }, options));
+        const shape = elementFactory.createShape(assign({ type: type }, options))
-          autoPlace.append(element, shape);
+        autoPlace.append(element, shape)
      }
-      : appendStart;
+      : appendStart
    return {
      group: "model",
@@ -182,7 +182,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
  }
  if (isAny(businessObject, ["bpmn:Lane", "bpmn:Participant"]) && isExpanded(businessObject)) {
-    var childLanes = getChildLanes(element);
+    const childLanes = getChildLanes(element)
    assign(actions, {
      "lane-insert-above": {
@@ -302,9 +302,9 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
        title: translate("Change type"),
        action: {
          click: function(event, element) {
-            var position = assign(getReplaceMenuPosition(element), {
+            const position = assign(getReplaceMenuPosition(element), {
              cursor: { x: event.x, y: event.y }
-            });
+            })
            popupMenu.open(element, "bpmn-replace", position);
          }
@@ -350,7 +350,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
  }
  // delete element entry, only show if allowed by rules
-  var deleteAllowed = rules.allowed("elements.delete", { elements: [element] });
+  let deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
  if (isArray(deleteAllowed)) {
    // was the element returned as a deletion candidate?
@@ -376,10 +376,10 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
 // helpers /////////
 function isEventType(eventBo, type, definition) {
-  var isType = eventBo.$instanceOf(type);
+  const isType = eventBo.$instanceOf(type)
-  var isDefinition = false;
+  let isDefinition = false
-  var definitions = eventBo.eventDefinitions || [];
+  const definitions = eventBo.eventDefinitions || []
  forEach(definitions, function(def) {
    if (def.$type === definition) {
      isDefinition = true;

--- a/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
 "use strict";
-var some = require("min-dash").some;
+const some = require('min-dash').some
-var ALLOWED_TYPES = {
+const ALLOWED_TYPES = {
-  FailedJobRetryTimeCycle: ["bpmn:StartEvent", "bpmn:BoundaryEvent", "bpmn:IntermediateCatchEvent", "bpmn:Activity"],
+  FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
-  Connector: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
-  Field: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"]
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
-};
+}
 function is(element, type) {
  return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
@@ -32,8 +32,8 @@ function anyType(element, types) {
 }
 function isAllowed(propName, propDescriptor, newElement) {
-  var name = propDescriptor.name,
+  const name = propDescriptor.name,
-    types = ALLOWED_TYPES[name.replace(/activiti:/, "")];
+    types = ALLOWED_TYPES[name.replace(/activiti:/, '')]
  return name === propName && anyType(newElement, types);
 }
@@ -42,8 +42,8 @@ function ActivitiModdleExtension(eventBus) {
  eventBus.on(
    "property.clone",
    function(context) {
-      var newElement = context.newElement,
+      const newElement = context.newElement,
-        propDescriptor = context.propertyDescriptor;
+        propDescriptor = context.propertyDescriptor
      this.canCloneProperty(newElement, propDescriptor);
    },

--- a/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js
 "use strict";
-var isFunction = require("min-dash").isFunction,
+const isFunction = require('min-dash').isFunction,
-  isObject = require("min-dash").isObject,
+  isObject = require('min-dash').isObject,
-  some = require("min-dash").some;
+  some = require('min-dash').some
-var WILDCARD = "*";
+const WILDCARD = '*'
 function CamundaModdleExtension(eventBus) {
-  var self = this;
+  const self = this
  eventBus.on("moddleCopy.canCopyProperty", function(context) {
-    var property = context.property,
+    const property = context.property,
-      parent = context.parent;
+      parent = context.parent
    return self.canCopyProperty(property, parent);
  });
@@ -45,14 +45,14 @@ CamundaModdleExtension.prototype.canCopyProperty = function(property, parent) {
 CamundaModdleExtension.prototype.canHostInputOutput = function(parent) {
  // allowed in camunda:Connector
-  var connector = getParent(parent, "camunda:Connector");
+  const connector = getParent(parent, 'camunda:Connector')
  if (connector) {
    return true;
  }
  // special rules inside bpmn:FlowNode
-  var flowNode = getParent(parent, "bpmn:FlowNode");
+  const flowNode = getParent(parent, 'bpmn:FlowNode')
  if (!flowNode) {
    return false;
@@ -62,15 +62,13 @@ CamundaModdleExtension.prototype.canHostInputOutput = function(parent) {
    return false;
  }
-  if (is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent")) {
+  return !(is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent"));
-    return false;
-  }
-  return true;
 };
 CamundaModdleExtension.prototype.canHostConnector = function(parent) {
-  var serviceTaskLike = getParent(parent, "camunda:ServiceTaskLike");
+  const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike')
  if (is(serviceTaskLike, "bpmn:MessageEventDefinition")) {
    // only allow on throw and end events
@@ -81,13 +79,13 @@ CamundaModdleExtension.prototype.canHostConnector = function(parent) {
 };
 CamundaModdleExtension.prototype.canHostIn = function(parent) {
-  var callActivity = getParent(parent, "bpmn:CallActivity");
+  const callActivity = getParent(parent, 'bpmn:CallActivity')
  if (callActivity) {
    return true;
  }
-  var signalEventDefinition = getParent(parent, "bpmn:SignalEventDefinition");
+  const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition')
  if (signalEventDefinition) {
    // only allow on throw and end events
@@ -129,9 +127,9 @@ function getParent(element, type) {
 function isAllowedInParent(property, parent) {
  // (1) find property descriptor
-  var descriptor = property.$type && property.$model.getTypeDescriptor(property.$type);
+  const descriptor = property.$type && property.$model.getTypeDescriptor(property.$type)
-  var allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn;
+  const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn
  if (!allowedIn || isWildcard(allowedIn)) {
    return true;

--- a/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
 "use strict";
-var some = require("min-dash").some;
+const some = require('min-dash').some
-var ALLOWED_TYPES = {
+const ALLOWED_TYPES = {
-  FailedJobRetryTimeCycle: ["bpmn:StartEvent", "bpmn:BoundaryEvent", "bpmn:IntermediateCatchEvent", "bpmn:Activity"],
+  FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
-  Connector: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
-  Field: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"]
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
-};
+}
 function is(element, type) {
  return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
@@ -32,8 +32,8 @@ function anyType(element, types) {
 }
 function isAllowed(propName, propDescriptor, newElement) {
-  var name = propDescriptor.name,
+  const name = propDescriptor.name,
-    types = ALLOWED_TYPES[name.replace(/flowable:/, "")];
+    types = ALLOWED_TYPES[name.replace(/flowable:/, '')]
  return name === propName && anyType(newElement, types);
 }
@@ -42,8 +42,8 @@ function FlowableModdleExtension(eventBus) {
  eventBus.on(
    "property.clone",
    function(context) {
-      var newElement = context.newElement,
+      const newElement = context.newElement,
-        propDescriptor = context.propertyDescriptor;
+        propDescriptor = context.propertyDescriptor
      this.canCloneProperty(newElement, propDescriptor);
    },

--- a/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js
@@ -10,18 +10,18 @@ F.prototype = PaletteProvider.prototype; // 核心，将父类的原型赋值给
 // 利用中介函数重写原型链方法
 F.prototype.getPaletteEntries = function() {
-  var actions = {},
+  const actions = {},
    create = this._create,
    elementFactory = this._elementFactory,
    spaceTool = this._spaceTool,
    lassoTool = this._lassoTool,
    handTool = this._handTool,
    globalConnect = this._globalConnect,
-    translate = this._translate;
+    translate = this._translate
  function createAction(type, group, className, title, options) {
    function createListener(event) {
-      var shape = elementFactory.createShape(assign({ type: type }, options));
+      const shape = elementFactory.createShape(assign({ type: type }, options))
      if (options) {
        shape.businessObject.di.isExpanded = options.isExpanded;
@@ -30,7 +30,7 @@ F.prototype.getPaletteEntries = function() {
      create.start(event, shape);
    }
-    var shortType = type.replace(/^bpmn:/, "");
+    const shortType = type.replace(/^bpmn:/, '')
    return {
      group: group,
@@ -44,19 +44,19 @@ F.prototype.getPaletteEntries = function() {
  }
  function createSubprocess(event) {
-    var subProcess = elementFactory.createShape({
+    const subProcess = elementFactory.createShape({
-      type: "bpmn:SubProcess",
+      type: 'bpmn:SubProcess',
      x: 0,
      y: 0,
      isExpanded: true
-    });
+    })
-    var startEvent = elementFactory.createShape({
+    const startEvent = elementFactory.createShape({
-      type: "bpmn:StartEvent",
+      type: 'bpmn:StartEvent',
      x: 40,
      y: 82,
      parent: subProcess
-    });
+    })
    create.start(event, [subProcess, startEvent], {
      hints: {

--- a/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js
@@ -19,18 +19,18 @@ export default function PaletteProvider(palette, create, elementFactory, spaceTo
 PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"];
 PaletteProvider.prototype.getPaletteEntries = function() {
-  var actions = {},
+  const actions = {},
    create = this._create,
    elementFactory = this._elementFactory,
    spaceTool = this._spaceTool,
    lassoTool = this._lassoTool,
    handTool = this._handTool,
    globalConnect = this._globalConnect,
-    translate = this._translate;
+    translate = this._translate
  function createAction(type, group, className, title, options) {
    function createListener(event) {
-      var shape = elementFactory.createShape(assign({ type: type }, options));
+      const shape = elementFactory.createShape(assign({ type: type }, options))
      if (options) {
        shape.businessObject.di.isExpanded = options.isExpanded;
@@ -39,7 +39,7 @@ PaletteProvider.prototype.getPaletteEntries = function() {
      create.start(event, shape);
    }
-    var shortType = type.replace(/^bpmn:/, "");
+    const shortType = type.replace(/^bpmn:/, '')
    return {
      group: group,
@@ -53,19 +53,19 @@ PaletteProvider.prototype.getPaletteEntries = function() {
  }
  function createSubprocess(event) {
-    var subProcess = elementFactory.createShape({
+    const subProcess = elementFactory.createShape({
-      type: "bpmn:SubProcess",
+      type: 'bpmn:SubProcess',
      x: 0,
      y: 0,
      isExpanded: true
-    });
+    })
-    var startEvent = elementFactory.createShape({
+    const startEvent = elementFactory.createShape({
-      type: "bpmn:StartEvent",
+      type: 'bpmn:StartEvent',
      x: 40,
      y: 82,
      parent: subProcess
-    });
+    })
    create.start(event, [subProcess, startEvent], {
      hints: {

--- a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -163,7 +163,6 @@ export default {
    // 初始化数据
    initFormOnChanged(element) {
      let activatedElement = element;
-      // debugger
      if (!activatedElement) {
        activatedElement =
          window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??

--- a/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -2,6 +2,7 @@
  <div class="panel-tab__content">
    <el-form size="mini" label-width="90px" :model="model" :rules="rules" @submit.native.prevent>
      <div v-if="elementBaseInfo.$type === 'bpmn:Process'"> <!-- 如果是 Process 信息的时候，使用自定义表单 -->
        <el-form-item label="流程标识" prop="key">
          <el-input v-model="model.key" placeholder="请输入流标标识"
                    :disabled="model.id !== undefined && model.id.length > 0" @change="handleKeyUpdate" />
@@ -66,6 +67,7 @@ export default {
  },
  methods: {
    resetBaseInfo() {
+      debugger;
      this.bpmnElement = window?.bpmnInstances?.bpmnElement;
      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
    },
@@ -74,7 +76,7 @@ export default {
      if (!value) {
        return;
      }
-      if (!value.match(/[a-zA-Z_][\-_.0-9_a-zA-Z$]*/)) {
+      if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
        console.log('key 不满足 XML NCName 规则，所以不进行赋值');
        return;
      }
@@ -101,6 +103,7 @@ export default {
      const attrObj = Object.create(null);
      attrObj[key] = this.elementBaseInfo[key];
      if (key === "id") {
+        debugger;
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
          id: this.elementBaseInfo[key],
          di: { id: `${this.elementBaseInfo[key]}_di` }

--- a/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
@@ -15,7 +15,7 @@
        </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-input v-model="flowConditionForm.body" style="width:192px;"  clearable @change="updateFlowCondition" />
      </el-form-item>
      <template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
        <el-form-item label="脚本语言" key="language">

--- a/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
@@ -15,7 +15,7 @@
        <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-form-item label="集合" key="collection" v-show="false">
          <el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
        </el-form-item>
        <el-form-item label="元素变量" key="elementVariable">
@@ -131,7 +131,7 @@ export default {
      if (type === "SequentialMultiInstance") {
        this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: true });
      } else {
-        this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics");
+        this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { collection: "${coll_userList}" });
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        loopCharacteristics: this.multiLoopInstance

--- a/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
+++ b/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
@@ -13,7 +13,7 @@
  display: flex;
  flex-direction: column;
  width: 100%;
-  height: 100%;
+  height: 500px;
  box-sizing: border-box;
  .my-process-designer__header {
    width: 100%;
@@ -141,11 +141,11 @@
  }
 }
 pre {
-  /* margin: 0;
+  margin: 0;
  height: 100%;
  overflow: hidden;
  max-height: calc(80vh - 32px);
-  overflow-y: auto; */
+  overflow-y: auto;
 }
 .hljs {
  word-break: break-word;

--- a/src/views/bpm/model/modelEditor.vue
+++ b/src/views/bpm/model/modelEditor.vue
 <template>
  <div class="app-container">
    <!-- 流程设计器，负责绘制流程等 -->
-    <my-process-designer :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm"
+    <my-process-designer v-if="xmlString !== undefined" :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm"
      keyboard ref="processDesigner" @init-finished="initModeler"
      @save="save"/>
@@ -29,7 +30,7 @@ export default {
  components: { MyProcessPalette },
  data() {
    return {
-      xmlString: "", // BPMN XML
+      xmlString: undefined, // BPMN XML
      modeler: null,
      reloadIndex: 0,
      controlDrawerVisible: false,
@@ -38,7 +39,7 @@ export default {
        simulation: true,
        labelEditing: false,
        labelVisible: false,
-        prefix: "activiti",
+        prefix: "flowable",
        headerButtonSize: "mini",
        additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
      },
@@ -53,6 +54,7 @@ export default {
  created() {
    // 如果 modelId 非空，说明是修改流程模型
    const modelId = this.$route.query && this.$route.query.modelId
    if (modelId) {
      getModel(modelId).then(response => {
        this.xmlString = response.data.bpmnXml
@@ -68,24 +70,8 @@ export default {
    initModeler(modeler) {
      setTimeout(() => {
        this.modeler = modeler;
-        console.log(modeler);
      }, 10);
    },
-    reloadProcessDesigner(deep) {
-      this.controlForm.additionalModel = [];
-      for (let key in this.addis) {
-        if (this.addis[key]) {
-          this.controlForm.additionalModel.push(this.addis[key]);
-        }
-      }
-      deep && (this.xmlString = undefined);
-      this.reloadIndex += 1;
-      this.modeler = null; // 避免 panel 异常
-      // if (deep) {
-      //   this.xmlString = undefined;
-      //   this.$refs.processDesigner.processRestart();
-      // }
-    },
    save(bpmnXml) {
      const data = {
        ...this.model,
@@ -129,9 +115,6 @@ export default {
 //  display: inline-grid;
 //  grid-template-columns: 100px auto max-content;
 //}
-.app-container{
-  min-height: calc(100vh - 84px);
-}
 .demo-control-bar {
  position: fixed;
  right: 8px;
@@ -174,9 +157,9 @@ export default {
  color: #fafafa;
 }
-/* .my-process-designer {
+.my-process-designer {
  height: calc(100vh - 84px);
-} */
+}
 .process-panel__container {
  position: absolute;
  right: 0;

--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -38,10 +38,10 @@
    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
-      <!-- <el-col :span="1.5">
+       <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['bpm:process-instance:query']">{{$t('发起流程')}}</el-button>
-      </el-col> -->
+      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

--- a/yarn.lock
+++ b/yarn.lock