vue实现审批流

置顶榴莲不好吃

已于 2024-05-15 15:50:14 修改

阅读量1.9w

点赞数 24

分类专栏： vue 文章标签： vue

于 2022-06-14 09:22:02 首次发布

本文链接：https://blog.csdn.net/sllailcp/article/details/125265256

版权

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何使用Vue来封装审批流功能，包括审批、抄送、自定义模块等，并实现了条件节点、操作节点、结束节点等模块的递归布局。代码已上传至GitHub并发布为npm包，支持npm安装。在使用时需要注意项目需支持jsx。文章提供了详细的开发思路、源码示例及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue实现审批流

简介

审批流在工作成是很常见的一个功能模块,我们怎么用代码实现呢,我选择用vue来封装成一个插件:

功能拆分

由于我们的产品提的需求是做一个和钉钉一样的审批流模块,UI出图却是参照了企业微信,
最终结合订订和企业微信的优点,
1.审批,抄送,以及自定义模块的新增删除
2.复制条件,左右交换条件,根据优先级更新条件的位置
3.提交的时候,每条流程,如果有空节点感叹号标识出来
4.缺少审批人的流程,整条流程用红线标出来,提高用户体验.
最终成品如下图,也可以点这里可查看
在这里插入图片描述

开发思路

1.首先可以将下图拆分成多个模块
条件节点模块,操作节点模块,结束模块,分支模块等,
2.每一层都可以添加条件模块,且条件模块是一样的,所以此处是需要递归实现的
我的模块拆分如下目录:
在这里插入图片描述
最终代码结构如下:

<NodeWraper>
 <NodeContainer>
   <BranchBox>
     <NodeContainer>
       <ColBox>
         <NodeContainer>...</NodeContainer>
         <NodeWraper>...</NodeWraper>
       </ColBox>
     </NodeContainer>
   </BranchBox>
 </NodeContainer>
 <NodeWraper>...</NodeWraper>
</NodeWraper>
<EndNode/>

代码就不一一贴上来了,源码都放在了github上,可自行下载查看.
源码
 案例

npm安装使用

将代码封装成复用性高的插件,发布到了npm上,想通过npm安装的小伙伴可以运行下面命令

npm i -S approval-flow

使用:

import { OfficeFlow} from "approval-flow";
<OfficeFlow :add-nodes="adddata" :node="cnode" @on-add="onAdd" @on-choose="onChoose" />

源码

插件源码
 案例源码
 案例线上体验戳这里

注意项

插件是由vue3+jsx写的,所以安装的时候确保项目里面支持jsx.
如果您的项目确实不支持jsx,或者你可以尝试使用打包后的js文件.

<OfficeFlow :add-nodes="adddata" .../>
<script>
import {OfficeFlow} from 'approval-flow/approval-flow.umd.min.js'
import "approval-flow/approval-flow.css"
components: {
  OfficeFlow: OfficeFlow
},
</script>