https://github.com/stavinli/workflow-react

仿钉钉审批流程设置react版本
https://github.com/stavinli/workflow-react

Last synced: over 1 year ago
JSON representation

仿钉钉审批流程设置react版本

• Host: GitHub
• URL: https://github.com/stavinli/workflow-react
• Owner: StavinLi
• Created: 2023-03-23T07:58:28.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2025-01-08T08:44:16.000Z (over 1 year ago)
• Last Synced: 2025-03-29T12:04:16.255Z (over 1 year ago)
• Language: JavaScript
• Size: 7.33 MB
• Stars: 116
• Watchers: 3
• Forks: 30
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


### workflow钉钉审批流程设置-react版本

workflow钉钉审批流程设置，基于react开发。QQ交流群①:639251756  QQ交流群②:790780565

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191116144905578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Mjg1MTkz,size_16,color_FFFFFF,t_70 )

-  [开源地址react版本 https://github.com/StavinLi/Workflow-React](https://github.com/StavinLi/Workflow-React) github点个星吧！

-  [开源地址vue2版本 https://github.com/StavinLi/Workflow](https://github.com/StavinLi/Workflow) github点个星吧！

-  [开源地址vue3版本 https://github.com/StavinLi/Workflow-Vue3](https://github.com/StavinLi/Workflow-Vue3) github点个星吧！

-  [预览地址 https://stavinli.github.io/Workflow-React/build/index.html#/](https://stavinli.github.io/Workflow-React/build/index.html#/) 

-------------------

 

#### 项目介绍

- UI钉钉风格

- 技术点

1. 组件自调用+递归处理，按树状结局处理审批流程问题

- 主要功能点

2. 界面缩放

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191116145339223.jpg)

```javascript



    
 zoomSize(1)}>

    {curSize}%

    
 zoomSize(2)}>



```

3. 节点设置（包括审批人、发起人、抄送人、条件设置）

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200304140232374.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Mjg1MTkz,size_16,color_FFFFFF,t_70#pic_center)

```javascript


    


        


            


                

                ...

```

5. 节点新增

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191116145355289.png)

```javascript



     addType(1)}>

        


            

        

        
审批人

    

     addType(2)}>

        


            

        

        
抄送人

    

     addType(4)}>

        


            

        

        
条件分支

    



```

5.错误校验

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200304140011896.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Mjg1MTkz,size_16,color_FFFFFF,t_70)

```javascript

let { type, error, nodeName, conditionNodes } = childNode;

if (type === 1 || type === 2) {

    if (error) {

        data.push({

            name: nodeName,

            type: ["", "审核人", "抄送人"][type],

        })

    }

    reErr(childNode, data);

} else if (type === 3) {

    reErr(childNode, data);

} else if (type === 4) {

    for (var i = 0; i < conditionNodes.length; i++) {

        if (conditionNodes[i].error) {

            data.push({ name: conditionNodes[i].nodeName, type: "条件" })

        }

        reErr(conditionNodes[i], data);

    }

    reErr(childNode, data);

}

```

6.模糊搜索匹配人员、职位、角色

```javascript


```

#### 项目安装

> git clone https://github.com/StavinLi/Workflow-React.git 点个赞吧！

#### 项目运行

> 1.环境依赖  `npm i`

> 2.本地运行 `npm run serve` 

> 3.打包运行 `npm run build`