yiuman / bpmn-vue-activiti Goto Github PK

基于Vue3.x + Vite + bpmn-js + element-plus + tsx 实现的Activiti流程设计器(Activiti process designer based on Vue3.x + Vite + BPMN-JS + Element-Plus + TSX implementation)

Home Page: https://yiuman.github.io/bpmn-vue-activiti/

License: MIT License

JavaScript 1.28% HTML 2.66% TypeScript 90.10% CSS 5.04% Dockerfile 0.31% Shell 0.62%

vue-next vue element-plus bpmn bpmn-js activiti tsx vite vue3 process

bpmn-vue-activiti's Introduction

bpmn-vue-activiti

项目简介

基于Vue3.x + Vite + bpmn-js + element-plus + tsx 实现的Activiti流程设计器

😃我是一个活生生的例子

😙 如果此项目对你有帮助，请记得给我一个小星星⭐

后端activiti7集成，请戳这里

友情链接： 蜜月大佬的vue2版本实现，请戳这里

项目特性

全新的vue技术栈+tsx
全数据驱动的模型组件，实现数据逻辑与组件的完全解耦

项目说明

bpmn相关的配置在src/bpmn目录下

conifg

此目录下为bpmn相关节点的属性的数据驱动配置及相关逻辑（即主界面右手边的属性配置界面）
I18n

翻译模块，里面定义了bpmn相关的中文翻译
resources

定义此了activiti的moddle的Json,用于扩展bpmn适配activiti,提供给modeler使用
store.ts

整个上下文的状态管理，里边获取并处理当前活动节点，初始化modeler，刷新节点等相关的主要操作

如果你需要扩展到你的项目中，你只需要在config/modules找到相关节点，并配置定义好你需要扩展的属性及实现相关逻辑即可，可参考现有实现的配置。

组件说明：相关使用到的组件都在src/components目录下

bpmn-actions 为主页面下按钮就按钮执行逻辑的组件
button-render 用于渲染iconfont按钮的组件
dynamic-binder 全数据启动的核心组件，用于对象的模型的组件、数据、取值、设值的解耦，在此项目中用于配置相关节点的属性配置
modeler bpmn-modeler
panel 流程节点的属性配置面板
sublist 基于element-plus ElTable的可编辑表格

项目截图

bpmn-vue-activiti's People

Contributors

Stargazers

Watchers

Forkers

ningsy1017 changsongyao tibo-vip kick-pixel cocochuxing jxwright xintao222 fengsiyu1234 sydonay adleader tongfuhu 929496959 zwn007hcy hiliyongke yinwh79 ruanzy nullporinter lichun168 gtiger666 torns lulusayhi lvlvda hejun5448 xiehongfei lianggaouser brucedchen1991 signupyang gduxj iallionjht chenrongxu duanfangrui homeless2010 zhaopufeng yanzhao1 dystudio luhai1 debugoftheroad 824759494 cheneygan hongjunshi cgb-workflow xinghuaqiang dmcdoudou zhonglh snowman828 lhztop zhanll1986 whzxxyf geekcheng salmongit hhpop massinger a7enger hhc87 kinbod huangzhaorongit chordmo fuxiangrong xusyang wangrognjie himozhang qau2264 liuhuawu zhuzhuzhenbang huangyiman dowhere imxiexie urbanecat poundhu zk923852367 joslin1215 p1an8 daoos zyu yangtaoxf wl794321 nm-cmd gong9 liuhaogui zgf523 trioinsight wwwk dbcloud-team zcc0511 aldler tanmeijun muze-xu wangcongxing basd1995 hh481 cosolar archyink 582635133 yuanan darrenni snamper cuichengjie sramler jacobguan changsongyang

bpmn-vue-activiti's Issues

如何在用户任务里给处理人和候选人下拉赋值备选项呢

Panel.tsx页面无法正常显示，什么原因？？？

    return () => (
      <>
        {contextState.businessObject && contextState.activeBindDefine && (
          <>
            <div
              class="bpmn-panel-shrinkage"
              onClick={() => (panelState.shrinkageOff = !panelState.shrinkageOff)}
            >
              {panelState.shrinkageOff ? (
                <i class="el-icon-s-fold" />
              ) : (
                <i class="el-icon-s-unfold" />
              )}
            </div>
            <div class="bpmn-panel" v-show={!panelState.shrinkageOff}>
              <div class="title">{bpmnContext.getActiveElementName()}</div>
              <ElCollapse class="bpmn-panel-collapse" v-model={panelState.elCollapses}>
                {contextState.activeBindDefine.map((groupItem) => {
                  return (
                    <ElCollapseItem name={groupItem.name} v-slots={getSlotObject(groupItem)} />
                  );
                })}
              </ElCollapse>
            </div>
          </>
        )}
      </>
    );

这部分代码
contextState.activeBindDefine永远是NULL，其结果返回也是NULL，导致panel部分不能正常显示。

这个要怎么集成到我自己的Vue项目里？

项目的开源协议是什么？

人员任务的人员设置里候选人不能手动输入

你好，人员任务的人员设置里候选人不能手动输入，无法直接输入UEL表达式，只能选张三，李四这种无意义的角色？

请问可以整成组件发布到npm上嘛

我自己将代码下载想试着打包成组件，然后我在vite.config.ts里面配置了build.lib打包时候就会报错Invalid value "umd" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.
大佬，能帮忙看下嘛

支持camunda吗

请问会持续更新吗？

如题

流程图的数据能转为xml吗

在编辑器里导入之前编辑好的流程，activiti:candidateUsers无法回显

之前编辑流程在候选人里设置了人员，但是保存后，重新导入流程xml后，候选人activiti:candidateUsers设置的值不能回显

没有activiti:FormProperty属性

我尝试自己添加

interface FromPropertyElement {
$type: string;
id: string;
type: string;
$attrs: FromPropertyAttrsElement;
}

interface FromPropertyAttrsElement {
name: string;
}

/**

表单属性组配置
*/
export const FormProperties: GroupProperties = {
name: '表单属性',
icon: 'el-icon-document-add',
properties: {
'extensionElements.formProperty': {
component: SubList,
columns: [
{
prop: 'id',
label: '编码',
align: 'center',
},
{
prop: 'type',
label: '类型',
align: 'center',
},
{
prop: 'name',
label: '名称',
align: 'center',
},
],
rules: {
id: [{ required: true, message: '属性名不能为空' }],
type: [{ required: true, message: '属性值不能为空' }],
name: [{ required: true, message: '属性值不能为空' }],
},
getValue: (businessObject: ModdleElement): Array => {
return businessObject?.extensionElements?.values
?.filter((item: FromPropertyElement) => item.$type === 'activiti:FormProperty')
.map((elem: FromPropertyElement) => {
return { id: elem.id, type: elem.type, name: elem?.$attrs?.name };
})
},
setValue(businessObject: ModdleElement, key: string, value: []): void {
const bpmnContext = BpmnStore;
const moddle = bpmnContext.getModeler().get('moddle');
const properties = moddle.create(activiti:FormProperty, {
values: value.map((attr: { id: string; value: unknown }) => {
return moddle.create(activiti:FormProperty, { name: attr.name, value: attr.value });
}),
});
bpmnContext.updateExtensionElements('activiti:Properties', properties);
},
},
},
};

getValue 是可以的。
setValue 不知道这么搞

请问有QQ群没。