基于vue和jsplumb的工作流编辑器开发

背景需要实现一个工作流，支持拖拽节点生成工作流。业务实现支持页面布局缩放支持节点支持if else支持多分支技术点网格背景工作流缩放工作流技术实现节点拖拽技术选型vuejsplumbsortablejs(vue-draggable)难点攻破网格背景主要是利用css的 linear-gradient 和 background-size 实现的。&lt...

wancheng1990

4506人浏览 · 2020-04-29 16:23:29

wancheng1990 · 2020-04-29 16:23:29 发布

背景

需要实现一个工作流，支持拖拽节点生成工作流。

业务实现

支持页面布局缩放
支持节点
支持if else
支持多分支

技术点

网格背景
工作流缩放
工作流技术实现
节点拖拽

技术选型

vue
jsplumb
sortablejs(vue-draggable)

难点攻破

网格背景

主要是利用css的 linear-gradient 和 background-size 实现的。

<div class="flow-layout">
    <div class="flow-editor">
        <div class="canvas-container">
        </div>
    </div>
</div>

.flow-layout {
  display: flex;
  flex-direction: column;
}

.flow-editor {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

.canvas-container {
  flex: 1;
  overflow: auto;
  z-index: 0;
}

在这里插入图片描述

.canvas-container:before {
  content: "";
  height: 10px;
  width: 100%;
  display: block;
  background-repeat-y: no-repeat;
  position: absolute;
  background-image: linear-gradient(90deg, #ccc 1px, transparent 0), linear-gradient(90deg, #ddd 1px, transparent 0);
  background-size: 75px 10px, 5px 5px;
}

.canvas-container:after {
  content: "";
  height: 100%;
  width: 10px;
  display: block;
  background-repeat-x: no-repeat;
  position: absolute;
  top: 0;
  background-image: linear-gradient(#ccc 1px, transparent 0), linear-gradient(#ddd 1px, transparent 0);
  background-size: 10px 75px, 5px 5px;
}

工作流缩放

主要结合 css的属性选择符 E[att="val"] ,通过修改zoom的值，来实现缩放功能。

在这里插入图片描述

<div class="flow-zoom" :data-zoom="canvasDataRoom + '%'">
    <div class="zoom-btn">
        <el-button size="mini" :class="{'el-button--primary':canvasRoomMinusEnable}" icon="el-icon-minus"
                   circle
                   @click="handleMinusCanvas"></el-button>
    </div>
    <div class="zoom-btn">
        <el-button size="mini" :class="{'el-button--primary':canvasRoomPlusEnable}" icon="el-icon-plus"
                   circle
                   @click="handlePlusCanvas"></el-button>
    </div>
</div>


<div class="canvas-container" :data-zoom="canvasDataRoom">
    <div class="campaignCanvas"></div>
</div>

.canvas-container[data-zoom="100"] {
  background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
}

.canvas-container[data-zoom="90"] {
  background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
  background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
}

.canvas-container[data-zoom="80"] {
  background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}

.canvas-container[data-zoom="70"] {
  background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
  background-size: 55px 55px, 55px 55px, 11px 11px, 11px 11px;
}

.canvas-container[data-zoom="60"] {
  background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
  background-size: 45px 45px, 45px 45px, 9px 9px, 9px 9px;
}

.canvas-container[data-zoom="50"] {
  background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

工作流技术实现

主要是依赖 jsplumb 实现的。

主要利用 jsplumb 实现两个节点的连接。

让dom节点变成jsplumb 可拖拽节点

<div id="_uuid">
</div>

jsPlumb.draggable(_uuid, {});

两个节点的连接。

jsPlumb.connect({
    source: source,
    target: target,
    endpoint: 'Dot',
    // 连接线的样式
    connectorStyle: {strokeStyle: "#ccc", joinStyle: "round", outlineColor: "#ccc"}, // 链接 style
    // 连接线配置，起点可用
    connector: ["Flowchart", {
        stub: [10, 20],
        gap: 1,
        cornerRadius: 2,
        alwaysRespectStubs: true
    }], //  链接
    //
    endpointStyle: {fill: 'transparent', outlineStroke: 'transparent', outlineWidth: 2},
    // 线的样式
    paintStyle: {stroke: 'lightgray', strokeWidth: 2},
    // 锚点的位置
    anchor: ['BottomCenter', 'TopCenter'],
    // 遮罩层-设置箭头
    overlays: [
        ['PlainArrow', {width: 10, length: 10, location: 1}],
        ['Custom', {
            location: .5,
            id: 'nodeTempSmall',
            create: function () {
                let $el = that.$refs[target][0].$el;
                $el.dataset.target = target;
                $el.dataset.source = source;
                return $el;
            },
            visible: false
        }],
        ['Label', {location: 1, id: "flowItemDesc", cssClass: "node-item-label", visible: true}] //
    ]
});

删除一个节点

jsPlumb.removeAllEndpoints(uuid);

两个节点之间创建节点

在这里插入图片描述

 function createFlowConnectionLabel(sourceList, target) {

    if (!Array.isArray(sourceList)) {
        sourceList = [sourceList];
    }

    sourceList.forEach((source) => {
        //
        let lines = this.$options.jsPlumb.getConnections({
            source: source,
            target: target
        });
        //
        lines.forEach((line) => {
            line.getOverlay('nodeTempSmall').setVisible(true);
            line.bind('click', this.handleFlowLabelClick);
        });
    });
}

两个节点之间的文案创建

在这里插入图片描述

 function createFlowItemLabel(source, target, label) {
    this.$nextTick(() => {
        let lines = this.$options.jsPlumb.getConnections({
            source: source,
            target: target
        });
        if (lines.length > 0) {
            lines[0].getOverlay("flowItemDesc").setLabel(`<span class="node-item-title" title="${label}">${label}</span>`);
        }
    });
}

节点拖拽

主要是依赖 sortablejs 实现的

主要利用vue-draggable 封装好的组件，来实现拖拽。核心代码

拖拽的目的地区域。

<draggable class="flow-item node-temp node-temp-img"
           ref="tempNode"
           :id="flowItem.uuid"
           :group="{name:'sortable', pull:false, put: true }">
</draggable>

被拖拽的目标对象。

<draggable class="items-box"
           :key="index"
           :list="flowItem.children"
           :group="{name:'sortable', pull: 'clone', put: false }"
           v-bind="dragConfig"
           :move="handleFlowMoveItem"
           @start="handleFlowMoveStart"
           @end="handleFlowMoveEnd"
           :sort="false"
           :ref="flowItem.ref">
        <div class="node-temp-img"></div>
    </template>
</draggable>

项目截图

在这里插入图片描述

项目地址

github: https://github.com/bosscheng/vue-draggable-workflow

demo: https://bosscheng.github.io/vue-draggable-workflow

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^