[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8879":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},8879,"Workflow","StavinLi\u002FWorkflow","StavinLi","仿钉钉审批流程设置","http:\u002F\u002Fstavinli.gitee.io\u002Fworkflow\u002F#\u002Fapproval\u002Fsetting",null,"Vue",1635,387,31,5,0,3,56.07,"MIT License",false,"master",true,[],"2026-06-12 04:00:41","\n\n### workflow钉钉审批流程设置\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- [开源地址vue2版本 https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow](https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow) github点个星吧！\n- [开源地址vue3版本 https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow-Vue3](https:\u002F\u002Fgithub.com\u002FStavinLi\u002FWorkflow-Vue3) 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\u002Fdist\u002Findex.html#\u002F](https:\u002F\u002Fstavinli.github.io\u002FWorkflow\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\" direction=\"rtl\" class=\"set_promoter\" size=\"550px\" :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 :label=\"1\">指定成员\u003C\u002Fel-radio>\n \u003Cel-radio :label=\"2\">主管\u003C\u002Fel-radio>\n \u003Cel-radio :label=\"4\">发起人自选\u003C\u002Fel-radio>\n \u003Cel-radio :label=\"5\">发起人自己\u003C\u002Fel-radio>\n \u003Cel-radio :label=\"7\">连续多级主管\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.git 点个赞吧！\n\n#### 项目运行 **node14**\n> 1.环境依赖 `npm i`\n\n> 2.本地运行 `npm run serve` \n\n> 3.打包运行 `npm run build` \n","该项目提供了一个仿钉钉审批流程设置的解决方案，基于Vue框架开发。它支持自定义审批流程，包括审批人、发起人、抄送人的设定以及条件设置等功能，并通过组件自调用与递归处理实现树状结构的审批流程管理。此外，该系统还提供了界面缩放功能以适应不同用户需求。适用于需要构建内部审批流程的企业或团队，特别是那些希望采用类似钉钉风格UI但又希望能够根据自身情况进行定制化调整的场景。",2,"2026-06-11 03:20:09","top_language"]