guozhaolong / wfd-vue Goto Github PK

View Code? Open in Web Editor NEW

969.0 39.0 254.0 1.98 MB

flowable workflow designer for Vue base on @antv/g6

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

JavaScript 66.26% Vue 33.40% HTML 0.34%

workflow flowable g6 g6-editor diagram

wfd-vue's Introduction

Workflow Designer for Vue

Online Demo

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

Usage

<template>
  <div id="app">
    <wfd-vue ref="wfd" :data="demoData" :height="600" :users="candidateUsers" :groups="candidateGroups" :categorys="categorys" :lang="lang" />
  </div>
</template>

<script>
import WfdVue from 'wfd-vue'
export default {
  name: 'app',
  components:{
    WfdVue
  },
  data () {
    return {
      lang: "zh",
      demoData: {...},
      candidateUsers: [...],
      candidateGroups: [...],
      categorys: [...]
    }
  }
}
</script>

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

wfd-vue's People

Contributors

Stargazers

Watchers

Forkers

skyyouare lgb020 dongongfeiyu pengzz007 haibotop paulwang001 fgcp020 keyreply zxtbaty karayakar slyang520 ldxcd77 panxiangwei zjzcn1 newgithubboy pragmatron rio-li shenqiangbin weenong shell22 winken168 tidehc domch2000 lettersporter as4979550 wison-wu zoomvr gnsilence uamsunshine adamvvyau jisheng100 dwtcourses readilychen loongmxbt buzzit-jimmytse scj7508 mrlonely1986 jameszws dian884 sculptor232 cklwblove 364988343 a-la-shen-ding wa867864630 yucz luolineinei axingshow hbyufan laogong5i0-2 zhouhailin dystudio huangjc0715 sharklet liangbaika baoxianggao qinzitong darrendanielday vickkyy wuyahui gdmec07140551 wzcode ignore-anonymous shaipe athena-flow vliuchao rattanyixu lourain winzhong gitlapple stevenmoks luyulong cranehe tkliuxing delibit hackandquan hadoop835 coldwind6 wangjia5693 xbestwiz withgame diaskhan szliuyujie mtpas mgbin088 hlovingness hsh0107 liujing2012 caesammi liyinglihuannan cyh90 crisis111 susheng1982 haijiehu hekexue dajiaoyun jamesxiao2016 yingzhi8 utopia1985 hangaoke1 lauchangtao

wfd-vue's Issues

加入背景咋不起作用

const grid = new Grid();

plugins = [ this.cmdPlugin,toolbar,addItemPanel,canvasPanel,grid];

G6 3.8.0版本，自定义edge报错

使用自定义edgeflow-polyline-round时,报出上面截图错误，换用3.5.2亦是如此，请教一下是哪一环节出的问题，手动拖拽添加edge正常，初始化渲染时报错，拖动节点时报错

请教大佬：是不是save方法是没有的？怎样获取每个节点的所有参数貌似通过model来不知道怎样实现？

移植到Electron中部分报错

楼主好，
我将工作代码移植到electron工程中，然后控件整体可以加载出来：

不过中间流程图那部分就没渲染出来，报错信息如下

跟了下，大概问题出在`

这个newMatrix无法转换出来，git的demo是正常可用的，能请问下这个大概可能是啥原因么？

IE9是否可支持呢

大牛：请教一下
google正常
IESCRIPT1028: SCRIPT1028: Expected identifier, string or number
chunk-vendors.js (1331,1)

编译报错

anchor.js G6.shape.registerFactory G6.shape.registerAnchor

shape应该是大写 Shape

PR- 审批节点分配人员或者group由下拉框改成带选择功能的弹出框

hello：

我关注这个组件有段时间了，觉得很不错，从做工作流的经验来看，审批节点分配常见的有，人员，角色，以及对应的部门负责人等，常规角色和对应的部门可以抽象成group。

通常来说，待选择人员或者group很多，如果能改成带筛选功能的弹出框，易用性会更高些，角色和部门负责人这两个分类能再细分单列出来，更好。

请考虑下这个需求。谢谢。

怎么处理误操作呢，比如连线，无法右击删除

目前非常影响体验是的，误操作，比如连线，或者拖动节点，但是无法回撤，请问题需要怎么解决呢？？？

开始节点以及结束节点，点中间图标按住无法拖拽，只有点边缘按住才可以拖拽。

如题，在画布里面开始节点和结束节点，点中间图标按住时无法拖拽，只有点边缘按住才可以拖拽。

代码：目前最新版，刚拉的代码。
电脑： mac
浏览器：chrom

请问能不能修改更新数据？

我直接let json = this.$refs['wfd'].graph.save()获取数据
直接赋值 this.demoData = json
发现这样并不能正常更新数据？是什么原因？

如何在已有的画布上载入新的JSON？

我直接更改wfd-vue的data会报错：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "data": "TypeError: Cannot read property 'shape' of undefined"

found in

---> <WfdVue>
       <ElDialog> at packages/dialog/src/component.vue
         <Flow> at src/views/flow/index.vue
           <AppMain> at src/layout/components/AppMain.vue
             <Layout> at src/layout/index.vue
               <App> at src/App.vue
                 <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then(异步)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
createData @ index.vue?6ced:205
click @ index.vue?150e:286
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
handleClick @ element-ui.common.js?5c96:9417
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'shape' of undefined
    at base.onMouseUp (drag-canvas.js?398d:115)
    at Graph.method (wrap-behavior.js?eafe:15)
    at doEmit (index.js?7fa2:61)
    at Graph.EventEmitter.emit (index.js?7fa2:64)
    at VueComponent.data (Wfd.vue?c53b:105)
    at Watcher.run (vue.runtime.esm.js?2b0e:4568)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

同类项目，可否增加一个友链？

之前也给这个项目提了一些 PR，但是仍然遇到一些痛点，最后还是放弃了，比如：

节点类型不全，节点类型实在太多了，全部自定义一遍太费劲了
面板属性不全，无法满足我司的业务需求
面板属性转 xml 是依靠字符串拼接，容易出错
必须把 g6 的节点信息交给后端存储，这样才能再次编辑，因为无法逆向解析 xml

最后我写了一个新的 modeler，直接基于 bpmn.io ，目前功能已经比较全面了，兄台可否在readme增加一个友链，相信能帮助到不少人。

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

点击保存，只有一次生效

this.$refs['wfd'].graph.save()
this.$refs['wfd'].graph.saveXML()
如果图改变了，比如添加了节点，这两个保存都只是第一次行，用过一次保存后，图的变化，就停留在了第一次点击保存的时候了，再往后就不行了

firefox52版本脚本错误

我在firefox52下，使用g6 正常，加入您的这个组件出现了错误
SyntaxError: invalid property id

["./src/components/Custom/Wfd/components/Wfd.vue？vue&type=script&lang=js&"]@http://localhost:8000/56.js:117:1
webpack_require@http://localhost:8000/app.js:770:12
hotCreateRequire/fn@http://localhost:8000/app.js:130:20
@webpack-internal:///./src/components/Custom/Wfd/components/Wfd.vue:3:91
["./src/components/Custom/Wfd/components/Wfd.vue"]@http://localhost:8000/56.js:105:1

大概知道什么地方出问题了吗？

G6 3.8.0中节点拖拽至可视区域外报错

G6 3.8.0版本，当节点被拖拽至可视区域外，辅助线消失后，松开，移动到graph时，报错，然后整体失效

antv g6 能升级到最新版本吗

antv g6 能升级到最新版本吗? 现在的antv g6版本太低了，已经找不到官方文档了

controlPoint subProcess这两个文件是干啥的呀

闲来无事看看大佬的代码发现多了controlPoint subProcess这两个文件有什么作用呀

将你的项目合到我的项目中

我的项目：
webpack:3.6
vue-loader:13.7
babel-loadder:7.1

因为你的项目webpack：4，vue-loader:15,babel-loader:8
导致如下问题

导入报错

我把你的代码直接考进我的项目里，但是图上的地方那种导入报错，注释掉用import就好了，但是不是导入的Item,是要装什么loader么，求大哥解救啊~

G6升级到3.7.0了，好像偷偷改了API，然后点击节点就报错了

G6都不说改什么API，太万恶了😩

请问从左边拖过画布，添加节点的时候，直接卡住不能添加怎么办？

如图所示，添加节点的时候，一定几率这样卡住，然后就不能恢复了，只能重新刷新才可以恢复正常，没有报错什么的。
这个时候还能操作节点，就是不能再添加了，不管怎么拖都是这样卡住不能添加

this.$refs['wfd'].graph.save()方法报错。

如图本人将demoData清空，尝试自己新定义一个流程

添加按钮异步调用this.$refs['wfd'].graph.save()如下图

点击按钮调用函数浏览器报错报错：

貌似this.$refs['wfd'].graph.save()返回值缺少“shape”属性
是不是我调用方式有问题?

锚点处添加描述信息

想在锚点处添加描述信息，自己在createAnchor方法中尝试，好像只能添加一个节点的，请教一下有什么好的解决方法吗

function  createAnchor(index,style,group) {
  const anchorContainer = group.addGroup();
  const anchor = new Item({
  // ......
  });
  //  .......
  anchor.showHotpot = function () {
    hotpot = anchorContainer.addShape('marker', {
      attrs: {
        ...style,
        ...editorStyle.anchorHotsoptStyle,
        isInAnchor:style.y < 0
      }
    });
    anchorContainer.addShape('text', {
      attrs: {
        id: 111,
        x:  style.x,
        y:  style.y - 20,
        textAlign: 'center',
        textBaseline: 'middle',
        text: 'hello',
        fill: '#333333'
      }
    });
 }
 return anchorContainer;
// ........
}

运行报错，提示找不到 @antv/g6/src/shape/single-shape-mixin 这个文件

These dependencies were not found:

@antv/g6/src in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_babel-loader@8.0.6@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader
/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.9.0@vue-loader/lib??vue-loader-options!./src/components/Wfd.vue?vue&type=script&lang=js&
@antv/g6/src/item/item in ./src/item/anchor.js
@antv/g6/src/shape/single-shape-mixin in ./src/shape/anchor.js

To install them, you can run: npm install --save @antv/g6/src @antv/g6/src/item/item @antv/g6/src/shape/single-shape-mixin

运行报告，提示找不到到 @antv/g6/src/shape/single-shape-mixin 这个文件。
请问是不是引用的@antv/g6 版本有问题？配置文件里的版本是 "@antv/g6": "^3.1.3",

请教一下，怎么动态配置节点显示的锚点信息，目前项目中节点显示的锚点数是在配置文件中固定的，不同类型的节点有不同的锚点数目。
考虑实现这一一个功能，通过一个下拉框，将节点需要显示的锚点数动态更新到节点上。下拉框选定的值以后，将对应的锚点数的树组传入，数组中每个元素未锚点的位置信息，然后再更新节点。目前想到的做法是选择下拉框时，将图上的node节点获取到，遍历获取到的node节点数组，给每个节点的model中添加anchorPoints为选择的锚点数组，然后更新node，但是并不生效。。。
请教下应该怎么实现这种功能？

部署后报错

本地环境部署好之后，运行就报错

Uncaught SyntaxError: Unexpected token ...
at Object../node_modules/@antv/g6/src/util/graphic.js (chunk-vendors.js:1331)
at webpack_require (app.js:786)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/@antv/g6/src/util/index.js:10)
at Object../node_modules/@antv/g6/src/util/index.js (chunk-vendors.js:1353)
at webpack_require (app.js:786)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/@antv/g6/src/shape/shape.js:7)
at Object../node_modules/@antv/g6/src/shape/shape.js (chunk-vendors.js:1298)
at webpack_require (app.js:786)

运行报错

Module parse failed: Unexpected token (78:10)
You may need an appropriate loader to handle this file type.
| x: -width / 2,
| y: -height / 2,
| ...icon
| },
| className: 'ellipse-icon'

@ ./node_modules/@antv/g6/src/shape/nodes/index.js 3:0-20
@ ./node_modules/@antv/g6/src/shape/index.js
@ ./node_modules/@antv/g6/src/item/item.js
@ ./node_modules/wfd-vue/dist/wfd-vue.umd.min.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/Process/index.vue
@ ./src/views/Process/index.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://127.0.0.1:9090 webpack/hot/dev-server ./src/main.js

error in ./node_modules/@antv/g6/src/shape/nodes/triangle.js

Module parse failed: Unexpected token (86:10)
You may need an appropriate loader to handle this file type.
| x: iconW,
| y: iconH,
| ...icon
| },
| className: 'triangle-icon'

@ ./node_modules/@antv/g6/src/shape/nodes/index.js 5:0-21
@ ./node_modules/@antv/g6/src/shape/index.js
@ ./node_modules/@antv/g6/src/item/item.js
@ ./node_modules/wfd-vue/dist/wfd-vue.umd.min.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/Process/index.vue
@ ./src/views/Process/index.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://127.0.0.1:9090 webpack/hot/dev-server ./src/main.js

vue-typescript-admin-template 项目中引入wfd-vue 错

我在vue-typescript-admin-template 项目中引入wfd-vue（https://github.com/Armour/vue-typescript-admin-template），遇到以下依赖错，

实际上我已经安装了@antv/g6包，

ERROR Failed to compile with 3 errors 8:28:06 PM
These dependencies were not found:

@antv/g6/src in ./node_modules/wfd-vue/dist/wfd-vue.umd.min.js
@antv/g6/src/item/item in ./node_modules/wfd-vue/dist/wfd-vue.umd.min.js
@antv/g6/src/shape/single-shape-mixin in ./node_modules/wfd-vue/dist/wfd-vue.umd.min.js

To install them, you can run: npm install --save @antv/g6/src @antv/g6/src/item/item @antv/g6/src/shape/single-shape-mixin

这个错是wfd-vue自身引用造成的还是我引入的方式不对？

谢谢。

How to set value for Process Name during process revising?

How to pass value to process name during initial wfd-vue component?

Thanks.

请问怎么能给节点嵌入操作按钮

请问怎么能给节点嵌入操作按钮，有偿答谢，大佬，我wx:gc1360291473

运行 npm run build-example 时报错

你好，我clone项目下来在本地运行npm run serve 可以正常工作，但是我运行
npm run build-example 时，报错，如上截图

G6 数据模型自定义字段

// 注册模型卡片基类
Flow.registerNode('model-card', {
    draw(item) {
        const group = item.getGraphicGroup();
        const model = item.getModel();
        model.myData; // 定义自己的变量
        const width = 184;
        const height = 40;
        const x = -width / 2;
        const y = -height / 2;
        const borderRadius = 4;
        const keyShape = group.addShape('rect', {
            attrs: {
                x,
                y,
                width,
                height,
                radius: borderRadius,
                fill: 'white',
                stroke: '#CED4D9'
            }
        });
        
        // 自定义 myData
        group.addShape('text', {
            attrs: {
                text: myData,
                x: x + 52,
                y: y + 13,
                textAlign: 'start',
                textBaseline: 'top',
                fill: 'rgba(0,0,0,0.65)'
            }
        });

 componentData: {
            get() {
                return this.selectedModel.myData; // selectedModel 在page.on 点击node 获取的 model
            },
            set(value) {
                this.updateGraph('myData', value); // tempSelectedModel 组件定义的变量
                this.tempSelectedModel = null;
            }
        },

// 组件引用 componentData
<el-form label-width="60px">
                                    <el-form-item label="自定义：">
                                        <el-input v-model="componentData"/>
                                    </el-form-item>
                                </el-form>
// 组件绑定的 componentData 能赋值但是不能赋值在 model.componentData
// 但是很神奇 label 就可以赋值到 model.label 
// 场景就是 自定义数据 能赋值 接口拿回的数据 能回显到节点 刚刚不小心把上条删了 跪求大佬指点一二 下周提测卡住了

为啥我鼠标悬浮，没有可以操作连线呢？

请问怎么控制一个节点和一个节点之间只能连接一条线？

控制线只可以
节点1=>节点2；节点2=>节点1
只可以一次来回，节点1只允许连接一次节点2，节点2也是只可以连接一次节点1
如果还有节点3也可以连接节点3，但是也是只可以连接一次

请问这样的可以实现吗

G62.0 数据模型model 自定义

1.在自定义节点的时候使用 model.xxx 可以加上属性但是在组件使用computed赋值过程中有错误。
2.然后 save（）方法保存的数据没有 label字段但是我也定义了。业务需要用户编辑label 然后回显。
跪求大佬指点一二

在线实例中，放大与缩小的按钮提示错误

hi，大佬，在线实例中，放大与缩小的按钮文字提示错误了，放大对应的是缩小，按钮的功能是正常的。

更新边edge报错。

更新边edge报错。
选中边，通过一个颜色选择器选择颜色后，拿到选中边的model，对其中的style的stroke进行赋值，然后调用updataItem方法，不生效。refreshItem()也不生效。最后根绝改变节点属性的方法，拿到边edge的keyShape，然后使用keyShape.attr()对style的stroke进行赋值，在调用refreshItem（）依然不起作用。使用updateItem()时可以生效，但不能传递model值，否则也不生效。但是不传递model值会报source undefined的错误。