52 lines
19 KiB
HTML
52 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>开始 | wflow文档</title>
|
||
<meta name="generator" content="VuePress 1.8.2">
|
||
<link rel="icon" href="/wflow/favicon.ico">
|
||
<meta name="description" content="wflow工作流">
|
||
|
||
<link rel="preload" href="/wflow/assets/css/0.styles.487636c6.css" as="style"><link rel="preload" href="/wflow/assets/js/app.92799fdb.js" as="script"><link rel="preload" href="/wflow/assets/js/2.bc2a0bcc.js" as="script"><link rel="preload" href="/wflow/assets/js/16.e925e669.js" as="script"><link rel="prefetch" href="/wflow/assets/js/10.5d499aa8.js"><link rel="prefetch" href="/wflow/assets/js/11.74de44bd.js"><link rel="prefetch" href="/wflow/assets/js/12.ed39c3e7.js"><link rel="prefetch" href="/wflow/assets/js/13.d9051975.js"><link rel="prefetch" href="/wflow/assets/js/14.b7ae6679.js"><link rel="prefetch" href="/wflow/assets/js/15.dcd4b4ba.js"><link rel="prefetch" href="/wflow/assets/js/3.738ba632.js"><link rel="prefetch" href="/wflow/assets/js/4.939dedcc.js"><link rel="prefetch" href="/wflow/assets/js/5.81bfdbfd.js"><link rel="prefetch" href="/wflow/assets/js/6.54d3c941.js"><link rel="prefetch" href="/wflow/assets/js/7.d7aca9ef.js"><link rel="prefetch" href="/wflow/assets/js/8.dd8c1bf9.js"><link rel="prefetch" href="/wflow/assets/js/9.68f1601b.js">
|
||
<link rel="stylesheet" href="/wflow/assets/css/0.styles.487636c6.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/wflow/" class="home-link router-link-active"><img src="/wflow/logo.png" alt="wflow文档" class="logo"> <span class="site-name can-hide">wflow文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/wflow/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="https://gitee.com/willianfu/jw-workflow-engine" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||
码云gitee
|
||
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http:/47.100.202.245:83" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||
访问 wflow在线演示
|
||
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/wflow/pro.html" class="nav-link">
|
||
wflow-pro
|
||
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/wflow/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="https://gitee.com/willianfu/jw-workflow-engine" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||
码云gitee
|
||
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http:/47.100.202.245:83" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||
访问 wflow在线演示
|
||
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/wflow/pro.html" class="nav-link">
|
||
wflow-pro
|
||
</a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>🚀 快速入门</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/wflow/start/quickStart.html" aria-current="page" class="active sidebar-link">开始</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/wflow/start/quickStart.html#简介" class="sidebar-link">简介</a></li><li class="sidebar-sub-header"><a href="/wflow/start/quickStart.html#一起交流" class="sidebar-link">一起交流</a></li><li class="sidebar-sub-header"><a href="/wflow/start/quickStart.html#起步" class="sidebar-link">起步</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/wflow/start/quickStart.html#下载并启动项目" class="sidebar-link">下载并启动项目</a></li></ul></li><li class="sidebar-sub-header"><a href="/wflow/start/quickStart.html#操作教程" class="sidebar-link">操作教程</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/wflow/start/quickStart.html#工作区" class="sidebar-link">工作区</a></li><li class="sidebar-sub-header"><a href="/wflow/start/quickStart.html#管理后台" class="sidebar-link">管理后台</a></li><li class="sidebar-sub-header"><a href="/wflow/start/quickStart.html#表单流程设计器" class="sidebar-link">表单流程设计器</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>✍ 开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/wflow/dev/project.html" class="sidebar-link">项目介绍</a></li><li><a href="/wflow/dev/form.html" class="sidebar-link">表单设计</a></li><li><a href="/wflow/dev/process.html" class="sidebar-link">流程设计</a></li><li><a href="/wflow/dev/server.html" class="sidebar-link">服务端开发指南</a></li><li><a href="/wflow/dev/update.html" class="sidebar-link">更新记录</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>❓ FAQ</span> <!----></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="开始"><a href="#开始" class="header-anchor">#</a> 开始</h1> <h2 id="简介"><a href="#简介" class="header-anchor">#</a> 简介</h2> <p>wflow工作流是一个简单易用，面向普通用户的工作流系统，用户只需要接受简单的教学即可上手使用，自行创建所需的日常审批流程。</p> <hr> <p><strong>👀起因：</strong></p> <p>第一次接触工作流是由于当时公司业务部门提了一个需求，希望可以实现新产品从提出意向到开发结束的整个生命周期流程的管控，里面包含各级人员和领导等不同角色的审批，任务交接流转。于是网上搜索了一圈，发现了 <code>activiti</code>、<code>flowable</code> 这两个开源的流程引擎，功能上很强大，能满足需求，但是流程设计器上手真的比较困难，这对于普通用户来说没有经过专业人员进行辅助或者专门培训，基本很难用起来。当时公司用的是某D办公，自带的审批功能在操作一番后感觉相当的友好，遂萌生实现一套类似系统的想法。</p> <h2 id="一起交流"><a href="#一起交流" class="header-anchor">#</a> 一起交流</h2> <p>👩👦👦大家可扫码加入交流群， 如果二维码失效了，可以加我微信 <code>willianfu_</code> 备注<code>wflow</code> 拉你入群</p> <p><img src="https://pic.rmb.bdstatic.com/bjh/97bc3e87a714b783cd3b6cad936e5607.png" alt="image-20220724230831144" style="zoom:20%;"> <img src="https://pic.rmb.bdstatic.com/bjh/ed2fd88694486bc83c56e08b83d44205.png" alt="image-20220724230928104" style="zoom:20%;"></p> <p><strong>未完成/待完善的功能</strong></p> <ul><li>表单明细表组件数据绑定，校验</li> <li>分栏布局组件内表单数据绑定、校验</li> <li>提交表单部分，分栏、明细表及其他组件回显校验</li> <li>提交表单时根据人员设置限制表单权限</li> <li>提交时根据审批流程设计渲染已确定的执行流程步骤及指定人员</li></ul> <h2 id="起步"><a href="#起步" class="header-anchor">#</a> 起步</h2> <h3 id="下载并启动项目"><a href="#下载并启动项目" class="header-anchor">#</a> 下载并启动项目</h3> <p>**注意：**作者的开发环境是 <code>node14.18.0</code> 、<code>vuecli 4.1.1</code>、<code>edge浏览器</code></p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment">#克隆源码</span>
|
||
<span class="token function">git</span> clone https://gitee.com/willianfu/jw-workflow-engine.git
|
||
<span class="token builtin class-name">cd</span> jw-workflow-engine
|
||
|
||
<span class="token comment">#修改main.js中后端接口地址，破坏这个表达式，使其为公开的服务器IP</span>
|
||
Vue.prototype.BASE_URL <span class="token operator">=</span> <span class="token string">'http://'</span> + <span class="token punctuation">(</span>process.env.NODE_ENV <span class="token operator">==</span><span class="token operator">=</span> <span class="token string">'development-'</span> ? <span class="token string">"localhost"</span> <span class="token builtin class-name">:</span> <span class="token string">"47.100.202.245"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">#小弱鸡服务器，大家不要造垃圾数据，且珍惜😘</span>
|
||
|
||
<span class="token comment">#安装依赖</span>
|
||
<span class="token function">npm</span> <span class="token function">install</span>
|
||
<span class="token comment">#启动</span>
|
||
<span class="token function">npm</span> run serve
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>📢 如果启动报错请检查错误信息看看是否是依赖版本和当前所安装的 node 版本不兼容，自行安装兼容版本的依赖</p> <p>👍 启动成功后访问 http://localhost:88 即可打开页面</p> <p><img src="https://pic.rmb.bdstatic.com/bjh/3da7567c3f36a4d2178d310390bfc1f2.png" alt="image-20220720094501757"></p> <h2 id="操作教程"><a href="#操作教程" class="header-anchor">#</a> 操作教程</h2> <h3 id="工作区"><a href="#工作区" class="header-anchor">#</a> 工作区</h3> <p>点击工作区，进入审批列表，按分组可以进行展开折叠</p> <p><img src="https://pic.rmb.bdstatic.com/bjh/1a9bd706586f6cbbc64721ba152edd1a.png" alt="image-20220724225022126"></p> <h4 id="发起审批"><a href="#发起审批" class="header-anchor">#</a> 发起审批</h4> <p>点击对应项可弹出提交表单窗口</p> <img src="https://pic.rmb.bdstatic.com/bjh/5bfb33c6bfd47a327ad3dda3e0d7771f.png" alt="image-20220724225156405" style="zoom:50%;"> <h3 id="管理后台"><a href="#管理后台" class="header-anchor">#</a> 管理后台</h3> <p>从首页进入管理后台，展示出来的是所有已经设计好的审批列表</p> <h4 id="审批列表"><a href="#审批列表" class="header-anchor">#</a> 审批列表</h4> <p>审批列表按分组展示，点击每个分组右侧可对分组进行编辑及删除，如果分组内有表单，则删除分组后内部表单会被移动到其他分组（默认）</p> <p><img src="https://pic.rmb.bdstatic.com/bjh/91d4d8cdaf632f67916846a69e18d508.png" alt="image-20220724225423708"></p> <h4 id="分组及表单拖拽排序"><a href="#分组及表单拖拽排序" class="header-anchor">#</a> 分组及表单拖拽排序</h4> <h5 id="分组排序"><a href="#分组排序" class="header-anchor">#</a> 分组排序</h5> <p><img src="https://pic.rmb.bdstatic.com/bjh/e509e35de64a32b949d8cbd48b49fe2a.png" alt="image-20220724225749669"></p> <p><img src="https://pic.rmb.bdstatic.com/bjh/bd6f2801c0e87eda065a1bf072d693d2.png" alt="image-20220724225853154"></p> <h5 id="表单排序"><a href="#表单排序" class="header-anchor">#</a> 表单排序</h5> <p><img src="https://pic.rmb.bdstatic.com/bjh/b820afc407597c6c8900043c62bd4c65.png" alt="image-20220724230032985"></p> <h3 id="表单流程设计器"><a href="#表单流程设计器" class="header-anchor">#</a> 表单流程设计器</h3> <p>点击<code>新建表单/编辑</code> 进入<code>审批表单流程设计器</code></p> <h4 id="基础设置"><a href="#基础设置" class="header-anchor">#</a> 基础设置</h4> <p><img src="https://pic.rmb.bdstatic.com/bjh/9b9a47e62cf4d52acaa7eaffa319f688.png" alt="image-20220724231222926"></p> <h4 id="表单设计"><a href="#表单设计" class="header-anchor">#</a> 表单设计</h4> <blockquote><p>表单设计是用来设计发起审批流程时填写的表单的，拖拽式交互</p></blockquote> <p>从左侧组件库选取组件放置到中间设计区域，点击设计区组件，可在右侧面板配置组件的设置项</p> <p><img src="https://pic.rmb.bdstatic.com/bjh/096e0dacdbc8ced5db475517c325601c.png" alt="image-20220724222124900"></p> <h5 id="分栏布局"><a href="#分栏布局" class="header-anchor">#</a> 分栏布局</h5> <blockquote><p>普通组件是独占一行的，假设我们要让2个组件并排显示，就需要使用分栏了</p></blockquote> <img src="https://pic.rmb.bdstatic.com/bjh/a91a26ab472f42f1d7ebf598641929e4.png" alt="image-20220724233902503" style="zoom:50%;"> <img src="https://pic.rmb.bdstatic.com/bjh/8e195c2275b19067f21bfc2c48bb1771.png" alt="image-20220724231814888" style="zoom:50%;"> <p>**❗ 注意事项：**分栏组件会自动按每2个组件为一行进行布局，假设分栏组件内放了5个子组件，那么前四个会两两占用一列，<strong>剩下多的一个会独占一行</strong></p> <p><strong>分栏组件内可以放置其他组件，也可以放置分栏组件进行嵌套！！！！！</strong></p> <img src="https://pic.rmb.bdstatic.com/bjh/67cb9c1292785061f49229ae8e5e1163.png" alt="image-20220724233253171" style="zoom:50%;"> <h5 id="明细表"><a href="#明细表" class="header-anchor">#</a> 明细表</h5> <blockquote><p>有时候我们需要提交一系列数据，这些数据有表格的性质，这时候可以使用明细表组件</p></blockquote> <p>明细表类似分栏容器，可以在内部放置其他组件</p> <p><img src="https://pic.rmb.bdstatic.com/bjh/a85f8d76572255ee017a36af0ba1f962.png" alt="image-20220724234359498"></p> <h4 id="审批流程设计"><a href="#审批流程设计" class="header-anchor">#</a> 审批流程设计</h4> <blockquote><p>审批流程设计，顾名思义，用来设计用户提交的表单流程，需要经过哪些人的审批流转</p></blockquote> <img src="https://pic.rmb.bdstatic.com/bjh/906bfdf30712a132c9b8c906e56e6eea.png" alt="image-20220724234519380" style="zoom:80%;"> <p><strong>支持多种类型节点</strong></p> <h5 id="发起人"><a href="#发起人" class="header-anchor">#</a> 发起人</h5> <blockquote><p>也就是发起，提交这个流程的人员</p></blockquote> <h5 id="审批人"><a href="#审批人" class="header-anchor">#</a> 审批人</h5> <blockquote><p>当任务流转到审批人时，这个节点设置的相关人员需要对这个提交的流程进行审批（同意/驳回）</p></blockquote> <h5 id="抄送人"><a href="#抄送人" class="header-anchor">#</a> 抄送人</h5> <blockquote><p>当流程到达抄送人节点时，将会通知到相关人员</p></blockquote> <h5 id="条件分支"><a href="#条件分支" class="header-anchor">#</a> 条件分支</h5> <blockquote><p>有时候我们的流程需要动态的情况，根据一些条件进行不同的处理流程，这时候就可以添加条件分支，设置进入每个流程分支的条件</p></blockquote> <img src="https://pic.rmb.bdstatic.com/bjh/e060d19a925bee4f4d10382d2b3a770e.png" alt="image-20220724235146294" style="zoom:80%;"> <h5 id="并行分支"><a href="#并行分支" class="header-anchor">#</a> 并行分支</h5> <blockquote><p>有时候我们需要审批流程不需要条件选择，同时进行几个步骤，这时候可以利用并行分支，当所有分支的步骤都结束后才会进行到下一步</p></blockquote> <p><img src="https://pic.rmb.bdstatic.com/bjh/4251844922f6ae63cec916ffde02968c.png" alt="image-20220724235422400"></p> <h5 id="延时处理"><a href="#延时处理" class="header-anchor">#</a> 延时处理</h5> <blockquote><p>有时候我们需要让整个流程卡在某个地方，等待一段时间再继续，这时候可以在需要等待的地方插入延时处理节点</p></blockquote> <h5 id="触发器"><a href="#触发器" class="header-anchor">#</a> 触发器</h5> <blockquote><p>本节点属于扩展功能，流程在到达此处时会触发一个动作，应当由开发人员使用，用来打通与其他系统的交互</p></blockquote> <p>通过Http请求，来动态修改表单数据或者将表单数据传递给外部系统</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最近更新:</span> <span class="time">7/25/2022, 12:00:36 AM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/wflow/dev/project.html">
|
||
项目介绍
|
||
</a>
|
||
→
|
||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||
<script src="/wflow/assets/js/app.92799fdb.js" defer></script><script src="/wflow/assets/js/2.bc2a0bcc.js" defer></script><script src="/wflow/assets/js/16.e925e669.js" defer></script>
|
||
</body>
|
||
</html>
|