vue+jsplumb实现工作流程图的项目实践

下面我将详细讲解一下“vue+jsplumb实现工作流程图的项目实践”的攻略步骤。

步骤一：安装vue及相关插件

第一步是安装Vue.js，可以使用npm或yarn进行安装。同时，还需要安装Vue Router和Vue Resource插件来支持我们实现跨组件通信和网络请求。

npm install vue vue-router vue-resource --save

步骤二：安装jsplumb插件

第二步是安装jsplumb插件，jsplumb是一个流程图绘制工具，支持直接在浏览器中进行拖拽和连线操作，并且可以通过API进行相关设定。

npm install jsplumb --save

步骤三：创建Vue组件

利用Vue.js的组件化开发思路，我们可以将整个工作流程图看做是一个组件，然后在组件内部进行jsplumb的相关设定。比如我们可以创建一个Workflow组件来实现工作流程图的绘制和交互操作。

<template>
  <div id="workflow"></div>
</template>

<script>
  import jsPlumb from 'jsplumb'

  export default {
    name: 'Workflow',
    mounted () {
      // 初始化jsplumb
      var instance = jsPlumb.getInstance({
        // 这里可以设置默认参数
      })

      // 创建节点，给节点绑定一些事件
      var node = document.createElement('div')
      node.id = 'node1'
      node.title = 'Node 1'
      node.innerText = 'Node 1'
      node.style.width = '100px'
      node.style.height = '50px'
      node.style.border = '1px solid gray'
      node.style.borderRadius = '4px'
      node.style.textAlign = 'center'
      node.style.paddingTop = '15px'
      node.style.cursor = 'move'

      instance.draggable(node, {
        // 这里可以设置拖拽相关参数
      })

      instance.makeSource(node, {
        // 这里可以设置源节点相关参数
      })

      instance.makeTarget(node, {
        // 这里可以设置目标节点相关参数
      })

      document.getElementById('workflow').appendChild(node)
    }
  }
</script>

<style>
  #workflow {
    width: 800px;
    height: 600px;
    border: 1px solid gray;
    margin: 20px auto;
  }
</style>

步骤四：使用Vue Router进行页面跳转

接下来，我们可以利用Vue Router实现页面跳转。比如我们可以设置一个工作流程列表页面，点击列表中的某个工作流程，跳转到对应的工作流程图页面来进行编辑。

<template>
  <div>
    <ul>
      <li v-for="workflow in workflows" :key="workflow.id">
        <router-link :to="{ name: 'workflow', params: { id: workflow.id } }">
          {{workflow.name}}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'WorkflowList',
    data () {
      return {
        workflows: [
          {
            id: 1,
            name: 'Workflow 1'
          },
          {
            id: 2,
            name: 'Workflow 2'
          }
        ]
      }
    }
  }
</script>

示例一：为节点添加自定义样式

我们可以利用jsplumb提供的事件回调方法来实现为节点添加自定义样式。比如我们可以设置节点在鼠标移入时变为可编辑状态，鼠标移出时变回原来的状态。

<template>
  <div id="workflow">
    <div v-for="node in nodes" :key="node.id" :id="node.id" class="node" @mouseenter="onMouseEnterNode(node)" @mouseleave="onMouseLeaveNode(node)">
      {{node.name}}
    </div>
  </div>
</template>

<script>
  import jsPlumb from 'jsplumb'

  export default {
    name: 'Workflow',
    data () {
      return {
        nodes: [
          {
            id: 'node1',
            name: 'Node 1'
          },
          {
            id: 'node2',
            name: 'Node 2'
          },
          {
            id: 'node3',
            name: 'Node 3'
          }
        ]
      }
    },
    mounted () {
      var instance = jsPlumb.getInstance()

      // 初始化节点
      this.nodes.forEach(node => {
        var div = document.getElementById(node.id)
        instance.draggable(div)
        instance.makeSource(div, {
          // 这里可以设置源节点相关参数
        })
        instance.makeTarget(div, {
          // 这里可以设置目标节点相关参数
        })
      })

      // 保存节点状态
      this.nodes.forEach(node => {
        node.originalClassName = document.getElementById(node.id).className
      })
    },
    methods: {
      onMouseEnterNode (node) {
        document.getElementById(node.id).className = 'node-editable'
      },
      onMouseLeaveNode (node) {
        document.getElementById(node.id).className = node.originalClassName
      }
    }
  }
</script>

<style>
  .node {
    width: 100px;
    height: 50px;
    border: 1px solid gray;
    border-radius: 4px;
    text-align: center;
    padding-top: 15px;
    cursor: move;
  }

  .node-editable {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
  }
</style>

示例二：设置连线的颜色和样式

我们可以利用jsplumb提供的API来设置连线的颜色和样式。比如我们可以设置不同类型的连线颜色和样式不同。

<template>
  <div id="workflow">
    <div id="node1" class="node">
      Node 1
    </div>
    <div id="node2" class="node">
      Node 2
    </div>
    <div id="node3" class="node">
      Node 3
    </div>
  </div>
</template>

<script>
  import jsPlumb from 'jsplumb'

  export default {
    name: 'Workflow',
    mounted () {
      var instance = jsPlumb.getInstance({
        PaintStyle: {
          strokeWidth: 2,
          stroke: 'gray'
        },
        Connector: ['Flowchart', {gap: 10}],
        Anchors: ['Right', 'Left'],
        Endpoint: 'Blank',
        EndpointStyle: { radius: 4 }
      })

      instance.connect({
        source: 'node1',
        target: 'node2',
        paintStyle: {stroke: 'blue'}
      })

      instance.connect({
        source: 'node2',
        target: 'node3',
        paintStyle: {stroke: 'green'}
      })
    }
  }
</script>

<style>
  .node {
    width: 100px;
    height: 50px;
    border: 1px solid gray;
    border-radius: 4px;
    text-align: center;
    padding-top: 15px;
    cursor: move;
  }
</style>

至此，我们已经完成了“vue+jsplumb实现工作流程图的项目实践”的详细讲解。