A great Vue process designer

Time:2021-9-19

Hello everyone, I am a small editor who broke my heart for the majority of programmers. It is my goal to recommend a gadget / source code every day, fill your favorites, and share a small skill every day, so that you can easily save development efficiency and achieve no overtime, no staying up late and no hair loss!

  today, Xiaobian recommends a process designereasy-floweasy-flowThe process designer based on Vue + elementui + jsplumb realizes node dragging through vuedraggable plug-in.

Function introduction

  • Supports dragging and adding nodes
  • Click the line to set the conditions
  • Support flow chart for loading given data
  • Support canvas dragging
  • Support line style, anchor point and type custom override
  • Support force map

How to integrate

  • Find package.json in your Vue project and introduce the following dependencies (no additional jsplumb is needed)

      "element-ui": "2.9.1",
      "lodash": "4.17.15",
      "vue": "^2.5.2",
      "vue-codemirror": "^4.0.6",
      "vuedraggable": "2.23.0"
  • Copy the easy flow / SRC / components / EF directory to a directory of your project (such as / SRC / views)
  • Modify main.js and introduce elementui and easy flow styles

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Import '@ / is the copied directory. SRC should not write / EF / index. CSS'
    Vue.use(ElementUI, {size: 'small'})

data format

{
    Name: 'process d',
    nodeList: [
        {
            id: 'nodeA',
            Name: 'process D-Node a',
            type: 'task',
            left: '18px',
            top: '223px',
            ico: 'el-icon-user-solid',
            state: 'success'
        },
        {
            id: 'nodeB',
            type: 'task',
            Name: 'process D-Node B',
            left: '351px',
            top: '96px',
            ico: 'el-icon-goods',
            viewOnly: true,
            state: 'error'
        },
        {
            id: 'nodeC',
            Name: 'process D-Node C',
            type: 'task',
            left: '354px',
            top: '351px',
            ico: 'el-icon-present',
            state: 'warning'
        }, {
            id: 'nodeD',
            Name: 'process d - node d',
            type: 'task',
            left: '723px',
            top: '215px',
            ico: 'el-icon-present',
            state: 'running'
        }
    ],
    lineList: [{
        from: 'nodeA',
        to: 'nodeB',
        Label: 'line, custom line style, fixed anchor',
        connector: 'Straight',
        anchors: ['Top', 'Bottom'],
        paintStyle: {strokeWidth: 2, stroke: '#1879FF'}
    }, {
        from: 'nodeA',
        to: 'nodeC',
        Label: 'Bezier curve, fixed anchor',
        connector: 'Bezier',
        anchors: ['Bottom', 'Left']
    }, {
        from: 'nodeB',
        to: 'nodeD',
        Label: 'default connection style, dynamic anchor'
    }, {
        from: 'nodeC',
        to: 'nodeD',
        Label: 'default connection style, dynamic anchor'
    }
    ]
}

start-up

#Download project
git clone  https://github.com/BiaoChengLiu/easy-flow.git

#Install dependent packages
npm install

#Start
npm run dev

#Access address
 http://localhost:8080

screenshot

A great Vue process designer

A great Vue process designer

A great Vue process designer

ending

   I’ll share this issue here. I’m a small editor, Nanfeng, focusing on sharing fun, interesting, novel and practical open source projects, developer tools and learning resources!
I hope to learn and communicate with you all. Welcome to my official account.[GitHub navigation station]