{"id":19757452,"url":"https://github.com/stavinli/workflow-react","last_synced_at":"2025-04-05T13:05:01.408Z","repository":{"id":165813825,"uuid":"617834763","full_name":"StavinLi/Workflow-React","owner":"StavinLi","description":"仿钉钉审批流程设置react版本","archived":false,"fork":false,"pushed_at":"2025-01-08T08:44:16.000Z","size":7682,"stargazers_count":116,"open_issues_count":0,"forks_count":30,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T12:04:16.255Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StavinLi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-23T07:58:28.000Z","updated_at":"2025-03-17T06:36:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"fb709ae5-1e98-41ee-aa03-3fbd4c469308","html_url":"https://github.com/StavinLi/Workflow-React","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StavinLi%2FWorkflow-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StavinLi%2FWorkflow-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StavinLi%2FWorkflow-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StavinLi%2FWorkflow-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StavinLi","download_url":"https://codeload.github.com/StavinLi/Workflow-React/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339154,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T03:19:27.808Z","updated_at":"2025-04-05T13:05:01.371Z","avatar_url":"https://github.com/StavinLi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n * @Date: 2022-08-29 14:39:11\n * @LastEditors: StavinLi 495727881@qq.com\n * @LastEditTime: 2023-03-28 14:03:15\n * @FilePath: /workflow-react/README.md\n--\u003e\n\n\n### workflow钉钉审批流程设置-react版本\n\nworkflow钉钉审批流程设置，基于react开发。QQ交流群①:639251756  QQ交流群②:790780565\n![在这里插入图片描述](https://img-blog.csdnimg.cn/20191116144905578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Mjg1MTkz,size_16,color_FFFFFF,t_70 )\n-  [开源地址react版本 https://github.com/StavinLi/Workflow-React](https://github.com/StavinLi/Workflow-React) github点个星吧！\n-  [开源地址vue2版本 https://github.com/StavinLi/Workflow](https://github.com/StavinLi/Workflow) github点个星吧！\n-  [开源地址vue3版本 https://github.com/StavinLi/Workflow-Vue3](https://github.com/StavinLi/Workflow-Vue3) github点个星吧！\n-  [预览地址 https://stavinli.github.io/Workflow-React/build/index.html#/](https://stavinli.github.io/Workflow-React/build/index.html#/) \n-------------------\n \n\n#### 项目介绍\n- UI钉钉风格\n- 技术点\n1. 组件自调用+递归处理，按树状结局处理审批流程问题\n- 主要功能点\n2. 界面缩放\n![在这里插入图片描述](https://img-blog.csdnimg.cn/20191116145339223.jpg)\n```javascript\n\u003cdiv className=\"zoom\"\u003e\n    \u003cdiv className={`zoom-out ${curSize === 50 ? 'disabled' : ''}`} onClick={() =\u003e zoomSize(1)}\u003e\u003c/div\u003e\n    \u003cspan\u003e{curSize}%\u003c/span\u003e\n    \u003cdiv className={`zoom-in ${curSize === 300 ? 'disabled' : ''}`} onClick={() =\u003e zoomSize(2)}\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n3. 节点设置（包括审批人、发起人、抄送人、条件设置）\n![在这里插入图片描述](https://img-blog.csdnimg.cn/20200304140232374.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Mjg1MTkz,size_16,color_FFFFFF,t_70#pic_center)\n```javascript\n\u003cDrawer title=\"审批人设置\" open={approverDrawer} className=\"set_promoter\" closable={false} width={550} onClose={saveApprover}\u003e\n    \u003cdiv className=\"demo-drawer-content\"\u003e\n        \u003cdiv className=\"drawer_content\"\u003e\n            \u003cdiv className=\"approver_content\"\u003e\n                \u003cRadio.Group value={config.settype} className=\"clear\" options={setTypes} onChange={changeType}\u003e\u003c/Radio.Group\u003e\n                ...\n```\n5. 节点新增\n![在这里插入图片描述](https://img-blog.csdnimg.cn/20191116145355289.png)\n```javascript\n\u003cdiv className=\"add-node-popover-body\"\u003e\n    \u003ca className=\"add-node-popover-item approver\" onClick={() =\u003e addType(1)}\u003e\n        \u003cdiv className=\"item-wrapper\"\u003e\n            \u003cspan className=\"iconfont\"\u003e\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cp\u003e审批人\u003c/p\u003e\n    \u003c/a\u003e\n    \u003ca className=\"add-node-popover-item notifier\" onClick={() =\u003e addType(2)}\u003e\n        \u003cdiv className=\"item-wrapper\"\u003e\n            \u003cspan className=\"iconfont\"\u003e\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cp\u003e抄送人\u003c/p\u003e\n    \u003c/a\u003e\n    \u003ca className=\"add-node-popover-item condition\" onClick={() =\u003e addType(4)}\u003e\n        \u003cdiv className=\"item-wrapper\"\u003e\n            \u003cspan className=\"iconfont\"\u003e\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cp\u003e条件分支\u003c/p\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n```\n5.错误校验\n![在这里插入图片描述](https://img-blog.csdnimg.cn/20200304140011896.jpg?x-oss-process=image/watermark,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        data.push({\n            name: nodeName,\n            type: [\"\", \"审核人\", \"抄送人\"][type],\n        })\n    }\n    reErr(childNode, data);\n} else if (type === 3) {\n    reErr(childNode, data);\n} else if (type === 4) {\n    for (var i = 0; i \u003c conditionNodes.length; i++) {\n        if (conditionNodes[i].error) {\n            data.push({ name: conditionNodes[i].nodeName, type: \"条件\" })\n        }\n        reErr(conditionNodes[i], data);\n    }\n    reErr(childNode, data);\n}\n```\n6.模糊搜索匹配人员、职位、角色\n```javascript\n\u003cInput style={{ textIndent: 10 }} placeholder=\"搜索成员\" value={searchVal} onChange={getDebounceData} /\u003e\n```\n#### 项目安装\n\n\u003e git clone https://github.com/StavinLi/Workflow-React.git 点个赞吧！\n\n#### 项目运行\n\u003e 1.环境依赖  `npm i`\n\n\u003e 2.本地运行 `npm run serve` \n\n\u003e 3.打包运行 `npm run build` \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstavinli%2Fworkflow-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstavinli%2Fworkflow-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstavinli%2Fworkflow-react/lists"}