基于vue实现钉钉审批流程(仿)

最新推荐文章于 2024-03-17 09:39:30 发布
VIP文章 最新推荐文章于 2024-03-17 09:39:30 发布
阅读量5.7k 收藏 45
点赞数 4
分类专栏： 前端 html 文章标签： npm node.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiey0407/article/details/123220672
版权

做项目有个需求——实现审批流程，看了钉钉审批流感觉功能很强大，模仿其实现审批效果。

效果图

没有找到windows录制视频转gif的软件,所以只能放一张静图了，有好的软件欢迎各位积极分享。

在这里插入图片描述

代码位置

整个流程上传至github:https://github.com/ylqymm/workFlow

步骤

  • 初始化

    workFlow.vue:

    <div class="approval-flow fd-nav
最低0.47元/天 解锁文章
技术布道师
关注
  • 4
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
仿钉钉流程开发，可以用于企业oa
04-24
仿钉钉流程开发，可以用于企业oa
springboot+activiti7+react实现模仿钉钉功能的审批流(五、实现类似钉钉的流程设计器)
小小绿豆的专栏
01-16 1万+
这块是整个系统最复杂的部分，需要熟悉bpmn规范，算法，后端部署操作； 实现的核心是前端操作和生成bpmn的xml字符串给后端直接使用，后端不用做什么，只需要1.存xml 2.查询返回xml给前端操作 3.部署xml；所以工作量基本都在前端； 具体步骤： 新建流程： 1.前端直接从定义好的xml模板中初始化； 这里的模板其实就是提前在保存好的xml文件，钉钉也有类似的功能，进去之后左侧可以选择一些它设置好的流程。我这里预习放了一个模板: '发起人' -> '审批人' -> '抄...
VWorkflows：一个基于Vue的流程图组件库
gitblog_00035的博客
03-17 850
VWorkflows：一个基于Vue的流程图组件库 VWorkflows 是一个基于 Vue.js 的流程图组件库，它提供了丰富的图形化工具，帮助您轻松构建工作流应用程序。 什么是VWorkflows？ VWorkflows 是一个轻量级、可定制的 Vue 组件库，用于创建各种类型的工作流程图。它可以用于表示业务流程、系统架构、数据流等复杂的信息结构，并以可视化的方式展示给用户。 通过使用 VWo...
springboot+activiti7+react实现模仿钉钉功能的审批流(十四、发起流程自动预判流程走向)
小小绿豆的专栏
03-12 3269
功能说明：类似钉钉发起流程，发起人填单子过程中，可自动预判该流程走向，方便发起人填单子时候就可以看到这个单子的审批人。 本人并未实际具体实现此功能，只是写下自己考虑实现该功能的大致实现思路，具体细节还需要打磨，以供交流，欢迎提出更优方案；话不多的，直接举一个简单栗子： 流程预判，钉钉是这样玩的： 第1步 表单设计： 第2步 流程设计： 第3步 用户发起审批，并自动预判流程走向 条件满足 “请假天数 < 3” 走B审批： 条件不满足 “请假天数 < 3” 走C审批： ...
若依ruoyi-nbcio如何做一个仿钉钉流程设计器的思考
宁波阿成的博客
10-24 955
若依ruoyi-nbcio如何做一个仿钉钉流程设计器的思考
(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design
java的第一堂课~
11-18 7019
仿钉钉流程设计器 json转bpmn wflow-web smart-flow-design Activiti Flowable Camunda 低代码平台, 工作流 流程引擎
仿钉钉审批流程设置 html
06-01
JQuery实现仿钉钉审批流程设置
模仿钉钉选择每个步骤的审核人的html代码
07-17
1、鼠标移入某个节点可删除当前节点 2、点击添加弹出节点选项视图， 3.点击选项视图的确定按钮可增加一个节点 4.点击选项视图的取消按钮可关闭选项视图 5.会返回最终的节点结果
vue实现审批流
热门推荐
榴莲不好吃的专栏
06-14 1万+
审批流在工作成是很常见的一个功能模块,下面是一个审批流的基本样子,我们怎么用代码实现呢,我选择用vue来写的, 1.首先可以将下图拆分成多个模块 条件节点模块,操作节点模块,结束模块,分支模块等, 2.每一层都可以添加条件模块,且条件模块是一样的,所以此处是需要递归实现的 我的模块拆分如下目录: 代码结构如下: 完整案例展示戳这里....................................
模仿钉钉写的一个选择每个步骤的审核人的插件
01-26
模仿钉钉写的一个选择每个步骤的审核人的插件，比如公文流转，要选择每个步骤审核人，然后再一次性提交。我写了三个版本，一个是调用jquery+function，还有一个是jquery+obj，一个jquery封装为插件。测试可以使用。
一款基于vue3的简单审批流程开发的表单+流程设计器
dsyuan001的博客
10-19 2196
这款基于Vue3开发的简单审批流程表单+流程设计器，旨在为用户提供一种高效、灵活且易用的审批流程构建解决方案。
工作流程插件，审批流程JS
11-08
工作流程插件，审批流程JS 工作流程插件，审批流程JS 工作流程插件，审批流程JS 工作流程插件，审批流程JS
lf-approval-vue：LogicFlow for Vue的批准示例
02-26
lf-approval-vue 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
浅谈vue权限管理实现及流程
11-21
一、整体思路 后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载的路由，然后使用 addRoutes 动态挂载路由。 二、实现要点 （1）路由定义，分为初始路由和动态路由，一般来说初始路由只有 login，其他路由都挂载在 home 路由之下需要动态挂载。 （2）用户登录，登录成功之后得到 token，保存在 sessionStorage，跳转到 home，此时会进入路由拦截根据 token 获取用户权限列表。 （3）全局路由拦截，根据当前用户有没有 token 和 权限列表进行相应的判断和跳转，当没有 token 时跳到 log
approvalFlow:基于form-generator，仿制钉钉审批流程创建（表单生成流程计数器可视化配置必填条件及校正）
03-19
基于JakHuang大佬的的，仿钉钉后台审批流程创建界面 主要功能 表单配置（表单生成器） 拖拽表单，生成布局页面 配置拖拽组件属性，定制组件形态 生成JSON数据并生成预览页面 流程指甲配置（仿钉钉界面） 创建审批...
Antdv中国式工作流组件，仿钉钉飞书雀书流程审批设计
05-16
支持在线流程设计器，钉钉审批模式，中国式工作流 支持流程办理、退回、自由流、会签、并行、串行、服务任务等 支持退回任务，退回到指定环节，退回到上一步，退回到发起人 支持转办任务，将任务交接给他人办理，...
基于 vue、ant-design-vue 的自定义Antdv 工作流组件
06-26
基于 vue、ant-design-vue 的自定义Antdv 工作流组件。支持在线流程设计器，钉钉审批模式，支持流程办理、退回、自由流、会签、并行、串行、服务任务等。
基于SpringBoot+Vue+Mysql的会议室预约系统（源码+论文）
04-02
比如钉钉会议预约、美团买菜、扫码签到等各种信息化软件。他们涉及我们生活中的方方面面给我们的生活提供了更大的便利性。大到政府、企业办公小到人们的衣食住行都离不开信息化的多样支持。各种旅游软件指南也...
基于SpringBoot+Vue+Mysql的中小企业财务管理系统（源码+论文）
最新发布
04-02
比如钉钉会议预约、美团买菜、扫码签到等各种信息化软件。他们涉及我们生活中的方方面面给我们的生活提供了更大的便利性。大到政府、企业办公小到人们的衣食住行都离不开信息化的多样支持。各种旅游软件指南也...
vue实现钉钉扫描二维码登录
05-26
要实现钉钉扫描二维码登录，需要进行以下步骤： 1. 在钉钉开放平台注册应用，并获取到应用的 `AppId` 和 `AppSecret`。 2. 在前端页面上实现钉钉扫描二维码的功能，可以使用钉钉提供的 `DingTalkPC.runtime.permission.requestAuthCode` 方法，该方法会弹出钉钉扫描二维码的界面，用户扫描二维码后会返回一个 `code` 值。 3. 前端将 `code` 值发送到后端，后端拿到 `code` 值以及 `AppId` 和 `AppSecret`，调用钉钉开放平台提供的接口获取用户的身份信息。 4. 后端将获取到的用户身份信息返回给前端，前端根据身份信息进行相应的页面跳转或者其他操作。 下面是一个简单的实现示例： 前端代码： ``` html <!-- 钉钉扫描二维码的按钮 --> <button @click="requestAuthCode">钉钉扫描二维码登录</button> <script> export default { methods: { requestAuthCode() { // 调用DingTalkPC.runtime.permission.requestAuthCode方法 DingTalkPC.runtime.permission.requestAuthCode({ corpId: '钉钉应用的CorpId', onSuccess: function(result) { // result.code为获取到的code值 // 将code值发送到后端进行身份验证 }, onFail: function(err) { console.log(err) } }); } } } </script> ``` 后端代码： ``` javascript const axios = require('axios'); // 获取用户身份信息的接口 const API_URL = 'https://oapi.dingtalk.com/sns/getuserinfo_bycode'; async function getUserInfo(code, appId, appSecret) { const url = `${API_URL}?accessKey=${appId}&accessSecret=${appSecret}&code=${code}`; const response = await axios.get(url); return response.data; } // 在路由中处理钉钉扫描二维码的请求 app.get('/dingtalk/login', async (req, res) => { const { code } = req.query; const appId = '你的应用AppId'; const appSecret = '你的应用AppSecret'; try { const userInfo = await getUserInfo(code, appId, appSecret); // 将获取到的用户身份信息返回给前端 res.send(userInfo); } catch (err) { console.log(err); res.status(500).send('获取用户信息失败'); } }); ``` 需要注意的是，以上代码仅为参考示例，实际应用中还需要考虑一些安全性和错误处理的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值