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

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

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/stavinli/workflow-vue3
• Owner: StavinLi
• Created: 2022-10-25T09:13:31.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-04-02T02:16:41.000Z (over 2 years ago)
• Last Synced: 2025-01-10T22:44:43.371Z (over 1 year ago)
• Language: Vue
• Size: 1.4 MB
• Stars: 794
• Watchers: 15
• Forks: 165
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

workflow钉钉审批流程设置，基于vue开发。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 )

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

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

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

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

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

 

#### 项目介绍

- UI钉钉风格

- 技术点

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

- 主要功能点

2. 界面缩放

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

```javascript



	


    {{nowVal}}%

    




```

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

 

    


        


            


                

                    {{label}}

                

                ...

```

5. 节点新增

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

```javascript



    

          


              

                  


                      

                  

                  
审批人

              

              

                  


                      

                  

                  
抄送人

              

              

                  


                      

                  

                  
条件分支

              

          

          ...

```

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) {

        this.tipList.push({ name: nodeName, type: ["","审核人","抄送人"][type] })

    }

    this.reErr(childNode)

} else if (type == 3) {

    this.reErr(childNode)

} else if (type == 4) {

    this.reErr(childNode)

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

        if (conditionNodes[i].error) {

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

        }

        this.reErr(conditionNodes[i])

    }

}

```

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

```javascript


```

#### 项目安装

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

#### 项目运行 node14.20.1

> 1.环境依赖  `npm i`

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

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