更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio
演示地址：RuoYi-Nbcio后台管理系统
接上一文章
1、配置文件需要修改，增加相应的内容，如下：
export default { start: { type: "start", content: "所有人", properties: { title: '发起人', initiator: 'ALL' } }, approver: { type: "approver", content: "请设置审批人", properties: { title: '审批人' } }, copy:{ type: 'copy', content: '发起人自选', properties: { title: '抄送人', menbers: [], userOptional: true } }, condition: { type: "condition", content: "请设置条件", properties: { title: '条件', conditions: [], initiator: null } }, concurrent: { type: "concurrent", content: "并行任务(同时进行)", properties: { title: '分支', concurrents: [], initiator: null } }, delay: { type: "delay", content: "等待0分钟", properties: { title: '延时处理' } }, trigger: { type: "trigger", content: "请设置触发器", properties: { title: '触发器' } }, branch: { type: "branch", content: "", properties: {} }, empty: { type: "empty", content: "", properties: {} } }
2、NodeFactory函数修改如下，主要增加并行分支的处理
function NodeFactory(ctx, data, h) { if (!data) return console.log("NodeFactory data",data) const showErrorTip = ctx.verifyMode && NodeUtils.checkNode(data) === false let classstring = `node-wrap-box ${data.type} ${showErrorTip ? 'error' : ''}` let res = [], branchNode = "", selfNode = ( <div class="node-wrap"> <div class={`node-wrap-box ${data.type} ${showErrorTip ? 'error' : ''}` }> <el-tooltip content="未设置条件" placement="top" effect="dark"> <div class="error-tip" onClick={this.eventLancher.bind(ctx, "edit", data)}>!!!</div> </el-tooltip> {nodes[data.type].call(ctx, ctx, data, h)} {addNodeButton.call(ctx, ctx, data, h)} </div> </div> ); if (hasConditionBranch(data)) { // 如果节点是数组 而且是条件分支 添加分支样式包裹 // {data.childNode && NodeFactory.call(ctx, ctx, data.childNode, h)} console.log("hasConditionBranch data",data) branchNode = ( <div class="branch-wrap"> <div class="branch-box-wrap"> <div class="branch-box flex justify-center relative"> <button class="btn" onClick={this.eventLancher.bind(ctx, "appendConditionNode", data)} > 添加条件 </button> {data.conditionNodes.map(d => NodeFactory.call(ctx, ctx, d, h))} </div> </div> {addNodeButton.call(ctx, ctx, data, h, true)} </div> ); } if (isCondition(data)) { console.log("isCondition data",data) return ( <div class="col-box"> <div class="center-line"></div> <div class="top-cover-line"></div> <div class="bottom-cover-line"></div> {selfNode} {branchNode} {NodeFactory.call(ctx, ctx, data.childNode, h)} </div> ); } if (hasConcurrentBranch(data)) { console.log("hasConcurrentBranch data",data) // 如果节点是数组 而且是并行分支 添加分支样式包裹 // {data.childNode && NodeFactory.call(ctx, ctx, data.childNode, h)} branchNode = ( <div class="branch-wrap"> <div class="branch-box-wrap"> <div class="branch-box flex justify-center relative"> <button class="btn" onClick={this.eventLancher.bind(ctx, "addConcurrentNode", data)} > 添加并行 </button> {data.concurrentNodes.map(d => NodeFactory.call(ctx, ctx, d, h))} </div> </div> {addNodeButton.call(ctx, ctx, data, h, true)} </div> ); } if (isConcurrent(data)) { console.log("isConcurrent data",data) return ( <div class="col-box"> <div class="center-line"></div> <div class="top-cover-line"></div> <div class="bottom-cover-line"></div> {selfNode} {branchNode} {NodeFactory.call(ctx, ctx, data.childNode, h)} </div> ); } res.push(selfNode); branchNode && res.push(branchNode); data.childNode && res.push(NodeFactory.call(ctx, ctx, data.childNode, h)); return res; }
3、nodes 节点需要增加我们自己添加的内容，以便后续增加节点的时候正常运行
let nodes = { start: createFunc, approver: createFunc, copy: createFunc, delay: createFunc, trigger: createFunc, empty: _ => '', condition: function(ctx, conf, h) { // <i // class="el-icon-document-copy icon" // onClick={this.eventLancher.bind(ctx, "copyNode", conf, ctx.data)} // ></i> return ( <section class="flow-path-card condition" onClick={this.eventLancher.bind(ctx, "edit", conf)} > <header class="header"> <div class="title-box" style="height: 20px;width:160px;"> <span class="title-text">{conf.properties.title}</span> { <input vModel_trim={conf.properties.title} class="title-input" style="margin-top:1px;" onClick={stopPro} /> } </div> <span class="priority">优先级{conf.properties.priority + 1}</span> <div class="actions"> <i class="el-icon-close icon" onClick={this.eventLancher.bind( ctx, "deleteNode", conf, ctx.data )} ></i> </div> </header> <div class="body"> <pre class="text" >{conf.content}</pre> </div> <div class="icon-wrapper left" onClick={ctx.eventLancher.bind( ctx, "increasePriority", conf, ctx.data )} > <i class="el-icon-arrow-left icon left-arrow"></i> </div> <div class="icon-wrapper right" onClick={ctx.eventLancher.bind( ctx, "decreasePriority", conf, ctx.data )} > <i class="el-icon-arrow-right icon right-arrow"></i> </div> </section> ); }, concurrent: function(ctx, conf, h) { // <i // class="el-icon-document-copy icon" // onClick={this.eventLancher.bind(ctx, "copyNode", conf, ctx.data)} // ></i> return ( <section class="flow-path-card concurrent" onClick={this.eventLancher.bind(ctx, "edit", conf)} > <header class="header"> <div class="title-box" style="height: 20px;width:160px;"> <span class="title-text">{conf.properties.title}</span> { <input vModel_trim={conf.properties.title} class="title-input" style="margin-top:1px;" onClick={stopPro} /> } </div> <span class="priority">优先级{conf.properties.priority + 1}</span> <div class="actions"> <i class="el-icon-close icon" onClick={this.eventLancher.bind( ctx, "deleteNode", conf, ctx.data )} ></i> </div> </header> <div class="body"> <pre class="text" >{conf.content}</pre> </div> <div class="icon-wrapper left" onClick={ctx.eventLancher.bind( ctx, "increasePriority", conf, ctx.data )} > <i class="el-icon-arrow-left icon left-arrow"></i> </div> <div class="icon-wrapper right" onClick={ctx.eventLancher.bind( ctx, "decreasePriority", conf, ctx.data )} > <i class="el-icon-arrow-right icon right-arrow"></i> </div> </section> ); } };
