first commit
This commit is contained in:
@@ -0,0 +1,247 @@
|
||||
layui.define(['tool'], function (exports) {
|
||||
const layer = layui.layer;
|
||||
const form = layui.form;
|
||||
const tool = layui.tool;
|
||||
const dropdown = layui.dropdown;
|
||||
const opts={
|
||||
"flowBox":'flowBox',
|
||||
"flowBar":'flowBar',
|
||||
"callback": null
|
||||
};
|
||||
const obj = {
|
||||
loading:false,
|
||||
size:1.0,
|
||||
//节点模版
|
||||
nodeApend: function (types,nodeId) {
|
||||
let nodeHtml = '';
|
||||
if(types == 1){
|
||||
//审核人
|
||||
nodeHtml = `<div><div class="node-wrap">
|
||||
<div class="node-wrap-box">
|
||||
<div class="node-title" style="background:#ffb800;">
|
||||
<span class="user-edit">审核人</span>
|
||||
<i class="remove-node" data-id="${nodeId}">✖</i>
|
||||
</div>
|
||||
<div>
|
||||
<span>请设置审核人</span>
|
||||
<i class="select-icon"><?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12L31 24L19 36" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-add-btn-box">
|
||||
<div class="add-node-btn">
|
||||
<button class="add-node">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><div>`;
|
||||
}
|
||||
else if(types == 2){
|
||||
//抄送人
|
||||
nodeHtml = `<div><div class="node-wrap">
|
||||
<div class="node-wrap-box">
|
||||
<div class="node-title" style="background:#1e9fff;">
|
||||
<span class="user-edit">抄送人</span>
|
||||
<i class="remove-node" data-id="${nodeId}">✖</i>
|
||||
</div>
|
||||
<div>
|
||||
<span>请设置抄送人</span>
|
||||
<i class="select-icon"><?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12L31 24L19 36" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-add-btn-box">
|
||||
<div class="add-node-btn">
|
||||
<button class="add-node">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><div>`;
|
||||
}
|
||||
else if(types==3){
|
||||
//条件分支
|
||||
nodeHtml = `<div class="branch-wrap">
|
||||
<div class="branch-box-wrap">
|
||||
<div class="branch-box">
|
||||
<span class="add-branch" title="添加条件">添加条件分支</span>
|
||||
<div class="col-box">
|
||||
<div class="condition-node">
|
||||
<div class="condition-node-box">
|
||||
<div class="condition-judge">
|
||||
<div class="condition-title">
|
||||
<input type="text" class="condition-input" placeholder="条件1">
|
||||
<span class="condition-priority">优先级1</span>
|
||||
<i class="remove-node" data-id="${nodeId}">✖</i>
|
||||
</div>
|
||||
<div>
|
||||
请设置条件
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-add-btn-box">
|
||||
<div class="add-node-btn">
|
||||
<button class="add-node">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-left-cover-line"></div>
|
||||
<div class="bottom-left-cover-line"></div>
|
||||
</div>
|
||||
<div class="col-box">
|
||||
<div class="condition-node">
|
||||
<div class="condition-node-box">
|
||||
<div class="condition-judge">
|
||||
<div class="condition-title">
|
||||
<input type="text" class="condition-input" placeholder="其他情况">
|
||||
<span class="condition-priority">优先级2</span>
|
||||
</div>
|
||||
<div>
|
||||
如存在未满足其他分支条件的情况，则进入此分支
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-add-btn-box">
|
||||
<div class="add-node-btn">
|
||||
<button class="add-node">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-right-cover-line"></div>
|
||||
<div class="bottom-right-cover-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-add-btn-box">
|
||||
<div class="add-node-btn">
|
||||
<button class="add-node">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
else{
|
||||
//条件内容
|
||||
nodeHtml = `<div class="col-box">
|
||||
<div class="condition-node">
|
||||
<div class="condition-node-box">
|
||||
<div class="condition-judge">
|
||||
<div class="condition-title">
|
||||
<input type="text" class="condition-input" placeholder="条件1">
|
||||
<span class="condition-priority">优先级1</span>
|
||||
<i class="remove-node" data-id="${nodeId}">✖</i>
|
||||
</div>
|
||||
<div>
|
||||
请设置条件
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-add-btn-box">
|
||||
<div class="add-node-btn">
|
||||
<button class="add-node">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
return nodeHtml;
|
||||
},
|
||||
init: function (options) {
|
||||
this.settings = $.extend({}, opts, options);
|
||||
let me = this;
|
||||
let flowBox = $('#'+me.settings.flowBox);
|
||||
let flowBar = $('#'+me.settings.flowBar);
|
||||
//添加节点
|
||||
flowBox.on("click",".add-node",function(e){
|
||||
let that = $(this);
|
||||
dropdown.render({
|
||||
elem: that,
|
||||
show: true, // 外部事件触发即显示
|
||||
data: [{
|
||||
title: '审 核 人',
|
||||
id: '1',
|
||||
templet: function(d){
|
||||
return '<i style="vertical-align: sub; color:red"><?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 36L8.00461 28.0426C8.00551 27.4906 8.45313 27.0432 9.00519 27.0426C12.3391 27.0426 15.6731 27.0426 19.0071 27.0426C19.9286 27.0426 19.9237 26.2252 19.9237 24.2792C19.9237 22.3332 15.0221 20.6941 15.0221 13.8528C15.0221 7.01151 20.0999 5 24.32 5C28.5401 5 33.1366 7.01151 33.1366 13.8528C33.1366 20.6941 28.2607 21.7818 28.2607 24.2792C28.2607 26.7765 28.2607 27.0426 29.0413 27.0426C32.3609 27.0426 35.6806 27.0426 39.0003 27.0426C39.5525 27.0426 40.0003 27.4904 40.0003 28.0426V36H8Z" fill="none" stroke="#ffb800" stroke-width="4" stroke-linejoin="round"/><path d="M8 42H40" stroke="#ffb800" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg></i> ' + d.title;
|
||||
}
|
||||
}, {
|
||||
title: '抄 送 人',
|
||||
id: '2',
|
||||
templet: function(d){
|
||||
return '<i style="vertical-align: sub; color:red"><?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M43 5L29.7 43L22.1 25.9L5 18.3L43 5Z" stroke="#1e9fff" stroke-width="4" stroke-linejoin="round"/><path d="M43.0001 5L22.1001 25.9" stroke="#1e9fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg></i> ' + d.title;
|
||||
}
|
||||
}, {
|
||||
title: '条件分支',
|
||||
id: '3',
|
||||
templet: function(d){
|
||||
return '<i style="vertical-align: sub; color:red"><?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 33V15" stroke="#16b777" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="10" y="9" width="28" height="6" fill="none" stroke="#16b777" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 32L14 25H33.9743L40 32" stroke="#16b777" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="33" width="8" height="8" fill="none" stroke="#16b777" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="20" y="33" width="8" height="8" fill="none" stroke="#16b777" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="36" y="33" width="8" height="8" fill="none" stroke="#16b777" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg></i> ' + d.title;
|
||||
}
|
||||
}],
|
||||
click: function(data, othis){
|
||||
let timestamp = new Date().getTime();
|
||||
that.parent().parent().parent().parent().after(me.nodeApend(data.id,timestamp));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//添加条件
|
||||
flowBox.on("click",".add-branch",function(e){
|
||||
let timestamp = new Date().getTime();
|
||||
$(this).parent().find(".col-box").first().after(me.nodeApend(4,timestamp));
|
||||
let branchWrap = $($(this).parents(".branch-wrap")[0]);
|
||||
let colBbox = branchWrap.find('.col-box');
|
||||
colBbox.each(function(index,item){
|
||||
$(item).find('.condition-priority').html('优先级'+(index+1));
|
||||
if(index<colBbox.length-1){
|
||||
$(item).find('.condition-input').attr('placeholder','条件'+(index+1));
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
//删除节点、条件
|
||||
flowBox.on("click",".remove-node",function(e){
|
||||
if($(this).parents().hasClass("condition-judge")){
|
||||
let idx =$(this).closest('.col-box').index();
|
||||
let branchWrap = $($(this).parents(".branch-wrap")[0]);
|
||||
let colBbox = branchWrap.find('.col-box');
|
||||
if(colBbox.length==2 || idx==1){
|
||||
layer.confirm('确定需要删除整个条件分支？', {icon: 3}, function(){
|
||||
branchWrap.remove();
|
||||
layer.closeAll();
|
||||
});
|
||||
}
|
||||
else{
|
||||
$(this).closest(".col-box").remove();
|
||||
colBbox = branchWrap.find('.col-box');
|
||||
colBbox.each(function(index,item){
|
||||
$(item).find('.condition-priority').html('优先级'+(index+1));
|
||||
if(index<colBbox.length-1){
|
||||
$(item).find('.condition-input').attr('placeholder','条件'+(index+1));
|
||||
}
|
||||
});
|
||||
}
|
||||
}else if($(this).parents().hasClass("node-wrap")){
|
||||
$(this).closest(".node-wrap").parent().remove();
|
||||
}
|
||||
})
|
||||
|
||||
//放大、缩小
|
||||
flowBar.on("click",".zoom-ctrl",function(e){
|
||||
let type = $(this).data('type'),size=1;
|
||||
if(type==1){
|
||||
size = me.size - 0.25;
|
||||
}
|
||||
else{
|
||||
size = me.size + 0.25;
|
||||
}
|
||||
|
||||
if(size<=0){
|
||||
layer.msg('已经是最小了');
|
||||
return false;
|
||||
}
|
||||
else if(size>3){
|
||||
layer.msg('已经是最大了');
|
||||
return false;
|
||||
}
|
||||
me.size = size;
|
||||
flowBox.css("transform","scale("+size+")");
|
||||
flowBar.find('.zoom-num').html((size*100)+'%');
|
||||
})
|
||||
}
|
||||
};
|
||||
exports('oaFlow', obj);
|
||||
});
|
||||
Reference in New Issue
Block a user