基于vue、ant-design-vue的自定义Antdv工作流组件_antdesign工作流,antd流程图资源-CSDN文库

共115个文件

vue：48个

js：21个

png：15个

版权申诉

程序开发

工作流

5星 · 超过95%的资源 132 浏览量 2023-06-26 17:50:40 上传评论 2 收藏 705KB ZIP 举报

在IT行业中，工作流系统是企业管理、自动化任务执行的关键组成部分，尤其在软件开发中，它可以帮助团队高效协作，实现业务流程的规范化。本项目“基于vue、ant-design-vue的自定义Antdv工作流组件”就是一个这样的解决方案，旨在提供一个高度可定制、功能丰富的Web工作流平台。我们要理解Vue.js，它是一个轻量级的前端框架，以其易学易用、高效性能和组件化特性受到开发者喜爱。Vue.js提供了强大的模板语法，使得界面构建更加直观，同时它的虚拟DOM技术确保了高性能的用户体验。 Ant Design Vue，简称Antdv，是Ant Design设计语言的Vue实现，它提供了一系列高质量的UI组件，帮助开发者快速构建美观的企业级应用。Ant Design Vue的设计理念注重实用性和一致性，使得开发者可以方便地集成到项目中，提升项目的专业感和用户体验。此项目的核心在于工作流组件的自定义设计。工作流（Workflow）是一种描述和控制业务过程的技术，它可以模拟现实世界中的各种流程，如审批流程、数据处理流程等。这个组件支持在线流程设计器，意味着用户可以直接在Web端绘制流程图，调整各个步骤的顺序和逻辑，极大地提升了流程设计的灵活性和效率。在线流程设计器通常包括拖放节点、连接线、预览等功能，使得非技术人员也能理解和修改流程。此外，该组件还集成了钉钉审批模式，钉钉是一款企业级通讯工具，其审批功能广泛应用于企业日常工作中。通过与钉钉的集成，可以实现工作流的无缝触发和通知，提高协同办公的效率。在流程处理方面，该组件支持多种操作，如流程办理、退回、自由流、会签、并行和串行等。流程办理是指按照预设的步骤进行任务处理；退回功能允许用户将流程返回到之前的节点；自由流允许在流程中自由跳转，适应复杂多变的业务需求；会签和并行、串行则涉及多个参与者，会签需要所有参与人都完成各自任务后流程才能继续，而并行和串行则分别表示任务可以同时或依次进行。服务任务是指与后端服务交互的任务，例如调用API、数据库操作等。在工作流中，服务任务是实现业务逻辑的关键，它们将工作流与实际业务数据紧密联系起来，确保流程的正确执行。这个项目提供了一个强大且灵活的Web工作流解决方案，利用Vue.js和Ant Design Vue的优势，结合自定义的流程设计器和丰富的流程操作，为企业或团队打造高效、便捷的工作流程管理系统。对于开发者来说，这是一个极好的学习和实践工作流管理、前后端交互以及组件化开发的案例。

资源推荐

资源详情

资源评论

收起资源包目录

基于 vue、ant-design-vue 的自定义Antdv 工作流组件（115个子文件）

commit-msg 116B

demo.css 8KB

iconfont.css 2KB

.env.development 136B

.eslintignore 27B

loading.gif 81KB

.gitignore 249B

demo_index.html 40KB

index.html 632B

favicon.ico 4KB

setting.jpg 205KB

demo.jpg 78KB

20230131114102.jpg 32KB

flowMixin.js 31KB

iconfont.js 30KB

nodeUtil.js 6KB

index.js 4KB

stylelint.config.js 2KB

request.js 2KB

components_use.js 2KB

vue.config.js 1KB

commitlint.config.js 1KB

mini.js 1KB

main.js 1KB

deviceUtil.js 1021B

mutation-types.js 798B

babel.config.js 793B

index.js 660B

axios.js 606B

index.js 427B

prettier.config.js 425B

index.js 233B

mutation-types.js 202B

index.js 198B

iconfont.json 7KB

settings.json 6KB

package.json 4KB

extensions.json 714B

launch.json 252B

jsconfig.json 233B

locale.json 24B

smart-flow-design.less 46KB

LICENSE 11KB

CHANGELOG.md 165B

.npmignore 427B

wx.png 211KB

select-branch.png 18KB

default-branch.png 13KB

logo.png 7KB

icon_role.png 2KB

icon_people.png 1KB

list_search.png 1KB

jiaojiao.png 1KB

cancel.png 549B

add-close.png 466B

check_box.png 325B

next_level_active.png 266B

next_level.png 245B

add-close1.png 223B

icon_file.png 209B

pre-commit 189B

.prettierignore 72B

common.sh 179B

.stylelintignore 98B

iconfont.ttf 9KB

Approval.vue 30KB

index.vue 14KB

FlowHelper.vue 13KB

index.vue 13KB

index.vue 12KB

AuthForm.vue 9KB

index.vue 9KB

Advanced.vue 8KB

index.vue 6KB

MenuShot.vue 6KB

Configure.vue 6KB

index.vue 4KB

Remind.vue 4KB

FlowMap.vue 4KB

index.vue 4KB

flow.vue 3KB

index.vue 3KB

Parallel.vue 3KB

index.vue 3KB

Suggest.vue 3KB

index.vue 2KB

Exhibition.vue 2KB

index.vue 2KB

FlowNav.vue 2KB

FlowSelect.vue 2KB

index.vue 2KB

FlowSimpleSelect.vue 2KB

Configure.vue 2KB

Print.vue 1KB

Polymerize.vue 1KB

FlowZoom.vue 1KB

共 115 条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>iconfont Demo</title> <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/> <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/> <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> <link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="iconfont.css"> <script src="iconfont.js"></script>  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> <style> .main .logo { margin-top: 0; height: auto; } .main .logo a { display: flex; align-items: center; } .main .logo .sub-title { margin-left: 0.5em; font-size: 22px; color: #fff; background: linear-gradient(-45deg, #3967FF, #B500FE); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> </head> <body> <div class="main"> <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> </a></h1> <div class="nav-tabs"> <ul id="tabs" class="dib-box"> <li class="dib active"><span>Unicode</span></li> <li class="dib"><span>Font class</span></li> <li class="dib"><span>Symbol</span></li> </ul> <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1609652" target="_blank" class="nav-more">查看项目</a> </div> <div class="tab-container"> <div class="content unicode" style="display: block;"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont"></span> <div class="name">拆分</div> <div class="code-name">&#xe653;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">撤销</div> <div class="code-name">&#xe609;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">全屏</div> <div class="code-name">&#xe60d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">重做</div> <div class="code-name">&#xe60e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">组件</div> <div class="code-name">&#xe60f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">编辑2</div> <div class="code-name">&#xe610;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">tabs</div> <div class="code-name">&#xe8cd;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">LC_icon_edit_line_1</div> <div class="code-name">&#xe65b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">edit</div> <div class="code-name">&#xe72a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">edit-2</div> <div class="code-name">&#xe83b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">树型</div> <div class="code-name">&#xe7a5;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">模型树</div> <div class="code-name">&#xe608;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关联</div> <div class="code-name">&#xe61f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">edit-编辑</div> <div class="code-name">&#xe607;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">write-写</div> <div class="code-name">&#xe612;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">gallery-画廊</div> <div class="code-name">&#xe613;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">代码</div> <div class="code-name">&#xe606;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">html5</div> <div class="code-name">&#xe693;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">提示</div> <div class="code-name">&#xe615;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">time-时间</div> <div class="code-name">&#xe633;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">number</div> <div class="code-name">&#xe639;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">menu-菜单</div> <div class="code-name">&#xe605;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">download-下载</div> <div class="code-name">&#xe60b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">upload-上传</div> <div class="code-name">&#xe60c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">folder-文件夹</div> <div class="code-name">&#xe611;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">image-图像</div> <div class="code-name">&#xe61a;</div> </li> <li class="dib"> <span class="icon ic

评论收藏

内容反馈

版权申诉