# wfdesigner

> 工作流vue - Konvajs版

Latest version **0.5.0** (published 2019-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install wfdesigner
pnpm add wfdesigner
yarn add wfdesigner
bun add wfdesigner
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2019-11-21 |
| First published | 2019-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 213.5 KB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| Author | liujiaheng |
| Maintainers | liujiaheng |
| Keywords | workflow |

## Links

- npm: https://www.npmjs.com/package/wfdesigner
- npm.io page: https://npm.io/package/wfdesigner

## Dependencies (11)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [brace](https://npm.io/package/brace.md) ^0.11.1
- [konva](https://npm.io/package/konva.md) ^4.0.16
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [vue-uuid](https://npm.io/package/vue-uuid.md) ^1.1.1
- [vue-axios](https://npm.io/package/vue-axios.md) ^2.1.5
- [vue-konva](https://npm.io/package/vue-konva.md) ^2.0.11
- [element-ui](https://npm.io/package/element-ui.md) ^2.12.0
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.3
- [guid-typescript](https://npm.io/package/guid-typescript.md) ^1.0.9

## Recent versions

- 0.5.0 (latest) — 2019-11-21
- 0.4.0 — 2019-11-21
- 0.3.0 — 2019-11-21
- 0.2.0 — 2019-11-21
- 0.1.0 — 2019-11-21

## README

# WorkFlowDesigner
工作流vue - Konvajs版

## WFDesigner组件
双向数据绑定组件，当WFDesigner的参数发生改变时，设计器会更新流程图，但是设计器更新流程图时，也会去改变传入的参数的。
如何使用：

``` code
<template>
  <div>
    <wf-designer :workflow="wf" ref="wfDesigner" />
    <el-button @click="getwf">保存工作流</el-button>
  </div>
</template>

<script>
import WFDesigner from "../components/WFDesigner.vue";

export default {
  components: {
    "wf-designer": WFDesigner
  },
  data() {
    return {
      wfs: [],
      wf: {
        WFNodes: [],
        lines: [],
        toolTips: [],
        id: "",
        name: "",
        desc: "",
        createUserId: "",
        updateUserId: "",
        createUserName: "",
        updateUserName: "",
        createTime: "",
        updateTime: "",
        version: "",
        nodeInfos: []
      }
    };
  },
   mounted() {
       this.wf.WFNodes = [];
    this.wf.lines = [];
    this.wf.toolTips = [];
    this.wf.id = "";
    this.wf.name = "";
    this.wf.desc = "";
    this.wf.createUserId = "";
    this.wf.updateUserId = "";
    this.wf.createUserName = "";
    this.wf.updateUserName = "";
    this.wf.createTime = "";
    this.wf.updateTime = "";
    this.wf.version = "";
    this.wf.nodeInfos = [];
   },
   methods: {
    getwf(e) {
        //获取流程设计器中的流程图信息 等效于 this.wf
      console.log(this.$refs.wfDesigner.getWorkflow());
      console.log(this.wf);
    }
   }
```

---
_Source: https://npm.io/package/wfdesigner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._