18 lines
6.7 KiB
JavaScript
18 lines
6.7 KiB
JavaScript
import{en as e,r as a,au as l,eo as t,S as o,_ as s,a1 as n,$ as d,a0 as u,a9 as i,o as r,H as c,ay as p,aa as v,ep as m,eq as g,er as f,es as y,a8 as b}from"./.pnpm.BudmgPu7.js";import h from"./CustomNode.BDE2sCbo.js";import{h as k,y as V,ar as _,aq as x,v as C,E as w}from"./element-plus.C1XeB8_q.js";import"./_plugin-vue_export-helper.BCo6x5W8.js";const D={class:"app-container"},N={class:"top-toolbar"},E={class:"toolbar-right",style:{"margin-left":"auto"}},z={class:"main-layout"},U={class:"left-panel"},j={class:"flex-center"},A={class:"scroll-container",style:{height:"calc(100% - 50px)"}},H=["onDragstart"],q={class:"canvas-container"},I={key:0,class:"right-panel"},S={class:"panel-header"},X={key:0,class:"gap-y-2"},Y={key:1,class:"gap-y-2"},$={class:"dialog-footer"},F={class:"dialog-footer"},O=Object.assign({name:"Workflow",inheritAttrs:!1},{__name:"index",setup(O){const{onInit:T,onNodeDragStop:W,onConnect:B,addEdges:G,getNodes:J,getEdges:K,setEdges:L,setNodes:M,screenToFlowCoordinate:P,onNodesInitialized:Q,updateNode:R,addNodes:Z}=e(),ee={type:"smoothstep",
|
||
// 默认边类型
|
||
animated:!0,
|
||
// 是否启用动画
|
||
markerEnd:{type:"arrowclosed",
|
||
// 默认箭头样式
|
||
color:"black"}},ae=a([{id:"5",type:"input",data:{label:"开始"},position:{x:235,y:100},class:"round-start"},{id:"6",type:"custom",
|
||
// 使用自定义类型
|
||
data:{label:"工位：流程1"},position:{x:200,y:200},class:"light"},{id:"7",type:"output",data:{label:"结束"},position:{x:235,y:300},class:"round-stop"}]),le=a({custom:l(h)}),te=a([{id:"e4-5",type:"straight",source:"5",target:"6",sourceHandle:"top-6",label:"测试1",markerEnd:{type:t.ArrowClosed,
|
||
// 使用闭合箭头
|
||
color:"black"}},{id:"e4-6",type:"straight",source:"6",target:"7",sourceHandle:"bottom-6",label:"测试2",markerEnd:{type:t.ArrowClosed,
|
||
// 使用闭合箭头
|
||
color:"black"}}]);T(e=>{e.fitView()}),W(({event:e,nodes:a,node:l})=>{}),B(e=>{G(e)});const oe=a([{name:"测试1"},{name:"测试2"}]),se=a(""),ne=a({}),de=a(!1),ue=a(!1),ie=({edge:e})=>{ne.value=e,se.value="edge"};function re(){const e=K.value,a="smoothstep"===ne.value.type?null:"smoothstep";L([...e.filter(e=>e.id!==ne.value.id),
|
||
// 移除旧的边
|
||
{...ne.value,type:a,label:"Node 3"}])}function ce(){de.value=!0}function pe(){const e=K.value;L([...e.filter(e=>e.id!==ne.value.id)]),w.success("连线删除成功"),se.value=null,ne.value={},de.value=!1}const ve=a({}),me=({node:e})=>{ve.value=e,se.value="node"};function ge(){ue.value=!0}function fe(){const e=J.value;M([...e.filter(e=>e.id!==ve.value.id)]);const a=K.value;L([...a.filter(e=>e.source!==ve.value.id&&e.target!==ve.value.id)]),w.success("点位删除成功"),se.value=null,ve.value={},ue.value=!1}const ye=a(null);function be(e,a){ye.value={id:`node-${Date.now()}`,
|
||
// 动态生成唯一 id
|
||
data:{label:"开始"===a?"开始":"结束"===a?"结束":"工位："+a},type:"开始"===a?"input":"结束"===a?"output":"custom",position:{x:e.clientX,y:e.clientY},animated:!1,class:"开始"===a?"round-start":"结束"===a?"round-stop":"light"}}function he(){ye.value=null}function ke(e){e.preventDefault()}function Ve(e){const a=P({x:e.clientX,y:e.clientY}),l={...ye.value,position:a},{off:t}=Q(()=>{var e;R(null==(e=ye.value)?void 0:e.id,e=>({position:{x:e.position.x-e.dimensions.width/2,y:e.position.y-e.dimensions.height/2}})),t()});ye.value=null,Z(l)}return(e,a)=>(o(),s("div",D,[n("div",N,[n("div",E,[d(r(k),{type:"primary",class:"m-2"},{default:u(()=>[...a[11]||(a[11]=[i("保存",-1)])]),_:1})])]),n("div",z,[n("div",U,[n("div",j,[n("div",{class:"drag-item text-center start-item",draggable:"true",onDragstart:a[0]||(a[0]=e=>be(e,"开始")),onDragend:he},[...a[12]||(a[12]=[n("span",null,"开始",-1)])],32),n("div",{class:"drag-item text-center end-item ml-2",draggable:"true",onDragstart:a[1]||(a[1]=e=>be(e,"结束")),onDragend:he},[...a[13]||(a[13]=[n("span",null,"结束",-1)])],32)]),n("div",A,[(o(!0),s(c,null,p(oe.value,(e,a)=>(o(),s("div",{key:a,class:"drag-item text-center w-full mt-2",draggable:"true",onDragstart:a=>be(a,e.name),onDragend:he},[n("span",null,v(e.name),1)],40,H))),128))])]),n("div",q,[d(r(y),{nodes:ae.value,edges:te.value,class:"basic-flow","default-viewport":{zoom:1},"min-zoom":.2,"max-zoom":4,"node-types":le.value,"default-edge-options":ee,"connect-on-click":!0,onNodeClick:me,onEdgeClick:ie,onDrop:Ve,onDragover:ke},{default:u(()=>[d(r(m)),d(r(g),{"pattern-color":"#aaa",gap:16}),d(r(f))]),_:1},8,["nodes","edges","node-types"])]),se.value?(o(),s("div",I,[n("div",S,[n("span",null,v("edge"===se.value?"连接线规则配置":"点位规则配置"),1),d(r(k),{type:"text",class:"float-right",icon:"close",onClick:a[2]||(a[2]=e=>se.value="")})]),"edge"===se.value?(o(),s("div",X,[d(r(V),{modelValue:ne.value.label,"onUpdate:modelValue":a[3]||(a[3]=e=>ne.value.label=e),placeholder:"线名称",clearable:"",class:"mb-2"},null,8,["modelValue"]),d(r(x),{modelValue:ne.value.type,"onUpdate:modelValue":a[4]||(a[4]=e=>ne.value.type=e),placeholder:"线类型",class:"mb-2"},{default:u(()=>[d(r(_),{label:"折线",value:"smoothstep"}),d(r(_),{label:"曲线",value:"default"}),d(r(_),{label:"直线",value:"straight"})]),_:1},8,["modelValue"]),d(r(x),{modelValue:ne.value.animated,"onUpdate:modelValue":a[5]||(a[5]=e=>ne.value.animated=e),placeholder:"线动画",class:"mb-2"},{default:u(()=>[d(r(_),{label:"开启",value:!0}),d(r(_),{label:"关闭",value:null})]),_:1},8,["modelValue"]),d(r(k),{type:"primary",size:"small",onClick:re},{default:u(()=>[...a[14]||(a[14]=[i("修改",-1)])]),_:1}),d(r(k),{type:"danger",size:"small",onClick:ce},{default:u(()=>[...a[15]||(a[15]=[i("删除",-1)])]),_:1})])):(o(),s("div",Y,[d(r(V),{modelValue:ve.value.data.label,"onUpdate:modelValue":a[6]||(a[6]=e=>ve.value.data.label=e),placeholder:"点位名称",clearable:"",class:"mb-2"},null,8,["modelValue"]),d(r(k),{type:"danger",size:"small",onClick:ge},{default:u(()=>[...a[16]||(a[16]=[i("删除",-1)])]),_:1})]))])):b("",!0)]),d(r(C),{modelValue:de.value,"onUpdate:modelValue":a[8]||(a[8]=e=>de.value=e),title:"删除连线",width:"30%"},{footer:u(()=>[n("div",$,[d(r(k),{onClick:a[7]||(a[7]=e=>de.value=!1)},{default:u(()=>[...a[17]||(a[17]=[i("取消",-1)])]),_:1}),d(r(k),{type:"danger",onClick:pe},{default:u(()=>[...a[18]||(a[18]=[i("确定",-1)])]),_:1})])]),default:u(()=>[a[19]||(a[19]=n("span",null,"是否要删除该连线？",-1))]),_:1},8,["modelValue"]),d(r(C),{modelValue:ue.value,"onUpdate:modelValue":a[10]||(a[10]=e=>ue.value=e),title:"删除点位",width:"30%"},{footer:u(()=>[n("div",F,[d(r(k),{onClick:a[9]||(a[9]=e=>ue.value=!1)},{default:u(()=>[...a[20]||(a[20]=[i("取消",-1)])]),_:1}),d(r(k),{type:"danger",onClick:fe},{default:u(()=>[...a[21]||(a[21]=[i("确定",-1)])]),_:1})])]),default:u(()=>[a[22]||(a[22]=n("span",null,"是否要删除该点位？",-1))]),_:1},8,["modelValue"])]))}});export{O as default};
|