Utilice la vista previa del diagrama de flujo bpmn en vue project

Prólogo

　　Lo anterior ha logrado avanzar, retroceder e importar operaciones de nodo. Exportación y otras operaciones, hoy para lograr una "vista previa del diagrama de flujo", y acercar y alejar la vista

　　Premisa: el proyecto ha instalado bpmn , la instalación se puede ver en el artículo anterior

Puntos de implementación

　　bpmn proporciona dos artefactos: Modeler y Viewer. Modeler tiene una barra de nodos a la izquierda y una barra de propiedades a la derecha. Haga clic en el nodo para realizar la operación correspondiente. El visor es "ver" y el nodo no se puede cambiar. Los dos son independientes entre sí y pueden basarse en las necesidades reales. Introducir bajo demanda

　　Dibujar un diagrama de flujo: importe BpmnModeler desde 'bpmn-js / lib / Modeler';

　　Diagrama de flujo de vista previa: importe BpmnViewer desde 'bpmn-js / lib / Viewer';

　　Código directamente:

<template> 
    <div class = "container"> 
        <el-button type = "primary" @ click = "previewTemp"> 预览 </el-button> 
        <el-button type = "success" @ click = "handleZoom (1 ) "> 放大 </el-button> 
        <el-button type =" warning "@ click =" handleZoom (-1) "> 缩小 </el-button> 
        <div class =" chart-preview "> 
            <div style = "clear: both;"> </div> 
            <div class = "view-canvas"> 
                <div id = "container" 
                     v -bind: style = "{width: 100 * scale + '%', height: 100 * scale + '%'} " 
                ></div> 
            </div> 
        </div> 
    </div> 
</template> 
<script> 
  importar jquery desde'jquery' ; 
  importar BpmnViewer desde 'bpmn-js / lib / Viewer' ; 


  exportar por defecto { 
    data () { 
      return { 
        containerEl: null , 
        bpmnModeler: null , 
        scale: 1 ,
        // Esta variable es la vista previa de los datos del archivo xml, porque Demasiadas líneas, adjuntas al archivo adjunto. Al usarlo, puede restablecer todo el archivo adjunto a currentCanvasXml 
      . 
      CurrentCanvasXml
         
        : '' }; 
    }, 
    métodos: { handleZoom (flag) { if (flag <0 && this .scale <= 1 ) {
           return ; 
        } 
        esto.scale + = bandera;
        this . $ nextTick (() => {
           this .bpmnModeler.get ('lienzo'). zoom ('fit-viewport' ); 
        }); 
      }, 
      previewTemp () { 
        this .containerEl = document.getElementById ('contenedor' );
        // 避免 缓存 ， 每次 清
        一下this .bpmnModeler && this .bpmnModeler.destroy ();
        this .scale = 1 ;
        this .bpmnModeler = new BpmnViewer ({container: this .containerEl}); 
        visor const = this .bpmnModeler;
        this .bpmnModeler.importXML ( this .currentCanvasXml, (err) => {
           if (err) { 
            console.error (err); 
          } else {
             // Solo realiza la vista previa, las siguientes dos oraciones del código central son suficientes 
            const canvas = viewer.get ( 'canvas' ); 
            canvas.zoom ( 'fit-viewport' );
             // El siguiente código es: Registre el evento de 
            desplazamiento del mouse para el nodo const eventBus = this .bpmnModeler.get ('eventBus' ); 
            const overlays = this .bpmnModeler.get ('superposiciones' ); 
            eventBus.on ('element.hover', (e) => { 
              const $ overlayHtml = jquery (`<div class =" tipBox "> 
                    Hola, soy el contenido del cuadro de suspensión
                     </ div>`);
               overlays.add (e. element.id, { 
                position: {top: e.element.height, left: 0 }, 
                html: $ overlayHtml 
              }); 
            }); 
            eventBus.on ( 'element.out', () => { 
              overlays.clear ( ); 
            }); 
          //   Fin del evento de suspensión de registro 
          } 
        }); 
      } 
    } 
  };
 </ script> 
<style lang = "scss">
    .container { 
        .tipBox { 
            ancho: 200px; 
            fondo: #fff; 
            borde - radio: 4px; 
            borde: 1px sólido # ebeef5; 
            acolchado: 12px; 
        } 
    }
 </style>

Ver código

consejos

　　CurrentCanvasXml  es la vista previa de los datos del archivo xml. Debido a que hay demasiadas líneas, se adjunta al archivo adjunto (¡haga clic en mí! ¡Haga clic en mí!) . Cuando lo use, asigne el valor completo a currentCanvasXml antes de que el código pueda ejecutarse. !