[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9058":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":14,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},9058,"Workflow-Vue3","StavinLi\u002FWorkflow-Vue3","StavinLi","仿钉钉审批流程设置vue3版本",null,"Vue",949,199,14,3,0,1,5,50.9,false,"master",true,[],"2026-06-12 04:00:42","### workflow钉钉审批流程设置-vue3版本\n\nworkflow钉钉审批流程设置，基于vue开发。QQ交流群①:639251756  QQ交流群②:790780565\n![在这里插入图片描述](https:\u002F\u002Fimg-blog.csdnimg.cn\u002F20191116144905578.png?x-oss-process=image\u002Fwatermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Mjg1MTkz,size_16,color_FFFFFF,t_70 )\n-  [开源地址vue3版本 https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow-Vue3](https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow-Vue3) github点个星吧！\n-  [开源地址vue2版本 https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow](https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow) github点个星吧！\n-  [开源地址react版本 https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow-React](https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow-React) github点个星吧！\n-  [预览地址 https:\u002F\u002Fstavinli.github.io\u002FWorkflow-Vue3\u002Fdist\u002Findex.html#\u002F](https:\u002F\u002Fstavinli.github.io\u002FWorkflow-Vue3\u002Fdist\u002Findex.html#\u002F) \n-------------------\n \n\n#### 项目介绍\n- UI钉钉风格\n- 技术点\n1. 组件自调用+递归处理，按树状结局处理审批流程问题\n- 主要功能点\n2. 界面缩放\n![在这里插入图片描述](https:\u002F\u002Fimg-blog.csdnimg.cn\u002F20191116145339223.jpg)\n```javascript\n\u003Cdiv class=\"zoom\">\n\t\u003Cdiv :class=\"'zoom-out'+ (nowVal==50?' disabled':'')\" @click=\"zoomSize(1)\">\u003C\u002Fdiv>\n    \u003Cspan>{{nowVal}}%\u003C\u002Fspan>\n    \u003Cdiv :class=\"'zoom-in'+ (nowVal==300?' disabled':'')\" @click=\"zoomSize(2)\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n3. 节点设置（包括审批人、发起人、抄送人、条件设置）\n![在这里插入图片描述](https:\u002F\u002Fimg-blog.csdnimg.cn\u002F20200304140232374.jpg?x-oss-process=image\u002Fwatermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Mjg1MTkz,size_16,color_FFFFFF,t_70#pic_center)\n```javascript\n\u003Cel-drawer title=\"审批人设置\" :visible.sync=\"approverDrawer\" class=\"set_promoter\" :show-close=\"false\" :size=\"550\" :before-close=\"saveApprover\"> \n    \u003Cdiv class=\"demo-drawer__content\">\n        \u003Cdiv class=\"drawer_content\">\n            \u003Cdiv class=\"approver_content\">\n                \u003Cel-radio-group v-model=\"approverConfig.settype\" class=\"clear\" @change=\"changeType\">\n                    \u003Cel-radio v-for=\"({value, label}) in setTypes\" :key=\"value\" :label=\"value\">{{label}}\u003C\u002Fel-radio>\n                \u003C\u002Fel-radio-group>\n                ...\n```\n5. 节点新增\n![在这里插入图片描述](https:\u002F\u002Fimg-blog.csdnimg.cn\u002F20191116145355289.png)\n```javascript\n\u003Cdiv class=\"add-node-btn\">\n    \u003Cel-popover placement=\"right-start\" v-model=\"visible\">\n          \u003Cdiv class=\"add-node-popover-body\">\n              \u003Ca class=\"add-node-popover-item approver\" @click=\"addType(1)\">\n                  \u003Cdiv class=\"item-wrapper\">\n                      \u003Cspan class=\"iconfont\">\u003C\u002Fspan>\n                  \u003C\u002Fdiv>\n                  \u003Cp>审批人\u003C\u002Fp>\n              \u003C\u002Fa>\n              \u003Ca class=\"add-node-popover-item notifier\" @click=\"addType(2)\">\n                  \u003Cdiv class=\"item-wrapper\">\n                      \u003Cspan class=\"iconfont\">\u003C\u002Fspan>\n                  \u003C\u002Fdiv>\n                  \u003Cp>抄送人\u003C\u002Fp>\n              \u003C\u002Fa>\n              \u003Ca class=\"add-node-popover-item condition\" @click=\"addType(4)\">\n                  \u003Cdiv class=\"item-wrapper\">\n                      \u003Cspan class=\"iconfont\">\u003C\u002Fspan>\n                  \u003C\u002Fdiv>\n                  \u003Cp>条件分支\u003C\u002Fp>\n              \u003C\u002Fa>\n          \u003C\u002Fdiv>\n          ...\n```\n5.错误校验\n![在这里插入图片描述](https:\u002F\u002Fimg-blog.csdnimg.cn\u002F20200304140011896.jpg?x-oss-process=image\u002Fwatermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Mjg1MTkz,size_16,color_FFFFFF,t_70)\n```javascript\nlet {type,error,nodeName,conditionNodes} = childNode\nif (type == 1 || type == 2) {\n    if (error) {\n        this.tipList.push({ name: nodeName, type: [\"\",\"审核人\",\"抄送人\"][type] })\n    }\n    this.reErr(childNode)\n} else if (type == 3) {\n    this.reErr(childNode)\n} else if (type == 4) {\n    this.reErr(childNode)\n    for (var i = 0; i \u003C conditionNodes.length; i++) {\n        if (conditionNodes[i].error) {\n            this.tipList.push({ name: conditionNodes[i].nodeName, type: \"条件\" })\n        }\n        this.reErr(conditionNodes[i])\n    }\n}\n```\n6.模糊搜索匹配人员、职位、角色\n```javascript\n\u003Cinput type=\"text\" placeholder=\"搜索成员\" v-model=\"searchVal\" @input=\"getDebounceData($event,activeName)\">\n\u003Cinput type=\"text\" placeholder=\"搜索角色\" v-model=\"searchVal\" @input=\"getDebounceData($event,2)\">\n\u003Cinput type=\"text\" placeholder=\"请选择具体人员\u002F角色\u002F部门\" v-if=\"conditionConfig.nodeUserList.length == 0\" @click=\"addConditionRole\">\n```\n#### 项目安装\n\n> git clone https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow-Vue3.git 点个赞吧！\n\n#### 项目运行 node14.20.1\n> 1.环境依赖  `npm i`\n\n> 2.本地运行 `npm run dev` \n\n> 3.打包运行 `npm run build` \n","该项目是一个基于Vue 3开发的仿钉钉审批流程设置工具，旨在帮助企业或团队快速搭建和管理审批流程。其核心功能包括界面缩放、节点设置（如审批人、发起人、抄送人及条件设置）、新增节点以及错误校验等，通过组件自调用与递归处理技术实现了树状结构的审批流程管理。项目采用钉钉风格的UI设计，操作直观便捷。适用于需要定制化审批流程的各种业务场景，比如企业内部的请假申请、报销审批等流程管理，能够显著提升工作效率与用户体验。",2,"2026-06-11 03:21:00","top_language"]