Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web

@@ -21,7 +21,9 @@
     "vue-router": "3.0.2",
     "vuex": "3.1.0",
     "bpmn-js": "^7.4.0",
-    "diagram-js": "^6.8.2"
+    "diagram-js": "^6.8.2",
+    "bpmn-js-properties-panel": "^0.37.2",
+    "bpmn-js-token-simulation": "^0.10.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

@@ -47,13 +47,13 @@ export function logoutReg (data) {
     })
 }
 // 流程图
-export function getWorkFlowImage (bsmSlsq) {
+export function getWorkFlowImage (bsmSlsq, bestepid) {
     return request({
         url: '/business/workFlow/getWorkFlowImage',
         method: 'get',
-        responseType: 'blob',
         params: {
-            bsmSlsq: bsmSlsq
+            bsmSlsq: bsmSlsq,
+            bestepid: bestepid
         }
     })
 }

@@ -55,21 +55,21 @@ export default {
   },
   mounted () {
     //  计算滚动条高度
-    setTimeout(() => {
-      if (this.btnShow) { //判断按钮的显影来决定是否需要计算高度
-        if (this.height == 'auto') {
-          this.contentHeight = (this.$refs.contentRef.offsetHeight - 100) + 'px'
-        } else {
-          this.contentHeight = this.height
-        }
-      } else {
-        if (this.height == 'auto') {
-          this.contentHeight = this.$refs.contentRef.offsetHeight
-        } else {
-          this.contentHeight = this.height
-        }
-      }
-    }, 500)
+    // setTimeout(() => {
+    //   if (this.btnShow) {
+    //     if (this.height == 'auto') {
+    //       this.contentHeight = (this.$refs.contentRef.offsetHeight - 200) + 'px'
+    //     } else {
+    //       this.contentHeight = this.height
+    //     }
+    //   } else {
+    //     if (this.height == 'auto') {
+    //       this.contentHeight = this.$refs.contentRef.offsetHeight
+    //     } else {
+    //       this.contentHeight = this.height
+    //     }
+    //   }
+    // }, 500)
   },
   methods: {
     onCancel () {

@@ -22,7 +22,6 @@ router.beforeEach(async (to, from, next) => {
         const { result: getMenuData } = await getMenuInfo()
         const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
         router.addRoutes(accessRoutes)
-        console.log(router);
         next({ ...to, replace: true })
     }
     NProgress.done()

+/* 改变主题色变量 */
+// $--color-primary: #1890ff;
+// $--color-danger: #ff4d4f;
+
+/* 改变 icon 字体路径变量，必需 */
+
+.process-drawer .el-drawer__header {
+  padding: 16px 16px 8px 16px;
+  margin: 0;
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+div[class^="el-drawer"]:focus,
+span:focus {
+  outline: none;
+}
+
+.process-drawer .el-drawer__body {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.process-design {
+  .el-table td,
+  .el-table th {
+    color: #333;
+  }
+
+  .el-dialog__header {
+    padding: 16px 16px 8px 16px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .el-dialog__body {
+    padding: 16px;
+    max-height: 80vh;
+    box-sizing: border-box;
+    overflow-y: auto;
+  }
+  .el-dialog__footer {
+    padding: 16px;
+    box-sizing: border-box;
+    border-top: 1px solid #e8e8e8;
+  }
+  .el-dialog__close {
+    font-weight: 600;
+  }
+  .el-select {
+    width: 100%;
+  }
+  .el-divider:not(.el-divider--horizontal) {
+    margin: 0 8px ;
+  }
+  .el-divider.el-divider--horizontal {
+    margin: 16px 0;
+  }
+}

+@import "./flow-element-variables.scss";
+@import "~bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
+@import "~bpmn-js-token-simulation/assets/css/font-awesome.min.css";
+@import "~bpmn-js-token-simulation/assets/css/normalize.css";
+@import "~bpmn-js/dist/assets/diagram-js.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
+@import "./process-designer.scss";
+@import "./process-panel.scss";
+
+$success-color: #4eb819;
+$primary-color: #409EFF;
+$warning-color: #E6A23C;
+$danger-color: #F56C6C;
+$cancel-color: #909399;
+
+.process-viewer {
+  position: relative;
+  border: 1px solid #EFEFEF;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
+
+  .success-arrow {
+    fill: $success-color;
+    stroke: $success-color;
+  }
+
+  .success-conditional {
+    fill: white;
+    stroke: $success-color;
+  }
+
+  .fail-arrow {
+    fill: $warning-color;
+    stroke: $warning-color;
+  }
+
+  .fail-conditional {
+    fill: white;
+    stroke: $warning-color;
+  }
+
+  .success.djs-connection {
+    .djs-visual path {
+      stroke: $success-color!important;
+      marker-end: url(#sequenceflow-end-white-success)!important;
+    }
+  }
+
+  .success.djs-connection.condition-expression {
+    .djs-visual path {
+      marker-start: url(#conditional-flow-marker-white-success)!important;
+    }
+  }
+
+  .success.djs-shape {
+    .djs-visual rect {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $success-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .primary.djs-shape {
+    .djs-visual rect {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $primary-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .warning.djs-connection {
+    .djs-visual path {
+      stroke: $warning-color!important;
+      marker-end: url(#sequenceflow-end-white-fail)!important;
+    }
+  }
+
+  .warning.djs-connection.condition-expression {
+    .djs-visual path {
+      marker-start: url(#conditional-flow-marker-white-fail)!important;
+    }
+  }
+
+  .warning.djs-shape {
+    .djs-visual rect {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $warning-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .danger.djs-shape {
+    .djs-visual rect {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $danger-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .cancel.djs-shape {
+    .djs-visual rect {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $cancel-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+}
+
+.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
+  display: none;
+}

+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  padding: 5px 0 10px 10px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .my-process-designer__header {
+    width: 100%;
+    min-height: 36px;
+    .el-button {
+      text-align: center;
+    }
+    .el-button-group {
+      margin: 4px;
+    }
+    .el-tooltip__popper {
+      .el-button {
+        width: 100%;
+        text-align: left;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+      .el-button:hover {
+        background: rgba(64, 158, 255, 0.8);
+        color: #ffffff;
+      }
+    }
+    .align {
+      position: relative;
+      i {
+        &:after {
+          content: "|";
+          position: absolute;
+          transform: rotate(90deg) translate(200%, 60%);
+        }
+      }
+    }
+    .align.align-left i {
+      transform: rotate(90deg);
+    }
+    .align.align-right i {
+      transform: rotate(-90deg);
+    }
+    .align.align-top i {
+      transform: rotate(180deg);
+    }
+    .align.align-bottom i {
+      transform: rotate(0deg);
+    }
+    .align.align-center i {
+      transform: rotate(90deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+    .align.align-middle i {
+      transform: rotate(0deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+  }
+  .my-process-designer__container {
+    display: inline-flex;
+    width: 100%;
+    flex: 1;
+    .my-process-designer__canvas {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
+      repeat !important;
+      div.toggle-mode {
+        display: none;
+      }
+    }
+    .my-process-designer__property-panel {
+      height: 100%;
+      overflow: scroll;
+      overflow-y: auto;
+      z-index: 10;
+      * {
+        box-sizing: border-box;
+      }
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      min-height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+//侧边栏配置
+.djs-palette.open {
+  .djs-palette-entries {
+    div[class^="bpmn-icon-"]:before,
+    div[class*="bpmn-icon-"]:before {
+      line-height: unset;
+    }
+    div.entry {
+      position: relative;
+    }
+    div.entry:hover {
+      &::after {
+        width: max-content;
+        content: attr(title);
+        vertical-align: text-bottom;
+        position: absolute;
+        right: -10px;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        transform: translateX(100%);
+        font-size: 0.5em;
+        display: inline-block;
+        text-decoration: inherit;
+        font-variant: normal;
+        text-transform: none;
+        background: #fafafa;
+        box-shadow: 0 0 6px #eeeeee;
+        border: 1px solid #cccccc;
+        box-sizing: border-box;
+        padding: 0 16px;
+        border-radius: 4px;
+        z-index: 100;
+      }
+    }
+  }
+}
+pre {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  max-height: calc(80vh - 32px);
+  overflow-y: auto;
+}
+.hljs {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.hljs * {
+  font-family: Consolas, Monaco, monospace;
+}

+.process-design {
+  .process-panel__container {
+    box-sizing: border-box;
+    padding: 0 8px;
+    border-left: 1px solid #eeeeee;
+    box-shadow: 0 0 8px #cccccc;
+    max-height: 100%;
+    overflow-y: scroll;
+  }
+  .panel-tab__title {
+    font-weight: 600;
+    padding: 0 8px;
+    font-size: 1.1em;
+    line-height: 1.2em;
+    i {
+      margin-right: 8px;
+      font-size: 1.2em;
+    }
+  }
+  .panel-tab__content {
+    width: 100%;
+    box-sizing: border-box;
+    border-top: 1px solid #eeeeee;
+    padding: 8px 16px;
+    .panel-tab__content--title {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      span {
+        flex: 1;
+        text-align: left;
+      }
+    }
+  }
+  .element-property {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    margin: 8px 0;
+    .element-property__label {
+      display: block;
+      width: 90px;
+      text-align: right;
+      overflow: hidden;
+      padding-right: 12px;
+      line-height: 32px;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+    .element-property__value {
+      flex: 1;
+      line-height: 32px;
+    }
+    .el-form-item {
+      width: 100%;
+      margin-bottom: 0;
+      padding-bottom: 18px;
+    }
+  }
+  .list-property {
+    flex-direction: column;
+    .element-listener-item {
+      width: 100%;
+      display: inline-grid;
+      grid-template-columns: 16px auto 32px 32px;
+      grid-column-gap: 8px;
+    }
+    .element-listener-item + .element-listener-item {
+      margin-top: 8px;
+    }
+  }
+  .listener-filed__title {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0;
+    span {
+      width: 200px;
+      text-align: left;
+      font-size: 14px;
+    }
+    i {
+      margin-right: 8px;
+    }
+  }
+  .element-drawer__button {
+    margin-top: 8px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-around;
+  }
+  .element-drawer__button > .el-button {
+    width: 100%;
+  }
+  
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+  .el-input.is-disabled .el-input__inner {
+    color: #999999;
+  }
+  .el-form-item.el-form-item--mini {
+    margin-bottom: 0;
+    & + .el-form-item {
+      margin-top: 16px;
+    }
+  }
+}
+

 <template>
   <div class="process-viewer">
-    <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 100%;" />
+    <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 360px;" />
     <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
     <defs ref="customSuccessDefs">
       <marker id="sequenceflow-end-white-success" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10"
@@ -63,23 +63,14 @@
 </template>
 
 <script>
+import '@/styles/package/theme/index.scss'
 import BpmnViewer from 'bpmn-js/lib/Viewer'
 import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
-
 export default {
   props: {
-    // eslint-disable-next-line vue/require-default-prop
-    xml: {
-      type: String
-    },
-    // eslint-disable-next-line vue/require-default-prop
-    finishedInfo: {
-      type: Object
-    },
-    // 所有节点审批记录
-    // eslint-disable-next-line vue/require-default-prop
-    allCommentList: {
-      type: Array
+    formData: {
+      type: Object,
+      default: {}
     }
   },
   data () {
@@ -88,7 +79,7 @@ export default {
       dlgTitle: undefined,
       defaultZoom: 1,
       // 是否正在加载流程图
-      isLoading: false,
+      isLoading: true,
       bpmnViewer: undefined,
       // 已完成流程元素
       processNodeInfo: undefined,
@@ -100,24 +91,10 @@ export default {
       hoverTimer: null
     }
   },
-  watch: {
-    xml: {
-      handler (newXml) {
-        this.importXML(newXml)
-      },
-      immediate: true
-    },
-    finishedInfo: {
-      handler (newInfo) {
-        this.setProcessStatus(newInfo)
-      },
-      immediate: true
-    }
-  },
   created () {
     this.$nextTick(() => {
-      this.importXML(this.xml)
-      this.setProcessStatus(this.finishedInfo)
+      this.importXML(this.formData.xml)
+      this.setProcessStatus(this.formData.finishedInfo);
     })
   },
   destroyed () {
@@ -146,19 +123,6 @@ export default {
     },
     getOperationTagType (type) {
       return 'success'
-      // switch (type) {
-      //   case this.SysFlowTaskOperationType.AGREE:
-      //   case this.SysFlowTaskOperationType.MULTI_AGREE:
-      //     return 'success';
-      //   case this.SysFlowTaskOperationType.REFUSE:
-      //   case this.SysFlowTaskOperationType.PARALLEL_REFUSE:
-      //   case this.SysFlowTaskOperationType.MULTI_REFUSE:
-      //     return 'warning';
-      //   case this.SysFlowTaskOperationType.STOP:
-      //     return 'danger'
-      //   default:
-      //     return 'primary';
-      // }
     },
     // 流程图预览清空
     clearViewer (a) {
@@ -214,9 +178,8 @@ export default {
           this.bpmnViewer.on('element.click', ({ element }) => {
             this.onSelectElement(element)
           })
-
-          this.isLoading = true
           const c = await this.bpmnViewer.importXML(xml)
+          this.isLoading = true
           this.addCustomDefs()
         } catch (e) {
           // this.clearViewer('b')

@@ -63,6 +63,10 @@
       </div>
     </div>
     <fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" />
+    <!-- <dialogBox title="流程图" width="60%" v-model="myValue" @closeDialog="closeDialog">
+      <process-viewer :key="`designer-${loadIndex}`" style="height:500px" :xml="xmlData" :finished-info="finishedInfo"
+        :all-comment-list="historyTaskList" @ch="changeLoadIndex" />
+    </dialogBox> -->
   </div>
 </template>
 
@@ -79,6 +83,7 @@ import {
   completeTask,
 } from "@/api/fqsq.js";
 import { deleteBdcdy } from "@/api/ywbl.js";
+import ProcessViewer from './components/processViewer.vue'
 import { getWorkFlowImage } from "@/api/jsydsyqFlow.js";
 import { getForm } from "./flowform.js";
 import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue";
@@ -86,12 +91,12 @@ import { queueDjywmc } from "@/views/ywbl/ywsq/slectBdcdata.js";
 export default {
   components: {
     fqsqDialog,
+    ProcessViewer
   },
   data () {
     return {
       isDialog: false,
       // 流程图
-      imgSrc: "",
       // 折叠
       isShowdrawer: true,
       // 默认选中
@@ -131,6 +136,12 @@ export default {
     this.flowInitParam();
   },
   methods: {
+    changeLoadIndex () {
+      this.loadIndex++
+    },
+    closeDialog () {
+      this.myValue = false
+    },
     // 更新列表
     updateDialog () {
       this.loadBdcdylist();
@@ -196,7 +207,7 @@ export default {
           this.tabList.forEach(function (item, index) {
             if (item.value == "clxx") {
               that.clxxIndex = index;
-              that.clxxForm = getForm(item.value,that.$route.query.sqywbm);
+              that.clxxForm = getForm(item.value, that.$route.query.sqywbm);
               that.clxxTab = item;
             }
           });
@@ -216,16 +227,24 @@ export default {
           this.isDialog = true;
           break;
         case "B1":
-          getWorkFlowImage(this.bsmSlsq).then((res) => {
-            this.imgSrc = URL.createObjectURL(res);
+          getWorkFlowImage(this.bsmSlsq, this.$route.query.bestepid).then(res => {
+            let { result } = res
             this.$popup({
               title: "流程图",
-              btnShow: true,
-              height: '250px',
-              editItem: "workflow/components/flowChart",
-              formData: this.imgSrc,
-            });
-          });
+              height: '500px',
+              editItem: "workflow/components/processViewer",
+              formData: {
+                xml: result.xml,
+                finishedInfo: {
+                  finishedTaskSet: result.finishedTaskSet,
+                  unfinishedTaskSet: result.unfinishedTaskSet,
+                  rejectedTaskSet: result.rejectedTaskSet,
+                  finishedSequenceFlowSet: result.finishedSequenceFlowSet
+                },
+                allCommentList: result.historyTaskList
+              }
+            })
+          })
           break;
         case "B2": //材料分屏按钮
           this.splitScreen = this.splitScreen ? false : true;
@@ -356,7 +375,7 @@ export default {
     },
     //切换选项卡内容组件
     getFromRouter (tabname) {
-      this.componentTag = getForm(tabname,this.$route.query.sqywbm);
+      this.componentTag = getForm(tabname, this.$route.query.sqywbm);
     },
     //发送下一个环节
     send (obj) {