完成

.env.production

@@ -2,4 +2,4 @@
 ENV = 'production'
 
 # 中控管理系统/生产环境
-VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = '/dmapi'

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.history
 node_modules/
 dist/
 npm-debug.log*

center/bpmnjs/css/diagram-js.css

@@ -0,0 +1,717 @@
+/**
+ * outline styles
+ */
+
+.djs-outline {
+  fill: none;
+  visibility: hidden;
+}
+
+.djs-element.hover .djs-outline,
+.djs-element.selected .djs-outline {
+  visibility: visible;
+  shape-rendering: crispEdges;
+  stroke-dasharray: 3,3;
+}
+
+.djs-element.selected .djs-outline {
+  stroke: #8888FF;
+  stroke-width: 1px;
+}
+
+.djs-element.hover .djs-outline {
+  stroke: #FF8888;
+  stroke-width: 1px;
+}
+
+.djs-shape.connect-ok .djs-visual > :nth-child(1) {
+  fill: #DCFECC /* light-green */ !important;
+}
+
+.djs-shape.connect-not-ok .djs-visual > :nth-child(1),
+.djs-shape.drop-not-ok .djs-visual > :nth-child(1) {
+  fill: #f9dee5 /* light-red */ !important;
+}
+
+.djs-shape.new-parent .djs-visual > :nth-child(1) {
+  fill: #F7F9FF !important;
+}
+
+svg.drop-not-ok {
+  background: #f9dee5 /* light-red */ !important;
+}
+
+svg.new-parent {
+  background: #F7F9FF /* light-blue */ !important;
+}
+
+.djs-connection.connect-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-ok .djs-visual > :nth-child(1) {
+  stroke: #90DD5F /* light-green */ !important;
+}
+
+.djs-connection.connect-not-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke: #E56283 /* light-red */ !important;
+}
+
+.drop-not-ok,
+.connect-not-ok {
+  cursor: not-allowed;
+}
+
+.djs-element.attach-ok .djs-visual > :nth-child(1) {
+  stroke-width: 5px !important;
+  stroke: rgba(255, 116, 0, 0.7) !important;
+}
+
+.djs-frame.connect-not-ok .djs-visual > :nth-child(1),
+.djs-frame.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke-width: 3px !important;
+  stroke: #E56283 /* light-red */ !important;
+  fill: none !important;
+}
+
+/**
+* Selection box style
+*
+*/
+.djs-lasso-overlay {
+  fill: rgb(255, 116, 0);
+  fill-opacity: 0.1;
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: rgb(255, 116, 0);
+
+  shape-rendering: crispEdges;
+  pointer-events: none;
+}
+
+/**
+ * Resize styles
+ */
+.djs-resize-overlay {
+  fill: none;
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: rgb(255, 116, 0);
+
+  pointer-events: none;
+}
+
+.djs-resizer-hit {
+  fill: none;
+  pointer-events: all;
+}
+
+.djs-resizer-visual {
+  fill: white;
+  stroke-width: 1px;
+  stroke: black;
+  shape-rendering: crispEdges;
+  stroke-opacity: 0.2;
+}
+
+.djs-cursor-resize-nwse,
+.djs-resizer-nw,
+.djs-resizer-se {
+  cursor: nwse-resize;
+}
+
+.djs-cursor-resize-nesw,
+.djs-resizer-ne,
+.djs-resizer-sw {
+  cursor: nesw-resize;
+}
+
+.djs-shape.djs-resizing > .djs-outline {
+  visibility: hidden !important;
+}
+
+.djs-shape.djs-resizing > .djs-resizer {
+  visibility: hidden;
+}
+
+.djs-dragger > .djs-resizer {
+  visibility: hidden;
+}
+
+/**
+ * drag styles
+ */
+.djs-dragger * {
+  fill: none !important;
+  stroke: rgb(255, 116, 0) !important;
+}
+
+.djs-dragger tspan,
+.djs-dragger text {
+  fill: rgb(255, 116, 0) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragger circle,
+marker.djs-dragger path,
+marker.djs-dragger polygon,
+marker.djs-dragger polyline,
+marker.djs-dragger rect {
+  fill: rgb(255, 116, 0) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragger text,
+marker.djs-dragger tspan {
+  fill: none !important;
+  stroke: rgb(255, 116, 0) !important;
+}
+
+.djs-dragging {
+  opacity: 0.3;
+}
+
+.djs-dragging,
+.djs-dragging > * {
+  pointer-events: none !important;
+}
+
+.djs-dragging .djs-context-pad,
+.djs-dragging .djs-outline {
+  display: none !important;
+}
+
+/**
+ * no pointer events for visual
+ */
+.djs-visual,
+.djs-outline {
+  pointer-events: none;
+}
+
+.djs-element.attach-ok .djs-hit {
+  stroke-width: 60px !important;
+}
+
+/**
+ * all pointer events for hit shape
+ */
+.djs-element > .djs-hit-all {
+  pointer-events: all;
+}
+
+.djs-element > .djs-hit-stroke,
+.djs-element > .djs-hit-click-stroke {
+  pointer-events: stroke;
+}
+
+/**
+ * all pointer events for hit shape
+ */
+.djs-drag-active .djs-element > .djs-hit-click-stroke {
+  pointer-events: all;
+}
+
+/**
+ * shape / connection basic styles
+ */
+.djs-connection .djs-visual {
+  stroke-width: 2px;
+  fill: none;
+}
+
+.djs-cursor-grab {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
+
+.djs-cursor-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+.djs-cursor-crosshair {
+  cursor: crosshair;
+}
+
+.djs-cursor-move {
+  cursor: move;
+}
+
+.djs-cursor-resize-ns {
+  cursor: ns-resize;
+}
+
+.djs-cursor-resize-ew {
+  cursor: ew-resize;
+}
+
+
+/**
+ * snapping
+ */
+.djs-snap-line {
+  stroke: rgb(255, 195, 66);
+  stroke: rgba(255, 195, 66, 0.50);
+  stroke-linecap: round;
+  stroke-width: 2px;
+  pointer-events: none;
+}
+
+/**
+ * snapping
+ */
+.djs-crosshair {
+  stroke: #555;
+  stroke-linecap: round;
+  stroke-width: 1px;
+  pointer-events: none;
+  shape-rendering: crispEdges;
+  stroke-dasharray: 5, 5;
+}
+
+/**
+ * palette
+ */
+
+.djs-palette {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+
+  box-sizing: border-box;
+  width: 48px;
+}
+
+.djs-palette .separator {
+  margin: 0 5px;
+  padding-top: 5px;
+
+  border: none;
+  border-bottom: solid 1px #DDD;
+
+  clear: both;
+}
+
+.djs-palette .entry:before {
+  vertical-align: text-bottom;
+}
+
+.djs-palette .djs-palette-toggle {
+  cursor: pointer;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  color: #333;
+  font-size: 30px;
+
+  text-align: center;
+}
+
+.djs-palette .entry {
+  float: left;
+}
+
+.djs-palette .entry img {
+  max-width: 100%;
+}
+
+.djs-palette .djs-palette-entries:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.djs-palette .djs-palette-toggle:hover {
+  background: #666;
+}
+
+.djs-palette .entry:hover {
+  color: rgb(255, 116, 0);
+}
+
+.djs-palette .highlighted-entry {
+  color: rgb(255, 116, 0) !important;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  width: 46px;
+  height: 46px;
+  line-height: 46px;
+  cursor: default;
+}
+
+/**
+ * Palette open / two-column layout is controlled via
+ * classes on the palette. Events to hook into palette
+ * changed life-cycle are available in addition.
+ */
+.djs-palette.two-column.open {
+  width: 94px;
+}
+
+.djs-palette:not(.open) .djs-palette-entries {
+  display: none;
+}
+
+.djs-palette:not(.open) {
+  overflow: hidden;
+}
+
+.djs-palette.open .djs-palette-toggle {
+  display: none;
+}
+
+/**
+ * context-pad
+ */
+.djs-overlay-context-pad {
+  width: 72px;
+}
+
+.djs-context-pad {
+  position: absolute;
+  display: none;
+  pointer-events: none;
+}
+
+.djs-context-pad .entry {
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  display: inline-block;
+  font-size: 22px;
+  margin: 0 2px 2px 0;
+
+  border-radius: 3px;
+
+  cursor: default;
+
+  background-color: #FEFEFE;
+  box-shadow: 0 0 2px 1px #FEFEFE;
+  pointer-events: all;
+}
+
+.djs-context-pad .entry:before {
+  vertical-align: top;
+}
+
+.djs-context-pad .entry:hover {
+  background: rgb(255, 252, 176);
+}
+
+.djs-context-pad.open {
+  display: block;
+}
+
+/**
+ * popup styles
+ */
+.djs-popup .entry {
+  line-height: 20px;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/* larger font for prefixed icons */
+.djs-popup .entry:before {
+  vertical-align: middle;
+  font-size: 20px;
+}
+
+.djs-popup .entry > span {
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+.djs-popup .entry:hover,
+.djs-popup .entry.active:hover {
+  background: rgb(255, 252, 176);
+}
+
+.djs-popup .entry.disabled {
+  background: inherit;
+}
+
+.djs-popup .djs-popup-header .entry {
+  display: inline-block;
+  padding: 2px 3px 2px 3px;
+
+  border: solid 1px transparent;
+  border-radius: 3px;
+}
+
+.djs-popup .djs-popup-header .entry.active {
+  color: rgb(255, 116, 0);
+  border: solid 1px rgb(255, 116, 0);
+  background-color: #F6F6F6;
+}
+
+.djs-popup-body .entry {
+  padding: 4px 10px 4px 5px;
+}
+
+.djs-popup-body .entry > span {
+  margin-left: 5px;
+}
+
+.djs-popup-body {
+  background-color: #FEFEFE;
+}
+
+.djs-popup-header {
+  border-bottom: 1px solid #DDD;
+}
+
+.djs-popup-header .entry {
+  margin: 1px;
+  margin-left: 3px;
+}
+
+.djs-popup-header .entry:last-child {
+  margin-right: 3px;
+}
+
+/**
+ * popup / palette styles
+ */
+.djs-popup, .djs-palette {
+  background: #FAFAFA;
+  border: solid 1px #CCC;
+  border-radius: 2px;
+}
+
+/**
+ * touch
+ */
+
+.djs-shape,
+.djs-connection {
+  touch-action: none;
+}
+
+.djs-segment-dragger,
+.djs-bendpoint {
+  display: none;
+}
+
+/**
+ * bendpoints
+ */
+.djs-segment-dragger .djs-visual {
+  fill: rgba(255, 255, 121, 0.2);
+  stroke-width: 1px;
+  stroke-opacity: 1;
+  stroke: rgba(255, 255, 121, 0.3);
+}
+
+.djs-bendpoint .djs-visual {
+  fill: rgba(255, 255, 121, 0.8);
+  stroke-width: 1px;
+  stroke-opacity: 0.5;
+  stroke: black;
+}
+
+.djs-segment-dragger:hover,
+.djs-bendpoints.hover .djs-segment-dragger,
+.djs-bendpoints.selected .djs-segment-dragger,
+.djs-bendpoint:hover,
+.djs-bendpoints.hover .djs-bendpoint,
+.djs-bendpoints.selected .djs-bendpoint {
+  display: block;
+}
+
+.djs-drag-active .djs-bendpoints * {
+  display: none;
+}
+
+.djs-bendpoints:not(.hover) .floating {
+  display: none;
+}
+
+.djs-segment-dragger:hover .djs-visual,
+.djs-segment-dragger.djs-dragging .djs-visual,
+.djs-bendpoint:hover .djs-visual,
+.djs-bendpoint.floating .djs-visual {
+  fill: yellow;
+  stroke-opacity: 0.5;
+  stroke: black;
+}
+
+.djs-bendpoint.floating .djs-hit {
+  pointer-events: none;
+}
+
+.djs-segment-dragger .djs-hit,
+.djs-bendpoint .djs-hit {
+  pointer-events: all;
+  fill: none;
+}
+
+.djs-segment-dragger.horizontal .djs-hit {
+  cursor: ns-resize;
+}
+
+.djs-segment-dragger.vertical .djs-hit {
+  cursor: ew-resize;
+}
+
+.djs-segment-dragger.djs-dragging .djs-hit {
+  pointer-events: none;
+}
+
+.djs-updating,
+.djs-updating > * {
+  pointer-events: none !important;
+}
+
+.djs-updating .djs-context-pad,
+.djs-updating .djs-outline,
+.djs-updating .djs-bendpoint,
+.connect-ok .djs-bendpoint,
+.connect-not-ok .djs-bendpoint,
+.drop-ok .djs-bendpoint,
+.drop-not-ok .djs-bendpoint {
+  display: none !important;
+}
+
+.djs-segment-dragger.djs-dragging,
+.djs-bendpoint.djs-dragging {
+  display: block;
+  opacity: 1.0;
+}
+
+.djs-segment-dragger.djs-dragging .djs-visual,
+.djs-bendpoint.djs-dragging .djs-visual {
+  fill: yellow;
+  stroke-opacity: 0.5;
+}
+
+
+/**
+ * tooltips
+ */
+.djs-tooltip-error {
+  font-size: 11px;
+  line-height: 18px;
+  text-align: left;
+
+  padding: 5px;
+
+  opacity: 0.7;
+}
+
+.djs-tooltip-error > * {
+  width: 160px;
+
+  background: rgb(252, 236, 240);
+  color: rgb(158, 76, 76);
+  padding: 3px 7px;
+  border-radius: 5px;
+  border-left: solid 5px rgb(174, 73, 73);
+}
+
+.djs-tooltip-error:hover {
+  opacity: 1;
+}
+
+
+/**
+ * search pad
+ */
+.djs-search-container {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  width: 25%;
+  min-width: 300px;
+  max-width: 400px;
+  z-index: 10;
+
+  font-size: 1.05em;
+  opacity: 0.9;
+  background: #FAFAFA;
+  border: solid 1px #CCC;
+  border-radius: 2px;
+}
+
+.djs-search-container:not(.open) {
+  display: none;
+}
+
+.djs-search-input input {
+  font-size: 1.05em;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+}
+
+.djs-search-input input:focus {
+  outline: none;
+  border-color: #52B415;
+}
+
+.djs-search-results {
+  position: relative;
+  overflow-y: auto;
+  max-height: 200px;
+}
+
+.djs-search-results:hover {
+  /*background: #fffdd7;*/
+  cursor: pointer;
+}
+
+.djs-search-result {
+  width: 100%;
+  padding: 6px 10px;
+  background: white;
+  border-bottom: solid 1px #AAA;
+  border-radius: 1px;
+}
+
+.djs-search-highlight {
+  color: black;
+}
+
+.djs-search-result-primary {
+  margin: 0 0 10px;
+}
+
+.djs-search-result-secondary {
+  font-family: monospace;
+  margin: 0;
+}
+
+.djs-search-result:hover {
+  background: #fdffd6;
+}
+
+.djs-search-result-selected {
+  background: #fffcb0;
+}
+
+.djs-search-result-selected:hover {
+  background: #f7f388;
+}
+
+.djs-search-overlay {
+  background: yellow;
+  opacity: 0.3;
+}
+
+/**
+ * hidden styles
+ */
+.djs-element-hidden,
+.djs-element-hidden .djs-hit,
+.djs-element-hidden .djs-outline,
+.djs-label-hidden .djs-label {
+  display: none !important;
+}

center/bpmnjs/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html >
+
+<head>
+  <meta charset="utf-8" />
+  <title>在线绘制流程</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="css/diagram-js.css" />
+  <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
+  <link rel="stylesheet" href="css/app.css" />
+
+  <style>
+    .item{
+      display: none;
+      cursor: pointer;
+    }
+    .bjs-powered-by {
+      display: none;
+    }
+    .buttons > li {
+      /* display: inline-block; */
+      margin-right: 10px;
+      height: 26px;
+      line-height: 26px;
+      float: left;
+    }
+    .buttons > li > a.btn  {
+      background: #00BCD4;
+      border: none;
+      outline: none;
+      padding: 0px 10px;
+      color: #fff;
+      display: inline-block;
+      opacity: 1;
+      height: 26px;
+      font-size: 14px;
+      line-height: 26px;
+    }
+    .label  {
+      background: #00BCD4;
+      border: none;
+      outline: none;
+      padding: 0px 10px;
+      color: #fff;
+      display: inline-block;
+      cursor: pointer;
+      opacity: 1;
+      height: 26px;
+      font-size: 14px;
+      line-height: 26px;
+    }
+    .sy-mask{width:100%;
+      height:100%;
+      position:fixed;
+      background:rgba(0,0,0,0.8);
+      left:0;top:0;z-index:1000;
+      display: none;
+    }
+    .sy-alert{
+      position:fixed;display:none;background:#fff;border-radius:5px;overflow:hidden;width:300px;max-width:90%;max-height:80%;left:0;right:0;margin:0 auto;z-index:9999}.sy-alert.animated{-webkit-animation-duration:.3s;animation-duration:.3s}.sy-alert .sy-title{height:45px;color:#333;line-height:45px;font-size:15px;border-bottom:1px solid #eee;padding:0 12px}.sy-alert .sy-content{padding:20px;text-align:center;font-size:14px;line-height:24px;color:#666;overflow-y:auto}.sy-alert .sy-btn{height:50%;border-top:1px solid #eee;overflow:hidden}.sy-alert .sy-btn button{float:left;border:0;color:#333;cursor:pointer;background:#fff;width:50%;line-height:45px;font-size:15px;text-align:center}.sy-alert .sy-btn button:nth-child(1){color:#888;border-right:1px solid #eee}.sy-alert.sy-alert-alert .sy-btn button{float:none;width:100%}.sy-alert.sy-alert-tips{text-align:center;width:150px;background:rgba(0,0,0,0.7)}.sy-alert.sy-alert-tips .sy-content{padding:8px;color:#fff;font-size:14px}.sy-alert.sy-alert-model .sy-content{text-align:left}.sy-alert.sy-alert-model .sy-content .form .input-item{margin-bottom:12px;position:relative}.sy-alert.sy-alert-model .sy-content .form .input-item input{display:block;position:relative;width:100%;border:1px solid #eee;padding:10px}.sy-alert.sy-alert-model .sy-content .form .input-item .getcode{border:0;top:0;right:0;position:absolute;background:0;line-height:37px;color:#f60;width:100px;text-align:center}
+  </style>
+</head>
+
+<body>
+<div class="content with-diagram" id="js-drop-zone">
+  <div class="message error">
+    <div class="note">
+      <p>无法显示bpms2.0</p>
+      <div class="details">
+        <span>错误详细信息</span>
+        <pre></pre>
+      </div>
+    </div>
+  </div>
+  <div class="canvas" id="js-canvas"></div>
+  <div class="properties-panel-parent" id="js-properties-panel"></div>
+</div>
+<ul class="buttons">
+  <li class="item upload">
+    <form id="form1" name="myForm" onsubmit="return false" method="post" enctype="multipart/form-data" title="上传文件">
+      <input type="file" name="uploadFile" id="uploadFile" accept=".bpmn" style="display: none">
+      <label class="label" for="uploadFile" >导入</label>
+    </form>
+  </li>
+  <li class="item download">
+    <a class="btn" href id="downloadBpmn">导出</a>
+  </li>
+  <li class="item submit">
+    <a class="btn" id="js-download-diagram">
+      部署
+    </a>
+  </li>
+</ul>
+<div class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert" >
+  <div class="sy-title">部署流程</div>
+  <div class="sy-content">
+        确认是否部署该流程
+<!--    <div class="form">-->
+<!--      <p class="input-item"><input id="deploymentName" type="text" placeholder="请输入流程名称"></p>-->
+<!--    </div>-->
+  </div>
+  <div class="sy-btn">
+    <button id="sure">确定</button>
+    <button class="cancel" >取消</button>
+  </div>
+</div>
+<div class="sy-mask cancel"></div>
+<script src="index.js"></script>
+</body>
+</html>

center/bpmnjs/vendor/bpmn-font/css/bpmn-codes.css

@@ -0,0 +1,108 @@
+
+.bpmn-icon-screw-wrench:before { content: '\e800'; } /* '' */
+.bpmn-icon-trash:before { content: '\e801'; } /* '' */
+.bpmn-icon-conditional-flow:before { content: '\e802'; } /* '' */
+.bpmn-icon-default-flow:before { content: '\e803'; } /* '' */
+.bpmn-icon-gateway-parallel:before { content: '\e804'; } /* '' */
+.bpmn-icon-intermediate-event-catch-cancel:before { content: '\e805'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-message:before { content: '\e806'; } /* '' */
+.bpmn-icon-start-event-compensation:before { content: '\e807'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-parallel-multiple:before { content: '\e808'; } /* '' */
+.bpmn-icon-loop-marker:before { content: '\e809'; } /* '' */
+.bpmn-icon-parallel-mi-marker:before { content: '\e80a'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-signal:before { content: '\e80b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-timer:before { content: '\e80c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-parallel-multiple:before { content: '\e80d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-compensation:before { content: '\e80e'; } /* '' */
+.bpmn-icon-gateway-xor:before { content: '\e80f'; } /* '' */
+.bpmn-icon-connection:before { content: '\e810'; } /* '' */
+.bpmn-icon-end-event-cancel:before { content: '\e811'; } /* '' */
+.bpmn-icon-intermediate-event-catch-condition:before { content: '\e812'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-parallel-multiple:before { content: '\e813'; } /* '' */
+.bpmn-icon-start-event-condition:before { content: '\e814'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-timer:before { content: '\e815'; } /* '' */
+.bpmn-icon-sequential-mi-marker:before { content: '\e816'; } /* '' */
+.bpmn-icon-user-task:before { content: '\e817'; } /* '' */
+.bpmn-icon-business-rule:before { content: '\e818'; } /* '' */
+.bpmn-icon-sub-process-marker:before { content: '\e819'; } /* '' */
+.bpmn-icon-start-event-parallel-multiple:before { content: '\e81a'; } /* '' */
+.bpmn-icon-start-event-error:before { content: '\e81b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-signal:before { content: '\e81c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-error:before { content: '\e81d'; } /* '' */
+.bpmn-icon-end-event-compensation:before { content: '\e81e'; } /* '' */
+.bpmn-icon-subprocess-collapsed:before { content: '\e81f'; } /* '' */
+.bpmn-icon-subprocess-expanded:before { content: '\e820'; } /* '' */
+.bpmn-icon-task:before { content: '\e821'; } /* '' */
+.bpmn-icon-end-event-error:before { content: '\e822'; } /* '' */
+.bpmn-icon-intermediate-event-catch-escalation:before { content: '\e823'; } /* '' */
+.bpmn-icon-intermediate-event-catch-timer:before { content: '\e824'; } /* '' */
+.bpmn-icon-start-event-escalation:before { content: '\e825'; } /* '' */
+.bpmn-icon-start-event-signal:before { content: '\e826'; } /* '' */
+.bpmn-icon-business-rule-task:before { content: '\e827'; } /* '' */
+.bpmn-icon-manual:before { content: '\e828'; } /* '' */
+.bpmn-icon-receive:before { content: '\e829'; } /* '' */
+.bpmn-icon-call-activity:before { content: '\e82a'; } /* '' */
+.bpmn-icon-start-event-timer:before { content: '\e82b'; } /* '' */
+.bpmn-icon-start-event-message:before { content: '\e82c'; } /* '' */
+.bpmn-icon-intermediate-event-none:before { content: '\e82d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-link:before { content: '\e82e'; } /* '' */
+.bpmn-icon-end-event-escalation:before { content: '\e82f'; } /* '' */
+.bpmn-icon-text-annotation:before { content: '\e830'; } /* '' */
+.bpmn-icon-bpmn-io:before { content: '\e831'; } /* '' */
+.bpmn-icon-gateway-complex:before { content: '\e832'; } /* '' */
+.bpmn-icon-gateway-eventbased:before { content: '\e833'; } /* '' */
+.bpmn-icon-gateway-none:before { content: '\e834'; } /* '' */
+.bpmn-icon-gateway-or:before { content: '\e835'; } /* '' */
+.bpmn-icon-end-event-terminate:before { content: '\e836'; } /* '' */
+.bpmn-icon-end-event-signal:before { content: '\e837'; } /* '' */
+.bpmn-icon-end-event-none:before { content: '\e838'; } /* '' */
+.bpmn-icon-end-event-multiple:before { content: '\e839'; } /* '' */
+.bpmn-icon-end-event-message:before { content: '\e83a'; } /* '' */
+.bpmn-icon-end-event-link:before { content: '\e83b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-message:before { content: '\e83c'; } /* '' */
+.bpmn-icon-intermediate-event-throw-compensation:before { content: '\e83d'; } /* '' */
+.bpmn-icon-start-event-multiple:before { content: '\e83e'; } /* '' */
+.bpmn-icon-script:before { content: '\e83f'; } /* '' */
+.bpmn-icon-manual-task:before { content: '\e840'; } /* '' */
+.bpmn-icon-send:before { content: '\e841'; } /* '' */
+.bpmn-icon-service:before { content: '\e842'; } /* '' */
+.bpmn-icon-receive-task:before { content: '\e843'; } /* '' */
+.bpmn-icon-user:before { content: '\e844'; } /* '' */
+.bpmn-icon-start-event-none:before { content: '\e845'; } /* '' */
+.bpmn-icon-intermediate-event-throw-escalation:before { content: '\e846'; } /* '' */
+.bpmn-icon-intermediate-event-catch-multiple:before { content: '\e847'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-escalation:before { content: '\e848'; } /* '' */
+.bpmn-icon-intermediate-event-throw-link:before { content: '\e849'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-condition:before { content: '\e84a'; } /* '' */
+.bpmn-icon-data-object:before { content: '\e84b'; } /* '' */
+.bpmn-icon-script-task:before { content: '\e84c'; } /* '' */
+.bpmn-icon-send-task:before { content: '\e84d'; } /* '' */
+.bpmn-icon-data-store:before { content: '\e84e'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-escalation:before { content: '\e84f'; } /* '' */
+.bpmn-icon-intermediate-event-throw-message:before { content: '\e850'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-multiple:before { content: '\e851'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-signal:before { content: '\e852'; } /* '' */
+.bpmn-icon-intermediate-event-throw-multiple:before { content: '\e853'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-message:before { content: '\e854'; } /* '' */
+.bpmn-icon-ad-hoc-marker:before { content: '\e855'; } /* '' */
+.bpmn-icon-service-task:before { content: '\e856'; } /* '' */
+.bpmn-icon-task-none:before { content: '\e857'; } /* '' */
+.bpmn-icon-compensation-marker:before { content: '\e858'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-multiple:before { content: '\e859'; } /* '' */
+.bpmn-icon-intermediate-event-throw-signal:before { content: '\e85a'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-condition:before { content: '\e85b'; } /* '' */
+.bpmn-icon-participant:before { content: '\e85c'; } /* '' */
+.bpmn-icon-event-subprocess-expanded:before { content: '\e85d'; } /* '' */
+.bpmn-icon-lane-insert-below:before { content: '\e85e'; } /* '' */
+.bpmn-icon-space-tool:before { content: '\e85f'; } /* '' */
+.bpmn-icon-connection-multi:before { content: '\e860'; } /* '' */
+.bpmn-icon-lane:before { content: '\e861'; } /* '' */
+.bpmn-icon-lasso-tool:before { content: '\e862'; } /* '' */
+.bpmn-icon-lane-insert-above:before { content: '\e863'; } /* '' */
+.bpmn-icon-lane-divide-three:before { content: '\e864'; } /* '' */
+.bpmn-icon-lane-divide-two:before { content: '\e865'; } /* '' */
+.bpmn-icon-data-input:before { content: '\e866'; } /* '' */
+.bpmn-icon-data-output:before { content: '\e867'; } /* '' */
+.bpmn-icon-hand-tool:before { content: '\e868'; } /* '' */
+.bpmn-icon-group:before { content: '\e869'; } /* '' */
+.bpmn-icon-transaction:before { content: '\e8c4'; } /* '' */

center/bpmnjs/vendor/bpmn-font/css/bpmn.css

@@ -0,0 +1,164 @@
+@font-face {
+  font-family: 'bpmn';
+  src: url('../font/bpmn.eot?26374340');
+  src: url('../font/bpmn.eot?26374340#iefix') format('embedded-opentype'),
+       url('../font/bpmn.woff2?26374340') format('woff2'),
+       url('../font/bpmn.woff?26374340') format('woff'),
+       url('../font/bpmn.ttf?26374340') format('truetype'),
+       url('../font/bpmn.svg?26374340#bpmn') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'bpmn';
+    src: url('../font/bpmn.svg?26374340#bpmn') format('svg');
+  }
+}
+*/
+
+ [class^="bpmn-icon-"]:before, [class*=" bpmn-icon-"]:before {
+  font-family: "bpmn";
+  font-style: normal;
+  font-weight: normal;
+  speak: never;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  /* margin-right: .2em; */
+  text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  /* margin-left: .2em; */
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.bpmn-icon-screw-wrench:before { content: '\e800'; } /* '' */
+.bpmn-icon-trash:before { content: '\e801'; } /* '' */
+.bpmn-icon-conditional-flow:before { content: '\e802'; } /* '' */
+.bpmn-icon-default-flow:before { content: '\e803'; } /* '' */
+.bpmn-icon-gateway-parallel:before { content: '\e804'; } /* '' */
+.bpmn-icon-intermediate-event-catch-cancel:before { content: '\e805'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-message:before { content: '\e806'; } /* '' */
+.bpmn-icon-start-event-compensation:before { content: '\e807'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-parallel-multiple:before { content: '\e808'; } /* '' */
+.bpmn-icon-loop-marker:before { content: '\e809'; } /* '' */
+.bpmn-icon-parallel-mi-marker:before { content: '\e80a'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-signal:before { content: '\e80b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-timer:before { content: '\e80c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-parallel-multiple:before { content: '\e80d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-compensation:before { content: '\e80e'; } /* '' */
+.bpmn-icon-gateway-xor:before { content: '\e80f'; } /* '' */
+.bpmn-icon-connection:before { content: '\e810'; } /* '' */
+.bpmn-icon-end-event-cancel:before { content: '\e811'; } /* '' */
+.bpmn-icon-intermediate-event-catch-condition:before { content: '\e812'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-parallel-multiple:before { content: '\e813'; } /* '' */
+.bpmn-icon-start-event-condition:before { content: '\e814'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-timer:before { content: '\e815'; } /* '' */
+.bpmn-icon-sequential-mi-marker:before { content: '\e816'; } /* '' */
+.bpmn-icon-user-task:before { content: '\e817'; } /* '' */
+.bpmn-icon-business-rule:before { content: '\e818'; } /* '' */
+.bpmn-icon-sub-process-marker:before { content: '\e819'; } /* '' */
+.bpmn-icon-start-event-parallel-multiple:before { content: '\e81a'; } /* '' */
+.bpmn-icon-start-event-error:before { content: '\e81b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-signal:before { content: '\e81c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-error:before { content: '\e81d'; } /* '' */
+.bpmn-icon-end-event-compensation:before { content: '\e81e'; } /* '' */
+.bpmn-icon-subprocess-collapsed:before { content: '\e81f'; } /* '' */
+.bpmn-icon-subprocess-expanded:before { content: '\e820'; } /* '' */
+.bpmn-icon-task:before { content: '\e821'; } /* '' */
+.bpmn-icon-end-event-error:before { content: '\e822'; } /* '' */
+.bpmn-icon-intermediate-event-catch-escalation:before { content: '\e823'; } /* '' */
+.bpmn-icon-intermediate-event-catch-timer:before { content: '\e824'; } /* '' */
+.bpmn-icon-start-event-escalation:before { content: '\e825'; } /* '' */
+.bpmn-icon-start-event-signal:before { content: '\e826'; } /* '' */
+.bpmn-icon-business-rule-task:before { content: '\e827'; } /* '' */
+.bpmn-icon-manual:before { content: '\e828'; } /* '' */
+.bpmn-icon-receive:before { content: '\e829'; } /* '' */
+.bpmn-icon-call-activity:before { content: '\e82a'; } /* '' */
+.bpmn-icon-start-event-timer:before { content: '\e82b'; } /* '' */
+.bpmn-icon-start-event-message:before { content: '\e82c'; } /* '' */
+.bpmn-icon-intermediate-event-none:before { content: '\e82d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-link:before { content: '\e82e'; } /* '' */
+.bpmn-icon-end-event-escalation:before { content: '\e82f'; } /* '' */
+.bpmn-icon-text-annotation:before { content: '\e830'; } /* '' */
+.bpmn-icon-bpmn-io:before { content: '\e831'; } /* '' */
+.bpmn-icon-gateway-complex:before { content: '\e832'; } /* '' */
+.bpmn-icon-gateway-eventbased:before { content: '\e833'; } /* '' */
+.bpmn-icon-gateway-none:before { content: '\e834'; } /* '' */
+.bpmn-icon-gateway-or:before { content: '\e835'; } /* '' */
+.bpmn-icon-end-event-terminate:before { content: '\e836'; } /* '' */
+.bpmn-icon-end-event-signal:before { content: '\e837'; } /* '' */
+.bpmn-icon-end-event-none:before { content: '\e838'; } /* '' */
+.bpmn-icon-end-event-multiple:before { content: '\e839'; } /* '' */
+.bpmn-icon-end-event-message:before { content: '\e83a'; } /* '' */
+.bpmn-icon-end-event-link:before { content: '\e83b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-message:before { content: '\e83c'; } /* '' */
+.bpmn-icon-intermediate-event-throw-compensation:before { content: '\e83d'; } /* '' */
+.bpmn-icon-start-event-multiple:before { content: '\e83e'; } /* '' */
+.bpmn-icon-script:before { content: '\e83f'; } /* '' */
+.bpmn-icon-manual-task:before { content: '\e840'; } /* '' */
+.bpmn-icon-send:before { content: '\e841'; } /* '' */
+.bpmn-icon-service:before { content: '\e842'; } /* '' */
+.bpmn-icon-receive-task:before { content: '\e843'; } /* '' */
+.bpmn-icon-user:before { content: '\e844'; } /* '' */
+.bpmn-icon-start-event-none:before { content: '\e845'; } /* '' */
+.bpmn-icon-intermediate-event-throw-escalation:before { content: '\e846'; } /* '' */
+.bpmn-icon-intermediate-event-catch-multiple:before { content: '\e847'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-escalation:before { content: '\e848'; } /* '' */
+.bpmn-icon-intermediate-event-throw-link:before { content: '\e849'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-condition:before { content: '\e84a'; } /* '' */
+.bpmn-icon-data-object:before { content: '\e84b'; } /* '' */
+.bpmn-icon-script-task:before { content: '\e84c'; } /* '' */
+.bpmn-icon-send-task:before { content: '\e84d'; } /* '' */
+.bpmn-icon-data-store:before { content: '\e84e'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-escalation:before { content: '\e84f'; } /* '' */
+.bpmn-icon-intermediate-event-throw-message:before { content: '\e850'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-multiple:before { content: '\e851'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-signal:before { content: '\e852'; } /* '' */
+.bpmn-icon-intermediate-event-throw-multiple:before { content: '\e853'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-message:before { content: '\e854'; } /* '' */
+.bpmn-icon-ad-hoc-marker:before { content: '\e855'; } /* '' */
+.bpmn-icon-service-task:before { content: '\e856'; } /* '' */
+.bpmn-icon-task-none:before { content: '\e857'; } /* '' */
+.bpmn-icon-compensation-marker:before { content: '\e858'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-multiple:before { content: '\e859'; } /* '' */
+.bpmn-icon-intermediate-event-throw-signal:before { content: '\e85a'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-condition:before { content: '\e85b'; } /* '' */
+.bpmn-icon-participant:before { content: '\e85c'; } /* '' */
+.bpmn-icon-event-subprocess-expanded:before { content: '\e85d'; } /* '' */
+.bpmn-icon-lane-insert-below:before { content: '\e85e'; } /* '' */
+.bpmn-icon-space-tool:before { content: '\e85f'; } /* '' */
+.bpmn-icon-connection-multi:before { content: '\e860'; } /* '' */
+.bpmn-icon-lane:before { content: '\e861'; } /* '' */
+.bpmn-icon-lasso-tool:before { content: '\e862'; } /* '' */
+.bpmn-icon-lane-insert-above:before { content: '\e863'; } /* '' */
+.bpmn-icon-lane-divide-three:before { content: '\e864'; } /* '' */
+.bpmn-icon-lane-divide-two:before { content: '\e865'; } /* '' */
+.bpmn-icon-data-input:before { content: '\e866'; } /* '' */
+.bpmn-icon-data-output:before { content: '\e867'; } /* '' */
+.bpmn-icon-hand-tool:before { content: '\e868'; } /* '' */
+.bpmn-icon-group:before { content: '\e869'; } /* '' */
+.bpmn-icon-transaction:before { content: '\e8c4'; } /* '' */

center/bpmnjs/vendor/diagram-js.css

@@ -0,0 +1,820 @@
+/**
+ * color definitions
+ */
+.djs-container {
+  --blue-base-65: #4d90ff;
+  --blue-base-65-opacity-30: rgba(77, 144, 255, 0.3);
+  --blue-darken-48: #005df7;
+  --blue-darken-55: #1a70ff;
+  --blue-lighten-82: #a2c5ff;
+
+  --orange-base-60: #ffa533;
+  --orange-base-60-opacity-30: rgba(255, 165, 51, 0.3);
+  --orange-base-60-opacity-50: rgba(255, 165, 51, 0.5);
+  --orange-lighten-85: #ffddb3;
+
+  --red-base-62: #ff3d3d;
+  --red-base-62-opacity-10: rgba(255, 61, 61, 0.1);
+
+  --silver-darken-94: #efefef;
+
+  --color-000000: #000000;
+  --color-000000-opacity-05: rgba(0, 0, 0, 0.05);
+  --color-000000-opacity-10: rgba(0, 0, 0, 0.1);
+  --color-333333: #333333;
+  --color-666666: #666666;
+  --color-aaaaaa: #aaaaaa;
+  --color-cccccc: #cccccc;
+  --color-cdcdcd: #cdcdcd;
+  --color-dddddd: #dddddd;
+  --color-f6f6f6: #f6f6f6;
+  --color-fafafa: #fafafa;
+  --color-fefefe: #fefefe;
+  --color-ffffff: #ffffff;
+
+  --bendpoint-fill-color: var(--blue-base-65-opacity-30);
+  --bendpoint-stroke-color: var(--blue-base-65);
+
+  --context-pad-entry-background-color: var(--color-fefefe);
+  --context-pad-entry-hover-background-color: var(--silver-darken-94);
+ 
+  --element-dragger-color: var(--blue-base-65);
+  --element-hover-outline-fill-color: var(--blue-darken-48);
+  --element-selected-outline-stroke-color: var(--blue-base-65);
+
+  --lasso-fill-color: var(--color-000000-opacity-05);
+  --lasso-stroke-color: var(--color-000000);
+
+  --palette-entry-color: var(--color-333333);
+  --palette-entry-hover-color: var(--blue-darken-48);
+  --palette-entry-selected-color: var(--blue-base-65);
+  --palette-separator-color: var(--color-aaaaaa);
+  --palette-toggle-hover-background-color: var(--color-666666);
+  --palette-background-color: var(--color-fafafa);
+  --palette-border-color: var(--color-cccccc);
+
+  --popup-body-background-color: var(--color-fefefe);
+  --popup-header-entry-selected-color: var(--blue-base-65);
+  --popup-header-entry-selected-background-color: var(--color-000000-opacity-10);
+  --popup-header-separator-color: var(--color-dddddd);
+  --popup-background-color: var(--color-fafafa);
+  --popup-border-color: var(--color-cccccc);
+ 
+  --resizer-fill-color: var(--blue-base-65-opacity-30);
+  --resizer-stroke-color: var(--blue-base-65);
+
+  --search-container-background-color: var(--color-fafafa);
+  --search-container-border-color: var(--blue-darken-55);
+  --search-container-box-shadow-color: var(--blue-lighten-82);
+  --search-container-box-shadow-inset-color: var(--color-cdcdcd);
+  --search-input-border-color: var(--color-cccccc);
+  --search-result-border-color: var(--color-aaaaaa);
+  --search-result-highlight-color: var(--color-000000);
+  --search-result-selected-color: var(--blue-base-65-opacity-30);
+
+  --shape-attach-allowed-stroke-color: var(--blue-base-65);
+  --shape-connect-allowed-fill-color: var(--color-000000-opacity-05);
+  --shape-drop-allowed-fill-color: var(--color-000000-opacity-05);
+  --shape-drop-not-allowed-fill-color: var(--red-base-62-opacity-10);
+  --shape-resize-preview-stroke-color: var(--blue-base-65);
+
+  --snap-line-stroke-color: var(--blue-base-65-opacity-30);
+
+  --space-tool-crosshair-stroke-color: var(--color-000000);
+ 
+  --tooltip-error-background-color: var(--red-base-62-opacity-10);
+  --tooltip-error-border-color: var(--red-base-62);
+  --tooltip-error-color: var(--red-base-62);
+}
+
+/**
+ * outline styles
+ */
+
+.djs-outline {
+  fill: none;
+  visibility: hidden;
+}
+
+.djs-element.hover .djs-outline,
+.djs-element.selected .djs-outline {
+  visibility: visible;
+  shape-rendering: geometricPrecision;
+  stroke-dasharray: 3,3;
+}
+
+.djs-element.selected .djs-outline {
+  stroke: var(--element-selected-outline-stroke-color);
+  stroke-width: 1px;
+}
+
+.djs-element.hover .djs-outline {
+  stroke: var(--element-hover-outline-fill-color);
+  stroke-width: 1px;
+}
+
+.djs-shape.connect-ok .djs-visual > :nth-child(1) {
+  fill: var(--shape-connect-allowed-fill-color) !important;
+}
+
+.djs-shape.connect-not-ok .djs-visual > :nth-child(1),
+.djs-shape.drop-not-ok .djs-visual > :nth-child(1) {
+  fill: var(--shape-drop-not-allowed-fill-color) !important;
+}
+
+.djs-shape.new-parent .djs-visual > :nth-child(1) {
+  fill: var(--shape-drop-allowed-fill-color) !important;
+}
+
+svg.drop-not-ok {
+  background: var(--shape-drop-not-allowed-fill-color) !important;
+}
+
+svg.new-parent {
+  background: var(--shape-drop-allowed-fill-color) !important;
+}
+
+.djs-connection.connect-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-ok .djs-visual > :nth-child(1) {
+  stroke: var(--shape-drop-allowed-fill-color) !important;
+}
+
+.djs-connection.connect-not-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke: var(--shape-drop-not-allowed-fill-color) !important;
+}
+
+.drop-not-ok,
+.connect-not-ok {
+  stroke: var(--shape-attach-allowed-stroke-color) !important;
+  cursor: not-allowed;
+}
+
+.djs-element.attach-ok .djs-visual > :nth-child(1) {
+  stroke-width: 5px !important;
+}
+
+.djs-frame.connect-not-ok .djs-visual > :nth-child(1),
+.djs-frame.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke-width: 3px !important;
+  stroke: var(--shape-drop-not-allowed-fill-color) !important;
+  fill: none !important;
+}
+
+/**
+* Selection box style
+*
+*/
+.djs-lasso-overlay {
+  fill: var(--lasso-fill-color);
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: var(--lasso-stroke-color);
+
+  shape-rendering: geometricPrecision;
+  pointer-events: none;
+}
+
+/**
+ * Resize styles
+ */
+.djs-resize-overlay {
+  fill: none;
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: var(--shape-resize-preview-stroke-color);
+
+  pointer-events: none;
+}
+
+.djs-resizer-hit {
+  fill: none;
+  pointer-events: all;
+}
+
+.djs-resizer-visual {
+  fill: var(--resizer-fill-color);;
+  stroke-width: 1px;
+  stroke-opacity: 0.5;
+  stroke: var(--resizer-stroke-color);
+  shape-rendering: geometricprecision;
+}
+
+.djs-resizer:hover .djs-resizer-visual {
+  stroke: var(--resizer-stroke-color);
+  stroke-opacity: 1;
+}
+
+.djs-cursor-resize-ns,
+.djs-resizer-n,
+.djs-resizer-s {
+  cursor: ns-resize;
+}
+
+.djs-cursor-resize-ew,
+.djs-resizer-e,
+.djs-resizer-w {
+  cursor: ew-resize;
+}
+
+.djs-cursor-resize-nwse,
+.djs-resizer-nw,
+.djs-resizer-se {
+  cursor: nwse-resize;
+}
+
+.djs-cursor-resize-nesw,
+.djs-resizer-ne,
+.djs-resizer-sw {
+  cursor: nesw-resize;
+}
+
+.djs-shape.djs-resizing > .djs-outline {
+  visibility: hidden !important;
+}
+
+.djs-shape.djs-resizing > .djs-resizer {
+  visibility: hidden;
+}
+
+.djs-dragger > .djs-resizer {
+  visibility: hidden;
+}
+
+/**
+ * drag styles
+ */
+.djs-dragger * {
+  fill: none !important;
+  stroke: var(--element-dragger-color) !important;
+}
+
+.djs-dragger tspan,
+.djs-dragger text {
+  fill: var(--element-dragger-color) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragger circle,
+marker.djs-dragger path,
+marker.djs-dragger polygon,
+marker.djs-dragger polyline,
+marker.djs-dragger rect {
+  fill: var(--element-dragger-color) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragger text,
+marker.djs-dragger tspan {
+  fill: none !important;
+  stroke: var(--element-dragger-color) !important;
+}
+
+.djs-dragging {
+  opacity: 0.3;
+}
+
+.djs-dragging,
+.djs-dragging > * {
+  pointer-events: none !important;
+}
+
+.djs-dragging .djs-context-pad,
+.djs-dragging .djs-outline {
+  display: none !important;
+}
+
+/**
+ * no pointer events for visual
+ */
+.djs-visual,
+.djs-outline {
+  pointer-events: none;
+}
+
+.djs-element.attach-ok .djs-hit {
+  stroke-width: 60px !important;
+}
+
+/**
+ * all pointer events for hit shape
+ */
+.djs-element > .djs-hit-all {
+  pointer-events: all;
+}
+
+.djs-element > .djs-hit-stroke,
+.djs-element > .djs-hit-click-stroke {
+  pointer-events: stroke;
+}
+
+/**
+ * all pointer events for hit shape
+ */
+.djs-drag-active .djs-element > .djs-hit-click-stroke {
+  pointer-events: all;
+}
+
+/**
+ * shape / connection basic styles
+ */
+.djs-connection .djs-visual {
+  stroke-width: 2px;
+  fill: none;
+}
+
+.djs-cursor-grab {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
+
+.djs-cursor-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+.djs-cursor-crosshair {
+  cursor: crosshair;
+}
+
+.djs-cursor-move {
+  cursor: move;
+}
+
+.djs-cursor-resize-ns {
+  cursor: ns-resize;
+}
+
+.djs-cursor-resize-ew {
+  cursor: ew-resize;
+}
+
+
+/**
+ * snapping
+ */
+.djs-snap-line {
+  stroke: var(--snap-line-stroke-color);
+  stroke-linecap: round;
+  stroke-width: 2px;
+  pointer-events: none;
+}
+
+/**
+ * snapping
+ */
+.djs-crosshair {
+  stroke: var(--space-tool-crosshair-stroke-color);
+  stroke-linecap: round;
+  stroke-width: 1px;
+  pointer-events: none;
+  shape-rendering: crispEdges;
+  stroke-dasharray: 5, 5;
+}
+
+/**
+ * palette
+ */
+
+.djs-palette {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+
+  box-sizing: border-box;
+  width: 48px;
+}
+
+.djs-palette .separator {
+  margin: 0 5px;
+  padding-top: 5px;
+
+  border: none;
+  border-bottom: solid 1px var(--palette-separator-color);
+
+  clear: both;
+}
+
+.djs-palette .entry:before {
+  vertical-align: text-bottom;
+}
+
+.djs-palette .djs-palette-toggle {
+  cursor: pointer;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  color: var(--palette-entry-color);
+  font-size: 30px;
+
+  text-align: center;
+}
+
+.djs-palette .entry {
+  float: left;
+}
+
+.djs-palette .entry img {
+  max-width: 100%;
+}
+
+.djs-palette .djs-palette-entries:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.djs-palette .djs-palette-toggle:hover {
+  background: var(--palette-toggle-hover-background-color);
+}
+
+.djs-palette .entry:hover {
+  color: var(--palette-entry-hover-color);
+}
+
+.djs-palette .highlighted-entry {
+  color: var(--palette-entry-selected-color) !important;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  width: 46px;
+  height: 46px;
+  line-height: 46px;
+  cursor: default;
+}
+
+/**
+ * Palette open / two-column layout is controlled via
+ * classes on the palette. Events to hook into palette
+ * changed life-cycle are available in addition.
+ */
+.djs-palette.two-column.open {
+  width: 94px;
+}
+
+.djs-palette:not(.open) .djs-palette-entries {
+  display: none;
+}
+
+.djs-palette:not(.open) {
+  overflow: hidden;
+}
+
+.djs-palette.open .djs-palette-toggle {
+  display: none;
+}
+
+/**
+ * context-pad
+ */
+.djs-overlay-context-pad {
+  width: 72px;
+}
+
+.djs-context-pad {
+  position: absolute;
+  display: none;
+  pointer-events: none;
+}
+
+.djs-context-pad .entry {
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  display: inline-block;
+  font-size: 22px;
+  margin: 0 2px 2px 0;
+
+  border-radius: 3px;
+
+  cursor: default;
+
+  background-color: var(--context-pad-entry-background-color);
+  box-shadow: 0 0 2px 1px var(--context-pad-entry-background-color);
+  pointer-events: all;
+}
+
+.djs-context-pad .entry:before {
+  vertical-align: top;
+}
+
+.djs-context-pad .entry:hover {
+  background: var(--context-pad-entry-hover-background-color);
+}
+
+.djs-context-pad.open {
+  display: block;
+}
+
+/**
+ * popup styles
+ */
+.djs-popup .entry {
+  line-height: 20px;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/* larger font for prefixed icons */
+.djs-popup .entry:before {
+  vertical-align: middle;
+  font-size: 20px;
+}
+
+.djs-popup .entry > span {
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+.djs-popup .entry:hover,
+.djs-popup .entry.active:hover {
+  background: var(--popup-header-entry-selected-background-color);
+}
+
+.djs-popup .entry.disabled {
+  background: inherit;
+}
+
+.djs-popup .djs-popup-header .entry {
+  display: inline-block;
+  padding: 2px 3px 2px 3px;
+
+  border: solid 1px transparent;
+  border-radius: 3px;
+}
+
+.djs-popup .djs-popup-header .entry.active {
+  color: var(--popup-header-entry-selected-color);
+  border: solid 1px var(--popup-header-entry-selected-color);
+  background-color: var(--popup-header-entry-selected-background-color);
+}
+
+.djs-popup-body .entry {
+  padding: 4px 10px 4px 5px;
+}
+
+.djs-popup-body .entry > span {
+  margin-left: 5px;
+}
+
+.djs-popup-body {
+  background-color: var(--popup-body-background-color);
+}
+
+.djs-popup-header {
+  border-bottom: 1px solid var(--popup-header-separator-color);
+}
+
+.djs-popup-header .entry {
+  margin: 1px;
+  margin-left: 3px;
+}
+
+.djs-popup-header .entry:last-child {
+  margin-right: 3px;
+}
+
+/**
+ * popup / palette styles
+ */
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color);
+  border-radius: 2px;
+}
+
+.djs-popup {
+  background: var(--popup-background-color);
+  border: solid 1px var(--popup-border-color);
+  border-radius: 2px;
+}
+
+/**
+ * touch
+ */
+
+.djs-shape,
+.djs-connection {
+  touch-action: none;
+}
+
+.djs-segment-dragger,
+.djs-bendpoint {
+  display: none;
+}
+
+/**
+ * bendpoints
+ */
+.djs-segment-dragger .djs-visual {
+  display: none;
+
+  fill: var(--bendpoint-fill-color);
+  stroke: var(--bendpoint-stroke-color);
+  stroke-width: 1px;
+  stroke-opacity: 1;
+}
+
+.djs-segment-dragger:hover .djs-visual {
+  display: block;
+}
+
+.djs-bendpoint .djs-visual {
+  fill: var(--bendpoint-fill-color);
+  stroke: var(--bendpoint-stroke-color);
+  stroke-width: 1px;
+  stroke-opacity: 0.5;
+}
+
+.djs-segment-dragger:hover,
+.djs-bendpoints.hover .djs-segment-dragger,
+.djs-bendpoints.selected .djs-segment-dragger,
+.djs-bendpoint:hover,
+.djs-bendpoints.hover .djs-bendpoint,
+.djs-bendpoints.selected .djs-bendpoint {
+  display: block;
+}
+
+.djs-drag-active .djs-bendpoints * {
+  display: none;
+}
+
+.djs-bendpoints:not(.hover) .floating {
+  display: none;
+}
+
+.djs-segment-dragger:hover .djs-visual,
+.djs-segment-dragger.djs-dragging .djs-visual,
+.djs-bendpoint:hover .djs-visual,
+.djs-bendpoint.floating .djs-visual {
+  fill: var(--bendpoint-fill-color);
+  stroke: var(--bendpoint-stroke-color);
+  stroke-opacity: 1;
+}
+
+.djs-bendpoint.floating .djs-hit {
+  pointer-events: none;
+}
+
+.djs-segment-dragger .djs-hit,
+.djs-bendpoint .djs-hit {
+  fill: none;
+  pointer-events: all;
+}
+
+.djs-segment-dragger.horizontal .djs-hit {
+  cursor: ns-resize;
+}
+
+.djs-segment-dragger.vertical .djs-hit {
+  cursor: ew-resize;
+}
+
+.djs-segment-dragger.djs-dragging .djs-hit {
+  pointer-events: none;
+}
+
+.djs-updating,
+.djs-updating > * {
+  pointer-events: none !important;
+}
+
+.djs-updating .djs-context-pad,
+.djs-updating .djs-outline,
+.djs-updating .djs-bendpoint,
+.connect-ok .djs-bendpoint,
+.connect-not-ok .djs-bendpoint,
+.drop-ok .djs-bendpoint,
+.drop-not-ok .djs-bendpoint {
+  display: none !important;
+}
+
+.djs-segment-dragger.djs-dragging,
+.djs-bendpoint.djs-dragging {
+  display: block;
+  opacity: 1.0;
+}
+
+
+/**
+ * tooltips
+ */
+.djs-tooltip-error {
+  width: 160px;
+  padding: 6px;
+
+  background: var(--tooltip-error-background-color);
+  border: solid 1px var(--tooltip-error-border-color);
+  border-radius: 2px;
+  color: var(--tooltip-error-color);
+  font-size: 12px;
+  line-height: 16px;
+  
+  opacity: 0.75;
+}
+
+.djs-tooltip-error:hover {
+  opacity: 1;
+}
+
+
+/**
+ * search pad
+ */
+.djs-search-container {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  width: 25%;
+  min-width: 300px;
+  max-width: 400px;
+  z-index: 10;
+
+  font-size: 1.05em;
+  opacity: 0.9;
+  background: var(--search-container-background-color);
+  border: solid 1px var(--search-container-border-color);
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px var(--search-container-box-shadow-color), 0 0 0 1px var(--search-container-box-shadow-inset-color) inset;
+}
+
+.djs-search-container:not(.open) {
+  display: none;
+}
+
+.djs-search-input input {
+  font-size: 1.05em;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--search-input-border-color);
+}
+
+.djs-search-input input:focus {
+  outline: none;
+  border-color: var(--search-input-border-color);
+}
+
+.djs-search-results {
+  position: relative;
+  overflow-y: auto;
+  max-height: 200px;
+}
+
+.djs-search-results:hover {
+  cursor: pointer;
+}
+
+.djs-search-result {
+  width: 100%;
+  padding: 6px 10px;
+  background: white;
+  border-bottom: solid 1px var(--search-result-border-color);
+  border-radius: 1px;
+}
+
+.djs-search-highlight {
+  color: var(--search-result-highlight-color);
+}
+
+.djs-search-result-primary {
+  margin: 0 0 10px;
+}
+
+.djs-search-result-secondary {
+  font-family: monospace;
+  margin: 0;
+}
+
+.djs-search-result:hover {
+  background: var(--search-result-selected-color);
+}
+
+.djs-search-result-selected {
+  background: var(--search-result-selected-color);
+}
+
+.djs-search-result-selected:hover {
+  background: var(--search-result-selected-color);
+}
+
+.djs-search-overlay {
+  background: var(--search-result-selected-color);
+}
+
+/**
+ * hidden styles
+ */
+.djs-element-hidden,
+.djs-element-hidden .djs-hit,
+.djs-element-hidden .djs-outline,
+.djs-label-hidden .djs-label {
+  display: none !important;
+}

center/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

center/static/css/chunk-345dd7f2.9183fc08.css

@@ -0,0 +1 @@
+.errPage-container[data-v-f2e02586]{width:800px;max-width:100%;margin:100px auto}.errPage-container .pan-back-btn[data-v-f2e02586]{background:#008489;color:#fff;border:none!important}.errPage-container .pan-gif[data-v-f2e02586]{margin:0 auto;display:block}.errPage-container .pan-img[data-v-f2e02586]{display:block;margin:0 auto;width:100%}.errPage-container .text-jumbo[data-v-f2e02586]{font-size:60px;font-weight:700;color:#484848}.errPage-container .list-unstyled[data-v-f2e02586]{font-size:14px}.errPage-container .list-unstyled li[data-v-f2e02586]{padding-bottom:5px}.errPage-container .list-unstyled a[data-v-f2e02586]{color:#008489;text-decoration:none}.errPage-container .list-unstyled a[data-v-f2e02586]:hover{text-decoration:underline}

center/static/js/chunk-2d0f012d.1bde8e38.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0f012d"],{"9b8f":function(e,r,n){"use strict";n.r(r);n("ac1f"),n("5319");var t,u,a={created:function(){var e=this.$route,r=e.params,n=e.query,t=r.path;this.$router.replace({path:"/"+t,query:n})},render:function(e){return e()}},c=a,o=n("2877"),p=Object(o["a"])(c,t,u,!1,null,null,null);r["default"]=p.exports}}]);

center/static/js/chunk-345dd7f2.8421ed82.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-345dd7f2"],{c0ed:function(t,e,c){},cc6c:function(t,e,c){t.exports=c.p+"static/img/401.089007e7.gif"},ec55:function(t,e,c){"use strict";c.r(e);var s=function(){var t=this,e=t.$createElement,c=t._self._c||e;return c("div",{staticClass:"errPage-container"},[c("el-button",{staticClass:"pan-back-btn",attrs:{icon:"arrow-left"},on:{click:t.back}},[t._v(" 返回 ")]),c("el-row",[c("el-col",{attrs:{span:12}},[c("h1",{staticClass:"text-jumbo text-ginormous"},[t._v(" 401错误! ")]),c("h2",[t._v("您没有访问权限！")]),c("h6",[t._v("对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面")]),c("ul",{staticClass:"list-unstyled"},[c("li",{staticClass:"link-type"},[c("router-link",{attrs:{to:"/"}},[t._v(" 回首页 ")])],1)])]),c("el-col",{attrs:{span:12}},[c("img",{attrs:{src:t.errGif,width:"313",height:"428",alt:"Girl has dropped her ice cream."}})])],1)],1)},a=[],n=c("cc6c"),r=c.n(n),i={name:"Page401",data:function(){return{errGif:r.a+"?"+ +new Date}},methods:{back:function(){this.$route.query.noGoBack?this.$router.push({path:"/"}):this.$router.go(-1)}}},o=i,l=(c("ecf6"),c("2877")),u=Object(l["a"])(o,s,a,!1,null,"f2e02586",null);e["default"]=u.exports},ecf6:function(t,e,c){"use strict";c("c0ed")}}]);

center/static/js/chunk-a630bf16.d20e773a.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-a630bf16"],{1715:function(t,s,i){"use strict";i("7482")},"26fc":function(t,s,i){t.exports=i.p+"static/img/404_cloud.0f4bc32b.png"},2754:function(t,s,i){"use strict";i.r(s);var a=function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"wscn-http404-container"},[i("div",{staticClass:"wscn-http404"},[t._m(0),i("div",{staticClass:"bullshit"},[i("div",{staticClass:"bullshit__oops"},[t._v(" 404错误! ")]),i("div",{staticClass:"bullshit__headline"},[t._v(" "+t._s(t.message)+" ")]),i("div",{staticClass:"bullshit__info"},[t._v(" 对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。 ")]),i("router-link",{staticClass:"bullshit__return-home",attrs:{to:"/Middleware/bpmn/index"}},[t._v(" 返回首页 ")])],1)])])},c=[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"pic-404"},[a("img",{staticClass:"pic-404__parent",attrs:{src:i("a36b"),alt:"404"}}),a("img",{staticClass:"pic-404__child left",attrs:{src:i("26fc"),alt:"404"}}),a("img",{staticClass:"pic-404__child mid",attrs:{src:i("26fc"),alt:"404"}}),a("img",{staticClass:"pic-404__child right",attrs:{src:i("26fc"),alt:"404"}})])}],l={name:"Page404",computed:{message:function(){return"找不到网页！"}}},n=l,e=(i("1715"),i("2877")),r=Object(e["a"])(n,a,c,!1,null,"54917dc8",null);s["default"]=r.exports},7482:function(t,s,i){},a36b:function(t,s,i){t.exports=i.p+"static/img/404.a57b6f31.png"}}]);

package.json

@@ -60,6 +60,7 @@
     "sortablejs": "1.8.4",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
+    "vue-cron": "^1.0.9",
     "vue-cropper": "0.4.9",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",

src/api/business/Middleware/bpmn.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 // 流程图
 
-// 流程节点信息
+// 流程图节点信息
 export function getBpmnZkNodeList(data) { //记录查询
     return request({
         url: "/zkNode/list",
@@ -24,14 +24,14 @@ export function addBpmnZkNode(data) { //节点新增
         data: data
     })
 }
-export function updataBpmnZkNode(data) {//节点修改
+export function updataBpmnZkNode(data) { //节点修改
     return request({
         url: "/zkSystemDoc",
         method: 'put',
         data: data
     })
 }
-
+// zkHiTask/page
 
 // 节点-流程关联
 
@@ -75,7 +75,7 @@ export function addBpmnZkReProcdef(data) { //新增
         data: data
     })
 }
-export function updataBpmnZkReProcdef(data) {//修改
+export function updataBpmnZkReProcdef(data) { //修改
     return request({
         url: "/zkReProcdef/",
         method: 'put',
@@ -90,6 +90,49 @@ export function delBpmnZkReProcdef(data) {
 }
 
 
+//历史流程定义执行记录
+export function zkHiExecutionPage(data) { //记录查询
+    return request({
+        url: "/zkHiExecution/page",
+        method: 'get',
+        params: data
+    })
+}
+// 历史任务执行记录
+export function zkHiTaskPage(data) { //记录查询
+    return request({
+        url: "/zkHiTask/page",
+        method: 'get',
+        params: data
+    })
+}
+
+
+
+//立即执行
+export function zkReProcdefRun(data) { //新增
+    return request({
+        url: "/zkReProcdef/run",
+        method: 'post',
+        data: data
+    })
+}
+
+//单独修改运行状态
+export function zkReProcdefStatus(data) { //新增
+    return request({
+        url: "/zkReProcdef/updateStatus",
+        method: 'put',
+        data: data
+    })
+}
+
+
+
+
+
+
+
 
 
 

src/components/Breadcrumb/index.vue

@@ -37,7 +37,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
+        matched = [{ path: '/Middleware/bpmn/index', meta: { title: '首页' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

src/components/cron.vue

@@ -0,0 +1,164 @@
+<template lang="html">
+  <div class="cron" :val="value_">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="秒" name="s">
+        <second-and-minute v-model="sVal" lable="秒"></second-and-minute >
+      </el-tab-pane>
+      <el-tab-pane label="分" name="m">
+        <second-and-minute v-model="mVal" lable="分"></second-and-minute >
+      </el-tab-pane>
+      <el-tab-pane label="时" name="h">
+        <hour v-model="hVal" lable="时"></hour>
+      </el-tab-pane>
+      <el-tab-pane label="日" name="d">
+        <day v-model="dVal" lable="日"></day>
+      </el-tab-pane>
+      <el-tab-pane label="月" name="month">
+        <month v-model="monthVal" lable="月"></month>
+      </el-tab-pane>
+      <el-tab-pane label="周" name="week">
+        <week v-model="weekVal" lable="周"></week>
+      </el-tab-pane>
+      <!-- <el-tab-pane label="年" name="year">
+        <year v-model="yearVal" lable="年"></year>
+      </el-tab-pane> -->
+    </el-tabs>
+    <!-- table -->
+    <el-table
+       :data="tableData"
+       size="mini"
+       border
+       style="width: 100%;">
+       <el-table-column
+         prop="sVal"
+         label="秒"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="mVal"
+         label="分"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="hVal"
+         label="时"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="dVal"
+         label="日"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="monthVal"
+         label="月"
+         width="70">
+       </el-table-column>
+       <el-table-column
+         prop="weekVal"
+         label="周"
+         width="70">
+       </el-table-column>
+       <!-- <el-table-column
+         prop="yearVal"
+         label="年">
+       </el-table-column> -->
+     </el-table>
+  </div>
+</template>
+
+<script>
+import SecondAndMinute from './cron/secondAndMinute'
+import hour from './cron/hour'
+import day from './cron/day'
+import month from './cron/month'
+import week from './cron/week'
+// import year from './cron/year'
+export default {
+  props: {
+    value: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      //
+      activeName: 's',
+      sVal: '',
+      mVal: '',
+      hVal: '',
+      dVal: '',
+      monthVal: '',
+      weekVal: ''
+      // yearVal: ''
+    }
+  },
+  watch: {
+    'value' (a, b) {
+      this.updateVal()
+    }
+  },
+  computed: {
+    tableData () {
+      return [{
+        sVal: this.sVal,
+        mVal: this.mVal,
+        hVal: this.hVal,
+        dVal: this.dVal,
+        monthVal: this.monthVal,
+        weekVal: this.weekVal
+        // yearVal: this.yearVal
+      }]
+    },
+    value_ () {
+      if (!this.dVal && !this.weekVal) {
+        return ''
+      }
+      if (this.dVal === '?' && this.weekVal === '?') {
+        this.$message.error('日期与星期不可以同时为“不指定”')
+      }
+      if (this.dVal !== '?' && this.weekVal !== '?') {
+        this.$message.error('日期与星期必须有一个为“不指定”')
+      }
+      let v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal}`
+      //  ${this.yearVal}
+      if (v !== this.value) {
+        this.$emit('input', v)
+      }
+      return v
+    }
+  },
+  methods: {
+    updateVal () {
+      if (!this.value) {
+        return
+      }
+      let arrays = this.value.split(' ')
+      this.sVal = arrays[0]
+      this.mVal = arrays[1]
+      this.hVal = arrays[2]
+      this.dVal = arrays[3]
+      this.monthVal = arrays[4]
+      this.weekVal = arrays[5]
+      // this.yearVal = arrays[6]
+    }
+  },
+  created () {
+    this.updateVal()
+  },
+  components: {
+    SecondAndMinute, hour, day, month, week
+    // , year
+  }
+}
+</script>
+
+<style lang="css">
+.cron {
+  text-align: left;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
+}
+</style>

src/components/cron/day.vue

@@ -0,0 +1,160 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>每日</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>不指定</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>周期</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="1" :max="31" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">至</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="31" size="mini" style="width: 100px;"></el-input-number>
+      日
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>循环</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="1" :max="31" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">日开始，每</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="31" size="mini" style="width: 100px;"></el-input-number>
+      日执行一次
+    </div>
+    <div>
+      <el-radio v-model="type" label="8" size="mini" border>工作日</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">本月</span>
+      <el-input-number @change="type = '8'" v-model="work" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+      号，最近的工作日
+    </div>
+    <div>
+      <el-radio v-model="type" label="6" size="mini" border>本月最后一天</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>指定</el-radio>
+      <el-checkbox-group v-model="appoint">
+        <div  v-for="i in 4" :key="i" style="margin-left: 0px;  line-height: 15px;">
+          <el-checkbox @change="type = '4'"  v-for="j in 10" v-if="parseInt((i - 1) + '' + (j - 1)) < 32 && !(i === 1 && j === 1)" :key="j" :label="(i - 1) + '' + (j - 1)"></el-checkbox>
+        </div>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '?'
+    }
+  },
+  data () {
+    return {
+      type: '5', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_ () {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 周期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        case '7': // 指定周
+          result.push(`${this.week.start}#${this.week.end}`)
+          break
+        case '8': // 工作日
+          result.push(`${this.work}W`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      };
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value' (a, b) {
+      this.updateVal()
+    }
+  },
+  methods: {
+    updateVal () {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  },
+  created () {
+    this.updateVal()
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 0px;
+}
+</style>

src/components/cron/hour.vue

@@ -0,0 +1,142 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>每时</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>周期</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="0" :max="23" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">至</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="23" size="mini" style="width: 100px;"></el-input-number>
+      时
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>循环</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="0" :max="23" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">时开始，每</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="23" size="mini" style="width: 100px;"></el-input-number>
+      时执行一次
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>指定</el-radio>
+      <el-checkbox-group v-model="appoint">
+        <div  v-for="i in 3" :key="i" style="margin-left: 0px;  line-height: 15px;">
+          <el-checkbox @change="type = '4'"  v-for="j in 10" v-if="parseInt((i - 1) + '' + (j - 1)) < 24" :key="j" :label="(i - 1) + '' + (j - 1)"></el-checkbox>
+        </div>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    }
+  },
+  data () {
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_ () {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      };
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value' (a, b) {
+      this.updateVal()
+    }
+  },
+  methods: {
+    updateVal () {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  },
+  created () {
+    this.updateVal()
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 0px;
+}
+</style>

src/components/cron/month.vue

@@ -0,0 +1,143 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>每月</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>不指定</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>周期</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="1" :max="12" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">至</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="12" size="mini" style="width: 100px;"></el-input-number>
+      月
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>循环</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="1" :max="12" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">月开始，每</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="12" size="mini" style="width: 100px;"></el-input-number>
+      月执行一次
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>指定</el-radio>
+      <el-checkbox-group v-model="appoint" style="margin-left: 0px;  line-height: 15px;">
+          <el-checkbox @change="type = '4'"  v-for="i in 12" :key="i" :label="i"></el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    }
+  },
+  data () {
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_ () {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      };
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value' (a, b) {
+      this.updateVal()
+    }
+  },
+  methods: {
+    updateVal () {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  },
+  created () {
+    this.updateVal()
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 0px;
+}
+</style>

src/components/cron/secondAndMinute.vue

@@ -0,0 +1,153 @@
+<!-- 秒,分钟 -->
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>每{{lable}}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>周期</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="1" :max="59" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">至</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="59" size="mini" style="width: 100px;"></el-input-number>
+      {{lable}}
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>循环</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="0" :max="59" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">{{lable}}开始，每</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="59" size="mini" style="width: 100px;"></el-input-number>
+      {{lable}}执行一次
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>指定</el-radio>
+      <el-checkbox-group v-model="appoint">
+        <div  v-for="i in 6" :key="i" style="margin-left: 0px; line-height: 15px;">
+          <el-checkbox @change="type = '4'"  v-for="j in 10" :key="j" :label="(i - 1) + '' + (j - 1)"></el-checkbox>
+        </div>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    },
+    lable: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_ () {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      };
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value' (a, b) {
+      this.updateVal()
+    }
+  },
+  methods: {
+    updateVal () {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  },
+  created () {
+    this.updateVal()
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 4px;
+}
+.el-checkbox{
+  margin-left:0px !important;
+}
+/* .el-checkbox__label{
+  margin-left:2px !important;
+  line-height: 16px !important;
+} */
+</style>

src/components/cron/week.vue

@@ -0,0 +1,157 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>每周</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>不指定</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>周期</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从星期</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">至星期</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2" :max="7" size="mini" style="width: 100px;"></el-input-number>
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>循环</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从星期</span>
+      <el-input-number @change="type = '3'" v-model="loop.start" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">开始，每</span>
+      <el-input-number @change="type = '3'" v-model="loop.end" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+      天执行一次
+    </div>
+    <div>
+      <el-radio v-model="type" label="7" size="mini" border>指定周</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">本月第</span>
+      <el-input-number @change="type = '7'" v-model="week.start" :min="1" :max="4" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">周，星期</span>
+      <el-input-number @change="type = '7'" v-model="week.end" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+    </div>
+    <div>
+      <el-radio v-model="type" label="6" size="mini" border>本月最后一个</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">星期</span>
+      <el-input-number @change="type = '6'" v-model="last" :min="1" :max="7" size="mini" style="width: 100px;"></el-input-number>
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>指定</el-radio>
+      <el-checkbox-group v-model="appoint" style="margin-left: 0px;  line-height: 15px;">
+          <el-checkbox @change="type = '4'"  v-for="i in 7" :key="i" :label="i"></el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    }
+  },
+  data () {
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_ () {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        case '7': // 指定周
+          result.push(`${this.week.start}#${this.week.end}`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      };
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value' (a, b) {
+      this.updateVal()
+    }
+  },
+  methods: {
+    updateVal () {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  },
+  created () {
+    this.updateVal()
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 0px;
+}
+</style>

src/components/cron/year.vue

@@ -0,0 +1,130 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>每年</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>不指定</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>周期</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">从</span>
+      <el-input-number @change="type = '2'" v-model="cycle.start" :min="2000" size="mini" style="width: 100px;"></el-input-number>
+      <span style="margin-left: 5px; margin-right: 5px;">至</span>
+      <el-input-number @change="type = '2'" v-model="cycle.end" :min="2000"  size="mini" style="width: 100px;"></el-input-number>
+      年
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    }
+  },
+  data () {
+    let year = new Date().getFullYear()
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: year,
+        end: year
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_ () {
+      let result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      };
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value' (a, b) {
+      this.updateVal()
+    }
+  },
+  methods: {
+    updateVal () {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  },
+  created () {
+    this.updateVal()
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>

src/components/customBpmn/custom/CustomContextPadProvider.js

@@ -2,215 +2,215 @@ import store from "../../../store";
 import { assign } from "min-dash";
 
 export default function ContextPadProvider(
-  config,
-  injector,
-  eventBus,
-  contextPad,
-  modeling,
-  elementFactory,
-  connect,
-  create,
-  popupMenu,
-  canvas,
-  rules,
-  translate
+    config,
+    injector,
+    eventBus,
+    contextPad,
+    modeling,
+    elementFactory,
+    connect,
+    create,
+    popupMenu,
+    canvas,
+    rules,
+    translate
 ) {
-  this.modeling = modeling;
-  this.elementFactory = elementFactory;
-  this.connect = connect;
-  this.create = create;
-  this.translate = translate;
-  config = config || {};
-
-  if (config.autoPlace !== false) {
-    this.autoPlace = injector.get("autoPlace", false);
-  }
-
-  contextPad.registerProvider(this);
+    this.modeling = modeling;
+    this.elementFactory = elementFactory;
+    this.connect = connect;
+    this.create = create;
+    this.translate = translate;
+    config = config || {};
+
+    if (config.autoPlace !== false) {
+        this.autoPlace = injector.get("autoPlace", false);
+    }
+
+    contextPad.registerProvider(this);
 }
 
 ContextPadProvider.$inject = [
-  "config.contextPad",
-  "injector",
-  "eventBus",
-  "contextPad",
-  "modeling",
-  "elementFactory",
-  "connect",
-  "create",
-  "popupMenu",
-  "canvas",
-  "rules",
-  "translate"
+    "config.contextPad",
+    "injector",
+    "eventBus",
+    "contextPad",
+    "modeling",
+    "elementFactory",
+    "connect",
+    "create",
+    "popupMenu",
+    "canvas",
+    "rules",
+    "translate"
 ];
 
-ContextPadProvider.prototype.getContextPadEntries = function (element) {
-  const {
-    autoPlace,
-    create,
-    elementFactory,
-    translate,
-    modeling,
-    connect
-  } = this;
-
-  function appendAction(type, className, title, options) {
-    function appendStart(event, element) {
-      var shape = elementFactory.createShape(assign({ type: type }, options));
-      create.start(event, shape, {
-        source: element
-      });
+ContextPadProvider.prototype.getContextPadEntries = function(element) {
+    const {
+        autoPlace,
+        create,
+        elementFactory,
+        translate,
+        modeling,
+        connect
+    } = this;
+
+    function appendAction(type, className, title, options) {
+        function appendStart(event, element) {
+            var shape = elementFactory.createShape(assign({ type: type }, options));
+            create.start(event, shape, {
+                source: element
+            });
+        }
+
+        var append = autoPlace ?
+
+            function(event, element) {
+                var shape = elementFactory.createShape(
+                    assign({ type: type }, options)
+                );
+                autoPlace.append(element, shape);
+            } :
+            appendStart;
+
+        return {
+            group: "model",
+            className: className,
+            title: title,
+            action: {
+                dragstart: appendStart,
+                click: append
+            }
+        };
+    }
+
+    function startConnect(event, element) {
+        connect.start(event, element);
+    }
+
+    function removeElement(e) {
+        console.log(e)
+        modeling.removeElements([element]);
+    }
+
+    function clickElement(e) {
+        console.log(e)
+        store.commit("SETNODEINFO", element);
+        store.commit("TOGGLENODEVISIBLE", true);
+    }
+
+    var actions = {};
+
+    if (
+        element.type === "bpmn:UserTask" ||
+        element.type === "bpmn:ServiceTask" ||
+        element.type === "bpmn:ScriptTask" ||
+        element.type === "bpmn:StartEvent" ||
+        element.type === "bpmn:ExclusiveGateway" ||
+        element.type === "bpmn:ParallelGateway" ||
+        element.type === "bpmn:IntermediateCatchEvent" ||
+        element.type === "bpmn:IntermediateThrowEvent"
+    ) {
+        actions = {
+            // "append.user-task": appendAction(
+            //   "bpmn:UserTask",
+            //   "bpmn-icon-user-task",
+            //   "用户任务"
+            // ),
+            "append.servicetask": appendAction(
+                "bpmn:ServiceTask",
+                "bpmn-icon-service-task",
+                "服务任务"
+            ),
+            // "append.scripttask": appendAction(
+            //   "bpmn:ScriptTask",
+            //   "bpmn-icon-script-task",
+            //   "脚本任务"
+            // ),
+            // "append.exclusive-gateway": appendAction(
+            //   "bpmn:ExclusiveGateway",
+            //   "bpmn-icon-gateway-xor",
+            //   "并行"
+            // ),
+            // "append.parallel-gateway": appendAction(
+            //   "bpmn:ParallelGateway",
+            //   "bpmn-icon-gateway-parallel",
+            //   "并行网关"
+            // ),
+            // "append.timer-intermediate-event": appendAction(
+            //     "bpmn:IntermediateCatchEvent",
+            //     "bpmn-icon-intermediate-event-catch-timer",
+            //     translate("Append TimerIntermediateCatchEvent"), { eventDefinitionType: "bpmn:TimerEventDefinition" }
+            // ),
+            "append.end-event": appendAction(
+                "bpmn:EndEvent",
+                "bpmn-icon-end-event-none",
+                "结束"
+            ),
+            // connect: {
+            //     group: "edit",
+            //     className: "bpmn-icon-connection-multi",
+            //     title: translate("Connect using DataInputAssociation"),
+            //     action: {
+            //         click: startConnect,
+            //         dragstart: startConnect
+            //     }
+            // }
+        };
+    }
+
+    if (
+        element.type === "bpmn:UserTask" ||
+        element.type === "bpmn:ServiceTask" ||
+        element.type === "bpmn:ScriptTask" ||
+        element.type === "bpmn:SequenceFlow"
+    ) {
+        assign(actions, {
+            edit: {
+                group: "edit",
+                className: "bpmn-icon-business-rule",
+                title: translate("属性"),
+                action: {
+                    click: clickElement
+                }
+            }
+        });
+    }
+
+    if (element.type === "bpmn:Lane" || element.type === "bpmn:Participant") {
+        actions = {
+            "lane-insert-above": {
+                group: "lane-insert-above",
+                className: "bpmn-icon-lane-insert-above",
+                title: translate("Add Lane above"),
+                action: {
+                    click: function(event, element) {
+                        modeling.addLane(element, "top");
+                    }
+                }
+            },
+            "lane-insert-below": {
+                group: "lane-insert-below",
+                className: "bpmn-icon-lane-insert-below",
+                title: translate("Add Lane below"),
+                action: {
+                    click: function(event, element) {
+                        modeling.addLane(element, "bottom");
+                    }
+                }
+            }
+        };
     }
 
-    var append = autoPlace
-      ? function (event, element) {
-        var shape = elementFactory.createShape(
-          assign({ type: type }, options)
-        );
-        autoPlace.append(element, shape);
-      }
-      : appendStart;
-
-    return {
-      group: "model",
-      className: className,
-      title: title,
-      action: {
-        dragstart: appendStart,
-        click: append
-      }
-    };
-  }
-
-  function startConnect(event, element) {
-    connect.start(event, element);
-  }
-
-  function removeElement(e) {
-    console.log(e)
-    modeling.removeElements([element]);
-  }
-
-  function clickElement(e) {
-    console.log(e)
-    store.commit("SETNODEINFO", element);
-    store.commit("TOGGLENODEVISIBLE", true);
-  }
-
-  var actions = {};
-
-  if (
-    element.type === "bpmn:UserTask" ||
-    element.type === "bpmn:ServiceTask" ||
-    element.type === "bpmn:ScriptTask" ||
-    element.type === "bpmn:StartEvent" ||
-    element.type === "bpmn:ExclusiveGateway" ||
-    element.type === "bpmn:ParallelGateway" ||
-    element.type === "bpmn:IntermediateCatchEvent" ||
-    element.type === "bpmn:IntermediateThrowEvent"
-  ) {
-    actions = {
-      // "append.user-task": appendAction(
-      //   "bpmn:UserTask",
-      //   "bpmn-icon-user-task",
-      //   "用户任务"
-      // ),
-      "append.servicetask": appendAction(
-        "bpmn:ServiceTask",
-        "bpmn-icon-service-task",
-        "服务任务"
-      ),
-      // "append.scripttask": appendAction(
-      //   "bpmn:ScriptTask",
-      //   "bpmn-icon-script-task",
-      //   "脚本任务"
-      // ),
-      "append.exclusive-gateway": appendAction(
-        "bpmn:ExclusiveGateway",
-        "bpmn-icon-gateway-xor",
-        "并行"
-      ),
-      // "append.parallel-gateway": appendAction(
-      //   "bpmn:ParallelGateway",
-      //   "bpmn-icon-gateway-parallel",
-      //   "并行网关"
-      // ),
-      "append.timer-intermediate-event": appendAction(
-        "bpmn:IntermediateCatchEvent",
-        "bpmn-icon-intermediate-event-catch-timer",
-        translate("Append TimerIntermediateCatchEvent"),
-        { eventDefinitionType: "bpmn:TimerEventDefinition" }
-      ),
-      "append.end-event": appendAction(
-        "bpmn:EndEvent",
-        "bpmn-icon-end-event-none",
-        "结束"
-      ),
-      connect: {
-        group: "edit",
-        className: "bpmn-icon-connection-multi",
-        title: translate("Connect using DataInputAssociation"),
-        action: {
-          click: startConnect,
-          dragstart: startConnect
-        }
-      }
-    };
-  }
-
-  if (
-    element.type === "bpmn:UserTask" ||
-    element.type === "bpmn:ServiceTask" ||
-    element.type === "bpmn:ScriptTask" ||
-    element.type === "bpmn:SequenceFlow"
-  ) {
     assign(actions, {
-      edit: {
-        group: "edit",
-        className: "bpmn-icon-business-rule",
-        title: translate("属性"),
-        action: {
-          click: clickElement
+        delete: {
+            group: "edit",
+            className: "bpmn-icon-trash",
+            title: translate("移出"),
+            action: {
+                click: removeElement
+            }
         }
-      }
     });
-  }
-
-  if (element.type === "bpmn:Lane" || element.type === "bpmn:Participant") {
-    actions = {
-      "lane-insert-above": {
-        group: "lane-insert-above",
-        className: "bpmn-icon-lane-insert-above",
-        title: translate("Add Lane above"),
-        action: {
-          click: function (event, element) {
-            modeling.addLane(element, "top");
-          }
-        }
-      },
-      "lane-insert-below": {
-        group: "lane-insert-below",
-        className: "bpmn-icon-lane-insert-below",
-        title: translate("Add Lane below"),
-        action: {
-          click: function (event, element) {
-            modeling.addLane(element, "bottom");
-          }
-        }
-      }
-    };
-  }
-
-  assign(actions, {
-    delete: {
-      group: "edit",
-      className: "bpmn-icon-trash",
-      title: translate("Remove"),
-      action: {
-        click: removeElement
-      }
-    }
-  });
 
-  return actions;
+    return actions;
 };

src/components/customBpmn/custom/CustomPalette.js

@@ -1,39 +1,7 @@
 import { assign } from "min-dash";
 
 export default function PaletteProvider(
-  palette,
-  create,
-  elementFactory,
-  handTool,
-  lassoTool,
-  spaceTool,
-  globalConnect,
-  translate
-) {
-  this.create = create;
-  this.elementFactory = elementFactory;
-  this.handTool = handTool;
-  this.lassoTool = lassoTool;
-  this.spaceTool = spaceTool;
-  this.globalConnect = globalConnect;
-  this.translate = translate;
-
-  palette.registerProvider(this);
-}
-
-PaletteProvider.$inject = [
-  "palette",
-  "create",
-  "elementFactory",
-  "handTool",
-  "lassoTool",
-  "spaceTool",
-  "globalConnect",
-  "translate"
-];
-
-PaletteProvider.prototype.getPaletteEntries = function (element) {
-  const {
+    palette,
     create,
     elementFactory,
     handTool,
@@ -41,144 +9,176 @@ PaletteProvider.prototype.getPaletteEntries = function (element) {
     spaceTool,
     globalConnect,
     translate
-  } = this;
+) {
+    this.create = create;
+    this.elementFactory = elementFactory;
+    this.handTool = handTool;
+    this.lassoTool = lassoTool;
+    this.spaceTool = spaceTool;
+    this.globalConnect = globalConnect;
+    this.translate = translate;
 
-  function createAction(type, group, className, title, options) {
-    function createListener(event) {
-      var shape = elementFactory.createShape(assign({ type: type }, options));
+    palette.registerProvider(this);
+}
 
-      if (options) {
-        shape.businessObject.di.isExpanded = options.isExpanded;
-      }
+PaletteProvider.$inject = [
+    "palette",
+    "create",
+    "elementFactory",
+    "handTool",
+    "lassoTool",
+    "spaceTool",
+    "globalConnect",
+    "translate"
+];
 
-      create.start(event, shape);
-    }
+PaletteProvider.prototype.getPaletteEntries = function(element) {
+    const {
+        create,
+        elementFactory,
+        handTool,
+        lassoTool,
+        spaceTool,
+        globalConnect,
+        translate
+    } = this;
 
-    var shortType = type.replace(/^bpmn:/, "");
+    function createAction(type, group, className, title, options) {
+        function createListener(event) {
+            var shape = elementFactory.createShape(assign({ type: type }, options));
 
-    return {
-      group: group,
-      className: className,
-      title: title || translate("Create {type}", { type: shortType }),
-      action: {
-        dragstart: createListener,
-        click: createListener
-      }
-    };
-  }
+            if (options) {
+                shape.businessObject.di.isExpanded = options.isExpanded;
+            }
 
-  return {
-    "hand-tool": {
-      group: "tools",
-      className: "bpmn-icon-hand-tool",
-      title: "Activate the hand tool",
-      action: {
-        click: function (event) {
-          handTool.activateHand(event);
-        }
-      }
-    },
-    "lasso-tool": {
-      group: "tools",
-      className: "bpmn-icon-lasso-tool",
-      title: "Activate the lasso tool",
-      action: {
-        click: function (event) {
-          lassoTool.activateSelection(event);
+            create.start(event, shape);
         }
-      }
-    },
-    "space-tool": {
-      group: "tools",
-      className: "bpmn-icon-space-tool",
-      title: "Activate the create/remove space tool",
-      action: {
-        click: function (event) {
-          spaceTool.activateSelection(event);
-        }
-      }
-    },
-    "global-connect-tool": {
-      group: "tools",
-      className: "bpmn-icon-connection-multi",
-      title: "Activate the global connect tool",
-      action: {
-        click: function (event) {
-          globalConnect.toggle(event);
-        }
-      }
-    },
-    "tool-separator": {
-      group: "tools",
-      separator: true
-    },
 
-    "create.start-event": createAction(
-      "bpmn:StartEvent",
-      "event",
-      "bpmn-icon-start-event-none",
-      "创建开始节点"
-    ),
-    "create.end-event": createAction(
-      "bpmn:EndEvent",
-      "event",
-      "bpmn-icon-end-event-none",
-      "创建结束节点"
-    ),
-    // "create.timer-intermediate-event": createAction(
-    //   "bpmn:IntermediateThrowEvent",
-    //   "event",
-    //   "bpmn-icon-intermediate-event-catch-timer",
-    //   "创建定时事件",
-    //   { eventDefinitionType: "bpmn:TimerEventDefinition" }
-    // ),
-    // "create.intermediate-catch-event": createAction(
-    //   "bpmn:IntermediateThrowEvent",
-    //   "event",
-    //   "bpmn-icon-intermediate-event-none",
-    //   "Create Intermediate/Boundary Event"
-    // ),
-    // "create.user-task": createAction(
-    //   "bpmn:UserTask",
-    //   "activity",
-    //   "bpmn-icon-user-task",
-    //   "创建用户任务"
-    // ),
-    "create.servicetask": createAction(
-      "bpmn:ServiceTask",
-      "activity",
-      "bpmn-icon-service-task",
-      "创建服务任务"
-    ),
-    // "create.scripttask": createAction(
-    //   "bpmn:ScriptTask",
-    //   "activity",
-    //   "bpmn-icon-script-task",
-    //   "创建脚本任务"
-    // ),
-    "create.exclusive-gateway": createAction(
-      "bpmn:ExclusiveGateway",
-      "gateway",
-      "bpmn-icon-gateway-xor",
-      "创建并行"
-    ),
-    // "create.parallel-gateway": createAction(
-    //   "bpmn:ParallelGateway",
-    //   "gateway",
-    //   "bpmn-icon-gateway-parallel",
-    //   "创建并行网关"
-    // ),
-    // "create.participant": createAction(
-    //   "bpmn:Participant",
-    //   "collaboration",
-    //   "bpmn-icon-participant",
-    //   "创建泳池/泳道"
-    // ),
-    // "create.group": createAction(
-    //   "bpmn:Group",
-    //   "collaboration",
-    //   "bpmn-icon-group",
-    //   "创建 Group"
-    // )
-  };
-};
+        var shortType = type.replace(/^bpmn:/, "");
+
+        return {
+            group: group,
+            className: className,
+            title: title || translate("Create {type}", { type: shortType }),
+            action: {
+                dragstart: createListener,
+                click: createListener
+            }
+        };
+    }
+
+    return {
+        // "hand-tool": {
+        //     group: "tools",
+        //     className: "bpmn-icon-hand-tool",
+        //     title: "Activate the hand tool",
+        //     action: {
+        //         click: function(event) {
+        //             handTool.activateHand(event);
+        //         }
+        //     }
+        // },
+        // "lasso-tool": {
+        //     group: "tools",
+        //     className: "bpmn-icon-lasso-tool",
+        //     title: "Activate the lasso tool",
+        //     action: {
+        //         click: function(event) {
+        //             lassoTool.activateSelection(event);
+        //         }
+        //     }
+        // },
+        // "space-tool": {
+        //     group: "tools",
+        //     className: "bpmn-icon-space-tool",
+        //     title: "Activate the create/remove space tool",
+        //     action: {
+        //         click: function(event) {
+        //             spaceTool.activateSelection(event);
+        //         }
+        //     }
+        // },
+        // "global-connect-tool": {
+        //     group: "tools",
+        //     className: "bpmn-icon-connection-multi",
+        //     title: "Activate the global connect tool",
+        //     action: {
+        //         click: function(event) {
+        //             globalConnect.toggle(event);
+        //         }
+        //     }
+        // },
+        // "tool-separator": {
+        //     group: "tools",
+        //     separator: true
+        // },
+
+        // "create.start-event": createAction(
+        //     "bpmn:StartEvent",
+        //     "event",
+        //     "bpmn-icon-start-event-none",
+        //     "创建开始节点"
+        // ),
+        // "create.end-event": createAction(
+        //     "bpmn:EndEvent",
+        //     "event",
+        //     "bpmn-icon-end-event-none",
+        //     "创建结束节点"
+        // ),
+        // "create.timer-intermediate-event": createAction(
+        //   "bpmn:IntermediateThrowEvent",
+        //   "event",
+        //   "bpmn-icon-intermediate-event-catch-timer",
+        //   "创建定时事件",
+        //   { eventDefinitionType: "bpmn:TimerEventDefinition" }
+        // ),
+        // "create.intermediate-catch-event": createAction(
+        //   "bpmn:IntermediateThrowEvent",
+        //   "event",
+        //   "bpmn-icon-intermediate-event-none",
+        //   "Create Intermediate/Boundary Event"
+        // ),
+        // "create.user-task": createAction(
+        //   "bpmn:UserTask",
+        //   "activity",
+        //   "bpmn-icon-user-task",
+        //   "创建用户任务"
+        // ),
+        // "create.servicetask": createAction(
+        //     "bpmn:ServiceTask",
+        //     "activity",
+        //     "bpmn-icon-service-task",
+        //     "创建服务任务"
+        // ),
+        // "create.scripttask": createAction(
+        //   "bpmn:ScriptTask",
+        //   "activity",
+        //   "bpmn-icon-script-task",
+        //   "创建脚本任务"
+        // ),
+        // "create.exclusive-gateway": createAction(
+        //     "bpmn:ExclusiveGateway",
+        //     "gateway",
+        //     "bpmn-icon-gateway-xor",
+        //     "创建并行"
+        // ),
+        // "create.parallel-gateway": createAction(
+        //   "bpmn:ParallelGateway",
+        //   "gateway",
+        //   "bpmn-icon-gateway-parallel",
+        //   "创建并行网关"
+        // ),
+        // "create.participant": createAction(
+        //   "bpmn:Participant",
+        //   "collaboration",
+        //   "bpmn-icon-participant",
+        //   "创建泳池/泳道"
+        // ),
+        // "create.group": createAction(
+        //   "bpmn:Group",
+        //   "collaboration",
+        //   "bpmn-icon-group",
+        //   "创建 Group"
+        // )
+    };
+};

src/mock/xmlStrPreview2.js

@@ -18,7 +18,7 @@ export var xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
     <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
       <bpmndi:BPMNEdge id="Flow_03eotay_di" bpmnElement="Flow_03eotay">
         <omgdi:waypoint x="410" y="120" />
-        <omgdi:waypoint x="652" y="120" />
+        <omgdi:waypoint x="982" y="120" />
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNEdge id="Flow_0bh3hrz_di" bpmnElement="Flow_0bh3hrz">
         <omgdi:waypoint x="188" y="120" />
@@ -34,7 +34,7 @@ export var xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
         <omgdc:Bounds x="310" y="80" width="100" height="80" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="Event_169etvv_di" bpmnElement="Event_169etvv">
-        <omgdc:Bounds x="652" y="102" width="36" height="36" />
+        <omgdc:Bounds x="982" y="102" width="36" height="36" />
       </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>

src/store/modules/bpmn.js

@@ -1,19 +1,23 @@
 const bpmn = {
     state: {
-      nodeVisible: false,
-      nodeInfo: {}
+        nodeVisible: false,
+        nodeInfo: {},
+        status: false,
     },
     mutations: {
-      TOGGLENODEVISIBLE: (state, visible) => {
-        state.nodeVisible = visible;
-      },
-      SETNODEINFO: (state, info) => {
-        console.log(state, info)
-        state.nodeInfo = info;
-      }
+        TOGGLENODEVISIBLE: (state, visible) => {
+            state.nodeVisible = visible;
+        },
+        SETNODEINFO: (state, info) => { //编辑框图标点击
+            //console.log('编辑框图标点击', state, info)
+            state.status = true
+            state.nodeInfo = info;
+        },
+        STATUSCHANGE(state) {
+            state.status = false
+        }
     },
     actions: {}
-  };
-  
-  export default bpmn;
-  
+};
+
+export default bpmn;

src/store/modules/permission.js

@@ -3,163 +3,179 @@ import { getRouters } from '@/api/menu'
 import Layout from '@/layout/index'
 
 const permission = {
-  state: {
-    routes: [],
-    addRoutes: []
-  },
-  mutations: {
-    SET_ROUTES: (state, routes) => {
-      state.addRoutes = routes
-      state.routes = constantRoutes.concat(routes)
-    }
-  },
-  actions: {
-    // 生成路由
-    GenerateRoutes({ commit }) {
-      return new Promise(resolve => {
-        // 向后端请求路由数据
-        getRouters().then(res => {
-          let arr = [
-            // {
-            //     path: 'business/Middleware/Subsystem',
-            //     component: () =>
-            //         import ('@/views/business/Middleware/Subsystem'),
-            //     hidden: true,
-            // },
-            {
-              component: "Layout",
-              hidden: false,
-              path: "/",
-              children:[
-                {
-                  component: "business/Middleware/subsystem",
-                  hidden: false,
-                  meta: {title: "子系统管理", icon: "cascader", noCache: true, link: null},
-                  name: "business/Middleware/subsystem",
-                  path: "business/Middleware/subsystem",
-                }
-              ]
-            },
-            {
-              component: "Layout",
-              hidden: false,
-              path: "/",
-              children:[
-                {
-                  component: "business/Middleware/functionalInterface",
-                  hidden: false,
-                  meta: {title: "功能接口管理", icon: "guide", noCache: true, link: null},
-                  name: "business/Middleware/functionalInterface",
-                  path: "business/Middleware/functionalInterface",
-                }
-              ]
-            },
-            {
-              component: "Layout",
-              hidden: false,
-              path: "/",
-              children:[
-                {
-                  component: "business/Middleware/hostEquipment",
-                  hidden: false,
-                  meta: {title: "主机设备管理", icon: "international", noCache: true, link: null},
-                  name: "business/Middleware/hostEquipment",
-                  path: "business/Middleware/hostEquipment",
-                }
-              ]
-            },
-            {
-              component: "Layout",
-              hidden: false,
-              path: "/",
-              children:[
-                {
-                  component: "business/Middleware/bpmn/index",
-                  hidden: false,
-                  meta: {title: "流程图", icon: "international", noCache: true, link: null},
-                  name: "business/Middleware/bpmn/index",
-                  path: "business/Middleware/bpmn/index",
-                }
-              ]
-            },
-            {
-              component: "Layout",
-              hidden: false,
-              path: "/",
-              children:[
-                {
-                  component: "business/Middleware/bpmn/customModeler",
-                  hidden: false,
-                  meta: {title: "流程图绘制", icon: "international", noCache: true, link: null},
-                  name: "business/Middleware/bpmn/customModeler",
-                  path: "business/Middleware/bpmn/customModeler",
-                }
-              ]
-            },
-            
-            // {
-            //   path: '/Middleware/',
-            //   component: Layout,
-            //   meta: {
-            //     icon: "system",
-            //     link: null,
-            //     noCache: false,
-            //     title: "中间件管理",
-            //     name: "Middleware",
-            //     path: "/business/Middleware",
-            //     redirect: "noRedirect"
-            //   },
-            //   children: [
-            //     {
-            //       path: 'Subsystem',
-            //       name: 'Subsystem',
-            //       component: () =>
-            //       import ('@/views/business/Middleware/Subsystem/index'),
-            //       meta: { title: '子系统管理', icon: 'home' }
-            //     },
-            //     {
-            //       path: 'functionalInterface',
-            //       name: 'functionalInterface',
-            //       component: () =>
-            //       import ('@/views/business/Middleware/functionalInterface/index'),
-            //       meta: { title: '功能接口管理', icon: 'home' }
-            //     }
-            //   ]
-            // }
-          ]
-          const accessedRoutes = filterAsyncRouter(arr)
-          //const accessedRoutes = filterAsyncRouter(res.data)
+    state: {
+        routes: [],
+        addRoutes: []
+    },
+    mutations: {
+        SET_ROUTES: (state, routes) => {
+            state.addRoutes = routes
+            state.routes = constantRoutes.concat(routes)
+        }
+    },
+    actions: {
+        // 生成路由
+        GenerateRoutes({ commit }) {
+            return new Promise(resolve => {
+                // 向后端请求路由数据
+                getRouters().then(res => {
+                    let arr = [
+                        // {
+                        //     path: 'business/Middleware/Subsystem',
+                        //     component: () =>
+                        //         import ('@/views/business/Middleware/Subsystem'),
+                        //     hidden: true,
+                        // },
+                        {
+                            component: "Layout",
+                            hidden: false,
+                            path: "/",
+                            children: [{
+                                component: "business/Middleware/subsystem",
+                                hidden: true,
+                                meta: { title: "子系统管理", icon: "cascader", noCache: true, link: null },
+                                name: "Middleware/subsystem",
+                                path: "Middleware/subsystem",
+                            }]
+                        },
+                        {
+                            component: "Layout",
+                            hidden: false,
+                            path: "/",
+                            children: [{
+                                component: "business/Middleware/functionalInterface",
+                                hidden: true,
+                                meta: { title: "功能接口管理", icon: "guide", noCache: true, link: null },
+                                name: "Middleware/functionalInterface",
+                                path: "Middleware/functionalInterface",
+                            }]
+                        },
+                        {
+                            component: "Layout",
+                            hidden: false,
+                            path: "/",
+                            children: [{
+                                component: "business/Middleware/hostEquipment",
+                                hidden: true,
+                                meta: { title: "主机设备管理", icon: "international", noCache: true, link: null },
+                                name: "Middleware/hostEquipment",
+                                path: "Middleware/hostEquipment",
+                            }]
+                        },
+                        {
+                            component: "Layout",
+                            hidden: false,
+                            path: "/",
+                            children: [{
+                                component: "business/Middleware/bpmn/index",
+                                hidden: false,
+                                meta: { title: "流程图", icon: "international", noCache: true, link: null },
+                                name: "Middleware/bpmn/index",
+                                path: "Middleware/bpmn/index",
+                            }]
+                        },
+                        {
+                            component: "Layout",
+                            hidden: false,
+                            path: "/",
+                            children: [{
+                                component: "business/Middleware/bpmn/customModeler",
+                                hidden: true,
+                                meta: { title: "流程图绘制", icon: "international", noCache: true, link: null },
+                                name: "Middleware/bpmn/customModeler",
+                                path: "Middleware/bpmn/customModeler",
+                            }]
+                        },
+                        {
+                            component: "Layout",
+                            hidden: false,
+                            path: "/",
+                            children: [{
+                                component: "business/Middleware/bpmn/executionRecord",
+                                hidden: false,
+                                meta: { title: "历史流程图执行记录", icon: "international", noCache: true, link: null },
+                                name: "Middleware/bpmn/executionRecord",
+                                path: "Middleware/bpmn/executionRecord",
+                            }]
+                        },
+                        {
+                            component: "Layout",
+                            hidden: false,
+                            path: "/",
+                            children: [{
+                                component: "business/Middleware/bpmn/executionLog",
+                                hidden: true,
+                                meta: { title: "历史流程图执行日志", icon: "international", noCache: true, link: null },
+                                name: "Middleware/bpmn/executionLog",
+                                path: "Middleware/bpmn/executionLog",
+                            }]
+                        },
+
+
+
 
-          accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
-          commit('SET_ROUTES', accessedRoutes)
-          resolve(accessedRoutes)
-        })
-      })
+                        // {
+                        //   path: '/Middleware/',
+                        //   component: Layout,
+                        //   meta: {
+                        //     icon: "system",
+                        //     link: null,
+                        //     noCache: false,
+                        //     title: "中间件管理",
+                        //     name: "Middleware",
+                        //     path: "/business/Middleware",
+                        //     redirect: "noRedirect"
+                        //   },
+                        //   children: [
+                        //     {
+                        //       path: 'Subsystem',
+                        //       name: 'Subsystem',
+                        //       component: () =>
+                        //       import ('@/views/business/Middleware/Subsystem/index'),
+                        //       meta: { title: '子系统管理', icon: 'home' }
+                        //     },
+                        //     {
+                        //       path: 'functionalInterface',
+                        //       name: 'functionalInterface',
+                        //       component: () =>
+                        //       import ('@/views/business/Middleware/functionalInterface/index'),
+                        //       meta: { title: '功能接口管理', icon: 'home' }
+                        //     }
+                        //   ]
+                        // }
+                    ]
+                    const accessedRoutes = filterAsyncRouter(arr)
+                        //const accessedRoutes = filterAsyncRouter(res.data)
+
+                    accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
+                    commit('SET_ROUTES', accessedRoutes)
+                    resolve(accessedRoutes)
+                })
+            })
+        }
     }
-  }
 }
 
 // 遍历后台传来的路由字符串，转换为组件对象
 function filterAsyncRouter(asyncRouterMap) {
-  return asyncRouterMap.filter(route => {
-    if (route.component) {
-      // Layout组件特殊处理
-      if (route.component === 'Layout') {
-        route.component = Layout
-      } else {
-        route.component = loadView(route.component)
-      }
-    }
-    if (route.children != null && route.children && route.children.length) {
-      route.children = filterAsyncRouter(route.children)
-    }
-    return true
-  })
+    return asyncRouterMap.filter(route => {
+        if (route.component) {
+            // Layout组件特殊处理
+            if (route.component === 'Layout') {
+                route.component = Layout
+            } else {
+                route.component = loadView(route.component)
+            }
+        }
+        if (route.children != null && route.children && route.children.length) {
+            route.children = filterAsyncRouter(route.children)
+        }
+        return true
+    })
 }
 
 export const loadView = (view) => { // 路由懒加载
-  console.log(view)
-  return (resolve) =>  require([`@/views/${view}`], resolve)
+    return (resolve) => require([`@/views/${view}`], resolve)
 }
 
-export default permission
+export default permission

src/views/business/Middleware/bpmn/customModeler copy.vue

@@ -0,0 +1,778 @@
+<template>
+    <div class="app-container">
+        <div class="containers">
+            <div class="canvas" ref="canvas"></div>
+            <ul class="buttons">
+                <li>
+                    <a href="javascript:" class="active" ref="saveXML" title="保存为bpmn"
+                    >保存为bpmn</a
+                    >
+                </li>
+                <li>
+                    <a href="javascript:" class="active" ref="saveSvg" title="保存为svg"
+                    >保存为svg</a
+                    >
+                </li>
+                <li>
+                    <a
+                    href="javascript:"
+                    class="active"
+                    @click="handlerUndo"
+                    title="撤销操作"
+                    >撤销</a
+                    >
+                </li>
+                <li>
+                    <a
+                    href="javascript:"
+                    class="active"
+                    @click="handlerRedo"
+                    title="恢复操作"
+                    >恢复</a
+                    >
+                </li>
+                <li>
+                    <a
+                    href="javascript:"
+                    class="active"
+                    @click="handlerZoom(0.1)"
+                    title="放大"
+                    >放大</a
+                    >
+                </li>
+                <li>
+                    <a
+                    href="javascript:"
+                    class="active"
+                    @click="handlerZoom(-0.1)"
+                    title="缩小"
+                    >缩小</a
+                    >
+                </li>
+                <li>
+                    <a
+                    href="javascript:"
+                    class="active"
+                    @click="handlerZoom(0)"
+                    title="还原"
+                    >还原</a
+                    >
+                </li>
+                <li>
+                    <el-button type="primary" @click="submitBpmn" v-if="!loading" title="提交流程图">提 交</el-button>
+                    <el-button :loading="loading" type="primary" @click="submitBpnm" v-else>提交中...</el-button>
+                </li>
+            </ul>
+
+        </div>
+         <!-- 添加或修改节点参数配置对话框 -->
+        <el-dialog  title="修改" :visible.sync="serviceTask" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false">
+            <el-form ref="form" :model="formData" :rules="rules" label-width="80px" >
+                <el-row :gutter="20">
+                    <el-col :span="24" >
+                        <el-form-item label="节点名称" prop="name" >
+                        <el-input v-model.trim="formData.name" placeholder="请输入节点名称"  @input="onInput" maxlength="30" show-word-limit  />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="执行" prop="nodeId">
+                        <treeselect v-model="formData.nodeId" :options="dataOptions" :show-count="true" placeholder="请选择执行场景" @change="selectOptions" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8" v-if="status">
+                        <el-form-item label="参数名称" prop="params1" >
+                        <el-input v-model.trim="formData.params1" placeholder="参数名称"  @input="onInput"  show-word-limit  />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8" v-if="status">
+                        <el-form-item label="参数类型" prop="params2" >
+                        <el-input v-model.trim="formData.params2" placeholder="参数类型"  @input="onInput"  show-word-limit  />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8" v-if="status">
+                        <el-form-item label="参数描述" prop="params3" >
+                        <el-input v-model.trim="formData.params3" placeholder="参数描述"  @input="onInput"  show-word-limit  />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
+                <el-button :loading="loading" type="primary" @click="submitForm" v-else>提交中...</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 添加或修改流程图参数配置对话框 -->
+        <el-dialog  title="修改" :visible.sync="openBpmn" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false">
+            <el-form ref="form2" :model="formData2" :rules="rules2" label-width="120px" >
+                <el-row :gutter="20">
+                    <el-col :span="24" >
+                        <el-form-item label="流程图名称" prop="name" >
+                        <el-input v-model.trim="formData2.name" placeholder="请输入流程图名称"  @input="onInput" maxlength="30" show-word-limit  />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24" >
+                        <el-form-item label="流程图描述" prop="procdefDescribe" >
+                        <el-input type="textarea" v-model.trim="formData2.procdefDescribe" placeholder="请输入流程图描述"  @input="onInput" maxlength="60" show-word-limit  />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitBpnmForm" v-if="!loading">确 定</el-button>
+                <el-button :loading="loading" type="primary" @click="submitBpnmForm" v-else>提交中...</el-button>
+                <el-button @click="cancelBpnm">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+// 引入相关的依赖
+import { xmlStr } from "@/mock/xmlStrPreview2";
+import { CustomModeler } from "@/components/customBpmn";
+import Treeselect from "@riophae/vue-treeselect";
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { getBpmnZkNodeList, getBpmnZkNodeTreeList, addBpmnZkNode, updataBpmnZkNode,
+getBpmnZkReNodeProcdefTreeList, getBpmnZkReNodeProcdefCheckedTreeList,
+getBpmnZkReProcdefList, addBpmnZkReProcdef, updataBpmnZkReProcdef, delBpmnZkReProcdef, getBpmnZkReNodeProcdefListByPorcedfId} from "@/api/business/Middleware/bpmn";
+export default {
+  name: "",
+  components: { Treeselect },
+  data() {
+    return {
+      bpmnModeler: null,
+      container: null,
+      canvas: null,
+      scale: 1,
+      userTask: false,
+      serviceTask: false,
+      scriptTask: false,
+      sequenceFlow: "",
+      formData: {
+        name: "",
+        type: "",
+        nodeId:undefined,
+        // order:undefined
+
+      },
+      //节点树选项
+      dataOptions: [],
+
+      data:undefined,
+      openBpmn:false,
+      // 节点表单校验
+      rules: {
+        name: [
+          { required: true, message: "节点名称不能为空", trigger: "blur" }
+        ],
+        // order: [
+        //   { required: true, message: "执行顺序不能为空", trigger: "blur" }
+        // ],
+        nodeId: [
+          { required: true, message: "场景不能为空", trigger: ["blur",'change'] }
+        ],
+      },
+      formData2: {
+        name: undefined,
+        procdefDescribe:undefined,
+      },
+      // 流程图表单校验
+      rules2: {
+        name: [
+          { required: true, message: "流程描述名称不能为空", trigger: "blur" }
+        ],
+        procdefDescribe: [
+          { required: true, message: "流程图描述不能为空", trigger: ["blur",'change'] }
+        ],
+      },
+      loading:false,
+      bpmnData:[], //待提交数据，
+      bpmnTitle:undefined,//待提交流程图名称
+      bpmnNodeId:undefined,// 弹框打开时节点Id
+      xml:undefined,
+      serviceTaskStatus:false,
+      checkedKeys:[],//流程图返回节点
+      bpmnDataFH:[],//流程图返回信息
+
+      status:false,
+      msg:[]
+    };
+  },
+  created(){
+
+
+  },
+  mounted() {
+    this.getNodeTree()
+
+    if(this.$route.query.name){
+      getBpmnZkReProcdefList({name:this.$route.query.name,current: 1,size: 20}).then(res=>{
+        this.bpmnDataFH = res.data.records[0]
+        this.init()
+      })
+      getBpmnZkReNodeProcdefListByPorcedfId({procdefId:this.$route.query.id}).then(res=>{
+        this.checkedKeys = res.data
+      })
+    }else{
+      this.init()
+    }
+  },
+
+  // 方法集合
+  methods: {
+    selectOptions(value){
+      console.log(value.params)
+    },
+      //强制el-input刷新
+    onInput(){
+        this.$forceUpdate();
+    },
+    init() {
+      // 获取到属性ref为“canvas”的dom节点
+      const canvas = this.$refs.canvas;
+      // 建模
+      this.bpmnModeler = new CustomModeler({
+        container: canvas,
+        additionalModules: [
+          {
+            // 禁止编辑label
+            labelEditingProvider: ["value", ""]
+          }
+        ]
+      });
+      this.createNewDiagram();
+
+    },
+    async createNewDiagram() {
+      let that = this
+      try {
+        //编辑或默认视图
+        if(that.bpmnDataFH.resourceName){
+          var result = await this.bpmnModeler.importXML(that.bpmnDataFH.resourceName);
+        }else{
+          var result = await this.bpmnModeler.importXML(xmlStr);
+        }
+
+        // 上传
+        console.log(result)
+        const { warnings } = result;
+        this.data = result.warnings
+        console.log(warnings);
+
+        this.success();
+      } catch (err) {
+        console.log(err.message, err.warnings);
+      }
+    },
+    success() {
+      this.addBpmnListener();
+      this.addModelerListener();
+      this.addEventBusListener();
+    },
+    addModelerListener() {
+      const bpmnjs = this.bpmnModeler;
+      const that = this;
+      // 这里我是用了一个forEach给modeler上添加要绑定的事件
+      const events = [
+        "shape.added",
+        "shape.move.end",
+        "shape.removed",
+        "connect.end",
+        "connect.move"
+      ];
+      events.forEach(function(event) {
+        that.bpmnModeler.on(event, e => {
+          console.log(1,event, e,that.data );
+          var elementRegistry = bpmnjs.get("elementRegistry");
+          var shape = e.element ? elementRegistry.get(e.element.id) : e.shape;
+          console.log(2,shape);
+        });
+      });
+    },
+    // 下载
+    async addBpmnListener() {
+      console.log(11111)
+      const that = this;
+      const downloadLink = this.$refs.saveXML;
+      console.log(downloadLink)
+      const downloadSvgLink = this.$refs.saveSvg;
+
+      async function opscoffee() {
+        try {
+          const result = await that.saveSVG();
+          const { svg } = result;
+
+          that.setEncoded(downloadSvgLink, "ops-coffee.svg", svg);
+        } catch (err) {
+          console.log(err);
+        }
+
+        try {
+          const result = await that.saveXML();
+          const { xml } = result;
+
+          that.setEncoded(downloadLink, "ops-coffee.bpmn", xml);
+        } catch (err) {
+          console.log(err);
+        }
+      }
+
+      opscoffee();
+      this.bpmnModeler.on("commandStack.changed", opscoffee);
+    },
+    async saveSVG(done) {
+      try {
+        const result = await this.bpmnModeler.saveSVG(done);
+        return result;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    async saveXML(done) {
+      try {
+        const result = await this.bpmnModeler.saveXML({ format: true }, done);
+        this.xml = result
+        // console.log(this.xml)
+        return result;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    setEncoded(link, name, data) {
+      const encodedData = encodeURIComponent(data);
+
+      if (data) {
+        link.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
+        link.download = name;
+      }
+    },
+    handlerRedo() {
+      this.bpmnModeler.get("commandStack").redo();
+    },
+    handlerUndo() {
+      this.bpmnModeler.get("commandStack").undo();
+    },
+    handlerZoom(radio) {
+      const newScale = !radio ? 1.0 : this.scale + radio;
+      this.bpmnModeler.get("canvas").zoom(newScale);
+
+      this.scale = newScale;
+    },
+    addEventBusListener() {
+      const that = this;
+      const eventBus = this.bpmnModeler.get("eventBus");
+      const modeling = this.bpmnModeler.get("modeling");
+      const elementRegistry = this.bpmnModeler.get("elementRegistry");
+
+      eventBus.on("element.click", function(e) {
+        // console.log(
+        //   "点击了element",
+        //   e.element.businessObject.id,
+        //   e.element.businessObject.$type,
+        //   e.element.businessObject.name,that.data
+        // );
+        e.element.businessObject.nodeId = that.formData.nodeId
+        // e.element.businessObject.order = that.formData.order
+        console.log(
+          "点击了element",
+          e,e.element.businessObject.name,
+          e.element.businessObject.nodeId
+        );
+
+        if (e.element.businessObject.$type == "bpmn:SequenceFlow") {
+          const sourceRef = e.element.businessObject.sourceRef;
+
+          if (sourceRef.$type == "bpmn:ExclusiveGateway") {
+            var targetElement = elementRegistry.get(sourceRef.id);
+
+            modeling.updateProperties(targetElement, {
+              default: e.element.businessObject
+            });
+          }
+        }
+      });
+    },
+    // 节点取消按钮
+    cancel() {
+        this.serviceTask = false
+        // this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.formData = {
+        name: undefined,
+        order: undefined,
+        deptId: undefined,
+        type: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 节点提交按钮 */
+    submitForm(row) {
+      let that = this
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+            this.msgSuccess("节点属性保存成功");
+            this.loading = false
+            let data = this.dataOptions
+            for(let a = 0; a<Object.keys(data).length; a++){
+                if(data[a].id == this.formData.nodeId){
+                    this.formData.param =  data[a].params
+                }
+                if(data[a].children){
+                    if(Object.keys(data[a].children).length>0){
+                        for(let b = 0; b<Object.keys(data[a].children).length; b++){
+                            if(data[a].children[b].id == this.formData.nodeId){
+                                this.formData.param = data[a].children[b].params
+                            }
+                            if(data[a].children[b].children){
+                                if(Object.keys(data[a].children[b].children).length>0){
+                                    for(let c = 0; c<Object.keys(data[a].children[b].children).length; c++){
+                                        if(data[a].children[b].children[c].id == this.formData.nodeId){
+                                            this.formData.param = data[a].children[b].children[c].params
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            this.formData.procedefKey = this.$store.state.bpmn.nodeInfo.businessObject.id
+            delete this.formData.type
+            let arr = JSON.parse(JSON.stringify(this.bpmnData))
+            if(arr.length>0){
+              let num = 0
+              for(let i =0;i<arr.length;i++){
+                if(this.$store.state.bpmn.nodeInfo.businessObject.id == arr[i].procedefKey){
+                  arr[i] = this.formData
+                }else{
+                  num +=1
+                  if(num == arr.length){
+                    this.bpmnData.push(this.formData)
+                  }
+                }
+              }
+            }else{
+              this.bpmnData.push(this.formData)
+            }
+            //异步避免需要二次关闭
+            setTimeout(()=>{
+              that.serviceTask = false
+            },1)
+        }
+      });
+    },
+    /** 流程图提交按钮 */
+    submitBpmn(){
+      // if(this.bpmnDataFH.name){
+      //   this.formData2.procdefDescribe = this.bpmnDataFH.procdefDescribe
+      //   this.formData2.name = this.bpmnDataFH.name
+      // }
+      // console.log(this.formData2)
+      // this.openBpmn = true
+      console.log(this.msg)
+      let arr = {}
+      arr.name = "流程图1"
+      arr.resourceName = "流程图1描述"
+      arr.nodes = []
+      for(let i=0;i<this.msg.length;i++){
+        arr.nodes[i] = {}
+        arr.nodes[i].nodeId = this.msg[i].nodeId
+        var arr1 = {}
+        arr1.id = null
+        arr1.deptIds = null
+        arr1.createTime = null
+        arr1.blurry = this.msg[i].params1
+        let info1 = JSON.stringify(arr1)
+        let info = '(' + info1 + 'zknode)'
+        arr.nodes[i].param = info
+      }
+      console.log(arr)
+      addBpmnZkReProcdef(arr).then(res=>{
+        this.msgSuccess("流程图保存成功");
+        this.loading = false
+        this.openBpmn = false
+        // this.$router.push('/business/Middleware/bpmn/index')
+      })
+    },
+    /** 流程图提交数据 */
+    submitBpnmForm(){
+
+      // this.$refs["form2"].validate(valid => {
+      //   if (valid) {
+      //       if(this.bpmnData.length<2 && this.checkedKeys.length<2){
+      //         this.msgError("流程图节点数据个数小于2");
+      //       }else{
+
+      //         if(this.checkedKeys.length>1){
+      //           let arr = {}
+      //           arr.name = this.formData2.name
+      //           arr.procdefDescribe = this.formData2.procdefDescribe
+      //           arr.procedefKey = this.formData2.procedefKey
+      //           arr.nodes = []
+      //           arr.params1 = this.checkedKeys[i].params1
+      //           arr.params2 = this.checkedKeys[i].params2
+      //           arr.params3 = this.checkedKeys[i].params3
+      //           for(let i = 0; i<this.checkedKeys.length;i++){
+      //             arr.nodes[i] = {}
+      //             arr.nodes[i].param = this.checkedKeys[i].param
+
+      //             arr.nodes[i].procedefKey = this.checkedKeys[i].procedefKey
+      //             arr.nodes[i].nodeId = this.checkedKeys[i].id
+      //             if(this.bpmnData.length>0){
+      //              for(let n=0;n<this.bpmnData.length;n++){
+      //                 if(this.bpmnData[n].procedefKey){
+      //                   if(this.bpmnData[n].procedefKey == arr.nodes[i].procedefKey){
+      //                     arr.nodes[i].param = this.bpmnData[n].param
+      //                     arr.nodes[i].nodeId = this.bpmnData[n].nodeId
+      //                   }
+      //                 }
+      //               }
+      //             }
+      //           }
+      //           arr.resourceName =  this.xml.xml;
+      //           arr.id = this.bpmnDataFH.id
+      //           console.log(arr)
+      //           updataBpmnZkReProcdef(arr).then(res=>{
+      //             this.msgSuccess("流程图修改成功");
+      //             this.loading = false
+      //             this.openBpmn = false
+      //             this.$router.push('/business/Middleware/bpmn/index')
+      //           })
+      //         }else if(this.bpmnData.length>1){
+      //           let arr = {}
+      //           arr.name = this.formData2.name
+      //           arr.procdefDescribe = this.formData2.procdefDescribe
+      //           arr.procedefKey = this.formData2.procedefKey
+      //           arr.nodes = this.bpmnData
+      //           arr.resourceName =  this.xml.xml;
+      //           console.log(arr)
+      //           addBpmnZkReProcdef(arr).then(res=>{
+      //             this.msgSuccess("流程图保存成功");
+      //             this.loading = false
+      //             this.openBpmn = false
+      //             this.$router.push('/business/Middleware/bpmn/index')
+      //           })
+      //         }
+
+
+      //       }
+      //   }
+      // });
+    },
+    /** 流程图取消按钮 */
+    cancelBpnm(){
+      this.openBpmn = false
+    },
+    getNodeTree(){
+        getBpmnZkNodeTreeList().then(res =>{
+            if(res.data){
+                for(let a = 0; a<Object.keys(res.data).length; a++){
+                    this.dataOptions[a] = []
+                    this.dataOptions[a].label = res.data[a].name
+                    this.dataOptions[a].id = res.data[a].id
+                    this.dataOptions[a].params = res.data[a].params
+                    if(res.data[a].children){
+                    if(Object.keys(res.data[a].children).length>0){
+                        this.dataOptions[a].children = []
+                        for(let b = 0; b<Object.keys(res.data[a].children).length; b++){
+                        this.dataOptions[a].children[b] = {}
+                        this.dataOptions[a].children[b].label = res.data[a].children[b].name
+                        this.dataOptions[a].children[b].id = res.data[a].children[b].id
+                        this.dataOptions[a].children[b].params = res.data[a].children[b].params
+
+                        if(res.data[a].children[b].children){
+                            if(Object.keys(res.data[a].children[b].children).length>0){
+                            this.dataOptions[a].children[b].children = []
+                            for(let c = 0; c<Object.keys(res.data[a].children[b].children).length; c++){
+                                this.dataOptions[a].children[b].children[c] = {}
+                                this.dataOptions[a].children[b].children[c].label = res.data[a].children[b].children[c].name
+                                this.dataOptions[a].children[b].children[c].id = res.data[a].children[b].children[c].id
+                                this.dataOptions[a].children[b].children[c].params= res.data[a].children[b].children[c].params
+                            }
+                            }
+                        }
+                        }
+                    }
+                    }
+                }
+                console.log(this.dataOptions)
+            }
+        })
+    },
+    currDeptChange(val) {
+      console.log('currDeptChange', val)
+      if(val == '1' || val == '2'){
+        this.status = true
+      }
+    },
+  },
+  // 计算属性
+  computed: {
+    task: {
+      get: function() {
+        const that = this;
+        const element = this.$store.state.bpmn.nodeInfo;
+        if (element.businessObject) {
+          // console.log(
+          //   element.businessObject.id,
+          //   element.businessObject.name,
+          //   element.businessObject.$type
+          // );
+
+        //   if (element.businessObject.$type === "bpmn:UserTask") {
+        //     that.formData.type = "用户任务1";
+        //     that.formData.name = element.businessObject.name;
+        //     that.userTask = this.$store.state.bpmn.nodeVisible;
+        //   }
+
+          if (element.businessObject.$type === "bpmn:ServiceTask") {
+            that.formData = {
+              name: "",
+              type: "",
+              nodeId:undefined,
+              params1:undefined,
+              params2:undefined,
+              params3:undefined,
+
+            }
+            that.formData.name = element.businessObject.name;
+            let data = that.bpmnData
+            that.formData.params1 = data.params1
+            that.formData.params2 = data.params2
+            that.formData.params3 = data.params3
+
+            if(that.checkedKeys.length>0){
+              for(let i = 0; i<that.checkedKeys.length;i++){
+                if(element.businessObject.id == that.checkedKeys[i].procedefKey){
+                  this.formData.nodeId = that.checkedKeys[i].id
+                }
+              }
+            }
+            if(data.length>0){
+              for(let i = 0; i<data.length;i++){
+                if(element.businessObject.id == data[i].procedefKey){
+                  this.formData.nodeId = data[i].nodeId
+                }
+              }
+            }
+            // if(that.serviceTaskStatus == false){
+            //   that.serviceTask = true
+            // }else{
+            //   that.serviceTask = false
+            // }
+            that.serviceTask = this.$store.state.bpmn.nodeVisible;
+
+            that.msg = data
+            console.log(that.msg,data,this.formData)
+          }
+
+        //   if (element.businessObject.$type === "bpmn:ScriptTask") {
+        //     that.formData.type = "脚本任务1";
+        //     that.formData.name = element.businessObject.name;
+        //     that.serviceTask = this.$store.state.bpmn.nodeVisible;
+        //   }
+
+        //   if (element.businessObject.$type === "bpmn:SequenceFlow") {
+        //     that.sequenceFlow = element.businessObject.name;
+        //     that.scriptTask = this.$store.state.bpmn.nodeVisible;
+        //   }
+        }
+
+        return false;
+      },
+      set: function(val) {
+        this.$store.state.bpmn.nodeVisible = val;
+      }
+    }
+  },
+  watch: {
+    'formData.nodeId': 'currDeptChange',
+    task(val) {},
+    userTask(val) {
+      this.$store.state.bpmn.nodeVisible = val;
+    },
+    serviceTask(val) {
+      this.$store.state.bpmn.nodeVisible = val;
+    },
+    scriptTask(val) {
+      this.$store.state.bpmn.nodeVisible = val;
+    },
+    sequenceFlow(val) {
+      const element = this.$store.state.bpmn.nodeInfo;
+      const modeling = this.bpmnModeler.get("modeling");
+      modeling.updateLabel(element, val);
+    },
+    "formData.name": {
+      handler(val, old) {
+        const element = this.$store.state.bpmn.nodeInfo;
+        const modeling = this.bpmnModeler.get("modeling");
+        modeling.updateLabel(element, val);
+      },
+      deep: true
+    },
+  }
+};
+</script>
+
+<style scoped>
+.containers {
+  background: white;
+  overflow: auto;
+  background-image: linear-gradient(
+      90deg,
+      rgba(220, 220, 220, 0.5) 6%,
+      transparent 0
+    ),
+    linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);
+  background-size: 12px 12px;
+  width: 100%;
+  height: 85vh;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+.panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 300px;
+}
+.buttons {
+  position: absolute;
+  left: 80px;
+  bottom: 20px;
+}
+.buttons li {
+  display: inline-block;
+  margin: 5px;
+}
+.buttons li a {
+  color: #999;
+  background: #eee;
+  cursor: not-allowed;
+  padding: 8px;
+  border: 1px solid #ccc;
+  text-decoration: none;
+}
+.buttons li a.active {
+  color: #333;
+  background: #fff;
+  cursor: pointer;
+}
+.demo-drawer-footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  background: #fff;
+}
+</style>

src/views/business/Middleware/bpmn/executionLog.vue

@@ -0,0 +1,221 @@
+<template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
+        <!-- <el-form-item label="流程图名称">
+          <el-input
+            v-model.trim="queryParams.name"
+            placeholder="请输入流程图名称"
+            clearable
+            size="small"
+            style="width: 160px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item> -->
+        <el-form-item label="历史流程id">
+          <el-input
+            v-model.trim="queryParams.hiExecutionId"
+            placeholder="请输入流程图id"
+            clearable
+            size="small"
+            style="width: 160px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="时间" label-width="60px">
+          <el-date-picker
+           style="margin-top:0px;"
+            v-model="dateRange"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            type="datetimerange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    <el-table v-loading="loading" :data="adminList"  height="calc(100vh - 30vh)">
+      <el-table-column label="历史流程id" align="center" prop="hiProcdefId"  show-overflow-tooltip />
+      <el-table-column label="任务名称" align="center" prop="taskName" show-overflow-tooltip />
+      <!-- <el-table-column label="参数" align="center" prop="taskParams" show-overflow-tooltip />
+      <el-table-column label="责任人" align="center" prop="assignee" show-overflow-tooltip />
+      <el-table-column label="been名称" align="center" prop="beenName" show-overflow-tooltip />
+      <el-table-column label="执行方法" align="center" prop=" beenMethod" show-overflow-tooltip /> -->
+      <el-table-column label="运行结果" align="center" prop="taskFlag" show-overflow-tooltip >
+        <template slot-scope="scope">
+          <span :style="scope.row.taskFlag == '0' ? 'color:#67C23A': 'color:#F56C6C' ">{{scope.row.taskFlag == "0" ? "成功" : "失败"}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="执行节点顺序" align="center" prop="nodeId" show-overflow-tooltip />
+      <el-table-column label="节点名称" align="center" prop="nodeDescribe" show-overflow-tooltip />
+      <el-table-column label="执行结果" align="center" prop="executeResult" show-overflow-tooltip >
+        <template slot-scope="scope">
+          <span :style="JSON.parse(scope.row.executeResult).status == 'SUCCESS' ? 'color:#67C23A': 'color:#F56C6C' ">{{JSON.parse(scope.row.executeResult).status == "SUCCESS" ? "成功" : JSON.parse(scope.row.executeResult).msg}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="开始时间" align="center" prop="createTime"  show-overflow-tooltip />
+      <el-table-column label="结束时间" align="center" prop="endTime"  show-overflow-tooltip />
+      <!-- <el-table-column label="执行日志" align="center">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-edit"
+            @click="getRecord(scope.row)"
+          >查看</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.current"
+      :limit.sync="queryParams.size"
+      @pagination="getList"
+    />
+    </div>
+</template>
+
+<script>
+// 引入相关的依赖
+import { zkHiTaskPage } from "@/api/business/Middleware/bpmn";
+import router from "../../../../router";
+export default {
+  name: "",
+  created() {},
+  mounted() {
+  },
+  data() {
+    return {
+      // 日期范围
+      dateRange: [],
+      // 遮罩层
+      loading: false,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 参数表格数据
+      adminList: [],
+
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 20,
+        status:undefined,
+        hiExecutionId:undefined
+      },
+      // 表单参数
+      form: {},
+      bpmnViewer: null,
+      container: null,
+      canvas: null,
+      xml:undefined,
+
+    };
+  },
+  created(){
+    this.getList()
+  },
+  // 方法集合
+  methods: {
+    /** 查询参数列表 */
+    getList() {
+      this.loading = false;
+      if(this.dateRange.length>0){
+        this.queryParams.startTime = this.dateRange[0]
+        this.queryParams.endTime = this.dateRange[1]
+      }
+      //跳转参数注入
+      let query = this.$route.query
+      if(JSON.stringify(this.$route.query) != "{}"){
+        this.queryParams.size = query.size
+        this.queryParams.current = query.current
+        this.queryParams.hiExecutionId = query.hiExecutionId
+      }
+      zkHiTaskPage(this.queryParams).then(response => {
+        this.adminList = response.data.records;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.current = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.status = undefined
+      this.queryParams.hiExecutionId = undefined
+      this.dateRange = []
+      this.queryParams.startTime = undefined
+      this.queryParams.endTime = undefined
+      if(JSON.stringify(this.$route.query) != '{}'){
+        this.$router.push({path:'/Middleware/bpmn/executionLog'})
+      }
+      this.handleQuery();
+    },
+  },
+
+};
+</script>
+
+<style scoped>
+
+.canvas {
+  width: 100%;
+  height: 400px;
+}
+.panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 300px;
+}
+.buttons {
+  position: absolute;
+  left: 80px;
+  bottom: 20px;
+}
+.buttons li {
+  display: inline-block;
+  margin: 5px;
+}
+.buttons li a {
+  color: #999;
+  background: #eee;
+  cursor: not-allowed;
+  padding: 8px;
+  border: 1px solid #ccc;
+  text-decoration: none;
+}
+.buttons li a.active {
+  color: #333;
+  background: #fff;
+  cursor: pointer;
+}
+.demo-drawer-footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  background: #fff;
+}
+.getBpmn{
+  cursor: pointer !important;
+  color:#1890ff;
+}
+</style>

src/views/business/Middleware/bpmn/executionRecord.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
+        <el-form-item label="流程图名称">
+          <el-input
+            v-model.trim="queryParams.name"
+            placeholder="请输入流程图名称"
+            clearable
+            size="small"
+            style="width: 160px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="流程图id">
+          <el-input
+            v-model.trim="queryParams.procdefId"
+            placeholder="请输入流程图id"
+            clearable
+            size="small"
+            style="width: 160px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="时间" label-width="60px">
+          <el-date-picker
+           style="margin-top:0px;"
+            v-model="dateRange"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            type="datetimerange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    <el-table v-loading="loading" :data="adminList"  height="calc(100vh - 30vh)">
+      <el-table-column label="id" align="center" prop="id"  show-overflow-tooltip />
+      <el-table-column label="流程id" align="center" prop="procdefId"  show-overflow-tooltip />
+      <el-table-column label="流程名称" align="center" prop="procdefName" show-overflow-tooltip />
+      <el-table-column label="开始时间" align="center" prop="createTime"  show-overflow-tooltip />
+      <el-table-column label="结束时间" align="center" prop="endTime"  show-overflow-tooltip />
+      <el-table-column label="执行日志" align="center">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-view"
+            @click="getRecord(scope.row)"
+          >查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.current"
+      :limit.sync="queryParams.size"
+      @pagination="getList"
+    />
+
+
+    </div>
+</template>
+
+<script>
+// 引入相关的依赖
+import { zkHiExecutionPage } from "@/api/business/Middleware/bpmn";
+import router from "../../../../router";
+export default {
+  name: "",
+  created() {},
+  mounted() {
+  },
+  data() {
+    return {
+      // 日期范围
+      dateRange: [],
+      // 遮罩层
+      loading: false,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 参数表格数据
+      adminList: [],
+
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 20,
+        name:undefined,
+        procdefId:undefined
+      },
+      // 表单参数
+      form: {},
+      bpmnViewer: null,
+      container: null,
+      canvas: null,
+      xml:undefined,
+
+    };
+  },
+  created(){
+    this.getList()
+  },
+  // 方法集合
+  methods: {
+    /** 查询参数列表 */
+    getList() {
+      this.loading = false;
+      if(this.dateRange.length>0){
+        this.queryParams.startTime = this.dateRange[0]
+        this.queryParams.endTime = this.dateRange[1]
+      }
+      //跳转参数注入
+      let query = this.$route.query
+      if(JSON.stringify(this.$route.query) != '{}'){
+        this.queryParams.size = query.size
+        this.queryParams.current = query.current
+        this.queryParams.procdefId = query.procdefId
+      }
+      zkHiExecutionPage(this.queryParams).then(response => {
+        this.adminList = response.data.records;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.current = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.name = undefined
+      this.queryParams.procdefId = undefined
+      this.dateRange = []
+      this.queryParams.startTime = undefined
+      this.queryParams.endTime = undefined
+      if(JSON.stringify(this.$route.query) != '{}'){
+        this.$router.push({path:'/Middleware/bpmn/executionRecord'})
+      }
+      this.handleQuery();
+    },
+    /** 跳转执行日志 */
+    getRecord(row){
+      router.push({path:'/Middleware/bpmn/executionLog',query:{'hiExecutionId':row.id,'size':20,'current':1}})
+    }
+  },
+
+};
+</script>
+
+<style scoped>
+
+.canvas {
+  width: 100%;
+  height: 400px;
+}
+.panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 300px;
+}
+.buttons {
+  position: absolute;
+  left: 80px;
+  bottom: 20px;
+}
+.buttons li {
+  display: inline-block;
+  margin: 5px;
+}
+.buttons li a {
+  color: #999;
+  background: #eee;
+  cursor: not-allowed;
+  padding: 8px;
+  border: 1px solid #ccc;
+  text-decoration: none;
+}
+.buttons li a.active {
+  color: #333;
+  background: #fff;
+  cursor: pointer;
+}
+.demo-drawer-footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  background: #fff;
+}
+.getBpmn{
+  cursor: pointer !important;
+  color:#1890ff;
+}
+</style>

src/views/business/Middleware/bpmn/index.vue

@@ -24,14 +24,50 @@
         </el-form-item>
       </el-form>
     <el-table v-loading="loading" :data="adminList"  height="calc(100vh - 30vh)">
+      <el-table-column label="流程id" align="center" prop="id" show-overflow-tooltip />
       <el-table-column label="流程图名称" align="center" prop="name" show-overflow-tooltip />
       <el-table-column label="描述" align="center" prop="procdefDescribe"  show-overflow-tooltip />
-      <el-table-column label="查看" align="center" prop="resourceName"  show-overflow-tooltip >
-         <template slot-scope="scope"><span class="getBpmn" @click="getBpmn(scope.row)">查看流程图</span></template>
+
+      <el-table-column label="运行状态" align="center" >
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.runStatus"
+            active-color="#13ce66"
+            inactive-color="#ccc"
+             @change="handleStatusChange(scope.row)"
+          ></el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程图" align="center" prop="resourceName"  show-overflow-tooltip >
+          <template slot-scope="scope">
+           <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="getBpmn(scope.row)"
+          >查看</el-button>
+          </template>
+      </el-table-column>
+      <el-table-column label="执行记录" align="center" prop="resourceName"  show-overflow-tooltip >
+         <template slot-scope="scope">
+           <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+             @click="getRecord(scope.row)"
+          >查看</el-button>
+          </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime"  show-overflow-tooltip />
-      <el-table-column label="操作" align="center">
+      <el-table-column label="操作" align="center" width="400">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-edit"
+            @click="zkReProcdefRun1(scope.row)"
+          >执行一次</el-button>
+
           <el-button
             size="mini"
             type="primary"
@@ -48,11 +84,11 @@
       </el-table-column>
     </el-table>
     <!-- 查看bpmn对话框 -->
-    <el-dialog  :title="title" :visible.sync="open" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false">
+    <el-dialog  :title="title" :visible.sync="open" width="800px" append-to-body :before-close="cancel" :close-on-click-modal="false">
       <div class="canvas" ref="canvas"></div>
     </el-dialog>
 
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -69,9 +105,10 @@
 // 引入相关的依赖
 import BpmnViewer from "bpmn-js/lib/Viewer";
 import { xmlStr } from "@/mock/xmlStrPreview2";
-import { getBpmnZkNodeList, getBpmnZkNodeTreeList, addBpmnZkNode, updataBpmnZkNode, 
-getBpmnZkReNodeProcdefTreeList, getBpmnZkReNodeProcdefCheckedTreeList, 
-getBpmnZkReProcdefList, addBpmnZkReProcdef, updataBpmnZkReProcdef, delBpmnZkReProcdef} from "@/api/business/Middleware/bpmn";
+import { getBpmnZkNodeList, getBpmnZkNodeTreeList, addBpmnZkNode, updataBpmnZkNode,
+getBpmnZkReNodeProcdefTreeList, getBpmnZkReNodeProcdefCheckedTreeList,
+getBpmnZkReProcdefList, addBpmnZkReProcdef, updataBpmnZkReProcdef, delBpmnZkReProcdef ,zkReProcdefRun,zkReProcdefStatus} from "@/api/business/Middleware/bpmn";
+import router from "../../../../router";
 export default {
   name: "",
   created() {},
@@ -89,7 +126,7 @@ export default {
       total: 0,
       // 参数表格数据
       adminList: [],
-      
+
       // 弹出层标题
       title: "查看流程图",
       // 是否显示弹出层
@@ -106,17 +143,21 @@ export default {
       container: null,
       canvas: null,
       xml:undefined,
-     
+      num:0
+
     };
   },
   created(){
     this.getList()
+  },
+  mounted:function (){
+
   },
   // 方法集合
   methods: {
      /** 修改按钮操作 */
     handleUpdate(row) {
-      this.$router.push({path:'/business/Middleware/bpmn/customModeler',query:{name:row.name,id:row.id}})
+      this.$router.push({path:'/Middleware/bpmn/customModeler',query:{name:row.name,id:row.id}})
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -134,7 +175,7 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.$router.push('/business/Middleware/bpmn/customModeler')
+      this.$router.push('/Middleware/bpmn/customModeler')
     },
     /** 查询参数列表 */
     getList() {
@@ -162,32 +203,71 @@ export default {
     // 流程图关闭
     cancel() {
         this.open = false
-        // this.reset();
     },
     //流程图查看
     getBpmn(row){
-      this.loading = false
       this.xml = row.resourceName
-      this.open = true
-      const canvas = this.$refs.canvas;
-      this.bpmnViewer = new BpmnViewer({
-        container: canvas
-      });
-      this.createNewDiagram(row.resourceName);
+      if(this.xml){
+        this.loading = false
+        this.open = true
+        setTimeout(()=>{
+          if(this.num == 0){
+            const canvas = this.$refs.canvas;
+            this.bpmnViewer = new BpmnViewer({
+              container: canvas
+            });
+            this.num ++
+          }
+          this.createNewDiagram(row.resourceName);
+        })
+      }else{
+        this.msgError("流程图渲染数据不存在");
+      }
     },
     async createNewDiagram(xml) {
-      let that = this
       try {
         const result = await this.bpmnViewer.importXML(xml);
         const { warnings } = result;
-        console.log(warnings);
         // 屏幕自适应
-        const canvas = this.bpmnViewer.get("canvas");
-        canvas.zoom("fit-viewport", true);
+          const canvas = this.bpmnViewer.get("canvas");
+          canvas.zoom("fit-viewport", true);
+
       } catch (err) {
         console.log(err.message, err.warnings);
       }
-    }
+    },
+    //跳转执行记录
+    getRecord(row){
+      router.push({path:'/Middleware/bpmn/executionRecord',query:{'procdefId':row.id,'size':20,'current':1}})
+    },
+    //立即执行
+    zkReProcdefRun1(row){
+      this.loading = true
+      zkReProcdefRun({id:row.id,name:row.name}).then(response => {
+          if(response.status == "SUCCESS"){
+            this.msgSuccess("执行成功");
+            this.loading = false;
+          }
+      })
+    },
+    //运行状态
+
+    handleStatusChange(row){
+      let text = row.runStatus === true ? "启用" : "停用";
+      this.$confirm('确认要'+ text + '"' + row.name + '"流程吗?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          console.log(111)
+          return zkReProcdefStatus({id:row.id,runStatus:row.runStatus,runCron:row.runCron})
+        }).then(() => {
+          this.getList()
+          this.msgSuccess(row.name + text + "成功");
+        }).catch(function() {
+          row.runStatus = row.runStatus === "0" ? "1" : "0";
+        });
+    },
 
   },
 
@@ -238,4 +318,8 @@ export default {
   text-align: right;
   background: #fff;
 }
+.getBpmn{
+  cursor: pointer !important;
+  color:#1890ff;
+}
 </style>

src/views/error/404.vue

@@ -17,7 +17,7 @@
         <div class="bullshit__info">
           对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
         </div>
-        <router-link to="/" class="bullshit__return-home">
+        <router-link to="/Middleware/bpmn/index" class="bullshit__return-home">
           返回首页
         </router-link>
       </div>

src/views/login.vue

@@ -160,7 +160,7 @@
           if(Cookies.get("path") === "functionalInterface"){
             this.$router.push({ path: "/business/Middleware/functionalInterface" });
           }
-          
+
         }).catch((err) => {
           location.href = '/deviceManager/#/';
         });
@@ -201,7 +201,7 @@
             this.$store
               .dispatch("Login", this.loginForm)
               .then(() => {
-                this.$router.push({ path: "/business/Middleware/Subsystem" });
+                this.$router.push({ path: "/Middleware/bpmn/index" });
                 //this.$router.push({ path: this.redirect || "/" });
               })
               .catch(() => {

vue.config.js

@@ -17,9 +17,9 @@ module.exports = {
     // 部署生产环境和开发环境下的URL。
     // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
     // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-    publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
+    publicPath: process.env.NODE_ENV === "production" ? "/center" : "/center",
     // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
-    outputDir: 'dist',
+    outputDir: 'center',
     // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
     assetsDir: 'static',
     // 是否开启eslint保存检测，有效值：ture | false | 'error'
@@ -34,9 +34,8 @@ module.exports = {
         proxy: {
             // detail: https://cli.vuejs.org/config/#devserver-proxy
             [process.env.VUE_APP_BASE_API]: {
-                //target: `https://smartpark.caih.com/dmapi/`,
-                //target: `http://101.133.214.75:81/dmapi/`,
-                target: `http://172.16.120.213:8084/`,
+                target: `https://smartpark.caih.com/dmapi/`,
+                //target: `http://172.16.120.85:8084/`,
                 changeOrigin: true,
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: ''
@@ -116,4 +115,4 @@ module.exports = {
                 }
             )
     }
-}
+}

接口.md

@@ -1,5 +0,0 @@
-1.流程图新增接口  zkReProcdef
-   msg: "Internal system error-BadSqlGrammarException-\n### Error querying database.  Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe,key,resource_name,create_time,create_by,update_time,update_by,del_flag ' at line 1\n### The error may exist in com/usky/dm/persistence/mapper/ZkReProcdefMapper.java (best guess)\n### The error may involve defaultParameterMap\n### The error occurred while setting parameters\n### SQL: SELECT  id,name,describe,key,resource_name,create_time,create_by,update_time,update_by,del_flag  FROM zk_re_procdef     WHERE (name = ? AND del_flag = ?)\n### Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe,key,resource_name,create_time,create_by,update_time,update_by,del_flag ' at line 1\n; bad SQL grammar []; nested exception is java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe,key,resource_name,create_time,create_by,update_time,update_by,del_flag ' at line 1"
-
-2.流程图查询 zkReProcdef/list
-  msg: "Internal system error-BadSqlGrammarException-\n### Error querying database.  Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe,key,resource_name,create_time,create_by,update_time,update_by,del_flag ' at line 1\n### The error may exist in com/usky/dm/persistence/mapper/ZkReProcdefMapper.java (best guess)\n### The error may involve defaultParameterMap\n### The error occurred while setting parameters\n### SQL: SELECT  id,name,describe,key,resource_name,create_time,create_by,update_time,update_by,del_flag  FROM zk_re_procdef     WHERE (del_flag = ?) ORDER BY id DESC LIMIT ?,?\n### Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe,key,resource_name,create_time,create_by,update_time,update_by,del_flag ' at line 1\n; bad SQL grammar []; nested exception is java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe,key,resource_name,create_time,create_by,update_time,update_by,del_flag ' at line 1"