https://github.com/guozhaolong/wfd-vue

flowable workflow designer for Vue base on @antv/g6
https://github.com/guozhaolong/wfd-vue

diagram flowable g6 g6-editor workflow

Last synced: about 1 month ago
JSON representation

flowable workflow designer for Vue base on @antv/g6

• Host: GitHub
• URL: https://github.com/guozhaolong/wfd-vue
• Owner: guozhaolong
• Created: 2019-10-23T16:53:38.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-05-05T07:33:03.000Z (almost 3 years ago)
• Last Synced: 2025-04-02T08:17:26.621Z (about 1 month ago)
• Topics: diagram, flowable, g6, g6-editor, workflow
• Language: JavaScript
• Homepage: https://guozhaolong.github.io/wfd-vue/
• Size: 1.94 MB
• Stars: 1,038
• Watchers: 38
• Forks: 271
• Open Issues: 44
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - guozhaolong/wfd-vue - flowable workflow designer for Vue base on @antv/g6 (others)

README

        
## Workflow Designer for Vue

[![NPM Version](http://img.shields.io/npm/v/wfd-vue.svg?style=flat)](https://www.npmjs.org/package/wfd-vue)

[![NPM Downloads](https://img.shields.io/npm/dm/wfd-vue.svg?style=flat)](https://www.npmjs.org/package/wfd-vue)

![](https://img.shields.io/badge/license-MIT-000000.svg)

![image](https://github.com/guozhaolong/wfd-vue/raw/master/example/snapshots/1.jpg)

## Online Demo

https://guozhaolong.github.io/wfd-vue/

## Usage

```

  


    

  


import WfdVue from 'wfd-vue'

export default {

  name: 'app',

  components:{

    WfdVue

  },

  data () {

    return {

      lang: "zh",

      demoData: {...},

      candidateUsers: [...],

      candidateGroups: [...],

      categorys: [...]

    }

  }

}

```

## API

###### 属性

* data: 初始化数据

* height: 画布高度

* mode: view为只读，edit为可编辑

* lang: zh为中文，en为英文

* isView: 是否为预览模式（隐藏工具栏和属性栏）

* users: 选择审批人时对应的数据，数组内对象以id为键，name为值

* groups: 选择审批组时对应的数据，数组内对象以id为键，name为值

* categorys: 选择分类时对应的数据，数组内对象以id为键，name为值

###### 方法

* save(): 调用this.$refs['wfd'].graph.save()生成json

* saveXML(): 调用this.$refs['wfd'].graph.saveXML(createFile)生成Flowable XML，createFile参数是否同时生成xml文件，默认为true

* saveImg(): 调用this.$refs['wfd'].graph.saveImg(createFile)生成图片，createFile参数表示是否生成图片文件，默认为true，该函数返回值为图片base64

### Run Example

```

npm run serve

```

## 友情链接（flowable流程设计器，感谢@GoldSubmarine提供）

https://github.com/GoldSubmarine/workflow-bpmn-modeler