sasp-flow-render 1.0.1

package/src/components/flowChart.vue

@@ -0,0 +1,463 @@
+<template>
+    <el-container style="height: 100%" class="flow-chart-content flow-define-info">
+<!--        <el-button type="primary" size="small" class="basic-button-class" @click="download">下载</el-button>-->
+        <el-main style="height: 100%;width:100%;padding:5px 0 0 0;" id="bpmnContainer">
+            <div style="flex:1;width: 100%;height: 100%" class="containers bpmn-color"  ref="myMain">
+                <div class="js-canvas" ref="canvas">
+                </div>
+                <div class="mind-canvas-con">
+                    <div class="mind-canvas-op">
+                        <el-tooltip class="item" effect="dark" content="回到中心点" placement="top-start">
+                            <i  class="saspiconfont pl-icon-map" @click="centerView" style="vertical-align:middle;min-width: 24px;display: inline-block;margin-left: 14px;cursor: pointer;font-size: 21px"></i>
+                        </el-tooltip>
+                        <el-tooltip v-if="!showViewType" class="item" effect="dark" content="显示视图导航" placement="top-start">
+                            <i  class="saspiconfont pl-icon-icon-test" @click="showView" style="vertical-align:middle;min-width: 24px;display: inline-block;margin-left: 14px;cursor: pointer;font-size: 21px"></i>
+                        </el-tooltip>
+                        <el-tooltip v-if="showViewType" class="item" effect="dark" content="关闭视图导航" placement="top-start">
+                            <i  class="saspiconfont pl-icon-Group-" @click="showView" style="vertical-align:middle;min-width: 24px;display: inline-block;margin-left: 14px;cursor: pointer;font-size: 21px"></i>
+                        </el-tooltip>
+                        <el-tooltip class="item" effect="dark" content="缩小" placement="top-start">
+                            <i  class="el-icon-minus" @click="changeSizeDown" style="vertical-align:middle;min-width: 24px;display: inline-block;margin-left: 14px;cursor: pointer;font-size: 21px"></i>
+                        </el-tooltip>
+                        <el-tooltip class="item" effect="dark" content="放大" placement="top-start">
+                            <i  class="el-icon-plus" @click="changeSizeUp" style="vertical-align:middle;min-width: 24px;display: inline-block;margin-left: 14px;cursor: pointer;font-size: 21px"></i>
+                        </el-tooltip>
+                        <el-tooltip class="item" effect="dark" content="回到原始大小" placement="top-start">
+                            <span @click="changeSize" style="min-width: 24px;display: inline-block;margin-left: 14px;cursor: pointer;font-size:15px;">{{viewSize}}</span>
+                        </el-tooltip>
+                    </div>
+                </div>
+            </div>
+        </el-main>
+    </el-container>
+</template>
+
+<script>
+    import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";
+    import CustomModeler from '../views/popup/js/customModeler/CustomModeler';
+    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 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+    import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
+    import 'diagram-js-minimap/assets/diagram-js-minimap.css';
+    import minimapModule from 'diagram-js-minimap';
+    export default {
+        name: "flow-chart",
+        props:{
+             flowId:{required:true,type:String},
+             instId:{type:String},
+             nodeId:{type:String},
+             linkProcId:{type:String,default:""},
+             isRelease:{type:String,default:"1"} //发布状态默认已发布
+        },
+        data(){
+          return {
+              viewer: null,
+              canvas: null,
+              bpmnText: '',
+              showViewType:false,
+              viewSize:"100%",
+              loginUser:{}
+          }
+        },
+        created() {
+            this.initBpmn();
+            this.initUserInfo();
+        },
+        methods:{
+            download() {
+                this.viewer.saveXML({format: true}, (err, xml) => {
+                    if (xml) {
+                        this.bpmnText = xml;
+                        let a = document.createElement('a');
+                        a.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodeURIComponent(xml);
+                        a.download = 'diagram.bpmn';
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                    }
+
+                })
+            },
+            initBpmn(){
+                this.$nextTick().then(() => {
+                    this.canvas = this.$refs['canvas']; //获取画图dome节点
+                    //建模
+                    this.viewer = new CustomModeler({
+                        container: this.canvas,
+                        keyboard: {
+                            bindTo: window
+                        },
+                        additionalModules: [
+                            minimapModule,
+                        ],
+                        cli: {
+                            bindTo: 'cli'
+                        },
+                        moddleExtensions: {
+                            camunda: camundaModdleDescriptor
+                        }
+                    });
+                    this.create();
+                });
+
+            },
+            create(){
+                let loadBpmn = (diagramXml) => {
+                    this.bpmnText = diagramXml;
+                    this.viewer.importXML(diagramXml, err => {
+                        if (err) {
+                            // throw (err)
+                        }
+                        this.viewer.get('canvas').zoom('fit-viewport');
+
+                        let canvas = this.viewer.get('canvas');
+                        canvas.zoom('fit-viewport');
+                        //设置网管连线默认颜色
+                        if(this.viewer._definitions.rootElements[0].flowElements){
+                            this.viewer._definitions.rootElements[0].flowElements.forEach(n =>{
+                                if(n.$type === 'bpmn:InclusiveGateway' && n.outgoing){
+                                    n.outgoing.forEach(nn => {
+                                        canvas.addMarker(nn.id,  'highlight');
+                                    })
+                                }
+                            });
+                        }
+                        this.addBpmnListener();
+                        this.setNodeColor();
+                    })
+                };
+                this.axios.post(this.api.plFlowDefine.getFlowDraw,{flowId: this.flowId,linkProcId:this.linkProcId,isRelease:this.isRelease}).then(res => {
+                    if(res && res.data){
+                        if(res.data.operateObj){
+                            loadBpmn(res.data.operateObj || '');
+                        }else {
+                            this.$nextTick(() => {
+                                loadBpmn('<?xml version="1.0" encoding="UTF-8"?>' +
+                                    '<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1lw15tx" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.7.3">' +
+                                    '<bpmn:process id="Process_' + this.DATE_UTIL.formaterDate(new Date()) + '" isExecutable="true">' +
+                                    '</bpmn:process>' +
+                                    '<bpmndi:BPMNDiagram>' +
+                                    '<bpmndi:BPMNPlane bpmnElement="Process_19p1r93">' +
+                                    '</bpmndi:BPMNPlane>' +
+                                    '</bpmndi:BPMNDiagram>' +
+                                    '</bpmn:definitions>');
+                            });
+                        }
+                    }
+                });
+            },
+            setNodeColor(){
+                if(!this.instId && !this.nodeId){
+                    return;
+                }
+                if(this.nodeId){
+                    this.axios.post(this.api.plFlowNode.getById,{"id":this.nodeId}).then(resNode => {
+                        let result = resNode.data.nodeLinkId;
+                        let canvas = this.viewer.get('canvas');
+                        canvas.addMarker(result,"current-node-class");
+                        this.setAnnotation(result);
+                    })
+                }else{
+                    this.axios.post(this.api.plFlowInst.getById,{"id":this.instId}).then(res => {
+                        let currentNode = res.data.currentNode;
+                        this.axios.post(this.api.plFlowNode.getById,{"id":currentNode}).then(resNode => {
+                            let result = resNode.data.nodeLinkId;
+                            let canvas = this.viewer.get('canvas');
+                            canvas.addMarker(result,"current-node-class");
+                            this.setAnnotation(result);
+                        })
+                    });
+                }
+            },
+            setAnnotation(sourceRefId){
+            },
+            // 给节点添加监听时间(点击)
+            addBpmnListener() {
+                const bpmnjs = this.viewer;
+                const eventBus = bpmnjs.get('eventBus');
+                const events = ['element.click', 'element.dblclick', 'element.mousemove'];
+                eventBus.off(events, null);
+                const dragEvent = ["drag.move","end","start","shape.move.move","shape.move.start","shape.move.end",
+                                   "start","connectionSegment.move.move","end","connectionSegment.move.start",
+                                    "connectionSegment.move.end","connectionSegment.move.hover","connectionSegment.move.out",
+                                    "connectionSegment.move.cleanup","bendpoint.move.hover","bendpoint.move.out","bendpoint.move.cleanup",
+                                    "bendpoint.move.end","bendpoint.move.move","bendpoint.move.start","bendpoint.move.cancel"];
+                dragEvent.forEach(key => {
+                    eventBus.on(key,2000, () => {
+                        return false;
+                    });
+                })
+            },
+            centerView(){
+                //this.viewer.get('canvas').zoom('fit-viewport', 'auto');//流程图居中
+                this.viewer.get('canvas').zoom('fit-viewport');//画布居中
+                let ele = document.getElementsByClassName("djs-search-container djs-draggable djs-scrollable")[0].nextElementSibling.firstChild.nextElementSibling;
+                ele.style.width="320px";
+            },
+            showView(){
+                let ele = document.getElementsByClassName("djs-search-container djs-draggable djs-scrollable")[0].nextElementSibling;
+                if(this.showViewType){
+                    ele.className="djs-minimap";
+                }else{
+                    ele.className="djs-minimap open";
+                }
+                this.showViewType=!this.showViewType;
+            },
+            // 缩放
+            changeSize(){
+                this.viewer.get('canvas').zoom(1);
+                this.viewSize="100%";
+            },
+            changeSizeUp(){
+                let num= parseInt(this.viewSize.split("%")[0]);
+                let num2=200;
+                if(num <200){
+                    num2=num+10;
+                }
+                this.viewer.get('canvas').zoom(num2/100);
+                this.viewSize=num2 +"%";
+
+                let ele = document.getElementsByClassName("djs-search-container djs-draggable djs-scrollable")[0].nextElementSibling.firstChild.nextElementSibling;
+                ele.style.width=(320-1.6*(100-num2))+"px";
+            },
+            changeSizeDown(){
+                let num= parseInt(this.viewSize.split("%")[0]);
+                let num2=0;
+                if(num >0){
+                    num2=num-10;
+                }
+                this.viewer.get('canvas').zoom(num2/100);
+                this.viewSize=num2 +"%";
+
+                let ele = document.getElementsByClassName("djs-search-container djs-draggable djs-scrollable")[0].nextElementSibling.firstChild.nextElementSibling;
+                ele.style.width=(320-1.6*(100-num2))+"px";
+            },
+            //初始化用户信息
+            initUserInfo(){
+                this.loginUser = this.CACHE_GLOBAL.getLoginUser();
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "../views/popup/css/flowMain"; /*流程图主样式*/
+</style>
+
+<style>
+    @keyframes currentNodeAnimation {
+        from {
+            stroke-dashoffset: 100%;
+        }
+    }
+</style>
+
+<style scoped lang="scss">
+    .js-canvas{
+        /deep/ {
+            .djs-container{
+                position: static !important;
+            }
+            .djs-context-pad {
+                .bpmn-icon-gateway-none.entry{
+                    display: none;
+                }
+                .bpmn-icon-connection-multi.entry{
+                    display: none;
+                }
+                .icon-custom.demo-gateway.entry:hover{
+                    background: url('../assets/images/gateway_icon.png') center no-repeat!important;
+                    background-size: cover!important;
+                }
+                .icon-custom.demo-user-task.entry:hover{
+                    background: url('../assets/images/userTask_icon.png') center no-repeat!important;
+                    background-size: cover!important;
+                }
+                .icon-custom.demo-global-connect-tool.entry:hover{
+                    background: url('../assets/images/globalConnect_icon.png') center no-repeat!important;
+                    background-size: cover!important;
+                }
+                .bpmn-icon-trash.entry{
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    /deep/ :focus {
+        outline: 0;
+    }
+
+    /deep/ .el-dialog__wrapper {
+        left: calc(95% - 650px);
+    }
+
+    /deep/ .el-dialog__header {
+        border:0;
+        padding: 0;
+    }
+
+    /deep/ .el-dialog__body {
+        top:0!important;
+        bottom: 0!important;
+    }
+
+    /deep/ .el-input-group__prepend{
+        padding: 3px;
+    }
+    /deep/ .el-input-group__append{
+        padding: 3px;
+    }
+    /deep/ .vue-ruler-content{
+        right: 0;
+        bottom: 0;
+        left: 0px;
+        top: 0px;
+        padding: 0px;
+    }
+    /deep/ .vue-ruler-h{
+        left: 65px;
+        top: 0px;
+    }
+    /deep/.vue-ruler-v{
+        left: 48px;
+        top: 18px;
+    }
+    /deep/ .el-input-number__increase .el-icon-arrow-up{
+        position: absolute;
+        left: 8px;
+    }
+    /deep/ .el-input-number__decrease .el-icon-arrow-down{
+        position: absolute;
+        left: 8px;
+    }
+
+    /*/deep/.highlight.djs-shape .djs-visual > :nth-child(1) {*/
+    /*    fill: #3384fe !important;*/
+    /*    stroke: #3384fe !important;*/
+    /*    fill-opacity: 0.2 !important;*/
+    /*}*/
+    /*/deep/.highlight.djs-shape .djs-visual > :nth-child(2) {*/
+    /*    fill: #3384fe !important;*/
+    /*}*/
+    /*/deep/.highlight.djs-shape .djs-visual > path {*/
+    /*    fill: #3384fe !important;*/
+    /*    fill-opacity: 0.2 !important;*/
+    /*    stroke: #3384fe !important;*/
+    /*}*/
+    /*/deep/.highlight.djs-connection > .djs-visual > path {*/
+    /*    stroke: #3384fe !important;*/
+    /*}*/
+    /deep/.highlight-todo.djs-connection > .djs-visual > path {
+        stroke: orange !important;
+        stroke-dasharray: 4px !important;
+        fill-opacity: 0.2 !important;
+    }
+    /deep/.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
+        fill: orange !important;
+        stroke: orange !important;
+        stroke-dasharray: 4px !important;
+        fill-opacity: 0.2 !important;
+    }
+    /deep/ .djs-minimap{
+        left: 15px;
+        bottom: 43px;
+        top: auto;
+        right: auto;
+        cursor: pointer;
+        z-index:2;
+        width: 212px;
+        box-shadow: 0 -2px 16px 0px rgba(0,0,0,.2);
+        border-top: 1px solid #f0f0f0;
+        border-bottom: 0px;
+        background-color: #fff;
+        border-left-width: 0px;
+        border-right-width: 0px;
+
+    }
+    /deep/ .viewport-dom{
+        max-height: 80px;
+        max-width: 150px;
+    }
+    /deep/ .el-dialog__wrapper {
+        left: calc(95% - 700px);
+    }
+    /deep/ .el-tabs__content::-webkit-scrollbar {
+        width: 2px;
+    }
+    /* 滚动槽 */
+    /deep/ .el-tabs__content::-webkit-scrollbar-track {
+        background: none;
+    }
+
+    /* 滚动条滑块 */
+    /deep/ .el-tabs__content::-webkit-scrollbar-thumb {
+        background: #a9a9a9;
+        border-radius: 10px;
+    }
+    /deep/ .djs-minimap.open .map{
+    //display: block;
+    }
+    /deep/ .djs-minimap .toggle{
+        display: none;
+    }
+    .mind-canvas-con{
+        position: absolute;
+        z-index: 2;
+        width: 218px;
+        left: 25px;
+        bottom: 27px;
+        background-color: #fff;
+        box-shadow: 0 10px 16px 0 rgba(0,0,0,.2);
+        border-top: 0;
+    }
+    .mind-canvas{
+        height: 171px;
+        width: 245px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+    .mind-canvas-op{
+        height: 36px;
+        display: block;
+        line-height: 36px;
+    }
+    .mind-icons{
+        font-family: "mindicons" !important;
+        font-size: 16px;
+        font-style: normal;
+        user-select: none;
+    }
+
+    /deep/ .djs-palette.two-column.open{
+        display: none;
+    }
+    /deep/ .bjs-powered-by{
+        display: none;
+    }
+    /deep/ .djs-context-pad{
+        display: none;
+    }
+
+    /deep/ .current-node-class:not(.djs-connection) .djs-visual{
+        animation: currentNodeAnimation 20S linear infinite;
+        animation-fill-mode: forwards;
+    }
+
+    /deep/ .current-node-class:not(.djs-connection) .djs-visual > :nth-child(1) {
+        stroke: #f85454 !important;
+        stroke-width: 4px;
+        stroke-dasharray: 4, 4;
+
+        /* elements as success */
+    }
+
+    .mind-canvas-op{
+        user-select: none;
+    }
+</style>

package/src/components/flowInst/css/flowInstList.scss

@@ -0,0 +1,193 @@
+.el-select {
+  width: 100%;
+}
+
+.dialog-title {
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+}
+
+/deep/ .batchDialog .el-dialog .el-dialog__body {
+  padding: 5px 10px 10px 10px;
+}
+
+//卡片样式
+.myelcard6 { //3840*2160 6个
+  width: 14%;
+  height: 19.2%;
+  display: inline-block;
+  /*margin: 0 1.2% 1.4% 1.3%;//上右下左*/
+  margin-right: 2.2%;
+  margin-bottom: 26px;
+}
+
+.myelcard5 { //2560*1440 5个
+  width: 18%;
+  height: 39.2%;
+  display: inline-block;
+  /*margin: 0 1% 1.4% 1%;//上右下左*/
+  padding-right: 0;
+  margin-right: 2%;
+  margin-bottom: 26px;
+}
+
+.myelcard4 { //1920*1080 4个
+  width: 23.5%;
+  height: 55%;
+  display: inline-block;
+  margin-right: 1.5%;
+  margin-bottom: 26px;
+}
+
+.myelcard3 { //1536*864 3个
+  width: 31.7%;
+  height: 82.2%;
+  display: inline-block;
+  margin-right: 1.6%;
+  margin-bottom: 1.4%;
+}
+
+.myelcard2 { //1280*720 2个
+  width: 48%;
+  height: 151.2%;
+  display: inline-block;
+  margin-right: 2%;
+  margin-bottom: 1.4%;
+}
+
+/deep/ .el-card__header {
+  height: 49px;
+  padding: 5px 0;
+  border-bottom: 0;
+}
+
+/deep/ .el-card__body {
+  padding: 5px 0 0;
+  height: 80%;
+}
+
+//滚动条样式
+.main-box::-webkit-scrollbar {
+  width: 4px;
+  height: 6px;
+}
+
+.main-box::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 3px;
+}
+
+.box-card {
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
+  box-shadow: 0 6px 10px 0 rgba(52, 127, 255, 0.10);
+}
+
+.cardhead {
+  position: relative;
+  line-height: 49px;
+  padding-left: 15px;
+}
+
+.cardhead-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333333;
+  font-family: 'PingFang SC-Medium';
+  margin-right: 10px;
+}
+
+.cardhead-tag {
+  /*width: 64px;*/
+  height: 26px;
+  text-align: center;
+  line-height: 26px;
+  margin-left: 6px;
+  border: none;
+  border-radius: 0;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+
+.mycardBody {
+  //height: 77%;
+  min-height: 125px;
+  padding: 0 15px;
+  border-bottom: 1px dashed #E4EAF7;
+  border-top: 1px dashed #E4EAF7;
+
+  .cardbody-box {
+    display: flex;
+    flex-direction: row;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular;
+
+    .cardbody-title {
+      color: #333333;
+      flex-shrink: 0;
+    }
+
+    .cardbody-content {
+      color: #666666;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+}
+
+.mycardFoot {
+  height: 54px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  button {
+    width: 90px;
+    height: 34px;
+    font-size: 14px;
+  }
+}
+
+.myDealButton { //处理
+  color: #3485FF;
+  border-color: #3485FF;
+  background-color: rgba(52, 133, 255, 0.10);
+}
+
+.myDealButton:hover {
+  color: #FFFFFF;
+  border-color: #3485FF;
+  background-color: #3485FF;
+}
+
+.myFlowRecordButton { //流转记录
+  color: #FF8C1A;
+  border-color: #FF8C1A;
+  background-color: rgba(255, 140, 25, 0.10);
+}
+
+.myFlowRecordButton:hover {
+  color: #FFFFFF;
+  border-color: #FF8C1A;
+  background-color: #FF8C1A;
+}
+
+.myFlowChartButton { //流程图
+  color: #0EC052;
+  border-color: #0EC052;
+  background-color: rgba(14, 192, 82, 0.10);
+}
+
+.myFlowChartButton:hover {
+  color: #FFFFFF;
+  border-color: #0EC052;
+  background-color: #0EC052;
+}